Web Authoring (HTML)

8/13/2019 Web Authoring (HTML)

1/64

11

Web Authoring (HTML)

Advanced Digital Media Technology Center-University of Colombo School of Computing

Samantha Mathara Arachchi,B.Sc,Pg.Dip(Com.Tech.),Pg.Dip.(IM),M.Sc.(IM),MCS(SL) MACM,MIEEE

e-mail:([email protected])


2/64

22

What isWhat is HHTTMMLL

HTML- HyperText Markup Language

HTML is not a programming language, it is a markuplanguage

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

Use of HTMLUse of HTMLDisplay text dataDisplay text data

Call up other Web Pages (Link between Pages)Call up other Web Pages (Link between Pages)

Display multimedia dataDisplay multimedia data


3/64

33

Creating HTML FilesCreating HTML Files

Creating directly using a text editor;Creating directly using a text editor;NotepadNotepad

WordpadWordpad

Use an HTML EditorUse an HTML EditorFrontPageFrontPage

HomePageHomePage

DreamweaverDreamweaver


4/64

44

How to save a fileHow to save a file

.html

All Files

File Name


5/64

55

Creating HTML DocumentCreating HTML Document

GrammarGrammar

TagTagA tag is a code used in the HTML documentA tag is a code used in the HTML document

A tag is singleA tag is single--byte UPPERCASE/lowercase lettersbyte UPPERCASE/lowercase letters

enclosed by enclosed by tag at the beginning of the document tag at the beginning of the document

tag at the end of the document tag at the end of the document


6/64

66

HTMLDocument

Header Body

Header is the starting section ofHeader is the starting section ofthe HTML documentthe HTML document

Description of the name of theDescription of the name of the

web page is enclosed betweenweb page is enclosed between

thethe tag and thetag and the tagtag

Main contents of the HTMLMain contents of the HTMLdocumentdocument

Tags related to the display ofTags related to the display of

the web page are containedthe web page are contained

between thebetween the tag andtag andthethe tagtag


7/64

77

Grammar of the TagGrammar of the Tag

Grammatically , they belong to any of theGrammatically , they belong to any of the

patterns described followspatterns described follows

Basic TagBasic Tag ....

character String Closing tagOpening tag

My First Page

For this type of tag an opening tag is used before a character string and a

closing tag is used after it.

1


8/64

88


Single TagSingle Tag oror

For this type of tag an opening tag is used

either before or after a character string.

2

Eg.
Line Break Tag


9/64

99


Attribute TagAttribute Tag

....

For this type of tag is used to specify attributesFor this type of tag is used to specify attributeswithin a tag for detailed specificationwithin a tag for detailed specification

Depending on the type of tag, the attributes thatDepending on the type of tag, the attributes that

can be used are different.can be used are different.Multiple attributes can be specified in random orderMultiple attributes can be specified in random order

Attributes are separated by a singleAttributes are separated by a single--byte space.byte space.

3

Eg

..

attribute tag


10/64

1010

Font Face, Size and ColorFont Face, Size and Color

--

These tag is used to specify the font sizeThese tag is used to specify the font size

EgEg My First Web PageMy First Web Page

--

These tag is used to specify theThese tag is used to specify the thethe colorcolorEgEg My First Web PageMy First Web Page

--

These tag is used to specify the font TypeThese tag is used to specify the font Type



11/64

1111

To combine Font AttributesTo combine Font Attributes

--

These attributes are used to specify the fontThese attributes are used to specify the font

size, color and typesize, color and type



12/64

1212

Displaying Text DataDisplaying Text Data

-- These tags define the start and end of the HTMLThese tags define the start and end of the HTML

DocumentDocument

All the other tags are specified between themAll the other tags are specified between them --

These tags define the attribute of the HTML documentThese tags define the attribute of the HTML document

They form the header section of the HTML documentThey form the header section of the HTML document

--

These tags define the title of the Web pageThese tags define the title of the Web page

They are specified between They are specified between -- ..

The title defined by these tags is shown on the title bar ofThe title defined by these tags is shown on the title bar of

the browser.the browser.

--

TheseThese tags defined the body of the HTML documenttags defined the body of the HTML document


13/64

1313

My First Web Page

This is my first web page. Let's enjoy with HTML


14/64

1414

HeadingsHeadings

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

These tags are used to display theThese tags are used to display the

headingsheadings

The numbers indicate theThe numbers indicate the levels of thelevels of the

headingsheadings

(Relative size) from 1(Relative size) from 1

--6)6)


15/64

1515

Other TagsOther Tags

This tag is used to define line breaks

>


16/64

