HTML CSS course

HTML (Hypertext markup language)

​ data presentation and UI designing (sign up, login,

registration, search form…)

​ We can design static web pages

CSS Cascading Style Sheets

Used to change look & feel of webpage (html elements)

​ It helps to present data more effectively, attractively &

animations

JavaScript it provides logical support to html pages

​ its works like as back-end for html/css

​ used to develop interactive web pages

BootStrap Bootstrap is a free and open-source CSS framework

directed at responsive, mobile-first front-end web development.
Html, css, JavaScript & BootStrap are web technologies, these techs
are used to develop web applications.

=> html,css, js are web tech

=> which tech are supported/used to develop/to design web applications

those tech are called "web tech"

Web tech:

=> Frontend tech

-> these tech are directly intractable to user

-> also called "client side"

-> these tech programs are translated, executed & result displaying in
client computers

Ex: html,css,js,bs etc...

 => Backend tech

-> these tech are not intractable to user

-> also called "server side"

-> these tech are translated, executed & results production in server
computers

ex: asp.net, servlet, spring mvc, django/flask, node, php etc...

UI/Frontend developer

​ => html,css,js,bs + angular/react

Server
A server is a computer or system that provides resources, data, services, or
programs to other machines, known as clients, over a network/inet.

In theory, whenever computers share resources with client machines, they

are considered servers.

a server stores all the data associated with the websites that
are hosted by it and shares that info with all computers and
mobile devices (like yours) that need to access them.
Server provides data services to clients
Client

A client is a device that connects to and uses the resources of a

remote computer, or server.

Clients may use a desktop or a laptop or a tablet or a mobile phone

or a TV or a car etc.

The device which is used by the user is called a “Client”.

Client is a media between server & end-user

User

The person who is working on/operating a client

machine is known as User or end-user.
What is a web browser?
It is client-side lightweight software installed in client machines. It sends http
requests from client to server; it takes http response from server.
Browser provides navigation among web pages, and browsers executes html,
css, JavaScript files and displays output to the user.

List of Computer Browsers:

Internet Explorer(1995), Opera(1995), Mozilla Firefox(1998), Safari(2005),
Google Chrome(2008) etc…

HOW MANY TYPES OF WEB APPLICATIONS WE HAVE?

WHAT IS WEB APPLICATION?
Web applications are network enabled applications. We can deploy any web
applications in servers and we can access them over the network using
server ip address and application name.

In computing, a web application is a client–server software application

which the client (or user interface) runs in a web browser and it contains
web documents in the form of electronic pages (web pages).

A web application typically contains following three layers: ​

Presentation layer is a user interface (views) which are accessible from any
web browser.

Business layer is a server-side program which is nothing but automation of

business rules. Client layer will interact with the business layer to persist
data.
 Data layer is database software where we can store client related data.
Business layer will interact with the data layer.

A Brief History of the Web

The Web was born in a particle physics laboratory (CERN) in Geneva,
Switzerland in 1989. There a computer specialist named “Tim Berners-Lee”
first proposed a system of information management that used a “hypertext”
process to link related documents over a network. He and his partner,
Robert Cailliau, created a prototype and released it for review. For the first
several years, web pages were text-only.

The World Wide Web Consortium (W3C)

World Wide Web Consortium (called W3C) is the organization that oversees
the development of web technologies. The group was founded in 1994 by
Tim Berners Lee, the inventor of the Web, at the Massachusetts Institute of
Technology (MIT).
What is a web application (website)?

a website is a collection of web pages (or) a website is a collection of

information.

What is a web page?

a web page is a group of html elements, elements are nothing but a para, a
button, an image, a text box, a password, a heading, an audio, a video, a
table etc…

=> using html tags we can create these elements

HTML: Hypertext Markup Language

It is specially designed hypertext for web browsers, with meaningful tags or
elements in simple English language.

HTML is developed by tim berners lee - 1993

w3c.org
World wide web

HTML Versions
From the W3C organization there are the following versions released.
Version Specification ​ Release Date
1.0 N/A (HTML 1.0) ​ 1993-dec/1994 ​
2.0 HTML 2.0 ​ 24-Nov-1995
3.2 W3C: HTML 3.2 ​ 14-Jan-1997
4.0 W3C: HTML 4.0 ​ 24-Apr-1998
4.1 W3C: HTML 4.1 ​ 24-Dec-1999
5.0 WHATWG ​ 28-Oct-2014
5.1 W3C: HTML 5.1 ​ Nov-2016
5.2 W3C: HTML 5.2 ​ 14-Dec-2017

HTML introduction
1. HTML was developed by “Tim-Berners-Lee”, released in 1993-dec/94
and maintained by W3C Org. ​ ​

2. HTML stands for “Hypertext Markup Language”.

“Hypertext” means the text that can be transferred from internet server to
internet client.
"Markup" means which syntax will be in the form of tags or you simply
"markup" a text document with tags that tell a Web browser how to
structure it to display.

“Language” is an interface between web developer and web browser

3. Technically, HTML is not a programming language, but rather

a markup language.
4. HTML is used to design "static web pages", static web pages that
always show the same information.

5. ​ HTML is “client side tech”. That means the html code executes on the
client browser but not on the server. ​ ​

7. For working html no need installs any software, and browser is

responsible for executing & producing output of html programs.

​ Typing & saving ⇒ VS Code

​ Execution & result ⇒ Browser

8. Html is error free programming.

​ (while working with url/address only we will get errors)

9. HTML is not a case sensitive language that means you can write
the html code in either uppercase or lower case.

11. HTML is an interpreter-based language. Browser interprets HTML code.

Translators: converting high level code (human) into machines level code
(MP/OS) is called translation.

Who performs this operation are called translators.

Types: ​ compiler, interpreter, assembler

interpreter it translates code line-by-line and executes line-by-line

(interpretation)

​ interpreter

​ html code ⇐=============⇒ machine code

​ (English) (Binary code)

Tag:
1.​ Tag is a predefined program, program is instructions / command
to the browser
· A tag is a keyword, enclosed within "<" and ">" in HTML language.
· It is a special kind of text placed between the left angular brace and
right angular brace(<tag_name>).
· · Tag is used to display some specific output in the web page.
· Browser did not identify the tag; it shows a blank page or it prints as
text.
· tags also represented as elements.

types of tags
in html we have two types tags, those are:
1. paired tags
⇒ Contains open tag and closing tag.
⇒ Opening tag specifies starting point of operation/output, closing tag
specifies ending point of operation/output.

Syn: <tagname> text </tagname> ​

ex: ​ <html> ... </html>

​ <head> ... </head>

​ <body> … </body>

​ <script> ... </script>

<style> ... </style>

​ <p> … </p> ​

note: paired tags also called as body-full tags

2. unpaired tags
⇒ contains only open tags.

​ Syn: <tagname> ​ or ​ <tagname/>

​ ex: <br/> ​ <img/> <input/> ​

<hr> <link> <meta>
⇒ Unpaired tags also called as body-less tags
⇒self closed tags
Demo.html

<!-- demo on html -->

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

Welcome to The Web World&#128525;

