Introduction to HTML - Computing and ICT in a Nutshell
Download
Report
Transcript Introduction to HTML - Computing and ICT in a Nutshell
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>
Note that spaces
in the HTML
code don’t
matter
<body>
<h1>This is a heading in heading style 1</h1>
<p>This is my <strong>first</strong> web
page!</p>
</body>
</html>
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> <b> <i>
Text
</i> </b> </p>
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?
margin
For example, if you
were styling this
heading...
The margin is
outside the
object – top,
right, bottom and
left can all be set
separately
Most properties
have intuitive names
and Expression Web
suggests values for
them
padding
My Web Page
The padding is the gap
between the container and
the contents – again, top,
right, bottom and left can
all be set separately