Scribd
Upload
10 views

webLAB

The document provides an overview of basic HTML structure, tags, and attributes, emphasizing the importance of the <html>, <head>, and <body> elements. It details various HTML tags for headings, paragraphs, line breaks, comments, text formatting, links, and images, along with examples. Additionally, it includes sample code for creating a basic web page, a table, and ordered and unordered lists.

Uploaded by

Parikshit Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

webLAB

The document provides an overview of basic HTML structure, tags, and attributes, emphasizing the importance of the <html>, <head>, and <body> elements. It details various HTML tags for headings, paragraphs, line breaks, comments, text formatting, links, and images, along with examples. Additionally, it includes sample code for creating a basic web page, a table, and ordered and unordered lists.

Uploaded by

Parikshit Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

LAB-1

Objective: Write a program implementing basic HTML tags.


Software Used: Visual Studio Code / Chrome Web Browser
Theory
HTML Document Structure
An HTML document starts and ends with <html> and </html> tags. These tags tell the browser that
the entire document is composed in HTML. Inside these two tags, the document is split into 2
sections:
1. The <head>……</head> elements contain information about the document such as title of the
document etc.
2. The <body>…. </body> elements contain the real content of the document that you see on your
screen.
HTML Tags
· HTML tags are used to mark-up HTML elements
· HTML tags are surrounded by the two characters < and >
· The surrounding characters are called angle brackets
· HTML tags normally come in pairs like <b> and </b>
· The first tag in a pair is the start tag, the second tag is the end tag
· The text between the start and end tags is the element content
· HTML tags are not case sensitive, <b> means the same as <B>
Example: <title>Webpage Title</title>
ATTRIBUTES
An attribute is used to define the characteristics of an element and is placed inside the element’s
opening tag. All attributes are made up of 2 parts: a name and a value.
-The name is the property you want to set.
-The value is what you want the value of the property to be.
For Example:
The following tag defines the body element of your HTML page: <body>. With an added bgcolor
attribute, you can tell the browser that the background color of your page should be red, like this:
<body bgcolor="red">
The following tag changes the font of your text and changes the colour of the font to red using the
font
and color attributes: <font face=”arial” color=”red”>
BASIC TAGS
1. HEADINGS: Headings are defined with the <h1> to <h6> tags. <h1> defines the largest
heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line
before and after a heading.
Example:<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
2. PARAGRAPHS: Paragraphs are defined with the <p> tag. HTML automatically adds an
extra blank line before and after a paragraph.
Example:<p>This is a paragraph</p>
<p>This is another paragraph</p>
3. LINE BREAKS: The <br> tag is used when you want to end a line, but don't want to start
a new paragraph. The <br> tag forces a line break wherever you place it. The <br> tag is
an empty tag. It has no closing tag.
Example: <p>This <br> is a paragraph <br> with line breaks</p>
4. Comments in HTML: The comment tag is used to insert a comment in the HTML source
code. A comment will be ignored by the browser. You can use comments to explain your
code, which can help you when you edit the source code at a later date.
Example: <!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.
5. HTML TEXT FORMATTING: HTML defines a lot of elements for formatting output, like
bold or italic text. . Using <strong> and <em> are the tags that will be cross-browser
compatible as browsers move forward to embrace the new standards in HTML (e.g.,
XHTML)

Text Formatting Tags:


Tag Description
<i> </i> Defines italic text
<b> </b> Defines bold text
<u> </u> Defines underlined text
<em> </em> Defines emphasized text ,Renders text italic.
<strong> </strong> Defines strong text. Renders text bold
<center> </center> Defines text center aligned.

