02 HTML

HTML Hyper Text Markup Language Session 2
Trinh Thi Van Anh PTIT 8-2012
Objectives
Introduction Basic
and Hyperlinks
Tags Working with Text, Lists and Tables Working with Forms
Web Page Programming with HTML/Session 2/ 2
The World Wide Web
The Internet is the worlds largest computer network The Internet is referred to as a network of networks One of the subsets of Internet is the World Wide Web WWW contains a number of web servers scattered across the world
Introduction to HTML
HTML is a MARKUP language Using HTML tags and elements, we can: Control the appearance of the page and the content Publish online documents and retrieve online information using the links inserted in the HTML document Create on-line forms. These forms can be used to collect information about the user, conduct transactions, and so on
HTML syntax:
<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> <HEAD> <BODY> <H3>My first HTML document</H3> </BODY> </HTML>
Browsers and Editors
Browsers Netscape's Navigator Microsoft's Internet Explorer Mozilla Firefox and so on Editors Notepad Microsoft FrontPage Dreamweaver and so on
Web Page Programming with HTML/Session 2 6/
HTML Tags
HTML tag is used to mark the beginning and end of an HTML document
<HTML> . . . </HTML>
The HTML tag is comprised of:

<ELEMENT ATTRIBUTE = value> Element - identifies the tag Attribute - describes the tag Value - the content that is assigned to the attribute
Structure of an HTML document
The HTML Section The Header Section The BODY Section

<HTML> <HEAD> <TITLE>Welcome to the world of HTML</TITLE> </HEAD> <BODY> <P>This is going to be real fun</P> </BODY> </HTML>
Comments
<html> <body> <head> <title>Adding comment</title> </head> <body>  Use of comments </body> </html>
Paragraphs
<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>This is going to be real fun</p> <P> Another paragraph element </BODY> </HTML>
Breaks
<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>This is going to be real fun <BR> <P> Another paragraph element </BODY> </HTML>
Choosing Alignment of text

Value
Left
Description
The text is displayed on the left
Center The text is centered within both the margins Right The text is displayed on the right Justify The text is justified along both the margins
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY BGCOLOR=lavender> <P align = right>This is good fun</P> </BODY> </HTML>
Using special characters
Greater than (>) > Less than (<) < Quotes ( ) " Ampersand (&) &
Hyperlinks
Introduction to Hyperlinks
Types of Links Internal Links : These are links to sections within the same document or within the same web site External Links : These are links to pages on other web sites or servers
Internal and External links

----------------
------
------
------
------
------
------
------
Creating Hyperlinks
To create a hyperlink, we have to specify two components:

The full address or URL of the file to be linked The hotspot that will provide the link. The hotspot may be a line of text or even an image Absolute URL Relative URL
URL Types

HREF
The syntax of HREF is :

<A HREF = protocol://host.domain:port/path/filename> Hypertext </A> Protocol is the protocol type Host.domain is the Internet address of the server Port is the port number of the destination server Hypertext is the text or images that the user must click to activate the link
http://aptech.ac.vn:8800/
<HTML> <HEAD> <TITLE> Using links</TITLE> </HEAD> <BODY> <BR><BR> <P> This page is all about creating links to documents. <A HREF = z1.htm>Click here to view the page z1.htm</A> <P> Linking using image hotspot. <A HREF = z1.htm><img src = "../images/flower.gif"> </img></A>
</BODY> </HTML>
Linking
Linking to other documents Absolute pathnames Relative pathnames Linking to sections of the same document Linking to a specific point is another document Using e-mail
<HTML> <HEAD> <TITLE>Linking in the same document</TITLE> </HEAD> <BODY> <H1><CENTER> REPORT DETAILS</CENTER></H1> <A HREF="#Overview">Overview</A><BR> <A HREF="#Benefits">Benefits</A><BR> <A HREF="#Features">Features</A><BR> <A HREF="#Technical">Technical</A><BR> <PRE> <H2><A name="Overview">Overview</A></H2><BR> Report on the Regional Meeting of Experts on Protection of Cultural Goods during Hostilities, held May 13 and 14, 2002, in Lima, Peru
<H2><A name="Benefits">Benefits</A></H2><BR> The forerunner of this meeting was the meeting of experts on protection of cultural property in the event of armed conflict that was held in Geneva on October 5 and 6, 2000, convened by ICRC in coordination with UNESCO. <H2><A name="Features">Features</A></H2><BR> Another important aspect had to do with the <H2><A name="Technical">Technical Specifications</A></H2><BR> In the second place, in terms of identifying, compiling inventories, </PRE> <A HREF="#">beginning of this page</A><BR> </BODY> </HTML>
HREF links to the other document

