HTML

Download Report

Transcript HTML 

HTML Lesson 2
Hyper Text Markup Language
Assignment Part I
Create your own web page
 Set the file name as “FirstName.htm”
 Set the title as “FirstName LastName First
Web Site”
 Use the following format for your page:
Name
Computer Tech
Period ___
---------------------------------------------Use several horizontal rules on the page
Write three short paragraphs about
creating a web page.
Use at least four of the Text Formatting
Tags in your paragraphs.
Include a list of tags using line breaks to
separate them.
Backgrounds
 The <body> tag has two attributes
where you can specify backgrounds.
The background can be a color or an
image.
 Bgcolor
 Background
bgcolor
 The bgcolor attribute specifies a
background-color for an HTML page.
 The value of this attribute can be a
hexadecimal number, an RGB value, or a
color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
 The lines above all set the backgroundcolor to black.
List of HTML Colors
 Colors are displayed combining RED,
GREEN, and BLUE light sources.
Color Values
 Colors are defined using a
hexadecimal notation for the
combination of Red, Green, and Blue
color values (RGB).
 The lowest value that can be given to
one light source is 0 (hex #00).
 The highest value is 255 (hex #FF).
 W3Schools HTML Tutorial
Background
 The background attribute specifies a
background-image for an HTML page.
<body background=“images/clouds.gif">
 The value of this attribute is the URL
of the image you want to use.
Background
 The background attribute specifies a
background-image for an HTML page.
<body background=
"http://www.w3schools.com/clouds.gif">
 The URL can be relative (as in the
previous page) or absolute (as in the
www.w3schools.com).
The HTML <font> Tag
 With the <font> tag you can specify
the color, size, and type of the
browser output :
<p>
<font color=“red”>
This is a paragraph.
</font>
</p
 The <font> tag is deprecated in the
latest versions of HTML (HTML 4 and
XHTML).
The Right Way to Do It –
With Styles
 This example demonstrates how to
set the color of a text.
<html>
<body>
<h1 style="color:blue">A heading</h1>
<p style="color:red">A paragraph</p>
</body>
</html>
The Right Way to Do It –
With Styles
 This example demonstrates how to
set the font size of a text.
<html>
<body>
<h1 style="font-size:150%">A
heading</h1>
<p style="font-size:80%">A
paragraph</p>
</body>
</html>
The Right Way to Do It –
With Styles
 This example demonstrates how to
set the font of a text.
<html>
<body>
<h1 style="font-family:verdana">A
heading</h1>
<p style="font-family:courier">A
paragraph</p>
</body>
</html>
The Right Way to Do It –
With Styles
 This example demonstrates how to set the
font, font size, and font color of a text.
<html>
<body>
<p style="font-family:verdana;fontsize:80%;color:green">
This is a paragraph with some text in
This is a paragraph with some text in
This is a paragraph with some text in
This is a paragraph with some text in
</p>
</body>
</html>
it.
it.
it.
it.
Assignment Part 2
 Set the background color of your
page
 Try saving an image to your image
folder and then loading into your
page
 Work with fonts and styles
 Add examples to your page