class: middle, center  [http://pjb3.me/bewd-html](http://pjb3.me/bewd-html) .footnote[ created with [remark](http://github.com/gnab/remark) ] --- # HTML HTML stands for HyperText Markup Language. A markup language is not a programming language, it is a formatting language. HTML is the formatting language used by web browsers. A web browser typically loads HTML files from the internet, but it can also display HTML files that are on your local computer. Create a new file using Sublime Text: .terminal $ subl hello.html Put the following code into the file `hello.html`: ```html <h1>Hello, World!</h1> ``` Open the file in your default web browser: .terminal $ open hello.html --- # Hello, World! You should see this in your web browser:  --- # Documents The previous HTML file was just a fragment of HTML. The browser can display it properly, but replace the contents of the file with this and then refresh your browser ```html <html> <head> <title>Example</title> </head> <body> <h1>Hello, World!</h1> </body> </html> ``` You should see the same thing, except that the title of the page is also set. The head is for information about the document The body is for the actual content that should be displayed Both the body and the head are tags that contain other tags. All opening tags are surrounded by `<` and `>` characters. The closing tags also have a `/` following the `<` character. --- # Attributes / Images ```html <html> <head> <title>Example</title> </head> <body> <h1>Hello, World!</h1> <img src="http://betamore.com/wp-content/uploads/2013/04/logo.png" /> </body> </html> ``` Tags can have attributes Use `img` for images. The `src` attribute is the URL of the image. --- # Lists ```html <html> <head> <title>Example</title> </head> <body> <h1>Hello, World!</h1> <img src="http://betamore.com/wp-content/uploads/2013/04/logo.png" /> <ul> <li>Tables</li> <li>Forms</li> <li>Betamore</li> </ul> </body> </html> ``` Use `ul` for unordered lists --- # Lists ```html <html> <head> <title>Example</title> </head> <body> <h1>Hello, World!</h1> <img src="http://betamore.com/wp-content/uploads/2013/04/logo.png" /> <ul> <li><a href="tables.html">Tables</a></li> <li><a href="forms.html">Forms</a></li> <li><a href="http://betamore.com">Betamore</a></li> </ul> </body> </html> ``` Use `a` for links Use relative paths for links to pages on the same site Use absolute paths for links to pages on other sites --- # Tables tables.html ```html <h1>Tables</h1> <table> <tr> <th>Item</th> <th>Quantity</th> <th>Unit Price</th> <th>Total Price</th> </tr> <tr> <td>Muffin</td> <td>2</td> <td>$2.99</td> <td>$5.98</td> </tr> <tr> <td>Coffee</td> <td>1</td> <td>$3.75</td> <td>$3.75</td> </tr> </table> ``` --- # Forms forms.html ```html <form method="POST" action="/register"> </form> ``` Forms are for collecting information that can then be sent to the server to process __method__ is for the HTTP method to be used, usually `POST` __action__ is the URL to post the data to --- # Text Field and Labels ```html <div class="field"> <label> Name <input type="text" name="name" value="Paul"/> </label> </div> ``` `<div>` is for grouping content together The `class` attributes is used for styling with CSS `<label>` is for putting labels next to the form field `<input>` will create a field the user can type in. `type` controls what kind of text you expect, `text` is the most generic type `name` and `value` are what is sent to the server --- # Other Input Types ```html <div class="field"> <label for="email">Email</label> <input type="email" name="email" /> </div> ``` Use `type="email"` when you expect the user to enter an email address ```html <div class="field"> <label> Password <input type="password" name="password" /> </label> </div> ``` Use `type="password"` for password fields --- # Checkbox ```html <div class="field"> <label> <input type="checkbox" name="newsletter" value="1" checked="checked"/> Yes, I would like to receive your weekly newsletter </label> </div> ``` Use `type="checkbox"` for yes/no questions # Radio buttons ```html <div class="fiend"> <label> <input type="radio" name="gender" value="m" /> Male </label> <label> <input type="radio" name="gender" value="f" /> Female </label> </div> ``` Use `type="radio"` for multiple choice questions --- # Select fields ```html <div class="field"> <label> Year Of Birth <select name="year_of_birth"> <option></option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> </select> </label> </div> ``` Use `<select>` fields with `<option>` elements for drop-downs --- # Textarea ```html <div class="field"> <label> How would you describe yourself? <textarea name="description" rows="20" cols="80"></textarea> </label> </div> ``` --- # Buttons ```html <div class="controls"> <button type="submit">Register</button> </div> ``` Use `<button>` to create a button that will submit for the form to the server