Introduction to HTML

WHAT IS HTML
• Stands for Hyper Text Markup Language
• Computer language used to create web pages
• Tags tell Web browser how to display a page
• Can have either *.htm or *.html file extension
• HTML describes the content and format of web pages using
tags.
Ex. Title Tag: <title>A title </title>
• It’s the job of the web browser to interpret tags and display the
content accordingly.

HTML SYNTAX
• HTML syntax:
two-sided tag:
<tag attributes>document content</tag>
Starting tag Properties of the tag.
Optional!
Actual content appears in
webpage. It could be empty
Closing tag
Examples: <p> CGS 2100 </p>
<body bgcolor = “yellow”> UCF </body>

STRUCTURE OF THE WEB PAGE
Inside the <html></html> tag
Each web page has a head part described in <head></head> tag:
<html>
<head>
<title> CGS 2100 </title>
</head>
</html>
The title of the
web page should
be put here

STRUCTURE OF THE WEB PAGE
• Inside the <html></html> tag
• Each web page has a body part described in <body></body> tag:
<html>
<head>
<title> CGS 2100 </title>
</head>
<body>
This is a sample HTML file.
</body>
</html>
The content of the whole
web page should be put
here

BACKGROUND COLOR
IT IS VERY COMMON TO SEE WEB PAGES WITH THEIR
BACKGROUND COLOR SET TO WHITE OR SOME OTHER
COLORS.
TO SET YOUR DOCUMENT’S BACKGROUND COLOR, YOU NEED
TO EDIT THE <BODY> ELEMENT BY ADDING THE BGCOLOR
ATTRIBUTE. THE FOLLOWING EXAMPLE WILL DISPLAY A
DOCUMENT WITH A WHITE BACKGROUND COLOR:
<BODY BGCOLOR=“#FFFFFF”></BODY>

TEXT COLOR
THE TEXT ATTRIBUTE IS USED TO CONTROL THE COLOR OF ALL THE
NORMAL TEXT IN THE DOCUMENT. THE DEFAULT COLOR FOR TEXT
IS BLACK. THE TEXT ATTRIBUTE WOULD BE ADDED AS FOLLOWS:
<BODY BGCOLOR=“#FFFFFF”TEXT=“#FF0000”></BODY>
IN THIS EXAMPLE THE DOCUMENT’S PAGE
COLOR IS WHITE AND THE TEXT WOULD BE RED.

Using Image Background
The BODY element also gives you ability of setting an image as
the document’s background.
An example of a background image’s HTML code is as follows:
<BODY BACKGROUND=“hi.gif”BGCOLOR=“#FFFFFF”>
</BODY>

HEADINGS, <HX> </HX>
INSIDE THE BODY ELEMENT, HEADING ELEMENTS H1 THROUGH
H6 ARE GENERALLY USED FOR MAJOR DIVISIONS OF THE
DOCUMENT. HEADINGS ARE PERMITTED TO APPEAR IN ANY
ORDER, BUT YOU WILL OBTAIN THE BEST RESULTS WHEN
YOUR DOCUMENTS ARE DISPLAYED IN A BROWSER IF YOU
FOLLOW THESE GUIDELINES:
H1: SHOULD BE USED AS THE HIGHEST LEVEL OF HEADING, H2 AS THE
NEXT HIGHEST, AND SO FORTH.
YOU SHOULD NOT SKIP HEADING LEVELS: E.G., AN H3 SHOULD NOT
APPEAR AFTER AN H1, UNLESS THERE IS AN H2 BETWEEN THEM.

HEADINGS, <HX> </HX>
<HTML>
<HEAD>
<TITLE> EXAMPLE PAGE</TITLE>
</HEAD>
<BODY>
<H1> HEADING 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Paragraphs, <P> </P>
Paragraphs allow you to add text to a document
in such a way that it will automatically adjust
the end of line to suite the window size of the
browser in which it is being displayed. Each
line of text will stretch the entire length of
the window.

PARAGRAPHS, <P> </P>
<HTML><HEAD>
</HEAD>
<BODY></H1> HEADING 1 </H1>
<P> PARAGRAPH 1, ….</P>
<H6> HEADING 6</H6>
</BODY></HTML>
Heading 1
Paragraph 1,….
Heading 2
Paragraph 2,….
Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….

