L1 - HTML Scripting Language PDF

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 .
o Empty Tags
Empty tags are tags that do not require and end tag. Examples are 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


 tag sets the characteristics such as; style; size; and color of the text to be displayed by the browser.
Attributes of the tag:
✓ COLOR
✓ FACE
✓ SIZE

 tag simply italicizes section of text in an html document.

 tag simply underlines section of text in an html document.

 tag simply used to bold section of text in an html document.

 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.

 tag use to create subscript in an html document.

 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. - opening paragraph tag
2. Element Content – paragraph words
3. - 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
 Everything that goes up, must come
down!

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

L1 - HTML Scripting Language PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

L1 - HTML Scripting Language PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Web Prog & Dev 1

Hypertext Markup Language (HTML)

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

Structure of HTML Documents

Text Appearance Tags

Attribute Options Function

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

Das könnte Ihnen auch gefallen