170 likes | 293 Views
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
E N D
Introduction to HTML L.C.M Center Workshop Fall 2008
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
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
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.
Index.html Example <html> </html>
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?
Challenge answer: <html> <head> <title>Transcriptions Studio</title> </head> </html>
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>
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>
Text Example (cont.) This is a big heading! This is a smaller heading! This is an example of a paragraph.
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
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.-->