Scribd
Upload
17 views

All in One HTML Notes

The document provides an overview of the fundamentals of websites, including definitions of key terms like websites, web pages, web browsers, web servers, URLs, HTTP, and HTTPS. It then discusses how to make websites using coding languages like HTML, CSS, JavaScript, PHP, and Bootstrap or without coding using platforms like WordPress, Shopify, and Wix. Finally, it provides examples of common website types and basic HTML tags and elements.

Uploaded by

yovip48289
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

All in One HTML Notes

The document provides an overview of the fundamentals of websites, including definitions of key terms like websites, web pages, web browsers, web servers, URLs, HTTP, and HTTPS. It then discusses how to make websites using coding languages like HTML, CSS, JavaScript, PHP, and Bootstrap or without coding using platforms like WordPress, Shopify, and Wix. Finally, it provides examples of common website types and basic HTML tags and elements.

Uploaded by

yovip48289
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

Fundamentals of Website

1) What is Website ?

• Website is collection Web pages.

• A Single Webpage Containing Your Content eg. Images, Video,


Audio, Text.

• For Example : http://halftech.epizy.com

http://miracledeveloper.epizy.com

2) What is Web Pages?

A Webpage is Collection Of Elements

Containing The Content For Eg. Video, Audio, Text.

3) Web Browser

• A Web Browser is a Software used to view web pages or website


available on the internet

• For Example Internet Explorer Google Chrome, Mozilla Firefox

4) Web Server

• A Web Server is an application or a computer that sends


Webpages over the internet using the HTTP Protocol. The
Functionality of website is managed by web server.

• For Example Apache, nginx,IIS.etc.

5) URL (Uniform Resource Locator)

• It is an address of a web page on the internet.

• The web Pages are Retrieved from the Original Location with the
help Of Url

• For example: http://halftech.epizy.com


6) HTTP

• HTTP (Hypertext Transfer Protocol) is a protocol used by WWW


for client server Communication

• Whatever data you send from your browser to the web server.

• Whatever information you get from web server to the Browser

• It is possible through the HTTP

7) HTTPS

• HTTPS Stands For Hypertext Transfer Protocol

• Secure Connection Between Webserver and Web Browser

• Data will be Completely Encrypted Form

• Website Ranking in Google get preference to the Https

8) How to Make Website

With Coding Without Coding


 HTML (Hyper text  Wordpress
Markup Language).  Shopify
 CSS (Cascading  Wix.com
Style Sheet).  Godaddy
 Javascript  Domain.com
 PHP  Zyro & many more
 Bootstrap
 ASP.NET C#
 Python ( Django )
9) Which Type Of Website We Make

• Static Website

• Dynamic Website

• E-Commerce Website

• Education Institute Website

• Web Portals

• Business website

• Entertainment Website

• Movie Website

• E-Learning Website Etc.

HTML Basic

1991 Tim Berners-Lee invented HTML

 The <!DOCTYPE html> declaration defines that this document is an HTML5


document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>
</body>
</html>

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>


The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Basic tags of Html

1) heading tag <h1>…..<h6>


2) marquee tag <marquee>…..</marquee>
3) paragraph tag <p>…</p>
4) horizontal line <hr>
5) Breaklines <br>
6) Bold : <b> .....</b>
7) Subscript: - <sub>......</sub>
8) Superscript :- <sup>.....</sup>
9) Strike :- <s>.....</s>
10) Italic : <i>.....</i>
11) Under line :- <u>.....</u>

Output:-
Examples
Code :
<!doctype html>

<html>

<head>

</head>

<body>

<h1>This is Heading1 </h1>

<h2>This is Heading1 </h2>

<h3>This is Heading1 </h3>

<h4>This is Heading1 </h4>

<h5>This is Heading1 </h5>

<h6>This is Heading1 </h6>

<marquee direction =”left”>Hello This is one Announcement</marquee><hr>

<p>Hello This Vishwajit Rajbhar From Speakwell and Matrix

Computer Education <br>Here i am Going to teach you

HTML</p>

<b>Matrix Computer Eduaction</b><br>

<i>HTML Programming </i>


<u>Underline</u>

<p> This product is available on Rs.1000 but you will get this

product in Rs.800 Cost <s>Rs.1000 </s>Rs.800</p><br>

<p>x<sup>2</sup>+x+c</p>

<p>H<sub>2</sub>O</p>

</body>

</html>
HTML LIST
HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example

<ul type="square">
<li>This is unordered list</li>
<li>This is unordered list</li>

Unordered HTML List - Choose List Item Marker

Value Description
disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Nested HTML Lists


Lists can be nested (list inside list):