BREAK, <BR>
LINE BREAKS ALLOW YOU TO DECIDE WHERE THE
TEXT WILL BREAK ON A LINE OR CONTINUE TO
THE END OF THE WINDOW.
A <BR> IS AN EMPTY ELEMENT, MEANING THAT IT
MAY CONTAIN ATTRIBUTES BUT IT DOES NOT
CONTAIN CONTENT.
THE <BR> ELEMENT DOES NOT HAVE A CLOSING
TAG.

BREAK, <BR>
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>PARAGRAPH 1, <BR>
LINE 2 <BR> LINE 3 <BR>….
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
Line 3
….

HORIZONTAL RULE, <HR>
THE <HR> ELEMENT CAUSES THE BROWSER TO DISPLAY
A HORIZONTAL LINE (RULE) IN YOUR DOCUMENT.
<HR> DOES NOT USE A CLOSING TAG, </HR>.

HORIZONTAL RULE, <HR>
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>PARAGRAPH 1, <BR>
LINE 2 <BR>
<HR>LINE 3 <BR>
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
_________________________
__
Line 3

BOLD, ITALIC AND OTHER CHARACTER FORMATTING
ELEMENTS
<FONT SIZE=“+2”> TWO SIZES BIGGER</FONT>
THE SIZE ATTRIBUTE CAN BE SET AS AN ABSOLUTE VALUE FROM 1 TO 7 OR AS A
RELATIVE VALUE USING THE “+” OR “-” SIGN. NORMAL TEXT SIZE IS 3 (FROM -2 TO +4).
<B> BOLD </B>
<I> ITALIC </I>
<U> UNDERLINE </U>
COLOR = “#RRGGBB” THE COLOR ATTRIBUTE OF THE FONT ELEMENT. E.G., <FONT
COLOR=“#RRGGBB”>THIS TEXT HAS COLOR</FONT>
<PRE> PREFORMATTED </PRE> TEXT ENCLOSED BY PRE TAGS IS DISPLAYED IN A MONO-
SPACED FONT. SPACES AND LINE BREAKS ARE SUPPORTED WITHOUT ADDITIONAL
ELEMENTS OR SPECIAL CHARACTERS.

ALIGNMENT
SOME ELEMENTS HAVE ATTRIBUTES FOR ALIGNMENT
(ALIGN) E.G. HEADINGS, PARAGRAPHS AND HORIZONTAL
RULES.
THE THREE ALIGNMENT VALUES ARE : LEFT, RIGHT,
CENTER.
<CENTER></CENTER> WILL CENTER ELEMENTS.

ALIGNMENT
<DIV ALIGN=“VALUE”></DIV> REPRESENTS A DIVISION IN
THE DOCUMENT AND CAN CONTAIN MOST OTHER ELEMENT
TYPE. THE ALIGNMENT ATTRIBUTE OF THE DIV ELEMENT IS
WELL SUPPORTED.
<TABLE></TABLE> INSIDE A TABLE, ALIGNMENT CAN BE SET
FOR EACH INDIVIDUAL CELL.

ADDITIONAL CHARACTER FORMATTING ELEMENTS
<STRIKE> STRIKE-THROUGH TEXT</STRIKE>
DEL IS USED FOR STRIKE AT THE LATEST BROWSERS
<BIG> PLACES TEXT IN A BIG FONT</BIG>
<SMALL> PLACES TEXT IN A SMALL FONT</SMALL>
<SUB> PLACES TEXT IN SUBSCRIPT POSITION </SUB>
<SUP> PLACES TEXT IN SUPERSCRIPT STYLE POSITION </SUP>

LISTS
1.CREATE AN UNORDERED LIST.
2.CREATE AN ORDERED LIST.
3.CREATE A DEFINED LIST.
4.NEST LISTS.

LIST ELEMENTS
HTML SUPPLIES SEVERAL LIST ELEMENTS. MOST
LIST ELEMENTS ARE COMPOSED OF ONE OR
MORE <LI> (LIST ITEM) ELEMENTS.
UL : UNORDERED LIST. ITEMS IN THIS LIST
START WITH A LIST MARK SUCH AS A BULLET.
BROWSERS WILL USUALLY CHANGE THE LIST
MARK IN NESTED LISTS.
<UL>
<LI> LIST ITEM …</LI>
</UL>

LIST ELEMENTS
YOU HAVE THE CHOICE OF THREE BULLET
TYPES: DISC(DEFAULT), CIRCLE, SQUARE.
THESE ARE CONTROLLED IN NETSCAPE
NAVIGATOR BY THE “TYPE” ATTRIBUTE FOR THE
<UL> ELEMENT.
<UL TYPE=“SQUARE”>
</UL>

