Scribd
Upload
12 views

Web Design (HTML) Part-1

The document discusses HTML frames and how they can be used to create navigation menus in one frame while loading main page content into another frame. It provides an example HTML code for a simple page with two frames - one for the navigation menu and one for the main content. The document also discusses the differences between static and dynamic websites.

Uploaded by

Ishita Mahajan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Web Design (HTML) Part-1

The document discusses HTML frames and how they can be used to create navigation menus in one frame while loading main page content into another frame. It provides an example HTML code for a simple page with two frames - one for the navigation menu and one for the main content. The document also discusses the differences between static and dynamic websites.

Uploaded by

Ishita Mahajan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

9/13/2022

HTML Frames

One of the most popular uses of trames to


is place
navigation bars in one trame and then load main pages

into a separate frame


For this use, Frame's name and farget attributes

frame _menu.html frame


main.html
<IDOCTYPE htm>
<htm> <head stitle>HTML Target Frames </title> <heads <IDOCTYPE htmb>
<htm
cirameset cols 200, cbody bgcolor= "#b5dcb3">

frame sro "frame menul.html" name "menu_page"


<h3>This is main page, it will display content trom
strame srctrame_main.html" name "main page"
selected link.c/h3>

P clhck and s e e , p
notrames

<body Your browsr does not support frames.cibody

Snotrames Ibouy

</frameset
htm
/htm>

irame menul.html
frame menul.html aehaS6 <htm
htmb
cbody bgcolor= "yellow>
<body bgcoloryellow Sa href http://www.google.com target="main _page
a href "http://www.google.com target mmain_ page Google a

Google a
<br
br /P

a href-http://www.microsoft.com" target "main page


a nret http//www.microsolt.com target-main pajRe Microsoft/a
Microsoftsa
<br
br/2

Colcge
<a hret"http://www.mscw.ac.in
target sell
a hrelhtp://www.mscw.ac.in arget man page
a
College body
<body> Ihtmi
<htmb 7S
Jt Lill epam

eAetSae t stt pen N s


WebPage WebPageMTH
Web. Aweb page is often used Se3
AHypertext document connected to the World Wide
A document, commonly writen in HTML, that is viewed -
to provide information to viewers, including
in an Internet browser. pictures or videos

A document which can be displayed in a web browser -to help illustrate important topics. spp
such as Firefox, Google Chrome, Opera, Microsoft -as a method to sell products or services to

Internet Explorer or Edge, or Apples Safari.


Viewe g-bani
A web page may containtext, graphics, and hyperlinks to A web page can be accessed by entering a URL address

other web pages and files. into a browser's address bar.

Website Website
is hosted on one or more servers and can be
Aset of related web pages located under a single domain Website
accessed by visiting its homepage using lnternetcomputer
niame.

Multiple web pages make up a website network.


A Website 1s managed by 1ts Owner that can bC an
that contains more
A website refers to a
central location individual, company or an organization.
thousands of different
than one web page, may include

web pages.
T h e first page of a website is called nome page

Each website has specific internet address (URL) that you

access a website.
need to enter in your browser to

Static Website
Website
fixed tor cach page so the information
The codes are

W e b s i t e s are separated into two different types: change and it looks like a
contained in the page does not

static and dynamic. printed page.


Static Website

Static websites
- Basic, simple, easy to create

-are ones

-display the
that are fixed and

same c o n t e n t

written exclusively
for

in HTML.
every user, usually
Server
- Clent/roer
Dynamic Website Dynamic Website
collection of dynamic web pages
whose content changes It accesses content from database or Content

dynamically. Management System (CMS).


can display different content and provide user interaction, Therefore, when you alter or update the content of the

the content of the website is also altered or


by making use of advanced programming and databases database,

in addition to HTML. updated.

more functional
Dynamic website uses client-side scripting or server-sid
content
scripting, or both to generate dynamic
require more work that static websitee

Dynamic Website

content at the client


Client side seripting generates
Dynamic Website The web browser
on the basiIS of user nput.
computer
from the server and processes
downloads the web page
information to the user.
to render
the code within the page

software runs on the server


