Get all the tags at: [Link]
org/en-US/
Tags
<tag> Text </tag>
Element = tag + text
Heading tags
<h1></h1>
Same for h2,h3,etc
Size of h1>Size of h2>....>Size of h6
(heading sizes are from 1 to 6 only)
Optimisation (convention)
Use h1 only once
Don’t skip headings; use h3 after h2, h2 after h1, etcc
<p></p>
Paragraph tag. Text written b/w them are shown as one para.
<p align=“left”></p>
Used to align text inside the para. It can be:
left
right
center
justify
<br>
Line break tag. Text after this tag is entered in a new line
<center></center>
Align text, img, table, etc to center<
<hr>
Draws a horizontal line
Adds space. Example
INPUT: Hello World
OUTPUT: Hello World
INPUT: Hello World
OUTPUT: Hello World
(has 5 spaces; (4nbsp+1normal))
<strong></strong> OR <b></b>
Makes text bold
<em></em>
Makes text itallic
<u></u>
Underlines textize
<strike></strike>
Strikes text
Void element
Above elements were non-void elements
Void elements:
Only have opening tags
Text isn’t present
<hr/> or <hr>
Adds a horizontal line
<br/> or <br>
Used to go to th next line
Inline text formatting
Outdated method.
Better alternative=CSS
Example:
<font face= “arial” size=”22” color=” blue”> Text </font>
Unordered Lists
INPUT:
<ul>
<li> Element 1 </li>
<li> Element 2 </li>
<li> Element 3 </li>
</ul>
OUTPUT:
• Element 1
• Element 2
• Element 3
For changing the symbol in bullet points: Use CSS
Use Identation while writing the code
Ordered Lists
We use numbers rather than bullet points
Syntax: Just replace<ul></ul> with <ol></ol>
If you want to start the list numbering from let’s say ‘5’ rather than 1
<ol start=”5”>
<li> text </li>
<li> text2 </li>
</ol>
OUTPUT
5. text
6. text2
Adding Links (Anchor element)
INPUT:
Format
<tag attribute = “value” attribute2=”value2”> Content </tag>
Can add any number of attributes
Example
<a href="link address" target= "_blank " >Text/Image</a>
{href is an attribute. Another attribue=dragable}
OUTPUT:
Text/Image will be visible on webpage.
The created link can be accessed by clicking on text/Img
Cursor shape changes when taken over text/img. This indicates that the link has been
created
target= "_blank " is optional. Makes inserted link open in new tab rather than the same one.
Anchor Tags
A link in the web pages which takes us to another part of the web page.
Example:
<a href="#article1">text/img</a>
{Rest of the webpage}
<a id="article1"></a>Article 1
When we click on the text/img we get redirected to Article 1
In #article1 the ‘ # ’ tells that the link of the page is redirecting to some section inside the
web page
Absolute Vs Relative File Referencing
Types of file path
Absolute Relative
HTML file can be saved anywhere. HTML file is saved in projects folder. Projects has
Cat pic is stored in images folder a folder named images where the cat pic is
which is in projects folder stored.
Path: C:/Projects/Images/[Link] See info written below the table
Can’t move the folders We can move the folders. No harm done.
Longer Shorter
Relative file path: Special Charaters
A folder named root. Has file [Link] and sub-folder projects.
A folder named projects. Has file [Link], [Link] and sub-folder images.
A folder named images. Has file [Link]
UP A LEVEL (image is present outside the ‘projects’ folder)
We use ../ (come out of folder)
For example to move up, enter the folder in which “projects” is and link
“[Link]”
We use: ../[Link]
CURRENT LEVEL (image is peresent in the folder projects)
We use ./ (going more inside of our current folder)
For example to link “[Link]”, present in the same folder as [Link]
We use: ./[Link]
DOWN A LEVEL (Image is present in a folder which is present inside projects)
We directly write the address
For example to link “[Link]”, present in sub-folder “images”
We use: Images/[Link]
Adding Images or GIFs
<img src=”image url” height=”333” width=”250” />
OR
<img src=”image url/200” /> (square image of 200*200)
Is a void element (no closing tag used)
Can write height and width in % as well
To get google image address: Right click on image>Open image in new tab>Copy URL
Insert image saved on laptop: Right click on image>Copy as path
Alternate attribute
<img src=”image url” alt=”Text”/>
Text will be visible if image can’t be displayed due to any reason
Adding Videos
Example:
<video height=”10%” width=”50%” controls> {or width=”300” etc}
<source src=”source address” type=”video/mp4”>
Vid is unavailable
</video>
Writing “control” is optional. Can replace it with ”autoplay”
Control adds this below the vid:
Line written belo wthe source. That is “Vid is unavailable” is not compulsory but
preferrable. Will be visible if the vid can’t be accessed.
Source address: Same method as for pic
Width & height = also optional. (Skip height if you want)
Type that is “mp4” visible under “more options” in video
width="50%type="video/mp4"
i-frames (Multiple web-pages website)
HTML document embedded inside another HTML document. That is, it helps us to insert a
webpage inside our current page
Format: <iframe></iframe>
Not supported by all web browsers. Thus add: “iframe not supported” inside the iframe tag
Attributes
→ src (source/address of the webpage to be added)
→ width
→ Height
HTML Boilerpate (Structure)
<!DOCTYPE html> // Tells which version of html we used
<html lang = “en” >
<head> //Not visible on webpage but contains info
<meta charset=”UTF-8”>
<title>Title visible on tab bar </title>
</head>
<body>
</body>
</html>
NOTE:
On VS Code simply type “!” and hit enter. The basic structure gets typed automatically
(Save file as [Link])
Adding Tables
Row : Horizontal : : Column : Vertical
Example
<table width="100%" border="1" bordercolor="blue" cellspacing="2"
cellpadding="2">
<tr>
<td><b>Sport</b></td>
<td><b>Response</b></td>
</tr>
<tr>
<td><b>Basketball</b></td>
<td>28</td>
</tr>
</table>
Nested tables
If width of sub table is 40% then it will be 40% of the cell (of main table) in which it is
present
Attributes
Attributes Function
tr row
td Cell inside row (Can have width attribute)
Border Border thickness
width Table's width (in number or percentage)
bordercolor Border’s colour
cellpadding Space between cell content and cell border
cellspacing Space between 2 cells
colspan For meging cells
Without merging merged
<tr> <tr>
<td>Sport</td> <td colspan= “2”>Heading</td>
<td>Study</td> </tr>
</tr>
“colspan = 2” Means merge 2 cells
nowrap Display text in one line when it’s occupying more than 1 line
Example: <td nowrap> text </td>
background Add background image to the table.
For applying to whole table
<table background= “ ImageAddress ”>
//Table content
</table>
For applying to single row
<tr background= “ ImageAddress ” >
<td>Sport</td>
<td>Respons</td>
</tr>
Similarly for only one cell (inside td)
bgcolor Background colour
Introduction To Forms (Front-end)
1. User Fills the Contact Form ([Link])
• The user enters the details and clicks Submit.
2. Form Data Sent to [Link]
• When the user hits "Submit", the data is sent to the backend script: [Link].
3. PHP Script Processes the Data
• [Link] handles the data:
o It validates the form fields (e.g., checks if an email is entered).
o Based on the validation outcome, it follows one of two paths:
✅ If Data is Valid:
• The script:
o Stores the data in a database (shown by the database icon).
o Sends an email (perhaps a confirmation or notification).
❌ If Required Data (e.g., Email) is Missing:
• The script:
o Shows an error message like "Email Missing, Retry…".
o Loops the user back to the form for correction.
🔁 Typical Validation Checks:
• Empty fields?
• Invalid email?
• Phone number not 10 digits?
• Password too short?
• Special characters where they don’t belong?
Data Transmission
There are two methods for data transmission GET and POST
Feature GET POST
Fetch data (from server)
Function like a webpage, image, yt Send (or submit) data
video
Data is hidden from the
What we selected is
Visibility URL. Is submitted to
visible in URL
the body.
Search, navigation, when Login, upload, form
Use (Example)
we select a sub-menu submit
More secure (data
Security Less secure (URL shown)
hidden)
Bookmarkable Yes No
Length
Yes No
restrictions
Can be cached Yes No
Stay in browser
Yes No
history
Structure
Format: <form></form>
Attributes:
name
action (tells browser where to send the data on submission {for eg [Link]})
method (get/post)
Sub-tags are as follows-
1. HTML format for taking fill in the blank input
Format: <input/>
Attributes
→ name
→ type=”text”
→ maxlength
2. HTML format for drop down menu
Format: <select></select>
Attribute: name
Sub-tag: Option
Format: <option>Write the drop-down menu option</option>
Attribute: Value
Values is what gets saved in database.
Database only stores 2 characters. Thus, value = 2
characters
3. HTML format for Check boxes (allows multiple option selection)
Format: <input/> DisplayedNameOfCheckbox
Use above format for EACH checkbox
Attributes
→ name (each checkbox has diff name)
→ type=”checkbox”
4. HTML format for Radio-button (allows only one option selection)
Format: <input/>
Attributes
→ name (Radio button in same group have the same name. Only one option
of that name will be selected at a time)
→ type=”radio”
→ Value
5. HTML format for long answers
Format: <textarea></textarea>
Attributes
→ name
→ cols (Used to specify column width)
→ rows (Used to specify height)
6. HTML format for Submit and Reset
Format: <input />
Attributes
→ Type (submit/reset)
→ name
→ Value
Example
Output
Input:
Pointers
1. In HTML, you can't put <h3> or <font> directly inside <table> — only <td>,
<thead>, etc., are allowed at that level.
Notes
ON CHROME
Right click on page ---> Inspect
You’ll get the code for the webpage
SCREENSHOT: Windows + Shift + S
ON QNA ASK
1. What did you expect
2. What actually happened
3. Ss of code
4. SS of debug console
VS Code file: Right click > Show preview
Search: Lorem Ipsum or bacon Ipsum or bro ipsum to get random text
To check for errors in your code use: [Link]