</body>

</html>

Structure of HTML
As per W3C we have to follow the following structure to design web pages
(but it’s not comp).
<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

</body>

</html>
Generally, html program contains three parts, those are:

​ > Versioning section ​

​ > Head section

​ > Body section

Versioning section

This is providing information to the browser which version we are

using in the web page/program. So, the browser is interpreting
code and producing output as per given specification.

Syn: ​ <!DOCTYPE html version-url>

HTML4.0:
<!DOCTYPE html public "-//W3C//DTD HTML 4.0//EN"
"http://www.w3c.org/TR/html4/strict.dtd">

​ <!DOCTYPE html> ⇐ use’s new version of html

html tag - root element

The <html> tag represents the starting and ending of an html
program. html tag contains two child/sub tags those are head tag
and body tag.

head tag

head tag represents a non-content section (means not output) of

the web page.

This information doesn't appear on the web page/in the browser

(it's called as non-content), but it's used internally by the browser.

This tag is used to set icons, title, to provide some meta data (info
about web app), css settings.

head tag contains some child/sub tags, those are ​

​ <link>, <title>, <meta>, <style>, and <base> tags

body tag

body tag represents content information (means output) of the

web page.

this information appears on the web page/in the browser (it’s

called content).
This tag is used to design UI or to display output.

body tag contains so many child/sub tags.

some of tags: p, img, h1, table, div, a, table, audio, video, input,
button, form, ol, ul, li, hr tags …

Comment lines
⇒ Comment lines are to provide some description about
our program.

⇒ Comments are not executed by browser.

Syn:

<!-- text -->

html is a collection of tags(elements) and every tag has some

attributes.

how design & execute html programs

⇒ open any text editor (sw) and type program.
 notepad, editplus, notepad++, textpad, sublime, vs code,
atom, coffee, ...

⇒ save that program with any name (.html or .htm) and anywhere
in the system.

⇒ execution: ​

​ 1st Approach: goto file location, then double click on file

​ 2nd Approach: goto file location, then right click on file and
click on open then select browser

​ 3rd Approach: open any browser, then goto address bar and
type filename with address.

for ex: d:/siva/test.html ​ e:/test.html

Heading tags
These tags are used to print data/text in heading format.

Html provides 6 heading tags, those are h1, h2, h3, h4, h5 and h6.

These 6 tags are used to display headings in different sizes.

Six tags are paired tags and block level elements.

Syn:

<h1> text </h1> ​

<h2> text </h2> ​

<h3> text </h3>

 ​ …

ex1.html
<!-- demo on heading tags -->

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<h1>HTML</h1>

<h2>HTML</h2>

<h3>HTML</h3>

<h4>HTML</h4>

<h5>HTML</h5>

<h6>HTML</h6>

<h6>CSS</h6>

<h1>JavaScript</h1>

<h3>BootStrap</h3>

</body>
</html>

p tag
> p stands for paragraph.

> this tag is used to display/print more lines of text (paragraph)

> its paired tag and block level.

Syn:

​ <p> text or info </p>

ex2.html
<!-- example on p tag -->

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<p>ChatGPT (Chat Generative Pre-trained Transformer) is a

chatbot developed by OpenAI and launched on November 30,
2022. Based on a large language model, it enables users to refine
and steer a conversation towards a desired length, format, style,
level of detail, and language. Successive prompts and replies,
known as prompt engineering, are considered at each conversation
stage as a context.</p>

<p>By January 2023, it had become what was then the

fastest-growing consumer software application in history, gaining
over 100 million users and contributing to the growth of OpenAI's
valuation to 29 billion. ChatGPT's release spurred the development
of competing products, including Gemini, Ernie Bot, LLaMA, Claude,
and Grok.[5] Microsoft launched Copilot, based on OpenAI's
GPT-4.</p>

</body>

</html>

Note:
>browser/html doesn't accept more than one space (space bar &
tab key), means while designing the program we are given more
space but browser prints only one space.

>browser/html doesn't accept enter key (line breaking), means

while designing a program we use enter key but browser prints data
without breaking line.

​
br tag

=>br stands for break line (enter key) ​

=> it moves the cursor to the beginning of the next line. ​ ​

=> its un-paired

Syn: <br> or ​ <br/>

Html entities

=> Entities nothing but Special characters or html operators

=> Special characters are used to perform some task or to print

some Symbols.

=> Special characters is a English word

Syn: ​ &word; ​ ​ ​
ex: &euro; &copy; &reg;

All words should be in small letters - because HTML Entities are case
sensitive

Html hexa-decimal codes, these codes are starts with #

Hexa-dec base 16 è 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

Syn: ​ &#hex-code;

&#6digits; ​ &#4digits; ​

&#128525; ​ &#9876;
ex3.html
<!-- example on br tag & html entities -->

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

Apple<br>

Mango<br/><br/><br/>

Orange<br>

100$<br>​ 100&euro;<br>​100&pound;<br>

100&yen;<br>​

Intel&reg; Core&trade; I9&copy; Processor

&#128501; &#128521; &#138511; &#138521; &#138531;

&#128531; &#128541; &#128551;

1000&#8377; <bR>

&#9876;​ &#9899;​ &#9911;

 <br>

Naresh&nbsp;&nbsp;&nbsp;&nbsp;i &nbsp; &nbsp; Tech

</body>

</html>

formatting tags
formatting tags are used to change the format of text, means to
change the way of data presentation

strong tag

=> used to display the data in "bold" format

Syn: <strong> data </strong> ​ ​ ​ html4, semantic

​ <b> data </b>

em tag

=> used to display the data in "italic" format

 Syn:​ <em> data </em>

​ ​ <i> data </i>

delete tag

=> used to represent deleted text or also used to strike out the text

Syn: <del> data </del>

<s> data </s>

Mark tag

Used to highlight the text

Syntax: <mark>Para</mark>

insert tag

=> used to represent inserted text or also used to underline the text

Syn: <ins> data </ins>

<u> data </u>

sub tag

=> sub script, used to print the text below the actual line

Syn: _data

sup tag

=> super script, used to print the text above the actual line

Syn: ^data

span tag

=> used to print plain format text (w/o any format)

Syn: <span> data </span>

11 tags paired & inline tags

pre tag

=> preformatted text, it prints the text as it is format

Syn: <pre> data </pre>

its block level & paired tag

block level

=> it always displaying the data in "new line"

=> BL tag occupies whole line space,

means width of tag=width page/container

inline

=> displaying the data side by side

=> inline tag occupies space based on text

width of tag=length of text

ex4.html
<!-- example on formatting tags -->

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<strong>HTML</strong>
 <b>CSS</b>

<em>javascript</em>

<i>bootstrap</i>

<bR>

<del>AngularJs</del>

<s>Jquery</s>

<ins>React</ins>

<u>ajax</u>

<BR>

<span>nodejs</span>

<span>php</span>

<br>

H₂SO₄

<br>

(a-b)² = a² + b² - 2ab

<br>

<pre>

red apple
yellow​ ​ mango

orange

</pre>

</body>

</html>

ex5.html
<!-- example on tags -->

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<p>

