HTML

  1. Session 1.1: HTML Basics and Structure

    • Objectives:

      • Explore web history.

      • Create HTML document structure.

      • Insert HTML elements, attributes, and metadata.

      • Define page title.

    • Curbside Thai Case:

      • Develop website showcasing daily locations, menu, catering, and contact information.

      • Convert existing materials into web pages using HTML5.

    • HTML Document Structure:

      • <html>: Marks the beginning of the HTML document.

      • <head>: Contains document information (metadata).

      • <meta>: Contains information about the document.

      • <title>: Specifies the page title (in browser tab).

      • <body>: Contains the content that appears on the page.

      • <!DOCTYPE html>: Processing instruction indicating HTML5.

    Exploring the World Wide Web

    • Networks:

      • Network: Structure for sharing information among devices (nodes/hosts).

      • Server: Host providing information/services.

      • Client: Device receiving services.

      • LAN: Local Area Network (small geographic area).

      • WAN: Wide Area Network (wider area, interconnected LANs).

      • Internet: Largest WAN.

    • Hypertext:

      • Hypertext: Data interconnected via links (hyperlinks).

      • Developed at CERN (Timothy Berners-Lee, 1989).

      • Led to the World Wide Web.

    Introducing HTML

    • Web Pages and Web Servers:

      • Web pages are stored on web servers.

      • Accessed via web browsers.

    • HTML (Hypertext Markup Language):

      • A markup language that describes document content and structure using tags.

    • History of HTML:

      • Early HTML: Inconsistent browser implementations.

      • W3C (World Wide Web Consortium): Set standards for browsers.

      • HTML 4.01 (1999): Support for multimedia and commerce.

      • XHTML (Extensible Hypertext Markup Language): Stricter standards.

      • WHATWG (Web Hypertext Application Technology Working Group): Developed HTML5.

      • HTML5: Current version, compatible with older versions.

      • Deprecated features are phased out but may still be encountered in older websites.

    • HTML Version History

      • HTML 1.0 (1989): First public version.

      • HTML 2.0 (1995): Added interactive elements.

      • HTML 3.2 (1997): Enhanced support for tables, forms, and scripting.

      • HTML 4.01 (1999): Introduced style sheets and multimedia support.

      • XHTML 1.0 (2001): Reformulation of HTML 4.01 using XML.

      • XHTML 2.0: Discontinued in 2009.

      • HTML5 (2012): Support for mobile design, semantic elements, and multimedia.

    Tools for Working with HTML

    • Text Editors:

      • Basic editors (Notepad, TextEdit).

      • Enhanced editors (Notepad++, UltraEdit, CoffeeCup, BBEdit, ConTEXT) offer syntax checking and templates.

    • Web IDEs (Integrated Development Environments):

      • Comprehensive software (Adobe Dreamweaver, Aptana Studio, NetBeans IDE, Komodo IDE).

    • Testing Your Code:

      • W3C validation website (validator.w3.org) for syntax errors.

      • Test on multiple browsers (Chrome, IE, Safari, Firefox, Opera) and screen resolutions.

      • Online testing services (BrowserStack, CrossBrowserTesting, Browsera) for compatibility.

    • Supporting the Mobile Web:

      • Tailor websites for both desktop and mobile devices.

    Exploring an HTML Document

    • File Extension:

      • .html or .htm.

    • Document Type Declaration:

      • <!DOCTYPE html>: Specifies HTML5.

      • Older HTML versions had more complex doctypes.

      • Absence of doctype triggers "quirks mode."

      • Presence of doctype triggers "standards mode."

    • Element Tags:

      • Starting tag: <element>

      • Ending tag: </element>

      • Example: <p>Welcome to Curbside Thai.</p>

    • Empty Elements:

      • Non-textual elements or directives.

      • One-sided tag: <element /> or <element>

      • Example: <br /> (line break).

    • Nested Elements:

      • Elements within elements.

      • Example: <p>Welcome to <em>Curbside Thai</em>.</p>

    • Element Hierarchy:

      • <html> (root element)

        • <head> (document information)

        • <body> (page content)

    • Basic HTML Structure:

    <!DOCTYPE html>
<html>
<head>
  head content
</head>
<body>
  body content
</body>
</html>

    Introducing Element Attributes

    • Attributes:

      • Provide additional information about elements.

      • Syntax:

        • <element attr1="value1" attr2="value2" ...>content</element> (two-sided)

        • <element attr1="value1" attr2="value2" ... /> (one-sided)

      • Example: <p id="intro">Welcome to Curbside Thai.</p>

    • Core Attributes:

      • class: Defines element classification.

      • dir: Sets text direction.

      • hidden: Indicates element should be hidden.

      • id: Unique identifier.

      • lang: Specifies language.

      • style: Defines style/appearance.

      • tabindex: Tab order.

      • title: Assigns a title.

    • Attribute Minimization:

      • Some attributes don't require a value (e.g., <p hidden>).

    Handling White Space

    • Browsers ignore white-space characters between tags.

    • Browsers collapse consecutive white-space characters into one.

    • Formatting in HTML code (indentation, extra spaces) is not transferred to the web page.

    Creating an HTML File

    • Basic Steps:

      1. Create a new .html file.

      2. Add basic HTML structure (<!DOCTYPE html>, <html>, <head>, <body>).

    Creating the Document Head

    • Metadata:

      • Content describing the document or providing browser instructions.

    • HTML Metadata Elements:

      • <head>: Contains metadata elements.

      • <base>: Specifies document location for relative links.

      • <link>: Specifies external resources.

      • <meta>: Generic metadata values (keywords, viewport).

      • <script>: Programming code.

      • <style>: Display styles.

      • <title>: Document title.

    • Setting the Page Title:

    <title>document title</title>

    • Adding Metadata:

    <meta charset="encoding" />
<meta name="keywords" content="terms" />

    • Character Encoding:

      • UTF-8 is the most common (<meta charset="utf-8" />).

      • The <meta> tag should be the first meta element in the document head.

    Adding Comments to your Document

    • Comments are descriptive text in the HTML file that are not displayed in the browser.

    • Syntax:

    <!-- comment -->

    • It’s a good practice to always include a comment in the document head in order to describe the document content that follows.

    Conditional Comments and Internet Explorer

    • Conditional comments enclose content for specific IE versions.

    • Syntax:

    <!--[if operator IE version]> content <![endif]-->