Scribd
Upload
281 views

HTML CSS Notes Tronix

HTML is the standard markup language used to create web pages. It contains tags that are used to define headings, paragraphs, lists and other elements. Some key HTML tags include <html> as the root tag, <head> for metadata, <title> for the page title, <body> for the visible page content, and <h1>-<h6> for different levels of headings. Attributes provide additional information about elements, and are included in opening tags. Well-formed HTML uses matching opening and closing tags to properly structure content.

Uploaded by

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

HTML CSS Notes Tronix

HTML is the standard markup language used to create web pages. It contains tags that are used to define headings, paragraphs, lists and other elements. Some key HTML tags include <html> as the root tag, <head> for metadata, <title> for the page title, <body> for the visible page content, and <h1>-<h6> for different levels of headings. Attributes provide additional information about elements, and are included in opening tags. Well-formed HTML uses matching opening and closing tags to properly structure content.

Uploaded by

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

HTML:

==> HTML stands for HyperText Markup Language.


==> This is the most basic building block of every
web applicaiton.
==> Without using HTML we cannot build web applications.
==> It is the mandatory technology.
==> It is used , To structure web pages.
i.e. To create web pages

Top IDE's or HTML Editors:


==> HTML Editor is the software used to write html code.
==> A web browser is used to view webpage.
i.e. To run the HTML program .
==> Some Popular code editors are:
pycharm
notepad
notepad++
brackets
sublime text
vim
webstrom
Dreamweaver
Atom, and
Visual Studio Code(vscode) ,...... etc.

==> You can use any one of them.


How to download pycharm:
step-1: To type 'download pycharm' in google chrome.
step-2: click www.jetbrains.com.
step-3: Here pycharm is available 2 of types editions:
a). professional edition:
For both Scientific and Web Python development.
With HTML, CSS,JS, and SQL support.
b). community edition:
For pure Python development

step-4: To click profesional edition.


step-5: After downloading install it.

How to download notepad:


==> Go to google chrome.
==> To download notepad.
==> After downloading install the notepad.
==> click search button
==> click notepad
==> To open a notepad.

strucutre of HTML program:


syntax:
<html>
<head>
-----
-----
-----
</head>

<body>
-----
-----
-----
</body>
</html>

 Every HTML page contains 2 parts:


1. Head part
2. Body part
1. Head part:
===> The head part contains meta data like title of the page,
keywords, all headings ,........etc.
===> css files and javascript files information we have to
specify in the Head part only.

2. Body part:
==> The Body part contains actual content of the web page.

How to run HTML program using notepad:


method-1:
double click on the html file
method-2:
==> right click on the file
==> select 'open with' option
==> select any web browser:
i.e google chrome
1. write a html program
<html>
<head>
<title> HTML course </title>
</head>

<body>
<h1> Welcome to Django frmaework </h1>
<h1> Welcome to My First HTML web page </h1>
<h1> Welcome to Tronix technologies </h1>
</body>
</html>

2. write a html program.


<html>
<head>
<title> kusu </title>
</head>
<body>
<h1> Hi Friends............... </h1>
<h1> Ram </h1>
<h1> Babu </h1>
<h1> sita </h1>
<h1> Laxman </h1>
<h1> kusu srinivasava rao </h1>

</body>
</html>
HTML:
1. HTML stands for Hyper Text Markup Language.
2. It is used to design a website or web application or web page
3. HTML is the combination of Hypertext and Markup Language.
4. Hypertext defines the link between the web pages.
5. Markup language is used to define the text document
within tag which defines the structure of web pages.
6. HTML 5 is the fifth and current version of HTML.
7. It has improved the markup available for documents and
has introduced Application Programming Interfaces(API)
and Document Object Model(DOM).

Html Features::

2. HTML along with CSS and JavaScript are the core parts
of web technologies.
3. HTML is used to create & display content of a website.
This content can be text, headings, media, list ,
tables etc on a web browser.
It is impossible to build a website without html.

4. Html is very easy to learn. HTML contains tags and


attributes used to build a webpage.
5. HTML is browser interpreted language and need no
compilation.
6. To learn web designing, one should starts with HTML first.
HTML includes 140+ tags and attributes to build webpage
layout. which included HTML, CSS and JavaScript.
HTML and CSS are static, while JavaScript is dynamic.
HTML History:
HTML was invented by a CERN scientist Tim Berners-Lee
in 1989. The primary purpose to invent HTML was to share
information on web for Research Scientists and Engineers
so that other professionals in same domain can have access
to your research work.
To run html, a web browser WorldWideWeb was developed,
but later on it was renamed to Nexus

W3C:
W3C is the organisation who build standards for the
development of World Wide Web.
==> W3C was founded by
Tim Berners-Lee in Oct 1994. Tim Berners-Lee is also
the current CEO of W3C.
HTML Versions
HTML was first formed in 1991. Till now, HTML receive many updates.
==> since the early days of the web , there have been many version of HTML.
HTML Version Date
HTML 1 1991
HTML 2 1995
HTML 3 1997
HTML 4 1997
HTML 4.01 1999
XHTML 1.0 2000
XHTML 1.1 2001
HTML5 2014
How to create a website using html:
To build a webpage using html, use following steps.
These steps are based on HTML5 web standards.
Just follow these simple steps, and your first html page
is ready, with W3C Standards.

1. Open any code editor.


2. Create the doctype of webpage. e.g. <!doctype html>
3. Create Parent html tag e.g. <html> </html>
4. Create head tag inside html tag, e.g. <head> </head>
5. Create body tag after head tag closing, e.g. <body> </body>
6. Add title tag inside head, e.g. <title> </title>
7. Add meta tag inside head, e.g. <meta charset="utf-8">
8. Save page as index.html file on your system.
9. Double Click the file and your webpage is live on browser.
10. To edit webpage, right click on html file and
select open in editor.
Create HTML Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Webpage Title</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Hello HTML
In body tag, add some text, for example, Hello HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello HTML</title>
<meta charset="UTF-8">
</head>
<body>
Hello HTML
</body>
</html>

<!DOCTYPE html> — This tag specifies the language


you will write on the page.
In this case, the language is HTML 5.

<meta>
==> This is where information about the document is stored:
character encoding, name (page context), description.

HTML Tags: <h1>


Tags are used to mark up the start of an HTML element
and they are usually enclosed in angle brackets.
ex: <h1>.

Most tags must be opened <h1> and closed </h1> in order


to function.
HTML Attributes:
Attributes contain additional pieces of information.
Attributes take the form of an opening tag and additional
info is placed inside.
ex:
<img src="mydog.jpg" alt="A photo of my dog.">

HTML Tags:
HTML Tags are used to build components in a webpage.
Everything in a webpage is create by HTML Tags.
Here are some popular HTML Tags and their use.

Tag Name Description


<html> HTML Tag is the parent tag of a webpage.
This tag signals that from here on we are going to write in HTML code.

<head> Head Tag is first child of html tag and is used to


write the information for web browsers and Search engines.
<title> Title tag is used only once inside head tag.
Title is always displayed in browsers tab.
Title is also use-use full for search engines to
know about the webpage. Its max character limit is
60-70. Title should be unique for every webpage.
<meta> Meta tag is used to define the charset family,
description, keywords, Author, robots
and Geo Location of the website.
<link> Link tag is used to link external css, favicon
publisher and canonical of the webpage.
<script>Script Tag is used to attach external
javascript, jquery, and AngularJS scripts with
the webpage.
<body> Body tag is used to create the webpage structure.
Structure includes Headings, Paragraphs, images,
tables, division, etc of the webpage.
Body includes all the content which users see
on a website.