<b>HTML</b> (HyperText Markup Language) is the code that is

used to structure a web page and its content. For example, content
could be <em>structured</em> within a set of paragraphs, a list of
bulleted points, or using images and data

</p>
 <h1> <u> <em> <s> Siva Kumar Y </s> </em> </u> </h1>

<h3>Vivo X100</h3>

offer price <strong>&#8377;80000</strong>, MRP

<del>&#8377;100000</del> &nbsp; &nbsp; <em>20%</em>
discount

</body>

</html>

title tag
This tag is used to set the title for a webpage, meaning every
webpage has an individual title.

Web site => 10 web pages => 10 titles (1page : 1title)

its paired tag.

<title> is the sub tag of <head> tag.

Syn:
​ <title> text </title>
​

Link tag
è Link tag used to set the favicon/logo for a webpage. ​

è Also used to link with external files (css file, bootstrap file)

è Unpaired tag.

è <link> is the sub tag of <head> tag. ​

Syn:​ <link rel=”icon” href=”filename.ext”>

​ ​ Relative => icon or stylesheet

​ Hyper reference => address of image/icon

supported image formats:

.jpg ​ .bmp .png .jfif ​ .gif ​ .tif ​ .ico ​ .webp .svg etc…

ex6.html
<!-- example on title & link tags -->

<!DOCTYPE html>

<html lang="en">

<head>

<title>Home Page</title>

<link rel="icon" href="logo2.jpg">

</head>

<body>
 <h3>demo on setting web page title & icon</h3>

</body>

</html>

HTML Attributes
⇒ Attribute is a special feature/setting of a tag. ​

⇒ every tag they have attributes ​ 99% ​

⇒ An HTML attribute is a piece of markup language used to adjust the behavior or

display of an HTML element. For example, attributes can be used to change the color,
size, or functionality of HTML elements. ​

⇒ HTML Attribute is something that we use in the starting tag of HTML Elements or
HTML Tags which provides extra information about those HTML Elements or HTML Tags.

Syn:

​ <tagname attribute="value" attribute=’value’ ... >

Note: ​

⇒ values should be enclosed within “ “ or ‘ ‘ or without quotes.

⇒ Every attribute must be separated by a space

⇒ attributes right side of tag only

Types of attributes
⇒ general attributes
These attributes are common for most tags (99% of tags). These attributes
are used to adjust the behavior or display of an HTML element, to provide
extra information about those HTML Elements to the browser, to control size
of element, to change alignment of element …

those attributes are:

class, id, name, style, align, action, href, src, target, width, height, alt, title,
min, max, step, maxlength, type, checked, selected, value, readonly,
placeholder, rel etc…

⇒ event attributes
An event is a notification that is triggered when something changes in the
browser.

With event attributes these events are directed to JavaScript which then
responds to the event.

These attributes are used to perform some logical operations.

logical operations we can perform by using JavaScript, these also called

dynamic attributes.

By using event attributes From Html page we can trigger JavaScript code or
we can call JavaScript functions

attributes are:

onclick, ondblclick, onfocus, onblur, onkeypress, onkeyup, onkeydown,

onsubmit, onchange, oninput, onreset, onselect, onmousemove,
onmouseout, onmouseover, onwheel, onload, onsubmit, onchange etc…
 ​

ex7.html
<!-- example on html attributes -->

<!DOCTYPE html>

<html lang="en"> <!-- opt attr -->

<head>

<title>attribute page</title>

<link rel="icon" href="logo1.jpg"> <!-- specific attr -->

</head>

<body bgcolor="pink" onload="alert('welcome to web site')">

<h3 align="center">ChatGPT</h3> ​ <!-- gen attr -->

<p align="justify">

ChatGPT (Chat Generative Pre-trained Transformer) is a chatbot

developed by OpenAI and launched on November 30, 2022. Based
on a large language model, it enables users to refine and steer a
conversation towards a desired length, format, style, level of detail,
and language. Successive prompts and replies, known as prompt
engineering, are considered at each conversation stage as a
context.</p>
 <h2 onclick="alert('hello , how are you')">Click here</h2>

<h1 id="heading" onmouseover="heading.innerText='Naresh i Tech'

" onmouseout="heading.innerText='Siva Kumar'">

Siva Kumar Y</h1>

</body>

</html>

Images
è "img" tag is used to display images on a webpage.

è in one web page we can display any no.of images and any
type of images.

ðIt supports all types of images, like .jfif, .svg, .jpg, .bmp, ​
.gif, .tif, .png, .webp etc…
è its un-paired tag and its inline element

Syn:

​ <img attributes/> ​

Note:

It is strongly recommended to place all images in side root

folder (or) create sub folder with name images in root folder
attributes:

src => to specify which img you want to display

width => width of image (pixel)

height => height of image (pixel)

title => it is used to specify tooltip. (whenever mouse pointer comes on top of image)

alt => alternative text, if image not loaded in webpage/not display, we want to display
text message to user it called as alt

ex8.html
<!-- example on img tag -->
<!DOCTYPE html>
<html lang="en">
 <head>
<title>images page</title>
<link rel="icon" href="logo1.jpg">
</head>
<body>
<h3>demo on displaying images</h3>
<img src="h:/html4pm/images/girl.jpg"/>
<img src="images/tenor.gif">
<bR>
<img
src="https://www.naturenursery.in/wp-content/uploa
ds/2020/03/indian-rose.jpg">
<bR>
<img src="images/moon.jpg" width="60%">
<!-- width=500px" OR height="300px" OR
width="500px" height="300px" -->
 <bR>
<img src="images/baby.png" border="30"
style="border-color:hotpink;" title="Sooooo
cuuuuute!!!">
<img src="images/ocean.web" width="200px"
alt="image not loaded, try again">
</body>

</html>​​

ex9.html
<!-- example on a tag -->

<!DOCTYPE html>

<html lang="en">

<head>

<title>Ex9</title>

​ <link rel="icon" href="logo1.jpg">

</head>
 <body>

​ <h3>demo on hyper links</h3>

​ <a href="ex1.html">goto ex1</a>

​ <a href="ex2.html">goto ex2</a>

​ <br>

​ <a href="https://www.youtube.com">youtube</a>

​ <br>

​ <a
href="https://www.amazon.in/s?bbn=81107432031&rh=n%3A8110
7432031%2Cp_85%3A10440599031&_encoding=UTF8&content-id
=amzn1.sym.58c90a12-100b-4a2f-8e15-7c06f1abe2be&pd_rd_r=7
e366296-f72f-4e7d-a5db-305a6de22755&pd_rd_w=sQWYY&pd_rd
_wg=dXoeN&pf_rd_p=58c90a12-100b-4a2f-8e15-7c06f1abe2be&p
f_rd_r=DRHZYBVF7RKW6K9TGDS6&ref=pd_gw_unk"
target="_self">

​ <img src="images/ac.jpg" width="150px"/>

​ </a>

​ <br> <br>

​ <a
href="https://mov.ibomma.rs/te-a1cwn/anweshippin-kandethum-2
024-telugu-movie-watch-online.html" target="_blank">
​ <img src="images/Anweshipping.jpg">

