basic html coding

C I S 6 7Fo u nd ati o n s fo r C re ati n g We b Pa ge s

Professor Al Fichera

BASIC HTML CODING

Rev. August 25, 2010—All HTML code brought to XHTML standards.

<HTML><HEAD>

Basic HTML Coding by Professor Al Fichera http://profal2.com

Historical and Practical Information

August 25, 20102

What is HTML? What is XML? What is XHTML? HTML Structure HTML Style HTML Layout HTML Appearance What Should You Do? Browser Specific


What is HTML?

3

HTML stands for Hypertext Markup Language, it’s based upon a much larger system called SGML (Standard Generalized Markup Language).

In the very early basic HTML, not all tags have a beginning and an end. Some tags are one-sided, and some are containers that hold extra information.

August 25, 2010


XML

4

The Extensible Markup Language (XML) is the universal format for structured documents and data on the Web.

XML is covered in another course.XML in 10 brief points:http://www.w3.org/XML/1999/XML-in-10-points

August 25, 2010

http://www.w3.org/XML/1999/XML-in-10-points


XHTML

5

XHTML 1.0 is written in XML, and is the up-and-coming standard that will help Web designers prepare for the future.

XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools.

Extensible HyperText Mark-Up Language:http://www.w3.org/TR/2001/WD-xhtml1-20011004/#xhtml

August 25, 2010

http://www.w3.org/TR/2001/WD-xhtml1-20011004/#xhtml


XHTML

6

XHTML 1.0 and HTML 4 are very similar and virtually the same but there are a few simple rules we will uncover as this course proceeds.

All XHTML tags need: To be closed. Use lower-case for tags. Have double quotes " after the = sign.

August 25, 2010


HTML Structure

7

HTML is a language for describing the structure of a document, not its actual presentation.

August 25, 2010


HTML Style

8

HTML defines a set of common styles for the Web page.Headings, Paragraphs, Lists, and TablesPlus, character styles: Bold, Italic, etc.

August 25, 2010


HTML Layout

9

HTML does not describe page layout.HTML tags indicate what an element is, e.g., Heading, List.Your job is to decide what type of Heading or List it is.

August 25, 2010


HTML Appearance

10

You can not control the way your readers computers and browsers interpret your Web pages.

You can expect it to look different than what you thought!

August 25, 2010


What Should You Do?

11

Design your pages so they work in most browsers.Focus on clear, well-structured content that is easy to read

and understand.Do not design your pages based on what they look like on

your computer system and on your browser.

August 25, 2010


Browser Specific

12

How many pages have you found on the net that suggest they were written for a specific browser? These were written for appearance only.

Certainly, the times have changed and you’ll probably not find this feature any longer unless it’s a very old page.

August 25, 2010


Stick with the Rules

13

Stick to the rules and you’ll design Web pages that can easily be read by just about every browser.

August 25, 2010


HTML is a Markup Language

14

Start with text and add special tags around the words and paragraphs.A lot like the old DOS for Word!

There is a defined set of tags you can use.Some are browser specific, Netscape has many limitations as a

browser for the Web.

August 25, 2010


A Brief History of HTMLTags

15

HTML 2.0 is the old standard, and maintained by the W3 Consortium.

HTML 3.2 developed in 1996 and supported by several software vendors: IBM, Microsoft, Netscape, Novell to name a few.

August 25, 2010


HTML 3.2 Features

16

The primary additions included:Tables, Applets, Text flow around images.Provided full backward-compatibility with HTML 2.0 standard

August 25, 2010


HTML 4.0 Introduction

17

HTML 4.0 introduced in 1997, the “current generation” and still supported by the consortium.

Only Internet Explorer and Netscape vers. 4 support this version.

August 25, 2010


HTML 4.0 Features

18

Primary additions included at the time:Cascading Style Sheets and Dynamic HTMLNew standards: Framesets (introduced by Netscape 2.0); Floating