<ul type="square">
<li>This is unordered list</li>
<li>This is unordered list</li>
<li>
<ul>
<li>This is HTML </li>
<li>This is HTML </li>
<li>This is HTML </li>
</ul>
</li>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol type="a">
<li>This is ordered list</li>
<li>This is ordered list</li>
<li>This is ordered list</li>
</ol>
Ordered HTML List – The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers
Control List Counting
By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:

Example

<ol start="50">
<li>C</li>
<li>C++</li>
<li>JAVA</li>
</ol>

Nested HTML Lists


Lists can be nested (list inside list):

<ol type="a">

<li>This is ordered list</li>


<li>This is ordered list</li>
<li>
<ol>
<li>This is Elon </li>
<li>This is Elon </li>
<li>This is Elon </li>
</ol>
</li>
<li>This is ordered list</li>
</ol>
HTML FORM
The HTML <form> element is used to create an HTML form for user input:

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on


the type attribute.

The <label> tag defines a label for many form elements.

HTML Form Elements

Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list


<option> Defines an option in a drop-down list

<button> Defines a clickable button

Code:
<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>
<h1>Admission Form </h1>

<form>
<fieldset>
<legend>Form:</legend>
<input type="text" placeholder="Enter your Name" required=""
autofocus="" maxlength="10"> <br><br>
<input type="tel" placeholder="Enter your Phone no"> <br><br>
<input type="email" placeholder="Enter your Email "> <br><br>
<input type="text" placeholder="Enter your Courses"> <br><br>
<input type="password" placeholder="Enter your password"> <br><br>
<input type="date" placeholder="Enter your date"> <br><br>
<input type="datetime-local" placeholder="Enter your Local Date &
Time"> <br><br>
<input type="week" placeholder="Enter the week"> <br><br>
<input type="search" placeholder="Enter your Quries"> <br><br>
<input type="month" placeholder="Enter the month" readonly="">
<br><br>
<input type="time" placeholder="Enter the time" disabled=""> <br><br>
<input type="number" min="1" max="5" placeholder="Enter your number">
<br><br>
<label> Gender:- </label> <br> <br>
<input type="radio" name="G1" checked=""> Male <br> <br>
<input type="radio" name="G1"> Female <br><br>

<input type="checkbox" checked=""> Do you submitted your Adhar card ?


<br><br>
<input type="checkbox"> Do you submitted your Passport size photo ?
<br><br>
<input type="checkbox"> Do you submitted your PAN card ? <br><br>

<label for="file">Upload your Signature Photo </label>


<input type="file"> <br> <br>
<label> Admission done by :- </label>

<select name="Admission">
<optgroup label="Rich People">
<option value="rp">Please select one Billionaire"</option>
<option value="Bill"> Bill Gates </option>
<option value="Elon"> Elon Musk</option>
<option value="Jeff"> Jeff Bezoz</option>
<option value="Warren"> Warren Buffet</option>
</optgroup>
</select> <br><br>
<textarea name="text" cols="30" rows="10">Write your
Feedback</textarea> <br> <br>
<input type="button" value="Submit Now">
<!-- <button>Submit Now </button> -->
<input type="reset" value="Reset Now">
</fieldset>
</form>
</body>
</html>
HTML Tables
A table in HTML consists of table cells inside rows and columns

Table Cells
Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Table Rows
Each table row starts with a <tr> and end with a </tr> tag.

tr stands for table row.

Table Headers
Sometimes you want your cells to be headers, in those cases use the <th> tag

th stands for Table Header

HTML Table Headers


Table headers are defined with th elements, each th element represents a
table cell.
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
HTML Horizontal TABLE
<H1>This is HTML Tables</H1>
<table>
<h1> This is Horizontal Table </h1>
<thead>
<tr>
<th>Name</th>
<th>Employee ID</th>
<th> Employee Role</th>
</tr>
</thead>

<tbody>
<tr>
<td>Yash</td>
<td>978546</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>Ayush</td>
<td>99856</td>
<td>Programmer</td>
</tr>
<tr>
<td>Umesh</td>
<td>546123</td>
<td>Product Manager</td>
</tr>
</tbody>
</table>

<table>
HTML Vertical TABLE
<body>
<table>
<H3>This is Vertical Table </H3>
<tr>
<th>Name </th>
<td>Virat</td>
<td>Dhoni</td>
</tr>
<tr>
<th>Employee ID </th>
<td>4578983</td>
<td>7989466</td>
</tr>
<tr>

<th>Employee role </th>


<td>Product Manager</td>
<td>Software Engineer</td>
</tr>
</table>
</body>

Combination of Form & Table


