WEB DEVELOPMENT
What is Website?
A website is like an online book or shop that people can visit using the internet.
A website is a collection of related webpage that are stored in web server
A website usually includes HTML , CSS, Javascript, Boostrap, python, java…
Example.,
Google
[Link]
What is Browser
A browser is a software application.
It help you open and view website
on the internet.
Example
1. Chrome
2. Firefox
3. Microsoft edge
4. Safari(apple)
5. Brave
How its Works
User sends the URL
Browser sends request
Servers receive the request
Servers send back to the code
Browser display the website
Overview
HTML (Hypertext Markup Language)
It helps to create a structure of webpage
CSS(Cascading style sheet)
It helps to create a appearance and layout of webpages
Javascript
It is a programming language
It is interactive effects and dynamic content on webpage
Framework and Libraries
It enhance the development process by providing pre-written code
HTML
Hypertext markup Language
Introduction
HTML stands for Hyper text Markup language
It is used to create web pages.
HTML gives structure to a webpage (headings, paragraphs, links, etc.).
An HTML file ends with .html (e.g., [Link]).
HTML uses tags (like <p>, <h1>, <img>) to define content.
Tags usually come in pairs: opening (<p>) and closing (</p>).
The main parts of an HTML page are <head> and <body>.
The browser reads HTML and displays the page to users.
HTML is not a programming language – it’s a markup language.
You can write HTML using any text editor like VS Code, Notepad,
Basic tag
<!DOCTYPE html> --header element
<html> --root element
<head> --meta information
<title> -- title of the webpage
<body> --body content of the webpage
<h1>, <h2>,….<h6> --heading of the webpage
<p> -- paragraph elements
Basic structure
<!DOCTYPE html>
<html>
<head>
<title>Basic Structure</title>
</head>
<body>
<h1>Largest size</h1>
<p>this is a paragraph</p>
</body>
</html>
Text Formatting tags
<br> -- break tag
<hr> -- horizontal rule
<b>,<strong> -- bold
<u> ,<ins> -- underline
<i> ,<em> -- italic
<sub> -- subscript
<sup> -- superscript
<mark> -- highlight word
<small> -- small text
<pre> -- preformatted text
<center> -- align the content into center
<del> -- deleted text
<q> -- quotation
Task : 1
../intership%20document/krithiga/day_two.html
Image tag
It is used to display image on the website
The <img> tag is self closing tag(no closing </img> tag)
Attributes:
• src : path to the image
• height : height of the image
• width : width of the image
• alt : alternative text
• title : text shown on hover
Example
<html>
<head>
<title> image</title>
</head>
<body>
<img src=“[Link]” height=“200” width=“300”
alt=“define the image”>
</body>
</html>
Background Images
<html> <style>
<head> body {
<title>Background Images</title> background-image: url('img_girl.jpg');
</head> background-repeat: no-repeat;
<body> background-size: cover;
<p style="background-image: }
url('img_girl.jpg');">Hello welcome
</style>
</p>
</body>
</html>
Audio tag
It is used to embed sound content in html pages
Example
<audio controls>
<source src=“audio.mp3” type=“audio/mpeg”>
your browser does not support
</audio>
(or)
<audio src="audio.mp3" autoplay loop muted controls></audio>
Video tag
It is used to embed video files
Example
<video width=“300” height=“200” controls>
<source src=“movie.mp4” type=“video/mp4”>
your browser does not support
</video>
<video width="300" height="200" controls poster="[Link]">
<source src="movie.mp4" type="video/mp4">
</video>
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
<track src="[Link]" kind="subtitles" srclang="en" label="English">
</video>
Condt..,
Source tag
it is specify multiples files
it is used inside the <audio> and <video> tag
Track element
It is used to add the subtitles or captions
Example
<track src=“[Link]” kind=“subtitles” srclang=“en” label=“English”>
Iframe
The <iframe> tag is used to display another webpage inside your
webpage.
<iframe src=“……" height="200" width="300" ></iframe>
Example
<iframe
src=“src="[Link]
aps/embed?pb=!1m18!1m12!1m3!1d3
949.2155025840807!2d77.429322274058
65!3d8.181033101687651!2m3!1f0!2f0!3f
0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0
x3b04f1820606601d%3A0xe8f568fb71a
2fc4a!2sJclicksolutions!5e0!3m2!1sen!2
sin!4v1752551345830!5m2!1sen!2sin"
width="600" height="450"
style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-
referrer-when-downgrade“
height="200" width="300" ></iframe>
Hyper Link tag
Syntax:
<a href=" url/file path " target=“_blank”>This is a link</a>
The target attribute specifies where to open the linked document.
target=_blank - Opens the document in a new window or tab.
Internal & External Link
Internal Link
Links to pages inside the same website.
<a href="[Link]">About Us</a>
External Link
Links to a different website.
<a href="[Link] to Amazon</a>
Email Link
Opens the user’s email app.
<a href="[Link] Email</a>
Phone Link
Used on mobile; opens the dialer.
<a href="[Link] Now</a>
<a href="images/[Link]" download="[Link]">
Download Image
</a>
HTML Attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value“
SYNTAX:
<tagname name=“value;”>Content</tagname>
Tables
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
Example
<tr>
<table>
<td>Row 2 Cell 2</td>
<tr>
<td>Row 2 Cell 3</td>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</tr>
<tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row3 Cell 1</td>
<td>Row 1 Cell 3</td>
</tr>
</tr>
</table>
Table tag Attributes:
Cell spacing
<table cellspacing=“10 ">...</table>
Cell padding
<table cellpadding=“20 ">...</table>
Table border
<table border=“1 ">...</table>
Alignment
<table align=center/left/right>...</table>
background color
<table bgcolor=“red">...</table>
HTML List
List are used to represent the data by three types
Ordered list
Unordered list
Description list
Tag Description
o <ul> -- Defines an unordered list
o <ol> -- Defines an ordered list
o <li> -- Defines a list item
o <dl> -- Defines a description list
o <dt> -- Defines a term in a description list
o <dd> -- Describes the term in a description list
Unordered List
Syntax: Type="disc “marker to a bullet.
<ul> Type="circle “ marker to a
<li>Coffee</li> circle.
<li>Tea</li>
Type="square “ marker to a
<li>Milk</li>
square.
</ul>
Type="none “not be marked.
Ordered List
<ol type=‘enter type ’ start=‘1’> Type="1“numbers.
<li>text</li>
Type="A“ uppercase letters.
<li>text</li>
<li>text</li> Type="a“lowercase letters.
</ol> Type="I“uppercase roman
numbers
Type=“i” lowercase roman
numbers
Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested list
<html><body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body></html>
HTML Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
Type Description
o <input type="text">Displays a single-line text input field
o <input type="radio">Displays a radio button (for selecting one of many
choices)
o <input type="checkbox">Displays a checkbox (for selecting zero or more
of many choices)
o <input type="submit">Displays a submit button (for submitting the form)
o <input type="button">Displays a clickable button
o <input type=“password”> Display a password format(…)
Tags
<form> Defines an HTML form
<input> Defines an input control
<textarea> Defines a multiline input control
<button> Defines a clickable button
<select> Defines a drop-down list
<option> Define the option inside the select tag
<label> Defines a label for an input
<fieldset> Defines a border of the form
<legend> Defines a heading for the border
<datalist>
Example
<form>
<label>Name:</label>
<input type="text"><br><br>
<label>Password</label>
<input type="password"><br><br>
<input type="submit">
</form>
Dropdown
<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
Input type
Input Type: number
Enter: <input type="number" name="quantity" min="1" max="5">
Input Type: date
Birthday: <input type="date" name="bday">
Input Type: color
Select your favorite color: <input type="color"
name="favcolor">(BrowserSupport)
Input Type: range
<input type="range" name="points" min="0" max="10">(Browser Support )
Input Type: month
Month :<input type="month" name="bdaymonth">
Input Type: week
Select a week:<input type="week" name="weekyear">
Condt.,
Input Type: time
Select a time:<input type="time" name="usrtime"> ( Browser Support )
Input Type: email
E-mail: <input type="email" name="email">(Browser Support )
Input Type: search
Search Google: <input type="search“ name="googlesearch">(Browser
Support)
Input Type: url
Add your homepage: <input type="url" name="homepage">(Browser
Support )
Marquee tag
The <marquee> tag is used to creating scrollable text or images within a
web page.
Syntax:
<marquee direction="left"> This is scrolling </marquee>
Attributes
Behavior: Direction :
Slide
up/down
Scroll
Alternate left /right
Condt.,
• Width: width="10“
• Height: height="20"
• Direction: left, right, up or down
• Scroll amount: provides value for speeding the marquee feature
eg: scrollamount=“1”
• Loop: provides how many times the marquee will loop
eg:loop=“2”
• Bgcolor: bgcolor=“red”
[Link]
Common attributes
Readonly Attribute
<input type=“text” value=“myname” readonly>
Placeholder Attribute
<input type=“text” placeholder=“Your name”>
Disabled Attribute
<input type=“text” disabled>
Validation Attribute
Required Attributes
<input type="text" id="username" name="username" required>
Pattern attributes
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3} " title="Three letter country code”>
Min and max Attributes
<input type="number" id="quantity" name="quantity" min="1" max="5“ >
Semantic tag
<header> ….. </header>
<nav> ….. </nav>
<main> ….. </main>
<section> ….. </section>
<article> ….. </article>
<aside> ….. </aside>
<footer> ….. </footer>
<figure> ….. </figure>
<figcaption> ….. </figcaption>
Tag Meaning Use
<header> Top area Logo, title, nav
<nav> Navigation Menus, links
<section> Content section Features, chapters
<article> Independent item Blog post, news
<aside> Side content Sidebar, ads
<footer> Bottom area Copyright, contacts
<main> Main content Page content
<figure> Media content Image, chart
<figcaption> Description Caption of image
HTML FAVICON
A favicon image is displayed to the left of the page title in the browser tab
Example.,
<link rel="icon" type="image/x-icon" href=“./images/[Link]">
Thank you