n server side scripting, the
CllentBrowser
in the server then plain pages
Server and processing is completed
are sent to the user.

Databasels)

Dzne Websil
Stulic Wekle

ane sery tme De pge s laded.


Coteta gereated qgidiy and durges ngiaty
Preait contet

Aud) d eernger
raquet a r grez dheret HTL fr
e ety Be sne reportbreey
shd ilos e svrs
sonee pbies and The page cortns enersd ade
he cortert a oniy danged ten
spdites the flia (aerds tta ene
abartag
d fC t s
rtt Varagenet 5yten (6) atenan
Ferbity s he man adurtige
SeReA

HTML Forms HTML Forms

Most areas where you can input Forms allow us to automate sending and receiving data
information into web
created HTML from a web page.
pages are using forms: entering text or
numbers into a text box, ticking a check box, choosing a
Useful for:
radio button, or selecting an option from a list. Auuehah
website and forum logins;
The form is then usually submitted to the website and the - wseidetailed
-

signing guest books;


data is used in some way.
-web based email;
Details might be stored in a database tor later use, or the

website might be updated after you choose a product to


-online questionnaires etc. Ko adack pr
view

HTML Forms

Ceder3teFe torm.. </lorm


All form clements such as inputs and buttons must go

within the form tags.


In most cases, a form must have the name, action &
Bath Phemg d m Radng B e a

method attributes set.

- name"2"- A unique name identifying the form,

used by the action script.

HTML Forms
HTML Forms

method=2-The method used by the action


that
The address (URD of the script
action "url"
-

Script, post or get.


submitted.
will process the form data when
to
For example, post would be used to submit data a

the action URL 1S not needed, for


In some cases
user-registration fom, and
function is
example when a client-side JavaScript
the form get is used for searches or
forms that must retum
programmed into the web page to process

data.
information
<form name="formExamplel" action= "formaction.php"
methode p o s t .
9/15/2022

3
Input Field form>
Name: input type="text" value"ABC"
<input
-

cb
Email: sinput
-Used to create a
simple text-entry field for form type "text name= "email2" value=
<input type"text" name" name" value="Jon Doe"> Comments: <br
textarea name "comments" cols"25 rows39 textarca
name"-Unique name for the input to be used by the action
SbrP
Script input type submit valuesubmit"

value "-Initial value or data displayed in the input field when form

the form is first loaded.


Email
Coament
ype There are several types of form input fields, text,

password, checkbox, radio, file, image, & hidden are among the
submit
most cOmmon

Input Field Questions to do..


name"name" value"Jon Doe">
<input type"text"
size"5"- Defines the input size or width, defined in terms of Q1. Create a form with following fields

number characters wide instead of pixels.


mau

of input field, such as the


maxlength "30"- Maximum length
maximum number ot characters for a text input.

submt
Q2. Create a form with 3 text inputs and
. a n input field takes only S character as input
10
2. Input text with size-3, maxlength

3. Input text with size=10, maxlength=3

HTML Forms <input>


HTML Forms Elements
Descrpa

Main Elements
<Input befines a onee pas
passod
Seiec Defnes a submt Bufton to ubmit the fom to senver

textarea

<button set
Del nes a r e e D u a

<inpup Delnes a tad9

T h i s is the most important and frequently


used element of the
heckbos Deflees dheckboes sheh n
form. 1here are aitcrent ype

n p u t ype submit
Inpu ype pas5OWrd Defees to Beect the fleon
bog

-input type text


-input type"number
<form
name: sinput type text" value="ABC">

cbro User 10
Email: sinput type= "text" name="email" value=" name"user-id" value"user>
SInput type"text
<bp Password:
Comments: <brp input type password namepass" value pass>
textarea name "comments" cols"25" rows"3"> textarea
<bp /lorm
input type"submit" value "hello"
</form>

Name: PasSwoerdom
Email
Comments: as
The characters in a password field are masked (shown
asterisks or circles).

submit

Kindly Select your favorite color input type "submit" value-"login">

<input type="radio" name="color" value="red1"> Red


Sinput type=radio" name="color" value="b"> blue input type "reset value- "Reset>
login Reset
<input type="radio" name="color" value= "greengreen
<input type="radio" name-="color" value="pink">pink
<input type"'submit"> defines button
Kindly Select your favorite color for submitting form data to a form-handler.
Red The form-handler is typically a server page with a script for
blue
processing input data.
green
The form-handler is specitied in the form's action attribute.
pink

buttons let a user select ONLY ONE of a limited number of


Radio
Cholces

To define a button: m o dh
<input type "submit" value"login
login Reset <input typebutton" value
onclick"alert(you are learming HTML)">
"Click me
"

input type"reset" value-"Reset>

reset
defines a reset button that Will
sinput type="reset">
all form values to their defaulit values. Click me
the "Reset
values and then click
It you change the input
values
form-data will be reset to the default
button, the This page says
o u are leaming HME
<input type checkbox> defines a
checkbox.
Checkboxes let a user select
ZERO or MORE
limited number of choices. options of a
Input Type Color
Kindly Select your favorite color input type "color> is used for input fields that should
contain a color.
<input type" checkbox " name color
input type"
eheckb0x "
value="red'> Red Depending on browser support, a color picker can
name-"color" value="blue"> blue show up in the input field.
Input type checkb0x namecolor"
value"green>green
<input type=" checkbox "
name"color" value="pink">pink input type="color" name="colorl" value="#fFO000">

Kindly Select your favorite color input type color name "color2" value "Hff0Off°>
Red
blue
green
pink

Input Type Date Input Type Email


d 2noi2ou
* <input type"date"> is used for input fields that should is used for input ficlds that should
input typeemal
Contain an cmail address.
contain a date.

date picker can -Depending on browser support, the e-mail address can
Depending on browser support, a be automatically validated when submitted.
show up in the input field.

SInputtype email ame C_cmail


input type"date" name "dobl">

bmail 38aa

Date: mm/dd/yyyy
Please incude an '@in the email address a22 is missing an

Input Type Number


Input Type File input type "number> detines a numeric input field.

also set restrictions on what numbers are


file-sclect field and a You can
defines a
<input ype ile ccepted.
Browse button for file uploads.

Number in range of 2-7:


<input typeile name"myfile"
inputtype number 1dquantity name quantity
min2 max7

File to upload: Choose File Number in range of 2-7:

Number in nuge of 27 U

than or sgual to 2
a l e m u t be greater
Drop Down LAst Drop Down List
drop-down list, also referred to as a combo-box,
allowing a selection to be made Irom a list of Selection List- <select select
iterms.
muliple attribute - Allows a user to select multiple ftems

Lplease choose onej v from the list, normaly imited to one.

Selection Item- coption option

pleasecnooecn
India
An option tag 1s necdcd 1or cach item mn the ist and, tmust appear

Africa within the select tags. The tex to be shown lor the option must
html examples
appear between the option tags.
contact me
[please choose one w selected aftribute Sets the detault option that is

automaticaly selected when the form is showm.

Drep Down List


select name selectorName">
Questions to do...
optton Ipiease choose onejoption
optaon value- sell selected India
<option Q.Create a form to test following input types elements
option value-afnca Country-Atrica loption
option valuesel3> html examples Date
coption value "sel4>
option
contact
/select
me
option 9 mail

10. File
easecnoose one 11. Number
India
Afnica Q2. Create a Drop-down List in the form.
html examples

contactn
UPlease Choose onej

CSS CSS
Cascading Style Sheets The style sheets define the colour, size and position of text and
Preferred way for setting the look and feel of a website other HTML tags

The cascading means that a style applied to a parent element while the HTML files define the content and hOw it
is
will also apply to all children elements within the
parent. organised.
F o r example, setting the colour of body text will mean all Separaling hem alows you to change the colour scherme

headings and paragraphs within the body will also be the same without having to rewrite your entire web site.

colour. CSS
saves a lot of work t can control the layout of multiple
cO pages allat once

1
9/15/2022

Specifying and Using Styles


There are three main Inline Styles
ways of including a style sheet
page or site: for a web
1.
Styles defined inline in HTML will
Setting the style= ? only apply to the tag they
attribute of a tag, called added to.
2.
Using the <style> tag within inline styies
the colours can be
3.
Creating and
HTMLheader tag specified as either a C3s colour name or hex
linking to an colour co de.

Basic style sheets


external CSS file
<h1
usually modify the appearance of
style="color:red; Some red text s/h1
such as html tags
<body> and <p
The most common
<p>.
style"color:bluesfont-size:46px A blue paragraph.
/p
way to add ess, is to
keep the styles in
external SS files.

Inline-style attribute
The style attribute is just like any other
<style> tag
HTML attribute.
t <p
goes inside the elements beginning tag. right after the style color:bluetont-size:abpx A Dlue
paragraph.
tag
name. p

The attribute starts with style, followed The inline styie above is almost like
by the following CSS rule:
an
equals sign, , p
and then
finally uses double quotes, which contain the
color: blue;
value of the attribute.
font-size: 46px;
style attribute use Css property-value pairs:property:
value YOu can have as
many property value pairs fhe
want.
a5 you rule above works the same
way as our inline style does,
except for one thing- This rule will affect every p on the
whereas trhe
page,
Don't inine styie will affect
forget to include the semicolon; after each pair! only the sp> its written in.

<style> tag-Within the HTML header WHEN TO USE INLINE STYLES


A style defined in the header will apply to the whole page. Professional web developers do not use inline styles often,
The example below will make all hi tags in your page show but there are times when they are important to understand or
the heading in red.
necessary to use. Here are a few places you may see inline

chead> styles:
- HTMLe-mall
'<Style type="text/css"
h1{color: red;} -older websites
</style> -
CMS content (e.g. Word Press, Drupal)
</heads - Dynamic content (i.e. HTML created or changed by

JavaScript
External CSS file External CSS file

Like HTML files, CSS fles are aiso plain text, and nave File style.css can then be inciuded using the <link . tag in
a.css file extension. the HTMLheader

An example of a CSS file name style.css can be seen below. <head>

body <link rel="stylesheet" type="text/css" hrefs"'style.css


background-color: beige title="style"
color: H000080; </heads

h1(color: red; }

External CSS file Colours & Borders

CSs @import directive color: red; Element Colour - e.g. red 1 #FFOO00

<style>
background-color: white; Background Colour of element
@import url('styles.css;
/styles background-Image: uriimage-9if; Background image Ot
This statement tels the browser to fetch a style sheet with the
element
name styies.cs. tne

@import command is quite flexible in that you can create border-color: yellow; Border Colour of element
style sheets that themselves pull in other style sheets, and so
border: 1pxsolid blue; Width, style and colour of border
n.

You need to just make sure that there are no <style> or defined together
s/style tagS in any of your external style sheets, or they will
t work

esdSize and Layout


aheText StylesEHW
text-align: lefty Horizontal Allgnment- left | center I right width: 400px Width of HtML element -eg, 100px 50%

decoration:underline; Text Decorations e g . none height:100 Helght of HTMLelement-e.8. 20px 100%


ext
margin: 5px Margin-space arOund an element, or
underline line-through
distance between two elements
font-familyfontname; Font Face (typetace)- eg. Verdana

Font Size or Helght - eg 12pt | 15px margin-top: 1px; Top Margin. Also try -bottom: left: or -right
font-size: 16pt;
padding:5px Padding-distance between an elements
font-weight:bold;
Font Weight (Boldness)- eg, bold
contents and its border
normal | 200

adding-top:lpx Top Padding, Also try -bottom: -left: or


ight:
9/15/2022

DOM
Docunment Object Model- In the
webpages are reterred to as documents.
world of web, all HTML DOM
The Document
Object Model represents each of these web It defines the logical structure of documents and
pages ih a
tree-like structure to make it
easier to access and mana8e the elements.
The way a document is accessed and manipulated.
HTML DOM is an
Object Model for HTML. It defines:
with the DOM, programmers can create and build
-

HTMLelements as objects documents, navigate their structure, and add, modify, or


-

Properties for all HTML elements delete elements and content.


-

Methods for all HTML elements Anything found in an HTML or XML document can be
-

Events for all HTML elements accessed, changed, deleted, or added using the DOM, with a

In the boM, documents few exceptions


have a logical structure which is very

much like a tree.

HTML DOM model is constructed as a tree of Objects


How is a DOM created?
DOM contains a bunch of nodes where each node represents Doaument
an HTML element.
RoE Cemert
The cHTML tag always comes at the top and hence is called
ert
ne troot node. haat cbhod
The rest of the nodes come under it and hence are called
t Atrbute:
children nodes

The nodes present at the bottom are called "leaves and are
Text hader
usually filled with elements attributes, values and events

DOM The Document Object Model represents this table like this:

DOM is a programming API for documents.

The object model lItself closely resembles the structure of


the
TABLE
documents it models.

this table, taken from an HTML ROWS


instance, consider
Forment:
OOcu
<TABLE>
<TR TD>Shady Grovec/TD
TR
<TD>Aeolian</TD> </TR>
<TR> TD>Over the River, Charlie/TD>
<TD>Dorianc/TD> </TR>

</TABLE
Sere

JavaScript
JavaScript
Today, JavaScript can execute not only in the browser, but also

Javoscript was created to make web pares alive on the server, or actualy on any deviIce that has a special

When Javascript was created, it initially had another name: program called the Javaacript engine.
an embedded engine sometimes called a
"Liveacripf The browser has

at that time, so it was decided that JavaScript virtual machine.


But Java was very popular
of Java
positioning8 a new language as a younger brother How do engines work

would help. -

The engine (embedded if it's a browser) reads ("parses") the

But as it evolved, JavaScript became a fuly independent script.


machine
T h e n it converts ('compiles") the script to the
and
language with its own specification called ECMASCript, languag
now it has no relation to Java at all.
And then the machine code runs, pretty fast.

JavaScript three great things about JavaScript

It does not
Modern Javaacript is a "safe programming language.
because it was
1. Full integration with HTML/CSS.
low-ievel access to memory or CPu,
provide
browsers which do not require it. 2. Simple things are done simply.
initialy created for
default.
In-browser Javaacript is able to: 3. Support by all major browsers and enabled by
HTML to the page, change the existing content
-

Add new

modity styies. that combines


JavaScript is the only browser technology
run on mouse clicKS, pointe
React user actions,
to these three things.
moverments, key presses. its the
That's what makes Javaacript unique. That's why
over tne network to
remote servers, downioad
most widespread tool for creating8 browser interfaces.
Send requests
and upload files servers, mobile
show JavaScript also allows to create
and set cooKies, ask questions to the visitor,
-

Get dpplications, etc.

messages
Remember the data on the ciientside focal storoEe

JavaScript Syntax
JavaScript
a
set of rules that define
The syntax of Javascript is the
scripts.
in this language are called program.
T h e programs correctily structured Javaacript
run

written right in a web page's HTML and statements that are placed
They can be A Javaacript consists of Javaacript
in a web page, or
the loads. HTML tags
automatically as page within the escripb/scriptb
plain text. They don't extension.
are provided
and executed as within the external Javaacript file having Js
Scripts
to run.
preparation or compilation
need special
another
different from
Javaacript is very
In this aspect,

language called Java.


9/15/2022

Using <script></script> tag


<lDOCTYPE htmb>
chtml>
JavaScript
Additson Example:15
chead> Javaacript is case-sensitive.
<title>Example of Javaacript Statements</title> variable myVar must be typed myvVar
/head>
<body
not MyVar or myvar.
<script
document.write("Addition Example::"); Fn name getElementByld0 is not same getElementByiDO

x=5
a rry= 10;

var sum x + Y :

document.write(sum); I Prints variable value


s/script
s/body> </htmis

JavaScript Comments i lqi JavaScript Comments

Javascript support single-line as well as multi-line comments.


A comment is simply a line of text that is completely ignored
Single-line comments begin with a double forward slash U /
by the Javascript interpreter.
*Comments are Usualy added with the purpose ot providing followed by the comment text.

extra information pertaining to source code.


<script
It will not only help you understand your code whern you look I/ This is my first Javascript program
after a period of time but also others who are working with document.write("Hello World!":
you on the same project.
</script

JavaScript Comments JavaScript Variable

amulti-line comment begins with a slash and an asterisk U) Variables are fundamental to all programming languages.

and ends with an asterisk and slash (") Variables are used to store data, like string of text, numbers,

<script
The data or value stored in the variables can be set, updated,
This is my
and retrieved whenever needed.
tirst program
I n general, varíables are symbolic names for values.
in Javascript
document.write("Hello Worldl")

/scriptp
JavaScript Variable
create a
variable with the var keyword,
Declaring Multiple Variables at
can also
Once
whereas the assignment operator ()is used to assign value to declare multiple variables and set their initial
a variable, in a single statement. values
like this: var varName =value; Each variable should be separated by commas
var name =
"Peter Parker";
var age;

var isMarried = false; var name= "Peter Parker, age =


21, isMarried =
false;
I Printing variable values
document.write(name+ "<br>");
21;
document.writelage }: document.write( "<br;
document.write(isMarried);

Naming Conventions for JavaScript


Variables Displaying Output in Alert Dialog
Boxes
variable name must
start with a letter, underscore O. An alert dialog box is created using the alert() method
or
dollar sign (S).
You can also alert
A
use
dialog boKes to display the message or
variable name cannot start with a number. output data to the user
A variable name can only contain alpha-numeric characters <Script>
A-z,0-9) and underscores. Displaying a simple text message
lert("Hello World!");
A variabie name cannot contain
spaces.
/ Outputs: Hello Worldl
varx 10;
A variable name cannot be 20
a
JavaScript keyword or
var sum = X+Y
a avaacript reserved word.
alert(sum / outputs: 30

Data Types
Data Types
Specify what kind of data can be stored and
manipulated
within a program. Primitive data
types can hold only one value at a
time,
There are six basic data whereas composite data
types in Javascript which can be types can hold collections of values
divided into three main categories: and more
complex enuties.
primitive (or primary)-String. Number, and Boolean string data type is Used to
represent textual data (.e.
sequences of characters).
composite (or reference)
Strings are created usin8 Singie
Object, Array, and Function (which are all types of Of double quotes
Surrounding one or more characters
objects)
special data types- Undefined and Null -var a=Hellot; //using singie quotes
-var b= Welcome";/using double quotes
9/15/2022

Cotials
Data Types Data Types

alert(15/0:l/Output: Infinity
Number Data Type
alert(-16/0: //Output: -Infinity
-var a= 25;I/ integer
text" 7 2: //Output: NaN
- var b 80.5;// floating8-point number alertt some
values: true o r fais.
Boolean data type can hold only two
v a r cw 4.25e+6;// exponential notation, same as 4.25e6 or
fn a
as a result of comparisons
B o o l e a n values also come
4250000
same as
prograrm.
var d 4.25e-6; I exponential notation,
vara 2, b=5,cml0
0.00000425 true
values which
alert[b > a) / Output:
* N u m b e r data type also includes some special
alertb> c/output: false
are: Intinity, -infinity and NaN

Array Data Type


Data Types
f o r storing multipie vaiues in singie varabie.
has not been assigned
f a variable has been deciared, but has a numeric
tach value talso called
an element) in an array
value undefined.
a value, has the
position, Known as its index,

data typenumbers, Strines,


t may contain data of any
var b= "Hello World
even other arroys.
booleans, Tunctions, Djecs, and

alert[a) /Output: undefined element


The array index starts from 0,
so that the first array
a l e r t t o ) 7 Output: Helo worid
is arrfO
means that there is no value.
A null value

string () or 0, it is simply
t is not equlvalent to an empty

nothing

Array Data Type


If...Else
f(dayorweek w= 5)
i f f d a y o f w e e k == 5)

var colors IRed,"ellow Green Orarnge 1 e T a v e a nice weekendi'

s e f(daycorweek e 0)
var cities = ['London", Paris", "New York"J;
alertl Have anice
(alertHave a nilce Sunday7
alert(colors0l)}; // Output: Red
else (alert("Have a nice
alert[cities[2); // Output: New York duay

aertt have anice ouy

8 Galr lo elonats 2 di'splay


an
aRRny
Co ee 3 iegee Pus Gmallat & 6 e ne

You might also like