HTML The Ultimate Guide (Sufyan Bin Uzayr) (Z-Library)

HTML HTML code is a programming language used in website building and website tem- plates. It is used to format the look and format of a web page, to set design features such as basic layout, colors, and fonts. HTML: The Ultimate Guide provides a crash course in HTML, its history, key features, different versions available, vari- ous tags and elements, as well as the advantages and disadvantages. This book also covers the fundamental concepts of CSS and JavaScript and guides the reader through creating websites and games with it. As the reader progresses through the lessons, they will learn how to insert JavaScript commands directly into the HTML document, and how the script executes when viewed in browser. This is a valuable resource for anyone who wants to create a website or any 2d and 3d game in HTML. After finishing this book, readers will be able to quickly build their website or game with absolute ease. This book is organized as follows: • Discusses code optimization in HTML code, Web Scripting and Security ideas in HTML. • Introduces the HTML for Game Development, benefits and types of games (2d and 3d). • Includes a Cheat Sheet of HTML where you will get all key terms and useful information that is easy to access.

HTML The Ultimate Guide Sufyan bin Uzayr

First edition published 2024 by CRC Press 2385 Executive Center Drive, Suite 320, Boca Raton, FL 33431 and by CRC Press 4 Park Square, Milton Park, Abingdon, Oxon, OX14 4RN CRC Press is an imprint of Taylor & Francis Group, LLC © 2024 Sufyan bin Uzayr Reasonable efforts have been made to publish reliable data and information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint. Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information storage or retrieval system, without written permission from the publishers. For permission to photocopy or use material electronically from this work, access www.copyright.com or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. For works that are not available on CCC please contact mpkbookspermissions@tandf. co.uk Trademark Notice: Product or corporate names may be trademarks or registered trademarks and are used only for identification and explanation without intent to infringe. Library of Congress Cataloging-in-Publication Data Names: Bin Uzayr, Sufyan, author. Title: HTML : the ultimate guide / Sufyan Bin Uzayr. Description: First edition. | Boca Raton : CRC Press, 2023. | Includes bibliographical references. Identifiers: LCCN 2023003120 (print) | LCCN 2023003121 (ebook) | ISBN 9781032413259 (paperback) | ISBN 9781032413266 (hardback) | ISBN 9781003357537 (ebook) Subjects: LCSH: HTML (Document markup language)--Amateurs’ manuals. Classification: LCC QA76.76.H94 B56 2023 (print) | LCC QA76.76.H94 (ebook) | DDC 005.7/2--dc23/eng/20230310 LC record available at https://lccn.loc.gov/2023003120 LC ebook record available at https://lccn.loc.gov/2023003121 ISBN: 9781032413266 (hbk) ISBN: 9781032413259 (pbk) ISBN: 9781003357537 (ebk) DOI: 10.1201/9781003357537 Typeset in Minion by KnowledgeWorks Global Ltd.

For Dad

vii Contents About the Author, xix Acknowledgments, xx Chapter 1 ◾ Crash Course htML 1 FRONTEND VS. BACKEND 1 MOSTLY USED FRONTEND TECHNOLOGY 2 How Does HTML Work as Frontend? 3 Next Is CSS 3 How CSS Work as Frontend Technology? 3 DOM: THE STRUCTURE OF WEBSITES 4 How DOM Works 4 Where DOM Came From 4 JavaScript 5 How JavaScript Works 5 Library and Framework 5 JavaScript AS BACKEND 5 WHAT IS A MARKUP LANGUAGE? 6 HTML – HYPERTEXT MARKUP LANGUAGE 6 HTML INTRODUCTION 7 HISTORY 8 HTML FUTURE 10 HTML VERSIONS 10 DIFFERENT VERSIONS OF HTML 11 MARKUP IN HTML 13

