Lab UNIT-3

UNIT-3
HTML lab activity

HTML
• 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 stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages. HTML was created by
Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 1995.
HTML
• HTML is the primary building block of creating a website. HTML is a
basic markup language and requires memorization of a few dozen
HTML commands that structure the look and layout of a web page.
Before writing any HTML code or designing your first web page, you
must decide on an HTML editor or text editor, such
as Notepad or WordPad.
How to Design a Web Page in HTML?
Creating an HTML document : The first step of creating a <head>

web page is to create an HTML document. An HTML
document can be created in any text editor even on a notepad. <title>My first web page</title>
So any text editor can be used to make an Html file. We just
need to add extension .html /.htm . Let us create the first basic </head>
HTML program.
To create an HTML document follow the following steps: <body>
Step 1: Open your text editor such as Notepad, Sublimetext,
etc. Hello Everyone!
Step 2: Write the code given below in the text editor.
Step 3: Save this file with the .html/.htm extension. </body>
Step 4: Open that file with any browser. The output will be
displayed. </html>
Designing Web Page
• To design a webpage in HTML we need to learn about tags and attributes available in HTML. In
HTML, tags are some instructions that are enclosed in angle braces. With the help of these tags,
we can design a more attractive HTML page. Some of the important tags to be used are as follows:
1. <h1> … </h1> to <h5> … </h5>: These tags are called header tags and they are used to give
heading to your webpage of different sizes.<h1>…</h1> being the Largest Heading to <h5>
…</h5> being the Smallest Heading.
2. Bold Tag (<strong>…</strong> or<b>…</b>): These tags are used to make text look bold.
3. Italic Tag (<i> …</i> or <em>… </em>): These tags are used to make text look italics. The only
difference between <i> and <em > is that <em>semantically emphasis on important text or word
whereas <i> tag is used to make is just used to make text italics.
4. Ordered List ( <ol> … </ol>): The HTML <ol> tag defines an ordered list. An ordered list can
be numerical or alphabetical ., An ordered list starts and ends with a <ol> tag. Each list item starts
with <li> tag. We can use the type attribute to define type of ordered list we need to make:
Basic Tags
Heading Tags 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.
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.
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.
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.
Preserve Sometimes, you want your text to follow the exact format of how it is written in the HTML document.
Formatting In these cases, you can use the preformatted tag <pre>. Any text between the opening <pre> tag and
the closing </pre> tag will preserve the formatting of the source document.
HTML - Attributes
• 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.
• Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation. Core Attributes
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 Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text.
Monospaced Font The content of a <tt>...</tt> element is written in monospaced font. In a monospaced font,
however, each letter has the same width.
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;
Inserted Text Anything that appears within <ins>...</ins> element is displayed as inserted text.
Deleted Text Anything that appears within <del>...</del> element, is displayed as deleted text.
Larger & Small Text The content of the <big>...</big> or<small>...</small> element is displayed one font size larger
or smaller than the rest of the text surrounding.
Grouping Content The <div> and <span> elements allow you to group together several elements to create sections
or subsections of a page.
HTML - Lists
• 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.
• <ul type = "square">
• <ul type = "disc"> (by default)
• <ul type = "circle">
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
• <ol type = "1"> - Default-Case Numerals.
• <ol type = "I"> - Upper-Case Numerals.
• <ol type = "i"> - Lower-Case Numerals.
• <ol type = "A"> - Upper-Case Letters.
• <ol type = "a"> - Lower-Case Letters.
• <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.
Basic HTML: Lab Activity 1
<HTML>
<title> My First Page</title>
<body> "Welcome to the world of HTML"
<h1> My first heading </h1>
<p>My first paragraph</p>
</body>
</HTML>
<HTML>
<title> My Second Page</title>
<body>
<H1> "What is HTML?" </H1>
<p>HTML stands for Hypertext -markup- language.
It is not a programming language it is a markup language used to create webpage.
A markup language have set of mark up tags and HTML uses these tags to describe
webpages. The first version of web pages was written by Tim Berner-Lee in 1995.
Every HTML documents contains HTML tags and plain texts.
</p>
</body>
</HTML>
TEXT FORMATTING: Lab Activity 1
<HTML>
<title> Text Formatting Activity 1 </title>
<body leftmargin="300 px" topmargin="30px">
<hr size="3" color="red">
<h1> HTML Formatting</h1>
<hr size="3" color="red">
<p> It is my<b> third HTML </b> Assignment. I am very excited to learn HTML.
<h2>Introduction to HTML</h2>
<p> HTML Hypertext -markup language is used to create document on the<u> world wide web </u>.
It is simply allocation of certain "Tags" that are helpful in writing the document
to be displayed using browser on internet.
</p>
</body>
</HTML>
Create your Resume using HTML tags
<HTML> </p>
<title> </title> <p> <h3>Computer Skills</h3>
<body leftmargin="300 px" topmargin="30px" bgcolor="lightblue"> <ul>
<hr size="3" color="red"> <li>Python </li>
<h1 align="center"><u> Resume </u></h1> <li>C++</li>
<hr size="3" color="red"> <li>C</li>
<h2>Dr. Shashi Prabha </h2> </ul> </p>
<p align="right"><b>contact <p> <h3>Strenght:</h3>
details:</b><u>+918173000000</u><br>
<ul>
<b> e-mail:</b><i>[email protected]</i></p>
<li>Communication Skill </li>
<h3>Educational Qualification</h3>
<li>Hard work</li>
<ul>
<li>Ready to learn new technology</li>
<li> PhD: Computer Science and Engineering </li>
</ul> </p>
<li> M.Tech: Software Engineering</li>
</body>
<li>B.Tech: Computer Science & Engineering </li>
</HTML>
</ul>
• Prepare the model Test Paper
List in HTML: Lab Activity 1
List in HTML: Lab Activity 1
Nested List: Lab Activity 2
Nested List: Lab Activity 2
Table in HTML: Lab Activity1
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the
text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows,
Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.

Lab UNIT-3

Uploaded by

Copyright:

Available Formats

Lab UNIT-3

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 UNIT-3

Uploaded by

Copyright:

Available Formats

UNIT-3

HTML lab activity

Creating an HTML document : The first step of creating a <head>

You might also like