Overall, there are 142 Standand Tags in HTML5.


Title:
==> This tag is used to display the title of the web page.
==> by default, title is name of the file.
ex-1:
<head>
<title> Basic HTML for Django classes </title>
<head>
ex-2:
<head>
<title> HTML COURSE </title>
<head>

Heading Tags:
==> These tags are used to display headings on the web page.
==> Normally the headings are 6:
i.e. <h1> , <h2> ,<h3>,<h4>, <h5>, <h6>.
ex:
<html>
<body>
<h1> Welcome to Django course </h1>
<h2> Welcome to Django course </h2>
<h3> Welcome to Django course </h3>
<h4> Welcome to Django course </h4>
<h5> Welcome to Django course </h5>
<h6> Welcome to Django course </h6>
</body>
</html>
Note:
!DOCTYPE html: Defines this document to be HTML5
html: The root element of an HTML page.
head: The element contains meta information about the document.
title: The element specifies a title for the document.
body: The element contains the visible page content.
h1: The element defines a large heading
p: The element defines a paragraph.

paragraph tag: <p>:


==> We can use this tag to represent paragraph of text.
==> A group of lines is called a paragraph.

ex-1:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first paragraph </p>
</body>
</html>
ex-2:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first line
This is second line
This is third line
This is forth line
</p>
</body>
</html>

note:
The total data will come in a single line.
because we are using only one paragraph tag.

ex-3:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first line </p>
<p> This is second line </p>
<p> This is third line </p>
<p> This is forth line </p>
</body>
</html>
Note:Total data will come in 4 lines.
ex-4:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first line</p><p> This is second line </p><p> This is third line </p>
</body>
</html>
Note:
In HTML document indentation is not importatn
but tags are important.
ex-5:
<body>
<h1> Django : </h1>
<p> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database .
</p>
<h1> python : </h1>
<p> python is a high level programming lanauges
python is a dynamically typed programming lanauges
</p>
</body>
HTML Lists:
==> These lists are used to display
the content in the proper order.
==> There are 3 types of HTML Lists.
1. ordered lists.
2. unordered lists
3. Description List

1. ordered lists:
==> All list items will be displayed with numbers.
==> <ol> tag represents ordered list.
==> <li> tag rerpresents list of items.
ex-1:
<html>
<head>
<h1> Demo for Ordered Lists </h1>
</head>
<body>
<ol>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="1">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="A">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="a">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="I">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="i">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
</body>
</html>
2. Unodered Lists:
==> Instead of numbers, bullet symbol will come.
==> Here order is not important.
==> <ul> tag represents unordered list.
==> <li> tag represents list of items.
ex:
<html>
<head>
<h1> Demo for UnOrdered Lists </h1>
</head>
<body>
<ul>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:disc">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:circle">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:square">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:none">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
</body>
</html>

write a html program to print content with numbers:


<html>
<head>
<h1> Demo for Ordered Lists </h1>
</head>
<body>
<ol>
<li> Chicken </li>
<li> Mutton </li>
<li> Fish </li>
</ol>
</body>
</html>
HTML Description List or Definition List:
HTML Description list is also a list style which is supported by
HTML5 and XHTML.
It is also known as definition list where entries are listed
like a dictionary or encyclopedia.
The definition list is very appropriate when you want to
present glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list. i.e description List
2. <dt> tag defines a term. description term
3. <dd> tag defines the term definition (description data).

dl --> descr
dt --> term
dd --> data
ex-1:
<dl>
<dt> Python </dt>
<dd> - It is a high level programming langauge </dd>
<dd> - It is a oop programming langauge </dd>
<dd> - It is a pop programming langauge </dd>
<dd> - It is a Dynamic programming langauge </dd>
<dd> - It is a interper programming langauge </dd>
</dl>
ex-2:
<dl>
<dt>Biryani's</dt>
<dd>- Chicken </dd>
<dd>- Mutton </dd>
<dd>- Egg </dd>
<dd>- Vegetables </dd>

<dt>Beer's</dt>
<dd>- Budweiser </dd>
<dd>- KF </dd>
<dd>- elepheant </dd>
<dd>- Tin beers </dd>
</dl>
ex-3:
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
<dt>python</dt>
<dd>-It is a popular programming langauge.</dd>
<dt>Django</dt>
<dd>-It is a Web Frame Work .</dd>

</dl>

3. Nested Lists:
==> We can take list inside another list,
which are nothing but nested lists.
ex:
<body>
<ol>
<li> Chicken </li>
<ul>
<li> chicken 65 </li>
<li> chicken Fry </li>
<li> chicken drumstrik </li>
</ul>
<li> Mutton </li>
<li> Fish </li>
<li> Beer </li>
<ul>
<li> KF </li>
<li> KO </li>
<li> RC </li>
</ul>
</ol>
</body>
</html>

anchor tag<a>:
==> This tag is used to display the hyper links.
==> whenever u are clicked this anchor, then
the control goes to the corresponding web page.
==> It is used to mainly, to move from
one web page into another web page.

syntax:
<a href="path/filename"> message </a>
Here,
a is called anchor tag
href means hyperlink reference.
ex-1:
<html>
<a href ="https://facebook.com">FaceBook</a> <br><br>
<a href ="https://google.com"> Google</a> <br><br>
<a href ="https://tronixtechs.com"> Tronix Technologies </a> <br><br>

</html>
Note:
The anchor tag <a> works as a link in a webpage.
we can also set the color of the link by specifying the
hexadecimal value or color name.
there are 4 link states names:
a:link;
a:visited;
a:hover;
a:active
which can be used as per the requirement.
if we want to 'change the color of the link' only
when it hovers, we can use a:hover state and
define the color.
Also, the link should be provided right after the
keywords for better understanding.

<br> tag:
==> This tag is used to break the current line
and the control move the next line.
==> syntax:
<br>
ex: <br>
write a html program to transfer the web pages
from one page to another page using anchor tag:
step-1: first.html:
<html>
<h1> WELCOME TO FIRST WEB PAGE </h1>
<a href="second.html"> Click Here to go Second page</a> <br><br>
<a href="third.html"> Click Here to go Third page</a> <br><br>
<a href ="https://facebook.com">FaceBook</a> <br><br>
<a href ="https://google.com"> Google</a> <br><br>
<a href ="https://youtube.com"> Youtube </a>
</html>

step-2: second.html:
<html>
<h1> WELCOME TO SECOND WEB PAGE </h1>
<a href="first.html"> Click Here to go First page</a> <br><br>
<a href="third.html"> Click Here to go Third page</a> <br><br>
</html>

step-3: third.html:
<html>
<h1> WELCOME TO THIRD WEB PAGE </h1>
<a href="first.html"> Click Here to go First page</a> <br><br>
<a href="second.html"> Click Here to go Second page</a> <br><br>
</html>
Note:
In the anchor tag ,
if file the available in the another folder, then
we will provide the entire path.
ex:
<a href="d:/srinivas/hello.html"> Click Here to go Second page</a> <br><br>

step-4: display.html:
<h1> welcome to Home Page </h1>
<a href = "first.html"> First Page </a> <br> <br>
<a href = "second.html"> Second Page </a> <br> <br>
<a href = "third.html"> Third Page </a> <br><br>

