HT ML N OTES

How Web Works

How Web Works
Browser: Browser is a client-side application which is used to send requests and get
back the responses from the server.

URL: URL stands for uniform resource locator. When we search for anything in the
browser, It will generate an URL. Ex: [Link]

DNS: DNS stands for Domain Name Server It is responsible for converting URLs into IP
addresses.

Server: It is the place where all the websites are hoisted. Ip address of all data were
stored here.
Http: Https: Http stands for HyperText Transfer Protocol.
It transfers the information as plain text. Https stands for HyperText Transfer Protocol
Secure. It transfers the information in encrypted format
 Attributes in HTML

Attributes are special keywords which are provided in the opening tag of the element , it will
provide additional information about element .

• id - uniquely identify an element. One element should have one id only

• class - used to group similar elements. One element can have multiple classes.
• style - used to give inline css
• title - used to provide the tooltip, which is the extra information to the user, once
he hovers the cursor over the element
 Heading Tags

Heading tags are basically used to provide

title or subtitle to the content in the webpage
these all are paired tags.

We have set of heading tags from h1 to h6.

H1 is the highest in font size &

H6 is the least in font size .
Formatting Tags :
Tags are used to display the content in different formats.

● b → It will display the content in bold format.

● i → It will display the content in Italic format.
● u → It will provide an underline to the content.
● pre →It preserves the Text as it is!
 Semantic tags

The tags itself define

their purpose.

<header>
<article>
<main>
<nav>
<section>
<aside>
<footer>
 Lists in HTML

HTML Lists allows to group the items together. HTML lists were classified into 2 ways.
Ordered list
Group of items in a sequential format, also known as number list.
Tags – ol , li
Attributes – type (format of sequence – 1,a,A,I,i), start (starting position - number),
reversed

Unordered list
Display a set of related items with special symbols, also known as
bullet list
Tags – ul,li
Attributes – type (format of sequence – disc,square,circle,none)
 Image Tag

The <img> tag is used to embed an image in an HTML page.

The <img> tag has two main attributes:

src - Specifies the path to the image .

alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed .

height & width these attribute is used to provide height & width for an image .
 Anchor tag and hyperLink

Anchor tag helps us to navigate from one web page to another webpage , and
within the same page also . By using anchor tags, we can create hyperlinks in a
webpage .
Whatever content you place inside an anchor (<a>) tag becomes a clickable
hyperlink. This content can be text, images, or even other HTML elements.

Hyperlink is a clickable link in a digital document or webpage that takes you to another location.

An unvisited link is underlined and blue.

A visited link is underlined and purple.
An active link is underlined and red.
 Tables in HTML
HTML Tables allow us to store the data in the form of rows and columns
Tags -
• table - table creation
• th – table heading
• tr – table row
• td – table data
• thead – combine all header cell together
• tbody - combine all body cell together
• tfoot - combine all footer cell together
• caption – title to your table
• ATTRIBUTES
• BORDER – TO GET BORDER TO TABLE
• ROWSPAN – MERGE CELLS OVER ROWS
• COLSPAN – MERGE CELLS OVER COLUMNS
 Audio tag

The <audio> tag is used to embed audio content in a document, such as a movie
clip or other audio streams .
Attributes :
Src - Specifies the URL of the audio file .

controls- Specifies that audio controls should be displayed (such as

a play/pause button etc)..
 Video tag

The <video> tag is used to embed video content in a document, such as a movie
clip or other video streams .
Attributes :
Src - Specifies the URL of the video file .

controls- Specifies that video controls should be displayed (such as

a play/pause button etc)..
 Button tag

The <button> tag is used create a button for the user, which can be hoveredand
clicked.
Attributes :
type –It specifies the type of the Button such as submit, reset, and button

controls- Specifies that video controls should be displayed (such as

a play/pause button etc)..
 What is Form ?

"HTML forms are used to collect input or data from users and
send it to a server for further processing."
 What are Form Elements ?

Form elements are the components within an HTML form that allow users
to enter and submit data.
<input> tag is used to create a field where users can enter data, like
text, numbers, or passwords, on a web page
<label> tag in HTML is used to define a caption or name for an input
element It helps users to understand what information they should enter.

<Select> tag in HTML is used to create a dropdown menu where users can
choose one or more options from a list.
<textarea> tag in HTML is used to create a large text box where users
can enter multiple lines of text, like for writing a comment or message.
 What are Form Elements ?

<button> tag in HTML creates a clickable button on a web page. When

clicked, it can perform actions like submitting a form or triggering a
script.
<fieldset> tag in HTML is used to group related elements, like input fields,
within a form. It helps organize the form and often includes a caption
using the <legend> tag.
<legend> tag in HTML is used to provide a title or caption for a
<fieldset>. It helps describe what the grouped form elements are about..

<option> tag in HTML is used to provide the select options in the drop
down list .
 What is HTML Input and its types ?

"HTML <input> is an unpaired tag used to accept different types of input from
a user. The type of input is specified by the type attribute, which can have various
values such as text, email, password, date, and more."
<input type="button">
<input type="checkbox">
<input type="date">
<input type="email">
<input type="file">
<input type="number">
<input type="password">
<input type="radio">
<input type="submit">
<input type=“text">
 Attributes inside form Tag.

HTML <input> elements have several attributes that define their behavior and
appearance. Some common attributes include:

type: Specifies the type of input (e.g., text, email, password).

name: Defines the name of the input field, which is used when data is submitted.

value: Specifies the initial value of the input field.

placeholder: Provides a short hint that describes the expected value of the input.

required: Indicates that the input field must be filled out before submitting the form.
 Attributes inside Form Tag.

disabled: Disables the input field, making it unmodifiable and non-submitable.

min and max: Define the minimum and maximum values for number, date
inputs.

checked: it specifies that an <input> element should be pre-selected (checked)

when the page loads. Can be used with radio and checkbox.

id , for : Used to link the input field with the label. Need to provide the same
values.
 QR code

How to generate QR code

Step 1- Search in google qr code api .

Step 2- click on [Link] .
Step 3- copy the whole link call the
url and paste it in img tag src=“ ” .
Step 4- then paste your target link ,
on which website you want to
navigate .
Thank you