1616

Color TheoryColor Theory

Six digit hexadecimal numbersSix digit hexadecimal numbers

# RRGGBB

RED GREEN BLUE

# ff0000 - RED# 00ff00 - GREEN

# 000000 - BLACK

# ffffff - WHITE

Variation O~9 or a~f 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f


17/64

1717


18/64

1818

Text italic, bold and UnderlineText italic, bold and Underline

--

These tag is used to display bold textThese tag is used to display bold text

EgEg MyMy First Web PageFirst Web Page

--

These tag is used to display italic textThese tag is used to display italic text


--

These tag is used to display underline textThese tag is used to display underline textEgEg MyMy First Web PageFirst Web Page


19/64

1919

Superscript subscript and Strike textSuperscript subscript and Strike text

--

These tag is used to display subscript textThese tag is used to display subscript text

EgEg HH22

--

These tag is used to display Superscript textThese tag is used to display Superscript text

EgEg 2nd2nd

--

These tag is used to display strike out textThese tag is used to display strike out textEgEg MyMy First Web PageFirst Web Page

2nd

H2

My First Web Page


20/64

2020

Paragraphs and Horizontal RulesParagraphs and Horizontal Rules

--
These tags define the paragraphThese tags define the paragraph
They force a line break and insert a blank lineThey force a line break and insert a blank line

before and after the paragraph.before and after the paragraph.

This is my first paragraph

This is my Second paragraph

You are free to use this template in any way

you like. All I ask for is that you leave the web site design creditlinks in the footer area of this template intact.

blockquote {padding : 10px;border : 1px solid #6395a5;background-color : #bfd5e2;text-align : justify;font-style : italic;

}


21/64

2121

Horizontal RulesHorizontal Rules

--

This tag is used to display a border (horizontal rule)This tag is used to display a border (horizontal rule)

Attribute of the tag can specify the thickness.Attribute of the tag can specify the thickness.Length, left and right alignment.Length, left and right alignment.


22/64

2222

LISTSLISTS

--

These tags are used to display theThese tags are used to display the unordered listunordered list

They are used in combination with tagThey are used in combination with tag

--

These tags are used to display theThese tags are used to display the ordered listordered list

They are used in combination with tagThey are used in combination with tag

This tag is used in the scope of the tags orThis tag is used in the scope of the tags orthe tags described above for the display of athe tags described above for the display of a

list itemlist item..

One tag is used for each list itemOne tag is used for each list item


23/64

2323

LISTS LISTS

--

These tags are used in the scope of the These tags are used in the scope of the

tags described above for the display of thetags described above for the display of thedefinition term. Can be omitteddefinition term. Can be omitted

--

These tags are used to display theThese tags are used to display the definition listdefinition list

They are used in combination with the andThey are used in combination with the andtags described belowtags described below

--

These tags are used in the scope of the These tags are used in the scope of the tags described above for the display of definitiontags described above for the display of definition

The definition is displayed at an indent positionThe definition is displayed at an indent position

from the definition term. can be omittedfrom the definition term. can be omitted


24/64

2424

HTMLHTML

HHyperyperTTextext MMarkuparkup LLanguageanguage

LISTS LISTS


25/64

2525

TABLESTABLES

-- These tags define the tableThese tags define the table

They are used in combination with the andThey are used in combination with the and

An attribute of the An attribute of the

--

These tags define the rows of the table.These tags define the rows of the table.

--

These tags define the data (cell) of the rows.These tags define the data (cell) of the rows.

Adjust the ColumnAdjust the Column width: width: --

--

These tags define the Item names of the columns of the table.These tags define the Item names of the columns of the table.


26/64

2626

TABLES TABLES

ROWSPANROWSPANThe ROWSPAN attribute that specifies a cellsThe ROWSPAN attribute that specifies a cells

spanning across multiple rowsspanning across multiple rows

-- COLSPANCOLSPAN

The COLSPAN attribute specifies a cell acrossThe COLSPAN attribute specifies a cell across

multiple columnsmultiple columns

--

--

These tags define the caption of the tableThese tags define the caption of the tableThey are used between the tag andThey are used between the tag and

the first tagthe first tag


27/64

2727

Displaying Image & Image DataDisplaying Image & Image Data

This tag is used to display an imageThis tag is used to display an image

ALTALT

The ALT attribute that specifies the characterThe ALT attribute that specifies the characterstrings to be displayed on a text based browser instrings to be displayed on a text based browser in

place of the imageplace of the image

WIDTH and HIGHT attributesWIDTH and HIGHT attributes

The WIDTH attribute and the HIGHT attributeThe WIDTH attribute and the HIGHT attribute

