Introduction to Web & HTML
What is a software?
It is a solution to real world problems. It automates human effort. Set of instructions/programs
to perform some specific task
Type of software:
• Stand alone: Software that works without internet/browser. It is installed directly on users system
eg: ms word, vlc media player, notepad
• Web application: They run on the browser/[Link] can be accessed over the internet by multiple
users Eg:gmail,youtube,ecom websites
Tools:
• Web server:
A system (software + hardware) that stores website files (HTML, CSS, JS, images) and
sends them to users when requested. Eg: Apache HTTP Server, Nginx
• Web browser:
Software used to access, retrieve, and display websites from the internet. eg:Google
Chrome, Microsoft Edge
• Web page:
A single document on the web written using HTML, CSS, and JavaScript.
• www:
A system of interlinked web pages and resources accessed through the internet using a
browser.
What is Web & How it Works:
Web:
• The world wide web is used to access website and web applications using a browser
over the internet.
• Invented by Tim Berners lee
Difference between internet and web:
• Internet: Connect one computer to another. It uses cables, routers or satellite to connect
• Web: Access same website from anywhere
How web work?
• It works using client server architecture
• Client and server-> 2 tier architecture
• Client, server,database->3 tier architecture
• So when a person(client) types [Link] the browser sends a http request to
the DNS here the domain name is given the ip address which goes to the server to get the
content that is requested. the server sends back the html, css, js file back to the client.
• Client->(http request)->dns(ip)->server(gives html,css,js)->(http response)->client
Client–Server Model:
It is a way computers communicate on the web.
Client :
Browser (Chrome, Safari, Edge) or Mobile app or React app or Postman.
Anything that requests data eg:When you open Amazon in Chrome, Chrome is the client
Server: A computer (or program) that listens for requests from clients, processes them, and
sends back responses.
When you type [Link] Your browser (client) sends request GET [Link]
Google’s server Receives request Finds homepage files Sends back HTML, CSS,
[Link] shows Google page.
Technology used for client are html, css, react, view js, next js
Technology used for servers are node expressjs spring boot, django
Front end:
• Look and feel part of the software
• As a user what we can see and where we can interact that part is called front end
• Html,css and javascript are used for front end
Role of HTML, CSS, JavaScript
• Html: insert structure of the webpage
• Css: look and styling of the html element
• Javascript: adds functionality/ behavior to html element
What is HTML?
• Used to design the basic structure of webpage by inserting multi medias using tags
• hypertext markup language
• Hypertext : Hypertext is a text which is having hyperlink to another page.
• Markup lang: It is responsible only to display instruction on the [Link] need of an extra
environment it uses the browser as browsers have rendering engines like Blink in Chrome,
Gecko in Firefox. Instructions are given as tags
Eg: XML,XHTML,JSP,JSX
History of HTML:
• Introduced in 1991 by Tim burners lee released in 1995
• 1st version had 18 tags now there are 140 html tags
• Current version is html 5 in 2014
Why HTML:
• Standalone language for building the web application
• Describes the structure of web page
• Design user interface(user can interact and see)
Features of HTML:
• Easy to learn and use
• Platform independent (run in any os)
• Not case sensitive eg: <HTML> <html> <HtMl>
• Instructions pass through tags all tags are predefined defined using angular brackets
• It has multimedia support(ie image, video, audio)
• We can nest one tag inside another
Types of tags:
1)container tag/pair tag/non empty/non void: has both opening and closing tag
structure: <tag> Content </tag>
eg: <p>Hello</p> <h1>Title</h1> <div>Content</div>
2) non container tag/non pair tag/empty/void: has only opening tag it does not have a
closing tag
structure: <tag>
eg: <br> <hr> <img> <input>
Structure of HTML:
<!DOCTYPE html> ——-> this tells the browser that we are using html 5 version it is
optional to add this. ! means instruction not a tag and this is
used to tell the browser to go into modern mode to process
html5 if not it may not give css properly weird spacing etc
<html> </html> ——-> represents the html document, it has the head and body
section.
<head> </head> ——-> used to deal with the information of the webpage and contains
[Link] can add title of the page <title> My website </title>,
linking the css and adding js pages. It does not display in the
browser it is seen in the inspect section of the browser
<body>———</body> ——-> We add the tags which is displayed in the browser.
All the content added here is displayed on the browser.
Eg:
HTML tags:
a)Text formating tag:
[Link] tag -> Heading tags are used to define titles and headings on a webpage.
<h1> to <h6> it is combination of bold + font size
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Smaller Heading</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>
h1 is the largest font and h6 is the smallest
[Link] tag -> Paragraph tag is used for insert combination of multiple text as
paragraph in web page.
<p>…………..</p>
[Link] break/row break tag->Used to break current row and allows to display rest of
the content in the next line
<br> it is a non-container tag
[Link] line tag -> It also breaks the current line and immediately it will
generate horizontal line then rest of the content will be
displayed in the new line.
<hr> it is a non-container tag
[Link] formatting tag -> used to change the appearance or meaning of text
Bold tag: Used to display text in bold style <b>———</b>
Strong tag: It is an alternate tag to display text in bold style. It is used when we
need bold text which is important. It is introduced in html5.
<strong>———</strong>
Italic tag: It is used to display text in italic style.
<i>———</i>
Emphasize tag: It is an alternative to display text in italic style. When italic text
is [Link] is introduced in html 5
<em>——— </em>
Underline tag: Used to display text with underline
<u>———</u>
Quotation tag: It is used to display text with double quotes
<q>———</q>
note:for single quotes use keyboard quotes only
Strike tag: It adds a line through the text
<s>———</s> or <strike>———-</strike>
Small tag: Used to display text in small size compared to normal text
<small>———</small>
Big tag: Used to display text in big size compared to normal text
<big>———</big>
Subscript tag: Used to display content below the normal text line. Mainly
used to add chemical formulas in webpage
<sub>———</sub>
superscript tag: used to display content above the normal text line. Mainly
used to add mathematical formulas
<sup>———</sup>
mark tag: Is used to highlight text in HTML.
<mark> </mark>
Pe-formatted text tag: used when we have to insert a story/poem
It displays the content in browser as exactly written in
doc it varies in font size,style.
<pre>———</pre>
HTML Element and Attributes:
Element:
• From the starting tag to the ending tag along with the content is called element
• eg: <p>This is a paragraph.</p>
• <p> is opening tag
• </p> is closing tag
• This is a paragraph is content
• Entire thing is HTML element
Attributes:
• It is used to add/give extra info given to html tags. They are added in key value pair
• Eg: image insertion uses <img src> <img> is a tag we have to add src which is the
attribute it gives extra info to the tag
Rules to use attribute:
[Link] attributes inserted within starting tag of html element.
[Link] must be in a key value pair and value should be enclosed
between double quotes
Eg: <img src=”path” alt=” ”> </img> multiple attributes can be added by
adding space
Global Attributes:
• Global attributes can be used on almost all HTML elements.
• eg: id, class, style,title
id:
• Gives a unique name to an element
• Used for CSS styling, JavaScript, or linking
• Must be unique in a page
• <p id="intro">Welcome </p>
class:
• Used to group multiple elements
• Can be used on many elements at the same time
• Reusable
• <p class="text">Paragraph 1</p>
• <p class="text">Paragraph 2</p>
style:
• Used for inline CSS
• Applies style directly to an element
• <p style="color: red; font-size: 20px;”> Hello </p>
title:
• Provides extra information
• Shows as a tooltip when hovering
• <p title="This is additional information”> Hover over this text </p>
Common attribute:
• These attributes are used with specific elements only.
• eg: href, target, rel
Block level and inline elements:
• display nature of the text
• Element that starts in a new line and occupies the entire width of the
webpage is called block level element Eg:header,paragraph
• Elements does not start in new line and occupies the space that’s necessary is called
inline [Link] starts in a new line only if the previous element is a block level
element
• Eg:strong,big,small
a. Abbreviation tag and title attribute:
<abbr title>------</abbr>
Used to get tool tip to display abbreviation about content when user moves cursor
on the content
For this we use title attribute which helps to get tool tip
[Link] bidirectional override tag and dir attribute:
<bdo>———</bdo>
Used to define the display direction of html elements
Default display direction is left to right
<bdo dir> </bdo>
For dir attributes we cant give our own value we can use ltr(left to right) or rtl(right to
left)
[Link] tag and src attribute:
Insert image to the webpage it is a non-container tag or void or empty or self closing
tag
src attribute is used to define the path of the image which need to be inserted to our
webpage
Additional attributes for image tag:
1. height, width (set size of source image)
2. Alt-gives alternate name to the source image, when source image cant be
displayed the name will be displayed in place of image
<img src=”path/name of img” height=”200” width=”150” alt=”picture”>
image formats that are accepted are png, jpg, webp, svg
[Link] tag and href attribute and target attribute:
<a href> </a>
It is used to insert hyper text (text having hyperlink to another page)
href to specify the targeted page the value should be the url of the targeted page
<p> to know more about us <a href=”link to page” target=”_blank”>click here</a></p>
Target attribute is used to specify where to open the targeting page default it opens
in the parent page if we want to open in a diff tab we have to give _blank
[Link] tag:
Insert audio media to the web page
Mandatory attribute:
1. src- define which audio clip need to be inserted
2. controls- to get all control for audio clip in a webpage no value is needed can also
be used as control=”true”
<audio src=” path/name” controls> </audio>
Audio formats that’s supported by html mp3, ogg, wav
f. Video tag:
Insert video to the web page
Mandatory attribute:
1. src- specify the path of source video
2. controls- to get all control for video clip in a webpage
Attributes:
1. height- define size
2. width-define size
3. autoplay- video plays automatically once the page finishes loading only muted
videos can be auto played (takes no value)
4. muted- mute the video
5. loop- play the video repeatedly
6. poster- set a thumb lines to the video before it starts playing poster=”image path”
<video src=” path/name” controls> </video>
Video formats that’s supported by html mp4, webm, ogg
When we need to insert multiple audio, video tags we need to add source
Eg:
<audio controls>
<source src=” “>
<source src=” “>
</audio>
Marquee tag:
It is container tag <marquee> </marquee>
Using this tag we can make scrolling text or image in the html document
The default direction of scrolling is right to left
Attribute used are:
behavior: scroll(default),Alternate(bidirectional)
bg Color: used to provide background for scrolling content
direction: right, left, up,down
height: Used to define the size of marquee tag
width: Used to define the size of marquee tag
scroll amount: Used to provide scrolling speed of the content
HTML List:
List is a Collection of related items
It is a combination of list items and list type
Types of list(classified based on list type):
1. unordered list
· when order doesn’t matter
· list type as only symbols
· symbols- disc,circle,square, none
· creation: <ul>————</ul> to represent an unordered list
· type attribute is used to specify list type
· insertion: <ul type=”circle”>
<li>html</li> //insert list items
<li>css</li>
</ul>
2. ordered list:
· when order matters in list
· list type: numbers(default), alphabets ,roman numbers
· creation <ol>———</ol> represents ordered list
· type attribute is used to specify list type
· in ordered list if type is”a” and we have 27 items then 27 will have aa 28 ab
52 az 53 ba 54 bb
· if we have a ordered list want to start from 5 we need to use start=”5”
eg: <ol type=”1” start=”5”>
start with d
<ol type=”a” start=”4”>
10,9,8..1
<ol type=”1” reversed>
· insertion: <ol type=”alphabets”>
<li>resume prep</li> //insert list items
<li>apply job</li>
<li>preparation</li>
</ol>
3. Description list:
· Used to create a list with the combination description term and description
definition
· Cant give type can add through css
· <dl> </dl> to represent description list section
· <dt> </ dt > to insert description term
· <dd> </dd> to insert the description definition to the description term
4. Nested list:
· List inside another list
HTML Tables:
• An HTML table is used to display data in rows and columns.
• Eg: Student marks, Employee details, Timetables
• Creation: <table border=” value”> </table> table tag represents the table
• section border attribute gives the border to the table if we don’t give a value a default
thickness is taken.
• Insert rows: <tr> </tr> one <tr> represents one row
• Insert columns: <th> </th> or <td> </td>
• The <th> stands for table headers is used to add columns with heading in bold
• <td> is used to add columns with normal data
• caption tag: It is used to add a heading in the centre top of the table
• If we don’t use the border attribute the table is created but we cant see the structure of
the table ie the columns and isn’t visible.
Table head, Table body and Table footer:
These tags help organize table content properly.
<thead> table head
Contains heading rows
Usually includes <th> cells
Appears at the top of the table
<tbody> table body
Contains main data
Uses <td> for data cells
Can contain multiple rows
<tfoot> table footer
Used for totals, summary, or final row
Appears at the bottom (visually)
Often used for totals
rowspan and colspan:
• Colspan and rowspan are the attribute used in <td> and <th>
• Colspan is used to merge 2 or more columns in a row
• Rowspan used to merge 2 or more rows in a column
HTML Forms:
· Part of application or software used to collect user data or user info having
fields and controls
· <form> ———-</form>
· It consists of label, fields and controls
· Insert label for field-> <label for=” ”> </label>
For will take the same value as the id attribute it focuses the field when we
click on the label
· Insert fields in forms<input type=” ”>
· Id attribute used in any tag identifies element with unique identity
· Diff fields in form:
[Link] field/single line text field
Additional attribute for text field placeholder(add default
text),maxlength(restricted [Link] digit),size(width of
field),required(mandatory field)
[Link]
Additional attribute for password field placeholder(add default
text),maxlength(restricted [Link] digit),size(width of
field),required(mandatory field) data is in hidden form
[Link] field
It doesn't allow to add a wrong format of mail id we can use text field
but that wont give an error if the email format is wrong
Additional attribute for email field placeholder(add default
text),maxlength(restricted [Link] digit),size(width of
field),required(mandatory field)
[Link] field or calendar field
Used to add date to web application
Additional attribute is required
[Link] field
Display time
Additional attribute is required
[Link] button:
Select [Link] allows to select only 1 option at a time
Type and name are mandatory attribute
Name attribute creates a group when we create a group we can select
only 1 option from a group
[Link] box:
Allows to select multiple options at a time
Type is mandatory attribute
[Link] down list
Allows to select only 1 [Link] of dropdown list we need to use
select tag
A dropdown button (<select> </select>) is present once we click a drop down
option are displayed(<option> </option>)
[Link] upload
Input tag with type=”file” is used
[Link] area/multiple line text field
To collect multiple line data eg address
We need to use text area tag additional attributes like
rows(height),cols(width) helps specify size of text area when content
goes outside the border it creates a scroll bar for the extra content
[Link] field
Range will be 50% default
l. Buttons
Buttons trigger form actions such as submit, reset, or custom actions.
2 Types of buttons
1. Predefined buttons (submit,reset)should be
created using input
2. User defined (login,signup,register,readmore,click here)
User defined button can be created using input tag with
type=”button” value=”what value has to be displayed on the button” can
also be created using button tag
[Link] field:
add links or url of pages
[Link] field:
Can add a color picker to your form
[Link] set tag:
It is used to add a border to the form
[Link] tag:
Helps to give caption to the form
Insert between fields and form tag to get in the top left
q. Required:
Forces the user to fill in a field before submitting the form.
[Link] and max:
Define the minimum and maximum values for numeric or date inputs.
Only allows numbers between 18 and 99.
[Link]:
Specifies a regular expression that the input must match.
[Link]:
Shows a hint inside the input box about what the user should enter
[Link]:
Used for creating a search field.
Semantic Tags:
Semantic tags clearly describe the meaning of the content inside them.
Semantic tags help with :
Better SEO
Better Accessibility
Clearer and better code readability
a. <header>: Represents introductory content or a container for navigation links.
Can contain: logo, title, search bar, menu.
b. <nav>: Contains navigation links.
c.<section>: Groups related content together. Divides content into logical sections.
d.<article>: Represents independent, self-contained content.
Blog posts,News articles,Forum posts
e.<aside>: Display some content aside from the content it is placed in.
f.<footer>: Represents footer content. Copyright,Contact info,Social media links
IFRAME
• <iframe>———</iframe> inline frame embeds other webpage or doc into the current
page
• eg: adding youtube video or google map to the web page
• Mandatory attribute- src
• <iframe src=”url”> </iframe>
Local Storage:
• Stores data with no expiration time.
• Even after browser is closed, after system restart the stored data does not expire until
manually cleared
• Used for saving user preferences (dark mode) saving login token (careful with
security) cart items in e-commerce remembering theme/language
Session Storage:
• Stores data only for one browser session.
• Data gets deleted when tab is closed, when browser is closed
• Used for otp verification sessions one-time page visit data multi-step form data
Feature Local Storage Session Storage
Storage Limit ~5MB ~5MB
Expiry No expiry Ends when tab closes
Accessible in All tabs (same origin) Only same tab
Use Case Long-term storage Temporary storage
Data Persistence Yes No