Frames (introduced by Internet Explorer 3.0).Currently, we are not suggesting Framesets since they can be

difficult to make accessible for everyone.

August 25, 2010


More on HTML

19

For more on the HTML 4.0 Specification:http://www.w3.org/TR/1998/REC-html40-19980424/

August 25, 2010

http://www.w3.org/TR/1998/REC-html40-19980424/


More on the Future of HTML

20

For more on the HTML 5.0 Specification:http://dev.w3.org/html5/spec/Overview.html

August 25, 2010

http://dev.w3.org/html5/spec/Overview.html


HTML Editors

21

HTML documents are basically ASCII text documents.Any Word Processor, preferably Window’s Notepad should be used

to create the necessary text.For MACs, use your SimpleText editor.

August 25, 2010


Notepad.exe for Creating HTML

22

This program creates basic HTML but does not allow the use of multiple files, you’ll need multiple Notepads open.

August 25, 2010


Opening Tags

23

Start all pages with these tags:<html><head><title> </title></head><body>

August 25, 2010


Closing Tags

24

End all pages with these tags:</body></html>

Newer browsers are not too strict about these opening and closing tags… but older browsers are!

August 25, 2010


Headings

25

Headings serve as headlines for a document.There are six (6) levels of header tags. Level 1 is the largest and

boldest, Level 6 is the smallest. (There is additional space

provided above and below any heading level text.)

August 25, 2010


More Heading Properties

26

Headings can also include placement information inside the tag. For Example:<h1 align="center"> text here </h1>

Or:<h1 align="right"> text here </h1>

August 25, 2010


Paragraphs

27

HTML does not recognize carriage returns or enters, you will need to add a Paragraph tag.The paragraph tag is <p> and the closing tag is a </p> (The

tag can be either before after the paragraph.) The only time you really need to close the <p> tag is

when you place an attribute inside, more on this later.

NOTE: To get the look of a <p> paragraph tag without really using one, you may choose to use two (2) break tags <br /> together.

August 25, 2010


Line Breaks & Paragraphs

28

The <br /> tag leaves normal spacing between lines, whereas the <p> tag leaves 2 to 3 times the space.This sentence example simulates the tag.<br />

This sentence represents the spacing between <br /> lines with the break tag.

This sentence example simulates the <p> tag.<p>

This sentence represents the spacing between<p>

lines with the paragraph tag.

August 25, 2010


Justified Text in Paragraphs

29

Use the <p align="justify">Text </p> tags.

August 25, 2010


Listing Items on a Web Page

30

Adding lists to your Web page:Bullets

called Unordered Lists <ul>Numbered lists

called Ordered Lists <ol>

August 25, 2010


Unordered Lists <ul>

31

When you want to make a bulleted list to drive your point home, do the following:Use the <ul> tag as in the following example:

August 25, 2010

<ul><li> How </li> = l How<li> Now </li> = l Now<li> Brown </li> = l Brown<li> Cow </li> = l Cow</ul>


Ordered Lists <ol>

32

When you want to make a numbered list to drive your point home, do the following:Use the <ol> tag as in the following example:

August 25, 2010

<ol><li> How </li> = 1. How<li> Now </li> = 2. Now<li> Brown </li> = 3. Brown<li> Cow </li> = 4. Cow</ol>


Modifying Lists

33

You can change the appearance of your bullets in an Unordered List <ul> tag.Add the attribute TYPE= to the <ul> tag, followed by

either: disc square circle

For example to make square bullets type: <ul type=“square">

August 25, 2010


Changing Ordering Lists

34

You can change the numbering scheme for Ordered Lists <ol> too! By default numbered lists start at 1.

August 25, 2010


Change to Lettering Lists

35

To change the type of ordering used in your listing, add this to your <ol>tag:<ol type="A" (or a)> this will begin a list with

uppercase or lowercase letters instead of numbers.

August 25, 2010


Change to Roman Numeral

36

