Html 101

Multimedia Lab Web Design Course Prepared by: Mr.Aldrin C. Go

Contents
What is HTML?
What are HTML tags?
Basics of HTML Language
Text formatting
Paragraphs
Embedding media objects
Exercise

What Is HTML?
HTML:
Stands for H yper T ext M arkup L anguage
Interpreted language (no compiler)
Defines a Web document’s design and layout
Uses a variety of tags and attributes
Consists of straight text (not case sensitive)
Use text editors to create HTML documents
for example (notepad)

What Are HTML Tags?
HTML tags are essentially commands that instruct Web browsers how to display a document.
HTML tags are enclosed in brackets and look like this:
<HTML Tag>

HTML Tags
HTML tags typically appear in pairs, or sets.
Each set includes a beginning and closing tag.
The closing tag is preceded by a forward slash.
For example, to set the word “TechRepublic” as bold, the HTML code would look like this:
TechRepublic

Basics of HTML language
<html> (tells a browser that this is an HTML document.)
<head> (contain information about the document ,does not appear to user)
<title> New Page 1 </title>
</head>
<body> (contains all the contents of the document)
This is my first web page
</body>
</html>

<HTML>
<HEAD>
<TITLE>Page with background image
</TITLE>
</HEAD>
<BODY BACKGROUND="pics/Blue hills.jpg">
Page with background image.
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Page with background image
</TITLE>
</HEAD>
<BODY BGCOLOR=“#CCFFFF">
Page with Back Color
</BODY>
</HTML>

Editing in HTML pages (Text formatting)
<HTML>
< BODY BGCOLOR ="#FFFF0F" TEXT ="#F000F0" LINK ="#0000FF “ VLINK ="#00FF00 “ ALINK ="#FF0000">
Some Text


How is this


</ BODY >
</HTML>

<HTML>
<BODY BGCOLOR="#AF3F0F" TEXT="#FFFFF0" LINK="#0000FF"
VLINK="#00FF00" ALINK="#FF0000">
< H1 > This is largest header</ H1 > 
< H6 > This is smallest Header</ H6 > 
< S > This is Strike by S tag </S > 
< STRIKE > This is Strike</ STRIKE > 
< BIG > Big text </ BIG > 
 Small text 
 Text strong and emphasized 
Normal Sub text 
Normal Super text 
< KBD > KBD text</ KBD > Also SAMP, TT, and CODE tags have the same effect 

New Text
</BODY>
</HTML>

Editing in HTML pages (Paragraphs)
<HTML>
<BODY BGCOLOR="gray" TEXT="white" LINK="#0000FF"
VLINK="#00FF00" ALINK="#FF0000">
You can align text in left.
< PRE > Pre formatted paragraph
you can see the new line .. (preformatted paragraph has fixed font and preserve line after it (line appear without br tag) ) </ PRE >
< BLOCKQUOTE >
In cases that you want to emphasis on a paragraph in your
text you can use this tag. It will indent your text from both
sides.
</ BLOCKQUOTE >
< DIV align = "right">Right Aligned DIV</ DIV > (tag defines a division/section in a document)
Horizontal Bars : 
width in percent
< HR WIDTH ="50%" color ="#FF0000" align ="left“ ></HR>
width in pixels
< HR WIDTH ="100" color ="#00FFFF" align ="center“ > < /HR>
</BODY>
</HTML>

Editing in HTML pages (Paragraphs)

Editing in HTML pages (Embedding Media Objects)
Images:
< IMG src = "pics/CAR1.JPG" alt ="car1" border =2 width =100 height =100 hspace =50 vspace =10 align =left>
This is an example of
how image can be embedded
 
Delete left align
Note :
1: align={top,bottom, right, left, middle}
2: To delete align:

Marques :
< MARQUEE direction ="left" bgcolor ="fuchsia" width ="500"
loop ="infinite" vspace =20 hspace =20 scrolldelay =10
scrollamount = 3 behavior = “scroll” >
This is Marquee example
</ MARQUEE >
Notes:
behavior= {scroll, alternate, slide}
Scrollamount means : how many pixels to jump
Scrolldelay means : how many milliseconds to wait after each jump

Videos:
< IMG dynsrc = "video file" border = {0,n} start = {"mouseover", "fileopen"} loop = {infinite, m} loopdelay = "time">
< embed src ="file . wav,avi" width = … hight = … loop = {true , false}>
Example :
< IMG dynsrc = "video/match.avi" border = 2 start ="fileopen"
loop =2 loopdelay = "2">
< embed src ="sounds/blow1.wav" width =200 hight =200
loop = false>
Note : You can open any media type file.

Sounds:
Background sound :
< head >
< bgsound src =" … " loop = {#,-1}>
</ head >

Put all together (exercise )

Html 101

by aldrin_go2002

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Html 101 Presentation Transcript