Scribd
Upload
3 views

HTML (1)

The document provides comprehensive lecture notes on HTML, covering its structure, tags, and usage for creating web pages. It explains various HTML elements such as headings, paragraphs, text formatting, hyperlinks, images, tables, and lists, along with examples for each. Additionally, it outlines the process of creating HTML files and executing them in a web browser.

Uploaded by

Mahaboob basha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML (1)

The document provides comprehensive lecture notes on HTML, covering its structure, tags, and usage for creating web pages. It explains various HTML elements such as headings, paragraphs, text formatting, hyperlinks, images, tables, and lists, along with examples for each. Additionally, it outlines the process of creating HTML files and executing them in a web browser.

Uploaded by

Mahaboob basha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

HTML Lecture Notes TeluguWebGuru

--------------------------------------------------------------------------------------------------------------------------------------

HYPER TEXT MARKUP LANGUAGE

INTRODUCTION

HTML stands for Hyper Text Markup Language. It is used to develop web pages. Markup Languages
contains only tags. Any text between angular brackets is said to be a tag.
For example, <html>, <body> are tags.
<b>Telugu Web guru </b> is said to be element (start tag + content + end tag).
In markup languages maximum tags come as pairs. For each tag there is a starting tag and ending tag.
Ending tag will be same as start tag with prefix /

We will provide extra information to the tags by using attributes.

<body bgcolor="red">……</body>

In above statement, total statement is said to be element and <body> is start tag, </body> is end
tag, bgcolor is attribute.

HTML Program Structure :

<!DOCTYPE html>
<HTML>
<HEAD>
Title information, SEO code, CSS, Script, Meta Information etc., will be in head part
</HEAD>
<BODY>
Main body code of the webpage will be here.
</BODY>
</HTML>

We write the total webpage code within html tag. Head part contains title of the page, style sheet
code, search engine optimization, java script and other meta information. Body part contains the
main code that is to be displayed in webpage.

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------

HOW TO CREATE HTML PROGRAMS ?

We create HTML programs in any text editor like notepad, notepad ++, sublime etc.,.
All html programs must be save with extension .html or .htm
We can save our html programs in any drive or any folder but it must be with the above said
extension.
Steps to create an HTML file
1) Create a new file with the extension .html (for example a file is created with the name
first.html)

2) Open it with any text editor like notepad or notepad++ or any other editor
(just right click the file and select the required editor through open with)

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
3) Type your program
<html>

<head>
<title>My First HTML Program</title>
</head>

<body>
Hello.... Welcome to HTML
</body>

</html>

4) Execute the program by double click on the file or right click on the file and open with any
browser (chrome, firefox etc.,)

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
HEADING TAGS IN HTML

HTML headings are useful to display titles or subtitles on a webpage. HTML headings are defined
with the <h1> to <h6> tags as shown below where h1 displays heading in big font size and h6
displays in small font size.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Example
<html>

<head>
<title>Heading Tags in HTML</title>
</head>

<body>
<h1>Welcome to Telugu Web Guru Channel</h1>
<h2>Welcome to Telugu Web Guru Channel</h2>
<h3>Welcome to Telugu Web Guru Channel</h3>
<h4>Welcome to Telugu Web Guru Channel</h4>
<h5>Welcome to Telugu Web Guru Channel</h5>
<h6>Welcome to Telugu Web Guru Channel</h6>
</body>

</html>
Output :

As shown in above output h1-h6 tags will display headings from big font to small font.

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
PARAGRAPH TAG IN HTML

We can display the total content of our webpage in paragraphs by using <p> tag.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before
and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Above two lines will be displayed as two paragraphs in our webpage.

Example Program:

<html>

<head>
<title>Paragraph Tags in HTML</title>
</head>

<body>
<p>Welcome to Telugu Web Guru Channel</p>
<p>
�ెల�గ� ��బ్ గ�ర� అ�� ��నల్ �ా�మ�ల�్ల మ��య� �నన్ �నన్ పట్ట ణ�లల� ఉనన్ ���య్ర�్థలను,
దు్ర�ి్ట ల� ఉంచుక�� �ా���� ఎం�� ��ంత జ�్ఞ���న్ అం��ంచడం ల� కృ�ి �ేయ����� � మ�ందుక� వ�్చం��.
��తత్ �షయ�లను ��ర�్చక�ం��మ� ఆస��త్ ఉ��న్ క��� స���న ��ర�్చక��� అవ�ాశం ల�� �ా���� ,
ఒక ��ళ ఆ అవ�ాశం ఉ��న్ క��� ����� అ��య్ ఖర�్చ � భ��ంచల�� �ా���� "�ెల�గ� ��బ్ గ�ర�"
ఎప�ప్డూ �� ్ర తస్��ం� త��న ����స్ ��్వ�ా స�యం �ేసత్ ూ�� ఉంట�ం�� .
</p>

</body>

</html>

Output

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
TEXT FORMATTING TAGS IN HTML