6. HTML Links: HTML uses a hyperlink to link to another document on the Web. HTML uses
the <a> (anchor) tag to create a link to another document. An anchor can point to any
resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The <a> tag is used to create an anchor to link from, the href attribute is used to address
the document to link to, and the words between the open and close of the anchor tag will
be displayed as a hyperlink.
Syntax: <a href="url">Text to be displayed</a>
The Target Attribute
With the target attribute, you can define where the linked document will be opened. The line
below will open the document in a new browser window:
<a href="http://www.google.co.in/" target="_blank">Google</a>
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors, we can
create links that can jump directly into a specific section on a page, instead of letting the user
scroll around to find what he/she is looking for. The name attribute is used to create a named
anchor. The name of the anchor can be any text you care to use.
Syntax: <a name="label">Text to be displayed</a>
7. HTML images: With HTML you can display images in a document.
The Image Tag and the src Attribute
Tag Description
In HTML, images are defined with the <img> tag. To display an image on a page, you need to
use the src attribute. Src stands for "source". The value of the src attribute is the URL ofthe
image you want to display on your page.
Syntax: <img src="url">
The Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the

alt attribute is an author-defined text: The "alt" attribute tells the reader what he or she is
missing on a page if the browser can't load images. The browser will then display the alternate text
instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to
improve the display and usefulness of your document for people who have text-only browsers.
Program

Basic page
<html>
<head>
<title>firstlab</title>
</head>
<body>
<body bgcolor="cyan">
<h1 style="text-align:center;font:'times new roman'; font-size:70px "> <u> web tech lab </u></h1>
<p style="text-align:center ;font:'times new roman' ; font-size:50px ; color:grey"> so this is the <u>
<b>first</b> <i>lab</i> </u> for the session<br> <em>In this lab we'll learn how to make a web page
</em> </p>
<center>
<a href="table.html" target="_blank" style="font-size:50px ; color:red">Table</a></center>
<frameset rows = "33%, 34%, 33%">
<frame src="cat.jpeg">
<frame src="table.html">
<frame src="ul.html">
</frameset>
<noframe>
frame cant be displayed
</noframe>
</body>
</html>

Table

<html>
<head>
<title>table</title>
</head>
<body>\
<body bgcolor="grey">
<center>
<table border=1 style="border:dashed red ;class='center">
<caption style="color:cyan ; font-weight:900"> Sem 5 </caption>
<tr style="text-align:center; font-weight:900">
<td> Subjects </td>
<td> Credits </td>
</tr>
<tr style="text-align:center; font-weight:500">
<td>web tech</td>
<td>4</td>
</tr>
</table>
</center>
</body>
</html>
Ordered list

<html>
<head>
<title>table</title>
</head>
<body>
<body bgcolor="yellow">

<h5 style="font:'times new roman'; font-size:40px "> subjects </h5>


<ol style="font:'times new roman'; font-size:25px">
<li>software engineering</li>
<li>web techology </li>
<li>analysis and design of algorithm </li>
<li>organizational behaviour </li>
<li>aptitude and reasoning ability</li>
<li>cognetive skills, leadership and decision making </li>
<li>human values and community outreach </li>
<li>patent drafting for beginners </li>
<li>communicative german </li>
<li>in house practical training </li>
</ol>

</body>
</html>

Unordered list

<html>
<head>
<title>table</title>
</head>
<body>
<body bgcolor="yellow">
<h5 style="font:'times new roman'; font-size:40px "> subjects </h5>
<ul style="font:'times new roman'; font-size:25px">
<li>software engineering</li>
<li>web techology </li>
<li>analysis and design of algorithm </li>
<li>organizational behaviour </li>
<li>aptitude and reasoning ability</li>
<li>cognetive skills, leadership and decision making </li>
<li>human values and community outreach </li>
<li>patent drafting for beginners </li>
<li>communicative german </li>
<li>in house practical training </li>
</ul>
</body>
</html>
LAB-2A
Objective: Write a program implementing different types of lists in HTML.
Software Used: Visual Studio Code / Chrome Web Browser

Theory
HTML LISTS
HTML supports ordered, unordered and definition lists.

You might also like