Scribd
Upload
5 views

What is HTML

Uploaded by

shushankdhawaliya4941
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

What is HTML

Uploaded by

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

What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.

Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
 HTML can only create static web pages. For dynamic web pages, other
languages have to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.

A Simple HTML Document


Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>


The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>


<br> none none

Text
Headings in HTML

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>My first paragraph.</p>

</body>
</html>

Setting font style


<html>

<head>

<title>Page Title</title>

</head>

<body>

<b>bold text</b><br>

<i>italics text</i><br>
<strong>This is strong text emphasized</strong><br>

<strike>This is strike through text </strike><br>

<center>This is strong text emphasized in center align</center><br>

<u>This is underlined text</u>

</body>

</html>

Text alignment
<html>

<head>

<title>Page Title</title>

</head>

<body>

<p align = "center">This line is aligned center aligned</p>

<p align = "left">This line is aligned left aligned</p>

<p align = "right">This line is aligned right aligned</p>

</body>

</html>

Another Example

<html>

<head>

<title>Page Title</title>

</head>

<body>

<div align = "center">This line is aligned center aligned</div>


<div align = "left">This line is aligned left aligned</div>

<div align = "right">This line is aligned right aligned</div>

</body>

</html>

HTML - Lists
HTML offers web authors 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.
 <ol> − An ordered list. This will use different schemes of numbers to
list your items.

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like.
By default, it is a disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">

<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

Following is an example where we used <ul type = "disc">

<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

Following is an example where we used <ul type = "circle"

<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

HTML Ordered Lists


If you are required to put your items in a numbered list instead of bulleted,
then HTML ordered list will be used. This list is created by using <ol> tag.
The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.
Tags meaning
<ol> and </ol> Beginning and end of the numbered list.

<li> and </li> Displays the numbered text on separate line.


<ol type="A"> Displays the list in following manner
A.
B.
C.

<ol type="i"> Displays the list in following manner


i.
ii.
iii.

<ol type="1"> 1.
2.
3.

<html>
<body>
<ol type="A">
<li>First </li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li> and so on</li>
</ol>
The list is starting from 5<br>
<ol start="5">
<li>Ice cream</li>
<li>Mango</li>
<li>Juice</li>
<li>Pop Corn</li>
<li> and so on</li>
</ol>
</body>
</html>
Setting the Font
<html>
<head>
<title>Setting the Text </title> </head>
<body>
<font face="arial" size="10">
Varsha is sweet and <br>
Jayashree is very naughty!!<br>
But Sachin is a serious guy<br>
And Harshad seems to be studious.
</body>
</html>

Color
<html>
<head>
<title>Setting the Text </title>
</head>
<body bgcolor =navy>
<font face="arial" size="5" color="blue">
Great people are simple and <br>
<font face="Times new roman" color="red" size="10">
Simple people are great!!!<br>
<font face="GoudyHandtooled BT" color="green" size="12">
Great people rule the world.
</body>
</html>

HTML Links

Links allow users to click their way from page to page.

HTML Links - Hyperlinks


HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
hand.

Note: A link does not have to be text. A link can be an image or any other HTML
element!

HTML Links - Syntax


The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to zeenews.com:

<a href="https://www.zeenews.com/">Visit zeenews.com!</a>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

HTML Links - The target Attribute


By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was


clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

Example
Use target="_blank" to open the linked document in a new browser window or
tab:

<a href="https://www.zeenews.com/" target="_blank">Visit zeenews!


</a>

HTML links can be used to create bookmarks, so that readers can jump to
specific parts of a web page.

Create a Bookmark in HTML


Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the
bookmark.

Example
First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:

Example
<a href="#C4">Jump to Chapter 4</a>

HTML Images Syntax


The HTML <img> tag is used to embed an image in a web 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 is empty, it contains attributes only, and does not have a closing
tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

The src Attribute


The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that gets the
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text are
shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute


The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Image Size - Width and Height


You can use the style attribute to specify the width and height of an image.

Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">

Note: Always specify the width and height of an image. If width and height are
not specified, the web page might flicker while the image loads.

Images in Another Folder


If you have your images in a sub-folder, you must include the folder name in
the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" width=”500”
height=”600”>
Another Example
<img src ="D:/Images_html/panda.jpg" alt="panada" width ="400"
height="500">

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width=”100”
height=”100">
</a>

HTML Image Maps


With HTML image maps, you can create clickable areas on an image.

Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="co
mputer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="pho
ne.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffe
e.htm">
</map>

The Image
The image is inserted using the <img> tag. The only difference from other images
is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Create Image Map


Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by
using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

You must also define some coordinates to be able to place the clickable area
onto the image.

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels
from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:

Now we have enough data to create a clickable rectangular area:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

This is the area that becomes clickable and will send the user to the page
"computer.htm":

Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:

337,300

Then specify the radius of the circle:

44 pixels

Now you have enough data to create a clickable circular area:

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

This is the area that becomes clickable and will send the user to the page
"coffee.htm":
HTML Form
An HTML form is a section of a document which contains controls such as
text fields, password fields, checkboxes, radio buttons, submit button, menus
etc.

