HTML Structure
<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of
the page. And if the page is a long one it might
be split up into several sub-headings.
<p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help
you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>
</html>
Tags act like containers. They tell you something about the information that lies between their opening and closing tags.
HTML pages are text documents.
HTML uses tags (characters that sit inside angled brackets) to give the information they surround special meaning.
Tags are often referred to as elements.
Tags usually come in pairs. The opening tag denotes the start of a piece of content; the closing tag denotes the end.
Opening tags can carry attributes, which tell us more about the content of that element.
Attributes require a name and a value.
To learn HTML you need to know what tags are
available for you to use, what they do, and where they can go.
Extra markup
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Telephone, email
and directions for The Art Bookshop, London, UK" />
<title>Contact The Art Bookshop, London UK</title>
</head>
<body>
<div id="header">
<h1>The Art Book Shop</h1>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="index.html">new publications</a>
</li>
<li class="current-page">
<a href="index.html">contact</a></li>
</ul>
</div><!-- end header -->
<div id="content">
<p>Charing Cross Road, London, WC2, UK</p>
<p><span class="contact">Telephone</span>
0207 946 0946</p>
<p><span class="contact">Email</span>
<a href="mailto:books@example.com">
books@example.com</a></p>
<iframe width="425" height="275" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.co.uk/maps?f=q&
source=s_q&hl=en&geocode=&
q=charing+cross+road+london&output=embed">
</iframe>
</div><!-- end content -->
<p>© The Art Bookshop</p>
</body>
</html>
HTML5
HTML For a long time, web page authors used <div>elements to group
together related elements on the page (such as the elements that form a
header, an article, footer or sidebar). Authors used class or id attributes
to indicate the role of the <div> element in the structure of the page.
HTML5 introduces a new set of elements that allow you to divide up the
parts of a page. The names of these elements indicate the kind of content
you will find in them. They are still subject to change, but that has not
stopped many web page authors using them already.
HTML Tags:
<header> <footer> <nav> <article> <aside>
<section> <hgroup> <figure> <figcaption> <div>
Process and Design
It’s important to understand who your target audience is, why they would come to your site, what information they want to find and when they are likely to return. Site maps allow you to plan the structure of a site. Wireframes allow you to organize the information that will need to go on each page. Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them. You can differentiate between pieces of information using size, color, and style. You can use grouping and similarity to help simplify the information you present.
The ABC of programming
A) What is a script and how do I create one?
B) How do computers fit in with the world around them?
C) How do I write a script fo r a web page?
summary
A script is a series of instructions that the computer can follow in order to achieve a goal.
Each time the script runs, it might only use a subset of all the instructions.
Computers approach tasks in a different way than humans, so your instructions must let the computer solve the task prggrammatically.
To approach writing a script, break down your goal into a series of tasks and then work out each step needed to complete that task (a flowchart can help).