1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom

COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU

Introduction to HTML

Seree [email protected]


What is HTML

• Hyper Text Markup Language.• World Wide Web Consortium (W3C).• Hyper Text: A collection of text and images

that can be accessed in a non-linear way.• Markup Language: A way of presenting the

text, images and other supported media.


Physical Markup vs Logical Markup

• Physical Markup: Emphasis on the presentation.

• Logical Markup: More emphasis on contents of the document. Later mapped to physical markup.

• HTML supports both. Logical Markup is recommended.


Features of HTML

• Not designed to be WYSIWYG (What You See Is What You Get), rather it is WYSIWYM (What You See Is What You Mean).

• Easily portable across platforms.• Is defined in SGML with general semantics.• Adapted for wide range of applications and

information presentation.


Why HTML

• Describes basic semantics of Web based documents.

• Web Page Composers may not have complete features.

• Debugging and modification requires knowledge of HTML.

• For generating Dynamic Documents.


Contents of HTML Documents

• Markup elements– Markup tags– Element Attributes

• Text / information


Markup Elements

• Markup tags enclosed in angle brackets.– Start and end tags.

Eg. <H1 align=center>This is a heading</H1>– Standalone tags / Empty tags

eg. <HR width=75%>, <BR>

Structure of HTML document

<HTML><HEAD>

</HEAD><BODY>

</BODY></HTML>


An Example - I

<HTML><HEAD>

<TITLE>Introduction to HTML</TITLE>

</HEAD><BODY>

<H1 align=center>Introduction to HTML</H1><BR><HR width=80%><P>Hi folks, welcome to NCST

An Example - II

<P>Today we will learn how to write a HTML document. HTML consists of markup elements used to present the text. These elements includes -<UL><LI>Markup Tags</LI><LI>Element Attributes</LI></UL><BR><HR width=90%></BODY>

</HTML>


HEAD Element

• Contains information about HTML document.

• Tags inside Head element can appear in any order.

• Examples of header tags are - META, TITLE, BASE etc.


TITLE Element

• It is an optional element.• Serves as the label of browser window.• Should be as concise as possible.• Is used by the search engines.


BODY element

• Contains the body proper.• Attributes

– BACKGROUND = color– BGCOLOR = color– TEXT = color– LINK, ALINK, VLINK = color

• Color may be specified using hex digits or using pre-defined words.


(A) Anchor element

• Specified by start tag <A> and end tag </A>• Marks the in between text or image as

hyperlink.• Attributes

– HREF: specifies URL of the file to be fetched.– NAME: marks the text, so it can be the target of

hyperlink.– TARGET: specifies the target frame to load file.


(A) Anchor element contd...

• Hot Text is rendered in different manner.• URL can be partial or full. Partial in case -

– Speceified relative to directory of current file.– Use of BASE tag.

• Attributes of BASE -– HREF: Relative URL for following hyperlinks.– TARGET: Default target window for following

hyperlinks.


IMG element

• Includes the image file inline with the text• Images can float on the page allowing the

text to flow around the image.• Separate connection to the server is

established for each image.


IMG element contd...

• Attributes of IMG– SRC– ALT– ALIGN– WIDTH– HEIGHT– BORDER


P & BR elements

• <P> marks the beginning of a paragraph and implies a paragraph break.

• </P> marks end of paragraph and is optional.

• <BR> forces a line break.• CLEAR attribute is used to move below

floating objects in document.


Heading elements

• Six level of headings from H1 to H6.• No forced hierarchy in headings.• Avoid skipping a heading level.• ALIGN attribute specifies the alignment of

the heading.– Alignment may be left | right | center | justify.

• Eg. <H1>This is level 1 heading.</H1>


HR element

• To draw a horizontal line across the screen• Terminates the preceding paragraph• Commonly used to divide sections within a

document• Attribute -

– ALIGN– SIZE– WIDTH


Character Highlighting elements

• Physical Highlighting Elements -– B: Boldface– I: Italic– U: Underline

• Logical highlighting elements– EM– STRONG– CODE– CITE


BASEFONT element

• To specify the default font size. SIZE ranges from 1 to 7 with default as 3.

• Should appear prior to any displayed text in the BODY of the document.

• Eg. <BASEFONT SIZE = 4>


FONT element

• To change the font size or color of enclosed text.

• Attributes of FONT are -– SIZE: It can be explicit or can be preceded by ‘+’

or ‘-’ to indicate a change in the size relative to that specified in BASEFONT.

– COLOR– FACE


List elements

• 5 types of lists -– UL: Unordered List– OL: Ordered List– DL: Definition List– DIR: Directory List– Menu: Menu List

• A list item is indicated using <LI> tag except in definition list.• In definition list list item is indicated using <DT> and <DD>

tags.


Tables

• TABLE element contains tabular data.• Tables are defined as a collection of rows, defined

by the TR element.• Can contain CAPTION and TR elements.• Attributes -

– ALIGN– BORDER– CELLSPACING– WIDTH


Table elements

• TR element contains a collection of cells, defined by TH and TD elements.

• TH elements are used for headings.• TD elements specify actual table data.• Attributes of TR -

– ALIGN– VALIGN– BORDER– BACKGROUND / BGCOLOR


Table elements contd...

• TD and TH are used to define cells in a row.• Cells can occupy more than one row and/or coloumn.• Attributes of TD and TH -

– ALIGN– VALIGN– BACKGROUND / BGCOLOR– ROWSPAN– COLSPAN– WIDTH


Example of Table

<HTML><HEAD>

<TITLE>An Example of Tables</TITLE></HEAD><BODY>

<H1 ALIGN=center>This is an example of Table</H1><BR><HR WIDTH=80%><BR><BR>

<TABLE BORDER=3 ALIGN=center WIDTH=75%><CAPTION>Student Marks</CAPTION>


Example of Table contd...

<TR><TH ALIGN=center WIDTH=10%>S.No. <TH ALIGN=center WIDTH=40%>Student ID <TH ALIGN=center WIDTH=40%>Marks (out of 100)

</TR><TR><TD ALIGN=center>01

<TD ALIGN=center>1330006 <TD ALIGN=center>84

</TR> …</TABLE><BR><BR><HR WIDTH=80%>

</BODY></HTML>


Reference Material• Webmaster in a Nutshell• http://angsila.compsci.buu.ac.th/~seree/lecture/315241

1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom

Documents

Transcript of 1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom