: Heading of the HTML Page ............................................................................... 3.3 Related Topic: Naming Convention and Referencing ........................................... 3.3.1 3.3.2 3.3.3 Valid and Good File Names for an HTML Document .................................. Valid Directory Names and Meaningful Directory Structures ................ Writing a Reference to a Data Source ............................................................. 3.4 Defining the Base URL of a Web Page Using <base> ............................................. 3.5 Referencing an External Document via <link> ......................................................... 3.6 Writing Document-Wide CSS Styles Using <style> ................................................ 3.7 Including Scripts in Web Pages Using <script> ........................................................ 3.8 Metadata for the Document Using <meta> .............................................................. 3.8.1 3.8.2 3.8.3 3.8.4 The Most Commonly Used Metadata ............................................................. Setting the Viewport ............................................................................................. Specifying Useful Metadata for a Web Crawler ........................................... Useful Metadata for Search Engines ............................................................... 3.8.5 3.8.6 3.8.7 Useful Metadata for the Web Browser ........................................................... Using General Metadata ...................................................................................... My Recommendation: This Metadata Belongs in the Basic HTML Framework ........................................................................................ HTML Attributes for the <meta> Element ..................................................... 3.9 The Visible Part of an HTML Document 4.1 HTML Elements for Structuring Pages ......................................................................... 3.8.8 4.1.1 Using <body>: The Displayable Content Section of an HTML Document ..................................................................................................... Introducing the Section Elements of HTML ................................................... Using Headings with the HTML Elements from <h1> to <h6> ............... Creating a Header Using <header> and a Footer Using <footer> .......... Marking Contact Information Using <address> .......................................... HTML Elements for Structuring Text ............................................................................ 4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.2.7 4.2.8 4.2.9 Adding Text Paragraphs Using <p> .................................................................. Forcing Line Breaks Using <br> .......................................................................... Adding Optional Line Breaks Using <wbr> .................................................... Forcing Spaces and Preventing Wrapping Using " " ...................... Adding a Topic-Based Separation Using <hr> .............................................. Adding Paragraphs or Citations Using <blockquote> ................................ Defining a General Section Using <div> ......................................................... Using <main>: An HTML Element for the Main Content .......................... Labeling Content Separately Using <figure> and <figcaption> ............. Creating Unordered Lists Using <ul> and <li> .............................................. Creating Ordered Lists Using <ol> and <li> ................................................... Reversing the Numbering of an Ordered List ............................................... Changing the Numbering of an Ordered List ................................................ Nesting Lists within Each Other ........................................................................ Creating a Description List Using <dl>, <dt>, and <dd> ............................ 4.1.2 4.1.3 4.1.4 4.1.5 4.2 4.3 4.4 Using Semantic HTML .......................................................................................................... 4.3.1 4.3.2 4.3.3 4.3.4 HTML without a Precise Structure .................................................................... Generic Structuring Using <div> ....................................................................... Semantic Structuring Using the Elements Provided in HTML ................. What’s the Use of Those Semantic HTML Elements? ................................ HTML Elements for Text Markups .................................................................................. 4.4.1 Marking Up Abbreviations or Acronyms Using <abbr> ............................. 4.4.2 4.4.3 Marking Up Text as the Source of a Working Title Using <cite> ............ Marking Up Computer Code Representation Using <code> and <pre> .................................................................................................................. Keyboard Input Using <kbd> and Program Output Using <samp> ...... Marking Up Text as a Definition Using <dfn> .............................................. Marking Up Text as a Variable Using <var> .................................................. Changing the Text Direction Using <bdo> and <bdi> ............................... Emphasizing Text Using <em>, <strong>, <i>, and <b> ............................ Highlighting Text Using <mark> ....................................................................... Placing Text between Quotes Using <q> ....................................................... Underlining or Crossing Out Text Using <u> and <s> ............................... Marking Changes of Text Using <ins> and <del> ........................................ Displaying Text as Superscript or Subscript Using <sup> and <sub> ... Marking Dates and Times Using <time> ........................................................ Marking the Small Print Using <small> .......................................................... Using <ruby>, <rp>, and <rt> for Annotations about Pronunciation ... Grouping Ranges of Individual Text Passages Using <span> .................. Related Topic: Character Encoding ................................................................................ 4.5.1 4.5.2 4.5.3 From Bytes to Character Encoding ................................................................... From ASCII to ISO-8859 ........................................................................................ Beyond the Byte Boundary with Unicode ...................................................... Character Entities in HTML ................................................................................................ 4.6.1 Structure of a Character Entity in HTML ......................................................... 4.7 Tables and Hyperlinks 4.4.4 4.4.5 4.4.6 4.4.7 4.4.8 4.4.9 4.5 4.6 5.1 5.2 Structuring Data in a Table ............................................................................................... 5.1.1 5.1.2 5.1.3 5.1.4 5.1.5 5.1.6 A Simple Table Structure Using <table>, <tr>, <td>, and <th> ............... Combining Columns or Rows Using “colspan” or “rowspan” ................. HTML Attributes for the Table Elements ........................................................ Structuring Tables Using <thead>, <tbody>, and <tfoot> ........................ Grouping Columns of a Table Using <colgroup> and <col> .................... Labeling Tables Using <caption> or <figcaption> ....................................... Electronic References (Hyperlinks) Using <a> .......................................................... 5.2.1 5.2.2 5.2.3 5.2.4 Inserting Links to Other HTML Documents on Your Own Website ....... Inserting Links to Other Websites .................................................................... Opening Links with the “target” Attribute in a New Window ................ Email Links with “href=mailto: . . .” ..................................................................</article></body></html>

