Scribd
Upload
2 views

HTML Notes

HTML, or Hyper Text Mark-up Language, is the primary language used to create webpages, allowing for the integration of text, images, and multimedia. It employs various tags for structuring content, including headings, paragraphs, and lists, as well as attributes for customizing appearance. Additionally, HTML supports images, tables, hyperlinks, and lists, providing a comprehensive framework for web development.

Uploaded by

Shubham Patil
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

HTML Notes

HTML, or Hyper Text Mark-up Language, is the primary language used to create webpages, allowing for the integration of text, images, and multimedia. It employs various tags for structuring content, including headings, paragraphs, and lists, as well as attributes for customizing appearance. Additionally, HTML supports images, tables, hyperlinks, and lists, providing a comprehensive framework for web development.

Uploaded by

Shubham Patil
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML :Hyper Text MArk-up Language

-HTML is the major language of www(world wide web)

-webpages are written in HTML which enables us to bring together the text,images,
videos,links etc all into one place.

-HTML is a mark-up language that does all the structuring and formatting job.

-Hyper :HTML allows non-linear access to information


Anyone can access anything from the worldwide web

-Text :HTML is a simple text

-markup: Here tags are used to mark the information

-language:It is a language

===================================================================================
Steps in writing HTML code:
1)For writing HTML code,we use notepad
2)A web browser like chrome,mozilla,edge

===================================================================================
HTML tags:

Starting a tag-----> <tagname>


closing a tag------> </tagname>

ex: <B> opening a bold tag


</B> Closing a bold tag

Every HTML code should begin with <HTML> tag and ends with </HTML>

1)HTML :This tag identifies that the document is a html document


HTML is not case sensitive

2)<head> :for header information


It consists of one tag called as title tag

3)<title>: To specify the title for the document

4)<body> :whatever we want to display on the webpage everything should be kept


within the body tag.

5)<br> : To go to the next line

5)<I> :Italic tag ------->text appears in Italic

6)<B> :Bold tag --------->text appears in bold.

7)<u> :Underline

8)<p> :paragraph ----->displays data in a paragraph

9)<!--comment--> :for displying the comment


<tagname attribute=value>

10)<body> tag has many attributes like


i)bgcolor :The color to be used for the background.
ii)text: the color to be used for the text in the webpage.
===================================================================================
=
ex: sample web page

<html>
<head>
<title> Sample Webpage </title>
</head>
<body>
<b>Python</b> is a <i>General purpose programming</i><br>
<b><u>Python</u></b> is a <i>high-level language</i><br>
</body>
</html>
===================================================================================
HEADINGS :HTML provides 6tags for headings from h1 to h6.

<h1>bigger heading </h1>


.
.
.
.
<h6>smaller heading </h6>

ex:
<!-- Comments in HTML -->
<html>
<head>
<title> Sample Webpage </title>
</head>
<body bgcolor="red" text="yellow">
<b>Python</b> is a <i>General purpose programming</i><br>
<b><u>Python</u></b> is a <i>high-level language</i><br>
<h1>Python Programming</h1>
<h2>Python Programming</h2>
<h3>Python Programming</h3>
<h4>Python Programming</h4>
<h5>Python Programming</h5>
<h6>Python Programming</h6>
</body>
</html>
===================================================================================
<sub> :for subscript
<sup> :for superscript
<strike>:for striking a word,phrase or a sentence

<!--subscript superscript and strike-->


<html>
<head>
<title> Sample Webpage </title>
</head>
<body bgcolor="red" text="yellow">
<b>Python</b> is a <i>General purpose programming</i><br>
<b><u>Python</u></b> is a <i>high-level language</i><br>
<h1>Python Programming</h1>
<h2>Python Programming</h2>
<h3>Python Programming</h3>
<h4>Python Programming</h4>
<h5>Python Programming</h5>
<h6>Python Programming</h6>

<h1>Python course offer price for summer :<strike>20000</strike> 12000</h1>


<h2>H<sub>2</sub>O is the Chemical name of water </h2>
<h2>pi*r<sup>2</sup> is the area of the circle </h2>
</body>
</html>
===================================================================================
marquee : displaying the text in scrolling form

attributes of marquee tag:


--------------------------
1.behavior:It says how the text in the marquee should move
here we have 3 values
i)scroll : text scrolls across the marquee
means text comes from one side and goes away from the other side.
ex:<h1><marquee bgcolor="green" height=70 behavior="scroll">New Django Batch
Starting from Today.....!!!</marquee></h1>
ii)slide: text enters from one side and stops at the other side.
<h1><marquee bgcolor="green" height=70 behavior="slide">New Django Batch Starting
from Today.....!!!</marquee></h1>
iii)alternate:text comes from oneside to otherside and vic-versa
<h1><marquee bgcolor="green" height=70 behavior="alternate">New Django Batch
Starting from Today.....!!!</marquee></h1>

2.bgcolor: sets background color for the marquee box

3.direction :the direction that the text has to scroll


