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.<=
==============================================================================
