Kerala Plus Two Computer Science Notes Chapter 5 Web Designing Using HTML
Linking between web pages is the backbone of World Wide Web.
Lists in HTML
While presenting information, the facility I of listing can make it more communicative. ; Lists are of different types. HTML offers several mechanisms for specifying lists of information. All lists must contain one or i more list elements. There are three kinds of lists in HTML.
1. Unordered lists: It is also known as bulleted lists which display a bullet or other graphic in front of each item in the list. We can create an unordered list with the tag pair<UL> and </UL>. Each item in the list is presented by using the tag pair <LI> and </LI>. These are used when a set of items can be placed in any order.
We can customise unordered lists by setting the Type attribute to three different values: Disc (default value), Square and Circle.
eg., <UL Type = “Square”> <LI> Keyboard </LI> ; <LI> Mouse </LI> ; <LI> Monitor </LI> <LI> Speaker </LI> </UL>
2. Ordered lists: It presents the items in some numerical or alphabetical order. HTML provides the tag pair <OL> and </OL>
to create an ordered list. The items in the ordered list are presents by <LI> tag in <OL> element. The ordered list is also called I numbered list.
The numbering system used in oridered list by using the Type attribute, which can set with the values as:
1 Default numbering scheme (l, 2, 3, ….)
A Upper case letters (A, B, C,)
a Lower case letters (a, b, c,)
I Large Roman numerals (I, II, III,)
i Small Roman numerals (i, ii, iii,)
The Start attribute of <OL> tag enables us to change the beginning value. Type attribute sets the numbering style, eg.,
eg., <OL Type = “I” Start=“s”> <LI> Keyboard </LI> <LI> Mouse </LI> <LI> Monitor </LI> <LI> Speaker </LI> </OL>
3. Definition lists: It is a list of terms and the corresponding definitions. The definition text is typically indented with respect to the term. No bullet symbol or number is provided for the list items. The tag pair <DL> and </DL> enclose the definition lists. Each term in the list is created using the <DT> tag and the <DD> tag supplies the definition of the term.
Nested lists: A list of items can be given under each item of another list, it is known as nesting of lists. This is possible in many ways. We can insert an unordered list into another unordered list, an unordered list into an ordered list, an ordered list inside an unordered list, etc.
A hyperlink is an element, a text, or an image in a web page that we can click on, and move to another document or another section of the same document. Hyperlinks allow visitors to navigate between websites by clicking on words, phrases and images. Hyperlink is often referred to as links. In HTML, the <A> tag provides the facility to give hyperlinks. This tag is called anchor tag and anything given between the tag pair <A> and </A> becomes part of the link and a user can click that part to reach the linked document. Href is the main attribute of <A> tag and it means hyper reference. A link to a particular section of the same document is known as internal linking. The attribute Name of <A> tag is required for this.
<A Href=“http://www.dhsekerala.gov.in”> Higher Secondary </A>
Hyperlinks are considered either internal or external:
1. Internal linking: A link to a particular section of the same document is known as internal linking. The attribute Name of <A> tag is required for this.
2. External linking: The link from one web page to another web page is known as external linking. It is made possible by providing the URL of the external file in the Href attribute of <A> tag of the current page.
Concepts of URL
URL stands for Uniform Resource Locator, and it means the web address. There are two types of URLs; relative URL and absolute URL.
Example of absolute URL is
<A Href=“http:/ / www.dhsekerala.gov.in” >
Example of relative URL is
<A Href= “image. html>
Creating Graphical Hyperlinks
We can make hyperlinks to images using
<IMG> tag inside the <A> tag.
Creating e-mail linking
We can create e-mail hyperlinks to a web page using the hyperlink protocol mailto. For example,
<A Href=mailto:“Scertkerala@gmail.com”> SCERT </A>
Inserting music and video
There are two ways of handing multimedia in a web browser. One is as inline and the other is as external data. The inline refers to files and data that are handled as part of the page. These files play the music or video when the page is visible in the browser window. We can also ink a web page to external multimedia files with extension .jpg,.gif,.avi,.png,.tiff, .mp3, .mp4, etc.
The easiest way to add music or video to the web page is with a special HTML tag, called < EMBED >. This tag includes the controls of the multimedia automatically in the browser window. In case, the browser does not support the <EMBED> tag, then we can use <NOEMBED>tag.
The main attribute of the <EMBED> tag is Src, which specifies the URL of the music or video files to be included. Other • attributes are Height, Width, Align, Alt. Another attribute Hidden which indicates . whether the embedded component should ) be made visible or not.
Music can be played in the background while the page is viewed. It is achieved by the tag <BGSOUND>.
eg., <BGSOUND Src=“Songi.mp3” Loop=“Infinite” >
Here the Loop determines the duration of play. The value Infinite causes the music play as long as the page is in view.
Creating tables in a web page
In HTML, < TABLE > tag is used to create tables. This tag needs the support of some other tags like <TH>, <TR> and <TD> for constructing tables.
Some of the main attributes are listed below;
- Border: It specifies the thickness of the border line around the table.
- Bordercolor: It is used to assign colour to the table border.
- Align: It specifies the position of the table inside the browser window.
- Background: It is used to assign a backgrol und image for a table.
- Cellspacing: It determines the space to be left between cells.
- Cellpadding: It specifies the space in between the cell border and the cell content.
- Width and Height: It specify the width and height of a table.
- Frame: It specify border lines around the table. Its values are Void, Above, Below, Hsides, lhs or rhs, Vsides and box or border.
- Rules: It specify the borders between cells. Its values are none, cols, rows, groups, all.
The tags related to Table are:
- <TR>: The rows in a table are created using <TR> tag. A row itself is a collection of cells. A cell is the smallest component of a table. There are two types of cells heading cells and data cells.
- <TH>: It is used to define heading cells. These are displayed in bold face and in centred form.
- <TD>: It is similar to <TH> tag and is used to display data cells.
- Attributes of <TR> tag: The characteristics of a row can be changed using the attributes of <TR> tag.
- Align: This attribute specifies the horizontal alignment of the text in a cell in that particular row. This can take the values left, right or centre.
- Valign: We can specify the vertical align-ment of the content in a cell of any row using Valign. The possible values are top, middle, bottom or baseline.
- Bgcolor: This attribute gives background colour to a particular row. Attributes of <TH> and <TD> tag: Some of the attributes are:
- Colspan: It defines the number of columns occupied by that particular cell.
- Rowspan: It defines the number of columns occupied by that particular cell.
- Table caption with <CAPTION> tag: We can provide a heading to a table using the < CAPTION> tag.
Dividing the Browser window
The browser window can be divided into two or more panes to accommodate different pages simultaneously. HTML provides a facility called frameset to partition the browser window into different sections.
Each section accommodates different HTML pages. Each individual section created by a frameset is called a frame. To create a frameset, we can use <FRAMESET> and <FRAME> tags.
1. <FRAMESET> is a container tag for par-titioning the browser window into different frame sections. The main attributes are:
- Cols: This attribute determines the number of vertical frames in the frameset page and its dimensions.
- Rows: It defines the number and dimension of horizontal frames.
- Border: It can specify the thickness of border for the frames
- Bordecolor: We can specify border colour by assigning a colour.
2. <FRAME> tag is an empty tag. It defines the frames inside the <FRAMESET>.
<FRAME> tag always comes with Src attribute which specifies the HTML page to be loaded in the frame. Its attributes are:
- Name: It gives a name to a frame.
- Src: It specifies the URL of the document to be loaded in the frame.
- Scrolling: Indicates whether scroll bar is to be shown in the frame, when the content exceeds the frame size.
- Noresize: It is used to prevent users from resizing the border of a specific frame by dragging on it.
- Margin width and margin height: Sets the horizontal and vertical margins.
It can refer the named frame using Target attribute of the link to be displayed. A tag named Target is used in <A> tags to specify the frame in which the linked file is to be opened. Here comes the relevance of name given to the frames.
Nesting of framesets
It is the process of inserting a frameset within another frameset. <NOFRAMES>: The tag pair <NOFRAMES> and </NOFRAMES> is used to display some text content in the window if the browser is unable to support frames.
Forms in Web pages
HTML forms are required when we have to collect some data from the webpage viewer for processing. A From will take input from the web page viewer and then it will post the data to a back-end application. A form consists of two elements: a <FORM> container and number of Form controls within that container. There are various From control like text fields, textarea fields, dropdown menus, radio buttons, checkboxes, etc.
<FORM> tag: It provides a container for creating a Form. For this we can use a form handler. A from handler is a program on the web server that manages the data sent through the Form. The form handler is specified as the value for the Action attribu1 te of <FROM> tag.
Action: It specifies the URL of the Form handler, which is ready to process the received data.
Method: It mentions the method used to upload data. The most frequently used Methods are Get and Post.
Target: It specifies the target window or frame where the result of the script will be displayed. It take values like _blank_, _self_, _parent_, etc.
Form controls: These controls include
Text box, Password, Check Box, Radio Button, Text Area, Select Box, Submit and Resent Button. We can create most of these controls in any HTML From using <INPUT> tag.
< INPUT > tag is used to make different types of controls. The Type attribute determines the type of control created by this tag. Main i attributes of <INPUT> tag is:
- Name: It is used to give a name to the S input control.
- Value: It can be used to provide an initial (default) value inside the control.
- Size: It sets the width of the input text in terms of characters.
- Max length: It limits the number of characters that the user can type into the field.
- <TEXTAREA>: We can enter multiple i lines of text in a Form. The main attributes of this tag is Name, Rows, Cols.
- <SELECT> tag: A select box, also called dropdown box, provides a list of various options in the form of a dropdown list, from where a user can select on or more options, The options in the list are specified using <OPTION> tag, which will be contained in the <SELECT> tag pair.
- The main attributes are Name, Size, Multiple.
Grouping Form data with <FIELDSET> tag
The <FIELDSET> element helps in grouping related data in a Form. By using <FIELDSET> we can divide a Form into different subsections, each subsection containing related elements. To identify each <FIELDSET>, we can use the <LEGEND> tag.
The method attribute of the <FROM> tag i specifies the HTTP method (get or post) to be used when submitting the forms.
Overview of HTML 5
HTML 5 is the major revision of the HTML standard after HTML 4.01. HTML5 was developed jointly by World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback, drag-and-drop etc.
The latest versions of all leading browsers including Google Chrome, Mozilla Firefox, Apple Safari, Opera and Internet Explorer support HTML5. Mobile web browsers that are preinstalled in iPhones, iPads, Android phones, etc. also support HTML5. HTML5 is designed, as much as possible, to be backward compatible with existing web browsers.