(Cascading Style Sheets)
HTML CSS JS
Structure/layout Style Logic
Level 1
HTML
Hyper Text Markup Language
HTML is the code that is used to
structure a web page and its content.
The component used to design the
structure of websites are called HTML tags.
First HTML File
[Link]
It is the default name for a website's homepage
If not used Error Message appears: Cannot find [Link]
HTML Tag
A container for some content or other HTML tags
(Opening Tag)
(Closing Tag)
<p> This is a paragraph </p>
Content
Element
Basic HTML Page
<!DOCTYPE html> tells browser you are using HTML5 (type of document being used)
<html> root of an html document (Starting Element{Blank Page on which we make changes})
<head> container for metadata Meta Information: Data about Data
Contains the things
that are not displayed
on screen. Only code <title>My First Page</title> page title
needs to know this
</head>
<body> contains all data rendered by the browser
Contains the things
that are actually
displayed on screen
<p>hello world</p> paragraph tag
</body>
</html>
* Responsiveness(changing devices) of webpage in head :<meta name="viewport" content="width=device-width, initial-scale=1.0">
Quick Points
Html tag is parent of head & body tag
Most of html elements have opening & closing tags
with content in between
Some tags have no content in between, eg - <br> * Break Line Tag: Next Line Tag
We can use inspect element/view page source to edit html (Changes made in inspect page doesnot
reflect back on the VS Cade but you may
change your code and view changes in the
screen.)
Comments in HTML // Like comment tag in codes
This is part of code that should not be parsed.
<!-- This is an HTML Comment -->
Short Cut Key: Select the part to be commented and press :: (Ctrl+/)
HTML is NOT case sensitive
<html> = <HTML>
<p> = <P>
<head> = <HEAD>
<body> = <BODY>
Level 2
Basic HTML Tags
HTML Attributes
Attributes are used to add more information to the tag
(Attribute Name = Value)
<html lang="en">
Lang Attribute: Tells us the language in which the code should be written
Heading Tag
Used to display headings in HTML
h1 (most important)
h2
h3 Size decreases as we go down
(Don't use it for size)
h4
h5
h6 (least important)
Paragraph Tag
Used to add paragraphs in HTML
<p> This is a sample paragraph </p>
Toggle Word Wrap: Ctrl+Z
Anchor Tag
Used to add links to your page
<a href="[Link] Google </a>
href: Attribute
"Google": Word that will be displayed.
Link: link that it will open/
* TO GO TO ANOTHER PAGE FORMED BY YOU:
<a href="/PageFolder/[Link]"> Go to Page1<a>
Other website links are called Absolute Links.
Our website links are called Relative Links.
Image Tag
Used to add images to your page
(source) (Alternative)
<img src="/[Link]" alt="Random Image">
/\
relative url
For setting image dimensions use tags here.
(height=value): For height
(width=value): For width
* set one at a time to maintain image aspect ratio
Br Tag
Used to add next line(line breaks) to your page
<br>
Bold, Italic & Underline Tags
Used to highlight text in your page
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Big & Small Tags
Used to display big & small text on your page
<big> Big </big>
<small> Small </small>
Hr Tag
Used to display a horizontal ruler, used to separate content
<hr>
Next Line Tag + Ek line kheech deta h
Subscript & Superscript Tag
Used to display a horizontal ruler, used to separate content
<sub> subscript </sub>
H 2O
<sup> superscript </sup>
n
A +B
Pre Tag
Used to display text as it is (without ignoring spaces & next line)
<pre> This
is a sample
text.
</pre>
*Shows the exact text without any formatting by the VS Code/Editor
Level 3
Page Layout Techniques
using Semantic tags for layout Advantages:
using the Right Tags * Code becomes readible.
* Good user experience.
* Ranings.
<header> (for headings)
<main> (for content of the page)
<footer> (for ending of the page)
Inside Main Tag
Section Tag For a section on your page
<section>
Article Tag For an article on your page
<article>
Aside Tag For content aside main content(ads)
<aside>
Revisiting Anchor Tag
<a href="[Link] target="_main"> Google </a>
for new tab
<a href="[Link] <img src="link"> </a>
clickable pic
Revisiting Image Tag
<img src="link" height=50px >
set height
<img src="link" width=50px >
set width
Div Tag Non Semantic Tags
Div is a container used for other HTML elements
Block Element (takes full width)
By Default: (Height=0)
* Inline Elements takes only the space required by them.
List : Div Tags
<address> <fieldset> <nav>
<article> <figcaption> <noscript>
<aside> <figure> <ol>
<blockquote> <footer> <p>
<canvas> <form> <pre>
<dd> <h1>-<h6> <section>
<div> <header> <table>
<dl> <hr> <tfoot>
<dt> <li> <ul>
<main> <video>
Span Tag
Span is also a container used for other HTML elements
Inline Element (takes width as per size)
<code> <output>
List : Span Tags <dfn> <q>
<a> <em> <samp>
<abbr> <i> <script>
<acronym> <img> <select>
<b> <input> <small>
<bdo> <kbd> <span>
<big> <label> <strong>
<br> <map> <sub>
<button> <object> <sup>
<cite> <tt> <textarea>
<var> <time>
Level Pro
List in HTML SUBLISTS CAN ALSO BE MADE IN A SIMILAR FASHION.
Lists are used to represent real life list data.
unordered (bulleted points only) ordered (normal numbers, roman numbers etc)
<ul> <ol>
<li> Apple </li> <li> Apple </li>
<li> Mango </li> <li> Mango </li>
</ul> </ol>
Tables in HTML
Tables are used to represent real life table data.
<tr> used to display table row
<td> used to display table data
<th> used to display table header
Tables in HTML Name Roll No
<thead>
<table>
here <caption> Shradha 1664
</caption>
<tr>
<th> Name </th>
<th> Roll No </th>
</tr>
</thead> <tbody>
<tr>
<td> Shradha </th> </td>
<td> <th> 1664 </th> </td>
</tr>
</tbody>
</table>
Caption in Tables
<caption> Student Data </caption>
Student Data
Name Roll No
Shradha 1664
thead & tbody in Tables * FOR FORMATTING
<thead> to wrap table head (Headings)
<tbody> to wrap table body (content)
colspan attribute <th colspan="n"></th>
colspan="n" (n: number of columns that it will take.
used to create cells which spans over multiple columns
Data
Shradha 1664
Aman 1890
Form in HTML
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me
<form>
form content
</form>
Action in Form (Storage of data from forms)
Action attribute is used to define what action needs to be
performed when a form is submitted
<form action="/[Link]" > </form>
Form Element : Input
<input type="text" placeholder="Enter Name">
type= "password"
Radio Buttons: toggle keys(only one can be selected at a time)
Label Advantages: Radio button gets selected even when we click on text
(Of Labels)
<label for="id1">
<input type="radio" value="class X" name="class" id="id1"> (what you want to
display)
</label>
<label for="id2">
<input type="radio" value="class X" name="class" id="id2"> (what you want to
display)
</label>
FOR BACKEND FOR USER
Class & Id
<div id="id1" class="group1">
</div>
<div id="id2"> class="group1">
</div>
Checkbox (FOR MULTIPLE CHOICE)
<label for="id1">
<input type="checkbox" value="class X" name="class" id="id1">
</label>
<label for="id2">
<input type="checkbox" value="class X" name="class" id="id2">
</label>
Textarea
<textarea name="feedback" id="feedback" placeholder="Please add Feedback">
</textarea>
we can also add
height
width
rows(number of rows it will take)
column
Select FOR DROP-DOWN MENUS
<select name="city" id="city">
<option value="Delhi"> Delhi </option>
<option value="Mumbai"> Delhi </option>
<option value="Banglore"> Delhi </option>
</select>
FOR SUBMISSION:
<input type="submit">submit</input>
iframe Tag
website inside website
<iframe src="link"> Link </option>
+height
+width
can be done
Video Tag
<video src="myVid.mp4"> My Video </video>
Attributes
- controls (normal controls)
- height
- width
- loop
- autoplay
All the very best in your future
journey :)
- Aman bhaiya & Shradha didi