1 / 12

Introduction to HTML

Introduction to HTML. L.C.M Center Workshop Fall 2008. What is HTML?. H yper T ext M arkup L anguage Web authoring software language Specifically created to make World Wide Web pages Created by Tim Berners-Lee in 1993 from SGML. What is HTML?. HTML files Text files

ipo
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 L.C.M Center Workshop Fall 2008

  2. What is HTML? • Hyper Text Markup Language • Web authoring software language • Specifically created to make World Wide Web pages • Created by Tim Berners-Lee in 1993 from SGML

  3. What is HTML? • HTML files • Text files • Contain mark-up tags • Tags direct how page is to be displayed by browser • Can be created from a simple text editor • File extension .htm or .html

  4. Creating an HTML file • Notepad or Wordpad (PC) or SimpleText (Mac) • First tag: <html> • Indicates that you are starting an HTML document • Last tag: </html> • Indicates that you are ending an HTML document • *Note* the open & close structure to HTML • Fictional example: <sleep> and </sleep> • Save file as index.html • This is a typical default title for home pages • Windows may seem to prefer .htm but .html will also work just fine.

  5. Index.html Example <html> </html>

  6. Creating an HTML file (cont.) • Header information • <head> to begin, and </head> to end • Gives information about the page that is not displayed on the page itself • Page Title • <title> to begin, and </title> to end • Example: <title>Transcriptions Studio</title> • *Note* that there are no spaces between <title> and Transcriptions, nor between Studio and </title> Challenge: How would you place title information in your page’s header information?

  7. Challenge answer: <html> <head> <title>Transcriptions Studio</title> </head> </html>

  8. Creating Text in HTML • Body Tags • <body> and </body> • *Note* that all text that appears on the page must be encapsulated within the body tags • Text headings • <h1> and </h1> • There are six defined heading sizes • <h1> (largest) through <h6> (smallest) • Paragraphs • <p> and </p>

  9. Text Example <html> <head> <title>Literature.Culture.Media Center</title> </head> <body> <h1>This is a big heading!</h1> <h2>This is a smaller heading</h2> <p>This is an example of a paragraph.</p> </body> </html>

  10. Text Example (cont.) This is a big heading! This is a smaller heading! This is an example of a paragraph.

  11. HTML Organization • Spacing • Spacing organizes your work! • Spacing makes your files easy to read! • Spacing makes no functional difference to your web browser • Comments • Comments are notes in your HTML file • Comments make no functional difference to your web browser • “<!--” begins a comment, and “ -->” ends it

  12. Comments Example <html> <head> <title>Literature.Culture.Media Center</title> </head> <body> <h1>This is a big header!</h1> <h2>This is a smaller heading</h2> <p>This is an example of a paragraph.</p> </body> </html> <!-- This is an example of a comment.-->

More Related