Scribd
Upload
15 views

HTML Tutorial

Uploaded by

John David
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
15 views

HTML Tutorial

Uploaded by

John David
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 56

Introduction to

HTML

1
Definitions
 W W W – World Wide Web.
(open source information space where documents and other web
resources are identified by URLs)

 HTML – HyperText Markup Language – The Language of Web


Pages on the World Wide Web.
( A markup language is a set of markup tags. HTML documents are
described by HTML tags.)

HTML is a text formatting language

 URL – Uniform Resource Locator.

 Browser – A software program which is used to show web pages.

2
HTML

“Normal text” surrounded by bracketed


tags that tell browsers how to display web
pages.

Pages end with “.htm” or “.html”

3
Choosing Text Editor
 There are many different programs that you can
use to create web documents.

 These programs will generate the HTML Source


Code for you.

 Standard Microsoft Windows text editors,


 NotePad.
 Textpad

4
Tags

 Codes enclosed in brackets.


 Usually paired
<TITLE>My Web Page</TITLE>
 Not case sensitive
<TITLE> = <title> = <Title>

5
HTML Structure
• Each web page has a HEAD and a BODY.
• All web pages have required tags like
these:
<HTML> {begin the page}
<HEAD> {some set up instructions
</HEAD> are here}
<BODY> {the main part of the page
</BODY> is here}
</HTML> {end the page}
Creating a Basic Starting
Document
 The HEAD of your document point to above window
part.

 The TITLE of your document appears in the very top line


of the user’s browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the TITLE that is
added to the list.

 The text in your TITLE should be as descriptive as


possible because this is what many search engines, on
the internet, use for indexing your site.
7
Setting Document Properties
 Document properties are controlled by attributes
of the BODY element.

 For example, there are color settings for the


background color of the page, the document’s
text and different states of links.

8
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
9
15. ORANGE 15. #FF7F00
Background Color

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>

<BODY BGCOLOR=“WHITE”></BODY>
10
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.

<BODY BGCOLOR=“yellow” TEXT=“red”></BODY>

11
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=“WHITE”></BODY>

12
Previewing Your Work
 Once you have created your basic starting document
and set your document properties it is a good idea to
save your file.

 To save a file, in NotePad, follow these steps:

1. Locate and click on the menu called “File”.

2. Select the option under File Menu labeled “Save As”.

3. In the “File Name” text box, type in the entire name of


your file (including the extension name .html).

13
Edit, Save and View Cycle
 To preview Your Work, open a web browser and do
the following:
1. Click on the menu labeled “File”.
2. Locate the menu option, “Open”.

14
Edit, Save and View Cycle
3. In the “Open” dialog box, click on the
“Browse” button and locate your web
document.
4. Click “OK” once you have selected your file.

 The web browser will load the same


document but with the new revisions. This
process is the Edit, Save and View Cycle.

15
Headings, <Hx> </Hx>
Inside the BODY element, heading elements H1
through H6 are generally used for major divisions
of the document.

H1: is be used as the highest level of heading, H2 as the


next highest, and so forth.

16
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>

17
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.

18
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE> Heading 1
</HEAD> Paragraph 1,….
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2>
Heading 2
Paragraph 2,….
<P> Paragraph 2, ….</P>
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P>
Heading 3
Paragraph 3,….
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P> Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P>
<H6> Heading 6</H6>
Heading 5
<P> Paragraph 6, ….</P> Paragraph 5,….
</BODY></HTML> Heading 6
Paragraph 6,….

19
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.

20
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>…. Line 2
</P> Line 3
</BODY> ….
</HTML>

21
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>.

22
Horizontal Rule, <HR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 2
<HR>Line 3 <BR> ______________________
</P> _____
</BODY>
Line 3
</HTML>

23
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>

 The COLOR attribute of the FONT element.


 E.g., <FONT COLOR=“red”>this text has color</FONT>
24
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.

25
Lists

1. Create an unordered list.

2. Create an ordered list.

3. Nested Lists.

