Vous êtes sur la page 1sur 32

Introduction to

HTML 5
Lab 1
Headings, Paragraphs, Breaks & Horizontal
Rules

In this section you will add headings to your page, insert


paragraphs, add some breaks, and add horizontal
rules.
Objectives
Upon completing this section, you should be able to
1. List and describe the different Heading elements.
2. Use Paragraphs to add text to a document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.
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>
<!DOCTYPE html>
<HTML> Heading 1
<HEAD>
Paragraph 1,.
<TITLE> Example Page</TITLE>
</HEAD>
<BODY><H1> Heading 1 </H1>
Heading 2
<P> Paragraph 1, .</P> Paragraph 2,.
<H2> Heading 2 </H2>
<P> Paragraph 2, .</P> Heading 3
<H3> Heading 3 </H3> Paragraph 3,.
<P> Paragraph 3, .</P>
<H4> Heading 4 </H4> Heading 4
<P> Paragraph 4, .</P> Paragraph 4,.
<H5> Heading 5 </H5>
Heading 5
<P> Paragraph 5, .</P>
Paragraph 5,.
<H6> Heading 6</H6>
<P> Paragraph 6, .</P> Heading 6
</BODY></HTML> 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>
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
Heading 1
</HEAD> Paragraph 1,
<BODY> Line 2
<H1> Heading 1 </H1> Line 3
<P>Paragraph 1, <BR>
.
Line 2 <BR> Line 3 <BR>.
</P>
</BODY>
</HTML>
HTML Formatting
<!DOCTYPE html>
<html>
<body>
<p><strong>This text is This text is strong
strong</strong></p> This text is bold
<p><b>This text is bold</b></p>
This text is emphasized
<p><em>This text is
emphasized</em></p> This text is emphasized
<p><i>This text is This text is big
This text is small

emphasized</i></p>
<p><big>This text is big</big></p>
<p><small>This text is
small</small></p>
</body>
</html>
HTML Formatting
<!DOCTYPE html>
<html>
<body>
<p>This text is<ins>
underlined</ins></p>
<p>This text is<u>
underlined</u></p>
<p>This text is<del>
deleted</del></p>
<p>This text is<strike>
deleted</strike></p>
</body>
</html>
Lab 2
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.
<A HREF="http://www.yahoo.com">here</A> to
go to yahoo.
3) The example below shows how to make the word
here work as a link to another webpage of the same site.
<A HREF=Contactus.html">here</A> to
go to contact us page.
HTML Formatting
<!DOCTYPE html>
<html>
<head><title> hello </title>
Welcome to
</head>
<body>
our store
<h1>Welcome to our store </h1>
<br> Not supported
in HTML5
<font size="7"> Not supported in
HTML5</font>
<BR>
<font size="6" face="Tahoma"
Not supported in
color="red">Not supported in HTML5
HTML5 </font>
</body>
</html>
HTML Formatting
<!DOCTYPE html>
<html>
<body>
<p style=color:green>this is the
first html page </p>
<p style=font-size:11px>This is
another paragraph. </p>
<p style=font-family:Arial> This is
another paragraph. </p>
<p style=font-family:verdana;font-
size:30px;color:red>This is a
paragraph.</p>
</body>
</html>
Lab 3 and 4
Images
In this section you will learn about
images and how to place images in your
pages.

Objectives
Upon completing this section, you should
be able to Add images to your pages.
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.
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.
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" align="left">
Hyperlink and Image
<!DOCTYPE html>
<html>
<body> This is a heading
<h2 style=color:red;font- Home
family:verdana;font-
size:160%>This is a heading
Go to Picture
Home</h2>
<P>
<a href="about.html"> Go to
Picture </a>
</body>
</html>
Hyperlink and Image
<!DOCTYPE html> Mountain
<html>
<body>
<h3>Mountain</h3>
<img
src="image/mountain.jpg"
alt="Mountain View"
style="width:600px;height:60
0px">
</body>
</html>
Lab 5
Tables

In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a tables attributes.
3. Edit a table.
Tables
The <TABLE></TABLE> element has four sub-
elements:
1.Table Row<TR></TR>.
2.Table Data <TD></TD>.

The table row elements usually contain table


header elements or table data elements.
Tables
<!DOCTYPE html>
<html>
<body>
<table border=1>
Row1, Col1 Row1, Col2
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td> Row2, Col1 Row2, Col2
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
</body>
</html>
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.
Height: You can specify the height as an absolute
number of pixels or a percentage of the document
height.
Border: You can choose a numerical value for the
border width, which specifies the border in pixels.
Align: tables can have left, right, or center alignment.
Tables
<!DOCTYPE html> <tr>
<html> <td>Eve</td>
<body>
<td>Jackson</td>
<table border="1"
style=width:50%;background- <td>94</td>
color:yellow;color:red> </tr>
<tr> </table>
<th>First Name</th>
</body>
<th>Last Name</th>
<th>Age</th>
</html>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
Tables
Lab 6
Unordered HTML List

A style attribute can be added to an unordered list, to define the


style of the marker:

Style Description
The list items will be marked with
list-style-type:disc
bullets (default)
The list items will be marked with
list-style-type:circle
circles
The list items will be marked with
list-style-type:square
squares
list-style-type:none The list items will not be marked
Ordered HTML List
A type attribute can be added to an ordered list, to define the type of the
marker:

Type Description
The list items will be numbered with
type="1"
numbers (default)
The list items will be numbered with
type="A"
uppercase letters
The list items will be numbered with
type="a"
lowercase letters
The list items will be numbered with
type="I"
uppercase roman numbers
The list items will be numbered with
type="i"
lowercase roman numbers
Unordered and Ordered List
<!DOCTYPE html> <ol>
<html> <li>Coffee</li>
<body> <li>Tea</li>
<ul> <li>Milk</li>
<li>Coffee</li> </ol>
<li>Tea</li> <ol type="i">
<li>Milk</li> <li>Coffee</li>
</ul> <li>Tea</li>
<ul style="list-style-type:circle"> <li>Milk</li>
<li>Coffee</li> </ol>
<li>Tea</li> </body>
<li>Milk</li> </html>
</ul>
Unordered and Ordered List

Coffee
Tea
Milk

oCoffee
oTea
oMilk

1.Coffee
2.Tea
3.Milk

i.Coffee
ii.Tea
iii.Milk