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!
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. <b>bold text<b>
Text Editor A text editor is a programming for writing text Unlike a word processor, such as Word, it only saves the content – there is no style information 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
How Web-Pages are Made Web-pages are just text files and can be created in Notepad The content and the styles are both typed in The content is just entered in the form of words The style is entered in things called tags, which are in triangular brackets, e.g. <p> for paragraph or <strong> for bold. Most tags come in pairs – one to turn the style on, and one to turn it off again, so you can have One <strong>bold</strong> word in the middle of a sentence.
Example Web-Page <html> <head> <title>My web page</title> </head> <body> <h1>This is a heading in heading style 1</h1> <p>This is my <strong>first</strong> web page!</p> </body> </html> Note that spaces in the HTML code don’t matter
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 <p><b><i>A bold, italic paragraph</i></b></p> <p> </p> <b> </b> <i> </i> Text
The Order of Tags If you use two styles at once it doesn’t matter what order they’re in <strong><em>text</em> </strong> is the same as <em><strong>text </strong></em>… Unless it doesn’t make sense, e.g. You can have a bold word in the middle of a paragraph: <p>A <strong>bold</strong> word</p>… But you can’t have a paragraph in the middle of a bold word!
Common HTML Elements <h1>Heading</h1> (there are also h2-h6) <p>paragraph</p> <img> (notice that there is no </img>) <div>A logical division, a bit like a textbox</div> Elements can be given: A unique id, e.g. <div id=“header”>...</div> A class, e.g. <p class=“warning”>...</p>
Cascading Style Sheets (CSS) CSS is used to style the content on your page Styles can be applied to: Element types, e.g. p {text-align: justify} IDs, e.g. #header {font-family: Arial, Helvetica, sans-serif; font-size: 24px} Classes, e.g. .warning {color: red} Styles can be added to the HTML tags, or separated into the header or even a separate file.
Margin or Padding? For example, if you were styling this heading... My Web Page padding The margin is outside the object – top, right, bottom and left can all be set separately The padding is the gap between the container and the contents – again, top, right, bottom and left can all be set separately Most properties have intuitive names and Expression Web suggests values for them