ex:
<a href ="https://facebook.com"> Facebook </a> <br><br>
<a href ="https://youtube.com"> Youtube</a> <br><br>
<a href ="https://tronixtechs.com"> Tronix technologies </a> <br><br>
<a href ="https://amazon.in"> Amazon </a> <br><br>
<a href ="https://google.com"> Google</a> <br><br>

<img> tag:
==> This <img> tag is used to insert the images
in the html page.
==> syntax:
<img src="filename" alt="message">
Here,
==> img means it is a image attrubite
==> src means source where we have to specify the
image source(complete location).
==> we can take image address from the google also.
==> alt means alternative.
if the image is not available then,
to display the alternative message.
ex-1:
<html>
<img src="ab.jpg" alt="OOPS Image is missing"
</html>

Note:
we have to open the tag and we are not responsible to close
the tab, such type of tags are called self closing tags.
ex: <img> tag.

ex-2:
<p>This is some text. <img src="ab.jpg" alt="Smiley face" width="42"
height="42" style="float:right">This is some text.
This is some text. This is some text. </p>

ex-3:
<!DOCTYPE html>
<html>
<body>

<h1>Align image with CSS</h1>

<h2>vertical-align: bottom</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:bottom"> This is some text. This is some text. This is some text.</p>
<h2>vertical-align: middle</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:middle"> This is some text. This is some text. This is some text.</p>

<h2>vertical-align: top</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:top"> This is some text. This is some text. This is some text.</p>

<h2>float: right</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="float:right">This is some text. This is some text. This is some text.</p>

<h2>float: left</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="float:left">This is some text. This is some text. This is some text.</p>

</body>
</html>

<sub> tag:
The <sub> tag defines subscript text.
The sub script appears half a character below the
normal line and is sometimes reendered in a smaller font.
subscript text can be used for
chemical formulas
ex: H2SO4, h2O
write a html program demo for sub script tag.
<html>
<h1> sub script demo </h1> <br><br>
<h2> The chemical formula is :</h2>
H<sub>2 </sub>SO<sub>4</sub> <br><br>
H<sub>2</sub>O <br><br>
H<sub>4</sub>p<sub>13</sub>
</html>

