# HTML 101 ### Hyper Text Markup Language --- ## What is HTML - Hypertext Markup Language - standard markup language for creating web pages and web applications - HTML => Structure - CSS => Style - Javascript => Execution --- ## Example Markup ``` <img src= "fullstack/markup.jpg" alt="example markup" style="width: 100%;"> ``` --- ## Example HTML ```html <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8"><!-- high recommended --> </head> <body> Some content </body> </html> ``` --- ## Tags ```html <!-- Closing Tags --> <div>...</div> <p>...</p> <em>...</em> ``` ```html <!-- Self Closing --> <input/> <br> <hr> ``` --- ## Common Tags - [Common Tags](http://www.thuto.org/ubh/web/html/tags1.htm) ``` html <a href="https://google.com">Some Link</a> <div></div> <span></span> <h1></h1>, <h2></h2>, ... <ul></ul>, <ol></ol> <table></table> ``` --- ## Nested Elements ```html <p>What is your <em>favorite</em> Star Wars Movie<p> ``` --- ## Parents and Children ```html <div class= 'parent'> <div class='child-1'>First Child</div> <!--Child Element--> <div class='child-2'>Second Child</div> <!--Child Element--> <div> ``` --- ## Attributes An attibute is used as an indentifier for an element on the Document Object Model (DOM) that can contain information about the element that will not appear with the elements content. Some attritbutes are global while others or specific ```html <ul> <li>class</li> <li>id</li> <li>src</li> <li>href</li> <li>type</li> </u> ``` --- Example: ```html <div class="class-name">...</div> <p id="data-id">...</p> <img src="img_src" /> <a href="url" /> ``` ###### *Note: the opening tag also support attriubutes that add more detailed annotation about the element* --- ## Semantic HTML - use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look [Semantic Elements](https://www.w3schools.com/html/html5_semantic_elements.asp) ```html <header>...</header> <footer>...</footer> <nav>...</nav> <article>...</article> ``` --- Example : ```html <img src="fullstack/img_sem_elements.gif" alt="semtanic html" style="float: right; padding: 20px;"> // other examples... <header> content </header> <footer> content1 </footer> ``` --- ## Accessibility Web accessibility is a practice that we as engineers/ developers take to make sure our code is accessible to everyone. Including those who have cognitive or physical impairments or limitations. Example : The Hash Slinging Slasher. --- ## Forms Web forms are one of the main points of interaction between a user and a web site or application. --- ## Why do we use Web Forms? - So users can interact with our api's - Enter Data - Submit Data - Group Data --- ## Syntax ```htmlembedded= <form> <!--form content here. --> </form> ``` --- ## Form Input Input allows you to interact with forms. Common input types: ```htmlembedded= - text - email - password - tel - radio - checkbox - textarea ``` --- ## Dropdowns ```htmlembedded= <select> <option disabled selected>Default</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> ```