<HTML> <HEAD> <TITLE> Using links</TITLE> </HEAD> <BODY> <BR><BR> <P> This page is all about creating links to documents. <A HREF = "z2.htm#Features">Click here to view the page z2.htm</A> </BODY> </HTML>
z2.htm
<HTML> <HEAD> <TITLE>Linking in the same document</TITLE> </HEAD> <BODY> <H1><CENTER> REPORT DETAILS</CENTER></H1> <PRE> <H2><A name="Overview">Overview</A></H2><BR> Report on the Regional Meeting of Experts on Protection <H2><A name="Benefits">Benefits</A></H2><BR> The forerunner of this meeting was <H2><A name="Features">Features</A></H2><BR> Another important aspect <H2><A name="Technical">Technical Specifications</A></H2><BR> * In the second place, </PRE> <A HREF="#">beginning of this page</A><BR> </BODY> Web Page Programming with HTML/Session 2/ 25 </HTML>
Navigation around the web site

Linear layout Hierarchical layout Image maps Hyperlinks Sub-pages Table of Contents Back and Forward button
Linear layout

Follows a Linear Structure A sequential link between the pages

---------------------------------------------------------------------------------------------
Hierarchical layout

The home page has links to several other pages Each page has a link to the home page
-------------------------------------------------------------------------
-------------------------
-------------------------
-------------------------
Meta tag
A meta tag is a head element that records information about the current page, such as the character encoding, author, copyright, or keywords. These tags can also be used to give information to the server, such as the expiration date, refresh interval, and PICS rating for the page. (PICS, the Platform for Internet Content Selection, provides a method for assigning ratings, such as movie ratings, to web pages.) Attribute specifies whether the meta tag contains descriptive information about the page (name) or HTTP header information (http-equiv).
Basic HTML elements

Header (H1 to H6) Tag Paragraph Level Tags Block Tags Character Format Tags List Horizontal Rule <HR> Tag Font Tag IMG Tag
Headings
<HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> <H1>Introduction to HTML</H1> <H2>Introduction to HTML</H2> <H3>Introduction to HTML</H3> <H4>Introduction to HTML</H4> <H5>Introduction to HTML</H5> <H6>Introduction to HTML</H6> </HTML>
Structuring Text
Using Quotes <BLOCKQUOTE > Preformatted text <PRE> Grouping elements <DIV></DIV> <SPAN></SPAN>
<HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> The blockquote tag defines the start of a long quotation. <BODY> <p> Ambassador Eduardo Ferrero Costa, <BLOCKQUOTE> In this respect, there are three fundamental instruments of IHL dealing with this issue: the Hague Convention of 1954 for the Protection of Cultural Property in the Event of Armed Conflict </BLOCKQUOTE> The forerunner of this meeting was the meeting of experts </BODY> </HTML>
<HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> <BODY> The div tag defines a division/section in a document. <div style="color:#FF0000;"> <h4>This is a header in a div section</h4> <p>This is a paragraph in a div section</p> </div> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> <BODY> The span tag is used to group inline-elements in a document. <p>This is a paragraph <span style="color:#0000FF;">This is a paragraph</span> This is a paragraph</p> <p> <span style="color:#00DD45;"> This is another paragraph </span> </p> </BODY> </HTML>
Lists

Unordered lists Ordered lists Definition lists
Unordered Lists
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <UL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday </UL> </BODY> </HTML>
Customized Bullets
<LI TYPE = SQUARE> Square bullets <LI TYPE = DISC> Sphere bullets <LI TYPE = CIRCLE> Round bullets
Ordered Lists
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <OL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday </OL> </BODY> </HTML>
Customized Numbers

Upper Roman
<LI TYPE = I>

<LI TYPE = i> <LI TYPE = A> <LI TYPE = a> <OL START = n> [ Default ]
Lower Roman
Uppercase
Lowercase
Begin numbering with a digit other than 1
Horizontal Rule
<HR> Attributes align Width Size Noshade
<HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> <BODY> <HR width="200"> You'll get the nifty little line below: <HR width="200" size="7"> <HR width="200" noshade> Now, remember when I said to try changing the size to 70? <HR width="200" size="70" noshade> <HR width="200" color="red" noshade> </BODY> </HTML>
Using Fonts
<FONT> </FONT> Color Size Face
Adding Color
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY BGCOLOR=lavender> <H2><FONT COLOR = LIMEGREEN>Welcome to HTML</FONT></H2> <P><FONT COLOR = RED>This is good fun</FONT></P> </BODY> </HTML>
Images in HTML Documents
GIF (Graphics Interchange Format) images (.GIF) Interlaced GIF format Transparent GIF images JPEG (Joint Photographic Expert Group) images (.JPEG) PNG (Portable Network Graphics)
Inserting Images

