Explore

Unit 1: Hypertext Markup Language

Makiel [Muh-Keel]

Last edited 528 days ago by Makiel [Muh-Keel].

⁠

The WebDev Trifecta consists of HTML, CSS, and JavaScript.

Human Body Analogy:

HTML (The Parts List):

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):

Acts as the brain

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

Most standardized flavor

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 are not allowed:

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

Frames are not allowed:

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

Frames are allowed:

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

Local Storage:

Provides ability to store data on the client's device

Supports offline use and improved performance

Responsive Design Elements:

CSS Hover Options:

Allows dynamic changes in element appearance when hovered over by a cursor

Enhances user interaction and visual feedback

Media Queries:

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

Semantic HTML Elements:

Provides elements such as <header>, <nav>, <article>, and <section>

Improves the structure and meaning of web content for assistive technologies

Game Development:

<canvas> Features:

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

Geolocation API:

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)

Benefits and Uses:

Scalability:

Retains quality at any size without losing resolution

Ideal for responsive design and various screen sizes

Editability:

Easy to modify using text editors or graphic design software

Allows for dynamic manipulation via CSS and JavaScript

Performance:

Typically smaller file sizes compared to raster images

Improves load times and reduces bandwidth usage

Interactivity:

Supports interactive elements like animations and user interactions

Enhances user experience with dynamic graphics

Accessibility:

Can include descriptive metadata and text

Improves accessibility for users with disabilities

Why do programming languages have numbers in relation to HTML

Versioning:

Helps distinguish between different iterations of the language

Indicates the evolution and improvements made over time

Compatibility:

Ensures developers know which features and functionalities are available

Helps maintain backward compatibility with older versions

Standardization:

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

Standards:

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

W3C Standards:

Extensive list of standards ensuring markup is accessible to anyone

Covers language, disability, and browser compatibility

Cross-Browser Compatibility:

Definition:

Code can be rendered appropriately on multiple browsers

Importance:

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:

Adaptability:

Cleaner code is more adaptable to future changes

Facilitates easier updates, including new code or revisions

Stability:

Less likely to break with browser updates

Standards ensure browsers understand the page structure

Team Collaboration:

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)

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.