<sup> tag:
The sup> tag defines the superscripted text.
the supscript appears half a charactrer above the normal line
ex : x2 , y2 , z2
write a html program demo for super script
<html>
<h1> super script Demo: </h1> <br>
<h2> The Mathematical formula is :</h2> <br>
(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> +2ab
</html>

write a html program for super script tag.


<html>
<h1> super script Demo: </h1> <br>
<h2> The Mathematical formula is :</h2> <br>
(a<sup>3</sup>)<sup>2</sup>
</html>

Table creation:
==> HTML tables allow web developers to arrange data
into rows and columns.
i.e. table means collections of rows and columns
==> The <table> tag defines an HTML table.
==> Each table row is defined with <tr> tag.
==> Each table header is defined withh a <th> tag.
==> Each table data/cell is defined with a tag </td> tag
==> The <caption> tag is used to display the title
of the table.
==> by default, the text in <th> elements are in bold and centered.
==> by default, the table data elements are appear regular font
and left-alignment.
ex: EMPNO ENAME SAL
101 ram 56000
102 laxman 99000
103 sita 88000
104 venakt 55000

write a html program to create a table name and age of the person:
<table border="1">
<thead>
<th> NAME </th>
<th> AGE </th>
<th> CITY </th>
</thead>
<tr>
<td> yawanth</td>
<td> 23 </td>
<td> vijayawada </td>
</tr>
<tr>
<td> Babu</td>
<td> 22 </td>
<td> Guntur </td>
</tr>
<tr>
<td> pavan</td>
<td> 20 </td>
<td> kodad </td>
</tr>
<tr>
<td> kusu srinvias</td>
<td>45</td>
<td> HYDERABAD </td>
</tr>
</table>

write a table with employees information with


empno,name and salary

<html>
<body bgcolor="red">
<table border="1" bgcolor="blue">
<caption> Tronix Technologies Employees Information </capiton>
<thead>
<th>EMPLOYEE NUMBER</th>
<th>EMPLOYEE NAME</th>
<th>SALARY</th>
</thead>
<tr>
<td>101</td>
<td>ram</td>
<td>56000</td>
</tr>
<tr>
<td>102</td>
<td>Laxman</td>
<td>99000</td>
</tr>
<tr>
<td>103</td>
<td>sita</td>
<td>56000</td>
</tr>
<tr>
<td>104</td>
<td>bharat</td>
<td>99000</td>
</tr>
<tr>
<td>105</td>
<td>venakt</td>
<td>56000</td>
</tr>
<tr>
<td>106</td>
<td>Siva</td>
<td>99000</td>
</tr>

</table>
</body>
</html>
pracitse programs(Mini project):

write a html program to create a table with fields


sno,Name of the actor, pic, category, National flag,profile.

Ascar Awards winners list 2022

sno Name of the actor pic category country Flag profile

1. amitab bachan cinema India

2. kcr political india


Creation of HTML Forms:
==> As the part of web application development,
we have to develop several forms like
login form, registration form, adminssion form,enquiry form....etc.
==> These forms are used to collect the data from end user.
==> HTML Forms are required when you want to collect some
data from the site visitor.
==> The HTML <form> tag is used to create an
HTML form and it has following syntax:
<form action="script URL" method="GET/POST">
-----
-----
-----
</form>
==> action attribute specifies backend script ready to
process your data.
==> method represent to upload data.
the most frequently used are GET and POST methods.

==> The <input> tag will play very important role


in the form creation.
==> The syntax of input tag is
<input type=" " name="" value=" " placeholder = " ">
==> type attribute can be used to specify the type of input end user
has to provide .
The main important types are:
text
textarea
password
number
email
submit
reset
checkbox
radiobutton
selectbox
date
time
file,.....

==> name attribute represents the name of the input tag.


By using this name, in the next target page we can access
end user provided input value.
==> value attribute represents the default value will
be displayed in the form.
1. text input:
==> It is used to enter text information only.
==> To enter only one line.

ex: write a html program to enter first name and last name
<html>
<h1> Employee Infomation </h1>
<form>
Enter First Name: <input type="text"> <br> <br>
Enter Second Name: <input type="text">
</form>
</html>
2. textarea:
==> This is used to when the user is required to give
details that may be longer than a single sentence.
==> Multi-line input controls are created by using the
HTML <textarea> tag.

==> It is used to enter text information but multiple lines.


==> syntax is
<textarea rows=" " cols=" " name=" ">
----
</textarea>
==> rows indicates the number of rows of text area box
==> cols indicates the number of columns of text area box.
==> name used to give a nae to the control which is sent to the
server to be recognized and the get the value.
write a html program demo for text area:
<html>
<h1> Multiple Lines Text Input Controls </h1>
<form>
Enter First Name: <input type="text"> <br> <br>
Enter Second Name: <input type="text"> <br> <br>
Enter Address : <br>
<textarea rows="8" cols="30" name="address ">
</textarea>
</form>
</html>

3. password:
==> This also single line text input but is masks the
character as soon as a user enters it.
==> They are also created using HTML <input> tag
but type attribute is set to password.
write a html program to create a login page.
<html>
<h1> LOGIN PAGE </h1>
<form>
Enter User Name: <input type="text"> <br> <br>
Enter Password: <input type="password">
</form>
</html>
4. number type:
==> This input type is used to enter digits only.
we cannot enter alphabets and special specials.
==> syntax:
<input type="number">

ex: write a html program demo for number type.


<html>
<h1> PERSON DETAILS: </h1>
<form>
Enter Person Name: <input type="text"> <br> <br>
Enter Age: <input type="number"> <br> <br>
Enter phone Number: <input type="number">

</form>
</html>

creation of labels for HTML elements:


==> we can define label text for our HTML elements
like text box,radiobuttons,textarea,...by using
<label> tag.
syntax:
<label for="name"> any text </label>
ex-1: <label> Enter your name: </label>
ex-2: <label> Enter your age: </label>
write a html program demo for label tag.
<html>
<h1> LOGIN PAGE </h1>
<form>
<label> Enter User Name: </label> <br>
<input type="text"> <br> <br>
<label> Enter Password: </label> <br>
<input type="password">
</form>
</html>
4. number type:
==> This input type is used to enter digits only.
we cannot enter alphabets and special specials.
==> syntax:
<input type="number">

ex: write a html program demo for number type.


<html>
<h1> PERSON DETAILS: </h1>
<form>
Enter Person Name: <input type="text"> <br> <br>
Enter Age: <input type="number"> <br> <br>
Enter phone Number: <input type="number">

</form>
</html>
5. email:
==> This input type is used to enter emails only.
==> syntax:
<input type="email>
ex: write a html program demo for email type.
<html>
<h1> PERSON DETAILS: </h1>
<form>
Enter Person Name: <input type="text"> <br> <br>
Enter Age: <input type="number"> <br> <br>
Enter email: <input type="email">
<input type="submit">
</form>
</html>
6. submit button:
==> There are various ways in HMTL to create clickable
buttons. you can also create by clickble by using
<input> tag.
==> The submit button is used to automatically submits a form.
ex:
<html>
<h1> PERSON DETAILS: </h1>
<form>
Enter Person Name: <input type="text"> <br> <br>
Enter Age: <input type="number"> <br> <br>
Enter email: <input type="email"> <br><br>
<input type="submit" value="submit person data">
</form>
</html>
7. reset button:
==> This creates a button that automatically
resets form controls to their initial values.
ex:
<html>
<h1> EMPLOYEE DETAILS </h1>
<form>
Enter Employee Name : <input type="text" value="kusu srinvias" > <br> <br>
Enter Company Name : <input type="text" value="Infosys"> <br> <br>
Enter Country Name : <input type="text" value="India"> <br> <br>
<input type="submit" value="submit employee data"> <br>
<input type="reset" value="Reset"> <br>
</form>
</html>
8. checkbox:
==> checkboxes are used when morethan one option is required to be selected.
==> They are also created by using HTML <input> tag
but type attribute is set to checkbox.
==> syntax:
<input type ="checkbox">
ex-1:
<html>
<h1> EMPLOYEE DETAILS </h1>
<form>
Enter Employee Name : <input type="text"> <br> <br>
Enter employee Gender :
<input type="checkbox"> Male
<input type="checkbox"> Female <br><br>
<input type="submit" value="submit employee data"> <br>
</form>
</html>

ex-2:
<html>
<h1> Enter Student DETAILS </h1>
<form>
Enter Hall ticket Number: <input type="number"> <br> <br>
Enter Student Name : <input type="text"> <br> <br>

Select student Gender : <input type="checkbox"> Male


<input type="checkbox"> Female <br><br>

Select Group :<input type="checkbox"> MPC


<input type="checkbox"> BiPC
<input type="checkbox"> CEC
<input type="checkbox"> MEC <br><br>
<input type="submit" value="submit employee data"> <br>

</form>
</html>
write a html program demo for check box:
<html>
<h2> Choose Your Known Languages: </h2>
<input type="checkbox"> Telugu <br>
<input type="checkbox"> English <br>
<input type="checkbox"> Hindi <br>
<input type="checkbox"> Tamil <br>
<input type="checkbox"> Japanees <br>
</form>
</html>

ex-4:
I know the following programming Languages <br><br>
<input type="checkbox"> python <br><br>
<input type="checkbox"> C <br><br>
<input type="checkbox"> C++ <br><br>
<input type="checkbox"> java <br><br>
<input type="checkbox"> go <br><br>
<input type="checkbox"> perl <br><br>

Radio buttons:
==> The radio buttons are mainly used to, when out of many
options, just one option is required to be selected.
==> They are also created by using HTML <input> tag
but the type attribute is set to radio.
ex-1:
<html>
<h2> Choose Your Martial status: </h2>
<form>
<input type="radio" name="gender" > Male <br>
<input type="radio" name="gender" > Female <br>
<input type="radio" name="gender" > Transgender <br>
</form>
</html>

ex-2:
<html>
<h1> Enter Employee Details </h1>
<form>
Enter Employee Id: <input type="number"> <br><br>
Employee Nane: <input type="text"> <br><br>
Employee Gender: <br>
<input type="radio" name="gender" > Male <br>
<input type="radio" name="gender" > Female <br>
<input type="radio" name="gender" > Transgender <br>

Employee Department: <br>


<input type="radio" name="dept" > Commputer Section <br>
<input type="radio" name="dept" > Mechaical <br>
<input type="radio" name="dept" > Electrical <br>
</form>
</html>
ex-3:
<form>
I Know the following programming Languages: <br>
<input type="radio" name="pl"> python <br>
<input type="radio" name="pl"> c <br>
<input type="radio" name="pl"> C++ <br>
<input type="radio" name="pl"> java <br><br>

I Know the following programming Indian Languages: <br>


<input type="radio" name="il"> English <br>
<input type="radio" name="il"> Telugu <br>
<input type="radio" name="il"> Tamil <br>
<input type="radio" name="il"> Urdu <br><br>
</form>
select box or dropdown box:
==> A select box also called dropdown box which provides
option to list down various options in the form of
drop down list.
==> where a user can select any one option out of
list of values.
ex-1:
<html>
<h2> Please select your payment Mode: </h2>
<form>
<select name="pmode">
<option value="ccard"> Credit Card</option>
<option value="ccard"> Debit Card</option>
<option value="ccard"> PayPal </option>
<option value="ccard"> Online Transfer </option>
</select>
</form>
</html>

ex-2:
<html>
<h2> Please select your Course: </h2>
<select name="pmode">
<option value="course"> CSE </option>
<option value="course"> IT </option>
<option value="course"> EEE </option>
<option value="course"> Mechanical </option>
<option value="course"> ML </option>
<option value="course"> DataScience </option>
</select>
</form>
</html>

ex-4:
<html>
<h2> Please select your state: </h2>
<select name="pmode">
<option value="st"> Andhra pradesh </option>
<option value="st"> Telangana </option>
<option value="st"> MP </option>
<option value="st"> UP </option>
<option value="st"> Delhi </option>
<option value="st"> Panjab </option>
<option value="st"> Maharastra </option>
<option value="st"> Bihar </option>
<option value="st"> Orissa </option>
</select>
</form>
</html>

file type:
ex-1:
<html>
<input type="file" >
</html>

date type:
ex-1:
<html>
<input type="date" >
</html>

time type:
ex-1:
<html>
<input type="time" >
</html>
1. write a html program using action attribute
demo.html:
<form action="first.html">
Enter hall ticket Number <input type="number"><br><br>
Enter student Name <input type="text"><br><br>
Enter first subject marks <input type="number"><br><br>
Enter second subject marks <input type="number"><br><br>
Enter third subject marks <input type="number"><br><br>
<input type="submit" value="Submit">
</form>

first.html:
<h1> Data saved Successfully </h1>
<h2> Thank u </h2>

2. write a html program using action attribute


demo.html

<h1> <u> LOGIN PAGE </u> </h1>

<form action="first.html">
Enter User Name <input type="text"><br><br>
Enter password <input type="password"><br><br>

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


</form>
first.html
<h1> Login successfully </h1>
<h1> Thank U </h1>

3. write a pprogram using form and table tag


<h3> Employee Details </h3>
<form >
<table>
<tr>
<td>Enter Employee number </td>
<td> <input type="number"> </td>
</tr>

<tr>
<td>Enter Employee name </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Enter Employee salary </td>
<td> <input type="number"> </td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
4. write a html program to create a html registration form
<!DOCTYPE html>
<html>
<head></head>
<body bgcolor="gold" font-color="red">

<table border='0' width='480px' cellpadding='0' cellspacing='0' align='center'>


<center><tr>
<td><h1>Registration Form For Sports</h1></td>
</tr><center>

<table border='0' width='480px' cellpadding='0' cellspacing='0' align='center'>


<tr>
<td align='center'>Name:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Sur Name:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Date Of Birth:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Address:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Phone:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Email:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
<td align='center'>Zip:</td>
<td><input type='text' name='zip'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<table border='0' cellpadding='0' cellspacing='0' width='480px' align='center'>
<tr>
<td align='center'><input type='submit' name='REGISTER' value="register"></td>
</tr>
</table>
</table>

</table>
</body>
</html>
HTML <address> Tag

The <address> tag in HTML indicates the contact information


of a person or an organization.
If <address> tag is used inside the <body> tag then
it represents the contact information of the document and
if the <address> tag is used inside the <article> tag,
then it represents the contact information of the article.
The text inside the <address> tag will display in italic format.
Some browsers add a line break before and
after the address element.

Syntax:

<address> complege addresss </address>


Ex:

<!DOCTYPE html>
<html>
<body>

<!-- address tag starts from here -->


<address>
Organization Name: Tronix Technologies <br>
Web Site:
<a href=
"https://www.tronixtechs.com/">
Tronix Technologies </a><br>
visit us:<br>
Tronix Technologies <br>
H.NO: MIG-46/A, Pranav Plaza, <br>
5th Floor Above Prodigy Computers & Laptops <br>
Near JNTU Signal, ICICI Bank Back Lane Dharma Reddy Colony<br>
KPHB Colony, Kukatpally,<br>
Hyderabad.
Telangana-500085.
</address>
<!-- address tag ends here -->

</body>
</html>

HTML 5 <progress> Tag


It is used to represent the progress of a task.
It is also defined how much work is done and how much is
left to download a thing.
It is not used to represent the disk space or relevant query.
Syntax:
<progress attributes...> </progress>

Attributes: The <progress> tag consists of two attributes


which are listed below:

max: It represents the total work is to be done for completing a task.


value: It represents the amount of work is already completed.
Note: This tag is used in conjunction with JavaScript
to display the progress of a task.

Ex:
<!DOCTYPE html>

<html>

<body>
<h1>Tronix Technologies/h1>
Downloading progress for a song:
<!--HTML progress tag starts here-->
<progress value="57" max="100">
</progress>
<!--HTML progress tag ends here-->
</body>

</html>
HTML <mark> Tag

1
The <mark> tag in HTML is used to define the marked text.
It is used to highlight the part of the text in a paragraph.
The <mark> tag is new in HTML 5.

Syntax:
<mark> Contents... </mark>
Example 1: This example uses <mark> tag to highlight the text. By default, <mark> tag
highlight the text content in yellow color.
<!DOCTYPE html>
<html>

<body>
<h1 style="color: green;"> Tronix Technologies </h1>

<h2>HTML mark Tag</h2>

<p>
<mark> Tronix Technologies :</mark> It is a
<mark> python Full stack </mark> Developer
</p>

</body>

</html>
Output:

Example 2: This example uses <mark> tag with CSS property


to change the marked content color and other property.
<!DOCTYPE html>
<html>

<body>
<h1>Tronix Technologies</h1>

<h2> HTML mark Tag</h2>


<p>
<mark>Tronix Technologies </mark> It is a
<mark style="background-color: green; color: white;">
computer science
</mark> python developers
</p>

</body>
</html>

===> statemengts are 2 types:


1. executable statements
2. non-executable statements

1. executable statements:
These statements are executed while program running.

2. non- executable statements:


==> These statements are not executed while program running.
==> It is also called comments.
==> The comments are 2 types:
1. single line comments
2. mult-line comments
1. single line comments:
==> A commnet written in only one line.
==> It is called single line comments.
2. multi- line comments:
==> A commnet written in morethan one line.
==> It is called multi-line comments.
HTML Comments:
HTML Comments are used to write messages or notifications
for web developers.
Comments are started with <!-- and ends with -->.
These comments are not visible in browsers, but remain in
page source code.
<!-- HTML Comment -->
ex:
<!DOCTYPE html>
<html>
<body>
<!-- this HTML program is used to demonstrate the
header tags and itatlic tag -->

<h1>python is a high level language</h1>


<h2><b><i>it is a interpreter</i></b></h2>
</body>
</html>
write a html programm demo for p,i,b tags.

<body>
<h1> Django : </h1>
<hr>
<p> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database .
</p>
<hr>
<p> <b> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database . </b>
</p>
<hr>
<p> <b> <i> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database . </i> </b>
</p>
Mini project-2:
To create a web site using matrimonial application:
First page:
Welcome to Tronix Matrimonial

Matrimonial pics(image)

We are specialized in the following areas:


Late Marriages
Early Marriages
Second & third marriages.
Dating cum Marriages.

click Here to register

second page:
Registration Form
All fields are Mandatory:
Name :
Email:
Age :

Are you interested to Dating:


yes no

Your Expecations like:

How many marriage you want:

Your permenent address:


Register

Third page:

Thanks for Registration


You will get match details soon by email.

CSS:
==> To make them beautiful.
==> CSS stands for cascading style sheets.
==> It is not a programming languages.
==> It is used only stlying purpose.
==> The main objective of CSS is to add styles to HTML.
==> CSS describes how HTML elements are
display on a web page.
==> styles includes colors, fonts sizes and font styles,
and border, .....etc.
==> We can define CSS styling inside Html.
==> But it is highly recommened to define styling inside a
separate CSS file i.e.( .css extension) and link that file to HTML.
<body>
<h1> TRONIX TECHNOLOGIES </h1>
<h1> Good evening </h1>
</body>

==> The Include css into html file: 3 ways:


1. inline css
2. internal css
3. external css

1. inline css:
==> The css style is applied within the tag.
i.e. by using the style attribute inside HTML elements.

ex:
<html>
<head>

</head>
<body>
<h1 style="color:red"> TRONIX TECHNOLOGIES </h1>
<h1 style="color:blue"> Good evening </h1>
<p style="color:red">
python is a high level programming langauge
python is a interpreter
python is a dynamically language
</p>
</body>
<html>

Internal css:
==> The css style is applied in head part.
and enclosed by <style> tag.
i.e. By using <style> element in the <head> section.
ex:
<html>
<head>
<style>
h1{
color:red;
}
h2{
color:orange;
}
p{
color:blue;
}
</style>
</head>

<body>
<h1> Tronix TECHNOLOGIES </h1>
<h2> Good evening </h2>
<p>
python is a high level programming langauge
python is a interpreter
python is a dynamically language
</p>
</body>
<html>

3. external css:
==> We can use separate .css file. and link that file.
==> By using a <link> element to link to an external css file

write a HTML progam to apply styles using external css.


home.html:
<html>
<head>
<link rel="stylesheet" href="siva.css">
</head>

<body>
<h1> TRONIX TECHNOLOGIES </h1>
<h1> Good evening </h1>
<p>
python is a high level programming langauge
python is a interpreter
python is a dynamically language
</p>
</body>
<html>

various possible ways to specify colors:


method-1: color : red;
method-2: using rgb() built-in function
color : rgb(0,0,0)
rgb stands for red, green,blue
we have to collect from google color picker.
The allowed values are 0 to 255.
ex-1: r --> 255
g --> 255
b --> 255
color:rgb(255,255,255) ---> white

ex-2: r --> 0
g --> 0
b --> 0
color: rgb(0,0,0) ---> black

ex-3: color:rgb(255,0,0) ---> red


ex-4: color:rgb(0,255,0) ---> green
ex-5: color:rgb(0,0,255) ---blue

method-3. usin hexa-decimal code


color:#code
This code is 6 digit number represents Hexa-decimal code of color.
hexa-decimal represents --> a to f and 0,1,...9
color:#f44ef2

method-4: color:rgba(244,66,220,0.4)
r--red
g--green
b--blue
a--alpha
The alpha allowed values for a attribute are : 0.0 to 1.0

1.0 full dark color and 0.0 means full light(transparent).


ex:
<html>
<head>
<style>
h1{
color:rgb(255,255,255);

</style>
</head>
<body bgcolor='red'>
<h1> Good Morning to all </h1>

</body>
</html>

<head>
<style>
h1{
color:rgba(255,255,255,0.3);

</style>
</head>
<body bgcolor='red'>
<h1> Good Morning to all </h1>

</body>
</html>
write a html program to display all list items in red color
<style>
li{
color:red;
}

</style>
<ol>
<li> pytyon </li>
<li> django </li>
<li> sql </li>
<li> HTML </li>
<li> CSS </li>
<li> JAVASCRIPT </li>
<li> GO </li>
<li> JAVA </li>
</ol>

write a html program to display list item 'x' in red color,


'y'in yellow and list item 'z' in blue. and remaining same.

<style>
#x{
color:red;
}
#y{

color:yellow;
}
#z{

color:blue;
}

