Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
29 views8 pages

Hypertext Markup Language (HTML) : Structure of HTML Documents

Uploaded by

Mary Joy Robles Manalaysay

The document discusses HTML (Hypertext Markup Language), which is the leading markup language used for designing web pages. It describes HTML elements, tags, attributes, and basic page structure. Key points covered include the origin of HTML, common tags for text formatting, lists, links, images, tables, and using comments. Basic page structure requires <html>, <head>, <title>, and <body> tags.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

Hypertext Markup Language (HTML) : Structure of HTML Documents

Uploaded by

Mary Joy Robles Manalaysay
29 views8 pages
The document discusses HTML (Hypertext Markup Language), which is the leading markup language used for designing web pages. It describes HTML elements, tags, attributes, and basic page structure. Key points covered include the origin of HTML, common tags for text formatting, lists, links, images, tables, and using comments. Basic page structure requires <html>, <head>, <title>, and <body> tags.

Original Description:

language

Original Title

language

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

The document discusses HTML (Hypertext Markup Language), which is the leading markup language used for designing web pages. It describes HTML elements, tags, attributes, and basic page structure. Key points covered include the origin of HTML, common tags for text formatting, lists, links, images, tables, and using comments. Basic page structure requires <html>, <head>, <title>, and <body> tags.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
29 views8 pages

Hypertext Markup Language (HTML) : Structure of HTML Documents

Uploaded by

Mary Joy Robles Manalaysay
The document discusses HTML (Hypertext Markup Language), which is the leading markup language used for designing web pages. It describes HTML elements, tags, attributes, and basic page structure. Key points covered include the origin of HTML, common tags for text formatting, lists, links, images, tables, and using comments. Basic page structure requires <html>, <head>, <title>, and <body> tags.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 8

Web Prog & Dev 1

Claudine Narciso
HTML Scripting Language

Hypertext Markup Language (HTML)


HTML is considered as leading markup language used in designing and creating web hypertext documents together with
other scripting languages such as Perl Script, CGI Script, JavaScript, and the like, its functionality can greatly be increased.

The original HTML was design by Tim Berners-Lee, who is aided by his colleagues at CERN, which is an international
scientific organization that is based in Switzerland.

HTML documents are plain text files (that are not case sensitive) which can be created using text editors.

Note: comment in HTML is <!—comments here -->

Structure of HTML Documents

• Elements
Elements are the primary components of an HTML file. These include the tables, paragraphs, lists, etc.
• Tags
A tag represents the various elements of the HTML document. It provides instructions on how the
information will be processed and displayed by the browser. It consist of an element name (or letter symbol)
enclosed in a left and right angle brackets.
Kinds of Tags
o Paired Tags
Paired tag consists of a start tag and end tag. The start tag marks the beginning of a section that is
indicated by the left angle bracket, an element name (or letter symbol) and a right angle bracket. On the
other hand, end tag marks the end of a section and looks exactly as the start tag with a forward slash
before the element name or symbol.
Majority of the HTML Tags are paired. Examples are <HTML></HTML> and <P></P>.
o Empty Tags
Empty tags are tags that do not require and end tag. Examples are <BR> and <HR>.
• Element Attributes
Attributes are additional information used to modify and enhance an element and are always place within
the start tag of an element, after the elements name or symbol.
Several attributes can be associated with an element and are separated with each other by space.
The value(s) assigned to an attribute may be enclosed either in single quotes or double quotes. Several
values separated by comma can be assigned to a specific attribute.

The structure of the HTML document follows the “first in, last out” rule, which means that the first tag used in the
document should also be the last tag to be closed in the document.

Basic Tags
The basic structure for all HTML documents should include the following minimum elements or tags.
➢ <html> - the main container of html pages
➢ <head> - the container of page for header information
➢ <title> - the title of the page
➢ <body> - the main body of the page
Web Prog & Dev 2
Claudine Narciso
HTML TAGS
Page Structure and Description Tags
<HTML></HTML>
<HTML> tag is used to indicate that the document is an HTML file. It indicates the beginning and the end of the HTML file.

<HEAD></HEAD>
The <head> tag delimits the header section of the document and contains information about the document that is not
generally displayed in the document. Several head elements such as LINK, META, TITLE, SCRIPT, BASE and STYLE can be
placed within the document head for extensible specification of the metadata.