<table>
<form>
<tr>
<td><label> Name </label> </td>
<td><input type="text"></td>
</tr>

<tr>
<td><label>Email</label></td>
<td><input type="email"></td>
</tr>

<tr>
<td><label>Tel No.</label></td>
<td><input type="tel"></td>
</tr>

<tr>
<td><label>Roll No.</label></td>
<td><input type="number"></td>
</tr>
</form> </table>

Hyperlink in Html
Using anchor tag <a>..</a>

Inside anchor tag we place our link


Using href
Syntax :
<a href=” link ”>
Eg <a href=” https://www.amazon.in/”>

<a href=”https://www.instagram.com/”>
Image Map in HTML
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

How Does it Work?

The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the
image by using the required name attribute:

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

UseMap

The usemap value starts with a hash tag # followed by the name of the
image map, and is used to create a relationship between the image and
the image map.

Chapter Summary

 Use the HTML <map> element to define an image map


 Use the HTML <area> element to define the clickable areas in the image
map
 Use the HTML usemap attribute of the <img> element to point to an image
map

Attributes Value Explanation


Shape=”” Rect The coordinates for shape="rect" come in
pairs, one for the x-axis and one for the y-
axis.

Circle To add a circle area, first locate the


coordinates of the center of the circle:

Poly The shape="poly" contains several


coordinate points, which creates a shape
formed with straight lines (a polygon).

Pixels For rect:- The top-left & bottom-right


coordinates
Pixels For Circle:- The center & radius coordinates

Pixels For poly:- The coordinates of all sides

Code :
<!doctype html>

<html>

<head>

</head>

<body>

This is Rectangle Image Map


<img src="indigo.jpg" usemap="#indigoairline">
<map name="indigoairline">
<area shape="rect" coords="4,6,287,178"
href="https://www.goindigo.in/">
</map>
</body></html>

This is Circle Image Map


<img src="air india.jpg" usemap="#airindia">
<map name="airindia">
<area shape="circle" coords=" 137,94,282,89"
href="https://www.airindiaexpress.in/">
</map>

This is Polygon Image Map


<img src="vistara.jpg" usemap="#vistaraairline">
<map name="vistaraairline">
<area shape="poly"
coords="144,7,31,74,253,74,212,170,75,171"
href="https://www.airvistara.com/">
</map>
</body>

</html>
Audio tags
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio controls="" preload="" autoplay="" muted="">
<source src="Audio.mpeg" type="audio/mp3">
</audio>
</body>
</html>

Video Tags
If we use poster the first remove the preload and
Autoplay attributes.
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<video controls="" loop="" autoplay="" preload="" muted=""
poster="sachin.jpg">
<source src="vs.mp4" type="video/mp4">
</video>
</body>
</html>

Image in HTML

HTML Images Syntax


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

The src Attribute


The required src attribute specifies the path (URL) to the image.

The alt Attribute


The required alt attribute provides an alternate text for an image, if the user
for some reason cannot view it (because of slow connection, an error in the
src attribute, or if the user uses a screen reader).

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur


JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

Chapter Summary
 Use the HTML <img> element to define an image
 Use the HTML src attribute to define the URL of the image
 Use the HTML alt attribute to define an alternate text for an image, if it
cannot be displayed

Code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Image</h2>

<img src="pic_trulli.jpg" alt="Trulli"> </body></html>


Span Tag & Div Tag

Definition and Usage of Span Tag


The <span> tag is an inline container used to mark up a part of a text, or a
part of a document.

The <span> tag is easily styled by CSS or manipulated with JavaScript using
the class or id attribute.

The <span> tag is much like the <div> element, but <div> is a block-level
element and <span> is an inline element.

<!DOCTYPE html>

<html>

<body>

<h1>The span element</h1>

<p>My mother has <span>blue</span> eyes and my father has


<span>dark green</span> eyes. </p>

</
body>
</html>

Definition and Usage of Div Tag


The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after
the <div> element.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>The div element</h1>


<div>

<h2>This
is a heading in
a div

element</h2>

<p>This is some text in a div element. </p>

</div>

<p>This is some text outside the div element. </p>

</body></html>

Difference between <div> and <span> Tag in


HTML
Both the tags (<div> and <span>) are used to represent the part of the webpage,
<div> tag is used a as block part of the webpage and <span> tag is used as a inline
part of the webpage like below:

HTML Comments

HTML comments are not displayed in the browser, but they can help document your
HTML source code.

Comments can be used to hide content.

Which can be helpful if you hide content temporarily:


You can also hide more than one line, everything between the

<!-- and the --> will be hidden from the display.

Example
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

Make one HTML Website using


HTML

You might also like