</style>
<ol>
<li id="x"> pytyon </li>
<li id="y"> django </li>
<li id="z"> sql </li>
<li> HTML </li>
<li> CSS </li>
<li> JAVASCRIPT </li>
<li id="x"> GO </li>
<li> JAVA </li>
</ol>

using tagname:
tagname{
property-1:value-1;
property-2:value-2;
--
--
property-n:value-n;
}

using id name:
#idname{
property-1:value-1;
property-2:value-2;
--
--
property-n:value-n;
}
write a css program to apply inline css

<body bgcolor="yellow">
<h1 style="color:orange"> Tronix technologies </h1>
<h2 style="color:blue"> Good afternoon to all</h2>
</body>
write a css program to apply internal css

<style>
body{
background-color:yellow;
}

h1{
color:orange; }
h2{
color:blue; }

</style>

<body >
<h1> Tronix technologies </h1>
<h2> Good afternoon to all</h2>
</body>

setting background colors and borders:


In css , we can set background colors also as follows:
==> To set body background color:
body{
background-color:red;
}

==> To set borders as follows:


h1{
border-color:yellow;
border-width:thick
border-style:double;
}

==> The allowed border-width values are:


medium,thin,thick

write a html program to set body background color


and h1 background and borders.

<html>
<head>
<style>
body{
background-color:yellow;
}
h1{
color:red;
background:blue;
border-color:green;
border-width:medium;
border-style:double;
}
</style>
</head>
<body>
<h1> Welcome to tronix technologies </h1>
</body>
</html>

