The WebDev Trifecta consists of HTML, CSS, and JavaScript.
Human Body Analogy:
The Arms, Legs, Head, Skeleton Creates actual elements on a web page Elements can be assigned style and behavior CSS (What the parts look like): Manipulates appearance of HTML elements Changes height, eye color, skin color, etc. JavaScript (What the parts do): Controls behavior of the website (e.g., making the person run, jump, or wave)
Different versions of HTML
When rendering the markup a browser needs to correctly interpret what version or flavor was used to design the page. To declare this, the Doctype declaration is used.
We use the <!Doctype> tag on the very first line of code to declare the HTML version.
Ex: if the file starts with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, then the browser will know to render the page using HTML4 with a transitional flavor.
Strict
Ensures clean, modern code practices Doesn't allow the use of deprecated or presentational elements: Deprecated elements: <font>, <center>, etc. Presentational elements: elements purely for styling purposes, such as <b> for bold Frames: HTML elements like <frame> and <frameset> used to divide the browser window into multiple sections Transitional
Allows for easier transition from older HTML versions Permits the use of deprecated or presentational elements: Useful for maintaining compatibility with older websites Enables gradual updating of legacy code Retains some restrictions to encourage cleaner, more modern code Frameset
Designed specifically for documents that utilize frames Allows the use of deprecated or presentational elements: Supports older coding practices Utilizes elements like <frame> and <frameset> to divide the browser window Often used for web applications requiring multiple sections or navigation pane
HTML5 Upgrades
Enhanced User Experience (UX): Drag-and-Drop Capability: Allows users to drag items from one part of the web page to another Enhances interactivity and usability for tasks such as file uploads and organization Provides ability to store data on the client's device Supports offline use and improved performance Responsive Design Elements: Allows dynamic changes in element appearance when hovered over by a cursor Enhances user interaction and visual feedback Enables web pages to adapt to different screen sizes and orientations Improves usability across a range of devices, from smartphones to desktops Accessibility for Users with Disabilities: Default Visualization Alternatives: Includes features like subtitles, captions, and alternative text for images Ensures content is accessible to users with visual, auditory, or cognitive impairments Provides elements such as <header>, <nav>, <article>, and <section> Improves the structure and meaning of web content for assistive technologies Allows drawing of graphics and animations directly on the web page Facilitates the creation of interactive games and visualizations WebGL (Web Graphics Library): Provides API for rendering 3D graphics within the browser Enhances gaming experiences and complex visual applications Other Notable Capabilities: Audio and Video Integration: Embeds audio and video content directly using <audio> and <video> tags Eliminates the need for external plugins like Flash Enables web applications to access the user's geographical location Supports location-based services and features What is an SVG and how is it useful
Scalable Vector Graphics (SVG): A markup language for describing two-dimensional vector graphics Based on XML (Extensible Markup Language) Retains quality at any size without losing resolution Ideal for responsive design and various screen sizes Easy to modify using text editors or graphic design software Allows for dynamic manipulation via CSS and JavaScript Typically smaller file sizes compared to raster images Improves load times and reduces bandwidth usage Supports interactive elements like animations and user interactions Enhances user experience with dynamic graphics Can include descriptive metadata and text Improves accessibility for users with disabilities
Why do programming languages have numbers in relation to HTML
Helps distinguish between different iterations of the language Indicates the evolution and improvements made over time Ensures developers know which features and functionalities are available Helps maintain backward compatibility with older versions Provides a clear reference for updates and changes Facilitates adherence to standards set by organizations like W3C (World Wide Web Consortium)
Why Use Universal Markup?
Consistent User Experience: Ensures websites are accessible from various devices and browsers Provides a similar experience regardless of the browser used Apply within a universal markup language Follow standards set for HTML5 by the World Wide Web Consortium (W3C) W3C is an international group developing web standards Promotes the benefits of web communication for all people Standards promote accessibility for users with disabilities Extensive list of standards ensuring markup is accessible to anyone Covers language, disability, and browser compatibility Cross-Browser Compatibility:
Code can be rendered appropriately on multiple browsers Different browsers render web pages differently Important to write code using universal standards followed by all browsers Ensures uniform rendering and consistent user experience across different browsers Consequences of Not Following Standards: Pages may render with unexpected results if W3C standards are not met Can make pages more difficult to use and less accessible Additional Benefits of Using Universal Markup:
Cleaner code is more adaptable to future changes Facilitates easier updates, including new code or revisions Less likely to break with browser updates Standards ensure browsers understand the page structure Ensures everyone follows the same coding practices Enhances teamwork and interchangeability among developers
Web Semantics
Definition:
Refers to the use of specific HTML elements to provide meaning and context to the content on a web page Enhances the clarity of the code for both developers and browsers Purpose:
Improves search engine optimization (SEO) Enhances accessibility for users with disabilities Facilitates better understanding by web crawlers and assistive technologies Key Semantic Elements:
<header>: Defines the header of a section or page, typically containing navigational links or introductory content <nav>: Represents a section containing navigation links <article>: Defines independent, self-contained content <section>: Groups related content into a section <aside>: Contains content tangentially related to the main content, such as sidebars or pull quotes <footer>: Defines the footer for a section or page, usually containing author information, copyrights, or navigation links <main>: Specifies the main content of a document, excluding headers, footers, and sidebars <figure>: Represents self-contained content, such as illustrations, diagrams, or photos, often with a caption <figcaption>: Provides a caption or legend for the <figure> element <mark>: Highlights or marks text that is relevant or important Benefits:
Search engines better understand the structure and content of web pages Can improve search rankings and visibility Assistive technologies can more easily navigate and interpret the content Enhances the experience for users with disabilities Readability and Maintenance: Makes code easier to read, understand, and maintain Improves collaboration among developers Adheres to modern web standards, ensuring compatibility with future technologies and browsers
In what order does a browser load content?
The browser begins by parsing the HTML document. It builds the Document Object Model (DOM) tree, which represents the structure of the HTML content. As the HTML is parsed, the browser identifies external resources such as CSS, JavaScript files, images, and fonts. These resources are fetched asynchronously, while the HTML parsing continues. CSS files are downloaded and parsed to construct the CSS Object Model (CSSOM) tree. The CSSOM tree is combined with the DOM tree to apply styles to the HTML elements. JavaScript files are downloaded and executed. Scripts can manipulate the DOM and CSSOM, which may affect how content is rendered. If a <script> tag is encountered with the defer attribute, it is executed after the HTML parsing is complete. If a <script> tag is encountered with the async attribute, it is executed as soon as it is downloaded, without blocking the HTML parsing. Once the DOM and CSSOM are constructed, the browser generates the render tree. The render tree is used to layout the elements on the screen and paint the content. Why is it important that the browser load in that order?
Ensures that content is displayed as quickly as possible to the user. Allows for parallel downloading of resources, improving overall page load time. CSS must be applied before rendering to ensure the content appears as intended. JavaScript can alter the DOM and CSSOM, so it needs to be executed in the right sequence to avoid issues with rendering and functionality. Prioritizes loading visible content to improve perceived performance. Ensures that essential styles and scripts are applied before interactive elements become available. What is the DOM?
Document Object Model (DOM): A programming interface for web documents. Represents the structure of an HTML or XML document as a tree of objects. Each node in the tree corresponds to a part of the document (e.g., elements, attributes, text). Allows scripts to access, modify, and manipulate the structure, content, and styling of the document dynamically. Changes to the DOM are reflected in what the user sees in the browser. What is the CSSOM?
CSS Object Model (CSSOM): A tree structure that represents the styles applied to the HTML document. Built by parsing the CSS files and inline styles. Each node corresponds to a style rule or declaration. Works in conjunction with the DOM to apply styles to the elements in the document. Allows scripts to read and modify CSS styles dynamically. Ensures that any changes to CSS are immediately reflected in the rendering of the document. By understanding and optimizing the loading order and the roles of the DOM and CSSOM, developers can create more efficient, responsive, and user-friendly web pages.
HTML API
API (application programming interface) provides a way for different software components to communicate with each other. APIs play a critical role in modern software development, enabling seamless interaction between different software components and services, thereby enhancing the capabilities and efficiency of applications.
HTML APIs are sets of rules and tools that help developers build websites or applications.
For example, another frequently used API is the HTML5 Bootstrap API, which is a way to provide access to some features available through the Bootstrap framework (). Purpose:
They make it easier to do specific tasks when creating web pages or apps. Local Tasks:
Examples include playing audio and video directly in the browser without needing extra plugins. Other examples might be drawing graphics or storing data locally on the user's device. Communication Tasks:
Help the user's computer (client) talk to a web server. This includes sending and receiving data, like when you submit a form on a website and it sends the information to a database. Examples:
Media APIs
Allow playing music, videos, or other media directly on the webpage. Canvas API
Lets developers draw graphics, such as games or charts, directly on the web page. Geolocation API
Provides information about the user's location to the web application, useful for maps and location-based services. Local Storage API
Stores data on the user's computer, so the web application can remember things even after the browser is closed. Fetch API
Simplifies sending and receiving data between the client and server, like when loading new content on a page without refreshing it. HTML5 Drag and Drop API:
Manages the passage of information when the end user drags and drops files into specific areas on a web page
Using the Hypertext Markup Language
<video> element
The <video> element was introduced in HTML5 and gave developers a way to implement media without using third-party plugins like the now obsolete Adobe Flash.
Unit 1: Hypertext Markup Language
