Lab 14 HTML

Name:_________________________ Roll No:______________________ Score:_________
Signature of the Lab Tutor:_______________________ Date:________________
Practical No. 14
Data analysis Ability to

Lab performance Subject Calculation and Observation/
and conduct Presentation Score
indicator knowledge coding results
interpretation experiment
GETTING FAMILIAR WITH BASIC HTML SYNTAX

OBJECTIVE:
Upon successful completion of this practical students will be able to develop basic HTML pages.
EQUIPMENTS REQUIRED:
 Computer System
 Web Browser
HTML – OVERVIEW
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,
the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.
HTML DOCUMENT STRUCTURE
1
BASIC HTML DOCUMENT
HTML TAGS
HTML use various tags to format the content. These tags are enclosed within angle braces <Tag Name>.
Most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html>
and <body> tag has its closing tag </body> tag etc.
HEADING TAGS
Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying
any heading, browser adds one line before and one line after that heading.
2
PARAGRAPH TAG
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should
go in between an opening <p> and a closing </p> tag as shown below in the example –
LINE BREAK TAG

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
example of an empty element, where you do not need opening and closing tags, as there is nothing to go
in between them.
3
CENTERING CONTENT
You can use <center> tag to put any content in the center of the page or any table cell.
HORIZONTAL LINES
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.
HTML ATTRIBUTE
An attribute is used to define the characteristics of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts − a name and a value.
 The Name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the alignment of
paragraph on the page.
 The Value is what you want the value of the property to be set and always put within quotations.
The below example shows three possible values of align attribute: left, center and right.
CORE ATTRIBUTES
The four core attributes that can be used on the majority of HTML elements (although not all) are:
4
i) Id
ii) Title
iii) Class
iv) Style
 The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.
 The Title Attribute
The title attribute gives a suggested title for the element. The behavior of this attribute will depend upon
the element that carries it, although it is often displayed as a tooltip when cursor comes over the element
or while the element is loading.
 The Class Attribute
The class attribute is used to associate an element with a style sheet and specifies the class of element.
 The Style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
HTML - FORMATTING
 Bold Text
Anything that appears within <b>...</b> element, is displayed in bold.

 Italic Text
Anything that appears within <i>...</i> element is displayed in italicized.

 Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline.
 Strike Text
5
Anything that appears within <strike>...</strike> element is displayed with strikethrough.
 Superscript Text
The content of a <sup>...</sup> element is written in superscript.

 Subscript Text
The content of a <sub>...</sub> element is written in subscript.

 Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the text
surrounding it.
 Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest of the text
surrounding it.
 Comments
HTML comments are placed in between  tags.

HTML – TABLES
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows
and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and
<td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to
represent actual data cell.
HTML – LISTS
6
HTML offers web authors three ways for specifying lists of information. All lists must contain one or
more list elements. Lists may contain:
 <ul> − An unordered list. This will list items using plain bullets.
 <ol> − An ordered list. This will use different schemes of numbers to list your items.
 <dl> − A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
1. HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is
created by using HTML <ul> tag. Each item in the list is marked with a bullet.
The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible options:
 <ul type = "square">
 <ul type = "disc">
 <ul type = "circle">
2. HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will
be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for
each successive ordered list element tagged with <li>.
7
3. HTML Definition Lists
HTML supports a list style which is called definition lists where entries are listed like in a dictionary or
encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value
list.
Definition List makes use of following three tags.
 <dl> − Defines the start of the list
 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list
EXERCISE
1. Explain and use following attributes of tables in HTML:
a. Cellpadding and Cellspacing
b. Colspan and Rowspan
c. Table Background
d. Table caption
e. Table Height and Width.
2. Change the Numbering order of list to A, B, C,… and So on.
3. Explain and use <img> tag.

Lab 14 HTML

Uploaded by

Copyright:

Available Formats

Lab 14 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 14 HTML

Uploaded by

Copyright:

Available Formats

Name:___________ Roll No: Score:_

Signature of the Lab Tutor:_______ Date:

Data analysis Ability to

GETTING FAMILIAR WITH BASIC HTML SYNTAX

HTML DOCUMENT STRUCTURE

LINE BREAK TAG

 The Title Attribute

 The Class Attribute

Anything that appears within <b>...</b> element, is displayed in bold.

Anything that appears within <i>...</i> element is displayed in italicized.

Anything that appears within <u>...</u> element, is displayed with underline.

The content of a <sup>...</sup> element is written in superscript.

The content of a <sub>...</sub> element is written in subscript.

HTML comments are placed in between  tags.

1. HTML Unordered Lists

The type Attribute

2. HTML Ordered Lists

You might also like