color vs. Background :


==> color attribute represents for text color.
==> background attribute represents for background color.
ex-1:
h1{
color:red;
background:blue;
}

How to set Border:


==> The borders are set to by using the border property.
Normal way:
h1{
border-color:orange;
border-width:10px;
border-style:solid;
}
shortcut method:
h1{
border : orange,10px,solid;
}

==> Here the order is not important

write a html program to set border styles:


<html>
<head>
<style>
h1{
border :solid blue 10px;
}
</style>
</head>
<body>
<h1> Welcome to TRONIX technologies </h1>
</body>
</html>
write a html program to apply borders for all h1.
<html>
<head>
<style>
h1{
border :solid blue 10px;
}
</style>
</head>
<body>
<h1> Welcome to TRONIX technologies </h1>
<h1> Welcome to Web technologies </h1>
<h1> Python is a high level programming Language</h1>
</body>
</html>

Note:
The above html program select all instances of given element.
i.e. style is applicable for every h1 tag of the html page..
Different selectors in CSS:
1. ID selector:
==> selects an element with the given id.
==> But with in the html page ID is always unique.

<html>
<head>
<style>
#good{
border :solid blue 10px;
}
#hello{
border: groove 10px red;
}
#verygood{
border:solid yellow 20px;
}
</style>
</head>
<body>
<h1 id="hello"> Welcome to TRONIX technologies </h1>
<h1 id="good"> welcome to Web technologies </h1>
<h1 id= "verygood"> Python is a high level programming Language</h1>
</body>
</html>
2. class selector:
==> select all elements with the given class.
ex:
<html>
<head>
<style>
.hello{
color:red;
background:blue;
}
</style>
</head>
<body>
<h1 class="hello"> Welcome to TRONIX technologies </h1>
<h1> Welcome to Web technologies </h1>
<h1 class="hello"> Python is a high level programming Language</h1>
</body>
</html>

Final syntax:
tagname{
property:value;
property:value
}

#idname{
property:value;
property:value
}

.classname{
property:value;
property:value
}

CSS Inheritance:
===> All the properties of the parent are by default
available to the child and we are not required to redefine.
This property is called a inheritance.
==> Inheritance concept applicable for css styles also.
==> i.e what every styles are defined for the parent tag
automatically are available to the child tags also.
ex-1:
body{
color:red;
}
write a html to apply css inheritance:
<html>
<head>
<style>
body{
color:red;
}

</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<h2> Welcome CSS </h2>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>
<ol>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
</body>
</html>

note:
This css style is applicable for all elements
present inside body tag.
ex-2:
<html>
<head>
<style>
body{
color:red;
}
h1{
color:green;
}
ol{
color: blue;
}
p{
color:yellow;
}

</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<h2> Welcome CSS </h2>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>
<ol>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>

</body>
</html>
example programs:1.
<body style="text-align: center;">
<h2 style="color: red;">Welcome to Tronix Technologies</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">This is a great organization to
learn technologies in very simple way. </p>
</body>
2.<!DOCTYPE html>
<html>
<head>
<style>
/Internal CSS using element name/
body{background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p{font-size: 20px;}
/Internal CSS using class name/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<h2>Learning CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Fonts & Text in CSS:
The following are very important properties related
to fonts and text in css.
1). font-family
2). font-size
3). font-weight
4). font-height or line-height
5). text-align
6). text-decoration.
1). font-family:
==> we can select desired font style from default
css system fonts in the following line:
http://www.cssfontstack.com/

