Notes on Principles of Web Design - HTML and the Modern Web

# Principles of Web Design - Chapter One: HTML and the Modern Web ## Objectives of the Chapter - **Creating Web pages with HTML**: Learn how to structure web pages using HTML. - **History of HTML**: Understand the evolution of HTML and its significance in web design. - **Working with HTML5**: Explore the features and advantages of HTML5. - **Choosing an HTML editor**: Identify the right tools for coding HTML. - **Using good coding practices**: Learn about best practices for writing clean and effective HTML code. ## Creating Web Pages with HTML - **Definition**: HTML (HyperText Markup Language) is a structured markup language that identifies common sections of a webpage. - **Markup Elements**: HTML uses markup elements to define sections; for example, `

` indicates a first-level heading. - **Basic Structure Example**: ```html

What is HTML?

HTML is a markup language...

``` ## Structure of a Basic Web Page - **HTML File Contents**: - The file consists of text and HTML markup. - Markup is not visible in the browser; it instructs how to display content. - **Key Components**: - **Document Type Declaration (``)**: Specifies the HTML version used. - **Root Element (``)**: Encloses the entire document. - **Head Section (``)**: Contains metadata about the document. - **Body Section (``)**: Holds the visible content (text, images, etc.). ## HTML in the Browser - **Rendering**: Browsers interpret HTML markup and display rendered content. - **Compatibility Testing**: Testing in multiple browsers is critical to ensure consistent functionality. ## Adding Style with CSS - **Separation of Content and Presentation**: Cascading Style Sheets (CSS) manage how content is presented, allowing for cleaner HTML. - Example CSS Rules: ```css body {font-family: arial;} h1 {border-bottom: solid 1px;} p {margin-left: 30px;} ``` ## Organizing Information with Hypertext - Hypertext links connect related topics on the web, guiding user navigation. ## The History of HTML - **Origins**: HTML was proposed by Tim Berners-Lee in 1989. - **Development**: Evolved from SGML (Standard Generalized Markup Language). - **Standards and Governance**: The World Wide Web Consortium (W3C) was founded in 1994 to establish HTML standards. ## Key Versions of HTML** - **HTML1.1** (1992), **HTML2.0** (1995), **HTML3.2** (1997), **HTML4.01** (1999), **HTML5** (current). - **Progression**: Each version introduced new features, e.g., forms, CSS support, multimedia elements, etc. ## XML and XHTML - A New Direction - **Introduction of XML**: In 1997, W3C released XML, allowing developers to define their own markup languages with stricter syntax. - **Adoption of XHTML**: XHTML was a bridge between XML and HTML, leading to stricter coding practices. ## Proposal for HTML5 - **Introduction of HTML5**: Developed by WHATWG, introduced a new standard that is compatible with HTML and XHTML, enhances media support, and reduces reliance on deprecated elements. - **Key Features**: Logical layout elements, multimedia support, application integration, etc. ## HTML5 Syntax and Document Structure - HTML5 allows both relaxed and strict syntax, helping to create standardized code. - **Document Structure**: - Elements such as `

`, ``, `

`, `

`, and `

` replace `

` for better semantic markup. ## Choosing an HTML Editor - **Types**: Code-based and WYSIWYG editors; some offer hybrid options. - **Considerations**: Ensure compatibility with browsers and avoid overly complex code. ## Using Good Coding Practices - **Standards Compliance**: Follow W3C standards for better accessibility and compatibility. - **Semantic Markup**: Use appropriate tags that reflect the content's structure. - **Validation**: Regularly validate code to detect errors and ensure compliance. ## Migrating from Legacy HTML to HTML5 - **Gradual Transition**: Clean up legacy code and adopt new standards in future pages. - **Backward Compatibility**: Ensure that new code works with older systems. ## Summary - Test new HTML5 features thoroughly before implementation, utilize good coding practices, and separate content from presentation using CSS.