html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
WEB
WEB
Gr]/CSE
EX.NO: 1
Study on HTML tags
DATE:
AIM:
To study and demonstrate the purpose of HTML tags.
TAGS:
1. Comment tag
Description:
• The comment tag is used to insert comments in the source code.
• Comments are not displayed in the browsers.
• You can use comments to explain your code, which can help you when you edit the
source code at a later date.
• This is especially useful if you have a lot of code.
Syntax:
<!-- statements -->
Eg:
<!-- function display "Hello World!" //-->
2. <!DOCTYPE> tag
Description:
• All HTML documents must start with a <!DOCTYPE> declaration.
• The declaration is not an HTML tag. It is an "information" to the browser about what
document type to expect.
Syntax:
<!DOCTYPE html>
Eg:
<!DOCTYPE html>
<html>
<head>
<title>Study on HTML tags</title>
</head>
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>
</html>
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
3. <html> tag
Description:
• The <html> tag represents the root of an HTML document.
• The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).
Syntax:
<html> … </html>
Eg:
<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML tag tutorial </title>
</head>
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>
</html>
4. <head> tag
Description:
• The <head> element is a container for metadata (data about data) and is placed between
the <html> tag and the <body> tag.
• Metadata is data about the HTML document.
• Metadata is not displayed.
• Metadata typically define the document title, character set, styles, scripts, and other
meta information.
Syntax:
<head> … </head>
Eg:
<head> <title> HTML tag tutorial </title> </head>
5. <body> tag
Description:
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
Syntax:
<body> … </body>
Eg:
<body>
<h1> Paragraph about Village </h1>
<p> The villagers are very simple-hearted people. They know no cunning. They are
pure in their thoughts and actions. </p>
</body>
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
6. <title> tag
Description:
• The <title> tag defines the title of the document.
• The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
• The <title> tag is required in HTML documents!
• The contents of a page title is very important for search engine optimization (SEO).
• The page title is used by search engine algorithms to decide the order when listing pages
in search results.
• The <title> element:
➢ defines a title in the browser toolbar
➢ provides a title for the page when it is added to favourites
➢ displays a title for the page in search-engine results
Syntax:
<title> Title of web page </title>
Eg:
<title> HTML tag tutorial </title>
7. <p> tag
Description:
• The <p> tag defines a paragraph.
• Browsers automatically add a single blank line before and after each <p> element.
Syntax:
<p> Paragraph Contents </p>
Eg:
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>
8. <br> tag
Description:
• The <br> tag inserts a single line break.
• The <br> tag is useful for writing addresses or poems.
• The <br> tag is an empty tag which means that it has no end tag.
Syntax:
<br>
Eg:
<body> <p> The villagers are very simple-hearted people. <br> They know no
cunning. <br> They are pure in their thoughts and actions <br> </p> </body>
9. <a> tag
Description:
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
Syntax:
<a href="website link"> text </a>
Eg:
<a href="https://google.com">To visit Google</a>
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
Eg:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Syntax:
<head>
<link rel="file type" href="filename.extension">
</head>
Eg:
<head>
<link rel="stylesheet" href="styles.css">
</head>
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
Syntax:
<table> … </table>
Eg:
<table>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</table>
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
Eg:
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Eg:
<ol>
<li>Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ol>
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
• The <video> tag contains one or more <source> tags with different video sources. The
browser will choose the first source it supports.
• The text between the <video> and </video> tags will only be displayed in browsers that
do not support the <video> element.
• There are three supported video formats in HTML: MP4, WebM, and OGG.
Syntax:
<video> … </video>
Eg:
<video width="320" height="240" controls>
<source src="Internet of things.mp4" type="video/mp4">
<source src="Artifical Intelligence.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR: Mrs. A. Shanmugapriya AP[Sr. Gr]/CSE
28.<script> tag
Description:
• The <script> tag is used to embed a client-side script (JavaScript).
• The <script> element either contains scripting statements, or it points to an external
script file through the src attribute.
• Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.
Syntax:
<script> … </script>
Eg:
<script>
document.getElementById("demo").innerHTML = "Hello PHP!";
</script>
29.<select> tag
Description:
• The <select> element is used to create a drop-down list.
• The <select> element is most often used in a form, to collect user input.
• The name attribute is needed to reference the form data after the form is submitted (if
you omit the name attribute, no data from the drop-down list will be submitted).
• The id attribute is needed to associate the drop-down list with a label.
• The <option> tags inside the <select> element define the available options in the drop-
down list.
Syntax:
<select> … </select>
RESULT:
Thus, the study on HTML tags has been completed successfully.
HARIHARAN A 71812201054
20CS279-WEB TECHNOLOGIES LABORATORY COURSE INSTRUCTOR :Mrs.A.Shanmugapriya,AP[Sr.Gr]/CSE
LOGESHWARAN S 71812201120