To change the type of ordering used in your listing, add this to your <ol>tag:<ol type="I" (or i)> this will begin a Roman

numerals list with uppercase or lowercase letters instead of numbers.

August 25, 2010


Mixing Ordering Lists

37

You can mix the bullet types in the same list by using the Type and Value attributes in the individual <li> </li> line item tags.Note the example on the next slide.The indents come from not closing the <ol> tags until

needed.

August 25, 2010


Nested <OL> Tags

38 August 25, 2010

Image from 1998 Netscape, how could you toss this out?


Definition Lists <dl>

39

Definition lists consists of a tag for the term, <dl> Definition List

A tag for the Title, <dt> Definition TitleA tag for the definition, <dd> Definition

Description.Note: You may place images here instead of text if you wish.

August 25, 2010


Definition Lists <dl>

40

Type the following code to get the results shown below:<dl><dt> Lynx </dt> <dd> A browsing program used to access the World Wide Web. </dd>

</dl>

August 25, 2010

Lynx

A browsing program used to access the World Wide Web.


Using Graphics in <dl> tags

41

Place an Image tag after the <dt> tag. <dt><img src="widget4.gif" /></dt>

August 25, 2010


BLOCKQUOTE

42

Indent both margins with this two-sided tag.Begin by typing <blockquote> [enter] then key-in the

first line of type. Finish with the closing </blockquote>.

You can use a <p align="justify"> in-between the blockquotes too.

August 25, 2010


Using Formatting Extensions

43

Instead of using the deprecated <center> tag try using the newer HTML 4.0 attribute instead. <div align="center"> </div>

August 25, 2010


Using a Non-Breaking Space

44

There will be times when you wish to control Horizontal spacing, this is a good tag to know.

It must be created in lower-case letters only! it adds about one half letter space, but it also keeps text

together.The letters stand for non-breaking space

August 25, 2010


Horizontal Rules

45

If you want to add a horizontal line to your page, use the following:<hr />

Places a horizontal line across the full width of the browser’s page

<hr width="n%" /> Determines the actual length of the line, e.g., 75% = a

line only 3/4ths centered on the page.<hr width="50%" size="20" />

Determines the actual length and width of the line in points.

August 25, 2010


Screen Shot <HR> tags

46

Example Horizontal Rules from last slide.

August 25, 2010


Adding Dimension to a Rule

47

If the line is less than full width of the screen you can apply more rules!For example: <hr width="33%" align="left" />To turn off fancy shading, place the following in the tag: <hr size="5" noshade /> for a filled look. Or, any larger size you wish perhaps 15.

August 25, 2010


Adding Color to a Rule

48

For the benefit of MSIE users only!For example: <hr size="10" noshade style="color: red" />

August 25, 2010


Original 1998 Bibliography

49

Lemay, Laura, Teach Yourself Web Publishing with HTML 4, Sams Publishing, Indianapolis, IN, 1999 (1231 pages).

Williams, and Tollett, The Non-Designer’s Web Book, Peachpit Press, Berkeley, CA, 1998 (288 pages).

Teague, Jason Cranford, DHTML for the World Wide Web, Peachpit Press, Berkeley, CA, 1998 (248 pages).

Vodnik, Sasha, Dynamic HTML, Course Technology, Cambridge, Mass., 1998 (7 tutorials).

Lin, Forest, Short Course in HTML, Scott/Jones Inc., Publishers, El Granada, CA, 1999 (236 pages).

Rouyer, Jeff, Dynamic HTML Web Magic, New Riders, Macmillan Computer Publishing, Indianapolis, IN, 1998 (296 pages, includes CD).

Ibañez, Ardith, and Natalie Zee, HTML Web Magic, Hayden Books, Indianapolis, IN, 1997 (230 pages, includes CD).

Sinclair, and Callister, JAVA Web Magic, Hayden Books, Indianapolis, IN, 1997 (224 pages, includes CD).

August 25, 2010

basic html coding

Documents