IT SKILLS
UNIT-2
DESIGN AND DEVELOP WEB PAGES
2.1 Basic Web
TechnologiesBrowser:
Web Browser is a software application for accessing the information on the World
Wide Web (www).
When a user requests a web page from a particular website, the web browser
retrieves the necessary content from a web server and then displays the page on the
device
Ex:
Google Chrome, Internet Explorer, Opera mini etc.
Web Server:
Web servers are program that provides document to requesting browsers. Servers
are slave programs because they act only when requests are made to them by
browsers.
Web servers are the software/programs that provide documents to requesting
browsers.
Ex:
Apache, Internet Information Services (IIS).
Client-server model:
The client-server model describes how a server provides resources and services to one
or more clients.
Ex:
Web servers, Mail servers, and File servers.
Dept of CSE, GPT Kollegal Page | 1
IT SKILLS
URL:
It Stands for "Uniform Resource Locator”.
A URL is the address of a specific webpage or file on the Internet.
Ex:
[Link]
SEO:
SEO stands for Search Engine Optimization, which is the practice of increasing
the quantity and quality of traffic to your website through organic search engine
results.
SEO Techniques:
1) Improve User Experience Across Your Entire Site
2) Optimize for Voice Search
3) Design for Mobile First
4) Focus on Topic Clusters Instead of Keywords
5) Write Longer Content (Most of the Time)
6) Take Advantage of YouTube SEO
7) Target Local Searchers with Local Landing Pages and Listings
8) Measure SEO Performance
Domain names and Domain name system:
Domain Name is a unique name that helps to identify a particular website.
Ex: [Link], [Link]
Domain Name System (DNS) is a server that translates the domain (name of the web
site) to the corresponding IP address to provide the required webpage.
Ex:
[Link]
Dept of CSE, GPT Kollegal Page | 2
IT SKILLS
Web page is a document available on World Wide Web. Web Pages are stored on web
server and can be viewed using a web browser. A web page can contain huge
information including text, graphics, audio, video and hyperlinks.
2.2 Creating web pages with HTML5-Static web pages
Introduction
HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
A simple HTML document
Ex:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1><br>
<p>My first paragraph.</p>
</body>
</html>
Static Web page
A Static website or static web page contains information that doesn't change
automatically. It remains the same, or static, for every viewer of the site.
Dept of CSE, GPT Kollegal Page | 3
IT SKILLS
Editors
It is a software program that allows users to create or manipulate plain text computer
files.
Types of editors. There are two main varieties of HTML editors:
1) text and
2) WYSIWYG (what you see is what you get) editors.
Ex:
Notepad and WordPad, Word, Notepad++, etc..
Tags
Tags are the basic formatting tool used in HTML (hypertext markup language) and
other markup languages, such as XML.
HTML tags are like keywords which define that how web browser will format and
display the content.
HTML tags contain three main parts: opening tag, content and closing tag.
<html> is the opening tag that kicks things off and tells the browser that everything
between that and the </html> closing tag is an HTML document.
The stuff between <body> and </body> is the main content of the document that
will appear in the browser window.
The closing tags </body> and </html> put a close to their respective elements.
Ex:
<html>
<body>
This is my web page
</body>
</html>
Attributes
All HTML elements can have attributes.
Attributes define additional characteristics or properties of the element.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value".
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the
link goes to:
Ex:
Dept of CSE, GPT Kollegal Page | 4
IT SKILLS
<a href="[Link] W3Schools</a>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:
Ex:
<img src="img_girl.jpg">
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specifies
the width and height of the image (in pixels):
Ex:
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image,
if the image for some reason cannot be displayed. This can be due to slow
connection, or an error in the src attribute, or if the user uses a screen reader.
Ex:
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and
more.
Ex:
<p style="color:red;">This is a red paragraph.</p>
The title Attribute
The title attribute defines some extra information about an element.
Ex:
<p title="I'm a tooltip">This is a paragraph.</p>
Elements
An HTML element is defined by a start tag, some content, and an end tag.
Syntax:
<tagname>Content goes here...</tagname>
Ex:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Dept of CSE, GPT Kollegal Page | 5
IT SKILLS
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Headings
HTML headings are titles or subtitles that you want to display on a webpage.
Ex:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Output:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Links
HTML links are hyperlinks.
Links or hyperlinks allow users to link from one web page to another web page.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Syntax:
The HTML <a> tag defines a hyperlink.
<a href="url">link text</a>
Ex:
<a href="[Link] [Link]!</a>
Dept of CSE, GPT Kollegal Page | 6
IT SKILLS
Images
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax:
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it.
Ex:
<img src="img_chania.jpg" alt="Flowers in Chania">
List
HTML lists allow web developers to group a set of related items in lists.
There are two types:
1. Order list
2. Unorder list
Order list:
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
Ex:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Dept of CSE, GPT Kollegal Page | 7
IT SKILLS
Unorder list:
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
Ex:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tables
HTML tables allow web developers to arrange data into rows and columns.
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag.
Each table header is defined with a <th> tag.
Each table data/cell is defined with a <td> tag.
Ex:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Forms
The HTML <form> element is used to create an HTML form for user input.
An HTML <form> is used to collect user input.
Ex:
<form>
.
form elements
.
</form>
Dept of CSE, GPT Kollegal Page | 8
IT SKILLS
The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
Formatting
<b> - Bold text
Ex: <b>This text is bold</b>
<strong> - Important text
Ex: <strong>This text is important!</strong>
<i> - Italic text
Ex: <i>This text is italic</i>
<em> - Emphasized text
Ex: <em>This text is emphasized</em>
<mark> - Marked text
Ex: <p>Do not forget to buy <mark>milk</mark> today.</p>
<small> - Smaller text
Ex: <small>This is some smaller text.</small>
<del> - Deleted text
Ex: <p>My favorite color is <del>blue</del> red.</p>
<ins> - Inserted text
Ex: <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<sub> - Subscript text
Ex: <p>This is <sub>subscripted</sub> text.</p>
<sup> - Superscript text
Ex: <p>This is <sup>superscripted</sup> text.</p>
Layout
Websites often display content in multiple columns (like a magazine or a
newspaper).
HTML has several semantic elements that define the different parts of a web page.
1) <header> - Defines a header for a document or a section.
2) <nav> - Defines a set of navigation links.
3) <section> - Defines a section in a document.
4) <article> - Defines an independent, self-contained content.
5) <aside> - Defines content aside from the content (like a sidebar).
6) <footer> - Defines a footer for a document or a section.
7) <details> - Defines additional details that the user can open and close on demand.
8) <summary> - Defines a heading for the <details> element.
Dept of CSE, GPT Kollegal Page | 9
IT SKILLS
Iframes
An HTML iframe is used to display a web page within a web page.
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document.
Syntax:
<iframe src="url" title="description">
Ex:
<iframe src="demo_iframe.htm" height="200" width="300" title="IframeExample"><
/iframe>
2.3 Formatting web pages with style sheets (CSS3)
Introduction to CSS
CSS is the language we use to style a Web page.
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
External stylesheets are stored in CSS files.
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
Inline CSS
Inline by using the style attribute inside HTML elements.
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Dept of CSE, GPT Kollegal Page | 10
IT SKILLS
Ex:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
Internal - by using a <style> element in the <head> section.
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
Ex:
<html>
<head>
<style>
body
{
background-color: powderblue;
}
h1
{
color: blue;
}
p
{
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Classes
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the
class name. Then, define the CSS properties within curly braces {}:
Dept of CSE, GPT Kollegal Page | 11
IT SKILLS
Ex:
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
ID’s
The HTML id attribute is used to specify a unique id for an HTML element.
The id selector uses the id attribute of an HTML element to select a specific element.
To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
Ex:
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
Dept of CSE, GPT Kollegal Page | 12
IT SKILLS
<h1 id="myHeader">My Header</h1>
</body>
</html>
Div
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with
CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Ex:
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
Color
HTML colors are specified with predefined color names, or with RGB, HEX, HSL,
RGBA, or HSLA values.
Ex:
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Dept of CSE, GPT Kollegal Page | 13
IT SKILLS
Floating
The float property is used for positioning and formatting content e.g. let an image
float left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float. This is default.
inherit - The element inherits the float value of its parent
Ex:
img
{
float: right;
}
Positioning
The position property specifies the type of positioning method used for an element.
There are five different position values:
static
relative
fixed
absolute
sticky
Ex:
[Link]
{
position: static;
border: 3px solid #73AD21;
}
Margins
The CSS margin properties are used to create space around elements, outside of any
defined borders.
With CSS, you have full control over the margins. There are properties for setting the
margin for each side of an element (top, right, bottom, and left).
CSS has properties for specifying the margin for each side of an element:
margin-top
Dept of CSE, GPT Kollegal Page | 14
IT SKILLS
margin-right
margin-bottom
margin-left
Ex:
p
{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the
padding for each side of an element (top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
Ex:
div
{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Borders
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
Dept of CSE, GPT Kollegal Page | 15
IT SKILLS
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right
border, bottom border, and the left border).
Ex:
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
Fonts
Using a font that is easy to read is important. The font adds value to your text. It is
also important to choose the correct color and text size for the font.
In CSS there are five generic font families:
Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern
and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.
Ex:
.p1
{
font-family: "Times New Roman", Times, serif;
Dept of CSE, GPT Kollegal Page | 16
IT SKILLS
}
.p2
{
font-family: Arial, Helvetica, sans-serif;
}
.p3
{
font-family: "Lucida Console", "Courier New", monospace;
}
Aligning Text
The text inside an element, use text-align: center;
Ex:
Set the text alignment for different <div> elements:
div.a
{
text-align: center;
}
div.b
{
text-align: left;
}
div.c
{
text-align: right;
}
div.c
{
text-align: justify;
}
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Dept of CSE, GPT Kollegal Page | 17
IT SKILLS
Ex:
a
{
color: hotpink;
}
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
2.4 Creating a web page dynamic using JavaScript
Dynamic Web page
A Dynamic website or dynamic web page contains information that changes based
on request.
It shows different information at different point of time. It is possible to change a
portion of a web page without loading the entire web page. It has been made
possible using Ajax technology.
There are two types of dynamic web pages:
1) Server-side dynamic web page
It is created by using server-side scripting.
Web pages that change when a web page is loaded or visited use server-side
scripting.
2) Client-side dynamic web page
It is processed using client-side scripting such as JavaScript.
Client-side content is content that's generated on the user's computer.
Dept of CSE, GPT Kollegal Page | 18
IT SKILLS
Introduction to JS
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" calls it.
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the
element content (innerHTML) to Date():
Ex:
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button" onclick="[Link]('demo').innerHTML =
Date()">Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Basic syntax
The JavaScript syntax defines two types of values:
Fixed values are called Literals.
Variable values are called Variables.
JavaScript syntax is the set of rules, how JavaScript programs are constructed
var x, y, z; // Declare Variables
x = 5; y = 6; // Assign Values
z = x + y; // Compute Values
JavaScript Variables
In a programming language, variables are used to store data values. JavaScript uses
the var keyword to declare variables. An equal sign is used to assign values to
variables.
Ex:
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x is defined as a [Link], x is assigned the value of 6:</p>
<p id="demo"></p>
<script>
var x,z;
x = 6;
Dept of CSE, GPT Kollegal Page | 19
IT SKILLS
// z = 6; I will not be executed
[Link]("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript Comments
Code after double slashes // or between /* and */ is treated as a comment.
Functions
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Ex:
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation, and returns the result
:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2)
{
return p1 * p2;
}
[Link]("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Events
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these events.
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
An HTML web page has finished loading.
An HTML input field was changed.
An HTML button was clicked.
Dept of CSE, GPT Kollegal Page | 20
IT SKILLS
Syntax:
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">
Ex:
<html>
<body>
<button onclick="[Link]('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>
Common HTML Events
Here is a list of some common HTML events:
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
Dept of CSE, GPT Kollegal Page | 21
