1. Introduction to HTML Today we will look at: Separating style and content The purpose of a text editor such as Notepad How web-pages are made Creating a web-page!

2. Style and Content Documents have content and style The content is the words on the page – what the document actually says The style is how it looks: –Font – including bold, italic, etc. –Colours – text and background –Alignment – paragraphs, justification, etc. Inside the document, style and content are often stored separately, and in old word processors you could see the styles, e.g. bold text

3. WYSIWYG When we edit text, we are used to seeing text and style combined – this is called WYSIWYG, or what you see is what you get:

4. Not WYSIWYG! With early word processors, however, this was not possible, and you could only see what the finished document would look like after you’d printed it:

5. Text Editor A text editor is a program for writing text Unlike a word processor, such as Word, it only saves the text – there is no style information such as font or colour names. Because only the words are saved, the files tend to be much smaller than Word files There is a text editor in Windows called Notepad Files created in Notepad are very portable because they work on any computer regardless of what fonts are installed on it

6. How Web-Pages are Made Web-pages are just text files and can be created in Notepad The text and the style information are both typed The text content is entered in the form of words The style is entered in things called tags, which are in triangular brackets, e.g. for bold or for italic. Most tags come in pairs – one to turn the style on, and one to turn it off again, so you can have One bold word in the middle of a sentence.

7. Example Web-Page My web page This is a heading in heading style 1 This is my first web page! Note that spaces in the HTML code don’t matter

8. The Order of Tags in HTML Styles are built up in layers around the text, like an onion! The styles must be turned off in the opposite order in which they were turned on. For example, if you wanted a paragraph with some bold, italic text in it, you would have A bold, italic paragraph Text

9. The Order of Tags If you use two styles at once it doesn’t matter what order they’re in text is the same as text … Unless it doesn’t make sense, e.g. –You can have a bold word in the middle of a paragraph: A bold word … –But you can’t have a paragraph in the middle of a bold word!

10. Useful Tags Heading (there are also h2-h6) paragraph - creates a new line (like pressing Enter) bold italic underlined red text Arial text small text