​ </a>

</body>

</html>

ex10.html
<!-- example on a tag -->

<!DOCTYPE html>

<html lang="en">

<head>

<title>Ex10</title>

​ <link rel="icon" href="logo1.jpg">

</head>

<body>

​ <h3>demo on internal links</h3>

​ <a href="#tata">Tata Motors</a> &nbsp;

​ <a href="#hyundai">Hyundai Motors</a>

​ <br>
​ <br>

​ <h2 id="tata"><u>Tata Motors</u></h2>

​ <p>

​ Tata Motors Limited is an Indian multinational automotive

company, headquartered in Mumbai and part of the Tata Group.
The company produces cars, trucks, vans, and busses.</p>

​ <img src="images/tata1.jpg" width="150">

​ <img src="images/tata2.jpg" width="150">

​ <img src="images/tata2.jpg" width="150">

​ <p>

​ Tata Motors has auto manufacturing and vehicle plants in

Jamshedpur, Pantnagar, Lucknow, Sanand, Dharwad, and Pune in
India, as well as in Argentina, South Africa, the United Kingdom,
and Thailand. It has research and development centers in Pune,
Jamshedpur, Lucknow, Dharwad, India and South Korea, the United
Kingdom, and Spain. Tata Motors is listed on the BSE (Bombay Stock
Exchange), where it is a constituent of the BSE SENSEX index, the
National Stock Exchange of India, and the New York Stock Exchange.
The company is ranked 265th on the Fortune Global 500 list of the
world's biggest corporations as of 2019.</p>

​ <br>
​ <h2 id="hyundai"><u>Hyundai Motor Company</u></h2>

​ <p>

​ The Hyundai Motor Company, often referred to as Hyundai

Motors and commonly known as Hyundai, (Korean: ; Hanja: ; RR:
Hyeondae, IPA: 'modernity') is a South Korean multinational
automotive manufacturer headquartered in Seoul, South Korea,
which was founded in 1967. Currently, the company owns 33.88
percent of Kia Corporation, and fully owns two marques including
its luxury cars subsidiary, Genesis, and their electric vehicle brand
Ioniq. The three brands altogether make up the Hyundai Motor
Group.</p>

​ <img src="images/hyn1.jpg" width="150">

​ <img src="images/hyn2.jpg" width="150">​

​ <img src="images/hyn3.jpg" width="150">​

​ <p>Hyundai operates the world's largest integrated

automobile manufacturing facility in Ulsan, South Korea which has
an annual production capacity of 1.6 million units. The company
employs approximately 75,000 people worldwide. Hyundai vehicles
are sold in 193 countries through 5,000 dealerships and
showrooms. As of 2022, Hyundai is the world's third-largest
carmaker in terms of production, only falling behind Toyota and
Volkswagen.</p>

</body>
</html>

ex11.html
<!-- example on a tag -->

<!DOCTYPE html>

<html lang="en">

<head>

<title>Ex11</title>

​ <link rel="icon" href="logo1.jpg">

</head>

<body>

​ <h3>demo on hyperlink with files</h3>

​ <a href="files/Application.pdf">Click here to Apply job</a>

​ <br>

​ <a href="files/VSCodeUserSetup-x64-1.78.2.exe">Download
VS Code</a>

​ <br>

​ <a href="files/Jawan.mp3">play Jawan</a>

​ <br>

​ <a href="files/Mastaaru Mastaaru.mp3">play Mastaaru</a>​

​ <br>

​ <a href="files/Virupaksha-Telugu.mp4">play movie</a>​

​ <br>

​ <a href="images/ocean.webp">

​ <img src="images/ocean.webp" width="150" height="150">

​ </a>

​ <a href="images/moon.jpg">

​ <img src="images/moon.jpg" width="150" height="150">

​ </a>​

</body>

</html>
 working with list tags
these tags are used to display data/info points wise.
html supports three types of list, those are
Ordered list numbering
Unorderedlist bullet

ol tag
1.ol stands for "Ordered List".
2.it is used to display the text(names, colors, team names, course name...) with numbering.
3it supports 5 types of numbering, those are 1, A, a, i, I. By default it displays in number.
4.by using "ol" tag we can create ordered list
5.ol is paired tag & block level element

li tag
1. li stands for "list item"
2. li is sub tag of ol tag
3. li tag is used to print text/data in points wise
4. li is paired tag & block level element

ol attributes:
type : which type numbering to display (Default is 1)
start : from where u want to start numbering (default is 1)
reversed : to displaying numbers in desc order

li attributes:
value : used for restarting numbering with specified value

EX : <ol reversed start="3">

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
—----
<ol>
<li>Item 5</li>
<li value="10">Item 10</li>
<li value="15">Item 15</li>
</ol>
ul tag
ul stands for "Unordered List".
it is used to display the list of items(names, colors, team names, course name...) with bullets.
It supports 3 types of bullets, those are dot, circle, square. by default, is dot.
by using "ul" tag we can create unordered list items
ul is paired tag
"li" tag used for creating list items

EX : <p>Filled circle bullet points:</p>

<ul type="disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<p>Unfilled circle bullet points:</p>

<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<p>Square bullet points:</p>

<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

dl tag
dl stands for Definition list (since html5 description list)
dl tag used for to display definitions/full forms (collection of definitions)
its paired tag
"dt" and "dd" are sub tags of "dl" tag
"dt" stands for definition title, "dd" stands for definition data.
dt & dd are paired

EX : <h2>Styled Definition List</h2>

<dl class="styled-dl">
<dt>Term 1</dt>
 <dd>Description for Term 1</dd>

<dt>Term 2</dt>
<dd>Description for Term 2</dd>

<dt>Term 3</dt>
<dd>Description for Term 3</dd>
</dl>
Div tag
div is a container, means its grouping elements of html.
inside the div tag we can place any content like normal text or images.
div tag is used to divide web pages as no.of subpages/parts, each part is rep as div.

for better maintained, effective design of web page and simplifying css code.

its paired tag, and block level element

table tag

table tag is used to display the data in form rows & cols in the web page.
a table is a collection of rows, each row is a collection of cells/col/field.
a table is represented as table tag, a row represented as tr tag, a colheading is represented as th
tag, data rep as td tag.
table heading is represented as caption tag.
thead tag is rep of table head part, tbody tag is rep of table body part and tfoot tag Is rep of table
footer part.
table used to draw a table, means it grouping no.of rows
caption to set main heading of table
tr table row, used to draw a row, means it grouping no.of columns
th table heading, used to set column headings
td table data, used to print the data in columns
+
thead table head section since html4
tbody table body section
tfoot table footer section

all these 8 tags are paired tags

table, tr, caption, thead, tbody & tfoot are block level tags
th & td are inline tags

table attributes:
border : border of table (0 means no border, 1-n border req)
align : alignment of table
width : width of table (%)
...
th& td attributes:
colspan : specifies the no.of columns to merge/expend
rowspan : specifies the no.of rows to merge/expend
​ ​ ​ ​ form elements (html forms)

input tag

