Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
85 views

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 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.

Uploaded by

Mi Amas Vin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
85 views

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 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.

Uploaded by

Mi Amas Vin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 73

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

Web Page Programming with HTML/Session 2/ 3

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
Web Page Programming with HTML/Session 2/ 4

HTML syntax:
<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> <HEAD> <BODY> <H3>My first HTML document</H3> </BODY> </HTML>

Web Page Programming with HTML/Session 2/ 5

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
Web Page Programming with HTML/Session 2/ 7

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>
Web Page Programming with HTML/Session 2/ 8

Comments
<html> <body> <head> <title>Adding comment</title> </head> <body> <!-- THIS IS A COMMENT THAT WILL BE SKIPPED BY THE BROWSER--> Use of comments </body> </html>
Web Page Programming with HTML/Session 2/ 9

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>

Web Page Programming with HTML/Session 2/ 10

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>
Web Page Programming with HTML/Session 2/ 11

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

Web Page Programming with HTML/Session 2/ 12

<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY BGCOLOR=lavender> <P align = right>This is good fun</P> </BODY> </HTML>

Web Page Programming with HTML/Session 2/ 13

Using special characters

Greater than (>) &gt; Less than (<) &lt; Quotes ( ) &quot; Ampersand (&) &amp;
Web Page Programming with HTML/Session 2/ 14

Hyperlinks

Web Page Programming with HTML/Session 2/ 15

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

Web Page Programming with HTML/Session 2/ 16

Internal and External links


----------------

------

------

------

------

------

------

------

Web Page Programming with HTML/Session 2/ 17

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

Web Page Programming with HTML/Session 2/ 18

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/
Web Page Programming with HTML/Session 2/ 19

<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>
Web Page Programming with HTML/Session 2/ 20

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

Web Page Programming with HTML/Session 2/ 21

<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
Web Page Programming with HTML/Session 2/ 22

<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>
Web Page Programming with HTML/Session 2/ 23

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>
Web Page Programming with HTML/Session 2/ 24

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

Web Page Programming with HTML/Session 2/ 26

Linear layout

Follows a Linear Structure A sequential link between the pages


---------------------------------------------------------------------------------------------

Web Page Programming with HTML/Session 2/ 27

Hierarchical layout

The home page has links to several other pages Each page has a link to the home page
-------------------------------------------------------------------------

-------------------------

-------------------------

-------------------------

Web Page Programming with HTML/Session 2/ 28

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).
Web Page Programming with HTML/Session 2/ 29

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
Web Page Programming with HTML/Session 2/ 30

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>
Web Page Programming with HTML/Session 2/ 31

Structuring Text
Using Quotes <BLOCKQUOTE > Preformatted text <PRE> Grouping elements <DIV></DIV> <SPAN></SPAN>

Web Page Programming with HTML/Session 2/ 32

<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>
Web Page Programming with HTML/Session 2/ 33

<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>
Web Page Programming with HTML/Session 2/ 34

<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>
Web Page Programming with HTML/Session 2/ 35

Lists

Unordered lists Ordered lists Definition lists

Web Page Programming with HTML/Session 2/ 36

Unordered Lists
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <UL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday </UL> </BODY> </HTML>
Web Page Programming with HTML/Session 2/ 37

Customized Bullets

<LI TYPE = SQUARE> Square bullets <LI TYPE = DISC> Sphere bullets <LI TYPE = CIRCLE> Round bullets

Web Page Programming with HTML/Session 2/ 38

Ordered Lists
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <OL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday </OL> </BODY> </HTML>
Web Page Programming with HTML/Session 2/ 39

Customized Numbers

Upper Roman

<LI TYPE = I>


<LI TYPE = i> <LI TYPE = A> <LI TYPE = a> <OL START = n> [ Default ]
Web Page Programming with HTML/Session 2/ 40

Lower Roman

Uppercase

Lowercase

Begin numbering with a digit other than 1

Horizontal Rule

<HR> Attributes align Width Size Noshade

Web Page Programming with HTML/Session 2/ 41

<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>
Web Page Programming with HTML/Session 2/ 42

Using Fonts

<FONT> </FONT> Color Size Face

Web Page Programming with HTML/Session 2/ 43

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>
Web Page Programming with HTML/Session 2/ 44

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)

Web Page Programming with HTML/Session 2/ 45

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>

Web Page Programming with HTML/Session 2/ 46

<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>
Web Page Programming with HTML/Session 2/ 47

Layout of a Table

Web Page Programming with HTML/Session 2/ 48

Creating Tables
<HTML> <HEAD> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE> <TD> A single cell table </TD> </TABLE> </BODY> </HTML>
Web Page Programming with HTML/Session 2/ 49

Elements Associated with Table


<TABLE> </TABLE> <TR> </TR> <TD> </TD> <CAPTION> </CAPTION> <TH> </TH>

Web Page Programming with HTML/Session 2/ 50

<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>
Web Page Programming with HTML/Session 2/ 51

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>

Web Page Programming with HTML/Session 2/ 52

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

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/ 54

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

Web Page Programming with HTML/Session 2/ 55

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>
Web Page Programming with HTML/Session 2/ 56

Rollover Images

A Rollover image is an image, which changes when the mouse pointer moves over it.
Primary Image

Rollover Image

Secondary Image

Web Page Programming with HTML/Session 2/ 57

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>

Web Page Programming with HTML/Session 2/ 58

MARQUEE tag

Marquee attribute Align:Left, Right, Top, Middle, Bottom Behavior:Scroll, Slide, Alternate BGColor: Direction:left, right Loop:value , Infinite or -1

Web Page Programming with HTML/Session 2/ 59

Adding Sound

<BGSOUND SRC="path\sound filename"> <BGSOUND src="WindowsLogonSound.wav"> The BGSOUND element is not supported by Netscape Navigator

Web Page Programming with HTML/Session 2/ 60

<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>
Web Page Programming with HTML/Session 2/ 61

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>

Web Page Programming with HTML/Session 2/ 62

<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>
Web Page Programming with HTML/Session 2/ 63

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>

Web Page Programming with HTML/Session 2/ 64

<HTML> <HEAD> <TITLE>Inserting Applet in HTML</TITLE> </HEAD> <BODY> <APPLET CODE ="DrawTest.class" Width=150 Hight=150> </BODY> </HTML>

Web Page Programming with HTML/Session 2/ 65

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

Web Page Programming with HTML/Session 2/ 66

A Sample Form

Web Page Programming with HTML/Session 2/ 67

Using Forms

The FORM element <FORM> </FORM> Form Attribute ACCEPT ACTION METHOD

Web Page Programming with HTML/Session 2/ 68

HTML Input Element Attribute

The INPUT Element TYPE NAME VALUE SIZE MAXLENGTH CHECKED SRC

Web Page Programming with HTML/Session 2/ 69

Input Type Attribute


TEXT [ Default ] CHECKBOX RADIO SUBMIT RESET IMAGE BUTTON

Web Page Programming with HTML/Session 2/ 70

Other Input Elements

The TextArea Element cols rows Size type Value The BUTTON Element name value type
Web Page Programming with HTML/Session 2/ 71

The SELECT Element Name size Multiple The LABEL Element

Web Page Programming with HTML/Session 2/ 72

Creating Forms

Controlling the elements Setting focus Tab order Access keys Disabling Elements

Web Page Programming with HTML/Session 2/ 73

You might also like