that specifies the display size of the imagethat specifies the display size of the image


28/64

2828

Displaying Image & Image Data Displaying Image & Image Data

ALIGNALIGN

The ALIGN attribute that specifies theThe ALIGN attribute that specifies the

alignment of the text to be displayed next to thealignment of the text to be displayed next to the

image.image.

(TOP, MIDDLE & BOTTOM)(TOP, MIDDLE & BOTTOM)

S if i Li k


29/64

2929

Specifying LinksSpecifying Links

--

These tags are used to set up hyperlinks forThese tags are used to set up hyperlinks for

calling up other web pages.calling up other web pages.

To call up Web pages from other directory, theTo call up Web pages from other directory, the

following path must be specified.following path must be specified.

Specify Relative PathSpecify Relative Path(Specify a relative position from(Specify a relative position from

the directory that stores the calling Web page.)the directory that stores the calling Web page.)

Path name/file namePath name/file name

Specify Absolute PathSpecify Absolute Path(Specify an absolute position(Specify an absolute position

from the root directory)from the root directory)

/directory name (in the root directory)/directory/directory name (in the root directory)/directory

name/file namename/file name


30/64

3030

Specifying Links to Other PagesSpecifying Links to Other Pages

A

/

C

B

aaa.html

bbb.html

ccc.html

Absolute Path:Absolute Path:

Absolute Path for differentAbsolute Path for differentdirectory:directory:

If this iscurrent

document

(I)

The absolute path shows exactly where thefile is on the computer.

In HTML, you start every absolutepathname with a slash(/)

Then you type the directory names on thecomputer starting with the topmost directory

in the folder hierarchy

Even the absolute pathnames of files

located on different hard disks begin with aslash.


31/64

3131

Specifying Links to Other PagesSpecifying Links to Other Pages

A

/

C

B

aaa.html

bbb.html

ccc.html

Relative Path:Relative Path:

oror

Relative Path from variousRelative Path from various

directory:directory:

If this iscurrent

document

(II)

To reference a file in a folder above the

current folder in the folder hierarchy (Onelevel up)

To reference a file in a folder below the

current folder in the folder hierarchy thenjust specify the name of the subfolder.

Li k t th S PLi k t th S m P


32/64

3232

Links to the Same PageLinks to the Same Page

-- EgEg Part B

These tags and the option assign a name to anThese tags and the option assign a name to an

arbitrary positionarbitrary position in the HTML document.in the HTML document.

Using a link defined by the tags describedUsing a link defined by the tags described

next, the position specified by these tags can benext, the position specified by these tags can be

display at the beginning of the browser screen.display at the beginning of the browser screen.

Anchor name can be any alphabetsAnchor name can be any alphabets

--

EgEg Part BPart BThese tags define a link to display the part of aThese tags define a link to display the part of a

Web pageWeb page..


33/64

3333

Link to separate page and target toLink to separate page and target to

specific areaspecific area

For Link page:For Link page:

Introduction

Source Page:Source Page:

Introduction


34/64

3434

Example (Link to the same Page)Example (Link to the same Page)

About the UCSC

About the ADMTC::

::

::

About the UCSC (Paragraph)

About the UCSC (Paragraph)


35/64

Links to External Media DataLinks to External Media Data


36/64

3636

Links to External Media DataLinks to External Media Data

--These tags are used to display external mediaThese tags are used to display external media

datadata

Play the production information videoPlay the production information video--

Image MapImage Map


37/64

3737

Image MapImage Map

What is an Image MapWhat is an Image MapThe image map is a function that calls up another WebThe image map is a function that calls up another Web

page when any part of its image is clicked.page when any part of its image is clicked.

There are two ways to use this image map functionThere are two ways to use this image map function

Client side Image MapClient side Image Map

This method makes use of the tag function in the HTMLThis method makes use of the tag function in the HTML

documentdocument

Server side Image MapServer side Image MapThis method makes use of the application (CGI/SSI) on theThis method makes use of the application (CGI/SSI) on the

WWW server to process dataWWW server to process data

Image Map contImage Map cont


38/64

3838


These tags and the USEMAP attribute are used to display images tThese tags and the USEMAP attribute are used to display images to beo be

used as the image map.used as the image map.

--

These tags are used to set up the image mapThese tags are used to set up the image map

TheThe tags described below are specified in the scope oftags described below are specified in the scope of

these tags.these tags.



39/64

3939


These tags and the USEMAP attribute are used to display images tThese tags and the USEMAP attribute are used to display images to beo be

used as the image map.used as the image map.

C

