Basics of web-technology
HTML : Hyper text markup language
To create the structure of the webpage
CSS : Cascading style sheet
Used for styling and alignment of HTML elements on the webpage
JS: JavaScript
Used to add the functionality
Terminologies
WEB : The world wide web is also called as web and it is
interconnection of public websites which can be accessible
through internet
INTERNET : It is system of interconnected computer networks
that allows users to access and share the information
CLIENT : User
BROWSER : It is a standalone application through which we can
access data with a help of internet
SERVER : It is a combination of software and hardware that
receives request and response to a request over a network
WEBPAGES : It is document that is accessible by browser and it
contains text,images,hyperlinks and these are also called as
building blocks of websites
WEBSITES : It is collection of related or interconnected
webpages
How Web Works
Structure of URL
Types of websites
Static Website Dynamic Website
User can’t modify the content User can modify the content.
Contents are static to all the user and same. Contents are dynamic to all the user and different to
individual user.
Is has more reloading time.
Comparatively less reloading time.
Most of the static websites are connected to
server, Interaction will be between browser and Most of the dynamic websites follows 3 tier
server. architecture and N TIRE ARCHITECTURE, is browser ->
server -> database.
Multi-page applications.
Single page application.
Ex : w3schools
Ex : Instagram, facebook
HTML
HTML stands for Hyper Text Markup Language.
A reference / link created by developers to provide the
data / information to the users which is designed by pre-
defined tags and it comunicatable with browsers.
This will be first page to rendered on the browsers.
HTML is not case sensitive.
.html/.htm are the extensions for HTML.
HTML was introduced in 1991 by Tim Berners Lee
First version of HTML is released in 1993—html 1.0
Html 2.0----1995
Html 3.2----1997
Html 4.02----1999
Html 5.0----2014
Current version of html means now we are using html
5.0
Structure of HTML Document
<!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>JAVASCRIPT</title>
</head>
<body>
</body>
</html>
HTML Tags
TAG: Tag is predefined word or keyword which is enclosed
within angular braces
<html> </html>
Types of Tags
1) Paired Tags: These are the tags that will have an opening and
closing tags
Ex: <p> </p>, <head> </head> etc….
2) Unpaired tags: These are the tags that will not having any
closing tags and these are also called as self-closing tags
Ex: </br>, <hr>,<input>,<img> etc….
STRUCTURE OF HTML
<!DOCTYPE HTML>--Represents the version of html
<html>--Root element of the html page
<head>--Contains meta information about the html page
<title>--It will give the title for the webpage
<body>--It is a document’s body and it is the container for all the visible
contents such as headings,paragraphs,images etc.
Basic HTML Tags
HTML Documents:
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML Headings:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs:
HTML paragraphs are defined with the <p> tag
HTML Elements
An HTML element is defined by a start tag, some content, and an
end tag.
Tags along with the content is known as element
Ex: <h1>Hello World</h1>
BLOCK LEVEL ELEMENTS: It will take entire width of the
browser and these are starts from new line
Ex:<div>, <table>, <form>, <nav><nav>
INLINE ELEMENTS: It will take only content width
These are starts from the same line means next to each other
Ex:<span>, <b>, <i>, <u>
HTML Attributes
HTML attributes provide additional information to HTML
tags.
All HTML elements can have attributes
Attributes are always specified in the start tag/opening tag
Attributes usually come in name/value pairs
like: name="value“.
Values of an attributes are case sensitive
Core Attributes:
Id: It is used to target a particular element uniquely.
Class: The class attribute specifies one or more classnames
for an element
Title: The title attribute gives a suggested title for the
element. It is used to give tooltip for the element.
Style : It specifies an inline style for an element.
HTML Formatting
Formatting elements were designed to display special types of text
<b> - to display bold text
<strong> - display bold text and according to browser it has
extra importance
<i> - display Italic text
<em> - display Emphasized(italic) text
<u> - display underlined text
<ins> - very similar to <u>, according to browser it will be
inserted text
<strike> - display striked text
<del> - very similar to <strike>, according to browser it will be
deleted text
<mark> - display highlighted text
<sub> - display subscript text
<sup> - display superscript text
Sectioning Elements / Semantic Elements
A semantic element clearly describes its meaning to both the
browser and the developer.
Examples of semantic elements: <form>, <table>,
and <article> - Clearly defines its content.
Examples of non-semantic elements: <div> and <span> - Tells
nothing about its content.
Semantic elements represent their meaning to both the
browser and developer.
All semantic elements are block level
HDAMNSTAFF
H HEADER
D DETAILS
A ASIDE
M MAIN
N NAV
S SUMMARY AND SECTION
T TABLE
A ARTICLE
F FIGURE
F FIGCAPTION/FOOTER
HTML Lists
[Link] 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
Attributes
Type : square,circle,none
[Link] HTML List:
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default
Attributes:
Type : numbers,alphabets(lower,upper),roman(lower,upper)
Start: number
reverse
[Link] Lists:
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term
Nested Lists:
List inside another list is called as nested list.
HTML Image
<img> tag is used to insert an image in webpage
Image is inline-block element
Attributes
src: It is an attribute of img tag, inside this we will pass the path of the
image.
alt: It is used give the alternative name for the image
When the image is not displaying on webpage this alternative name will
be displayed
height: It is used give the height for the image
width: It is used give the width for the image
Anchor tag / Hyperlinks
The <a> tag defines a hyperlink, which is used to link from one page to
another.
The most important attribute of the <a> element is the href (hyper
reference) attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Text as a Link
To use a text as a link, just write the text inside the <a> tag with href
attribute
Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag
Button as a Link
To use a button as a link, just put the <button> tag inside the <a> tag
Absolute URL v/s Relative URL
Absolute URL Relative URL
1) a full web address in 1) A local link (a link to a
the href attribute. page within the same
2) <p><a href="https:// website) is specified with
[Link]/">W3C</a></p> a relative URL (without
the "[Link] part):
2) <p><a href="html_images.
asp">HTML
Images</a></p>
The target Attribute in <a> tag
By default, the linked page will be displayed in the current browser
window. To change this, you must specify another attribute that is target
for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was
clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
