Computer4U logo
Plus Two Computer Science · Chapter 05

Web Designing using HTML

17 sections
Live HTML compiler
14 review questions
5.1

Lists in HTML

5.1.1

Unordered Lists

A bulleted list, used when the order of items doesn't matter. Wrap the whole list in <UL></UL>, and each item in <LI></LI>. The bullet style is set with the Type attribute.

Disc — defaultSquareCircle
<UL Type= "Square">
<LI> Hard Disk </LI>
<LI> Mother Board </LI>
<LI> Processor </LI>
</UL>
5.1.2

Ordered Lists

A numbered list, created with <OL></OL>. The Type attribute swaps the numbering style, and Start changes where counting begins.

Table 5.1: Values of the Type attribute on <OL>
Value Produces
1Default numbering — 1, 2, 3 …
AUpper-case letters — A, B, C …
aLower-case letters — a, b, c …
ILarge Roman numerals — I, II, III …
iSmall Roman numerals — i, ii, iii …

<OL Type= "I" Start= "5">
<LI> Registers </LI>
<LI> Cache </LI>
<LI> Hard Disk </LI>
</OL> <!-- numbers from V, VI, VII -->
5.1.3

Definition Lists

Pairs a term with its definition, with no bullet or number. The tag pair <DL></DL> encloses the list; <DT> holds the term, and <DD> supplies its (indented) definition.

<DL>
<DT>Spam:</DT>
<DD> Unsolicited e-mail sent to promote a product or just to annoy.</DD>
<DT>Phishing:</DT>
<DD> Posing as a trusted site to steal usernames, passwords or card details.</DD>
</DL>
5.1.4

Nested Lists

A list of items can be placed inside another list's item — nesting an unordered list inside an ordered one, or vice versa, to any depth needed.

5.2

Creating Links

5.2

The Anchor Tag

The anchor tag <A> is the backbone of the Web — it turns text or an image into something clickable. Everything between <A> and </A> becomes the link. Its Href attribute ("hypertext reference") holds the destination, and the linked text renders underlined in a distinct colour.

<A Href= "http://www.dhsekerala.gov.in">Higher Secondary</A>
5.2.1

Internal Linking

Links to a named spot in the same document. Mark the target with Name, then reference it elsewhere with a leading #.

<A Name= "Air">Air Pollution</A>
<!-- later in the document -->
<A Href= "#Air">Jump to air pollution</A>
5.2.2–5.2.5

External Linking, URLs, Graphical & E-mail Links

External linking just points Href at another page's URL. A URL is absolute (a full address like http://www.scertkerala.gov.in) or relative (a filename like image.html, resolved from the current page's own location). Wrapping an <IMG> inside <A> creates a graphical hyperlink; setting Href to mailto:someone@example.com creates an e-mail link that opens the visitor's mail client.

<A Href= "https://www.wikipedia.org">
<IMG Src= "wiki.jpg" Alt= "Wiki logo">
</A>

<A Href= "mailto:scertkerala@gmail.com">SCERT</A>
5.3

Inserting Music and Video

5.3

The EMBED and BGSOUND Tags

Media can live inline (played as part of the page) or be linked as an external file. <EMBED> drops either into the page, using its Src attribute for the file's URL, plus Width/Height and Hidden (True/False). If a browser can't handle <EMBED>, content inside <NOEMBED></NOEMBED> is shown instead. <BGSOUND> plays audio automatically with no visible player — Loop= "Infinite" keeps it going, and Volume adjusts loudness.

<EMBED Src= "alan.mp4" Height= "150"></EMBED>
<NOEMBED>
<IMG Src= "book2.jpg" Alt= "Alternative media">
</NOEMBED>

<BGSOUND Src= "song2.mp3" Loop= "Infinite">
5.4

Creating Tables in a Web Page

5.4.1–5.4.4

TABLE, TR, TH and TD

Four tags work together: <TABLE> the container, <TR> a row, <TH> a heading cell (bold, centred by default), <TD> a data cell.

<TABLE Border= "3" Bordercolor= "red" Cellspacing= "16" Cellpadding= "5">
<TR><TH> Year </TH><TH> 2012–14 </TH></TR>
<TR><TH> Smokers </TH><TD> 412 </TD></TR>
</TABLE>

Table 5.2: Core attributes of <TABLE>
AttributeControls
BorderBorder thickness in pixels — 0 removes it.
BordercolorColour of that border.
AlignTable position — left (default), right or center.
Bgcolor / BackgroundSolid colour, or a background image.
CellspacingGap between cells, in pixels.
CellpaddingGap between a cell's border and content.
Width / HeightTable size, in pixels or % of window.

5.4.4

Spanning Cells

Colspan stretches a cell across multiple columns; Rowspan stretches it down multiple rows.

<TR><TH Colspan= "3"> No. of Registered Students </TH></TR>
<TR><TH Rowspan= "2"> Year </TH><TD> 2014 </TD><TD> 75 </TD></TR>
5.4.5

Table Caption

<CAPTION> adds a heading to the whole table, placed right after the opening <TABLE> tag.

5.5

Dividing the Browser Window

5.5.1–5.5.2

FRAMESET and FRAME

<FRAMESET> splits the window into panes; each pane, a <FRAME>, loads its own independent HTML page. Rows divides horizontally, Cols vertically — mixing pixel values, percentages, and an asterisk * for "whatever is left".

<FRAMESET Rows= "20%, 30%, 50%">
<FRAME Src= "sampleframe1.html">
<FRAME Src= "sampleframe2.html">
<FRAME Src= "sampleframe3.html">
</FRAMESET>
Src — page to loadName — label for targetingScrolling — Yes/No/AutoNoresizeMarginwidth / Marginheight
5.5.3