> input tag is used create a form elements (input elements)

> these elements are used to take input/accept data from users.

> input is un-paired tag and inline element

Syn: ​ ​

<input attributes>

Note: by default, input tag creates “text field”.

Types of IE text, password, number, hidden, submit, reset, image, radio, checkbox, date, time,
email, url, file, color, range etc…

​ ​ Field/element/box

attributes of input tag:

type it reps which type of control you want to create.

​ if we are not specified by default it creates a textbox.

input
type="text|hidden|password|number|button|reset|submit|image|checkbox|radio|file|color|
email|url|range|date|time|datetime-local|month|week..."

name it represents name of control, used in server-side programming (not unique)

id it represents id of control, used in client-side programming (unique)

value it used to initialize input elements (default value)

readonly this attribute not allowed to change the value of control

size this attribute specifies size of control (width of control)

disabled this attribute disabled the control

placeholder this attribute used to display prompting text with in the element

maxlength this attribute used to set max limit of data (no.of chars)

required this attribute used to force the user to enter data (mandatory field)

autofocus this attribute set's cursor position (Default location)

tabindex this attribute controlling cursor movements (when we r pressing tab key, where
cursor is moving)

min this attribute used to set minimum limit of number value (lower bound)

max this attribute used to set maximum limit of number value (upper bound)

step this attribute used to specify incremental & decrement value of number

Text fields

>text field used for taking input(any type of data) from user or text box allows us to type data.

>text fields are used for typing of username, first name, pincode, phone, address etc...

>by using "input" tag we can create text fields

>user can type any no.of char's but single line, if u want to set a limit use "maxlength" attribute.

>text field allows you to type data in 1 line.

Syn:

<input type="text"/>

Note:

id used by client-side programming (javascript)

​ => unique (duplicate id are not)

name used by server-side programming (servlet/asp.net/php...)

​ ​ => either unique or not

​ ​
hidden field

>an in-visible text field with default value is called a "hidden field".

>hidden fields are used to send some information about user/client to a server-side program
without asking the user.

>to perform session tracking, we are using hidden fields.

>like normal text fields, hidden fields data is also sent to the server when we click the submit
button.

Syn:

<input type="hidden" name="NAME" value="VAL" attributes>

​ ​ ​

password control

> password is a text field but the data is not visible.

> it's used for accepting password, pin, cvv, otp, verification code, passcode... from the user.

> password is displayed as * or dot

Syn:

<input type="password" attributes>

number control

>this control used to accept only numerical value (numbers only) from user

>it prevents typing of alphabets, special chars (in some browsers), except minus, dot and e
alphabet.

>but some browser allows to type all these data but given error while submitting form

> some browsers displaying number fields with increment/decrement buttons

SYn:

<input type="number" attributes>​ ​ ​ ​ ​ ​ ​

attributes:

min =>it rep starting value of number field (by default no min)

max =>it rep ending value of number field (by default no max)

step =>it rep increment/decrement value (by default +1/-1)

general button control

>button control is used to execute some code in the background whenever the user
clicked/pressed on that button.

>we can execute either JS or jQuery or Angular

>its standard button (not submit), it is unable to send requests to the server.

> These buttons are used to perform some client-side operations.

> these button values are not sent to the server.

Syn:

<input type="button" attributes>

reset button

>reset is one type of button, used for reset the html form/UI, meaning it clears all values of
form.

>reset button must be part of the "form" tag.

> these button values are not sent to the server.

Syn:

<input type="reset">

submit button

>submit is one type of button, used to submit/send the html forms/page/UI to a server-side
program.
>while submitting the html form, all input parameters (enter by user), hidden parameter (by
programmer) are prepared as a "Query String"

ex:​

https://www.redbus.in/search.aspx ? param-name=value&param-name=value &...

param-name => name of text box or name of password field or name of button...

value => value of text box or value of password field or value of button...

>outside the form, if we design anything that is not submitted to the server and without name
attribute also not submittable.

>submit button value also sent to server

Syn:

<input type="submit" value="VAL" attributes>

<form action=”search.jsp”>

​ public String getParameter(String param)

​ String st = request.getParameter(“t1”)

post

https://www.sitename.com/search.jsp

image button

> "image submit button" is used to submit a form to the server.

> when the user clicks on the image button, browser is submitting data with x-co & y-co of
image button

Syn:
<input type="image" src="filename" .../>

working with html forms => application form

> form is collection/group of html input elements

> by using <form> tag we can create html form(s) (mean application form)​​

> web document/page it contains only one body, but a body can contain multiple forms.

> forms are used to collect info from users(ex: signup page, singing page, user registration,
product delivery info etc...)

info we collected by using some fields (created by tag) like text field, password, checkbox, radio
button, combo-box, list box, date, submit button, etc...

> form is used to submit input values (user’s data) to a server-side program.

> form is a paired tag & block level

> form tag is sub tag of body tag

Syn: <form attributes>

UI designing

</form>​

​ ​
attributes:

1 action :url represents destination program address or

​ which program we want to call specify here

​ diff forms of urls:​

​ ​ https://www.irctc.co.in

https://www.sitename.com/login.class|login.aspx|login.php|login.ns|login.cgi|login.py

​ ​ "" self-calling (its calling/sending data to current prog)

​ ​ "." home of current application

2 method: it represents the way of sending data from client to server

​ it supports two ways, those are ​ ​

​ get:

​ > it displaying data in address bar

https://www.redbus.in/search ?
fromCityName=Hyderabad&toCityName=Guntur&onward=10-Jan-2022&opId=0&busType=Any

> get method stores user inputs in browser history

> it’s less secured

> get is a default method

> we can bookmark these pages

​ > get methods max data limit is 5.7kb

​ > get is faster than post

​ > it supports to send text data only

​ use-case's search page, retrieving data from db, ...

​ Post:

​ > it not displaying any data in address bar

​ ​ ​ https://www.redbus.in/search

https://www.irctc.co.in/nget/booking/train-list

> post method doesn’t store user inputs in browser history

​ > it's more secured

​ ​ > we can't bookmark these pages

​ ​ > post method data no limit

​ ​ > post method slower than the get

use-case's login page, sign-up page, registration pages, ...

3 target : its rep where to open destination page,

​ _self, _blank, parent, framename ..

​ default is _self

4 enctype : it rep in which format we are sending data to server

​ html support two types, those are

​ ​ >application/x-www-form-urlencoded​ ​

​ ​ ​ If you want to send data to the server without attachment and file
uploading use this method.

​ ​ ​ It is default option

​ ​ >multipart/form-data

​ ​ ​ if u want send data to server with attachment and file uploading

5 autocomplete : it automatically saves data while typing in the UI (textbox, password, address,
pincode, ....)

​ ​ on/off
​ ​ on is default

6 novalidate : while submitting html perform some basic validation, if u don't do those
validations, switch off this.
check box

>check boxes are used to allow the user to select some options, for example product, class,
color selection, sport selection, select branch, select collage etc.

>whenever we want to select more than one option use check box's

>if the checkbox is selected/checked it returns "on'' (true) value, if the checkbox is unchecked it
returns "off" (false) value.

