Scribd
Upload
87 views

Webdev Lesson3

HTML documents have a header and body. The header contains meta information and the body displays the web page content using HTML tags. A basic HTML document structure includes opening and closing <html>, <head>, <title>, and <body> tags. Comments can be added using <!— --> and common text styles are set with tags like <b> for bold, <i> for italics, and <u> for underline. The <body> tag supports attributes to set styles and properties for the entire page.

Uploaded by

Jenny Sison-Wilson
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
87 views

Webdev Lesson3

HTML documents have a header and body. The header contains meta information and the body displays the web page content using HTML tags. A basic HTML document structure includes opening and closing <html>, <head>, <title>, and <body> tags. Comments can be added using <!— --> and common text styles are set with tags like <b> for bold, <i> for italics, and <u> for underline. The <body> tag supports attributes to set styles and properties for the entire page.

Uploaded by

Jenny Sison-Wilson
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 32

HTML Documents

Two parts of HTML file


♦ Header
The header contains information about
this HTML file, that will not be
displayed on the web page.
♦ Body
The body contains all the text and other
content to be displayed as the web
page. This content is enclosed by HTML
tags.
Basic Structure
♦ The head tags are: <head>, <title>,
</title>, <head>
♦ The body part is the body of your work.
♦ The body is made up of any graphics/
photos/ artwork you want to include and all
hypertext links to other sites or documents.
The body also includes the text and
attributes such as bold and italic, and
headers, or headlines.
Comments In HTML file
♦ Use the comment tag <!-- and --> to
enclose text that you do not want
displayed on the page.
♦ i.e.
<!-- Your comment goes between these tags
and will not be displayed -->
Basic Structure Example
♦ <html>
♦ <head>
♦ <title>Title of page</title>
♦ </head>
♦ <body>
♦ This is my first homepage.
♦ </body>
♦ </html>
HTML/ HEAD/ TITLE
♦ HTM
– This element tells your browser that the file
contains HTML-coded information. The file
extension .htm also indicates this an HTML
document and must be used.
♦ HEAD
– The head element identifies the first part of
your HTML-coded document that contains the
title. The title is shown as part of your
browser’s window.
HTML/ HEAD/ TITLE (cont)
♦ TITLE
– The title element contains your document title
and identifies its content in a global context.
The title is typically displayed in the title bar at
the top of the browser window, but not inside
the window itself. The title is also what is
displayed on someone’s hotlist or bookmark
list, so something descriptive, unique, and
relatively short are suggested. A title is also
used to identify your page for search engines.
Text Tags
♦ Bold
♦ <B></B> This is the tag for bold text.
♦ Example:
<B>Howdy</B>
♦ This will show up on your page like this:
Howdy
Text Tags (cont)
♦ Italics
♦ <U></U> Underline text
♦ Example:
<U>Underline Me!</U>
♦ This will show up on your page like this:
Underline Me!
Text Tags (cont)
♦ Italics
♦ <I></I> Italics
♦ Example:
<I>Isn't this fun?</I>
♦ This will show up on your page like this:
Isn't this fun?
Text Tags (cont)
♦ Strike
♦ <STRIKE></STRIKE>
♦ Example:
<STRIKE>You're Out!</STRIKE>
Heading/ Headlines
♦ HTML has six levels of headings,
numbered 1 through 6, with 1 being the
largest.
♦ Headings are typically displayed in larger
and/or bolder fonts than normal body text.
♦ The first heading in each document should
be tagged <H1>
Heading/ Headlines (cont)
♦ The syntax of the heading element is:
<Hy> Text of heading </Hy>
where y is a number between 1 and 6
specifying the level of the heading.
Note: Do not skip levels of headings in your
document. For example, don’t start with a
level-one heading (<H1>) and the next use
a level-three (<H3>) heading.
Horizontal Rules
♦ The <> tag produces a horizontal line the
width of the browser window. A horizontal
rule is useful to separate major sections of
your document.
♦ The horizontal ruled line does not have a
closing tag.
♦ You may also add certain attributes to the
<hr> tag
Horizontal Rules (cont)
♦ Attribute for horizontal Rules
– Width= n (for fixed pixel width) or WIDTH=n% for a
certain percentage of the screen wide.
♦ Example:
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
Horizontal Rules (cont)
– Size attribute
– Size=n to make the line a certain pixel amount,
example of controlling thickness:
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
Horizontal Rules (cont)
– NOSHADE attribute, to turn the lines shading
off use. Example of adding solid lines:
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE >
<HR WIDTH=60% SIZE=8 NOSHADE >
<HR WIDTH=60% SIZE=15 NOSHADE >
Horizontal Rules (cont)
– Align attribute, ALIGN=x (x as LEFT,
RIGHT, or CENTER) to align the line. This is
an example of controlling alignment:
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
Paragraphs (p tag)
♦ Indicates the start of a paragraph block.
♦ This means that the current line of output is
terminated and a blank new line is output
before text display continues.
♦ If a <p> tag is encountered within a
paragraph block this forces the start of a
new paragraph. The same effect can be
forced using the rarely seen </p>.
Paragraphs (p tag) (cont)
♦ Align attribute, ALIGN=x (x as LEFT,
RIGHT, or CENTER) to align the line.
♦ The </p> closing tag may be omitted. This
is because browsers understand that when
they encounter a <p> tag, it means that the
previous paragraph has ended.
♦ However, since HTML now allows certain
attributes to be assigned to the <p> tag, it’s
generally a good idea to include it.
Paragraphs (p tag) (cont)
<p align= center>
This is a centered paragraph.
</p>

