Topic -1 Advanced Web Designing
What is IT?
➔ IT refers creation,gathering, processing, storage and delivery of information.
Eg.Evs Project
What is Web?
➔ Web is part of internet that contains website and webpage.
➔ Web is also known as WWW(World Wide Web)
Webpage: - It is simple text file that is created with help of html
Website: - It is Collection of Webpage called Website.
Eg. Flip kart and College Website
HTML: -
HTML stands for Hypertext Markup Language. It is mainly used for Designing purpose and
Displaying Content on Webpage.
HTML is generally made up with tag and attribute.
Tag:-
Tag is always representing logical part in Webpage. HTML tag are like keyword which define
that web browser will format and display content.
Tag is Denoted by using <> bracket.
Attribute:-
Attribute which gives more information about tag.
Eg.
<Tag Attribute=”value”>
<h1 color=”red”>
Structure of HTML:-
<html>
<head>
<title>Title of Program<title>
</head>
<body>
</body>
</html>
-- <head> tag used for display title and JS code and applies styling properties.
-- <body> tag display all tag and information that you want to display on webpage.
• Heading tag in HTML :-
Heading tag is used to represent heading in html. It starts from <h1>---<h6>
<h1> Represent highest level of heading tag.
<h6> Represent lowest level of heading tag.
Syntax :-
<Hn>……</Hn>
Eg.
<html>
<head>
<title>Heading Tag in HTML</title>
</head>
<body>
<h1>HTML</h1>
<h2>HTML</h2>
upto
<h6>HTML</h6>
</body>
</html>
➢ Text Formatting Element:-
Text formatting element is used to make a document or page look attractive there are
different text formatting element.
Tag Name Description
<b> Display text in bold format
<i> Display text in italic format
<u> Display text with underline
<small> Display text in small font size
<sub> Display text in subscript format
<sup> Display text in superscript format
<ins> Anything apper in <ins>..</ins> tag display as
inserted text
<del> Anything apper in <del>..</del> tag display as
deleted text
<mark> By using <mark> tag display text as highlighted
text
• <img> tag :-
This tag is used to insert an image within webpage.
➢ Attribute of <img> tag:-
1] src :- It specify image name that u want to display in web page.
2] height :- specify height of image in pixel, percentage or normal value
3] width :- specify height of image in pixel, percentage or normal value
4] alt :- It specify alternate name to image.
Eg. <img src=”Desert.jpg” height=”400” width=”400” alt=”image”>
<HR> tag:-
<HR> tag is used to insert horizontal line within web page.
Attribute of <hr> tag:-
1] color :- set the color to horizontal line.
2] width:- It specify length of line in % or pixel.
3] size :- It sets thickness of ruled line.
<p> tag: - It is used to define paragraphs. It is container tag.
• Hyperlink in HTML:-
Hyperlink is used to move from one web page to another web page.
<a> ….. </a> tag used to display hyperlink in webpage.
Href: - By using this attribute user can specify page name that want to display
• <Table> Tag in HTML:-
<Table> tag is used to create table in html.
A table is made up of row and column. A table in a webpage is created by using
<table>tag. And here intersection of row and column is called cell.
- <tr> tag is used to create table row.
- <th> tag is used to create table heading.
- <td> tag is used to create table data.
• <Caption> tag in HTML:-
It is used to specify table heading.
Attribute of <caption> tag:-
1] align: - The align attribute contain two values. top and bottom.
<caption align=”top”>STUDENT INFO</caption>
Here contain display top of table.
<caption align=”bottom”>STUDENT INFO</caption>
Here contain display bottom of table.
Attribute of <table> tag:-
1] border :- By default value is 0. By using border attribute it apply border to the
table.
2] bordercolor :- By using this attribute apply bordercolor to the table.
3] align:- By using this Attribute it set left, right and center value.
Attribute of <tr><th><td> tag:-
1] align:- This attribute contain three value left, right and center.
2] colspan :- This attribute used within <td> and <th>. Here it span (combine)
two or more column across table.
3] rowspan :- This attribute used within <td> and <th>. Here it span (combine)
two or more rows across table.
• HTML v/s HTML5 :-
HTML HTML5
1] HTML is Primary Language for 1] HTML5 is new Version of HTML with
Developing Webpage. New Functionalities.
2] HTML does not support for 2] HTML5 is support both video and audio
Video and audio
Structure of HTML5: -
<! DOCTYPE HTML> Document type declaration mainly display type andversion of browser
<html>
<head>
<title> Title of Page</title>
</head>
<body>
<header>
<nav> Define Navigation Link
</nav>
</header>
<Section> Define section in document
<article> It specifies independent and self content
</article>
</section>
<aside> It is not main content but some content which is indirectly depend on
main content
</aside>
<footer>
</footer>
</body>
</html>
Eg.
Form in HTML:-
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.
All the different form elements are covered in this chapter: HTML Form Elements.
Syntax :-
<form>
formele
</form>
• Attribute of Form tag: -
1 Action
Backend script ready to process your passed data.
2 Method
Method to be used to upload data. The most frequently used are GET and POST
methods.
3 Name
It specifies name for form tag.
Eg.
<form name=”f1” method=”get” action=”page1.html”>
1] <input> tag :-
This tag is used to take input from user.
Attribute of <input>tag :-
1 Type
Indicates the type of input control and for text input control it will be set to text.
2 Name
Used to give a name to the control which is sent to the server to be recognized and get
the value.
3 Value
This can be used to provide an initial value inside the control.
4 Size
Allows to specify the width of the text-input control in terms of characters.
5 Maxlength
Allows to specify the maximum number of characters a user can enter into the text
box.
2] Password Field:-
It is also create single line textbox but if user set <input type=”password”> then character
display in dot and asteric format.
3] Radio Control:-
Radio buttons are used when out of many options, just one option is required to be selected. They
are also created using HTML <input> tag but type attribute is set to radio.
<inputtype="radio"name="subject"value="maths">Maths
<inputtype="radio"name="subject"value="physics"> Physics
4] Checkbox Control:-
Checkboxes are used when more than one option is required to be selected. They are also created
using HTML <input> tag but type attribute is set to checkbox..
<inputtype="checkbox"name="maths"value="on">Maths<inputtype="checkbox"name="ph
ysics"value="on"> Physics
5] <Text area> tag:-
This is used when the user is required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.
1
Name
Used to give a name to the control which is sent to the server to be recognized and get
the value.
2 Rows
Indicates the number of rows of text area box.
3 Cols
Indicates the number of columns of text area box
<textarearows="5"cols="50"name="description">
Enter description here...
</textarea>
6] Select Box Control :-
A select box, also called drop down box which provides option to list down various options in the
form of drop down list, from where a user can select one or more options.
<form>
<selectname="dropdown">
<optionvalue="Maths"selected>Maths</option>
<optionvalue="Physics">Physics</option>
</select>
</form>
Attribute:-
1] name
Used to give a name to the control which is sent to the server to be recognized and get the
value.
2] size
This can be used to present a scrolling list box.
3]multiple
If set to "multiple" then allows a user to select multiple items from the menu.
Following is the list of important attributes of <option> tag –
1] value
The value that will be used if an option in the select box box is selected.
2]selected
Specifies that this option should be the initially selected value when the page loads.
3] label
An alternative way of labeling options
7] File Upload Box
If you want to allow a user to upload a file to your web site, you will need to use a file upload
box, also known as a file select box. This is also created using the <input> element but type
attribute is set to file.
<form>
<inputtype="file"name="fileupload"accept="image/*"/>
</form>
8] Button :-
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input>tag by setting its type attribute to button. The type attribute can take the
following values −
1 Submit
This creates a button that automatically submits a form.
2 Reset
This creates a button that automatically resets form controls to their initial values.
3 Button
This creates a button that is used to trigger a client-side script when the user clicks
that button.
4 Image
This creates a clickable button but we can use an image as background of the button.
<form>
<inputtype="submit"name="submit"value="Submit"/>
<inputtype="reset"name="reset"value="Reset"/>
<inputtype="button"name="ok"value="OK"/>
<inputtype="image"name="imagebutton"src="/html/images/logo.png"/>
</form>
• Hyperlink in html :-
To make a hyperlink in an HTML page, use the <a> and </a> tags, which are the tags used to
define the links.
The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends.
Whatever text gets added inside these tags, will work as a hyperlink. Add the URL for the link
in the <a href=” ”>. Just keep in mind that you should use the <a>…</a> tags inside
<body>…</body> tags.
• HTML5 Advanced <input> Element :-
Input type Description
<input type=”color”> Define Color Picker
<input type=”number”> Define field for enter no.
<input type=”url”> Define field for enter url
<input type=”image”> Define image as submit button
<input type=”date”> Define Date picker with year, month ,day
<input type=”email”> Define a field for an email address
<input type=”month”> Define month and year in format YYYY-MM
<input type=”range”> Define range from 0 to 100
<input type=”datetime- It include year,month,day and time
local”>
<input type=”time”> It enter time
<input type=”week”> Define a week and year
<input type=”search”> Define text field for searching like Google search
<input type=”file”> It is used to upload file
<input type=”tel”> It should contain only telephone no
• Input Restrictions :-
Attribute Description
Disabled Specify that input field should be disabled
Max Specify Maximum value for input field
Min Specify Minimum value for input field
Pattern Specify regular expression to check value
Read only It allows only read only(cannot be changed)
Placeholder This acts as temporary label without require label
Required It specify input field required
Autocomplete Specify form or input field autocomplete
Autofocus It automatically focus when page load
Height and width Specify width and height of image
Multiple It allow to enter more than one value in textbox
Eg.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML5</title>
</head>
<body>
<form action="display.html" method="post">
Name:<input type="text" autocomplte><br><br>
Email:<input type="email" name="email"><br><br>
Date of Inception:<input type="date" name="bday"><br><br>
Office Time:<input type="time" name="user_time"><br><br>
No of Year Complted:<input type="number" min="1"
max="100"><br><br>
Office Tel No:<input type="tel" name="phone" pattern="[0-9]{10}"
required><br><br>
<input type="url" name="homepage">
<input type="image" src="D:/abc.jpg">
</form>
</body>
</html>
• <meta> tag:-
<meta> tag is tag that display some aspect of content of webpage. The html <meta> tag is
used to search information from provided webpage. This is empty tag that carries
information within its attribute. The <meta> tag is placed between <head> and </head>
tag. Metadata will not display information on webpage.
Attribute Values Description
Name 1]Author 2] Description It specifies Name of metadata
like author, keyword or
3]Keywords4] copyright
description
<meta name=”author”>
Content It can have display textual Here content of author is
matter related to name balbharti
Eg<meta name=”author”
content=”balbharti”
Charset UTF-8(Unicode Specifies Character encoding
Transformation Format) used by document.
Big5
Used for http response message
http-equiv Refresh, set-cookie, content- headers. For example, http-equiv
type and expire can be used to refresh the page
or to set a cookie. Values include
content-type, expires, refresh and
set-cookie.
<!DOCTYPE html>
<html><head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</hea>
<body>
<p>Hello HTML5!</p>
</body>
</html>
• Cascading Style Sheet :-
CSS stands for cascading style sheet. CSS describe how html element is to be display on
screen. CSS save lot of work. It can control layout of multiple webpage in one webpage.
CSS syntax:
1] Selector 2] declaration block
Eg.
H1 {color: yellow; font-size: 11px}
1] selector :-
Selector is normally HTML element that u want to apply styling effect.
2] Declaration block:-
Each declaration contains property and value and here property value is separated by colon and
each declaration block sepreated by semicolon.
Types of CSS :-
1] Inline CSS 2] Internal CSS/Embedded CSS 3] External CSS
1] Inline CSS :-
In Inline CSS use Style as attribute in program. This CSS applies only single line or element.
Eg.<p style=”color: blue”>Hello CSS</p>
2] Internal CSS :-
This CSS apply only single element or single page. It can affect all elements within web page.
It is Written inside style tag within head section of html.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: pink;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Properties: -
Property Value Example
Color Change color of text H1{color:red}
Background- It set Background color name Body{background-color:
color green}
Font-weight 100,200 P{font-weight:300}
Font-style Italic, normal, oblique P{font-style: italic}
Text- 1] underline 2] overstrike P{text-
decordation decordation:underline}
3] none 4] line-through
Text-align Left, right, center H1{text-align:center}
Font-famliy Font name P{font-family:arieal}
Font-size Px,in,mm,cm,pt,% P{font-size:10px}
Letter-spacing Px,in,mm,cm,pt,% H1{letter-spacing:10px}
Padding Pixel H1{padding:10px}
Border Dotted,dashed,solid,double H1{border:solid}
Background- Set background image Body{background-
image image:url(background.jpg)}
Margin-Left Px,pt,cm H1{margin-left:10px}
3] Extrenal CSS:-
External style sheet generally used when user want to make changes on multiple pages. Here
with help of external CSS changing just one file that affect entire related file. It uses <link> tag
to link html page and CSS page.<link> tag always put inside <head> tag.
In external CSS contain two file one file is html file and second file is CSS file and that file
saved with extension .CSS In external CSS not contain any HTML code.
Eg.
External.html
<html>
<head><title>External CSS<title>
<link rel=”style sheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>This is heading</h1>
</body>
</html>
Style.css
H1{color:blue;margin-left:20px}
CSS Id Selector:-
Id selector select id attribute of an HTML element to select specific element. Id is always
unique within page. So id attribute applies only specific tag in html page. Id selector denoted by
(#) character.
<html>
<head>
<title>ID SELECTOR</title>
<style>
#para1{text-align:center;color:blue}
</style>
</head>
<body>
<p id="para1">Hello student</p>
<p>Hello</p>
</body>
</html>
CSS class Selector:-
Class selector used when user want to apply same style effect to all elements within page then
class selector used. Class selector denoted by (.) symbol.
<html>
<head>
<title>CLASS SELECTOR</title>
<style>
.intro{text-align:center;color:blue}
</style>
</head>
<body>
<p class="intro">Hello student</p>
<h1 class="intro">Hello</h1>
</body></html>
Class Selector for specific element:-
To specify only one specific HTML element should be affected then you should use the
element name with class selector.
<html>
<head>
<title>CLASS SELECTOR WITH SPECIFIC ELEMENT</title>
<style>
p.intro{text-align:center;color:blue}
</style>
</head>
<body>
<p class="intro">Hello student</p>
<h1 class="intro">Hello all of u</h1>
</body>
</html>
Universal Selector:-
The universal selector is used as a wildcard character. It selects all elements on the webpage.
Universal selector denoted by (*) symbol.
<html>
<head>
<title>CLASS SELECTOR WITH SPECIFIC ELEMENT</title>
<style>
*{text-align:center;color:blue}
</style>
</head>
<body>
<p>Hello student</p>
<h1>Hello all of u</h1>
</body>
</html>
Group Selector:-
The grouping selector is used to select all elements with the same style definition. It is used to
minimize the code. Commas are used to separate each selector in grouping.
<html>
<head>
<title>CLASS SELECTOR WITH SPECIFIC ELEMENT</title>
<style>
h1,h2,p{text-align:center;color:blue}
</style>
</head>
<body>
<p>Hello student</p>
<h1>Hello all of u</h1>
<h2>HTML Program</h2>
</body>
</html>
• Position in CSS :-
CSS help to set position for html element. The element can be positioned by using top,
bottom, left, right properties.
Syntax:-
Selector{position:value;top:value;bottom:value;left:value;right:value}
1] Static positioning:-
This is by default position of html element. It is not affected by setting top, bottom, left
and right properties.
2] Fixed positioning:-
This property help to put text fixed on the browser. If user set this property then element
will not move even page is scrolled.
3] Relative Positioning:-
The relative position property set its normal position.
4] Absolute Positioning:-
This property set an element in specific location and it is not affected by flow of page.
By using this property set element top-left corner.
<html>
<head>
<title>Static and Fixed Positioning</title>
<style>
p.static{position:static;top:50px;bottom:50px;left:50px;right:50px}
h1.fixed{position:fixed;top:50px;bottom:50px;left:50px;right:50px}
h2.relative{position:relative;top:50px;bottom:50px;left:50px;right:50px}
h2.absolute{position:absolute;top:50px;bottom:50px;left:50px;right:50px}
</style>
</head>
<body>
<p class="static">This is paragarph</p>
<h1 class="fixed">This is heading</h1>
<h2 class="relative">This is heading2</h1>
<h2 class="absolute">This is heading3</h1>
</body>
</html>
• Float Property:-
Float is CSS property write in CSS file or directly in the style of element.
1] float: left :-
This keep element left side of container.
2] float: right :-
This keep element right side of corner.
3] float : none :-
This is default property it shows element as it is.
<html>
<head>
<title>Static and Fixed Positioning</title>
<style>
.float-left{float:left;font-size:20px;background-color:red}
.float-right{float:right;font-size:20px;background-color:red}
.float-none{float:none;font-size:20px;background-color:red}
</style>
</head>
<body>
<p class="float-left">This is paragarph</p>
<h1 class="float-right">This is paragarph</h1>
<h2 class="float-none">This is heading2</h1>
</body>
</html>
• Display Property:-
The display property in CSS defines how html element (div, hyperlink, heading) are
going to placed on webpage. At name suggest this property define different part of
webpage.
Syntax: -
Display: value;
1] Inline : - It is used to display element in single line.
2] Block: - It is used to display element in block letter. It starts to display content new
line.
3] Block-inline: - This value is similar to inline element but difference is that user able to
set height and width.
4] none :- The element display content as it is.
<html>
<head>
<title>Display Property</title>
<style>
p{display:inline;}
h1{display:block;}
h2{display:block-inline;}
h1{display:none;}
</style>
</head>
<body>
<p>This is </p><p> First Html</p><p>Program</p>
<h1>Hello</h1><h1>Sandeep</h1>
<h2>HTML</h2><h2>Program</h2>
<h3>JS</h3><h3>Program</h3>
</body></html>
• Ordered List or Numbered List:-
The <ol> Tag define an ordered list. An ordered list can be numerical or alphabetical.
Attribute of <ol> tag:-
1] Type: - 1 is default value and other values specify the numbering type for used item.
Attribute contain values are 1, A,a,i.
2] Reversed: - This attribute specifies that item of the list specified in reverse order.
3] Start: - Specify starting number of the first item in ordered list.
Eg.
<html>
<body>
<h3> List of Topic</h3>
<ol>
<li>Basic of IT</li>
<li>HTML5</li>
</ol>
<ol start=”50”>
<li>Basic of IT</li>
<li>HTML5</li>
</ol>
</body></html>
• Unordered List :-
An Unordered list is created with <ul> tag. And each list item start with <li> tag. The list
item is marked with bullets (small black circle).
Unordered list is containing three values:-
1] bullet 2] circle 3] square
<html>
<body>
<h3> List of Topic</h3>
<ul>
<li>Basic of IT</li>
<li>HTML5</li>
</ul>
</body></html>
• Definition list :-
To define definition list <dl> tag is used. You can create item in definition list
with <dt> and <dd> tag.
Eg.
<dl>
<dt>Web</dt>
<dd>Web information</dd>
</dl>
• Nested list :-
If user want to display one list inside another list called nested list.
There are two types of nested list.
1] Nested ordered List 2] Nested Unordered List
• <audio> tag in html :-
By using <audio> tag user add audio within web page.
Common audio format:-
1] mp3 :- An audio format from MPEG(Moving Picture Expert Group)
2] aac:- Advanced audio coding standard format on IPhone, YouTube.
3] ogg :- An open container and free audio format.
Syntax:-
<audio src=”sample.mp3” type=”audio/mpeg” controls>
Attribute of <audio> tag :-
1] Autoplay 2] Controls 3] loop 4] muted 5] src
• <source> tag :-
<source> tag is used to add multiple audio file in webpage.
<html>
<head>
<title>source tag in html</title>
</head>
<body>
<source src=”test.mp3” type=”audio/mp3”>
<source src=”test.ogg” type=”audio/ogg”>
</body>
</html>
• Image Map in HTML :-
An image with multiple hyperlinks is called as image map. Image map is used to connect
link to different region on webpage. here in clickable region are called as hotspot.
Image map are two types client side image map and server side image map.
1] <img> :- This tag is used to insert image in webpage. Here use usemap is used as
attribute with <img> tag.
2] <map> :- It has only one attribute name. It specifies name of the image used for
client side image map.
3] <area> :- It define specific clickable region. A given <map> element can contain
multiple <area> element within it. <area> tag and <map> is paired.
Attribute of <area> tag:-
1] href :- By using href attribute user can specify the file name.
2] Shape: - Shape values are rect, circle or poly.
3] cords :- cords attribute user specify coordinate of that shape.
4] alt :- specify alternate name of image.
• Inline Frame in HTML5 :-
<iframe> tag used to create inline frame. Inline frame are used in online advertising.
Attribute of <iframe> tag:-
1] src :- specify the address of document.
2] height :- specify height of inline frame.
3] Width :- specify width of inline frame.
4] Name :- specify name of inline frame.
5] srcdoc :- specify html content of the page to show <iframe> tag.
• Website Hosting:-
Web hosting is the service of providing storage space. The website made available on
the internet with the help of web hosting.
Types of Web hosting:-
1] Shared hosting: - It is cost effective. It gives domain name to your website.
2] Free hosting: - There is some hosting website which provides you free hosting of
website for limited period of time.
3] Dedicated hosting: - These are paid hosting server for large website.