​ ​ checked on (SSP), true (CSP)​

​ ​ un checked off (SSP), false(CSP)

100cb => same purpose => 100cb name should be same

100cb =>20cb =>purpose games => 20 name should be games

​ ​ 30cb =>purpose sports => 30cb name is sports

​ ​ 50cb => name3

SYn:

<input type="checkbox" attributes>

Note: all check boxes should be created with the same name.

"checked" attribute of the check box makes the checkbox by default checked, while opening the
page.

Syn:​ checked="checked" before html5 ver

​ checked​ ​ since html5 ver

radio button

> RB is used to display two or more options to the user, but allows the user to select any one of
them.

SYn:

<input type="radio" attributes>

Note:

> all RBs should be created with the same name.

> "checked" attribute of RB makes the RB by default selected, while opening the page.

file

>file used to upload or attachment

>we can upload or attach any type of file, but @time a only one file

Syn <input type="file" attributes>

attributes:

multiple => it allows multiple to upload @time

accept => filtering type of file

Note:

while uploading file method should be "post" and enctype is "multipart/form-data"

color

>used to select color by user, selected color we can apply on any control using JS

Syn: <input type="color">

date & time controls

date

>used to create a date box (date picker/popup calendar), where the user can select a date.

>the browser by default provides a built-in date picker.

Syn: <input type="date" attributes>

time

>used to create a time box, where the user can enter/select time (in the form of hours, minutes
and seconds)

Syn:​ <input type="time" attributes>

datetime

>used to create a date-cum-time control

Syn: <input type="datetime-local" attributes>

month

>used to create a month box, where the user can select a month.

Syn: <input type="month" ...>

week

>used to create a week box, where the user can select a week.

Syn: <input type="week" ...>

email

>used to create an email textbox, where the user can enter a valid email id only.

>it displays an error message automatically (built-in validation), if the user enters other than
email id (should contain @ and .).

Syn: <input type="email" attributes>

url
>used to create an url box, where the user can enter a valid url for downloading files or playing
videos.

>it displays an error message automatically (built-in validation), if the user enters other than url.

Syn: <input type="url" attributes>

range

>used to create a slider bar, based on the specific range.

>this control req min value and max value, if we are not specified then browser takes default
values.

Syn: <input type="range" attributes>

attributes

​ min => it sets min value of slider

​ max => it sets max value of slider

​ step => it sets increment value

value => sets indicator init position

appearance: slider-vertical;

search

> used to create a search box, where the user can enter some search text, it also displays a clear
button to clear the text inside the search box.

Syn: <input type="search" ... >

dropdown (combo box) control

>using the "select" tag we can create a dropdown list/CB.

>dropdown list is used to display some options/items to the user and allows the user to select
any one of them.

>"option" sub tag of "select" tag.

> "option" tag used to create/to add items/options to dropdown list.

> both are paired tags.

> select is inline element and option is block level element

Syn:​ <select attributes>

<option attributes> Text </option>

<option> Text </option>

​ ...

​ </select>

new Syn:

<option> Text </option>

​ <option value="ws" > text </option>

Note: by default, DDB is displaying 1st added option/tiem

attributes:

selected : this attribute of "option" tag, used to change default selected option/item of DDB

list box

>using the "select" tag we can create a list box.

>list box is used to display some options/items to the user and allows the user to select any one
of them (by default).

> "option" sub tag of "select" tag.

> "option" tag used to create/to add items/options to the list box.

> "size" attribute used to change DDB into List box.

Syn:​ <select size="N" attributes>

<option attributes> Text </option>

<option> Text </option>

<option> Text </option>

​ ...

​ </select>

Note: by default DDB is displaying 1st added option

attributes:

selected : this attribute of "option" tag, used to change default selected option/item of DDB

multiple :it allows user to select more than one option @time

size :attribute used to change DDB into List box and no.of options to display @time

option groups

> "optgroup" tag is used to group-up some options/items inside the "select" tag.

> one "select" tag can contain many "optgroup" tags, the "optgroup" tag contains many
"options".

>its paired tag

> "optgroup" tag is the sub tag of "select" tag.

Syn:

​ <select>

​ ​ <optgroup label="Text">

​ ​ <option> ..</option>

​ ​ <option> ..</option>

​ ​ <option> ..</option>
​ </optgroup>

​ <optgroup>

​ ​ ​ ...

​ </optgroup>

</select>

textarea

>"textarea" tag is used to create a multi-line textbox.

​ use case: comments, address, feedback, delivery instr, ...

>its paired tag& inline tag

>it creates a multi-line text box, with default sizes (2row & 20 col)

Syn: <textarea attributes>

init value

</textarea>

attributes:

rows : it rep no.of lines to display @time, if more lines of data entered​

​ automatically scrollbar is activated.

cols : it rep no.of chars per line

maxlength : it rep total no.of chars allowed in textbox.

Note: user can resize the textarea, at runtime in the browser.

progress bar

> "progress" tag is used to display the progress of a task.

> to move progress bar dynamically, we have to use "JS"

> it is a paired tag.

SYn: <progress attributes></progress>

attributes:

min ​ max​ ​ value

label

> label tag is used to create heading/prompting messages for elements or controls.

> label providing description for controls, it gives an idea to user what we have to type.

> when the user clicks on the label, the cursor will appear in the associated control
automatically.

>its paired tag.

SYn: <label attributes> text </label>

attributes

for : used to specify the id of the control that is associated with the control

Note: labels are not sent to the server while submitting the form.

HTML5 tags

Datalist

Syn:​ <datalist attributes>

​ ​ ​ <option>text</option>

​ ​ ​ ​ OR

​ ​ ​ <option value=”text”>
​ ​ ​ ….

​ ​ </datalist>

Mapping:​ <input type=”text” list=”datalist-id”/>

output tag

> this tag used to print data/output value on webpage.

> it is paired & inline element.

Syn <output attributes> text </output>

details and summary

>details and summary tags are used to allow the user to expand/collapse some information,
when the user clicks on the heading.

>both are paired& block level

> details tag is the main tag and summary is the sub tag of details tag.

Syn:

​ <details>

​ ​ <summary>Short info</summary>

Detailed Information

</details>

header

>"header" tag represents header bar, which may include website logo, search box, main links,
etc...

>it doesn’t provide any styles by default; we have to apply styles manually, using CSS.
>its paired tag.

Syn: <header>

​ ​ place header content here

​ </header>

nav

>"nav" tag represents navigation bar, which may include top navigation menus.

>it doesn’t provide any styles by default; we have to apply styles manually, using CSS.

>its paired tag.

Syn: <nav>

​ place menus/links here

​ </nav>

section

>"section" tag represents a specific section of the page(box or container), which may include
main-content/information.

>it doesn’t provide any styles by default; we have to apply styles manually, using CSS.

>its paired tag.

Syn: <section>

​ place main content here

​ </section>

footer
>"footer" tag represents the footer part of the web page, which may include information of
contact, faqs, location, copyrights, etc...

>it doesn’t provide any styles by default; we have to apply styles manually, using CSS.