We display the text in our webpage in different styles by using text formatting tags. The following are available
text formatting tags that are used to display the text in bold, italic, underlined, deleted, subscript, superscript,
marked text respectively.

Bold : < b > tag or <strong> tag


Italic : < i > tag or < em > tag
Underline : < u > tag
Deleted Text : <del> tag
Subscript : <sub> tag
Superscript : <sup> tag
Marking : <mark> tag

To display text in bold we have <b> tag as well as <strong> tag. If we are displaying bold text just for style
purpose then we use <b> tag. If we are displaying to highlight it among other content semantically then we use
<strong> tag.
To display text in italic we have <i> tag as well as <em> tag. If we are displaying italic text just for style purpose
then we use <i> tag. If we are displaying to highlight it among other content semantically then we use <i> tag.
<u> tag is useful to display underlined text
<del> tag is used to create striked text
<sub> and <sup> are useful in creating subscripts or superscripts
<mark> tag is useful in highlighting the text.

Consider the example below.

Example:

<html>

<head>
<title>Text Formatting Tags in HTML</title>
</head>

<body>

bold tag : <b> Hello </b>


<br/>
Strong tag : <strong> Hello </strong>
<br/>
Italic tag: <i> How are you </i>
<br/>
em tag: <em> How are you </em>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
<br/>
<u> Our Channel is Telugu Web Guru </u>
<br/>
Superscript is : 10 <sup> 2 </sup>
<br/>
Subscript is : 10 <sub> 2 </sub>
<br/>
deleted or striked text: <del>Rs.10000</del> Rs.9700 only
<br/>
Please <mark>Subscribe to our channel</mark> Now.

</body>

</html>

Output :

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
HYPERLINKS IN HTML

Links are found in nearly all web pages. Links allow users to click their way from page to page.

Links can be created by using <a> tag(Anchor Tag).

Click <a href = "" target="" > here </a> to download

In above statement the text “here” will become the link and when you click on it you will be forwarded to the
link that is specified in href attribute.
Target attribute will decide whether the linked page to be opened in current tab or new tab. _self will open in
current tab and _blank will open the target page in new tab.
Example :
Links1.html

<html>

<head>
<title>Hyperlinks in HTML</title>
</head>

<body>

<h1>this is links.html page.</h1>

<h1>
click <a href="links1.html" target="_self">here</a>
to reach to links1.html page
</h1>

</body>

</html>

Links2.html

<html>

<body>

<h1>this is links1.html page. </h1>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------

When we click on the link it will be forwarded to the links1.html page.


Please observe that new page is opened in current tab only.

If we use _blank instead of _self then it will display the target page links1.html in new tab as shown below.

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
INSERTING IMAGES IN A WEBPAGE

Images will improve look and feel of webpages.


To insert images into webpages we will use <img> tag

Syntax is as follows

<img src="url" alt="alternatetext" width="value" height="value" >

Here src indicates complete path of the image. alt is used to provide the alternative text which will be
displayed in case of non-existence of the image.
width and height attributes are used to resize the displayed image in our web page.
Example

<html>

<head>
<title>Images in HTML</title>
</head>

<body>
<img src="small_logo.png" alt="Image Not Found" width="100" height="100">
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
TABLES IN A WEBPAGE

We can insert tables into webpage by using table tag.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is
defined with a <td> tag.

By default, the text in <th> elements are bold and center aligned. By default, the text in <td> elements are
regular and left-aligned.

Example:

<html>

<head>
<title>Tables in HTML</title>
</head>
<body>
<table border="1" width="150" height="150" cellpadding="10" cellspacing="20">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Marks</th>
</tr>

<tr>
<td>1</td>
<td>Santosh</td>
<td>99</td>
</tr>

<tr>
<td>2</td>
<td>Sateesh</td>
<td>87</td>
</tr>

<tr>
<td>3</td>
<td>Shanmukha</td>
<td>78</td>
</tr>

<tr>
<td>4</td>
<td>Balu</td>
<td>77</td>
</tr>

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

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Output

Consider the above example in that table is created by using table tag. Each row is created by <tr> tag and
table headers will be created by <th> and table data will be created by <td>.
border attribute is used to define the thickness of the borders and the table size will be decided by width and
height properties.

Cell Padding & Cell spacing :


cellpadding defines the space between cell border and the content with in the cell (internally).
cellspacing defines the space between one cell to another cell externally.

rowspan & colspan :


we can set spanning of a cell to multiple rows or multiple columns by using rowspan & colspan
respectively.

For example
<td rowspan="1" colspan="2"> indicates this particular cell occupies one row and two columns.

Example :

<html>

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

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
<body>
<table border="1" width="150" height="150" cellpadding="10" cellspacing="20">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td colspan="2">1</td>
<td>Santosh</td>
<td>99</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>Sateesh</td>
<td>87</td>
</tr>
<tr>
<td>3</td>
<td>Shanmukha</td>
<td>78</td>
</tr>
<tr>
<td>4</td>
<td>Balu</td>
<td>77</td>
</tr>
</table>
</body>

</html>