This is a centered paragraph.

Left alignment is the default alignment if


align attribute is not included.
Line Breaks
♦ The <br> tag forces a line break with no
extra (white) space between lines.
♦ For example, without <br>
This is sentence 1.
This is sentence 2.
This is sentence 3.
♦ The output is:
This is sentence 1. This is sentence 2. This is sentence 3.
Line Breaks (cont)
♦ This is with <br>
This is sentence 1. <br>
This is sentence 2. <br>
This is sentence 3. <br>
♦ This is the output
This is sentence 1.
This is sentence 2.
This is sentence 3.
Center tag
♦ <center> </center>
♦ Whatever you put between will centered on
the current line.
♦ <center> Center Works!!! </center>
♦ This is the output:

Center Works!!!
Body attribute
♦ bgcolor="color"
♦ This changes the background color of your
page. You can set this to any color you
would like to use. Just replace color above
with a color name or hex code.
♦ <BODY bgcolor="green">
Or you could use the hex code for green:
♦ <BODY bgcolor="#008000">
Table of color
Color Name HEX Code
black #000000
white #FFFFFF
red #FF0000
blue #0000FF
green #008000
yellow #FFFF00
orange #FFA500
violet #EE82EE
purple #800080
Table of color (cont)
Color Name HEX Code
pink #FFC0CB
silver #C0C0C0
gold #FFD700
gray #808080
aqua #00FFFF
skyblue #87CEEB
lightblue #ADD8E6
fuchsia #FF00FF
khaki #F0E68C
Body attribute (cont)
♦ text="color"
This changes the default text color the browser
will display on your page. You can set this to any
color you would like to use. Just replace color
above with a color name or hex code.
♦ Using a color name:
<BODY text="red">
♦ Or using a hex code:
<BODY text="#FF0000">
Body attribute (cont)
♦ link="color"
This changes the color of all of the non-
visited links on your page. You can set this
to any color you would like to use. Just
replace color above with a color name or
hex code.
♦ <BODY link="red">
Or using the hex code:
♦ <BODY link="#FF0000">
Body attribute (cont)
♦ alink="color"
This changes the color of an active link on your
page, which is a link that has just been clicked on
by a user's mouse. You can set this to any color
you would like to use. Just replace color above
with a color name or hex code.
♦ vlink="color"
This changes the color of a visited link on your
page. You can set this to any color you would like
to use. Just replace color above with a color name
or hex code.
♦ <BODY link="blue" alink="blue" vlink="violet">
Body attribute (cont)
♦ background="image.gif"
This adds a background image to your page. If you
use this attribute, the background image will take
the place of any background color you may have
specified. If you don't use a background image, the
browser will use your background color or its
default background color.
♦ <BODY background="image2.gif">
♦ <BODY background="next.jpg">
Body attribute (cont)
Body tag with all attribute:

<BODY bgcolor="black" text="red"


link="yellow" alink="orange"
vlink="white" background="image.gif">

You might also like