a

b

d

(c,d)

(a,b)

Shape=rect

Coords=a,b,c,d

(0,0)

(a,b)

C

Shape=circleCoords=a,b,c

(Centre & Radius)

RECT CIRCLE

Shape=polyCoords=a,b,c,d,e,f

(a,b)

(c,d)

(e,f)

POLY

Shapes:

Using FormsUsing Forms


40/64

4040

Using FormsUsing Forms

-

These tags and the attributes are used to define the dataThese tags and the attributes are used to define the data

screen (HTML form)screen (HTML form)The input data is sent as eThe input data is sent as e--mail to the address specified formail to the address specified for

the ACTION attribute.the ACTION attribute.

Form Attribute types are as follows;Form Attribute types are as follows;TextText

passwordpassword

RadioRadio

CheckCheckboxbox

SubmitSubmit

ResetReset

Type of Data

Text boxesText boxes


41/64

4141

Text boxesText boxes

The tag and the attributes are used to define theThe tag and the attributes are used to define the

textboxtextbox

tag, when the attribute TYPE=PASSWORD is tag, when the attribute TYPE=PASSWORD is

specified,specified, ** will be displayed in the place of the inputwill be displayed in the place of the input

password.password.

PullPull--down Menusdown Menus


42/64

4242

PullPull down Menusdown Menus

-

These tags are used to define the pull down menuThese tags are used to define the pull down menu

They are used in combination with the followingThey are used in combination with the following tagstags

They are described in the scope of theThey are described in the scope of the tags.tags.

An attribute of theAn attribute of the SELECTSELECT tag can be set for multiple itemstag can be set for multiple items

to be selected from the pullto be selected from the pull--down menu.down menu.

TheThe MULTIPLEMULTIPLE attribute that allows section of multipleattribute that allows section of multipleitemsitems

-

TheThe SIZESIZE attribute that specifies the number of items toattribute that specifies the number of items tobe displayed in the listbe displayed in the list

-

PullPull--down Menusdown Menus


43/64

4343

PullPull down Menus down Menus

Item Name (Value to be sent)

This tag defines an item of the pullThis tag defines an item of the pull--down menu. Selection listdown menu. Selection list

option)option)

It is described in the scope of theIt is described in the scope of the tagstags

An attribute of theAn attribute of the tag can be set for a list item totag can be set for a list item to

be selected by default (default selection item)be selected by default (default selection item)

Banana Pineapple Starfruit

Mango

Go-ya

Papaya Carrot

Egg Fish

Radio ButtonRadio Button


44/64

4444

Radio ButtonRadio Button

-

This tag defines the radio button (Exclusive input). It isThis tag defines the radio button (Exclusive input). It is

specified in the scope of the tagsspecified in the scope of the tags

Female

Male

CheckboxesCheckboxes


45/64

4545

CheckboxesCheckboxes

This tag defines the checkbox. It is specified in the scope ofThis tag defines the checkbox. It is specified in the scope of

the tags.the tags.In the eIn the e--mail to be sent, the selected item is described asmail to be sent, the selected item is described as

checkbox name=on.checkbox name=on.

Colombo

Kandy

Rathanapura

Mathara

Input AreasInput Areas


46/64

4646

Input AreasInput Areas

-

These tags define an input area that contains more than 1 lineThese tags define an input area that contains more than 1 line

of inputof input

They are specified in the scope of the tagsThey are specified in the scope of the tags

The character string described in the scope of theThe character string described in the scope of the

tags is displayed in the area as the initial value tags is displayed in the area as the initial valueIn the eIn the e--mail to be sent, it is described as name of inputmail to be sent, it is described as name of input

area=input sentencesarea=input sentences

Please write your comments here

Send Button and Cancel ButtonSend Button and Cancel Button


47/64

4747

Send Button and Cancel ButtonSend Button and Cancel Button

This tag and the attributes define the button for sending inputThis tag and the attributes define the button for sending input

or selected dataor selected data

Press this button and ePress this button and e--mail will be sent to the addressmail will be sent to the addressspecified by thespecified by the ACTIONACTION attribute of theattribute of the tag.tag.

This tag and the attributes define the button for clearingThis tag and the attributes define the button for clearing

the input datathe input data

FramesFrames


48/64

4848

Framesa es

What is the Frame Function?What is the Frame Function?This function splits the browser screen into multipleThis function splits the browser screen into multiple

frames, which display separate web pages.frames, which display separate web pages.

To use the frame function, define the method forTo use the frame function, define the method for

splitting the browser and the file names of the websplitting the browser and the file names of the web