Rheinwerk Computing The Rheinwerk Computing series from Rheinwerk Publishing offers new and established professionals comprehensive guidance to enrich their skillsets and enhance their career prospects. Our publications are written by leading experts in the fields of programming, administration, security, analytics, and more. Each book is detailed and hands-on to help readers develop essential, practical skills that they can apply to their daily work. For further information, please visit our website: Philip Ackermann JavaScript: The Comprehensive Guide 2022, 982 pages, paperback and e-book Sebastian Springer Node.js: The Comprehensive Guide 2022, 834 pages, paperback and e-book Christian Ullenboom Java: The Comprehensive Guide 2023, 1126 pages, paperback and e-book Johannes Ernesti, Peter Kaiser Python 3: The Comprehensive Guide 2022, 1036 pages, paperback and e-book Bernd Öggl, Michael Kofler Git: Project Management for Developers and DevOps Teams 2023, 407 pages, paperback and e-book Jürgen Wolf HTML and CSS The Comprehensive Guide Dear Reader, It’s estimated that the average American spends 6–7 hours a day online. While some of that time may be spent on mobile apps, internet-connected gaming, and all the other ways we whittle away the hours, it cannot be denied how much time we spend on web pages. Web development has exploded over the last two decades and shows no signs of slowing down anytime soon. Expert author Jürgen Wolf has set out to make sure that you have all the information you need to start building websites with HTML and CSS—and in my humble opinion, succeeded! This book has everything: detailed, step-by-step instructions, example code, practical models, a thorough grounding in the basics for beginners, and more advanced techniques for those who already have some experience. Not to mention, Jürgen provides downloadable examples and projects so that you can learn by doing. What did you think about HTML and CSS: The Comprehensive Guide? Your comments and suggestions are the most useful tools to help us make our books the best they can be. Please feel free to contact me and share any praise or criticism you may have. Thank you for purchasing a book from Rheinwerk Publishing! Meagan White Editor, Rheinwerk Publishing Rheinwerk Publishing • Boston, MA Notes on Usage This e-book is protected by accept and adhere to the or printed copy with others, however, is not permitted, neither as a whole nor in parts. Of course, making them available on the Internet or in a company network is illegal as well. For detailed and legally binding usage conditions, please refer to the section Legal Notes. This e-book copy contains a digital watermark, a signature that indicates which person may use this copy: Imprint This e-book is a publication many contributed to, specifically: Editor Meagan White Acquisitions Editor Hareem Shafi German Edition Editor Patricia Schiewald Translation Winema Language Services, Inc. Copyeditor Julie McNamee Cover Design Graham Geary Photo Credit Shutterstock: 1670310505/© Paul Aparicio; iStockphoto: 1447894700/© olaser Layout Design Vera Brauner Production E-Book Graham Geary Typesetting E-Book SatzPro, Germany We hope that you liked this e-book. Please share your feedback with us and read the Service Pages to find out how to contact us. The has cataloged the printed edition as follows: Names: Wolf, Jürgen, 1974- author. Title: HTML and CSS : the comprehensive guide / by Jürgen Wolf. Description: 1st edition. | Bonn ; Boston : Rheinwerk Publishing, 2023. | Includes index. Identifiers: LCCN 2023003226 | | (ebook) Subjects: LCSH: HTML (Document markup language) | Cascading style sheets. | Web site development. Classification: LCC QA76.76.H94 W64 2023 | DDC 005.7/2--dc23/eng/20230127 LC record available at (print) (e-book) (print and e-book) © 2023 by Rheinwerk Publishing, Inc., Boston (MA) 1st edition 2023 4th German edition published 2021 by Rheinwerk Verlag, Bonn, Germany Preface ....................................................................................................................................................... Introduction to the HTML Universe 1.1 Is This Book Even Intended for Me? .............................................................................. Different Types of Websites ............................................................................................. 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 Web Presence .......................................................................................................... Blog/Online Magazine/Portfolio ....................................................................... E-Commerce Websites: Stores without Opening Hours ........................... Landing Page/Microsite ....................................................................................... Web Platform: Building Your Own Social Network .................................... Web Apps .................................................................................................................. Dynamic and Static Websites .......................................................................................... 1.3.1 1.3.2 Static Websites ........................................................................................................ Dynamic Websites ................................................................................................. Languages for Designing and Developing on the Web ........................................ 1.4.1 1.4.2 1.4.3 1.4.4 1.2 1.3 1.4 1.5 HTML: Text-Based Hypertext Markup Language ......................................... CSS: Design Language ........................................................................................... JavaScript: Client-Side Scripting Language of the Web Browser ........... Server-Side Scripting Languages and Databases ......................................... What Do I Need to Get Started? ..................................................................................... 1.5.1 1.5.2 1.5.3 HTML Editor for Writing HTML Documents .................................................. Web Browser for Displaying the Website ...................................................... Step by Step: Creating a Web Page and Viewing It in the Web Browser .................................................................................................... Checking Written HTML ....................................................................................... Good Reasons for Validating the HTML Code Anyway .............................. 1.6 Conventions Used in This Book ....................................................................................... 1.7 1.5.4 1.5.5 Basic Structure of HTML and HTML Documents 2.1 Syntax and Structure of HTML and HTML Documents ......................................... 2.1.1 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.1.8 2.1.9 2.2 How to Structure a Document in HTML ......................................................... Viewing the Tree Structure Using the Document Object Model Inspector .................................................................................................................... HTML Tags and HTML Elements ........................................................................ Nesting HTML Elements and the Hierarchical Structure .......................... Avoiding Incorrect Nesting of HTML Elements ............................................ Omitting the End Tag of an HTML Element .................................................. Standalone HTML Tags without End Tags ..................................................... Additional HTML Attributes for HTML Elements ......................................... Using Comments in HTML Documents .......................................................... A Simple HTML Document Framework ........................................................................ 2.2.1 2.2.2 2.2.3 2.2.4 HTML Document Type: .................................................................. Beginning and Ending an HTML Document: ................................. Head of an HTML Document: ............................................................. Visible Part of an HTML Document: ................................................. 2.3 Head Data of an HTML Document 3.1 Overview of HTML Elements for the Head ................................................................. 3.2 : Heading of the HTML Page ............................................................................... 3.3 Related Topic: Naming Convention and Referencing ........................................... 3.3.1 3.3.2 3.3.3 Valid and Good File Names for an HTML Document .................................. Valid Directory Names and Meaningful Directory Structures ................ Writing a Reference to a Data Source ............................................................. 3.4 Defining the Base URL of a Web Page Using <base> ............................................. 3.5 Referencing an External Document via <link> ......................................................... 3.6 Writing Document-Wide CSS Styles Using <style> ................................................ 3.7 Including Scripts in Web Pages Using <script> ........................................................ 3.8 Metadata for the Document Using <meta> .............................................................. 3.8.1 3.8.2 3.8.3 3.8.4 The Most Commonly Used Metadata ............................................................. Setting the Viewport ............................................................................................. Specifying Useful Metadata for a Web Crawler ........................................... Useful Metadata for Search Engines ............................................................... 3.8.5 3.8.6 3.8.7 Useful Metadata for the Web Browser ........................................................... Using General Metadata ...................................................................................... My Recommendation: This Metadata Belongs in the Basic HTML Framework ........................................................................................ HTML Attributes for the <meta> Element ..................................................... 3.9 The Visible Part of an HTML Document 4.1 HTML Elements for Structuring Pages ......................................................................... 3.8.8 4.1.1 Using <body>: The Displayable Content Section of an HTML Document ..................................................................................................... Introducing the Section Elements of HTML ................................................... Using Headings with the HTML Elements from <h1> to <h6> ............... Creating a Header Using <header> and a Footer Using <footer> .......... Marking Contact Information Using <address> .......................................... HTML Elements for Structuring Text ............................................................................ 4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.2.7 4.2.8 4.2.9 Adding Text Paragraphs Using <p> .................................................................. Forcing Line Breaks Using <br> .......................................................................... Adding Optional Line Breaks Using <wbr> .................................................... Forcing Spaces and Preventing Wrapping Using " " ...................... Adding a Topic-Based Separation Using <hr> .............................................. Adding Paragraphs or Citations Using <blockquote> ................................ Defining a General Section Using <div> ......................................................... Using <main>: An HTML Element for the Main Content .......................... Labeling Content Separately Using <figure> and <figcaption> ............. Creating Unordered Lists Using <ul> and <li> .............................................. Creating Ordered Lists Using <ol> and <li> ................................................... Reversing the Numbering of an Ordered List ............................................... Changing the Numbering of an Ordered List ................................................ Nesting Lists within Each Other ........................................................................ Creating a Description List Using <dl>, <dt>, and <dd> ............................ 4.1.2 4.1.3 4.1.4 4.1.5 4.2 4.3 4.4 Using Semantic HTML .......................................................................................................... 4.3.1 4.3.2 4.3.3 4.3.4 HTML without a Precise Structure .................................................................... Generic Structuring Using <div> ....................................................................... Semantic Structuring Using the Elements Provided in HTML ................. What’s the Use of Those Semantic HTML Elements? ................................ HTML Elements for Text Markups .................................................................................. 4.4.1 Marking Up Abbreviations or Acronyms Using <abbr> ............................. 4.4.2 4.4.3 Marking Up Text as the Source of a Working Title Using <cite> ............ Marking Up Computer Code Representation Using <code> and <pre> .................................................................................................................. Keyboard Input Using <kbd> and Program Output Using <samp> ...... Marking Up Text as a Definition Using <dfn> .............................................. Marking Up Text as a Variable Using <var> .................................................. Changing the Text Direction Using <bdo> and <bdi> ............................... Emphasizing Text Using <em>, <strong>, <i>, and <b> ............................ Highlighting Text Using <mark> ....................................................................... Placing Text between Quotes Using <q> ....................................................... Underlining or Crossing Out Text Using <u> and <s> ............................... Marking Changes of Text Using <ins> and <del> ........................................ Displaying Text as Superscript or Subscript Using <sup> and <sub> ... Marking Dates and Times Using <time> ........................................................ Marking the Small Print Using <small> .......................................................... Using <ruby>, <rp>, and <rt> for Annotations about Pronunciation ... Grouping Ranges of Individual Text Passages Using <span> .................. Related Topic: Character Encoding ................................................................................ 4.5.1 4.5.2 4.5.3 From Bytes to Character Encoding ................................................................... From ASCII to ISO-8859 ........................................................................................ Beyond the Byte Boundary with Unicode ...................................................... Character Entities in HTML ................................................................................................ 4.6.1 Structure of a Character Entity in HTML ......................................................... 4.7 Tables and Hyperlinks 4.4.4 4.4.5 4.4.6 4.4.7 4.4.8 4.4.9 4.5 4.6 5.1 5.2 Structuring Data in a Table ............................................................................................... 5.1.1 5.1.2 5.1.3 5.1.4 5.1.5 5.1.6 A Simple Table Structure Using <table>, <tr>, <td>, and <th> ............... Combining Columns or Rows Using “colspan” or “rowspan” ................. HTML Attributes for the Table Elements ........................................................ Structuring Tables Using <thead>, <tbody>, and <tfoot> ........................ Grouping Columns of a Table Using <colgroup> and <col> .................... Labeling Tables Using <caption> or <figcaption> ....................................... Electronic References (Hyperlinks) Using <a> .......................................................... 5.2.1 5.2.2 5.2.3 5.2.4 Inserting Links to Other HTML Documents on Your Own Website ....... Inserting Links to Other Websites .................................................................... Opening Links with the “target” Attribute in a New Window ................ Email Links with “href=mailto: . . .” ..................................................................</article></body></html>