>its paired tag.

Syn: <footer>

​ place footer content here

​ </footer>

aside

>"aside" tag represents the "right-side" part of the web page, which may contain ads/other
promotional information.

>it doesn’t provide any styles by default; we have to apply styles manually, using CSS.

>its paired tag.

Syn: <aside>

​ place ads/extra info here

​ </aside>

article

element specifies independent, self-contained content.

●​ Newspaper articles
●​ Forum posts
●​ Blog posts
●​ User comments

Syn: <article>

​ place ads/extra info here

​ </article>

figure

The <figure> element is used for indicating self-contained content. The tag can include images,
diagrams, illustrations, code examples, etc.

figcaption

The <figcaption> element is used for adding signature or annotation to the <figure> tag.

Syn:​ ​ <figure>

Image

<figcaption> caption/text </figcaption>

</figure>

mark

The <mark> element is used to mark a part of the text which has relevance. It can be used to
highlight a text for showing emphasis, highlight search terms in search results to provide
context, or distinguish a new content added by the user by showing it differently

Paired tag & inline

Syn:​ ​ <mark> text </mark>

bdi

The <bdi> element is used to isolate bidirectional text when a language with a right-to-left
directionality, such as Arabic or Hebrew, is used inline with left-to-right languages

Paired tag & inline

Syn:​ ​ <bdi> text </bdi>

base tag

this tag is used to specify a base URI or URL to use for all relative links contained within an
HTML document.

Only one “base” element can be specified within a document, and it must be placed within
“head” element.

We can also specify how other links should open using the target attribute.

Its unpaired tag

Syn:​ <base href=”base-url” target=”target”/>

Audio tag

The <audio> is one of the HTML5 elements added to allow embedding audio files to a web
page. Since not all browsers support all audio formats, the audio file is encoded using special
codecs.

The <source> tag or the src attribute is used to indicate the variations of the same audio file.
The path to an audio file can contain absolute or relative URLs.

Syn:-

<audio attributes></audio>

​ OR

<audio attributes>

​ <source src="filename" type="audio/type">

</audio>

Attribute ​ Definition
src​ URL => Specifies the path to the audio file.

controls Displays the control panel (start button, scroll, volume control).

​ If the controls attribute is missing, the audio file will not be

​ displayed on the page.

autoplay Plays the audio file automatically after loading the page.

loop ​ Repeat the audio file from the beginning after its completion.

muted ​Mutes the sound when the audio file is played.

Video tag

The <video> is one of the HTML5 elements added to allow embedding video files to a web page.
Since not all browsers support all audio formats, the audio file is encoded using special codecs.

The <source> tag or the src attribute is used to indicate the variations of the same audio file.
The path to an audio file can contain absolute or relative URLs.

Syn:-

<video attributes></video>

​ OR

<video attributes>

​ <source src="filename" type="video/mp4">

​ ...

</video>

Attribute ​ Definition

src​ URL => Specifies the path to the video file.

controls Displays the control panel (start button, scroll, volume control).

​ If the controls attribute is missing, the video file will not be

​ displayed on the page.

autoplay Plays the audio file automatically after loading the page.

loop ​ Repeats continuously the audio file from the beginning after its

​ completion.

muted ​Mutes the sound when the audio file is played.

width ​width of video player

height ​height of video player

poster ​to set wall poster/paper of video

frameset & frame

iframe

> "iframe" stand for inline-frame, html5 rel tag

> placing one webpage result within another webpage.

> its paired tag & inline tag

Syn:

<iframe attributes>

</iframe>

att:

src => which page we want to include

srcdoc => it displaying text

width =>

height =>

frameborder => disable/enable border

map tag

> this is used to map an img to other images or webpages.

> map tag used to explore internal details about par area of img

> area is sub tag map tag

> area tag used to create mapping co-ordi

> map tag should link img tag ny using "usemap" attribute of img

> map is paired and area is non-paired

Syn:

<imgsrc="image">

<map name="">

​ <area shape="" href="" coords="" alt="">

​ <area shape="" href="" coords="" alt="">

​ ...

</map>

Shape:​it rep mapping area shape.

​ it sup 3 shapes, those are

​ > circle
​ >rect

​ > poly

Href​ its destination url or image

coords​shape x and y co-ords

​ https://www.image-map.net/

marquee tag

> used to move text/element in different directions

> its deprecated tag.

> its paired tag

Syn:

<marquee attributes>text|img| component </marquee>

attributes:

​ direction => down, up, left (default), right

​ loop => continues moving (default)

​ scrollamount => 6

​ scrolldelay => 84ms

​ behavior => alternate

meta

> data about data means we provide some info/details about a webpage.
> meta is unpaired

> meta is sub tag of <head> tag

> by using meta we can provide info to browser, search engines, users/programmers.

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="HTML and CSStutotrial">

Define the author of a page:

<meta name="author" content="SK">

Refresh document:

<meta name="refresh" content="45">

<meta http-equiv="refresh" content="time; url=URL">

Setting the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tab 2
HTML: Hypertext Markup Language
It is specially designed hypertext for web browsers, with meaningful tags or
elements in simple English language.
HTML is developed by tim berners lee - 1993
w3c.org
World wide web

HTML Versions
From the W3C organization there are the following versions released.
Version Specification ​ Release Date
1.0 N/A (HTML 1.0) ​ 1993-dec/1994 ​
2.0 HTML 2.0 ​ 24-Nov-1995
3.2 W3C: HTML 3.2 ​ 14-Jan-1997
4.0 W3C: HTML 4.0 ​ 24-Apr-1998
4.1 W3C: HTML 4.1 ​ 24-Dec-1999
5.0 WHATWG ​ 28-Oct-2014
5.1 W3C: HTML 5.1 ​ Nov-2016
5.2 W3C: HTML 5.2 ​ 14-Dec-2017
HTML introduction
1. HTML was developed by “Tim-Berners-Lee”, released in 1993-dec/94
and maintained by W3C Org. ​ ​

2. HTML stands for “Hypertext Markup Language”.

“Hypertext” means the text that can be transferred from internet server to
internet client.

"Markup" means which syntax will be in the form of tags or you simply
"markup" a text document with tags that tell a Web browser how to
structure it to display.

“Language” is an interface between web developer and web browser

3. Technically, HTML is not a programming language, but rather

a markup language.
4. HTML is used to design "static web pages", static web pages that
always show the same information.

5. ​ HTML is “client side tech”. That means the html code executes on the
client browser but not on the server. ​ ​

7. For working html no need installs any software, and browser is

responsible for executing & producing output of html programs.

​ Typing & saving ⇒ VS Code

​ Execution & result ⇒ Browser

8. Html is error free programming.

​ (while working with url/address only we will get errors)

 9. HTML is not a case sensitive language that means you can write
the html code in either uppercase or lower case.

10. HTML is an interpreter-based language. Browser interprets HTML code.

Translators: converting high level code (human) into machines level code
(MP/OS) is called translation.

Who performs this operation are called translators.

Types: ​ compiler, interpreter, assembler

interpreter it translates code line-by-line and executes line-by-line