direction can left,right,up down

4.height: Specifies the height of the marquee


ex: <h1><marquee bgcolor="green" height=300 direction="up"
behavior="alternate">New Django Batch Starting from Today.....!!!</marquee></h1>

5.width: specifies the width of the marquee

6.scroll delay :

<!--marquee-->
<html>
<head>
<title> Sample Webpage </title>
</head>
<body bgcolor="red" text="yellow">

<h1><marquee bgcolor="green" height=70>New Django Batch Starting from


Today.....!!!</marquee></h1>
<b>Python</b> is a <i>General purpose programming</i><br>
<b><u>Python</u></b> is a <i>high-level language</i><br>
<h1>Python Programming</h1>
<h2>Python Programming</h2>
<h3>Python Programming</h3>
<h4>Python Programming</h4>
<h5>Python Programming</h5>
<h6>Python Programming</h6>

<h1>Python course offer price for summer :<strike>20000</strike> 12000</h1>


<h2>H<sub>2</sub>O is the Chemical name of water </h2>
<h2>pi*r<sup>2</sup> is the area of the circle </h2>
</body>
</html>
==============================================================================
<font> :It has attributes such as
1.Size: ranges from +6 to -6
2.color
3.face

<font size="6" color="blue" face="arial">Django Framework </font>

<p> :paragraph tag...displays text in paragraph


<center> displays at center

==============================================================================
HTML Commaon tags

1.HTML images
2.HTML tables
3.HTML Hyperlinks
4.HTML lists
5.HTML forms
6.HTML frames
7.HTML Audio/Video:
===============================================================================
HTML images
-Images increases the visuality of a webpage.
-Images are stored in computer in different formats such as jpg,GIF,BMP

<img> tag is used for inserting images on the webpage

<img> tag has got following attributes:

1.src: for specifying the image path

2.align :for aligning the image on the webpage--


>"top","bottom","left","right","middle

3.border: specifies the width of the border

4.name :specifies the name of the image

5.hspace/vspace :Horizontal spacing/Vertical spacing

6.Height/width.

ex:1 Displaying a image on the webpage


<html>
<body>
<img src="C:\Users\DELL\Pictures\hyderabad.jpg">
</body>
</html>
ex:2 Displaying multiple images on the webpage

<html>
<body>
<img src="C:\Users\DELL\Pictures\hyderabad.jpg">
<img src="C:\Users\DELL\Pictures\hyderabad.jpg">
<img src="C:\Users\DELL\Pictures\hyderabad.jpg">
<img src="C:\Users\DELL\Pictures\hyderabad.jpg">s
</body>
</html>

ex:3 setting image as background to a webpage.


<html>
<body background="C:\Users\DELL\Pictures\hyderabad.jpg">
<h2> Hello Hyderabad!!!!</h2>

</body>
</html>

ex:4 moving a image

<html>
<body>
<marquee>
<img src="C:\Users\DELL\Pictures\hyderabad.jpg">
</marquee>
</body>
</html>

ex:5 Adding border to a image


<html>
<body>
<img src="C:\Users\DELL\Pictures\hyderabad.jpg" border=10>
</body>
</html>

===================================================================================
================================================
HTML Tables:

-A Table consists of continuous rows and columns

-we create tables by using <table>tag

<caption>: for specifying the caption for a table

by default the caption is aligned at the top

ex:
<table>
<caption align="top">table caption </caption>
or
"bottom"

<tr> : Table row ------->for creating a row in the table


<th> : Table header----->for defining headers
<td> : Table data------->for defining data in the table.
attributes of <table> tag:
-------------------------
1.Align: Aligning left/right or center

2.border: To set the width of the border

3.bordercolor

4.cols :specifying the number of columns

5.height

6.width

7.bgcolor :background color for the table

8.background :setting background to a table


==============================================================================
<tr> : table row
The following are the attributes
1)Align------->left/right/center

2)bgcolor

3)bordercolor

4)valign---->vertical alignment of data---->top/middle/bottom

==============================================================================
<th>:table header
The following are the attributes

1)Align------->left/right/center

2)bgcolor

3)bordercolor

4)valign---->vertical alignment of data---->top/middle/bottom

==============================================================================

ex: Horizontal and Vertical headers

<html>
<body bgcolor="red">
<center>
<h1><b><u>Infotech Technologies</u></b></h1>
<table border="20" bordercolor="green" bgcolor="yellow" >
<caption><h3>EMPLOYEE DETAILS</h2></caption>
<tr>
<th>EMPID</th>
<th>EMPNAME</th>
<th>SALARY</th>
</tr>
<tr>
<td>101</td>
<td>Ajay</td>
<td>50000</td>
</tr>
<tr>
<td>102</td>
<td>Rahul</td>
<td>70000</td>
</tr>
<tr>
<td>103</td>
<td>Blake</td>
<td>90000</td>
</tr>
</table>
<br>
<br>

<table border="20" bordercolor="green" bgcolor="yellow" >