<IMG SRC=URL> <IMG ALIGN=position SRC=PICTURE.GIF> <IMG SRC=Flowers.jpg ALT=Beautiful Flowers> <BODY BACKGROUND=bgimage.gif> <BODY BACKGROUND=bgimage.gif BGPROPERTIES=FIXED>
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY BACKGROUND=bgimage.gif> <img src="flower.jpg" alt="Flower" height="200" width="200"> <IMG SRC="../images/Flower.jpg" ALT=Beautiful_Flowers height="300" width="300"> <p> The Attributes </BODY> </HTML>
Layout of a Table
Creating Tables
<HTML> <HEAD> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE> <TD> A single cell table </TD> </TABLE> </BODY> </HTML>
Elements Associated with Table

<TABLE> </TABLE> <TR> </TR> <TD> </TD> <CAPTION> </CAPTION> <TH> </TH>
<HTML> <HEAD> <TITLE>Using Tables </TITLE> </HEAD> <BODY> <TABLE> <TR> <TD> Data cell 1 </TD> <TD> Data cell 2 </TD> <TD> Data cell 3 </TD> <TR> <TD> Data cell 4 </TD> <TD> Data cell 5 </TD> <TD> Data cell 6 </TD> </TABLE> </BODY> </HTML>
Add Cell Space
The CELLSPACING attribute defines the space between cells in pixels. The CELLPADDING attribute defines spaces within the table cell.
<TABLE BORDER = 2 CELLSPACING = 2 CELLPADDING = 6>
Merging Cells
The COLSPAN and ROWSPAN attributes are used to create cells that span more than one column or row
The COLSPAN attribute is used with the <TH> tag, while the ROWSPAN attribute is used with the <TD> tag
Formatting Data in the Cell

Align Align Align Align
= = = =
left center right justify
Valign Valign Valign Valign
= = = =
top middle bottom baseline
<TD ALIGN = right VALIGN = bottom> Data Cell 1</TD>

Color table
AQUA BEIGE BLACK BLUE BROWN CHOCOLATE CYAN DARKBLUE DARKGREEN DARKRINK DARKRED DARKVIOLET FUXHSIA GOLD GRAY GREEN GREENYWLLOW HONEYDEW HOTPINK INDIANRED INDIGO IVORY LAVENDER LIME LIMEGREEN LINEN MAGENTA MAROON MEDIUMBLUE NAVY OLIVE PURBLE RED SILVER SKYBLUE SNOW TAN TEAL WHEAT WHITE WHITESMOKE YELLOW
Insert animated picture (gif)

<HTML> <HEAD> <TITLE>Inserting an animated .GIF</TITLE> </HEAD> <H1><FONT SIZE=3 CLOR=FORESTGREEN><B>Inserting an Image</B></FONT></H1> <HR> <BODY> <IMG SRC=coffee.gif ALT="Steaming Coffee"> </BODY> </HTML>
Rollover Images
A Rollover image is an image, which changes when the mouse pointer moves over it.
Primary Image
Rollover Image
Secondary Image
Flash Embedded

