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