(interpretation)

​ interpreter

​ html code ⇐=============⇒ machine code

​ (English) (Binary code)

Structure of HTML
As per W3C we have to follow the following structure to design web pages
(but it’s not comp).
<!DOCTYPE html>

<html lang=”en”>
<head>
</head>
<body>
</body> ​ ​

</html>

Generally, html program contains three parts, those are:

​ > Versioning section ​

​ > Head section

​ > Body section

Versioning section

This is providing information to the browser which version we are

using in the web page/program. So, the browser is interpreting
code and producing output as per given specification.

Syn: ​ <!DOCTYPE html version-url>

HTML4.0:
<!DOCTYPE html public "-//W3C//DTD HTML 4.0//EN"
"http://www.w3c.org/TR/html4/strict.dtd">

​ <!DOCTYPE html> ⇐ use’s new version of html

html tag - root element

The <html> tag represents the starting and ending of an html

program. html tag contains two child/sub tags those are head tag
and body tag.

head tag

head tag represents a non-content section (means not output) of

the web page.

This information doesn't appear on the web page/in the browser

(it's called as non-content), but it's used internally by the browser.

This tag is used to set icons, title, to provide some meta data (info
about web app), css settings.

head tag contains some child/sub tags, those are ​

​ <link>, <title>, <meta>, <style>, and <base> tags

body tag

body tag represents content information (means output) of the

web page.

this information appears on the web page/in the browser (it’s

called content).

This tag is used to design UI or to display output.

body tag contains so many child/sub tags.

some of tags: p, img, h1, table, div, a, table, audio, video, input,
button, form, ol, ul, li, hr tags …

how design & execute html programs

⇒ open any text editor (sw) and type program.

notepad, editplus, notepad++, textpad, sublime, vs code,

atom, coffee, ...

⇒ save that program with any name (.html or .htm) and anywhere
in the system.

⇒ execution: ​

​ 1st Approach: goto file location, then double click on file

​ 2nd Approach: goto file location, then right click on file and
click on open then select browser
 ​ 3rd Approach: open any browser, then goto address bar and
type filename with address.

for ex: d:/siva/test.html ​ e:/test.html

HTML Elements and Tags

Tag:
1.​ Tag is a predefined program, program is instructions / command
to the browser
· A tag is a keyword, enclosed within "<" and ">" in HTML language.
· It is a special kind of text placed between the left angular brace and
right angular brace(<tag_name>).
· · Tag is used to display some specific output in the web page.
· Browser did not identify the tag; it shows a blank page or it prints as
text.
· tags also represented as elements.

types of tags

in html we have two types tags, those are:

1. paired tags
⇒ Contains open tag and closing tag.
⇒ Opening tag specifies starting point of operation/output, closing tag
specifies ending point of operation/output.

Syn: <tagname> text </tagname> ​

ex: ​ <html> ... </html>

 ​ <head> ... </head>

​ <body> … </body>

​ <script> ... </script>

<style> ... </style>

​ <p> … </p> ​

note: paired tags also called as body-full tags

2. unpaired tags
⇒ contains only open tags.

​ Syn: <tagname> ​ or ​ <tagname/>

​ ex: <br/> ​ <img/> <input/> ​<hr> <link> <meta>

⇒ Unpaired tags also called as body-less tags
⇒self closed tags

demo.html
<!-- demo on html -->

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>
 Welcome to The Web World&#128525;

</body>

</html>

Comment lines
⇒ Comment lines are to provide some description about
our program.

⇒ Comments are not executed by browser.

Syn:

<!-- text -->

html is a collection of tags(elements) and every tag has some

attributes.
Tab 3
 1.​ Introduction to HTML
○​ Introduction of HTML
○​ Structure of an HTML document
○​ Basic syntax and tags
2.​ HTML Elements and Attributes
○​ HTML tags (e.g., <html>, <head>, <body>)
○​ Attributes and their usage
3.​ Text Formatting Tags
○​ Headings (<h1> to <h6>)
○​ Paragraphs (<p>)
○​ Bold, Italic, and Underline (<b>, <i>, <u>)
○​ Superscript and Subscript (<sup>, <sub>)
4.​ Lists
○​ Ordered lists (<ol>)
○​ Unordered lists (<ul>)
○​ Definition lists (<dl>, <dt>, <dd>)
5.​ Links and Hyperlinks
○​ Anchor tags (<a>)
○​ Internal, external, and email links
○​ Link attributes (href, target)
6.​ Images
○​ Adding images using <img>
○​ Image attributes (src, alt, width, height)
7.​ Tables
○​ Creating tables (<table>, <tr>, <td>)
○​ Table headers and footers (<thead>, <tfoot>)
○​ Merging cells (colspan, rowspan)
8.​ Forms and Input Elements
○​ <form> tag and its attributes
○​ Input types (text, password, email, checkbox, radio, submit, etc.)
○​ Labels and placeholders

Intermediate Level

1.​ Semantic HTML

○​ Understanding semantic tags (<header>, <footer>, <main>, <article>,
<section>, <aside>, <nav>)
2.​ Media Elements
○​ Embedding videos (<video>) and audio (<audio>)
 ○​ Adding captions and controls
3.​ Forms Advanced
○​ Select dropdowns (<select>)
○​ Textareas (<textarea>)
○​ Form validation (HTML5 attributes like required, pattern, min, max)
4.​ HTML5 Features
○​ Canvas (<canvas>) for graphics
○​ Geolocation API
○​ Drag and drop
5.​ Metadata and SEO
○​ <meta> tags
○​ Page title and description (<title>)
○​ Open Graph Protocol
6.​ HTML Entities
○​ Special characters (&nbsp;, &lt;, &gt;, etc.)
7.​ Iframe
○​ Embedding external content using <iframe>

HTML introduction

1.HTML was developed by “Tim-Berners-Lee”, released in 1993-dec/94 and

maintained by W3C Org. ​
2. HTML stands for “Hypertext Markup Language”. It is used to create web pages
and web applications.

"Markup" means which syntax will be in the form of tags or you simply
"markup" a text document with tags that tell a Web browser how to
structure it to display.

“Language” is an interface between web developer and web browser

3. Technically, HTML is not a programming language, but rather

a markup language.
 4. HTML is used to design "static web pages", static web pages that
always show the same information.

5. ​ HTML is “client side tech”. That means the html code executes on the
client browser but not on the server. ​ ​

7. For working html no need installs any software, and browser is

responsible for executing & producing output of html programs.

​ Typing & saving ⇒ VS Code

​ Execution & result ⇒ Browser

8. Html is error free programming.

​ (while working with url/address only we will get errors)

9. HTML is not a case sensitive language that means you can write
the html code in either uppercase or lower case.

11. HTML is an interpreter-based language. Browser interprets HTML code.

Translators: converting high level code (human) into machines level code
(MP/OS) is called translation.

Who performs this operation are called translators.

Types: ​ compiler, interpreter, assembler

interpreter it translates code line-by-line and executes line-by-line
(interpretation)

​ interpreter

​ html code ⇐=============⇒ machine code

​ (English) (Binary code)