ex-1: h1{
font-family: Arial Black;
}
ex-2:
<html>
<head>
<style>

h1{
font-family: Calibri;
}

</style>
</head>
<body>
<h1> CSS Inheritance </h1>
</body>
</html>

2). font-size:
==> we have to change the size of the font also.
ex-1:
h1{
font-size:20px;
}
ex-2:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:60px;
}

</style>
</head>
<body>
<h1> CSS Inheritance </h1>
</body>
</html>

3). font-weight:
==> The font-weight specified the thickness of the font.
sometimes like bold font,light font,...etc.
bold ,bolder, lighter , normal.
The allowed values are 100 to 900 .
100 means light . 900 means too much bold.
ex-1:
p{
font-weight:500;
}

ex-2:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:60px;
}
p{
font-weight:900;
}

</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>

</body>
</html>

4). line-height:
==> The space between 2 lines is called a line -height.
ex-1: p{
line-height: 1.5;
}

ex-2:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:60px;
}
p{
font-weight:900;
line-height:2
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>

</body>
</html>

5. text-align:
==> This property is used to align text either
left,center,right.
==> By default, text is automatically aligned leftside.
==> The allowed values are left,right,center,justify.
ex-1:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:30px;
text-align:right;
}

</style>
</head>
<body>
<h1> CSS Inheritance </h1>

</body>
</html>

6. text-decoration:
==> This property is used to decorate the given text.
==> The allowed values are underline,overline,line-through
ex:
<html>
<head>
<style>
h1{
font-family: Arial Black;
color:red;
font-size:60px;
text-decoration:underline;
}
</style>
</head>
<body>
<h1> Fonts and Text in CSS </h1>

</body>
</html>
CSS BORDER style PROPERTIES
==> The CSS border properties allow you to specify the style,
width, and color of an element's border.
==> The border-style property specifies what kind of border
to display.

The following values are allowed:

dotted - Defines a dotted border


dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border.
The effect depends on the border-color value
ridge - Defines a 3D ridged border.
The effect depends on the border-color value
inset - Defines a 3D inset border.
The effect depends on the border-color value
outset - Defines a 3D outset border.
The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
border-style:dotted;
}
</style>
<body>
<h1><center> Tronix Technologies </center> </h1>
</body>
</html>

ex-2
write a html program to set css border properties
in only one program:

<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {border-style: dotted;}
p.p2 {border-style: dashed;}
p.p3 {border-style: solid;}
p.p4 {border-style: double;}
p.p5 {border-style: groove;}
p.p6 {border-style: ridge;}
p.p7 {border-style: inset;}
p.p8 {border-style: outset;}
p.p9 {border-style: none;}
p.p10 {border-style: hidden;}
p.p11 {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>


<p>This property specifies what kind of border to display:</p>

<p class="p1">A dotted border.</p>


<p class="p2">A dashed border.</p>
<p class="p3">A solid border.</p>
<p class="p4">A double border.</p>
<p class="p5">A groove border.</p>
<p class="p6">A ridge border.</p>
<p class="p7">An inset border.</p>
<p class="p8">An outset border.</p>
<p class="p9">No border.</p>
<p class="p10">A hidden border.</p>
<p class="p11">A mixed border.</p>
</body>
</html>

BORDER WIDTH:
==> The border-width property specifies
the width of the four borders.

==> The width can be set as a specific size (in px, pt, cm, em, etc)
or by using one of the three pre-defined values: thin, medium, or thick.

==> The border-width property can have from one to four values
(for the top border, right border, bottom border, and the left border).
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: double;
border-width: 25px;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.


Always specify the "border-style" property to set the borders first.</p>

</body>
</html>

ex-2:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

p.five {
border-style: double;
border-width: 15px;
}

p.six {
border-style: double;
border-width: thick;
}

p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>


<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>


<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.


Always specify the "border-style" property to set the borders first.</p>

</body>
</html>

BORDER COLOR
==> The border-color property is used to set the color
of the four borders.

The color can be set by:

name - specify a color name, like "blue"


Hex - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
transparent
The border-color property can have from one to four values
(for the top border, right border, bottom border,
and the left border).

If border-color is not set, then it inherits the color


of the element,
by default border-color is black.

ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: double;
border-width: 25px;
border-color: red;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.


Always specify the "border-style" property to set the borders first.</p>

</body>
</html>

ex:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}
</style>
</head>
<body>

<h2>The border-color Property</h2>


<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>


<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>

</body>
</html>

BORDER - INDIVIDUAL SIDES


From the examples above you have seen that it is possible
to specify a different border for each side.

In CSS, there is also properties for specifying


each of the borders
(top, right, bottom, and left):

ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: double;
border-left-style: none;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>

ex-2: The example above gives the same result as this:


<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: dotted solid;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>

So, here is how it works:


this is the short-hand methods:
If the border-style property has four values:

1. ==> border-style: dotted solid double dashed;


top border is dotted
right border is solid
bottom border is double
left border is dashed
2. ==> If the border-style property has three values:

border-style: dotted solid double;


top border is dotted
right and left borders are solid
bottom border is double

3. ==> If the border-style property has two values:

border-style: dotted solid;


top and bottom borders are dotted
right and left borders are solid

4. ==> If the border-style property has one value:

border-style: dotted;
all four borders are dotted

BORDER - INDIVIDUAL SIDES


From the examples above you have seen that it is possible
to specify a different border for each side.

In CSS, there is also properties for specifying


each of the borders
(top, right, bottom, and left):

ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: double;
border-left-style: none;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>

ex-2: The example above gives the same result as this:


<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: dotted solid;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>

So, here is how it works:


this is the short-hand methods:
If the border-style property has four values:

1. ==> border-style: dotted solid double dashed;


top border is dotted
right border is solid
bottom border is double
left border is dashed
2. ==> If the border-style property has three values:

border-style: dotted solid double;


top border is dotted
right and left borders are solid
bottom border is double

3. ==> If the border-style property has two values:

border-style: dotted solid;


top and bottom borders are dotted
right and left borders are solid

4. ==> If the border-style property has one value:

border-style: dotted;
all four borders are dotted

BORDER - SHORTHAND PROPERTY


There are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all


the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color

ex:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:blue;
border: 5px solid red;
}

</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-


color.</p>

</body>
</html>

You can also specify all the individual border properties for just one side:
Left Border

p{
border-left: 6px solid red;
background-color: lightgrey;
}

Bottom Border

p{
border-bottom: 6px solid red;
background-color: lightgrey;
}

<div> tag:
==> div tag means division tag.
==> The <div> tag defines a division or section in an HTML element.
==> The <div> is used as a container for HTML elements.
which is then styled with css or manipulates with javascript.
==> The <div> tag is easily styled by using the
class or id attribute
==> A <div> section in a document that is styled with css.
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:center;
}
</style>
<body>
<div class="x">
<h2> Tronix Technologies <h2>
<p> This is a IT Training Institute <br>
spcially designed for python <br>
It is located near JNTU . <br>
HYDERABAD-500085.
</p>
</div>
</body>
</html>

ex-2:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:center;
}

