Scribd
Upload
98 views

Practical File - Vikas

The document provides information about HTML (Hypertext Markup Language) and how to structure basic HTML documents and pages. It discusses: 1) What HTML is and how it is used to create web pages and applications using tags to structure and style text. 2) The basic structure of an HTML document includes the <head> and <body> sections. 3) Common HTML tags like <p>, <b>, <i> that format text, along with empty tags like <br> and <img>. 4) How to specify text colors using the <font> tag and set background colors of elements.

Uploaded by

Vikas rawat
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
98 views

Practical File - Vikas

The document provides information about HTML (Hypertext Markup Language) and how to structure basic HTML documents and pages. It discusses: 1) What HTML is and how it is used to create web pages and applications using tags to structure and style text. 2) The basic structure of an HTML document includes the <head> and <body> sections. 3) Common HTML tags like <p>, <b>, <i> that format text, along with empty tags like <br> and <img>. 4) How to specify text colors using the <font> tag and set background colors of elements.

Uploaded by

Vikas rawat
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Practical file

Name : vikas rawat


Subject : computer networking and
internet
Class : BBA 5th semester
Roll no. : 3142210052

Introduction to html

HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.

Markup language: A markup language is a computer language that is used to apply


layout and formatting conventions to a text document. Markup language makes text
more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A Web
page can be of the static or dynamic type. With the help of HTML only, we can create
static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser. An HTML
document is made of many HTML tags and each HTML tag contains different content.

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.
Structure of an html document
An HTML Document is mainly divided into two parts:

 HEAD: This contains the information about the HTML document. For Example,
Title of the page, version of HTML, Meta Data etc.

 BODY: This contains everything you want to display on the Web Page.

HTML Document Structure


Let us now have a look at the basic structure of HTML. That is the code that is a must for every
webpage to have: 
 

HTML
<!DOCTYPE html>

<html>
<head>
<title>

</title>
</head>

<body>

</body>
</html>

Every Webpage must contain this code. Below is the complete explanation of each of the tag
used in the above piece of HTML code:
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version
is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be
used inside the <head> element are: 

 <style>
 <title>
 <base>
 <noscript>
 <script>
 <meta>
<body>: Body tag is used to enclose all the data which a web page has from texts to links. All
the content that you see rendered in the browser is contained within this element.
Html tags
HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)

Container or empty tags


The Container tag is not the same as the empty tag & these are two different categories of tags
used in HTML.
Container tag: This tag contains 3 parts, namely, the opening tag, content that will be displayed
in the browser & the closing tag. If we forget to add the closing tag then the browser will
continue to implement the effect of that opening tag on the content inside of that tag. This will
deform the structure of the overall webpage.
Syntax: <Tag_Name> Content </Tag_Name>
List of commonly used Container Tags:
Root Tags of HTML Document: These are some root elements of every HTML document,
without including these tags in HTML we can not create web pages.
<html></html>: It is the root element of an HTML document that indicates the start & end of
the webpage, along with rendering the content which is inside of it.
<head></head>: This tag contains some abstract information related to the webpage, which is
not directly displayed but utilized to enhance the overall webpage. 
<title></title>: This tag contains the title of the HTML document that is shown in the browser
tab. It is described inside the head tag.
<body></body>: The body tag contains all the data that will be visible on the webpage.
Heading Tags: Heading tags are used to provide headings of different text sizes and styles to
your web page. Heading tags vary from <h1> to <h6>.
Lists: There are 3 different list tags used for listing different items in a particular way, which is
given below:
<ol></ol>: This list tag is used to list the items in a particular order ie., numerical, alphabetical,
or roman numerals. The <li> tag is used to add list items inside of it.
<ul></ul>: This list tag is used to list the items in bulleted form. The shape of the bullet can be
changed to disc, circle & square. It also uses the <li> tag to add list items.
<dl></dl>: This is an definition list tag. It uses <dt> the data term tag and <dd> the data
description tag to add items inside it.
Text Formatters: These tags define the way in which text will be shown on the web page.
<p></p>: This is the paragraph tag used to add text on the webpage.
<b></b>: The bold tag is used to display the boldened text that is important on the web page.
<i></i>: The italic tag display the text in the tilted form.
Empty Tags: Empty tags are the tags that only contain the opening tags, they do not have any
closing tag. Hence they don’t affect the webpage if we forget to close any empty tag.
Syntax:
<Tag_Name>
Here are some empty tags that are generally used in HTML documents:
<input>: This tag is used to take input from users. It is mainly used inside a form tag.
<img>: It is an image tag that is used to insert an image on the web page.
<br>: The break tag is used to break the line and skip to the next line.
<link>: The link tag is used to link the external CSS file to the current HTML document.
<hr>: It is used to insert a horizontal line on the web page whenever needed.
<source>: The source tag is used to insert an external media file to the web page that can be an
Audio or Video file.
<meta>: It stores the meta-information about the web page that is information about data that
we don’t want to show to users on the web page.

Programme of using for color,


background colors and headings
The Color is an attribute of <font> tag, which specifies the text color.

Syntax
<font color="Color_name|rgb_number|hex_number">   

We can specify the text color with the following different attribute values:

o Color_name: This value sets the color of a text by the name of a color.

Example: <font Color="Blue">  

o Rgb_number: This value sets the color of a text by the RGB code.

Example: <font color="rgb(128,128,0)"  

o Hex_number: This value sets the color of a text by the hex code.

Example: <font color="#00FF00">  

HTML Background-color
The <bgcolor> is the attribute to set the background color of an HTML element. This attribute is
used with the following tags:

o <body>
o <table>
o <marquee>
o <td>
o <th>
o <tr>

Syntax
<"tag" bgcolor="Color_name|rgb number|Hex number">  

Examples: The following examples use the <bgcolor> attribute in the different tags.

Example 1: Use the <bgcolor> attribute with the <body> tag

<body  bgcolor="lightblue">…</body>    
<!-- The attribute bgcolor use with the body tag to set the background of web page as l
ightblue -->   
Example 2: Use the <bgcolor> attribute with the <tr> tag
<tr bgcolor="blue">…</tr>  
<!-- The attribute bgcolor use with the 'tr' tag to set the background of table rows by dif
ferent colors -->   
Example 3: The following example use the <bgcolor> attribute with the <marquee> tag.
<marquee bgcolor="orange">…</marquee>    
 <!-- The attribute bgcolor use with the marquee tag to set the background of marquee 
as orange -->   
 

Hyperlink in HTML

Syntax
<a href=“type the path or link> That Text which we want create as link </a>  

Example : <a href="https://www.javatpoint.com/how-to-insert-image-in html"> How to


add a image in Html. </a>

Programme in html for time table


This is the basic Time table created in HTML without the usage of font color and background
colors.
<!DOCTYPE html>
<html>

<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">
<!--<caption>Timetable</caption>-->
<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"
width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>II<br>10:20-11:10</b>
</td>
<td align="center" height="50"
width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50"
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center"
height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LIBRARY
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td colspan="3" align="center"
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>

</html>

Output :
The attributes that can be added to table are:
1. align: Aligns left, right and center.
2. border: Sets the border of a table(table border width)
3. bgcolor: Sets the background color for a cell or whole table.
4. colspan: Sets the number of columns to be spanned.
5. rowspan: Sets the number of columns to be spanned.
6. cellspacing: Creates space between the cells.
7. cellpadding: Creates space within the cells.
8. background: Sets the table background with an image.
9. width: Sets width of the table.
10. height: Sets height of the table.

You might also like