Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
42 views

HTML

This document provides a lesson plan for developing web pages from HTML. It contains 3 parts that cover inserting lines, pictures, and backgrounds. Part 1 discusses using <hr> tags to make lines and the width attribute. Part 2 explains how to insert pictures using <img> tags and the src attribute, and covers formatting pictures with height, width, and spacing tags. Part 3 demonstrates changing the background color with <body> bgcolor and adding wallpaper with the background attribute. Later sections provide examples for inserting alignment, graphics, and attributes. The document emphasizes practicing HTML skills.

Uploaded by

Muhd Firdaus
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

HTML

This document provides a lesson plan for developing web pages from HTML. It contains 3 parts that cover inserting lines, pictures, and backgrounds. Part 1 discusses using <hr> tags to make lines and the width attribute. Part 2 explains how to insert pictures using <img> tags and the src attribute, and covers formatting pictures with height, width, and spacing tags. Part 3 demonstrates changing the background color with <body> bgcolor and adding wallpaper with the background attribute. Later sections provide examples for inserting alignment, graphics, and attributes. The document emphasizes practicing HTML skills.

Uploaded by

Muhd Firdaus
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

1

PART 2

DEVELOPING WEB PAGE


FROM HTML TO WEB PAGE
2

LESSON PLAN

Making Lines

Insert Picture

Insert background
FROM HTML TO WEB PAGE
3

LESSON PLAN

Insert Alignment

Insert Alignment with Graphic

Insert Alignment graphics with


attributes
Making Line

A line across The Page


 It means “horizontal reference”
 Using the width attribute in the <hr> tag

Increase or decrease the percentage to get the


length you want

Example:
<hr width=“50%”>
Making Line
Making Line
Insert Picture

IMG means “image”


SRC means “source”

SRC is an attribute of IMG, it tells the browser


where to find the graphic.

The stuff in the quotation marks is the file name of your


graphic.
<img src=“smile.jpg” height=“250” width=“250”>

<img src="nature.gif" style="width:300px; Height:200px;">


Insert Picture

Putting your files in the same place

 Put your graphics in the same folder as the html


file, for instance if you keep your HTML document
in a folder called “my pages”, keep your pictures in
that folder too otherwise they won’t show up on
your web page because the browser will not be
able to find them.

 The same things goes with other pages that are


linked together, keep them in the same place.
Insert Picture

Name of the file image


Name of the
file image
Insert Picture: Webpage
Insert Picture

How to insert graphic further apart from each other.

 Use &nbsp; between tags.


 nbsp; non breaking space.
 It equivalent to one character or letter.
 The more you use, the wider the space will be
 Can be use to indent your sentences or for a large
space between words or letters.
Insert Picture

How to put a graphic on a new line?

 Use either the <br> or <p> tags.

single spacing double spacing


Insert Picture: HTML Code

Equivalent to 1 character or space


Insert Picture: Web Page

Equivalent to 1 character or space


Insert Picture: HTML Code

Equivalent to enter double spacing


Insert Picture: HTML Code

Equivalent to enter double spacing


Insert Picture: HTML Code

Equivalent to enter single spacing


Insert Picture: HTML Web Page

Equivalent to enter single spacing


Insert Background

Background is an attribute which goes in the


beginning <body> tag

If all you want is to change the color of the web


page use the bgcolor attribute in the body tag:

<body bgcolor=“#00ffff”>

To add a textured background on your web page


you will need background wallpaper which is
actually a graphic repeated over and over until
the screen is filled.

<body background=“graphicname.jpg”>
Insert Body Color

<html>

<head>
<title>Insert body color</title>
</head>

<body>
<body bgcolor=“#ff0000">
</body>

</html>
Insert Body Color
Insert Background

<html>

<head>
<title>Insert body background</title>
</head>

<body>
<body background="flower.jpg">
</body>

</html>
Insert Background
Insert Color Background: HTML Code
Insert Color Background: Web Page
Insert Image Background: HTML Code
Insert Image Background: Web Page
Insert Alignment

Alignment Text

To align your text to center, use the following tag:


<center>

Attributes Alignment

<p align=“right”>your text</p>


<p align=“left”> your text</p>
<h3 align=“right”> your text </h3>

<right>
<left>
Insert Alignment: HTML Code

<html>
<head><title>Insert Alignment</title></head>
<body>
<h3 align="right">HTML</h3>
<p align="right">practice, practice, practice</p>
</body>
</html>
Alignment: Web Page
Insert Alignment: HTML Code

<html>
<head><title>Insert Alignment</title></head>
<body>
<h3 align=“left">HTML</h3>
<p align=“left">practice, practice, practice</p>
</body>
</html>
Alignment: Web Page
Alignment: HTML Code
Alignment: Web Page
Insert Alignment With Graphic: HTML Code
Insert Alignment With Graphic: Web Page
Insert Alignment With Graphic: HTML Code
Insert Alignment With Graphic: Web Page
Insert Alignment Graphic With Attribute: HTML Code
Insert Alignment, Graphic with Attribute: Web Page
41

THANK YOU
PRACTICE…PRACTICE..PRACTICE..
I KNOW YOU CAN DO IT

You might also like