Scribd
Upload
22 views37 pages

Web Technology1

Uploaded by

singhshubh430
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views37 pages

Web Technology1

Uploaded by

singhshubh430
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

WEB TECHNOLOGY

HTML
CSS
JS
WEB TECHNOLOGY

 WEB
 INTERNET

 CLIENT

 BROWSER

 SERVER

 WEB PAGES

 WEBSITES

 WEB DEVELOPMENT
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
DIFFERENCE BETWEEN STATIC AND DYNAMIC
WEBSITES

Static Website Dynamic Website

 User can’t modify the  User can modify the content.


content
.  Contents are dynamic to all
 Contents are static to all the user and different to
the user and same. individual user.
 Comparatively less reloading
 Is has more reloading time. time.
 Most of the dynamic websites
 Most of the static websites follows 3 tier architecture and
are connected to server, N TIRE ARCHITECTURE, is
Interaction will be between browser -> server ->
browser and server. database.

 Multi-page applications.  Single page application.


 Ex : w3schools  Ex : Instagram,facebook
HOW WEB WORKS
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 are the extensions for HTML.


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 PAGE
<!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>
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.
TAGS IN HTML

TAG :Tag is predefines 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….
ELEMENTS IN 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>
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>
BASIC HTML TAGS

HTML Paragraphs:
 HTML paragraphs are defined with the <p> tag

HTML Links:
 HTML links are defined with the <a> tag

Ex: <a href="https://www.w3schools.com">This


is a link</a>
HTML Images:
 HTML images are defined with the <img> tag.

 The source file (src), alternative text

(alt), width, and height are provided as


attributes:
Ex:
<img src="w3schools.jpg" alt="W3Schools.co
m" width="104" height="142">
ATTRIBUTE IN 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

 Title

 Class

 Style
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
TAGS
Formatting elements were designed to display
special types of text:
 <b> - Bold text

 <strong> - Important text

 <i> - Italic text

 <em> - Emphasized text

 <mark> - Marked text

 <small> - Smaller text

 <del> - Deleted text

 <ins> - Inserted text

 <sub> - Subscript text

 <sup> - Superscript text


SECTIONING ELEMENTS/SEMANTIC ELEMENTS

What are Semantic Elements?


 A semantic element clearly describes its

meaning to both the browser and the


developer.
 Examples of non-

semantic elements: <div> and <span> -


Tells nothing about its content.
 Examples

of semantic elements: <form>, <table>,


and <article> - Clearly defines its content
SEMANTIC TAGS IN HTML
 Semantic elements represents their meaning to
both the browser and developer.
 All semantic elements are block level elements.
SEMANTIC ELEMENTS IN HTML:
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
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

 Attributes
 Type : square,circle,none
Ordered 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
HTML Description 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


HTML Nested Lists:
 List inside another list is called as nested list.
IMAGES

 <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 AND HYPER
LINKS
 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


ABSOLUTE URL V/S RELATIVE URL

Absolute URL Relative URL

1) a full web address in1) A local link (a link to


the href attribute. a page within the
same website) is
specified with
a relative
URL (without the
2) <p><a href="https:// "https://www" part):
www.w3.org/">W3C<
/a></p> 2) <p><a href="html_i
mages.asp">HTML
Images</a></p>
HTML ANCHOR TAG

 Text as a Link
 To use an 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 an button as a link, just put

the <button> tag inside the <a> tag:


HTML LINKS - THE TARGET ATTRIBUTE

 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
TABLES IN HTML

 HTML Tables: A table in HTML consists of


table cells inside rows and columns.
 <table> tag is used to create a table in html

 Table Headers: Sometimes you want your

cells to be table header cells. In those cases


use the <th> tag
 Table Rows: Each table row starts with

a <tr> and ends with a </tr> tag.


 Table Cells: Each table cell is defined by

a <td> and a </td> tag.


TABLE-ATTRIBUTES

 Border: It is used give the border to table.