To have a flash file (.swf) <object width="550" height="400"><param name="movie" value="somefilename.swf"> <embed src=FileofFlash.swf" width="550" height="400"> </embed></object>
MARQUEE tag
Marquee attribute Align:Left, Right, Top, Middle, Bottom Behavior:Scroll, Slide, Alternate BGColor: Direction:left, right Loop:value , Infinite or -1
Adding Sound
<BGSOUND SRC="path\sound filename"> <BGSOUND src="WindowsLogonSound.wav"> The BGSOUND element is not supported by Netscape Navigator
<HTML> <HEAD> <TITLE>Inserting Sound</TITLE> </HEAD> <H1><FONT SIZE=3 CLOR=FORESTGREEN><B>Inserting sound</B></FONT></H1> <HR> <BODY> <BGSOUND SRC="Windows XP Logon Sound.wav" loop="infinite"> <IMG SRC=coffee.gif ALT="Steaming Coffee"> </BODY> </HTML>
Adding Video
To insert a video file into an HTML document, <EMBED> tag can be used
<EMBED SRC=path\video file name WIDTH=width in pixels or percentage HEIGHT=height in pixels or percentage>
<HTML> <HEAD> <TITLE>Inserting a video file</TITLE> </HEAD> <H1><FONT SIZE=3 CLOR=FORESTGREEN><B>Inserting Video</B></FONT></H1> <BODY> <EMBED SRC="Clock.avi" HEIGHT=100 WIDTH=100> </BODY> </HTML>
Adding Java Applet
To display the applet, we need to create an HTML page that loads the applet file into the browser
<applet code = FirstApplet width=200 height= 200></applet>
<HTML> <HEAD> <TITLE>Inserting Applet in HTML</TITLE> </HEAD> <BODY> <APPLET CODE ="DrawTest.class" Width=150 Hight=150> </BODY> </HTML>
Introduction to Forms
Uses of Forms
Collecting names, addresses, telephone numbers, e-mail addresses, and other information to register users for a service or event
Gathering information for the purchase of an item. For example, if we want to purchase a book over the Internet, we would be required to fill in our name, mailing address, mode of payment, and so on
A Sample Form
Using Forms
The FORM element <FORM> </FORM> Form Attribute ACCEPT ACTION METHOD
HTML Input Element Attribute
The INPUT Element TYPE NAME VALUE SIZE MAXLENGTH CHECKED SRC
Input Type Attribute

TEXT [ Default ] CHECKBOX RADIO SUBMIT RESET IMAGE BUTTON
Other Input Elements
The TextArea Element cols rows Size type Value The BUTTON Element name value type
The SELECT Element Name size Multiple The LABEL Element
Creating Forms
Controlling the elements Setting focus Tab order Access keys Disabling Elements

02 HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

02 HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML Hyper Text Markup Language Session 2

Trinh Thi Van Anh PTIT 8-2012

Web Page Programming with HTML/Session 2/ 2

The World Wide Web

Web Page Programming with HTML/Session 2/ 3

Web Page Programming with HTML/Session 2/ 5

Browsers and Editors

The HTML tag is comprised of:

Structure of an HTML document

The HTML Section The Header Section The BODY Section

Web Page Programming with HTML/Session 2/ 10

Choosing Alignment of text

Web Page Programming with HTML/Session 2/ 12

Web Page Programming with HTML/Session 2/ 13

Using special characters

Web Page Programming with HTML/Session 2/ 15

Web Page Programming with HTML/Session 2/ 16

Internal and External links

Web Page Programming with HTML/Session 2/ 17

To create a hyperlink, we have to specify two components:

Web Page Programming with HTML/Session 2/ 18

The syntax of HREF is :

Web Page Programming with HTML/Session 2/ 21

HREF links to the other document

Navigation around the web site

Web Page Programming with HTML/Session 2/ 26

Follows a Linear Structure A sequential link between the pages

Web Page Programming with HTML/Session 2/ 27

Web Page Programming with HTML/Session 2/ 28

Basic HTML elements

Web Page Programming with HTML/Session 2/ 32

Unordered lists Ordered lists Definition lists

Web Page Programming with HTML/Session 2/ 36

Web Page Programming with HTML/Session 2/ 38

<LI TYPE = I>

Begin numbering with a digit other than 1

<HR> Attributes align Width Size Noshade

Web Page Programming with HTML/Session 2/ 41

<FONT> </FONT> Color Size Face

Web Page Programming with HTML/Session 2/ 43

Images in HTML Documents

Web Page Programming with HTML/Session 2/ 45

Web Page Programming with HTML/Session 2/ 46

Web Page Programming with HTML/Session 2/ 48

Elements Associated with Table

Web Page Programming with HTML/Session 2/ 50

Add Cell Space

<TABLE BORDER = 2 CELLSPACING = 2 CELLPADDING = 6>

Web Page Programming with HTML/Session 2/ 52

Web Page Programming with HTML/Session 2/ 53

Formatting Data in the Cell

Align Align Align Align

left center right justify

Valign Valign Valign Valign

top middle bottom baseline

<TD ALIGN = right VALIGN = bottom> Data Cell 1</TD>

Web Page Programming with HTML/Session 2/ 55

Insert animated picture (gif)

Web Page Programming with HTML/Session 2/ 57

Web Page Programming with HTML/Session 2/ 58

Web Page Programming with HTML/Session 2/ 59

Web Page Programming with HTML/Session 2/ 60

Web Page Programming with HTML/Session 2/ 62