Introduction to HTML College of Umm A-Qura University Fall 2013
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 2
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 ” 3
Creating an HTML file Notepad or Wordpad (PC) or SimpleText (Mac) First tag: Indicates that you are starting an HTML document Last tag: Indicates that you are ending an HTML document *Note* the open & close structure to HTML Fictional example: and 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. 4
Index.html Example <html> </html> 5
Creating an HTML file (cont.) Header information to begin, and to end Gives information about the page that is not displayed on the page itself Page Title to begin, and to end Example: Transcriptions Studio *Note* that there are no spaces between “ and “ Transcriptions ”, nor between “ Studio ” and “ Challenge: How would you place title information in your page’s header information? 6
Challenge answer: <html> <head> <title>Transcriptions Studio</title> </head> </html> 7
Creating Text in HTML Body Tags and *Note* that all text that appears on the page must be encapsulated within the body tags Text headings and There are six defined heading sizes (largest) through (smallest) Paragraphs and 8
Text Example <html> <head> <title>Transcriptions Studio</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> 9
Text Example (cont.) This is a big heading! This is a smaller heading! This is an example of a paragraph. 10
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 “ ” ends it 11
Comments Example <html> <header> <title>Transcriptions Studio</title> </header> <body> <h1><b><i>This is a big header!</i></b></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.--> 12
HTML Font, Color & Size College of Umm Al-Qura College of Jamoom College of Otaibia Here is a size 5 font This is an example of a paragraph. This text is hex color # This text is red C ustomize your font to achieve a desired look. 13