Introduction to HTML - PowerPoint PPT Presentation

introduction to html n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to HTML PowerPoint Presentation
Download Presentation
Introduction to HTML

play fullscreen
1 / 115
Introduction to HTML
186 Views
Download Presentation
anais
Download Presentation

Introduction to HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Introduction to HTML Lora Budzier Senior Internet Specialist Lora.Budzier@uspto.gov

  2. Agenda • Introduction • Tools • Coding Basics • Structuring Text • Adding Functionality • Formatting Text

  3. Introduction • HyperText Markup Language (HTML) • Text Files With Codes That Change the Layout, Add Images, or Creates Links to Other Pages

  4. Tools • Text Editor • Notepad, WordPad • Microsoft FrontPage • Macromedia Dreamweaver • Adobe GoLive

  5. Coding Basics • HTML Tag • HEAD Tag • TITLE Tag • META Tag • BODY Tag • Content

  6. Coding Basics • HTML Tag • Opens and Closes an HTML Document

  7. Coding Basics <html> </html>

  8. <html> <head> </head> </html> Coding Basics • HEAD Tag • Information Not Displayed On-Screen • Contains Document Information (i.e., Title and Keywords)

  9. Insert the HEAD Tags in Between the HTML Tags <html> </html> Coding Basics <head> </head>

  10. <html> <head> <title> </title> </head> </html> Coding Basics • TITLE Tag • Required in All HTML Documents • Used to Identify Contents of Document • Avoid Generic Titles

  11. Insert the TITLE Tags Within the HEAD Tags <html> <head> </head> </html> Coding Basics <title>My First Web Page</title>

  12. Generic Title <html> <head> <title>Home Page</title> </head> </html> Specific Title <html> <head> <title>United States Patent and Trademark Office Home Page</title> </head> </html> Coding Basics

  13. Coding Basics • META Tag • Used to Store Browser and Search Engine Information • Descriptions • Keywords • Cache Information • Indexing • Sets the Character Set for a Document

  14. <html> <head> <title> </title> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”> </head> </html> Coding Basics

  15. <html> <head> <title>My First Web Page</title> </head> <body> </body> </html> Coding Basics • BODY • Contains Document Content

  16. Insert the BODY Tags After the Closing HEAD Tag <html> <head> <title>My First Web Page</title> </head> </html> Coding Basics <body> </body>

  17. <html> <head> <title>My First Web Page</title> </head> <body> <!--Below is the content of the web page--> </body> </html> Structuring Text • Comments • Used by Designer to Denote Information • Information Not Displayed On-Screen

  18. <html> <head> <title>My First Web Page</title> </head> <body> </body> </html> Insert COMMENT Tags Within the HTML Tags Structuring Text <!--Below is the content of the page-->

  19. Structuring Text • Headings • Start and End Tags are Required • Headings Should Briefly Describe the Section it Introduces • Each Level has Different Attributes • H1 is the largest • H6 is the smallest

  20. <html> <head> <title>My First Web Page</title> </head> <body> <!—Below is the content of the page--> </body> </html> Insert HEADING Tags Within the BODY Tags Structuring Text <h1>This is heading 1.</h1> <h2>This is heading 2.</h2> <h3>This is heading 3.</h3> <h4>This is heading 4.</h4> <h5>This is heading 5.</h5> <h6>This is heading 6.</h6>

  21. In the File Menu, Select Save As Enter a Name in the File Name Field, Using the .htm File Extension Select All Files From the Drop Down Type Menu <html> <head> <title>My First Web Page</title> </head> <body> <!—Below is the content of the page--> </body> </html> TC2600_TechFair Structuring Text <h1>This is heading 1.</h1> <h2>This is heading 2.</h2> <h3>This is heading 3.</h3> <h4>This is heading 4.</h4> <h5>This is heading 5.</h5> <h6>This is heading 6.</h6> firstpage.htm

  22. Locate and Double Click on the HTML File to View the Webpage Note the Location of the Title When Displayed in the Browser Structuring Text

  23. Structuring Text • Paragraphs • Discourage the Use of Empty Paragraph Tags • Start Tag Required • End Tag Optional • Line Breaks • Start Tag Required • End Tag Forbidden

  24. <html> <head> <title>My First Web Page</title> </head> <body> <!--Below is the content of the web page--> <p>Text tends to be formatted in paragraphs and on occasion extra space is desired between paragraphs or in specific places. <br> <p>Line breaks are good for that!</p> </body> </html> Structuring Text

  25. Structuring Text

  26. Structuring Text • Lists • Ordered (Numbered) Lists • Start and End Tags Required • Unordered (Bulleted) Lists • Start and End Tags Required] • List Items • Start Tag Required • End Tag Optional

  27. <body> <!--Below is the content of the web page--> <p>Ordered Lists <ol> <li>Apple</li> <li>Banana</li> <li>Carrot</li> </ol> <p>Unordered Lists <ul> <li>Clothing </li> <li>Kayak </li> <li>Food </li> </ul> </body> Structuring Text

  28. Structuring Text

  29. <body> <!--Below is the content of the web page--> <p>Ordered Lists <ol> <li>Food</li> <ul> <li>Apple</li> <li>Banana</li> <li>Carrot</li> </ul> </ol> </body> Structuring Text • Nested Lists

  30. Structuring Text

  31. Structuring Text • Basic Tables • Attributes • Border • Cellspacing • Cellpadding • Width • Headers

  32. <html> <head> <title>My First Web Page</title> </head> <body> <!--Below is the code for a basic table--> <table> <tr> <td>Cell content</td> </tr> </table> </body> </html> Structuring Text

  33. Structuring Text

  34. <table border=“1”> <tr> <td>Cell content</td> </tr> </table> Structuring Text • Border • Draws Table Lines

  35. A One Pixel Border Around the One Row One Column Table Structuring Text

  36. <table border=“1”> <tr> <td>Cell Content Row 1</td> </tr> <tr> <td>Cell Content Row 2</td> </tr> </table> Structuring Text • Adding Rows

  37. A One Pixel Border Around the Two Row One Column Table Structuring Text

  38. <table border=“1”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Adding Columns

  39. A One Pixel Border Around the Two Row Two Column Table Structuring Text

  40. <table border=“1” cellspacing=“10”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Cellspacing • Space Between Cells

  41. A Ten Pixel Space Between the Two Rows and Columns Structuring Text

  42. <table border=“1” cellspacing=“10” cellpadding=“10”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Cellpadding • Distance Between the Cell and Its Content

  43. A Ten Pixel Space Between the Cell and its Content Structuring Text

  44. Structuring Text • Width • Absolute Values • Maintains Width No Matter the Browser Size • Relative Values • Resizes with the Browser

  45. <table border=“1” cellspacing=“10” cellpadding=“10” width=“600”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Absolute

  46. An Absolute Table Remains the Same Width No Matter the Browser Window Size Structuring Text

  47. <table border=“1” cellspacing=“10” cellpadding=“10” width=“100%”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Relative

  48. A Relative Table Changes to the Width of the Browser Window Structuring Text

  49. <table border=“1” cellspacing=“10” cellpadding=“10” width=“100%”> <tr> <th>Cell Content Column 1</th> <th>Cell Content Column 2</th> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Column Headers

  50. A Default Table Header Displays Bold and Centered Structuring Text