HTML Notes for new begginers for HTML CSS
571 views
48 slides
Jan 19, 2024
Slide 1 of 48
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
About This Presentation
Publishing a document involves making it accessible to a wider audience. Whether it's an article, report, or any piece of content, the publishing process is crucial for sharing information effectively. Here's a detailed description within the 2000-character limit:
Publishing a document is t...
Slide Content
HTML
Structure/layout
CSS JS
Style Logic
Structure/layout
CSS JS
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 .
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
index.html
It is the default name for a website's homepage
index.html
It is the default name for a website's homepage
HTML Tag
A container for some content or other HTML tags
<p> </p>This is a paragraph
Element
Content
A container for some content or other HTML tags
<p> </p>This is a paragraph
Element
Content
Basic HTML Page
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
tells browser you are using HTML5
root of an html document
container for metadata
contains all data rendered by the browser
page title
paragraph tag
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
tells browser you are using HTML5
root of an html document
container for metadata
contains all data rendered by the browser
page title
paragraph tag
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>
We can use inspect element/view page source to edit html
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>
We can use inspect element/view page source to edit html
Comments in HTML
<!-- This is an HTML Comment -->
This is part of code that should not be parsed.
<!-- This is an HTML Comment -->
This is part of code that should not be parsed.
HTML is NOT case sensitive
<p> = <P>
<html> = <HTML>
<head> = <HEAD>
<body> = <BODY>
<p> = <P>
<html> = <HTML>
<head> = <HEAD>
<body> = <BODY>
Level 2
Basic HTML Tags
Attributes are used to add more information to the tag
HTML Attributes
<html lang="en" >
Attributes are used to add more information to the tag
HTML Attributes
<html lang="en" >
Heading Tag
Used to display headings in HTML
h1
(most important)
h3
h2
h4
h5
h6
(least important)
Used to display headings in HTML
h1
(most important)
h3
h2
h4
h5
h6
(least important)
Paragraph Tag
Used to add paragraphs in HTML
<p> This is a sample paragraph </p>
Used to add paragraphs in HTML
<p> This is a sample paragraph </p>
Anchor Tag
Used to add links to your page
<a href="https://google.com" > Google </a>
Used to add links to your page
<a href="https://google.com" > Google </a>
Image Tag
Used to add images to your page
<img src="/image.png" alt="Random Image" >
relative url
Used to add images to your page
<img src="/image.png" alt="Random Image" >
relative url
Br Tag
Used to add next line(line breaks) to your page
<br>
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>
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>
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>
Used to display a horizontal ruler, used to separate content
<hr>
Subscript & Superscript Tag
Used to display a horizontal ruler, used to separate content
<sub> subscript </sub>
<sup> superscript </sup>
H O
2
A + Bn
Used to display a horizontal ruler, used to separate content
<sub> subscript </sub>
<sup> superscript </sup>
H O
2
A + Bn
Pre Tag
Used to display text as it is (without ignoring spaces & next line)
<pre> This
is a sample
text.
</pre>
Used to display text as it is (without ignoring spaces & next line)
<pre> This
is a sample
text.
</pre>
Level 3
Page Layout Techniques
using Semantic tags for layout
<header>
<main>
<footer>
using the Right Tags
using Semantic tags for layout
<header>
<main>
<footer>
using the Right Tags
Inside Main Tag
Section Tag
<section>
For a section on your page
Article Tag
<article>
For an article on your page
Aside Tag
<aside>
For content aside main content(ads)
Section Tag
<section>
For a section on your page
Article Tag
<article>
For an article on your page
Aside Tag
<aside>
For content aside main content(ads)
Revisiting Anchor Tag
<a href="https://google.com" target="_main" > Google </a>
for new tab
<a href="https://google.com"> <img src="link"> </a>
clickable pic
<a href="https://google.com" target="_main" > Google </a>
for new tab
<a href="https://google.com"> <img src="link"> </a>
clickable pic
Revisiting Image Tag
set height
set width
<img src="link" height=50px >
<img src="link" width=50px >
set height
set width
<img src="link" height=50px >
<img src="link" width=50px >
Div Tag
Div is a container used for other HTML elements
Block Element (takes full width)
Div is a container used for other HTML elements
Block Element (takes full width)
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
List : Div Tags
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
List : Div Tags
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Span Tag
Span is also a container used for other HTML elements
Inline Element (takes width as per size)
Span is also a container used for other HTML elements
Inline Element (takes width as per size)
List : Span Tags
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<tt>
<var>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<tt>
<var>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
Level Pro
List in HTML
Lists are used to represent real life list data.
unordered ordered
<ul>
</ul>
<li> Apple </li>
<li> Mango </li>
<ol>
</ol>
<li> Apple </li>
<li> Mango </li>
Lists are used to represent real life list data.
unordered ordered
<ul>
</ul>
<li> Apple </li>
<li> Mango </li>
<ol>
</ol>
<li> Apple </li>
<li> Mango </li>
Tables in HTML
Tables are used to represent real life table data.
<tr>
used to display table row
<td>
<th>
used to display table data
used to display table header
Tables are used to represent real life table data.
<tr>
used to display table row
<td>
<th>
used to display table data
used to display table header
Tables in HTML
</table>
<th> Name </th>
<table>
<tr>
<th> Roll No </th>
</tr>
<td> Shradha </th>
<tr>
<th> 1664 </th>
</tr>
Name Roll No
Shradha 1664
</table>
<th> Name </th>
<table>
<tr>
<th> Roll No </th>
</tr>
<td> Shradha </th>
<tr>
<th> 1664 </th>
</tr>
Name Roll No
Shradha 1664
Caption in Tables
<caption> Student Data </caption>
Name Roll No
Shradha 1664
Student Data
<caption> Student Data </caption>
Name Roll No
Shradha 1664
Student Data
thead & tbody in Tables
<thead> to wrap table head
<tbody> to wrap table body
<thead> to wrap table head
<tbody> to wrap table body
colspan attribute
colspan="n"
used to create cells which spans over multiple columns
Shradha 1664
Aman 1890
Data
colspan="n"
used to create cells which spans over multiple columns
Shradha 1664
Aman 1890
Data
Form in HTML
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me
<form>
</form>
form content
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me
<form>
</form>
form content
Action in Form
<form action="/action.php" >
Action attribute is used to define what action needs to be
performed when a form is submitted
<form action="/action.php" >
Action attribute is used to define what action needs to be
performed when a form is submitted
Form Element : Input
<input type="text" placeholder="Enter Name" >
<input type="text" placeholder="Enter Name" >
Label
<input type="radio" value="class X" name="class" id="id1" >
<label for="id1">
</label>
<input type="radio" value="class X" name="class" id="id2" >
<label for="id2">
</label>
<input type="radio" value="class X" name="class" id="id1" >
<label for="id1">
</label>
<input type="radio" value="class X" name="class" id="id2" >
<label for="id2">
</label>
Class & Id
<div id="id1" class="group1">
</div>
<div id="id2"> class="group1">
</div>
<div id="id1" class="group1">
</div>
<div id="id2"> class="group1">
</div>
Checkbox
<input type="checkbox" value="class X" name="class" id="id1" >
<label for="id1">
</label>
<input type="checkbox" value="class X" name="class" id="id2" >
<label for="id2">
</label>
<input type="checkbox" value="class X" name="class" id="id1" >
<label for="id1">
</label>
<input type="checkbox" value="class X" name="class" id="id2" >
<label for="id2">
</label>
Textarea
<textarea name ="feedback" id="feedback" placeholder="Please add Feedback" >
</textarea>
<textarea name ="feedback" id="feedback" placeholder="Please add Feedback" >
</textarea>
Select
<option value="Delhi" > Delhi </option>
<select name="city" id="city">
</select>
<option value="Mumbai" > Delhi </option>
<option value="Banglore" > Delhi </option>
<option value="Delhi" > Delhi </option>
<select name="city" id="city">
</select>
<option value="Mumbai" > Delhi </option>
<option value="Banglore" > Delhi </option>
iframe Tag
website inside website
<iframe src="link" > Link </option>
website inside website
<iframe src="link" > Link </option>
Video Tag
<video src="myVid.mp4" > My Video </video>
Attributes
- controls
- height
- width
- loop
- autoplay
<video src="myVid.mp4" > My Video </video>
Attributes
- controls
- height
- width
- loop
- autoplay
All the very best in your future
journey :)
- Aman bhaiya & Shradha didi
journey :)
- Aman bhaiya & Shradha didi
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 571
- Slides 48
- Age 683 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
45 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
45 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
20 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
24 views