pages to be displayed in different frames in thepages to be displayed in different frames in the

HTML file used for frame settingHTML file used for frame setting

Frames Frames


49/64

4949

a es

--These tags are used to define the split screen. In theThese tags are used to define the split screen. In the

HTML file used for frame setting, these tags are usedHTML file used for frame setting, these tags are used

in place of the tags.in place of the tags.

The method of split and the size of each frame are setThe method of split and the size of each frame are set

up in the optionsup in the options

The COLS attribute that splits the screen into left andThe COLS attribute that splits the screen into left and

right framesright frames

--

The ROWS attribute the split the screen into top and bottom framThe ROWS attribute the split the screen into top and bottom frameses

--


50/64

Frames Frames


51/64

5151

--

These tags define the content of the web page toThese tags define the content of the web page to

be displayed for browsers that do not support thebe displayed for browsers that do not support the

frame functionframe function

Sample code:


52/64

5252

Main Entrance


53/64

5353

g g

TARGET attribute. This attribute is not found in the frameTARGET attribute. This attribute is not found in the frame

definition but is used within normal HTML documents todefinition but is used within normal HTML documents to

direct data to specific framesdirect data to specific frames

TARGET attribute is used to direct data to different frame

consider the TARGET attribute in terms of frames and the tag.

In order to direct data to a different frame, the receiving frame musthave been named in the frame definition.

Frame target names


54/64

5454

gThere are some special target names, called frame target names.There are some special target names, called frame target names. TheseThese

all begin with an underscore ( _ ) and are used to load pages inall begin with an underscore ( _ ) and are used to load pages into groupsto groups

of frames.of frames.

_blank_blank The user agent should load the designated document in aThe user agent should load the designated document in a

new, unnamed window.new, unnamed window.

_self_self The user agent should load the document in the same frameThe user agent should load the document in the same frame

as the element that refers to this target.as the element that refers to this target.

_parent The user agent should load the document into the immediateThe user agent should load the document into the immediate

FRAMESET parent of the current frame. This value is equivalent tFRAMESET parent of the current frame. This value is equivalent to _self ifo _self if

the current frame has no parent.the current frame has no parent.

_top_top The user agent should load the document into the full, originalThe user agent should load the document into the full, original

window (thus canceling all other frames). This value is equivalewindow (thus canceling all other frames). This value is equivalent to _self ifnt to _self if

the current frame has no parentthe current frame has no parent

Send mailSend mail


55/64

5555

> -- These tags define to send an eThese tags define to send an e--mail to somebodymail to somebody

samansaman

Adding Multimedia Features to WWWAdding Multimedia Features to WWW


56/64

5656

How to embed a Music fileHow to embed a Music file

EMBEDED


57/64

5757

How to embed a Movie fileHow to embed a Movie file

Avi,wmaAvi,wma files can usefiles can use

EMBEDED


58/64

5858

How to Create iHow to Create i-frame in HTMLframe in HTML

Facts About Beavers

Food


59/64

5959

Browse a FileBrowse a File

Insert your image:

Download a Word File (doc) orDownload a Word File (doc) or


60/64

6060

Download a Word File (doc) orDownload a Word File (doc) or

PDFPDF

Download your Application

(doc)

PDF

HTML Standards for HTML ValidationHTML Standards for HTML Validation


61/64

6161

HTML Standards.. for HTML ValidationHTML Standards.. for HTML Validation

On Going EventsOn Going Events

HTML TagHTML Tag


62/64

6262

HTML TagHTML TagDescribe metadata within an HTML documentDescribe metadata within an HTML document

Definition and UsageDefinition and Usage

Metadata is information about data.Metadata is information about data.The tag provides metadata about the HTML document.The tag provides metadata about the HTML document.Metadata will not be displayed on the page, but will be machineMetadata will not be displayed on the page, but will be machineparsableparsable..

Meta elements are typically used to specify page description,Meta elements are typically used to specify page description,

keywords, author of the document, last modified, and otherkeywords, author of the document, last modified, and othermetadata.metadata.

The tag always goes inside the head element.The tag always goes inside the head element.

The metadata can be used by browsers (how to display contentThe metadata can be used by browsers (how to display contentor reload page), search engines (keywords), or other webor reload page), search engines (keywords), or other web

services.services.


63/64

6363

ReferencesReferenceshttp://www.w3schools.com/html/html_intro.http://www.w3schools.com/html/html_intro.

aspasp

Markup Validation ServiceMarkup Validation Service


64/64

6464

p

v0.7.1v0.7.1

http://validator.w3.org/http://validator.w3.org/

Documents

Web Authoring (HTML)