HTML

Introduction To HTML
1. HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content.
2. HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard
version was HTML 2.0, published in 1999.27-Sept-2021
3. In HTML Hypertext simply means ”Text within Text”.
4. Markup Language describes how HTML works.
Features Of HTML
5. It is a very easy and simple language. It can be easily understood and modified.
6. It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.
7. It is a markup language, so it provides a flexible way to design web pages along with the text.
Advantages of HTML
8. HTML is Easy to Learn and Use. HTML is very easy to learn and understand. ...
9. HTML is Free. ...
10. HTML is supported by all Browsers. ...
11. HTML is the Most Friendly Search Engine. ...
12. HTML is Simple to Edit. ...
13. HTML can Integrate Easily with Other Languages. ...
14. HTML is Lightweight. ...
15. HTML is Basic of all Programming Languages.
HTML Page Structure
Html Page divide into three main section
1.Comment section
2.Head Section
3.Body Section
Comment Section
Head Section
Body Section
To Creating HTML Document
1. Open Notepad or any Editor write program there
2. Save with html means .html extension
3. Go to folder or file .double click on it program will display on Browser.
In Our College How to open and write program.

4. Click on VMware workstation ICON.
5. Click on Open virtual Machine.
6. Click On Ubuntu click Open .
7. Power on this Virtual Machine.
8. After upload the virtual machine get a prompt for Linux O.S
$ sudo gedit /var/www/html/hello.html
• sudo: command to write in Linux

• gedit :Command to edit/update.
• /var: directory name
• /www: to call browser
• /html: type of file in folder
• hello.html: name of web page ( Password:smj123)
HTML Tags and Attribute:
HTML Tags HTML Elements HTML Attributes

HTML tags are almost like HTML attributes specify various
HTML elements specifies the
keywords where every single general content. additional properties to the
tag has unique meaning. existing HTML element.
1. Basic Html tags:

1 <! DOCTYPE> :
1. This tag is the very first line in the HTML document.
2. It tells the browser what version of HTML the document is written so that the browser knows what to expect.
3. This tag is also commonly referred to as the <!.
4. Declaration must go right at the top of the page.
5. Example :<!DOCTYPE html>
2. <html>……..</html>Tag:
3. HTML tags contain three main parts: opening tag, content and closing tag.
4. But some HTML tags are unclosed tags.
3.<head>…..</head> Tag:
1. The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the
<body> tag.
2. Metadata is data about the HTML document.
3. Metadata typically define the document title, character set, styles, scripts, and other meta information.
4.<title>….</title> Tag :
4. <title> tag is used for declaring the title, or name, of HTML document.
5. It is display in browser title bar.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Studious SYBCA</title>
</head>
<body>
5.<body>……</body>Tag:
6. The <body> tag defines the document's body.
7. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images,
hyperlinks, tables, lists,
8. <body>tag having various attributes.
Attribute Value Description
alink color Specifies color of active documents.
background URL
Specifies a background image.
bgcolor color Specifies background color
link color Specifies the color of unvisited links
text color Specifies the color of text
Simple Example to change background color:

<html>
<head><title>Studious SYBCA</title></head>
<body bgcolor=“red”>
</body>
</html>
2.Text FormattingTags (Working with Text)
The Html hags are used for formatting text are called as text formatting tags.
• <strong> - Important text example :<strong>This text is important!</strong>
• <i> - Italic text example : <i>This text is italic</i>
• <em> - Emphasized text example : <em>This text is emphasized</em>
• <mark> - Marked text example:<p>Do not forget to buy <mark>milk</mark> today.</p>
• <small> - Smaller text example: <small>This is some smaller text.</small>
• <del> - Deleted text example : <p>My favorite color is <del>blue</del> red.</p>
• <ins> - Inserted text example:<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
• <sub> - Subscript text example: <p>This is <sub>subscripted</sub> text.</p>
• <sup> - Superscript text example:<p>This is <sup>superscripted</sup> text.</p>
<b>-Bold text example: <b>This text is bold</b>
• <u>-Underline example:<u>sybca</u>
<pre>Tag:this tag is used for indicating preformatted text.

Exmple : <pre width=“30”>
pre tag display the text with fixed width
</pre>
3.HTML Citation, Quotations and Definition Tags:
1.<abbr>…..</abbr>: To indicate Abbrevation. Example:”WWW”
2.<address>….</address> :This tag defines the contact information for the author/owner of a document.
3.<bdo>:Define the text direction.
<bdo dir=“ ”>……</bdo>
4.<blockquote>:This tag is used for indicating or define a section that is quoted from another source.
5.<q>…</q>:defines a short quotation.
6.<cite>…….</city>:this tag is used for indicating a citation.
7.<dfn>…..</dfn>:used for indicating a definition.
4.Block Level Tags:

Most HTML elements(tags) are defined as block level elements or block level elements or as inline elements.
1.Comment Tag:The HTML <comment> tag allows authors to comment their HTML code. This tag is supported by IE
only.
It is recommended to use  to comment your tags. This tag is compatible to all browsers.
Example:<body>
<comment>This is a commented line in IE</comment>
<!– THIS LINE NOT SHOWING THE BROWSER -->
</body>
2.Heading<h1>to<h6>Tags: Attribute align=“left,center,right,justify”
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading.
Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
3.<p>Tag:
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after each <p> element.
Example:<p>This is some text in a paragraph.</p>
4.<br>Tag:
This tag is used for specifying a line break.This is an emply tag.
example:<br/>
5.<center> Tag: The <center> tag was used in HTML to center-align text.

