HTML and CSS

Fundamental HTML5 Structure and Content Elements

HTML (HyperText Markup Language) is the standard language for creating web content, and files must be saved with the .html extension.
Every HTML5 document must follow a standard structural hierarchy:
- <!DOCTYPE html>: A declaration that informs the browser the document is HTML5.
- <html>: The root element that wraps all content on the page.
- <head>: Contains metadata, which is information about the site that does not appear directly on the web page (e.g., character encoding, links to stylesheets).
- <meta charset='utf-8'>: Specifies the character encoding for the document.
- <title>: Defines the text that appears in the browser's tab.
- <body>: Contains all the visible content of the web page, such as text, images, and videos.
Content tags for organizing text:
- Headings: Range from <h1> (most important/largest) to <h6> (least important/smallest).
- Paragraphs: Defined by the <p> tag for standard text blocks.
- Text Formatting Tags:
  - <b> or <strong>: For bold or important text.
  - <i> or <em>: For italicized or emphasized text.
  - <mark>: For highlighted/marked text.
  - <small>: For smaller text.
  - <del>: For deleted/strike-through text.
  - <ins>: For inserted/underlined text.
  - <sub>: For subscript text.
  - <sup>: For superscript text.

Introduction to CSS (Cascading Style Sheets)

CSS is used to describe how HTML elements are displayed on the screen, controlling layout and styling.
CSS Syntax Components:
- Selector: The HTML element being styled (e.g., h1).
- Declaration Block: Enclosed in curly braces {}.
- Property and Value: Separated by a colon (e.g., color: red;).
- Semicolons: Used to separate individual declarations.
Three Methods of Applying CSS:
- Inline Styling: Uses the style attribute directly within an HTML tag (e.g., <h1 style='color: blue;'>). Best for quick, unique changes.
- Internal Styling: Uses the <style> tag within the <head> section of the HTML document.
- External Stylesheet: The most efficient method, where styles are written in a separate .css file and linked in the HTML <head> using <link rel="stylesheet" href="style.css">.
Priority Hierarchy: Browsers read styles in the order of External → Internal → Inline, with Inline being the most specific and taking the highest priority.

Color Theory, Accessibility, and Screen Readers

Additive Color Mixing: Used for digital light/screens.
- Primary Colors: Red, Green, Blue (RGB).
- Secondary Colors: Yellow ( $\text{Red} + \text{Green}$ ), Cyan ( $\text{Green} + \text{Blue}$ ), and Magenta ( $\text{Red} + \text{Blue}$ ).
- Mixing equal amounts of RGB creates grey; full intensity of all three results in white; no light results in black.
Defining Colors in CSS:
- Names: Standard names like red, blueviolet, or lightyellow.
- Hex Codes: Hexadecimal values starting with # (e.g., #FF7382).
- RGB: Defined by values from 0 to 255 (e.g., rgb(255, 67, 20)).
- HSL: Hue, Saturation, and Lightness (e.g., hsl(50, 100%, 50%)).
Accessibility and Screen Readers:
- Accessibility refers to how perceivable content is for all users, including those with low vision or color blindness.
- Screen Readers: Software that reads web content aloud. Proper heading structures ( $h1$ to $h6$ ) allow users to skip through sections easily.
- Contrast: The WebAim Contrast Checker should be used to ensure text is readable against its background using Hex codes.

Hyperlinks, Multimedia, and Lists

Hyperlinks: Created using the <a> (anchor) tag with the href attribute for the URL.
- Link States:
  - :link: Normal, unvisited.
  - :visited: Previously visited.
  - :hover: Mouse cursor is over the link.
  - :active: The moment the link is clicked.
- Order Rule: :hover must come after :link and :visited; :active must come after :hover.
Images: Inserted with the <img> tag.
- src: The file path/name of the image.
- alt: Alternate text description for accessibility and if the image fails to load.
YouTube Embedding: Uses the <iframe> tag.
- Steps: Share → Embed → Copy code.
- Validation Note: The frameborder attribute often generated by YouTube is obsolete in HTML5 and should be removed to pass W3C validation.
HTML Lists:
- Unordered Lists (<ul>): Bulleted lists.
- Ordered Lists (<ol>): Numbered lists.
- List Items (<li>): The individual items within either list type.

Advanced Layout: Divs and the CSS Box Model

The <div> Element: A container used to group HTML elements for styling and layout purposes. It acts as a block-level element.
CSS Box Model Concepts:
- Content: The text/images.
- Padding: Space between content and the border (inside the box).
- Border: The line surrounding the padding and content.
  - Shorthand property: size style color (e.g., border: 5px solid red;).
