Web Technologies Fundamental Concepts Summary

HTML Overview and Structure

  • Definition: HTML (Hypertext Markup Language) defines the structure and content of web pages using a system of markup tags.
  • Standard Document Structure:
    • <!DOCTYPE html>: Defines the document type for modern HTML5.
    • <html>: The root element containing all other elements.
    • <head>: Contains meta-information, including the <title>, character encoding, and links to CSS or scripts.
    • <body>: Contains visible content like text, images, and links.
  • Syntax Rules: Tags are enclosed in angle brackets (< >), typically in opening and closing pairs (e.g., <tagname>content</tagname>). Attributes provide additional information in name-value pairs within the start tag.
  • Case Sensitivity: HTML is not case-sensitive, but lowercase is standard practice for consistency.

Basic Text Markup and Lists

  • Headings: Six levels, from <h1> (most important) to <h6> (least important).
  • Paragraphs: Defined by the <p> tag; these are block-level elements with vertical spacing.
  • Emphasis: <em> for italics and <strong> for bold text.
  • Text Formatting: Legacy tags like <i>, <b>, and <u> are outdated in favor of CSS styling.
  • Line and Rule: <br> inserts a line break; <hr> inserts a horizontal rule.
  • Lists:
    • Ordered Lists (<ol>): Sequential items using numbers or letters.
    • Unordered Lists (<ul>): Bulleted items.
    • Definition Lists (<dl>): Consists of terms (<dt>) and descriptions (<dd>).

Layouts, Frames, and Navigation

  • Semantic Elements: Elements like <header>, <nav>, <main>, <section>, <article>, and <footer> describe content roles for better accessibility and SEO.
  • Layout Techniques:
    • CSS Grid: A two-dimensional system for rows and columns (e.g., grid-template-columns: 1fr 1fr1fr \, 1fr).
    • Flexbox: A one-dimensional model for aligning items along a single axis using properties like flex-direction, justify-content, and align-items.
  • Frames: Legacy method to divide pages into multiple sections using <frameset> and <frame>; <iframe> is used to embed external documents.
  • Hypertext Links: Created using the <a> (anchor) tag with the href attribute specifying the target URL.
  • Images: Embedded using the <img> tag with attributes src, alt (accessibility), width, and height.

Tables and Forms

  • Tables: Used for tabular data via <table>, <tr> (row), <th> (header), and <td> (data). Attributes include colspan and rowspan to merge cells.
  • Forms: Used to collect user data via <form>.
    • Attributes: action (target URL) and method (GET or POST).
    • Elements: <input> fields (types: text, password, checkbox, submit), <label>, and required validation attributes.

CSS (Cascading Style Sheets) and Box Model

  • Purpose: Facilitates separation of concerns, consistency, responsive design, and accessibility.
  • Implementation: Inline (style attribute), Internal (<style> in head), or External (<link> to .css file).
  • Syntax: Consists of a Selector and Declarations (property-value pairs).
  • The Box Model: Defines element spacing through four layers:
    • Content: The actual text or image.
    • Padding: Space between content and border.
    • Border: Surrounds the padding.
    • Margin: Space outside the border for separating adjacent elements.
  • Positioning: Includes static, relative, absolute (relative to nearest positioned ancestor), and fixed (relative to viewport). z-index manages stacking order.

Dynamic HTML (DHTML) and DOM

  • Concept: A combination of HTML, CSS, and JavaScript to create interactive content.
  • Document Object Model (DOM): A tree-like programming interface representing documents as nodes. JavaScript uses the DOM to add, remove, or modify elements dynamically.
  • Event Handling: Uses handlers like onclick, onmouseover, and onchange to trigger scripts based on user interactions.

XML, DTD, and Schemas (XSD)

  • XML (eXtensible Markup Language): A hierarchical language for data exchange that is human and machine-readable.
  • Validation Systems:
    • DTD (Document Type Definition): Defines structure and elements; lacks namespace support and complex data types.
    • XML Schema (XSD): A W3C recommendation using XML syntax. Supports data types (e.g., xs:decimal, xs:string), namespaces, and inheritance.
  • Example Rule: Attributes in XML must always be quoted (e.g., id="11").

XML Parsers and XHTML

  • Parsers:
    • DOM Parser: Loads the entire XML document into memory; allows random access but is memory-intensive.
    • SAX (Simple API for XML): Sequential, event-based processing; efficient for large documents with low memory usage.
  • XHTML (Extensible Hypertext Markup Language): Restructures HTML to conform to strict XML syntax (e.g., all tags must be closed, lowercase elements, quoted attributes).
  • Meta Tags: Metadata in <head> like <meta charset="UTF-8"> or descriptions for SEO and browser instructions.
  • Character Entities: Special codes for reserved characters (e.g., &lt; for <, &gt; for >, and &amp; for &).