1 / 115

Introduction to HTML

Introduction to HTML. Lora Budzier Senior Internet Specialist Lora.Budzier@uspto.gov. Agenda. Introduction Tools Coding Basics Structuring Text Adding Functionality Formatting Text. Introduction. HyperText Markup Language (HTML)

anais
Download Presentation

Introduction to HTML

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. 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

More Related