1 / 23

Introduction to HTML: Basics and Beyond

Welcome to the HTML tutorial by Fan Zhang! This guide covers the fundamentals of HTML, from the earliest tags introduced by Tim Berners-Lee in 1989 to the latest HTML5 specifications established in 2011. You'll learn how to create basic HTML documents, work with headings, paragraphs, text formatting, hyperlinks, images, tables, and lists. Each section includes sample code for practical understanding. Join us in class to explore HTML's capabilities or refer to recommended resources for further learning. Let's make web development fun and easy!

marva
Télécharger la présentation

Introduction to HTML: Basics and Beyond

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