Targeting Frames

Name the destination frame, then point a link's Target attribute at that name — clicking the link loads the new page into that other frame.

<A Href= "bio.html" Target= "right_frame">Biography</A>

<FRAMESET Cols= "200, *">
<FRAME Src= "main.html" Name= "left_frame">
<FRAME Name= "right_frame">
</FRAMESET>
_blank — new window_self — same frame_parent — parent frameset_top — whole window
5.5.4–5.5.5

Nesting & NOFRAMES

A <FRAMESET> can contain another <FRAMESET> in place of a <FRAME>, dividing one pane again in the other direction. <NOFRAMES></NOFRAMES> holds fallback content for browsers without frame support.

The back button behaves unpredictably inside a frameset, individual frames are hard to bookmark or print, and search engines struggle to index framed content — which is why <FRAMESET> was dropped entirely in HTML5.

5.6

Forms in Web Pages

5.6.1

The FORM Tag

A <FORM> collects input from a visitor, then hands it to a server-side program named in its Action attribute, using the HTTP method set by Method (Get or Post). Target sets where the result is displayed.

5.6.2

The INPUT Tag

One empty tag, many jobs — the Type attribute decides which control appears.

textpasswordcheckboxradioresetsubmitbutton
<FORM Action= "login.php" Method= "post">
Name: <INPUT Type= "text" Name= "firstname" Size= "30">
Password: <INPUT Type= "password" Name= "Psswd">
<INPUT Type= "reset" Value= "Clear">
<INPUT Type= "submit" Value= "Send">
</FORM>
5.6.3–5.6.5

TEXTAREA, SELECT and FIELDSET

<TEXTAREA> collects multi-line text, sized with Rows and Cols. <SELECT> builds a dropdown or scrolling list from <OPTION> tags (Multiple allows more than one pick). <FIELDSET> groups related controls, captioned with <LEGEND>.

<SELECT Name= "Nationality" Size= "1">
<OPTION Value= "indian" Selected> Indian
<OPTION Value= "British"> British
</SELECT>
5.6.6

Form Submission

Clicking Submit sends every named control's value to the URL in Action, using the method named in Method. A server-side script (CGI, PHP, ASP…) then handles that data — covered in the next chapter.

5.7

Overview of HTML5

5.7

HTML5

HTML5 is the major revision that followed HTML 4.01, developed jointly by the W3C and the WHATWG. It added native support for things earlier versions needed plug-ins for — video and audio playback, drag-and-drop among them — and is supported across all current desktop and mobile browsers. It's also the version that formally dropped <FRAMESET>, in favour of layout done with CSS.

Try It Yourself

Live HTML Compiler

Edit the code on the left and press Run to see the result on the right — try out the tags from this chapter directly.

index.html
Self-Assessment

Question & Answer Review

Tap a question to reveal the answer — a quick way to check understanding before moving to Chapter 6.

01What are the three types of lists in HTML, and when would you use each?
Unordered lists (<UL>) for items with no particular order, ordered lists (<OL>) for items in a sequence, and definition lists (<DL>) for pairing terms with their definitions.
02What is the difference between internal and external linking?
Internal linking jumps to a named anchor within the same document, using the Name attribute and a Href value starting with #. External linking points to a different page or site via its URL.
03What's the difference between an absolute and a relative URL?
An absolute URL names a specific full address on the web. A relative URL gives just a filename, resolved relative to the current document's own location.
04How do you create an e-mail hyperlink?
Set the Href attribute of the <A> tag to mailto: followed by the e-mail address, e.g. Href="mailto:someone@example.com" — clicking it opens the visitor's mail client with that address pre-filled.
05What is the difference between the <EMBED> and <BGSOUND> tags?
<EMBED> inserts a visible media player (audio or video) into the page. <BGSOUND> plays background audio automatically with no visible controls.
06Name the tags associated with <TABLE> and their purpose.
<TR> creates a row, <TH> a heading cell (bold, centred), <TD> a data cell, and <CAPTION> adds a heading for the whole table.
07What do the Colspan and Rowspan attributes do?
Colspan stretches a table cell across multiple columns; Rowspan stretches a cell down multiple rows.
08What is a frameset, and which tags create one?
A frameset divides the browser window into independently loaded panes. <FRAMESET> defines the layout (via Rows or Cols), and each <FRAME> tag loads one HTML page into a pane.
09How do you target a link to load into a specific frame?
Give the destination frame a Name in its <FRAME> tag, then set the Target attribute of the <A> tag to that same name.
10Why was <FRAMESET> dropped in HTML5?
Framesets broke the browser's back button, made bookmarking and printing difficult, and were hard for search engines to index — CSS-based layout replaced the need for them.
11What is the difference between the Action and Method attributes of <FORM>?
Action specifies the URL of the server-side program that will process the submitted data. Method specifies the HTTP method used to send it — Get or Post.
12How does a radio button differ from a checkbox?
Radio buttons sharing the same Name value are mutually exclusive — selecting one deselects the others. Checkboxes are independent, so any number can be checked at once.
13What is the purpose of the <FIELDSET> and <LEGEND> tags?
<FIELDSET> groups related form controls into a labelled subsection, and <LEGEND> provides the caption text for that group.
14What happens when a Submit button is clicked?
The browser collects the values of every named control in the form and sends them to the URL specified in the form's Action attribute, using the chosen Method, for a server-side program to process.