26
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>
<LI> List item …</LI>
</UL>
• List item …
• List item …
27
List Elements
 You have the choice of three bullet types: disc(default),
circle, square.

<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>

 List item …
 List item …
 List item …
28
List Elements
 OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
1. List item …
2. List item …
3. List item
 You have the choice of setting the TYPE Attribute to
one of five numbering styles.
29
List Elements
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

30
List Elements
 You can specify a starting number for an ordered list.
<OL TYPE =“i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>

<P> text ….</P>

<OL TYPE=“i” START=“3”>


<LI> List item …</LI>
</OL>

31
List Elements
i. List item …
ii. List item …

Text ….

iii. List item …

32
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”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI>
</UL>
33
What will be the output?
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
34
The output….

35
<H1 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support What
<OL type="I" start="4">
<LI> Be careful </LI>
will
<LI> Do not look around</LI> be the
</LI> </OL> output?
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL> 36
The output….

37
Images
 <IMG>This element defines a graphic image on the
page.

 Image File (SRC:source): This value will be a URL


(location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.

 Alternate Text (ALT): This is a text field that describes


an image or acts as a label. It is displayed when they
position the cursor over a graphic image.

 Alignment (ALIGN): This allows you to align the image


on your page.

38
Images
 Width (WIDTH): is the width of the image in pixels.

 Height (HEIGHT): is the height of the image in


pixels.

 Border (BORDER): is for a border around the


image, specified in pixels.

39
Some Examples on images
1) <IMG SRC=“jordan.gif“ border=4>
2) <IMG SRC=" jordan.gif" width="60"
height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a
text that goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast
40
HOW TO MAKE A LINK
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends.
Everything between these two will work as a link.

2) The example below shows how to make the word


Here work as a link to yahoo.

Click <A HREF="http://www.yahoo.com">here</A> to


go to yahoo.

41
E-Mail (Electronic Mail)
E.g. mailto:[email protected]

 The type of service is identified as the mail client


program. This type of link will launch the users mail
client.

 The recipient of the message is [email protected]


<A HREF=“mailto:[email protected]”>Send me
More Information </A>

42
Tables
 The <TABLE></TABLE> element has four sub-
elements:

1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.

 The table row elements usually contain table


header elements or table data elements.

43
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
44
Tables

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2

45
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. 46
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.

47
Table Header

 Table Data cells are represented by the


TD element. Cells can also be TH (Table
Header) elements which results in the
contents of the table header cells
appearing centered and in bold text.

48
Table Data and Table Header
Attributes
 Colspan: Specifies how many cell columns of the table
this cell should span.
 Rowspan: Specifies how many cell rows of the table this
cell should span.
 Align: cell data can have left, right, or center alignment.
 Valign: cell data can have top, middle, or bottom
alignment.
 Width: you can specify the width as an absolute number
of pixels or a percentage of the document width.
 Height: You can specify the height as an absolute
number of pixels or a percentage of the document height.
49
Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List
Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>

50
Table Data and Table Header Attributes

<Table border=1 cellpadding =2>


<tr> <th> Column 1 Header</th> <th>
Column 2 Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>

51
Table Data and Table Header
Attributes

Column 1 Header Column 2 Header

Row 1 Col 1

Row 2 Col 2
Row 2 Col 1
Row 3 Col 2

52
Special Things to Note
• TH, TD and TR should always have end tags.

• A default TABLE has no borders


By default, tables are drawn without border lines. You need the
BORDER attribute to draw the lines.

• By default, a table is flush with the left margin

53
What will be the output?

<TABLE BORDER width=“750”>


<TR> <TD colspan=“4” align=“center”>Page
Banner</TD></TR>

<TR> <TD rowspan=“2” width=“25%”>Nav


Links</TD><TD colspan=“2”>Feature
Article</TD> <TD rowspan=“2”
width=“25%”>Linked Ads</TD></TR>

<TR><TD width=“25%”>News Column 1 </TD>


<TD width=“25%”><News Column 2 </TD></TR>
</TABLE> 54
The Output

55
• END

56

You might also like