viii ◾ Contents BASIC HTML CONCEPTS 14 Structure of an HTML Document 14 HTML DOCUMENT TYPE 16 HTML TAGS 17 Paired Tag 18 Unpaired Tags 19 Heading Tags (H1 Tag to H6 Tag) 21 HTML p Tag – Paragraph Tag 22 HTML Tag – Anchor Tag 22 HTML img Tag – Image Tag 22 Self-Closing Tags 23 Utility-Based Tags 23 Structure Tags 24 The <header> tag 24 The <nav> tag 27 The <main> tag 30 <section> tag 33 <article> tag 35 <aside> tag 38 <footer> tag 41 <figure> tag 43 <figcaption> tag 46 Control Tags 48 HTML Tag List 48 WHAT IS AN HTML EDITOR? 51 HTML COMMENTS 52 TYPES OF HTML COMMENTS 53 HTML TAG VS. ELEMENT 55 Tag 55 Element 57 Key Points 58 TYPES OF ELEMENTS 58

Contents ◾ ix TYPES OF HTML ELEMENTS 59 HTML ELEMENT SYNTAX 59 EMPTY HTML ELEMENTS 59 NESTING HTML ELEMENTS 60 CASE INSENSITIVITY IN TAGS 60 HTML ATTRIBUTES 61 Empty Attribute Syntax 61 Unquoted Value Syntax 62 GENERAL ATTRIBUTES 62 The id Attribute 62 The class Attribute 63 The title Attribute 63 The style Attribute 64 ANATOMY OF AN HTML ELEMENT 64 SEMANTICS OF EMBEDDED TEXT 67 TABLES 83 OTHER INTERACTIVE ELEMENTS 85 HTML CHARACTER ESCAPE 88 Lower Case Alphabets 88 TEXT FORMATTING TAGS 91 HTML PHRASE TAG 92 HTML FORMS 93 BASIC STRUCTURE OF FORMS 94 HTML – TEXT LINKS 94 HTML IMAGES 94 HTML iFRAMES 95 HTML – EMBED MULTIMEDIA 97 Embedded Multimedia 97 The <embed> Tag 98 The <bgsound> Tag 99 HTML <object> Tag 100 HTML MARQUEE 101 Usage 101

x ◾ Contents ATTRIBUTES IN <marquee> TAG 103 HTML Properties 103 BENEFITS 104 CHAPTER SUMMARY 104 NOTES 104 Chapter 2 ◾ htML Basic Usage 107 INTRODUCTION 107 LEARNING WEB SCRIPTING BASICS 108 SCRIPTING LANGUAGES VS. PROGRAMMING LANGUAGES 108 SCRIPTING LANGUAGES 108 WHY DO WE NEED SCRIPTING LANGUAGES? 109 SCRIPT 109 WEB SCRIPTS AND THEIR TYPES 109 TYPES OF SCRIPTS 110 Server-side Scripts 110 DYNAMIC ELEMENTS 110 Features in Dynamic HTML 111 AN OBJECT-ORIENTED VIEW 111 STYLESHEETS AND LAYERING 111 CORRELATION WITH CSS AND JS 112 How Does HTML Work? 113 CSS 114 Stylesheet 114 Adding Styles Using CSS 114 Inline Styles 114 Embedded Stylesheets 115 External Styles 116 Importing External Stylesheets 117 CSS COMMENTS 118 CSS SELECTORS 119

Contents ◾ xi Universal Selector 119 Element Type Selectors 119 ID Selector 119 Class Selectors 120 Descendant Selectors 120 Child Selectors 120 Adjacent Sibling Selectors 121 Standard Sibling Selectors 121 Grouping Selectors 122 JAVASCRIPT 122 Adding JavaScript to HTML Documents 123 DOM 126 ACCESS TO DOM 127 BASIC DATA TYPES 127 DOM INTERFACES 128 CORE INTERFACES 128 CHAPTER SUMMARY 129 NOTES 129 Chapter 3 ◾ Code Optimization 131 INTRODUCTION 131 Clean Up the HTML Document 132 Combining Files 132 Correct CSS Placement 132 Correcting JavaScript Placement 132 Limiting External HTTP Requests 133 CDN Factor 133 File Compression 133 Code Minification 133 Image Enhancement 134 Division into Small Components 134 Analysis of the Frontend Code 134

