1 / 23

HTML Tutorial

HTML Tutorial. Fan Zhang. About me. Fan Zhang faz23@pitt.edu ROOM6150 OFFICE HOUR(TBD). Works we will do in class. Materials that cannot be covered in class Information related to assignments. HTML Tutorial. First version: HTML Tags(1989, Tim Berners Lee) Latest: HTML5(2011)

marva
Download Presentation

HTML Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Tutorial Fan Zhang

  2. About me • Fan Zhang • faz23@pitt.edu • ROOM6150 • OFFICE HOUR(TBD)

  3. Works we will do in class • Materials that cannot be covered in class • Information related to assignments

  4. HTML Tutorial • First version: HTML Tags(1989, Tim Berners Lee) • Latest: HTML5(2011) • Best resource for learning HTML: • http://www.w3schools.com/html/html_examples.asp

  5. Writing HTML is Easy! • Step1:Know the tags • Step2: Write the tags • Keep the tags matched • Step3: Save it as HTML

  6. Basic Example • Basic Tags required: <html><body> • <!DOCTYPE html><html><body>Hello World!</body></html>

  7. Let’s cook it a little bit… • Adding Headings: • <!DOCTYPE html><html><body> <h1>Fan says</h1>Hello World!</body></html>

  8. Paragraphs • <!DOCTYPE html><html><body> <h1>Fan says</h1>Hello World! Hello World! <h2>For comparison</h2> <p>Hello World!</p> <p>Hello World!</p></body></html>

  9. Adding a break • <!DOCTYPE html><html><body> <h1>Fan says</h1>Hello World!<br/> Hello World! <h2>For comparison</h2> <p>Hello World!</p> <p>Hello World!</p></body></html>

  10. Adding more breaks • <!DOCTYPE html><html><body> • <h1>Fan says</h1>Hello <br>World!</br><br/> • Hello World! • <h2>For comparison</h2> • <p>Hello World!</p> • <p>Hello World!</p></body></html>

  11. More text formatting • <!DOCTYPE html> • <html> • <body> • <p><b>This text is bold</b></p> • <p><strong>This text is strong</strong></p> • <p><em>This text is emphasized</em></p> • <p><i>This text is italic</i></p> • <p><small>This text is small</small></p> • <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> • </body> • </html>

  12. Hyperlinks • <!DOCTYPE html><html><body> • <h1>Fan says</h1>Hello World!<br/> • <a href= 'http://www.cs.pitt.edu/~zhangfan'>Click here!</a> • <h2>For comparison</h2> • <p>Hello World!</p> • <p>Hello World!</p></body></html>

  13. Insert an Image • <!DOCTYPE html><html><body> • <h1>Fan says</h1>Hello World!<br/> • <a href = 'http://www.cs.pitt.edu/~zhangfan'>Click here!</a> • <p> • <imgsrc="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" • > • </p> • <h2>For comparison</h2> • <p>Hello World!</p> • <p>Hello World!</p></body></html>

  14. Image link • <!DOCTYPE html><html><body> • <h1>Fan says</h1>Hello World!<br/> • <a href = 'http://www.cs.pitt.edu/~zhangfan'><img src="http://www.w3schools.com/images/w3schools_green.jpg" alt=“Click here" • > • </a> • <h2>For comparison</h2> • <p>Hello World!</p> • <p>Hello World!</p></body></html>

  15. Table • Basic Tags: • Head: <th> • Row: <tr> • Column: <td>

  16. Tables • <!DOCTYPE html> • <html> • <body> • <table border = ‘1’> • <caption> sample</caption> • <tr> • <th>a</th> • <th>b</th> • <th>c</th> • </tr> • <tr> • <td>400</td> • <td>500</td> • <td>600</td> • </tr> • </table> • </body> • </html>

  17. Tables • <!DOCTYPE html> • <html> • <body> • <h4>Cell that spans two columns:</h4> • <table border="1"> • <tr> • <th>Name</th> • <thcolspan="2">Telephone</th> • </tr> • <tr> • <td>Bill Gates</td> • <td>555 77 854</td> • <td>555 77 855</td> • </tr> • </table> • </body> • </html>

  18. List • <!DOCTYPE html> • <html> • <body> • <h4>An Unordered List:</h4> • <ul> • <li>Coffee</li> • <li>Tea</li> • <li>Milk</li> • </ul> • <h4> Ordered List:</h4> • <ol> • <li>Coffee</li> • <li>Tea</li> • <li>Milk</li> • </ol> • </body> • </html>

  19. Nested List • <!DOCTYPE html> • <html> • <body> • <h4>A nested List:</h4> • <ul> • <li>Coffee</li> • <li>Tea • <ul> • <li>Black tea</li> • <li>Green tea</li> • </ul> • </li> • <li>Milk</li> • </ul> • </body> • </html>

  20. Table and list • <!DOCTYPE html> • <html> • <body> • <table border="1"> • <tr> • <td> • <p>This is a paragraph</p> • <p>This is another paragraph</p> • </td> • <td>This cell contains a table: • <table border="1"> • <tr> • <td>A</td> • <td>B</td> • </tr> • <tr> • <td>C</td> • <td>D</td> • </tr> • </table> • </td> • </tr> • <tr> • <td>This cell contains a list • <ul> • <li>apples</li> • <li>bananas</li> • <li>pineapples</li> • </ul> • </td> • <td>HELLO</td> • </tr> • </table> • </body> • </html>

  21. Form • <!DOCTYPE html> • <html> • <body> • <form action=""> • Username: <input type="text" name="user"><br> • Password: <input type="password" name="password"> • </form> • </body> • </html>

  22. Learn more from W3School! • http://www.w3schools.com/html/html_examples.asp

  23. Thank you!

More Related