<caption><h2>COMPANY DETAILS</h2></caption>
<tr>
<th>COMPANY NAME:</th>
<td> Infotech </td>
</tr>
<tr>
<th>COMPANY CONTACT: </th>
<td>9987654322</td>
</tr>
<tr>
<th>COMPANY ADDRESS:</th>
<td> Hyderabad </td>
</tr>
</table>
------------------------------------------------------------------------------
ex: images within a table

<html>
<body bgcolor="red" text="yellow">
<table border=10 bordercolor="yellow">
<tr>
<td><img src="C:\Users\DELL\Pictures\hyderabad.jpg"></td>
<td><img src="C:\Users\DELL\Pictures\hyderabad.jpg"></td>
</tr>
<tr>
<td><img src="C:\Users\DELL\Pictures\hyderabad.jpg"></td>
<td><img src="C:\Users\DELL\Pictures\hyderabad.jpg"></td>
</tr>
</table>
</html>

==============================================================================
ex: image and table within a table

==============================================================================
Hyperlinks: moving from one page to another page

<a> :anchor tag


It is used to define hyperlinks
anchor tag has a attribute called href

ex:1

<!--anchor1.html-->

<html>
<body bgcolor="yellow" text="red">
<a href="13sample1.html"><b><h2>Click here</b></a> to display the details</h2>
</body>
</html>

<!--sample1.html-->
<html>
<body bgcolor="red" text="yellow">
<h1>Welcome to Django World!!!</h1>
</body>
</html>
------------------------------
ex:2
<html>
<body bgcolor="yellow" text="red">
<a href="https://www.google.com/"><b><h2>Click here</b></a> to open Google</h2>
</body>
</html>
-------------------------------
ex:3
<html>
<body bgcolor="yellow" text="red">
<a href="https://www.python.org/"><b><h2>click here</b></a> to open python
</body>
</html>
--------------------------------
ex:4 Even images can be used as hyperlinks

16fruit.html
<html>
<body>
<img src="C:\Users\DELL\Pictures\fruit.jpg">
</body>
</html>

17flower.html
<html>
<body>
<h2><i>Click the flower to get a fruit</i></h2>
<a href="16fruit.html"><img src="C:\Users\DELL\Pictures\flower.jpg"></a>
</body>
</html>
==============================================================================
HTML Lists:

-Lists refers to record of group of information


ex:
List of names
List of places
List of shopping items
HTML Supports 3 types of Lists

1.Un-ordered lists
2.Ordered lists
3.Nested list (or) Miscellaneous lists

1.Un-ordered lists :They display list of items with markers or bullets

un-ordered list represented using a tag-----><ul>......</ul>

-Here every list item starts with <li> and ends with </li>
ex:
<ul type="circle">...................>circular markers
<ul type="disc"> -------------------->disc markers
<ul type="square">------------------->squared markers

<html>
<body bgcolor="yellow" text="blue">
<ul type="square"><h1>Electronics Products</h1>
<h2>
<li>Sony</li>
<li>Samsung</li>
<li>Lenovo</li>
<li>philips</li>
<li>DEL</li>
</ul>
</body>
</html>
-------------------------------------------------------
2)ordered list : <ol>...........</ol>

-Here we display the data using numbering or leterring i.e using Roman numbers,
capital letters,small letters,numbers etc.

<ol type="value">text to be displayed</ol>


we have many values

1)ol type="I"------>Large Roman numbers


ex.I.
II.
III.
2)ol type="i"------>small Roman numbers
ex: i.
ii.
iii.
3)ol type="A"------>for Capital letters
ex:
A.
B.
C.
4)ol type="a"------>for small letters
ex:
a.
b.
c.

<html>
<head>
<title> City Cable Network</title>
</head>
<body bgcolor="yellow" text="blue">

<ol type="A"><b><u><h1>ENTERTAINMENT CHANNELS</h1></u></b>


<li>SONY TV</li>
<li>ZEE TV </li>
<li>STAR PLUS</li>
<li>COLORS</li>
</ol>

<ol type="I"><b><u><h1>NEWS CHANNELS</h1></u></b>


<li>TV-9</li>
<li>ABN </li>
<li>TV-5</li>
<li>10TV</li>
</ol>

<ol type="1"><b><h1>SPORTS CHANNELS</h1></u></b>


<li>STAR SPORTS</li>
<li>ESPN</li>
<li>TEN SPORTS</li>
<li>SONY SIX</li>
</ol>
</body>
</html>
------------------------------------------------------------------------------
3)Nested list (or) Miscellaneous list : list within a list
ordered list within a un-orderdlist
unorderedlist within a orderedlist

Python Course Content

I.Datatypes
1.Integer
2.float
3.Boolean
4.string
5.complex
II.Operators
a)Arithmetic operators
i.+
ii.-
iii.*
iv./
V.//
vi.%
b)Comparision operators
i.>
ii.<
iii.>=
iv.<=
==============================================================================

You might also like