LIST ELEMENTS
OL: ORDERED LIST. ITEMS IN THIS LIST ARE
NUMBERED AUTOMATICALLY BY THE
BROWSER.
<OL>
</OL>

LIST ELEMENTS
YOU CAN SPECIFY A STARTING NUMBER FOR AN
ORDERED LIST.
<OL TYPE =“I”>
</OL>
<P> TEXT ….</P>
<OL TYPE=“I” START=“3”>
</OL>

NESTING LISTS
You can nest lists by inserting a
UL, OL, etc., inside a list item
(LI).
Example
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
</OL>
</LI>
</UL>
 List item…
 List item…
iii. List item…
iv. List item…
v. List item…
vi. List item…
vii.List item…
 List item…

 TABLES
THE <TABLE></TABLE> ELEMENT HAS FOUR SUB-ELEMENTS:
1.TABLE ROW <TR></TR>.
2.TABLE HEADER <TH></TH>.
3.TABLE DATA <TD></TD>.
4.CAPTION <CAPTION></CAPTION>.
THE TABLE ROW ELEMENTS USUALLY CONTAIN TABLE HEADER
ELEMENTS OR TABLE DATA ELEMENTS.

TABLES
<TABLE BORDER=“1”>
<TR>
<TH> COLUMN 1 HEADER </TH>
<TH> COLUMN 2 HEADER </TH>
</TR>
<TR>
<TD> ROW1, COL1 </TD>
</TR>
<TR>
</TR>
</TABLE>
Column 1
Header
Column 2
Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2

TABLES ATTRIBUTES
BGCOLOR: SOME BROWSERS SUPPORT BACKGROUND COLORS IN A TABLE.
WIDTH: YOU CAN SPECIFY THE TABLE WIDTH AS AN ABSOLUTE NUMBER OF
PIXELS OR A PERCENTAGE OF THE DOCUMENT WIDTH. YOU CAN SET THE WIDTH
FOR THE TABLE CELLS AS WELL.
BORDER: YOU CAN CHOOSE A NUMERICAL VALUE FOR THE BORDER WIDTH,
WHICH SPECIFIES THE BORDER IN PIXELS.
CELLSPACING: CELL SPACING REPRESENTS THE SPACE BETWEEN CELLS AND IS
SPECIFIED IN PIXELS.

TABLE ATTRIBUTES
CELLPADDING: CELL PADDING IS THE SPACE BETWEEN
THE CELL BORDER AND THE CELL CONTENTS AND IS
SPECIFIED IN PIXELS.
ALIGN: TABLES CAN HAVE LEFT, RIGHT, OR CENTER
ALIGNMENT.
BACKGROUND: BACKGROUND IMAGE, WILL BE TITLED IN
IE3.0 AND ABOVE.
BORDERCOLOR, BORDERCOLORDARK.

THE <INPUT> TAG
• Most, but not all, form elements use the input tag, with
a type="..." argument to tell which kind of element it is
• type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
• Other common input tag arguments include:
• name: the name of the element
• value: the “value” of the element; used in different ways for
different values of type

TEXT INPUT
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">

BUTTONS
• A submit button:
<input type="submit" name="Submit" value="Submit">
• A reset button:
<input type="reset" name="Submit2" value="Reset">
• A plain button:
<input type="button" name="Submit3" value="Push Me">
• submit: send data
• reset: restore all form elements to
their initial state
• button: take some action as
specified by JavaScript

CHECKBOXES
A checkbox:
<input type="checkbox" name="checkbox”value="checkbox" checked>
• type: "checkbox"
• name: used to reference this form element from JavaScript
• value: value to be returned when element is checked
• Note that there is no text associated with the checkbox—
you have to supply text in the surrounding HTML

RADIO BUTTONS
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female
• If two or more radio buttons have the same name, the user can only select one of
them at a time
• This is how you make a radio button “group”
• If you ask for the value of that name, you will get the value specified for the selected
radio button
• As with checkboxes, radio buttons do not contain any text

DROP-DOWN MENU OR LIST
A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

REFERENCE
• HTML AND CSS:THE COMPLETE REFERENCE 5 EDITION: BY
THOMAS A.POWELL
• http://www.w3schools.com/html/
• http://htmldog.com/guides/html/
• http://www.echoecho.com/htmlbasics.
• http://en.wikipedia.org/wiki/HTML

Introduction to HTML

More Related Content

What's hot (20)

Similar to Introduction to HTML (20)

Recently uploaded (20)

Introduction to HTML