What is Website?
- A website is a place on the internet where information is shown using text, images,
videos, and links, and it is opened using a web browser like Chrome, Edge, or
Firefox.
- Website is a collection of various pages written in HTML markup language.
Example
[Link]
[Link]
How a website works
1. You type a website address (URL) in a browser
2. The browser connects to a server
3. The server sends web pages
4. You see the content on your screen
Types of websites
1. Static Website
A static website shows fixed content.
The content does not change automatically.
Technologies used
HTML – structure
CSS – design
(Optional) basic JavaScript
2. Dynamic Website
A dynamic website shows changing content.
Content can change based on user input, time, or database data.
Technologies used
HTML, CSS, JavaScript (frontend)
PHP / Python / Java (backend)
Database (MySQL, SQL Server)
What is Browser?
Web browsers are software installed on your pc. To access the web you need a web
browser, such as Netscape Navigator, Microsoft internet explorer or Mozilla Firefox.
What is web Server?
Every website sits on a computer known as a web server. This server is always
connected to the internet is given a unique address made up of a series of four
number between 0 and 256 separated by period. For example, 68, 178, 157, 137 or
68.122,35.127.
When you registered a web address, also known as a domain name, such as [Link]
you have to specify the IP address of the web servers that will host side.
What is HTTP?
HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to
transfer hypertext documents that makes the world wide web possible.
A standard web address such as [Link] is called a URL and here the prefix http
indicates its protocol.
What is WWW?
WWW stands for World Wide Web.
A technical definition of the world wide web is all the resources and users on the
internet that are using the Hypertext Transfer Protocol (HTTP).
What is URL?
URL stands for Uniform Resource Locator and is used to specify address on the world
wide web.
A URL is the fundamental network identification for any resources connected to the
web.
(e. g hypertext pages, images, and sound files).
What is DNS?
DNS stands for Domain Name System.
When someone types in your domain name, [Link], your browser will
ask the Domain Name System to find the IP that hosts your site.
When you register your domain name, your IP address should be put in a DNS along
with your domain name. Without doing it your domain name will not be functioning
properly.
request Amazon server responce Html css Js
G [Link]
Website
in browser
HTML
HTML stands for Hyper Text Markup Language.
HTML is used to create web pages.
HTML is widely used language on the web.
We can create static website by HTML only.
Example
1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1> First Heading</h1>
5. <p> First Paragraph</p>
6. </body>
7. </html>
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a
hypertext. Every time when you click on a word which brings you to a new webpage,
you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make
text more interactive and dynamic. It can turn a text into images, tables, links etc.
DOCTYPE: It defines the document type.
html: Text between html tag describes the web document.
body: Text between body tag describes the body content of the page that is visible to
the end user.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make effective presentation with HTML because it has a lot of formatting
tags.
3) It is a markup language so it provides a flexible way to design web pages along with the text.
4) It is platform-independent because it can be displayed on any platform like Windows, Linux
and Macintosh etc.
5) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
HTML Tags
HTML tags contain three main parts: opening tag, content and closing tag.
But some tags are unclosed.
Syntax
<tag>content</tag>
1. P=paragraph tag
2. h2=heading tag(h1,h2,h3,h4,h5,h6)
3. b=bold tag
4. I=italic tag
5. u=underline tag
6. sup=super script
7. sub=sub script
8. ins=underline tag
9. mark=highlight
10. big=biggest text
11. tt=same size
12. small=small size
13. div=divide section container tag
14. del=underline
unclosed tag
br=break line
hr=horizontal line
HTML meta tag
Doctype
title
link
meta & style
Hyperlink
<a href = “-----link---------”> content</a>
HTML anchor tag
- An unvisited link is displayed underlined and blue.
- A visited link displayed and purple.
- An active link is underline or red
HTML Image tag
- img src= ”[Link]” alt =”----------“/>
Attribute
src – It is necessary attribute that describe the source of path of the
image.
Alt – The alt attribute defines an alternate text for the image.
Width – It is optional attribute which is use to specify the width to display
the image.
Height – It specifies the height of the image.
HTML Table
HTML table tag is used to display data in tubular form (row*column).
There can be many columns in a row.
<table> - It defines a table.
<tr> - It defines row in table.
<th> - It defines a header cell in a table.
<td> - It defines a cell in a table.
<tbody> - (table body) It is use to group of the body content in a table.
<thead> - (table head) It is use to group of the header content in a table.
HTML table example
1. <table>
2. <tr><th>Name</th>
3. <th>Mark</th></tr>
4. <tr><td>Rohan</td> <td>85</td><tr>
5. <tr><td>Mohan</td><td>92</td>>/tr>
6. </table>
Output:
Name Mark
Rohan 85
Mohan 92
Two types of table
1) Vertical
2) Horizontal
1) Vertical:
<table>
<tr><th>Name</th><td>Ajay</td></tr>
<tr><th>Mark</th><td>75</td><tr>
</table>
Output: Name Ajay
Mark 90
rowspan-use to rows
colspan- use to column
HTML Table with rowspan
If you want to make a cell span more than one row, you can
use the rowspan attribute.
Example
1) <table>
2) <tr><th>Name</th><td>Ajay</td><tr>
3) <tr><th rowspan=”2”>Mobile no.</th>
4) <td>7894561235<td></tr>
5) <tr><td>7845963214</td></tr>
6) </table>
Output: Name Ajay
Mobile No 7894561235
7845963214
Example of table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
</head>
<body>
<table width="500" align="center" border="1">
<caption>Emp Table</caption>
<thead>
<tr>
<th>Emp - Id</th>
<th>Emp - Name</th>
<th>Emp - Salary</th>
<th colspan="2">Mobile No</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>Rohan</td>
<td>10000</td>
<td>1234567890</td>
<td>1234567890</td>
</tr>
<tr>
<td>102</td>
<td>Sohan</td>
<td>11000</td>
<td>1234567890</td>
<td>1234567890</td>
</tr>
<tr>
<td>103</td>
<td>Mohan</td>
<td>12000</td>
<td>1234567890</td>
<td>1234567890</td>
</tr>
<tr>
<td>104</td>
<td>Manmohan</td>
<td>13000</td>
<td>1234567890</td>
<td>1234567890</td>
</tr>
</tbody>
</table>
</body>
Description:-
width:-defines a table width.
Align:-align the table center,left,right.
Border:-border the table
Output:
Emp Table
Emp - Id Emp - Name Emp - Salary Mobile No
101 Rohan 10000 1234567890 1234567890
102 Sohan 11000 1234567890 1234567890
103 Mohan 12000 1234567890 1234567890
104 Manmohan 13000 1234567890 1234567890
HTML Lists
HTML lists are used to specify lists of information.
1. Ordered list or Numbered list(ol).
2. Unordered list or bulleted list(ul).
3. Description list or definition list(dl).
1) Ordered list(ol): In ordered list all the list items are marked with
numbers.
Example:
1) <ol>
2) <li>one</li>
3) <li>two</li>
4) <li>three</li>
5) </ol>
Output: 1. One
[Link]
[Link]
2) Unordered list(ul): In unordered list all the item are marked with
Bullets.
Example
1) <ul>
2) <li>one<li>
3) <li>two<li>
4) <li>three</li>
5) </ul>
Output: one
two
three
3)definition list(dl): It is definition list where entries are listed like a
dictionary or encyclopedia.
- The HTML definition list content following three tags
1) <dl> This tag defines a start of list.
2)<dt> This tag defines a term.
3)<dd> This tag defines the term definition (description).
Example:
1. <dl>
2. <dt>RAM</dt>
3. <dd>Random Access Memory</dd>
4. <dt>ROM</dt>
5. <dd>Read Only Memory</dd>
6. </dl>
Output: RAM
Random Access Memory
ROM
Read Only Memory
HTML Ordered list:
There can be different types of numbered list.
Numerical Number (1,2,3)
Ex.
<ol>
<li>HTML<li>
<li>Java</li>
</ol>
Output: [Link]
[Link]
Capital Roman Number (I, II, III)
Ex.
<ol type = ”I”>
<li>HTML</li>
<li>Java</li>
</ol>
Output: I. HTML
II. Java
Small Roman Number (i, ii, iii)
Ex.
<ol type=”i”>
<li>HTML</li>
<li>Java</li>
</ol>
Output: i. HTML
ii. Java
Capital alphabet (A, B, C)
Ex.
<ol type=”A”>
<li>HTML</li>
<li>Java</li>
</ol>
Output: [Link]
B. Java
Small alphabet (a, b, c)
Ex.
<ol type=”a”>
<li>HTML</li>
<li>Java</li>
</ol>
Output: a. HTML
b. Java
start Attribute
The start attribute is used with ol tag to specify from where to
start the list item.
Example:
1. <ol type=”1” start=”5”>: It will show numerical values
starting with “5”.
2. <ol type=”A” start=”5”>: It will show capital alphabet
starting with “E”.
3. <ol type=”a” start=”5”>: It will show small alphabet starting
with “e”.
4. <ol type=”I” start=”5”>: It will show roman uppercase value
starting with “V”.
5. <ol type=”i” start=”5”>: It will show roman lowercase value
starting with “v”.
Example.
<ol type=”i” start=”5”>
<li>HTML</li>
<li>Java</li>
</ol>
Output: v. HTML
Vi. Java
HTML Unordered List:
There are four types of bulleted list
1. Disc
2. Circle
3. Square
4. None
5. Image
Example:
<ul type=”square”>
<li>html</li>
</li>Java</li>
</ul>
Output: HTML
Java
HTML Form
An HTML form is a section of document which contains
controls such as text fields, password fields, checkboxes, radio buttons, submit
buttons, menu etc.
HTML form are required if you want to collect some data from of
the site visitor.
HTML Form syntax
1. <form action =”server url” method=”get/past”>
2. // input controls e.g. textfield, textarea, radiobutton, button.
3. </form>
Action:-it is a server side page name.
Method:-two types of method get & post
By default method is get.
Get methoud shows a data from url.
Post method not show data from url.
Post method is secure.
HTML form tags
1. <form>: It defines an HTML form to enter input by the user side.
2. <input>: It defines an input control.
3. <text>: It defines multi-line input control.
4. <label>: It defines a label of input element.
5. <select>: It defines drop-down list.
6. <option>: It defines option in drop-down list.
7. <button>: It defines a clickable button.
Examples:
1. Text
1. <form>
2. First Name:<input type=”text” name=”first name”/>
3. Last Name:<input type=”text” name=”last name”/>
4. </form>
2. lable tag in form
1. <form>
2. <label for=”first name”>first name:</label>
3. <input type=”text” id=”first name” name=”first name”>
4. </form>
3. Password
1. <form>
2. <label for=”password”>password:</label>
3. <input type=”password” id=”password”
name=”password”></input><br>
4. </form>
[Link]
1. <form>
2. <label type=”email”>Email: </label>
3. <input type=”email” id=”email” name=”email”></input><br>
4. </form>
[Link] Button
1. <form>
2. <label for=”gender”>gender:</label>
3. <input type=”radio” id=”gender” name=”gender”
value=”male”>Male</input>
4. <input type=”radio” id=”gender” name=”gender”
value=”female”>Female</input>
5. </form>
Radio button name field names same all fields.
It is select only one.
[Link] box control
1. <form>
2. <input type=”checkbox” id=”cricket” name=”checkbox”
value=”cricket”></input>
3. <label for=”cricket”>cricket<\label>
4. <input type=”checkbox” id=”football”
name=”checkbox” value=”football”></input>
5. <label for=”football”>football<\label>
6. <input type=”checkbox” id=”hocky” name=”checkbox”
value=”hocky”></input>
7. <label for=”hocky”>hocky<\label>
8. </form>
Name field name different all field.
You can select only one.
HTML form example
Example1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="[Link]">
<table>
<tr>
<td>Color</td>
<td><input type="color" /></td>
</tr>
<tr>
<td>Date</td>
<td><input type="date" /></td>
</tr>
<tr>
<td>DateTime</td>
<td><input type="datetime" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" /></td>
</tr>
<tr>
<td>File</td>
<td><input type="file" /></td>
</tr>
<tr>
<td>Hidden</td>
<td><input type="hidden" value="123" name="hiddenvalue"
/></td>
</tr>
<tr>
<td>Image</td>
<td><input type="image" /></td>
</tr>
<tr>
<td>Month</td>
<td><input type="month" /></td>
</tr>
<tr>
<td>Number</td>
<td><input type="number" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>Range</td>
<td><input type="range" /></td>
</tr>
<tr>
<td>Rest</td>
<td><input type="reset" /></td>
</tr>
<tr>
<td>Search</td>
<td><input type="search" /></td>
</tr>
<tr>
<td>Time</td>
<td><input type="time" /></td>
</tr>
<tr>
<td>Week</td>
<td><input type="week" /></td>
</tr>
<tr>
<td>Radio</td>
<td>
<input type="radio" name="branch" value="BCA">BCA
<input type="radio" name="branch" value="BCS">BCS
<input type="radio" name="branch" value="BCS">BCM
</td>
</tr>
<tr>
<td>Checkbox</td>
<td>
<input type="checkbox" name="pubg" value="PubG">PubG
<input type="checkbox" name="chess" value="Chess">Chess
<input type="checkbox" name="cricket" value="Cricket">Cricket
</td>
</tr>
<tr>
<td>Radio</td>
<td>
<select name="city" id="txtcity">
<option value="Beed">Beed</option>
<option value="Pune">Pune</option>
<option value="Latur">Latur</option>
<option value="Jalana">Jalana</option>
</select>
</td>
</tr>
<tr>
<td>TextArea</td>
<td>
<textarea name="txtmsg" id="txtmsg" cols="30" rows="5"
maxlength="100"></textarea>
</td>
</tr>
<tr>
<td>Url</td>
<td><input type="url" /></td>
</tr>
<tr>
<td>Submit</td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Example2 :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
margin: 10px;
}
</style>
<body>
<form action="" method="POST">
<div>
<label for="txtname">name</label>
<input type="text" class="form-control" id="txtname"
name="txtname" placeholder="Enter Name" required>
</div>
<div>
<label for="txtemail">Email</label>
<input type="email" class="form-control" id="txtemail"
name="txtemail" placeholder="Input field">
</div>
<div>
<label for="txtmob">MobNo</label>
<input type="number" class="form-control" id="txtmob"
name="txtmob" placeholder="Input field">
</div>
<div>
<label for="txtdob">DOB</label>
<input type="date" class="form-control" id="txtdob" name="txtdob"
placeholder="Input field">
</div>
<div>
<label for="txtcourse">Select Course</label>
<select name="txtcourse" id="txtcourse">
<option value="Bsc">bsc</option>
<option value="bcs">bcs</option>
<option value="bca">bca</option>
<option value="bcom">bcom</option>
</select>
</div>
<div>
<label for="txtgen">Gender</label>
<input type="radio" name="txtgen" id="txtgen" value="Male">Male
<input type="radio" name="txtgen" id="txtgen"
value="Female">Female
<input type="radio" name="txtgen" id="txtgen" value="other">other
</div>
<div>
<label for="txtsub">Fav subj</label>
<input type="checkbox" name="sachin" id="txtsub"
value="sachin">sachin
<input type="checkbox" name="virat" id="txtsub" value="virat">virat
<input type="checkbox" name="rohit" id="txtsub" value="rohit">rohit
<input type="checkbox" name="dhoni" id="txtsub"
value="dhoni">dhoni
</div>
<div>
<label for="txtimg"></label>
<input type="file" name="txtfile" id="txtfile">
</div>
<div>
<label for="txtpass">password</label>
<input type="password" name="txtpass" id="txtpass">
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
HTML5
- HTML provide details of all 40+ HTML tags including audio, video,
header, footer, data, data list, article etc.
Why use HTML5
- It is enriched with advance feature which makes it easy and
interactive for designer/developer & users.
- It allows you to play a video and audio file.
- It allows you to draw on a canvas.
- It facilitates you to design better forms and build web applications
that work offline.
- It provides you advance feature for that you would normally have
to write java script to do.
HTML Audio Tag
- HTML audio tag is used to define sounds such as music and
other audio clips.
Ex.
1.<audio controls>
2.<source src = ”music.mp3”>
3.</audio>
HTML video audio tag:
Ex:- <video src=”video path”/>
Displays the video.
<audio src=”audio path”/>
Attribute
[Link]: play/push button.
[Link]:loop the video audio.
Ex:-
<video src=”path” control loop>
<audio src=”path” control loop>
HTML data List tag
-The HTML <dataList> tag is used to provide an auto complete
feature on form element. It provides a list of predefined option to the elect
data.
example:
1.<label>
2. Enter your favourite cricket player <br/>
3.<input type =”text” id = favcktplayer” list=”cktplayers>
4.<datalist id =”cktplayers”>
5.<option value=”Sachin”>
6.<option value =”Rohit”>
7.<option value =”virat”>
8.<option value =”donald”>
9.<option value =”shane”>
11.</datalist0>
12.</label>
List and id will be same.
HTML header tag
- HTML <header> tag is used as a container of introductory content
or navigation links.
Example:
1. <header>
2. <h2>[Link]</h2>
3. <p>welcome</p>
4. </header>
Output: [Link]
Welcome
HTML Main Tag
- The <main> tag specifies the main content of document.
- Ex: - <main>
- <p>This is the paragraph</p>
- </main>
HTML Footer Tag
- HTML <footer> tag is used to define a footer for a document or a
section.
- HTML <footer> tag contains information about its containing
elements for ex.
Author information
Contact information
Copyright information
Sitemap
Back to top links
Related document etc.
Ex:
1. <footer>
2. <p>Name:rohan</p>
3. <address>At. Sahyog nagar dp road beed</address>
4. <footer>
Output: Name: rohan
At. Sahyog nagar dp road beed
HTML Figure Tag
- It is used to provide a photo in the document on web page.
Ex. <figure>
<img src=”[Link]” alt=” ”/>
</figure>
HTML figure caption tag
- It Is used to provide a caption to an image.
Ex.
1. <figure>
2. <img src=”[Link]” alt=” ”/>
3. <figurecaption>fig 1.3 Taj mahal</figurecaption>
4. </figure>
<iframe> tag:
An <iframe> (Inline Frame) is used to display another webpage or content inside the
current webpage.
Example:
<iframe src="[Link]" width="600" height="400"></iframe>
-This shows the [Link] inside your page.