.y{
border:10px dashed yellow;
background-color:green;
text-align:right;
}
</style>
<body>
<div class="x">
<h2> Tronix Technologies <h2>
<p> This is a IT Training Institute <br>
spcially designed for python <br>
It is located near JNTU . <br>
HYDERABAD-500085.
</p>
</div>
<div class="y">
<h3> Tronix Technologies <h3>
<p> This is a IT Training Institute <br>
specially desinged for web development <br>
It is located In kukatpally. <br>
HYDERABAD-500010.
</p>
</div>

</body>
</html>

ex-3:
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:center;
}

</style>
<body>
<div class="x">
<a href="batch5.html"><img src ="ab.jpg"></a>
</div>

</body>
</html>

ex-3:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:left;
}
.y{
border: 5px dotted green;
background-color:yellow;
text-align:left;
}
</style>
<body>
<div class="x">
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">search</a>
<a href="#">Help</a>
</div>
<div class="y">
<a href="#">PYTHON</a>
<a href="#">JAVA</a>
<a href="#">CPP</a>
<a href="#">DJANGO</a>
</div>
</body>
</html>
ex-4:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5x outset red;
background-color:lightblue;
text-align:left;
font-size:25px;
}
</style>
<body>
<div class="x">
<a href="batch5.html">Home</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<a href="second.html">Contact</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<a href="third.html">search</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<a href="#">Help</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp &nbsp &nbsp &nbsp
</div> &nbsp &nbsp &nbsp &nbsp
<br><br><br>

</body>
</html>

1. write a css program to set border color,style and width.

<style>
h1{
color:red;
border-color:blue;
border-style:double solid double solid;
border-width:10px;
}
</style>
<h1> UI DEVELOPERS </h1>
ex: div tag demo
<style>
.warning{
border:10px ridge #f00;
background-color:#ff0;
padding: .5rem;
display : flex;
flex-direction:column;
}
.warning img{
width:100%
}
.warning p{
font:small-caps bold 1.2rem sans-serif;
text-align:center;
}
</style>
<div class="warning">
<img src="" alt="Image not found">
<p> Beware of the Dogs </p>
</div>

ROUNDED BORDERS

The border-radius property is used to add rounded borders


to an element.
Normal border
Round border

Rounder border

Roundest border

ex:
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}

p.round1 {
border: 2px solid red;
border-radius: 5px;
}

p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>


<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>


<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

<p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier


versions.</p>

</body>
</html>

CSS MARGINS

==> The CSS margin properties are used to generate space


around elements.

==> The margin properties set the size of the white space
outside the border.

==> With CSS, you have full control over the margins
==> There are CSS properties for setting the margin
for each side of an element (top, right, bottom, and left).
MARGIN - INDIVIDUAL SIDES:
CSS has properties for specifying the margin for
each side of an element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:

auto - the browser calculates the margin


length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be
inherited from the parent element
Note: Negative values are not allowed.
ex: write a html program to sets different margins for
all four sides of a <p> element:
ex:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>

</body>
</html>

MARGIN - SHORTHAND PROPERTY


==> To shorten the code, it is possible to specify all the margin properties
in one property.

The margin property is a shorthand property for the following


individual margin properties:

margin-top
margin-right
margin-bottom
margin-left
ex:

p{
margin : 100px 150px 100px 80px ;
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 100px 150px 100px 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using the margin shorthand property</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>

</body>
</html>

So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;


top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
If the margin property has three values:

margin: 25px 50px 75px;


top margin is 25px
right and left margins are 50px
bottom margin is 75px

If the margin property has two values:

margin: 25px 50px;


top and bottom margins are 25px
right and left margins are 50px

If the margin property has one value:

margin: 25px;
all four margins are 25px

THE AUTO VALUE


You can set the margin property to auto to horizontally center the element
within its container.

The element will then take up the specified width,


and the remaining space will be split equally between the left and right margins:

The background image for a page can be set like this:

Example
div {
width : 300px;
margin : auto;
border : 1px solid red ;
}

ex:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of the auto Value</h2>


<p>You can set the margin property to auto to horizontally center the element within its
container.
The element will then take up the specified width, and the remaining space will be split
equally between the left and right margins:</p>
<div>
This div will be centered because it has margin: auto;
</div>
</body>
</html>
Margins and Padding
==> margin and padding are the two most commonly used properties
for spacing-out elements.
==> A margin is the space outside something,
whereas padding is the space inside something.
==> The CSS margin properties are used to create space
around elements, outside of any defined borders.
With CSS, you have full control over the margins.
There are properties for setting the margin for each side
of an element(top, right, bottom, and left).
==> An element's padding area is the space between
its content and its border
==> The padding property in CSS defines,
the innermost portion of the box model,
creating space around an element's content.
ex:
Change the CSS code for h2 to the following:

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}

This leaves a 20-pixel width space around the secondary header


and the header itself is fat from the 40-pixel width padding.
ex:
<style>
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 80px;
padding: 40px;

}
</style>

<h2> Tronix Technologies </h2>

==> The four sides of an element can also be set individually.


margin-top, margin-right, margin-bottom, margin-left,
padding-top, padding-right, padding-bottom and padding-left
are the self-explanatory properties you can use.

==> CSS Property: margin-top


The top margin of a box, outside the top border,
padding, and content areas.

The top margin, combined with right, bottom, and left margins,
can also be specified with the margin shorthand property.

Possible Values
Value Note Example
[length] 10px
[percentage] Calculated as a percentage of the
containing box’s width. 25%
auto
inherit
initial
unset
Example

#badger { margin-top: 3em; }

CSS Property: padding-top


The top padding of a box, inside the top margin and border areas, and outside the top of the
content area.

The top padding, combined with right, bottom, and left padding, can also be specified with
the padding shorthand property.

Possible Values
Value Note Example
[length] Should not be a negative value. 10px
[percentage] Calculated as a percentage of the containing box’s width.
Should not be a negative value. 25%
inherit
initial
unset

Ex:
#puffin { padding-top: 36px; }

CSS Property: padding


The padding of a box, inside the margin and border areas, and outside the content area.

With one value, the padding property can be used to specify uniform padding around a box.
With two, three, or four values, sides can be specified independently.

Possible Values
Value Note Example
[length] Should not be a negative value. 10px
[percentage] Calculated as a percentage of the containing box’s width.
Should not be a negative value. 25%
inherit
initial
unset
Multiple Values
One, two, three, or four space-separated values:

Value Note Example


[value] [top, right, bottom, and left] 10px
[value] [value] [top and bottom] [left and right] 10px 20px
[value] [value] [value] [top] [right and left] [bottom]10px 20px 30px
[value] [value] [value] [value] [top] [right] [bottom] [left] 10px 20px 30px 40px
padding is a shorthand property. Padding can be set on sides independently with padding-
top, padding-right, padding-bottom, and padding-left.
padding: 10px 20px 30px 40px; is the same as padding-top: 10px; padding-right: 20px;
padding-bottom: 30px; padding-left: 40px;, for example.

Examples
New Examples Section!
See all of this code stuff in action, and play around with it.
Example

#gull { padding: 12px; }


/* Uniform padding of 12px on all four sides */

#swan { padding: 20% 40%; }


/* Top and bottom padding are each 20% of the containing box's width. Left and right
padding are each 20% of the containing box's width. */

#tern { padding: 20% inherit 2.5em; }


/* Top padding is 20% of the containing box's width. Left and right padding are inherited.
Bottom padding is 2.5em */

#grebe { padding: 10px 20px 30px 40px; }


/* Top padding is 10px. Right padding is 20px. Bottom padding is 30px. Left padding is 40px.
*/

You might also like