- Margin: Space outside the border (separates elements from each other).
- Outline: Drawn outside the border; it does not affect the element's height or width and may overlap other elements.
The display Property:
- block: Element takes up the full width available.
- inline: Element takes only as much width as necessary and allows other elements next to it.
- inline-block: Elements sit next to each other like inline but allow setting width and height like block.
- none: Hides the element entirely.
Centering Elements: To center a block element with a set width, use margin: auto;.

Navigation Bars and Page Linking

A navigation bar is typically a group of links (often structured as a <ul> inside a <nav> tag) to allow users to move between the .html files of a website.
Consistency: Navigation should be identical across all pages for usability.
Active Class: Used to highlight the current page in the menu (e.g., <a href="index.html" class="active">).
Relative Links: Files in the same folder should be linked by their filename only (e.g., href="page2.html").

Typography and Fonts

Font-Family: Used to change the typeface. If a font name has multiple words, it must be in quotes (e.g., "Times New Roman").
Fallback Fonts: Essential if the browser cannot load the primary font. Common categories include:
- serif: For fonts with small decorative strokes (e.g., Times New Roman, Georgia).
- sans-serif: Plain stroke endings (e.g., Arial, Verdana, Helvetica).
- monospace: Fixed-width characters (e.g., Courier New).
- cursive: Handwritten style.
- fantasy: Decorative styles.
Google Fonts: Linked externally by adding a code snippet to the top of the CSS file using the @import rule. Spaces in font names are replaced with a + in the URL (e.g., ?family=Reenie+Beanie).

HTML Tables

Table Structure Tags:
- <table>: The container for the table.
- <tr>: Table Row.
- <th>: Table Header (text is usually bold and centered by default).
- <td>: Table Data/Cell.
Attributes:
- colspan: Merges cells across columns.
- rowspan: Merges cells across rows.
CSS Table Styling:
- border-collapse: collapse;: Merges adjacent borders into a single border.
- vertical-align: Controls the alignment of content within a cell.

Computer Systems: Hardware and Software

Four Functions of a Computer System: Input, Processing, Output, and Storage.
History: Earliest computers were mechanical (e.g., made of gears/levers) before transitioning to electrical circuits.
Central Processing Unit (CPU): The "brain" of the computer that processes instructions. Key components include the Control Unit and the Arithmetic Logic Unit.
Hardware Categories:
- Input: Keyboard, Mouse, Microphone, Camera.
- Output: Monitor, Printer, Speakers.
- Storage: Hard Drives, Flash Drives.
Software Types:
- System Software: Manages hardware (e.g., Operating Systems like Windows, macOS).
- Application Software: Performs specific tasks for users (e.g., Web Browsers, Word Processors).
Operating System (OS): Software that manages hardware, software resources, and provides common services for programs.

Binary Code and Data Representation

Binary Number System: Data is represented as a series of 0s and 1s (bits).
Binary to Decimal Formulas:
- The highest number representable by $n$ bits is $2^n - 1$ .
- 8-bit Max: $2^8 - 1 = 255$ .
- 16-bit Max: $2^{16} - 1 = 65,535$ .
Units of Information:
- $1 \, \text{Byte} = 8 \, \text{bits}$ .
- $1 \, \text{Kilobyte (KB)} = 1,000 \, \text{bytes}$ (or 1,024 in binary-based systems like KiB).
- Sequence: Bits → Bytes → Kilobyte (KB) → Megabyte (MB) → Gigabyte (GB) → Terabyte (TB) → Petabyte (PB).
Character Sets:
- ASCII: Early system for representing characters as numbers.
- Unicode: A modern, universal standard representing characters from all languages.
- UTF-8: The most common character set for the web because it is efficient and compatible with ASCII.
Binary Conversions:
- Convert 201 to 8-bit binary: $11001001$
- Convert 182 to 8-bit binary: $10110110$
- Convert 11001001 to decimal: $128 + 64 + 8 + 1 = 201$
- Convert 01010010 to decimal: $64 + 16 + 2 = 82$

Computer Memory and Storage

Primary Storage (Main Memory):
- RAM (Random Access Memory): Volatile (data is lost when power is off); used for running programs and active data.
- ROM (Read-Only Memory): Non-volatile (data is permanent); contains startup instructions.
Secondary Storage: Used for long-term storage of files and programs.
- Magnetic: Hard Disk Drives (HDD) - data stored via magnetized platters.
- Optical: CDs, DVDs, Blu-ray - data stored using pits and lands (flat areas and hollows) read by a laser.
- Solid State (SSD): Faster, more durable storage using flash memory.
- Cloud Storage: Data stored on remote servers accessed via the internet; offers benefits of accessibility but requires internet and has security considerations.