Web Development
23-Apr-20
Topics We Will Cover
HTML
CSS
Javascript
jQuery
Bootstrap
What you can find/show in a web page
Text Content (Headings, Paragraphs, Text)
Images
Videos
Colors
Layout Structure
Hyperlinks
Animation/Effects
Some Query?
Web Page
Website
Static VS Dynamic Website
Server Side Programming Language
◦ Ex – PHP, ASP.NET, JSP
Database
W3C Validation
Website Optimization
HTML
HTML stands for hypertext markup
language.
A markup language specifies the layout
and style of a document.
A markup language consists of a set of
markup tags.
HTML uses markup tags to describe web
pages.
HTML tags are keywords surrounded by
angle brackets like <html>.
HTML
Most HTML tags normally come in pairs like
<b> and </b>. The first tag is called the start
tag (or opening tag) and the second tag is
called the end tag (or closing tag).
HTML documents contain HTML tags and plain
text.
HTML documents are also called Web pages. A
web browser read HTML documents and
displays them as Web pages.
The browser does not display the HTML tags,
but uses the tags to interpret the content of
the page.
HTML Page Structure
<HTML>
<HEAD>
<TITLE> My First Web Page </TITLE>
</HEAD>
<BODY>
<H1> Introduction </H1>
<!-- Rest of page goes here. This is a comment.-->
</BODY>
</HTML>
7
HTML Elements
An HTML element is everything from the
start tag to the end tag.
For example, <p>My first paragraph</p>.
An HTML element consists of start tag, end
tag, and element content.
The element content is everything between
the start tag and end tag.
HTML Attributes
Attributes provide additional information
about HTML elements.
Attributes are always specified in the start
tag. Attributes come in name/value pair
like name = “value”.
For example, HTML links are defined with
<a> tag and the link address is provided
as an attribute href like <a href =
“http://www.google.com”>Google</a>
BODY Element
<BODY attributename="attributevalue">
Deprecated attributes (but still used)
◦ BACKGROUND=“Sunset.jpg”
◦ BGCOLOR=“red” or “#ff0000”
◦ TEXT=color
Ex:
<body bgcolor=“purple” text=“blue”>
</body>
10
Text Formating Tags
Heading
Paragraph
Font - <font> Text </font>
Bold, Italics, Underline
◦ <b> Bold </b>
◦ <i> Italics </i>
◦ <u> Underline </u>
11
Headings
• HTML headings are defined with the <h1> to <h6>
tags.
• <h1> displays largest text and <h6> smallest.
• EX:
◦ <H1 align=“right”> text </H1> -- largest of the six
◦ <H2 ...> text </H2>
◦ <H3 ...> text </H3>
◦ <H4 ...> text </H4>
◦ <H5 ...> text </H5>
◦ <H6 ...> text </H6> -- smallest of the six
ALIGN="position" --left (default), center or right 12
Headings
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1> Level-1 (H1) </H1>
<H2 ALIGN="center"> Level-2 (H2) </H2>
<H3> <U> Level-3 (H3) </U> </H3>
<H4 ALIGN="right"> Level-4 (H4) </H4>
<H5> Level-5 (H5) </H5>
<H6>Level-6 (H6) </H6>
</BODY>
</HTML>
13
<P> Paragraph
<P> defines a paragraph
Add ALIGN="position" (left, center, right)
Use <BR> for blank line
Fully-specified text uses <P> and </P>
14
<BODY>
<P>Here is some text </P>
<P ALIGN="center"> Centered text </P>
<P ALIGN="right"> Right-justified text
</P>
</BODY>
15
Special Characters
Character Use
< <
> >
& &
" "
Space
16
Colors
Values for BGCOLOR and COLOR
◦ many are predefined (red, blue, green, ...)
◦ all colors can be specified as a six character
hexadecimal value: RRGGBB
◦ FF0000 – red
◦ 888888 – gray
◦ 004400 – dark green
◦ FFFF00 – yellow
17
Fonts
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one
</FONT>
<FONT COLOR="green" SIZE="4" FACE="Arial">
Line two contains this text
</FONT>
<FONT COLOR="blue" SIZE="6" FACE="Courier“>
The third line has this additional text
</FONT>
18
Lists
Ordered List
Unordered List
Defination List
19
Ordered (Numbered) Lists
<OL TYPE=“1“ >
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL> 20
Unordered (Bulleted) Lists
<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL> 21
Defination List
<dl>
<dt> Internet </dt>
<dd>
The network of networks
</dd>
</dl>
22
Linking the Web Pages -
<A> Anchors (HyperLinks)
Link to an absolute URL: - External Hyperlink
<A HREF=http://www.gmail.com target=“_blank”>
Click Here </A>
Link to a relative URL : Internal Link
<A HREF=“about.html”>About </A>
Link to a relative URL : Section Link
See these <A HREF="#references"> references </A>
concerning our fine products.
<a name=“references”></a>
Link to a section within a URL:
Amazon provided a
<A HREF=“about.html#reference">
reference for our company. 23
Naming a Section
<H2>
<A NAME="#references">
Our References
</A>
</H2>
Example
24
Hyperlinks
<BODY>
<H3> Welcome to
<A href="http://pascalcollege.edu.np/">
Pascal National College
</A>
</H3>
</BODY>
25
Images
SRC is required
WIDTH, HEIGHT may be in units of pixels
or percentage of page or frame
◦ WIDTH=“500px"
◦ HEIGHT="50%"
Images scale to fit the space allowed
ALIGN = left/right
26
Images
<BODY>
<img src="dolphin.jpg" align="left"
width="150" height="150"
alt="dolphin jump!">
This is an image on the left!<br>
This is an image on the left!<br>
This is an image on the left!<br>
This is an image on the left!<br>
This is an image on the left!<br>
You can see text wrap around it<br>
</BODY>
</HTML>
27
Tables
<TABLE> table tag
<CAPTION> optional table title
<TR> table row
<TH> table column header
<TD> table data element
28
Tables
<TABLE BORDER=1>
<CAPTION> Table Caption </CAPTION>
<TR>
<TH> Heading1 </TH>
<TH> Heading2 </TH>
</TR>
<TR>
<TD> Row1 Col1 Data </TD>
<TD> Row1 Col2 Data </TD>
</TR>
<TR>
<TD> Row2 Col1 Data </TD>
<TD> Row2 Col2 Data </TD>
</TR>
</TABLE>
29
<TABLE> Element Attributes
ALIGN = position -- left, center, right for table
BORDER = number -- width in pixels of border
(including any cell spacing, default 0)
CELLSPACING = number -- spacing in pixels
between cells, default about 3
CELLPADDING = number -- space in pixels
between cell border and table element, default
about 1
WIDTH = number[%]-- width in pixels or
percentage of page/frame width
30
cellspacing=10
cellpadding=10
31
<TABLE> Element Attributes
BGCOLOR = color
-- background color of table
-- also valid for <TR>, <TH>, and <TD>
32
<TR> Table Row Attributes
Valid for the table row:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">
<TR ALIGN="left" VALIGN="top" BGCOLOR="red">
<TD>One</TD><TD>Two</TD>
</TR>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue">
<TD>Three</TD><TD>Four</TD>
</TR>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow">
<TD>Five</TD><TD>Six</TD>
</TR>
33
</TABLE>
<TABLE ALIGN="center" WIDTH="300" border="1">
<TR>
<Th>Name</Th>
<Th>Address</Th>
<th colspan="2"> Contact No. </th>
</TR>
<TR>
<td> AAA </td>
<td> Address 1 </td>
<td> 444444 </td>
<td> 985100000 </td>
</TR>
<TR>
<td> CCC </td>
<td> Address 2 </td>
<td> 555555 </td>
<td> 985111111 </td>
</TR>
</TABLE> 34
What are forms?
<form> is just another kind of HTML tag
HTML forms are used to create (rather primitive) GUIs on
Web pages
◦ Usually the purpose is to ask the user for information
◦ The information is then sent back to the server
A form is an area that can contain form elements
◦ The syntax is: <form parameters> ...form elements... </form>
◦ Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc
Other kinds of HTML tags can be mixed in with the form elements
◦ A form usually contains a Submit button to send the information in
he form elements to the server
◦ The form’s parameters tell JavaScript how to send the information to
the server (there are two different ways it could be sent)
◦ Forms can be used for other things, such as a GUI for simple programs
35
The <form> tag
The <form arguments> ... </form> tag encloses form
elements (and probably other HTML as well)
The arguments to form tell what to do with the user input
◦ action="url" (required)
Specifies where to send the data when the Submit button is
clicked
◦ method="get" (default)
Form data is sent as a URL with ?form_data info appended to
the end
Can be used only if data is all ASCII and not more than 100
characters
◦ method="post"
Form data is sent in the body of the URL request
36
The <input> tag
Most, but not all, form elements use the input tag, with a
type="..." argument to tell which kind of element it is
◦ type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
Other common input tag arguments include:
◦ name: the name of the element
◦ value: the “value” of the element; used in different ways
for different values of type
◦ readonly: the value cannot be changed
◦ disabled: the user can’t do anything with this element
◦ Other arguments are defined for the input tag but have
meaning only for certain values of type
37
Text input
A text field:
<input type="text" name=“txt1" value="with an initial value">
A multi-line text field
<textarea name="txtMessage" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">
• Note that two of these use the input tag, but one uses textarea
38
Buttons
A submit button:
<input type="submit" name="Submit" value="Submit">
A reset button:
<input type="reset" name="Submit2" value="Reset">
A plain button:
<input type="button" name="Submit3" value="Push Me">
submit: send data
reset: restore all form elements to
their initial state
button: take some action as
specified by JavaScript
39
Checkboxes
A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
type: "checkbox"
name: used to reference this form element from JavaScript
value: value to be returned when element is checked
Note that there is no text associated with the checkbox—
you have to supply text in the surrounding HTML
40
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1"> male
<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female
If two or more radio buttons have the same name, the
user can only select one of them at a time
◦ This is how you make a radio button “group”
If you ask for the value of that name, you will get the
value specified for the selected radio button
As with checkboxes, radio buttons do not contain any text
41
Drop-down menu or list
A menu or list:
<select name=“ddlColor">
<option value="red">red</option>
<option value="green">green</option>
<option value=“blue">blue</option>
</select>
Additional arguments:
◦ size: the number of items visible in the list (default is "1")
◦ multiple: if set to "true", any number of items may be selected
(default is "false")
42
Hidden fields
<input type="hidden" name=“hfValue" value=“v1">
What good is this?
◦ All input fields are sent back to the server, including hidden fields
◦ This is a way to include information that the user doesn’t need to
see (or that you don’t want to be seen)
◦ The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
43
Form Example
<body>
<form name = “frm1” method=“get” >
Name: <input type="text" name="textfield"> <br>
Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female
<br>
Hobbies :
<input type="radio" name="chkSports"
value="Sports">Sports
<input type="radio" name="chkTravelling"
value="Travelling">Travelling
<input type="radio" name="chkMovies"
value="Sports">Movies
<br><input type="submit" value="Submit">
</form>
</body> 44