(<table>)
 Cell Padding: It is the space between the cell

edges and the cell content. (<table>)


By default the padding is set to 0
 Cell Spacing: It is the space between each cell.

By default the space is set to 2


pixels. (<table>)
 Colspan : It is used to merge multiple columns.

(<td>)
 Rowspan : It is used to merge multiple rows.

(<td>)
HTML FORMS
The <form> Element
 The HTML <form> element is used to create an HTML form for

user input
 The <form> element is a container for different types of input

elements, such as: text fields, checkboxes, radio buttons,


submit buttons, etc.
 The <input> Element

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

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

depending on the type attribute.


 Ex:

 <input type="text">Displays a single-line text input field

 <input type="radio">Displays a radio button(for selecting one

of many choices)
 <input type="checkbox">Displays checkbox(for selecting

zero or more of many choices)


 <input type="button">Displays a clickable button

 <input type="submit">Displays a submit button(for


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
ATTRIBUTES
 <form>
 Action : It defines action to be performed when
the form is submitted.
 Method : It specifies the http method to be used
when submitting the form data.(get-Not secured
and post-Secured)
 <label>
 for: It is used to connect label and input text field.
 <input>
 Id : It is used to connect label and input text field
and the value passed in the id attribute should be
same as the value passed in the for attribute.
 Name : The value of name attributes acts like
container, The form values with name attribute
will sent to a server when submitting the form.
 Type : It represents the type of data
FORM VALIDATION
ATTRIBUTES
1) Value : The input value attribute specifies an
initial value for an input field
2) Read only : The input read only attribute
specifies that an input field is read-only.
3) Disabled: The input disabled attribute
specifies that an input field should be disabled.
 A disabled input field is unusable and un-

clickable.
4) Size: The input size attribute specifies the
visible width, in characters, of an input field.
 The default value for size is 20.

 Note: The size attribute works with the

following input types: text, search, tel, url,


email, and password.
VALIDATION ATTRIBUTES

5) Maxlength: The input maxlength attribute


specifies the maximum number of characters
allowed in an input field.
6) Min & Max: The
input min and max attributes specify the
minimum and maximum values for an input
field.
7) Placeholder: The
input placeholder attribute specifies a short
hint that describes the expected value of an
input field (a sample value or a short
description of the expected format).
8) Required: The input required attribute
specifies that an input field must be filled out
before submitting the form.
VALIDATION ATTRIBUTES

9) Autofocus: The input autofocus attribute


specifies that an input field should
automatically get focus when the page loads.
10) Height & Width: The
input height and width attributes specify the
height and width of an <input
type="image"> element.
HTML MEDIA
 Multimedia on the web is sound, music, videos,
movies.
 HTML media consist of audio,video,maps and qrcode.

 Audio:
 <audio> tag is used to embed the audio into our web page.
 The content which is written in side <audio></audio> will
not displayed on the webpage
 Attributes of audio tag:
 Src : we will pass path of audio.
 Controls : The controls attribute adds audio controls, like play, pause,
and volume .
 Muted : It will mute the audio when you open your file with
browser
 Autoplay: It will play the audio automatically when you open
your file with browser.
 Loop : The audio will start over again , every time it is
finished.
MEDIA TAGS

 Video :
 <video> tag is used to embed the video into our
web page.
 The content which is written in side
<video></video> will not displayed on the webpage
 Attributes of audio tag:
 Src : we will pass path of video.
 Controls : The controls attribute adds video controls, like
play, pause, and volume .
 Muted : It will mute the video when you open your
file with browser
 Autoplay: It will play the video automatically
when you open your file with browser.
 Loop : The video will start over again , every time
it is finished.
 iframe:
 <iframe> tag is used to embedded the
another document within the current HTML
document.
 An HTML iframe is used to display a web
page within a web page.
 The HTML <iframe> tag specifies an inline
frame.
 Height and width attributes are used to
specify the height and width of th iframe
 Title attribute is used to give the title for
the iframe

You might also like