Observe how the cell with value 1 is spanned to two columns and how the cell with value 2 is spanned to
multiple rows.

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
LISTS IN A WEBPAGE

HTML lists allow web developers to display lists in webpage.

There are three types of lists in html

1) Unordered Lists
2) Ordered Lists
3) Definition Lists

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default. We can set square, disk as
bullets by setting type attribute.

Example

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ul>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default. We can use roman numbers, lower alphabets, upper
alphabets etc., as bullets by setting type attribute.

Example

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ol>

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each
term:

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Example

<dl>
<dt>HTML</dt>
<dd>- used to create web pages</dd>

<dt>XML</dt>
<dd>- Use to store and forward data</dd>
</dl>

Above example creates definition lists where dt specifies definition term and dd represents definition
description.

Example Program – Unordered List

<html>

<head>
<title>Lists in HTML</title>
</head>

<body>
<h1>Unordered List.</h1>

Unordered List with disc bullets


<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ul>

Unordered List with circle bullets


<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ul>

Unordered List with square bullets


<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ul>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------

Output:

Example – Ordered Lists

<html>

<head>
<title>Lists in HTML</title>
</head>

<body>
<h1>Ordered List.</h1>

Ordered List with number bullets


<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ol>

Ordered List with lower alphabet bullets


<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ol>

Ordered List with upper alphabet bullets


<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ol>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------

Ordered List with upper roman bullets


<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ol>

Ordered List with lower roman bullets


<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
</ol>

</body>

</html>

Output:

Definition Lists – Example

<html>

<head>
<title>Definition Lists in HTML</title>
</head>

<body>

<h1>Definition List.</h1>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
<dl>
<dt>HTML</dt>
<dd>- used to create web pages</dd>

<dt>XML</dt>
<dd>- used to store and forward data</dd>
</dl>

</body>

</html>

Output :

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
FRAMES IN HTML

We can display multiple web pages in a single web page by using frameset and frame tags. We can
divide our webpage display area into rows and columns by using frameset tags where each cell is called as a
frame. We can fill each frame with a webpage so that we can display multiple web pages at a time.
Example :

Frames.html

<html>

<frameset rows="5%,*,10%">
<frame src="header.html"/>

<frameset cols="50%,*">
<frame src="left.html"/>
<frame src="right.html"/>
</frameset>

<frame src="footer.html"/>

</frameset>

</html>

header.html
<html>

<body>
<h1>Telugu Web Guru</h1>
</body>

</html>

left.html
<html>

<body>
<h1>I am left frame</h1>
</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------

right.html
<html>

<body>
<h1>I am right frame</h1>
</body>

</html>

footer.html
<html>

<body>
<h1>Designed by Telugu Web Guru</h1>
</body>

</html>

Output

Observe the above output where four different web pages (header.html, left.html, right.html, footer.html) are
displayed at a time in a single webpage called (frames.html). In this way we can use frames and frameset tags.
However, using frames is not supported from HTML5 onwards.

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
FORMS IN HTML

We can allow users to interact with our webpage through forms ( login, signup etc.,)
We use form tag to implement it. Syntax is as follows.

<form action = "" method = "" target="">

<form>
Here we will specify the server url in action attribute so that our form data will be sent to that particular
server.
Method attribute with possible values GET/POST decides how to send data to the server. Whether that form
data is to be append to the url (GET) or send form data in hidden way (POST)
How to open action attribute url (in new tab or current tab) will be decided by target attribute. This is same as
target in img tag.

FORM ELEMENTS:
We can get user input from the following form elements.
1) input element (text,password,checkbox,radiobutton, button, hidden,date,email,file)
2) select element
3) textarea element
4) button element

Input Elements:

The HTML <input> element is the most used form element. An <input> element can be displayed in
many ways, depending on the type attribute.

<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 choices)

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

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

Select Element :
We can create choice / combo box with <select> tag. <option> tag is useful to add options to the
choice box.

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
textarea Element :
We can create large input box (textarea) that can accept multiline input from users using <textarea>
tag. rows and cols attributes are used to set the display size of the textarea element.

Button Element :
We can create buttons in our webpage
For form button we need to use
<input type="submit"> and
For other buttons we need to use
<input type="button">

Example:

<html>

<head>
<title>Forms in HTML</title>
</head>

<body>

<form method="POST" action="server_url" target="_blank">


username <input type="text" /><br/><br/>
password <input type="password" /><br/><br/>
hobbies
<input type="checkbox" name="games" value="reading books"> reading books
<input type="checkbox" name="games" value="playing games"> playing games<br/><br/>
gender
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female<br/><br/>
DOB
<input type="date"/><br/><br/>
Email
<input type="text"/><br/><br/>
upload your photo
<input type="file"><br/><br/>
country
<select name="country">
<option value="India">India</option>
<option value="Aus">AUS</option>
<option value="USA">USA</option>
</select><br/><br/>
About Yourself
<textarea rows="5" cols="20"></textarea><br/><br/>

<input type="submit" value="Submit"/>


</form>

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
HTML Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------

</body>

</html>

Output:

--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru

You might also like