Writing Html Source Code

3rd: WRITING HTML CODEDEMO 2

YOU DOWNLOAD: WEB AUTHORING WITH HTML (see Lab 10!)

Then you’ll launch DREAMWEAVER, show CODE, Select All the code, and DELETE IT.

I’ll use WORD here to INCREASE FONT SIZE.

HTMLBASICS

Commands (like Turing keyword): most are typed between two tags: beginner and ending.

Tags use brackets:

─Beginner tag: <title>

─Ending tag: </title>

Example:

<title> Welcome to my Page! </title>

Some commands don’t use an ending tag.

Example:

<p>

which causes a paragraph break.

<br>

which causes a line break.

IMPORTANT SIDEBAR!

None of the spacing in your source code will be read by the browser. That’s just for “programmer readability,” much like inserting paragraph spaces (and indenting) in your Turing code.

To format text, you will use HTML formatting tags.

Examples:

Boldface:

I do <b> not </b> like runny eggs.

is rendered as:

I do not like runny eggs.

<br>

Headers:

<h1> This is a level one header </h1>

Header styles are 1 through 6; in relation to normal text:

<h1> is the most dramatic, and <h6> the least.

Controlling Spacing, ordered and unordered lists, using horizontal lines, adding graphics, links, mailto’s, etc…….

ALL covered in the ATN handout.

CRITICAL DIGRESSION:

ABSOLUTE AND RELATIVE REFERENCING!

ADDING LINKS TO OTHER PAGES

You will learn this format:

Absolute reference:

<a href = “full URL goes here”> anchor text </a>

Relative reference:

<a href = “filename.ext”> anchor text </a>

Where “anchor text” is the text that is displayed as the link (user clicks on it).

Examples:

<a href = “ CNN news </a>

<a href = “products.html”> Our Products! </a>

Note the IMPORTANT differences here!

PREVIEW OF COMING ATTRACTIONS:

ADDING an INLINE IMAGE

A graphics file that displays as part of your html document.

Use this format:

Example:

Note this is a relative reference!

Store in-line graphic files in the same folder as the HTML document that points to it.

ADDING A MAILTO TAG

<a href = “mailto:”> anchor text</a>

Example:

or, the anchor text could be your email address.:

A BASIC PAGE:

An HTML document is composed of a SINGLE ELEMENT:

<html>

everything in between

</html>

THAT, in turn is composed of HEAD and BODY elements:

<head>

heading info (generally, the TITLE…)

</head>

<body>

body info (everything else)

</body>

SO YOUR DOC looks something like:

<html>

<head> identifies heading area

Page title that appears in Titlebar.

</head>

<body>

Body goes here

</body> <!—body ends here!-->

</html>

So let’s type a simple personal home page….