xii ◾ Contents HTTP2 to Help Frontend Developers 134 Enable Preloading 135 PRELOAD AND PREFETCH IN HTML 135 Understanding Renders Blocking 135 Preload Resources 137 Preload JavaScript 138 Compress Files (gzip Compression) 138 Highlight of Brotli 139 Optimize Your Images 139 LOSSY VS. LOSSLESS COMPRESSION 139 Lossy Compression 140 Lossless Compression 140 Use a Minimalist Framework 140 Create Picture Sprites 141 Apply Lazy Load 141 Insert JavaScript at the Bottom of the Page 141 Include Styles Dynamically 141 Use CSS Animations Instead of JavaScript 141 Minify CSS, JavaScript, and HTML 141 WRITING HTML IN CODE 142 Declare DOCTYPE 142 Use Meaningful Title Tags and Other Tags 143 Use the Right Document Structure 143 <header> 145 <main> 146 <nav> 146 <article> 146 <section> 146 <aside> 147 <address> 147 <footer> 147 DOCTYPE 147

Contents ◾ xiii HTML Document Template 153 Use Lowercase Letters 156 Reduce the Number of Elements on the Page 156 Validate Frequently 156 Always Place the External Stylesheets in the <head> Tag 156 Use Div Elements to Divide Your Layout into Main Sections 156 Minify, Unify, and Shift JavaScript 157 Use Heading Elements Wisely 157 Use the Right HTML Element in the Right Place 158 Don’t Use divs for Everything 158 Use an Unordered List (<ul>) for Navigation 158 Use Alternate Attributes with Images 158 Avoid Excessive Comments 159 Choose a Great Code Editor 159 Start Using the New HTML5 Tags 159 One h1 Per Page 159 Stop Supporting IE 159 Always Specify the Button Type 159 Using Title Attributes with Links (If Needed) 160 BEST CODING PRACTICES 160 SECURITY AND HARDENING IDEAS (HTML SECURITY) 161 SECURITY 162 METHODS OF COMMUNICATION IN HTML 163 Common Communication Event Model (XHR) 163 Web Sockets 164 Server-Sent Events 165 Web Workers 165 Web Messaging 165 Web Messaging Events 166 Sending a Message across Documents 166 HTML5 Channel Messages 166

xiv ◾ Contents Cross-Origin Resource Sharing (CORS) 166 Sandboxing Flags 168 CHAPTER SUMMARY 169 NOTES 169 Chapter 4 ◾ htML for Game Development 171 BUILDING BLOCKS 172 Tags 172 Elements 172 Attributes 173 HTML5 GAME FUNDAMENTALS 174 DEFINING GOALS FOR GAME DEVELOPMENT 174 User Interaction Processing 175 Server Side in an HTML5 Game 175 Graphics and Sprite Sheets 176 HTML5 Game Frameworks 176 Amazing Facts about HTML5 Game Development 177 Multi-Platform 177 Unique Distribution 177 Cleaner Code 177 Geolocation API 178 Makes Promotion Easier 178 Game Development Frameworks and Game Engines 178 Phasers 178 PlayCanvas WebGL Game Engine 179 New HTML5 Features 180 Principles of HTML5 Game Design 181 Common Patterns 181 HTML Canvas Graphics 182 Before the Start 182 Basic Use of Canvas 182 About the <canvas> Tag 185

Contents ◾ xv Rendering Context 214 Drawing Shapes with Canvas 216 Canvas Coordinates 216 Draw a Circle 220 HTML Canvas Gradients 221 Benefits of Using Canvas 223 Drawing Text on Canvas 224 CHAPTER SUMMARY 225 NOTES 225 Chapter 5 ◾ Cheat Sheet 227 POPULARITY 228 HTML CHEAT SHEET 228 HTML DOCUMENT SUMMARY 229 <html> 229 <head> 229 <title> 230 <body> 230 HTML DOCUMENT INFORMATION 231 <base> 231 <meta> 231 <link> 232 <style> 232 <script> 233 HTML DOCUMENT STRUCTURE TAGS 234 <h1 to h6> 234 <div> 235 <span> 236 <p> 237 <br> 237 <hr> 238 TEXT FORMATTING AND INLINE TEXT SEMANTICS 238 <strong> 238