An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone
number, etc.

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element


The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on


the type attribute.

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many c


<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Here are some examples:

Text Fields
The <input type="text"> defines a single-line input field for text input.

Example
A form with input fields for text:

<form>
<label >First name:</label><br>
<input type="text" name="fname"><br>
<label> Last name:</label><br>
<input type="text" name="lname">
</form>

The <label> Element


Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focuses on the input element.

HTML Textarea
The HTML <textarea> tag is used to define a multi-line text input control.
It can hold unlimited number of characters and the texts are displayed in a
fixed-width font (usually courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute

checkbox
<input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be
checked or unchecked to select the choices from the given options.

1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
5. <input type="checkbox" name="sport1" value="cricket">Cricket<br>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br>
7. <input type="checkbox" name="sport3" value="football">Football<br
>
8. <input type="checkbox" name="sport4" value="baseball">Baseball<b
r>
9. <input type="checkbox" name="sport5" value="badminton">Badminto
n<br><br>
10. <input type="submit" value="submit">
11. </form>

Value submits the value to the server when submit button will be clicked.

Radio Buttons

1. <form>
2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
7. <input type="submit" value="submit">
8. </form>

Buttons
<input type="submit">:
The <input> element of type "submit" defines a submit button to submit the
form to the server when the "click" event occurs.

<form name="myform" action ="https://www.zeenews.com" method


="POST">

<label>Enter last name</label><br>

<input type="text" name="lastname"><br>

<label> action specifies address where the contents will go</label><br>

<label>Enter first name</label><br>

<input type="text" name="firstname"><br>

<br><input type="submit" value="submit">

<p><strong>Note:</strong>The default maximum cahracter lenght is


20.</p>

</form>

The <input> type "button" defines a simple push button, which can be
programmed to control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:

1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are learning HTML')
">
3. </form>
Reset Button
<input type="reset">
The <input> type "reset" is also defined as a button but when the user
performs a click event, it by default reset the all inputted values.

Example:

1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>

How to Make a Dropdown Menu


1. <Html>
2. <Head>
3. <Title>
4. Make a Drop Down Menu using Html Form
5. </Title>
6. </Head>
7. <Body>
8. This page helps you to understand how to make a dropdown menu in Html d
ocument.
9. <form>
10. <label> Select Cars </label>
11.
12. <div align=”center”>
13. <select>
14. <option value = "BMW"> BMW
15. </option>
16. <option value = "Mercedes"> Mercedes
17. </option>
18. <option value = "Audi"> Audi
19. </option>
20. <option value = "Skoda"> Skoda
21. </option>
22. </select>
23. </div>
24. </form>
25. </Body>
26. </Html>

Sending Form
To send an email using HTML forms, you need to add
the email id to the action attribute of the form. In that,
add email proceeding with mailto:
i.e. mailto:[email protected].
<html>
<body>
<h2>Student Contact Form</h2>
<form action="mailto:[email protected]"
method="post" enctype="text/plain">
Student Name:<br><input type="text"
name="sname"> <br>
Student Subject:<br><input type="text"
name="ssubject"><br>
<input type="submit" value="Send">
</form>
</body>
</html>

HTML – Frames
HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document. A
collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body>
tag. The <frameset> tag defines, how to divide the window into
frames. The rows attribute of <frameset> tag defines horizontal
frames and cols attribute defines vertical frames. Each frame is
indicated by <frame> tag and it defines which HTML document shall
open into the frame.
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">


<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm"
/>
<frame name = "bottom" src =
"/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support
frames.</body>
</noframes>

</frameset>

</html>

Frameset using columns

<html>

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">


<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm"
/>
<frame name = "right" src =
"/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support
frames.</body>
</noframes>
</frameset>

</html>

HTML Table
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.

We can create a table to display data in tabular form, using <table>


element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the page .

<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>
Table with column headings

<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

Table with caption and background image


<html>
<head>
<title>
Colourful table
</title>
</head>
<body>
<center>
<table border=2>
<caption align ="bottom">
<b>Table demo with background color</b>
</caption>
<tr>
<th bgcolor="yellow"> Name</th>
<th bgcolor ="yellow">Marks</th>
</tr>
<tr align ="center"><td bgcolor="red">A</td><td
bgcolor="green">92</td></tr>
<tr align="center"><td bgcolor="green">B</td><td
bgcolor="red">90</td></tr>
<table>
</center>
<br><br>
<center>
<table border="5"
background="///D:/DIMS/WebTech/HTML/Form/rose.jpg">
<caption align="bottom">
<b>Table demo with background image</b>
</caption>
<tr align="center"><th>Name</th><th>Marks</th></tr>
<tr align="center"><td>C</td><td>88</td></tr>
<tr align="center"><td>D</td><td>77</td></tr>

</table>
</center>
</body>
</html>

Cellpadding and Cellspacing Attributes


There are two attributes called cellpadding and cellspacing which
you will use to adjust the white space in your table cells. The
cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the
content within a cell.
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing =
"5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column.

Similar way you will use rowspan if you want to merge two or more rows.

You might also like