<BODY></BODY>
<body> tag sets the overall page characteristics and delimits the beginning and end of the body section of the HTML
document. It contains the entire document to be displayed on the page.
Attributes of the <body> tag:
✓ BACKGROUND
✓ BGCOLOR
✓ BGPROPERTIES
✓ ALINK
✓ LINK
✓ VLINK
✓ TEXT

Text Appearance Tags


<FONT></FONT>
<font> tag sets the characteristics such as; style; size; and color of the text to be displayed by the browser.
Attributes of the <font> tag:
✓ COLOR
✓ FACE
✓ SIZE
<I></I>
<i> tag simply italicizes section of text in an html document.
<U></U>
<u> tag simply underlines section of text in an html document.
<B></B>
<b> tag simply used to bold section of text in an html document.
<EM></EM>
<EM> tag simply emphasizes section of text in an html document.
<H1></H1> …. <H6></H6>
Section headings represented by tag names H1, H2 … H6 are used to create heading in an HTML document.
<SUB></SUB>
<SUB> tag use to create subscript in an html document.
<SUB></SUB>
<SUB> tag use to create superscript in an html document.
Web Prog & Dev 3
Claudine Narciso
Elements
The element consists of three basic parts: an opening tag, the element’s content, and finally, a closing tag.
1. <p> - opening paragraph tag
2. Element Content – paragraph words
3. </p> - closing tag
Tags

Attributes
1. Class or id
2. Name
3. Title
4. Style
5. Generic

Attribute Options Function


align Right, left, center Horizontally aligns tags
valign Top, middle, bottom Vertically aligns tags within the an html documents
bgcolor Numeric, hexadecimal, RGB, Places a background color behind an element
values
background URL Places a background image behind an element
id User defined Names an element for use with cascading style sheet
class User defines Classifies an element for use with cascading style sheets.
width Numeric value Specifies the width of tables, images, or table cells
height Numeric value Specifies the height of tables, images, or table cells
title User defined “pop-up” title for your element

Paragraphs

Headings

Line Breaks
Web Prog & Dev 4
Claudine Narciso

Horizontal Rule

Lists
<ul> - unordered lists; bullets
<ol> - ordered lists; numbers
<dl> - definition lists; dictionary

Formatting

Color Codes
Red, green and blue values
bgcolor=”rgb(255,255,255)” White
bgcolor=”rgb(255,0,0)” Red
bgcolor=”rgb(0,255,0)” Green
bgcolor=”rgb(0,0,255)” Blue

bgcolor=”#cc7005”

Font
Attribute = “value” Description
size= “Num. Value 1-7” Size of your text, 7 is biggest
color= “rgb, name, or hexidecimal” Change font color
face= “name of font” Change the font type
Web Prog & Dev 5
Claudine Narciso

Text Links
Internal – links to anchor on the current page
Local – links to other pages within your domain
Global – link to other domains outside of your site

target =”_blank” opens new page in new browser window


_self” loads a new page in current window
_parent” loads new page into a frame that is superior to where the link lies
_top” load new page into the current browser window cancelling all frames

Entities
<p> Everything that goes up, must come
&nbsp; &nbsp; &nbsp; &nbsp;down!
</p>

Email

Images
Local src Location description
src=”sunset.gif” Picture file resides in same directory as .html file
src=”../sunset.gif” Picture file resides in previous directory as .html file
src=”../pics/sunset.gif” Picture file resides in the pic directory in previous directory as .html file as .html file

Image Links
Web Prog & Dev 6
Claudine Narciso
Tables

Bgcolor
Web Prog & Dev 7
Claudine Narciso

Background

Comments
<!—Note to self: This is My First Program -->

Script

Music Codes
The attribute controls set which controls for the media player will be displayed.
Autostart – choose if the media file start automatically
Loop – sets the media file to repeat or not
Volume – set the volume of the media file. The range is 0-100

Video Codes
Flash movies (.swf), AVI’s (.avi), and MOV’s (.mov) file types are supported by the embed tag.
.swf files – are the file types created by Macromedia’s Flash program
.wmv file – are Microsoft Window’s Media Video file types
. mov files – are Apple’s Quick Time Movie format
.mpeg files – set the standard for compression movie files created by the Moving Pictures Experts Group

Div
The div tag is nothing more than a container for other tags. Much like the body tag, Div elements are block
elements and work behind the scenes grouping other tags together.
Web Prog & Dev 8
Claudine Narciso
FORMS
Text Fields

Passwords

Radio

Checkboxes

Text areas

Upload

Select

Submit

Reset

Hidden Fields

You might also like