6.<div>Tag:The <div> tag defines a division or a section in an HTML document.
7.<span>Tag:
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. ..
8.<hr>Tag:
Horizontal rules are used to visually break up sections of a documents.
<hr>tag creates a line from the current position in the document to the right margin and breaks the line
accordingly.
9.<font>Tag:
the<font> tag specifies the font face,font size and font color of text.
5.Working with Hyperlink

<a>Anchor Tag:
1. To make a hyperlink in an HTML page, use the <a> and </a> tags, which are the tags used to define the
links.
2. The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends.
3. Whatever text gets added inside these tags, will work as a hyperlink.
4. Add the URL for the link in the <a href=” ”>.
5. Example:<a href=“default.html”>NEW PAGE</a>
6. <a href=http://www.google.com/>Google</a>
6.Working with Image Tag:
There are 7 types of images in computer
1. JPEG(Joint photographic Experts Group)
2. GIF(Graphic Interchange Format)
3. BMP(Bitmap)
4. PDF(Portable document Format)
5. Targa
6. TIFF(Tagged-Image File Format)
7. PNG(Portable Network Graphics)
<img>Image Tag:
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a
holding space for the referenced image.
The <img> tag has two required attributes:
•src - Specifies the path to the image
•alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Example:
<img src=“dolphine.jpg" alt="Girl in a jacket" width="500" height="600">
**Image Mapping:using<map>…..</map> tag image map in client area.

7. Working with TABLES:
HTML tables can be beneficial in different cases, in which you can arrange data such as texts, lists, links, images, tables within a table, videos,
etc. in the form of rows and columns where each intersection is called the cell.
Table of Contents
# TABLE Tag
# BORDER Attribute of TABLE Tag
# Heading for Table Data
# COLSPAN and ROWSPAN Attribute
# Cell-padding and Cell-spacing Attributes
# Table Background and Border Color
# Nesting of Tables
1. Tables can be created within a web page using the <table> tag.
2. Within it, the <tr>, which is table-row, is used for creating rows of the table.
Again the <td> tag, which is table-data, is used for adding data to cells. Example:
<table border = "1">
<tr> <td>Column1 in Row1</td>
<td>Column2 in Row1</td>
</tr>
<tr> <td>Column1 in Row2</td>
<td>Column2 in Row2</td>
</tr>
</table>
8.Working with List
We can list out our items, subjects or menu in the form of list.
Unordered Lists
Ordered Lists
Description Lists
Tag Description
<ul>…</ul> Defines an unordered list
<ol>…</ol> Defines an ordered list
<li>…</li> Defines a list item
<dl>…</dl> Defines a description list
Unordered List:
1. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
2. The list items will be marked with bullets (small black circles) by default.
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered list:
1. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
2. The list items will be marked with numbers by default.
Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Description Lists:
3. HTML also supports description lists.
4. A description list is a list of terms, with a description of each term.
5. The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
9.Working with Frames
1. Frame: A technique to display multiple documents at once.
2. Frames allow us to split the browser window into multiple windows that display different pages.
3. HTML <frame> tag define the particular area within an HTML file where another HTML web page can be
displayed.
4. A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames, and each
frame can contain different web pages.
You can Make vertical Frame as well as horizontal Frame
Example:
For vertical For Horizontal
<html> <html>
<frameset cols=“50%,30%,20%”> <frameset rows=“50%,30%,20%”>
<frame src=“frame1.html”> <frame src=“frame1.html”>
</frameset> </frameset>
</html> </html>
10.Working with Forms and Form Controls:
<form> Tag:
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements.
Example:
<form>
Input elements
</form>
<input >tag:
1. The <input> tag specifies an input field where the user can enter data.
2. The <input> element is the most important form element.
3. The <input> element can be displayed in several ways, depending on the type attribute.
Tip: Always use the <label> tag to define labels for <input type="text">, <input

type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">
The different input types are as follows:
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
•<input type="tel">
•<input type="text"> (default value)
•<input type="time">
•<input type="url">
•<input type="week">
Example: to print first name and last name
<!DOCTYPE html>
<head>
<title>Concepts of Forms</title>
</head>
<form name=“f1”>
First name:
<input type=“text”name=“txtname”/>
<br>
Last name:
<input type=“text”name=“txtlname”/>
<br>
<input type=“submit”value=“submit”/>
</form>
</html>

HTML

Uploaded by

Document Information

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

HTML

Uploaded by

Copyright:

Available Formats

Introduction To HTML

In Our College How to open and write program.

$ sudo gedit /var/www/html/hello.html

• sudo: command to write in Linux

HTML Tags HTML Elements HTML Attributes

1. Basic Html tags:

Simple Example to change background color:

<pre>Tag:this tag is used for indicating preformatted text.

4.Block Level Tags:

5.<center> Tag: The <center> tag was used in HTML to center-align text.

5.Working with Hyperlink

**Image Mapping:using<map>…..</map> tag image map in client area.

Tip: Always use the <label> tag to define labels for <input type="text">, <input

You might also like