HTML - HackMD

# HTML ###### tags: `Content` ## What is HTML? HTML stands for Hypertext Markup Language but more importantly it is the base or structure for building web pages. If you see a paragraph on a website, that was written in HTML. HTML consists of elements such as paragraphs that are represented as tags, which we will discuss soon. These tags such as paragraph or table are not displayed in the browser but are rendered by the browser. --- ## HTML Documents All HTML documents start out with a base or template and then more elements are added after that. This base template is required for all HTML documents. ```htmlmixed <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html> ``` * The `<!DOCTYPE html>` declaration defines this document to be HTML5 * The `<html>` element is the root element of an HTML page * The `<head>` element contains meta information about the document * The `<title>` element specifies a title for the document * The `<body>` element contains the visible page content ### `<head>` Notes The `<head>` of the HTML document is where you would link to external CSS stylesheets and Javascript files. It can and should contain other items but those are the most important. You can place Javascript in other locations as we will discuss in the Javascript module but you would generally want to put any stylesheets the page need right at the top in the `<head>`. Since HTML pages are rendered from the top -> down, your page will have access to your stylesheet as soon as it hits the `<head>` so any of your page content in the `<body>` will be styled accordingly. ### Creating an HTML Document Any file that has an extension of or ends with .html will be opened and rendered by your computers default web browser. ### Editing an HTML Document You can edit HTML documents with any text editor on your computer, including Notepad that is pre-installed with Windows and TextEdit for Mac. Simple right click your .html file and click *Edit* or *Open with* from the context menu. --- ==Share screen and create an HTML document and edit it while going through this module== ## Elements As we discussed, all HTML pages are made up of individual elements or groups of elements. These elements can be arranged or grouped in just about any order. ### Syntax All HTML tags follow the same format or syntax. You use an opening tag, enter the content and then a closing tag. If you forget the closing tag it will likely cause issues or cause the element to not be rendered at all. There are a handful of elements that do not need an ending tag because you are not putting anything inside of them, we will cover those elements coming up. ```htmlmixed <tagName>Content</tagName> ``` Example: ```htmlmixed <p>This is a paragraph</p> ``` ### Elements Can be Nested ```htmlmixed <p>This is a paragraph <span>This is a nested element and it is perfectly valid</span> </p> ``` ### Empty Elements There are a few elements that are empty and do not need or require content. And example would be a line break which will cause any new content after the element to be placed on a new line. Empty elements are self-closing which means they only require one tag and have the `/` at the end. ```htmlmixed <br/> ``` > HTML is NOT case-sensitive ==EXERCISE== > Place in chat > Have them share their screen 1. Create an HTML document 2. Open the document in Visual Studio Code 3. Add the base/template code 4. Add a paragraph tag that says "Hello World!" 5. Open the document in your browser ==KNOWLEDGE CHECK== 1. What is HTML? 2. What is an element? 3. Where is the visible content of a webpage stored in an HTML document? ==QUESTIONS?== --- ## Attributes * All HTML elements can have attributes * Attributes provide additional information about an element * Attributes usually come in name/value pairs like: name="value" ### Syntax ```htmlmixed  <p class="class-name"></p> ``` ### The `title` Attribute The title attribute is a tooltip, meaning if you place your cursor over it (known as hovering) it will display the text that you enter into the attribute ```htmlmixed <p title="This is a tooltip">Hover me</p> ``` > Best Practice: While it is not required, the user of lowercase attributes is suggested. > Best Practice: Again, while it is not required, wrapping your attribute VALUE in quotes (double or single) is a best practice. ==EXERCISE== > Place in chat > Have them share their screen 1. Create an HTML document 2. Open the document in Visual Studio Code 3. Add the base/template code 4. Add a paragraph tag that says "Hello World!" 5. Add a 'title' attribute to the paragraph that says "I'm a tooltip" 6. Open the document in your browser and hover the paragraph ==KNOWLEDGE CHECK== 1. What is an element attribute? 2. What are the best practices for adding attributes to HTML to an element? ==QUESTIONS?== --- ## Headings Headings are just like a title or heading in Microsoft Word, they let the user know that they are entering or viewing a new piece of content. If you wrote a paragraph about learning how to code the heading might be "This is How I Learned How to Code". * Headings start at 1 and go to 6 where 1 is the most important and 6 is the least important * Importance is defined by the size of the heading * The web browser will automatically add some styles to headings so it is obvious what they are ### Syntax ```htmlmixed <h1>This is the most important header</h1> <h6>This is the least important header</h1> ``` Headings are very important because they are also used by the browser and search engines such as Google to determine the structure and content of your site. > Best Practice: `<h1>` headings should be used for main headings, followed by `<h2>` headings, then the less important `<h3>`, and so on. --- ## Paragaphs Paragraphs are exactly what they sound like, paragraphs of text for your website. * The browser will strip out any extra lines or spaces in your paragraphs so whitespace (or - extra lines or spaces between content) is ignored ### Syntax ```htmlmixed <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p>  <p>This paragraph contains a lot of spaces in the source but the browser ignores it.</p>  <pre> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </pre> ``` ### The `div` Tag The div tag is probably the most used tag there is. With semantic elements, which we will cover soon, it is being used less but it is still the most used. So what is the div element? It is basically a catch all container. By itself it has no content, it is empty. However, you can put anything inside of it. Why do we need it? Well it doesn't make sense to do certain things like put an image inside of a paragraph, and more importantly that is not valid HTML. However you can put an image inside of a div, or even an image AND a paragraph inside of a div. A div is primarily used for for layout or structuring your webpage, so we will learn more about it when we learn styling. ```htmlmixed <div> <p>This is a paragraph inside of a div</p> </div> ``` ==EXERCISE== > Place in chat > Have them share their screen 1. Create an HTML document 2. Open the document in Visual Studio Code 3. Add the base/template code 4. Add a paragraph tag that says "Hello World!" 5. Add a 'title' attribute to the paragraph that says "I'm a tooltip" 6. Add a heading with the content of "I am a heading" 7. Open the document in your web browser ==KNOWLEDGE CHECK== 1. What is a heading? 2. What are the most important and least important heading tags? ==QUESTIONS?== --- ==HAVE THEM SHARE THEIR SCREEN WRITE CODE IN PlayCode ERASE CODE BEFORE EXERCISE== ## Formatting HTML elements can be styled to look a certain way without using CSS or stylesheets. By wrapping your elements in formatting elements, you can make things bold or italic, etc. ### Examples ```htmlmixed <b> <p>Some bold text</p> </b> <i> <p>Some italic text</p> </i> ``` --- ## Comments You can add comments to your code. Comments will not be rendered by the browser, meaning they will not be visible in the browser. The primary reason to add a comment to your code is to add hints or descriptions for yourself or other developers that may look at your code or to simple describe the code you are commenting. You can also comment out code which means it will not be rendered by the browser. You would do that if you want to temporary remove an element from your website or various other reasons while developing a website. ### Syntax ```htmlmixed    ``` ==EXERCISE== > Place in chat > Have them share their screen 1. Add a comment to your PlayCode project that says "This is a comment" 4. Add a paragraph tag that with the content "I'm a hidden paragraph" 5. Create a second paragraph with the content "I'm a bold paragraph!" 6. Add bold formatting to second paragraph 7. Comment out paragraph 8. Name your PlayCode project 9. Save your PlayCode project ==KNOWLEDGE CHECK== 1. What are comments typically used for? ==QUESTIONS?== --- ## Links A link is a clickable element that will take you to another webpage. ### Syntax ```htmlmixed  <a href="linkLocation">Link Text</a> ``` You can also provide a relative link location to send the user to a document within your website. If you had a page called "contact.html" this is what that would look like: ```htmlmixed <a href="contact.html">Contact Us</a> ``` ### Attributes As we discussed in the Attributes submodules, all HTML elements can have attributes. The same is true for `<a>` elements or links. Some common attributes are: * `_blank` - Opens the linked document in a new window or tab * `_self` - Opens the linked document in the same window/tab as it was clicked (this is default) * `_parent` - Opens the linked document in the parent frame * `_top` - Opens the linked document in the full body of the window You would typically not add an attribute to open the link in the current window or use `_blank` to open the link in a new tab ### Making Elements Linkable/Clickable You can also wrap elements in a link or `<a>` element to make them links themselves. When you do this, do not add text since they will be clicking the nested element, NOT the text. ```htmlmixed <a href="http://www.google.com"> <p>Click me to go to Google</p> </a> ``` ==EXERCISE== > Place in chat > Have them share their screen 1. Create a new PlayCode project 2. Add a link to http://www.google.com 3. Set an attribute to the link so that it opens in a new tab 4. Create a new paragraph with the content "Click Me" 5. Make the link paragraph a link that takes you to Google 6. Name/save project ==QUESTIONS?== --- ## Images It is very simple to add an image to your webpage. ```htmlmixed <img src="imagePath"> ``` Because you are not putting any content inside of the `<img>` tag, it does not need a closing tag. It is one of the few elements that does not require a closing tag. You can link to a local image or a image that is hosted somewhere on the web. As long as the path you provide to the `src` attribute is valid, the image should appear. If the path is not valid, the image will be broken and will not appear. For this reason you ALWAYS need to add an `alt` tag to every image. ```htmlmixed <img src="imagePath" alt="This explains what the image is"> ``` If you find an image on the internet you can typically right click the image and choose *Copy image address* which will copy the path to the image to your clipboard. If the image does not appear for any reason, the browser will show the alt text. This is very helpful not just for knowing what was supposed to be there but for accessibility reasons. Screen reasons for the visually impaired use the alt tag to describe what is there for the user who cannot see the image. > Best Practice: Be brief but descriptive with your alt tags. ==EXERCISE== > Place in chat > Have them share their screen 1. Create a new PlayCode project 2. Add an image with a src of "https://www.petmd.com/sites/default/files/CANS_dogsmiling_379727605.jpg" 3. Add an alt tag to your image 4. Make the image link to http://www.google.com 5. Name/save project ==KNOWLEDGE CHECK== 1. What is the purpose of an alt tag? 2. Does the image element require a closing tag? ==QUESTIONS?== --- ## Tables Tables allow you to display data in a structured way that everyone is used to seeing. When the web was starting out, tables were used frequently for layout purposes, we have sophisticated styling now so that is not necessary. Now tables are really only used to represent data. Table components: * `<table>` tag which is the parent for the table * `<thead>` defines a group of table headers * `<tbody>` defines the main table body * `<tr>` new row * `<td>` table data ```htmlembedded <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </tbody> </table> ``` Technically the `<thead>` and `<tbody>` are not required but it is a good practice to use them. The more information you can give the browser that describes your code, the better. ### Attributes ### `colspan` Will span a specified number of columns. ```htmlmixed <table> <thead> <tr> <th>Header 1</th> <th colspan="2">Header 2</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </tbody> </table> ``` ### `rowspan` Will span a specified number of rows. ```htmlmixed <table> <thead> <tr> <th rowspan="2">Header 1</th> <th>Header 2</th> </tr> <tr> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </tbody> </table> ``` ==EXERCISE== > Place in chat > Have them share their screen 1. Create a new PlayCode project 2. Add a table 3. Add 2 headers (Make, Model) 4. Add a row to fill in the values for your the make/model of your first vehicle 5. Name/save project ==KNOWLEDGE CHECK== 1. When is it appropriate to use a table? ==QUESTIONS?== --- ## Lists There are two types of lists that you can use - and ordered list and an unordered list. We will explore an unordered list first. ```htmlmixed <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ``` As you could guess the `<ul>` is for *unordered list* and the `<li>` is for *list item*. You can add as many as you would like. An ordered list is the exact same syntax except that it uses `<ol>` instead of `<ul>` ```htmlmixed <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> ``` There are different styles that can be applied to lists to determine if the list item has a disc beside it or a square. Or If you want to order a list with letters instead of numbers. If you Google "HTML Lists" you can view all of these list style types. ==EXERCISE== > Place in chat > Have them share their screen 1. Create a new PlayCode project 2. Create an unordered list of your favorite sports teams or music artists 3. Create an ordered list of your top 3 movies 4. Name/save project ==QUESTIONS?== --- ## File Paths There are two ways to use file paths in HTML. It doesn't matter if the path is for an image or a link or another element, the path will be either relative or absolute. ### Absolute An absolute file path is the full URL or path to the file/page. ### Relative A relative file path points to a path that is relative to the current page. #### Working with Relative File Paths ```htmlmixed  <img src="images/img.jpg">  <img src="/images/img.jpg">  <img src="../images/img.jpg"> ``` Navigating: * The `/` by itself means to start at the root of the website and proceed from there * The `../` means to go up a directory level and start there * You can add as many `../` as you need to continue you up until the path is correct > Best Practice: If possible, use relative file paths. ## Forms Forms are a crucial part of web development. If you have ever typed anything into a website or signed up for a website account, then you have used a form. A form is used to collect information from the user. Much like a table the form starts with a `<form>` tag and then all the form elements are nested inside. Forms are typically made up of inputs and a submit button. Inputs can be of many different attributes, although the most commonly used is the *text* input. If you set the input attribute to *text* that means that the user will be able to type into it. But inputs can also be checkboxes, radio buttons, emails and many other types. ```htmlmixed <form> <input type="text"> <input type="submit" value="Submit"> </form> ``` ### Labels You can provide a label for your input or you can provide a placeholder attribute for it if it is a text input. The label is placed outside of the input, the placeholder will be visible inside of the input. ```htmlmixed <form> <label>Enter Your Name</label> <input type="text">  <input type="text" placeholder="Enter Your Name"> </form> ``` ### Input Types As I mentioned there are quite a few input types, more than 20 actually. But we will cover a few of the most commonly used types. ==Copy and paste into PlayCode project to save time== ```htmlmixed <form> <label>Text</label> <input type="text"> <br/> <label>Date</label> <input type="date"> <br/> <label>Checkbox</label> <input type="checkbox"> <br/> <label>Color</label> <input type="color"> <br/> <label>Email</label> <input type="email"> <br/> <label>File</label> <input type="file"> <br/> <label>Number</label> <input type="number"> <br/> <label>Phone</label> <input type="tel"> <br/> <label>Password</label> <input type="password"> <br/> <label>Radio</label> <input type="radio"> </form> ``` ### The `value` Attribute Define an initial value. ```htmlmixed <form> <input type="text" value="Default value"> </form> ``` ### The `maxlength` Attribute Defines the maximum length of characters that can be entered into an input. ```htmlmixed <form>  <input type="text" maxlength="5"> </form> ``` ### The `min` and `max` Attributes Defines the minimum and maximum characters to be entered. ```htmlmixed <form> <input type="number" min="2" max="2"> </form> ``` ### The `required` Attribute Form cannot be submitted without entering a value. Does not require a value for the attribute. ```htmlmixed <form> <input type="text" required> </form> ``` ### The `name` Attribute Left this attribute for last because it is the most important. Used to identify the input. The value of the input will not be sent without a name attribute. It is the most important attribute and you should NEVER omit it. ```htmlmixed <form> <input type="text" required> </form> ``` ### Textarea If you need the user to enter a lot of text, the best form element to use is a textarea. ```htmlmixed <form> <textarea placeholder="Enter your complaint here"></textarea> </form> ``` ### The Submit button The form will not send unless a submit button is provided and used. No other input type can be used to send the form to the backend. You want to always provide a value which will be the text that is displayed on the button. The submit button is an input with the type of `submit` ```htmlmixed <form> <input type="text"> <input type="submit" value="Submit Form"> </form> ``` ### The `action` Attribute This is an attribute that you place on the `<form>` tag itself. The action attribute tells the form where to send the form for processing. Typically the user fills out the form, then hits submit. The form is then sent to a backend server that will do something with the form. The action attribute simply takes a path to where you want to send the form. ### The `method` Attribute The method attribute also goes on the `<form>` tag. It tells the form if it should be sent via GET or POST. #### GET There are some backend implications for using GET but the main thing is that anything sent over GET will be visible in the URL or address bar of the browser. So it is a best practice to use POST when sending any sensitive information in a form. What exactly does that mean? If you enter a password into a form where the method is GET, the password will be visible in the address bar of the browser, that is unsafe. Some notes on GET: * Appends form-data into the URL in name/value pairs * Never use GET to send sensitive data! (will be visible in the URL) ==Share your screen and create an HTML file with the following code and show the student== ```htmlmixed <form method="get" action="#"> <input type="password" name="password" placeholder="Enter your Password"> <input type="submit" value="Submit Form"> </form> ``` #### POST As you would imagine, if your form contains sensitive information, you would want to use the POST method. #### Knowing When to Use GET/POST A best practice is to use POST for so called *destructive* actions such as resetting a password, deleting a user, editing, etc. Anything that changes the state of the system. This is because you cannot send a POST request through the address bar. ==EXERCISE== > Place in chat > Have them share their screen 1. Create a new PlayCode project 2. Create a new form 3. Get the users name with a text input 4. Get the users date of birth with a date input 5. Get the users email address with an email input 6. Make the name and email required 7. Set a placeholder for the email 8. Set a label for the name 9. Name/save project ==KNOWLEDGE CHECK== 1. What are forms used for? 2. What is the most important input attribute? 3. If you have a login form where you take in the user's password, should you use GET or POST? ==QUESTIONS?== --- ## Semantic Elements Earlier we talked about the `<div>` element and how it is a catch-all for nesting elements. Imagine you are looking through some code and you see a bunch of div elements. It would be very difficult to tell one thing apart from another. That is why in HTML5 - semantic elements were created. Semantic elements are self-describing, that means you can simply look at them and tell what they are. A div means nothing but a `<footer>` tag, for example is very self-explanatory. ### The `<article>` Element The article element specifies a piece of content that should be possible to be read independent from the rest of the site. Examples include: * A forum post * Blog post ### The `<section>` Element As the name indicates a section is simply a section of the page that does not fall into any other category. ### The `<header>` Element Used for as a container for introductory content such as a heading or subheading. ### The `<footer>` Element The footer which is located at the bottom of the website. ### The `<nav>` Element A set of navigation links that will help the user navigate your site. Not every group of links needs to be inside of a nav. ### The `<aside>` Element Self-explanatory, think of a sidebar. Those are the important ones, although there are a few more. --- ## Video Player In HTML5 you can embed a video. ```htmlmixed <video width="400" controls> <source src="https://docs.google.com/uc?export=download&id=1NmdZuEQmxyYgptuPJtacoFC3d8Yj8bQY" type="video/mp4"> Your browser does not support HTML5 video. </video> ``` If the browser does not support HTML5, that text will show instead of the video. Much like an alt tag on an image. ### Attributes * autoplay * height/width (name/value pairs) * controls --- ## Audio Player In HTML5 you can embed a audio. ```htmlmixed <audio controls> <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> ``` If the browser does not support HTML5, that text will show instead of the video. Much like an alt tag on an image. ### Attributes * controls --- ==MODULE PROJECT== ## Module Project Create an HTML-based webpage about yourself or your hobbies. **Due:** 1 week **How to submit:** Email HTML file to support@getmycodecoach.com with a Subject of "Module Project - YOUR NAME" **Must include: ** * At least 1 heading element * At least 1 paragraph element * At least 1 image with an alt attribute * A table * Semantic footer * At least 1 ordered list * At least 1 comment * At least 1 link that opens in a new tab * A form that captures name and email (both should be required) * A formatted (bold) paragraph * A video player with controls