xvi ◾ Contents <b> 239 <em> 239 <i> 240 <tt> 240 <strike> 240 <cite> 241 <del> … </del> 241 <ins> … </ins> 241 <blockquote> … </blockquote> 241 <q> … </q> 241 <abbr> … </abbr> 242 <address> … </address> 242 <dfn> … </dfn> 242 <code> … </code> 242 <samp> ... </smap> 242 <kbd> ... </kbd> 242 <var> ... </var> 242 <pre> ... </pre> 242 _… 242 ^… 243 <small> … </small> 243 HTML LINKS 243 SETTING TARGETS FOR LINKS 243 <a href=””> … </a> 243 <a href=“ mailto: ”> … </a> 243 <a href=“tel://###-###”> … </a> 243 <a href=“tel://###-###”> … </a> 244 <a name=“name”> … </a> 244 <a href=“#name”> … </a> 244 HTML LISTS 244 <ol> 244 <ul> 244

Contents ◾ xvii <li> 245 <dl> 245 <dt> 245 <dd> 245 HTML FORMS 245 <form> … </form> 245 <input> 246 <label>… </label> 247 <textarea> 248 <fieldset> 250 <legend> 251 <select> 251 <option>… </option> 253 <optgroup> 254 <progress> … </progress> 255 <datalist>… </datalist> 255 <button>… </button> 255 FORM ATTRIBUTES EVENTS LIST 255 KEYBOARD ATTRIBUTES EVENTS LIST 256 MOUSE ATTRIBUTES EVENTS LIST 256 DRAG ATTRIBUTES EVENTS LIST 256 WINDOW ATTRIBUTES EVENTS LIST 257 MEDIA ATTRIBUTES EVENTS LIST 258 HTML TABLES 259 <table> … </table> 259 <caption> … </caption> 261 <thead> … </thead> 262 <tbody> … </tbody> 262 <tfoot> … </tfoot> 264 <tr> … </tr> 266 <th> … </th> 267 <td> … </td> 269

xviii ◾ Contents <colgroup> … </colgroup> 271 <col> 273 HTML MULTIMEDIA 273 <img> 273 <audio> 273 <video> 274 <figure> 274 <figcaption> 275 <embed> 276 <object> 276 HTML CHARACTERS AND SYMBOLS 277 HTML CHARACTER ENTITIES 277 COPYRIGHT, TRADEMARK, AND REGISTERED SYMBOL 277 PUNCTUATION SYMBOL 277 ARROWS SYMBOL 278 MATHEMATICAL SYMBOLS 279 OTHER SYMBOL 280 CURRENCY SYMBOLS 280 HTML ATTRIBUTES 280 NEW HTML TAGS 289 NOTES 292 APPRAISAL, 293 INDEX, 297

xix About the Author Sufyan bin Uzayr is a writer, coder, and entrepreneur with more than a decade of experience in the industry. He has authored several books in the past, pertaining to a diverse range of topics, ranging from History to Computers/IT. Sufyan is the Director of Parakozm, a multinational IT company spe- cializing in EdTech solutions. He also runs Zeba Academy, an online learning and teaching vertical with a focus on STEM fields. Sufyan specializes in a wide variety of technologies such as JavaScript, Dart, WordPress, Drupal, Linux, and Python. He holds multiple degrees, including ones in Management, IT, Literature, and Political Science. Sufyan is a digital nomad, dividing his time between four countries. He has lived and taught in universities and educational institutions around the globe. Sufyan takes a keen interest in technology, politics, literature, history, and sports, and in his spare time, he enjoys teaching coding and English to young students. Learn more at sufyanism.com