Chapter 2 Upto 4.pptx Static Site Development (HTML & CSS)

Chapter 2 Static site development (HTML & CSS)
Static & Dynamic web page

1
Static (fixed) web page

 Is a web page that is written entirely using HTML.
 Each web page is a separate document and there are no databases or external files
 The only way to edit this type of website is to go into each page and edit the HTML.
 Difficult to manage and handle the web page
 Hard for Mobility and Modification, also difficult to host up-to-date information
 Visitors to a static Web page all see the same content (unchanged).
 Pre build document and not sufficient

Web Applications Development Technologies 06/19/2023
HTML markup
2
 Stands for Hyper Text Markup Language and is not a programming language, it is a markup
language
 A markup language is a set of markup tags and is a language for describing Web Pages.
 A tag added around content are referred to as the markup
 Is a set of logical codes (markup) that constitute the appearance of a web document and the
information it contains.
 This codes are enclosed by less than “<” and greater than “>” brackets these bracketed code
of the markup are commonly referred to as tags.

Cont….
3
 Most elements have an opening element (tag) and a closing element (tag) Distinguished by
the “/” inside the “<” opening bracket. E.g.<p>this text is paragraph</p>
 html codes are not case-sensitive
HTML element
 The first word or character that appears inside the “<” opening bracket is Called the element.
 An element is a command that tells the browser to do something. e.g. <b>
 : - each block-level element begins on new line and space is also usually add above and below the
entire element by default. e.g. header(h1-h5) and paragraph(p)

Cont…
4
 Inline element:-do not start new line, they just go with flow.
 Empty element:-Empty elements are do not have text content
• E.g. image element(img)
• Line break (br)
HTML Attribute
 Attributes are another way of describing the element’s properties.
 Attribute are instruction that clarify or modify an element.
 Attributes appear to the right of an element, separated by a Space, and followed by an equal sign. The value of the
attribute is contained in quotes.

Cont…
5
 The syntax for attribute as follow

<element attribute name=”value”> content </element>
e.g. <p align=“left”>this is paragraph</p>

or for empty
<element attribute name=”value”/>

Basic HTML Document structure
6
 An element called HTML surrounds the whole document.
 It contains two sub-elements, HEAD and BODY.
 These elements are required to form any HTML document.
<html>
<head>
<title> Document Title </title></head>

<body></body>
</html>
Document explanation
7
 <HTML> is the first tag in your HTML document and this tag tells for your browser this is the
start of HTML document.

 <HEAD>has sub-elements that define header information; header information is not display in the
browser window.
 <TITLE>tag defines document title. The title of your document is what appears in a web browser’s
Bookmark list. Your document’s title should be as descriptive as possible. Search engines on the internet use
the document’s title for indexing purposes. </TITLE>
 <LINK>indicates a relationship between this document and some other object on the Web. </LINK>
 <META>provides information such as the page’s keywords and description that appears in HTTP
headers.</META>
Cont….
8
 <SCRIPT>contains either JAVA Script or VB Script </SCRIPT>
 <STYLE>contains information used by cascading style sheets </STYLE>
 <BODY>the remaining HTML elements are contained within these tags. The text between
<body>tag is displayed in your browser window.</BODY>
 </HEAD>
 </HTML> this tag tells your browser that this is the end of the HTML document.

HTML Headings
9
 Heading are defined with the <h1> to <h6> tags.
 Inside the BODY element, heading elements H1 through H6 are generally used for major
divisions of the document.

 Headings are not mandatory.
 H1: should be used as the highest level of heading, H2 as the next highest, and so forth.
 The size of the text surrounded by a heading element varies from very large in an <H1> tag
to very small in an <H6> tag.

Cont…
10
<HTML>
<HEAD>
<TITLE>Example Pag</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>

Cont…
11
This will produce:

Paragraph, <P></P>
12
 The <p> tag is supported in all major browsers and The <p> tag defines a paragraph.
 Browsers automatically add some space (margin) before and after each <p> element.
<HTML>
<HEAD>
<TITLE>Example Page</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<P>Paragraph 1, ...</P>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>

Break, <BR>
13
 Line breaks allow you to decide where the text will break on a line
 A <BR> is an Empty Element, meaning that it may contain attributes but it does not
contain content. The <BR> element does not have a closing tag.

Horizontal Rule, <HR>
14
 The <HR> element causes the browser to display a horizontal line in your document. This
element does not use a closing tag, </HR>.

Character Formatting Elements
15
HTML defines a lot of elements for formatting output, like bold or italic some of the
element are listed below.
Font element
 Used to modify the text size using size attribute
 The size attribute can be set as absolute value from 1 to 7 or as a relative value using
the “+” or “-“sign.
 e.g.<FONT SIZE="2">Two sizes bigger</FONT>
 Normal text is size 3.
 Used to modify the text color using color attribute
Center text-the <CENTER> element

 <CENTER>…</CENTER> Will center the elements. <FONT COLOR=”#RRGGBB”>this
text has color</FONT>

Cont…
16
Bold Text - The <b> Element:
 Anything that appears in a <b>...</b> element is displayed in bold, like the word bold here:
e.g.<p>The following word uses a <b>bold</b> typeface.</p>This will produce following result:
The following word uses a bold typeface.
Italic Text - The <i> Element:
 Anything that appears in a <i>...</i> element is displayed in italicized, like the word italicized
here:
 e.g. <p>The following word uses a <i>italicized</i> typeface.</p>
 This will produce following result:
 The following word uses a italicized typeface
<EM> element:
 Another element used to make text italicized <EM> Emphasis </EM> browsers usually display
this as italics.
Underlined Text - The <u> Element:
17
 Anything that appears in a <u>...</u> element is displayed with underline, like the word
underlined here:
 <p>The following word uses a <u>underlined</u> typeface.</p>

 The following word uses a underlined typeface
 Strike Text - The <strike> Element:
 Anything that appears in a <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text:
 e.g. <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
 The following word uses a strikethrough typeface

Cont…
18
 Superscript Text - The <sup> Element:
 The content of a <sup> element is written in superscript.
 e.g.<p>ax<sup>2</sup> + bx + c=0</p>
 This will produce the following result
ax2+bx+c=0
 Subscript Text - The <sub> Element:
 The content of a <sub> element is written in subscript;
 e.g.<p>H<sub>2</sub>O</p>
 This produces the following result
H2O

Cascading style sheet
19
 A style sheet is a series of rules that defines the style for a Web page or an entire Web site.
 Style sheets adhere to a common language with set standards and rules. This language, called
Cascading Style Sheets, or CSS, allows a Web developer to write code statements that
control the style of elements on a Web page.
It is a separate language used to enhance the display capabilities of HTML.
 With CSS you can add visual elements such as colors, borders, margins, and font styles to your
Web pages.
CSS is not used to add any content to your Web site; it just makes your content
look more stylish Web Applications Development Technologies 06/19/2023

Cont…
20
 CSS provides support for three types of style sheets
 inline style sheet

 Embedded style sheet
 external (or linked) style sheet
 An inline style sheet, you add a style to an individual HTML tag, such as a heading or
paragraph. The style changes that specific tag, but does not affect other tags in the
document.
 An embedded style sheet, you add the style sheet within the <head> tags of the HTML
document to define the style for an entire Web page.

Cont…
21
 A linked style sheet, or external style sheet, you create a text fi le that contains all of the
styles you want to apply, and then you save the text fi le with the fi le extension .css.
 Example of inline style sheet
 <h1 style =”font-family: Garamond; font-color: navy”>
 Example of embedded style sheet
font-size: 14pt;
<style type=”text/css”>
<!-- color: navy}
p {text-indent: 8pt} a:hover {background: navy;
a {text-decoration: none; color: white}
font-family: Verdana;
- ->
</style>

Cont…
22
 Example of linked style sheet, or external style sheet
a {text-decoration: none; font-size: 11pt}
color: blue} th {color: white;
p {font-family: Verdana, Garamond; background-color: blue;
font-size: 11pt} font-size: 11pt;
table {font-family: Verdana, Garamond; text-align: left}

Chapter three Using lists and tables
lists in HTML
23
There are three basic types of lists in HTML:
i. Unnumbered,
ii. Numbered
iii. Definition.
• Unordered (or Unnumbered) lists are indented lists with a special bullet symbol in front of
each of them.
 Apple <UL>
 Orange <LI>Apple</LI>
 Grapes
<LI>Orange</LI>
o In order to make above list <UL> tag is used in HTML
<LI>Grapes</LI>
</UL>
Attributes of <UL> (unordered list) tag
24
 By default, a solid circle is used for the bullets. However, you can change the bullet style
using type attribute. The attribute may have a value of either disc, circle or square.
<HTML> <UL type=”circle”> <UL>
<HEAD> <LI> One</LI> <LI>SimCity</LI>
<TITLE>Various Bullet <LI>Two </LI> <LI>Quake II</LI>
Styles</TITLE> <LI>Three </LI> <UL>
</HEAD> </UL> <LI>SimCity 3000</LI>
<UL type=”square”> <LI>Quake III</LI>
<BODY> </UL>
<UL> <LI> One</LI>
<LI> One</LI> <LI>Two </LI> <LI>Bridge</LI>
</UL>
<LI>Two </LI> <LI>Three </LI>
<LI>Three </LI> </UL>
</UL> </BODY>
</HTML>
Numbered Lists or Ordered Lists
25
 Ordered ( or Numbered) lists are indented lists that have numbers or letters in front of each
of them.
 A numbered list is identical to an unnumbered list, except it uses <OL> instead of <UL>.
 The items that are tagged with <LI> appear numbered e.g. 1,2,3 etc. on the browser
window. the output produced is:

 consider the following HTML code 1. Oranges
<OL> 2. peaches
<LI>Oranges</LI>
3. grapes
<LI>peaches</LI>
<LI>grapes</LI>
Attributes of <OL> (ordered list) tag
26
 The start attribute
 Normally, browsers automatically number ordered list items beginning with the Arabic numeral 1.
 The start attribute for the <OL> tag lets you change that beginning value. To start numbering a list
at 5, for example, you may write:
<OL start =5>
<LI> This is item number 5.</LI>
<LI> This is item number 6.</LI>
<LI> And so forth…..</LI>
</OL>

The type attribute
27
 By default, browsers number ordered list items with a sequence of Arabic numerals.
 Besides being able to start the sequence at some number other than 1, you can use the type
attribute with the <OL> tag to change the numbering style itself.
<HTML>
<HEAD> <H4>Letters list :</H4> <LI>Oranges</LI>
<TITLE>Many Ordered Lists</TITLE> <OL type=”A”> <LI>Peaches</LI>
</HEAD> <LI>Apples</LI> </OL>
<BODY> <LI>Oranges</LI> </BODY>
<H4> Numbered List : </H4> <LI>Peaches</LI> </HTML>
<OL> </OL>
<LI>Apples</LI> <OL type =”a” start= 5>
<LI>Oranges</LI> <LI>Apples</LI>
<LI>Peaches</LI>
</OL>

Definition Lists
28
 Definition lists are indented lists without any bullet symbol or any number in front of each
item.
 The following is an example of a definition list:
<DL>
<DT> DBU
<DD> Computing college University of DBU.
<DT> University Center
<DD> Ethiopia
</DL>

TABLES
29
 HTML tables allow you to arrange data into rows and columns of cells.
<HTML>
<HEAD>
 Various Table Tags <TITLE>CREATING TABLE</TITLE>
</HEAD>
1. <table> - wraps up a table and its elements. <BODY>
<TABLE>
<CAPTION>A SIMPLE TABLE</CAPTION>
2. <tr> - which defines a table row. <TR>
<TD>ONE</TD>
3. <th> - which defines table header. <TD> TWO</TD>
<TD>THREE </TD>
</TR>
4. <td> - which defines data cells. <TR>
<TD>FOUR </TD>
5. <caption> - which defined title for the table. <TD> FIVE</TD>
<TD> SIX</TD>
</TR>
</TABLE>
</BODY>
</HTML>
TABLE> tag
30
 The table tag begins the process of building a table. Its attributes are:
 border BORDER attribute <TR>
 bordercolor A table’s border is specified through <TD>Cell Data</TD>
BORDER attribute. <TD>Cell Data</TD>
 frame <TD>Cell Data</TD>
<HTML>
 rules <HEAD> </TR>
<TABLE>
 cell spacing & cellpadding <TITLE></TITLE>
</BODY>
</HEAD>
 align <BODY> </HTML>
 back ground <TABLE border= “1”>
<TR>
 Bgcolor <TD>Cell Data</TD>
 height and width <TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>

BORDERCOLOR attribute
31
 Used to specify the color of table’s border
<HTML>
<HEAD> <TD>Cell Data</TD>
<TITLE></TITLE>
<TD>Cell Data</TD>
</HEAD>
<BODY> <TD>Cell Data</TD>
<TABLE border= “1”
</TR>
bordercolor=“red”>
<TR> <TABLE>
<TD>Cell Data</TD>
</BODY>
<TD>Cell Data</TD>
<TD>Cell Data</TD> </HTML>
</TR>
<TR> Web Applications Development Technologies 06/19/2023
Displaying select border sides – FRAME attribute
32
Allows you to state which portion of the border will render (display). Values that can be
specified for FRAME attribute are: <HTML>
i. above - displays top edge only <HEAD>
<TR>
ii. below – displays bottom edge only
<TITLE></TITLE>
<TD>Cell Data</TD>
</HEAD>
iii. border – displays all four sides <TD>Cell Data</TD>
<BODY>
<TD>Cell Data</TD>
iv. box – display all four sides( like border)
<TABLE border= “1”
</TR>
v. hsides – displays top and bottom edges bordercolor=”red” frame =”above”>
<TABLE>
<TR>
vi. lhs – displays left edge only </BODY>
<TD>Cell Data</TD>
vii. rhs – displays right edge only </HTML>
<TD>Cell Data</TD>
viii. void – displays no border <TD>Cell Data</TD>
ix. vsides – displays left and right sides</TR>

RULES attribute
33
 The RULES attribute like FRAME, also works with the BORDER attribute, except RULES
<HTML>
deals with the inside border edges. <HEAD> <TR>
<TITLE></TITLE> <TD>Cell Data</TD>
 Values that can be specified for RULES attribute </HEAD>
are: <TD>Cell Data</TD>
 all – displays all borders <TABLE border= “1” </TR>
bordercolor=”red” <TABLE>
 cols – displays border between cells. rules =”rows”> </BODY>
<TR> </HTML>
<TD>Cell Data</TD>
 groups – displays borders between all cell group
<TD>Cell Data</TD>
<TD>Cell Data</TD>
 none – hides all interior borders
</TR>
 rows – displays borders between rows only

Cell spacing & cellpadding attributes
34
 Cell padding- gives the amount of space between the cell border and the cell contents. .
 Cell spacing- gives the amount of space between cells.

Cont…
35
 <TABLE border=”3” cellspacing =”1” cellpadding =”1”>

<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>

ALIGN attribute
36
 To align table in center, right or on left side, ALIGN attribute is used
<HTML> <TR>
<HEAD>
<TITLE></TITLE> <TD>Cell Data</TD>
</HEAD> <TD>Cell Data</TD>
<BODY>
<TABLE align=”center”> <TD>Cell Data</TD>
<TR> </TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD> <TABLE>
<TD>Cell Data</TD> </BODY>
</TR>
</HTML>
BACKGROUND attribute
37
Used to set an image as background of a table.
<HTML> <TR>
<TITLE></TITLE>
</HEAD> <TD>Cell Data</TD>
<TABLE align=”center” background=”flower.jpg”>
<TR> </TR>
<TD>Cell Data</TD> <TABLE>
<TD>Cell Data</TD>
<TD>Cell Data</TD> </BODY>
</TR> </HTML>

BGCOLOR attribute
38
 Used to add a color in table’s background. <HTML> <TD>Cell Data</TD>
<HTML> <TITLE></TITLE> <TD>Cell Data</TD>
<TD>Cell Data</TD> </HEAD> </TR>
<HEAD>
</TR> <BODY> <TABLE>
<TITLE></TITLE> <TR> <TABLE height=”100px” </BODY>
<TD>Cell Data</TD> width=”40px”> </HTML>
</HEAD> <TD>Cell Data</TD> <TR>
<TD>Cell Data</TD> <TD>Cell Data</TD>
<BODY>
</TR> <TD>Cell Data</TD>
<TABLE <TABLE> <TD>Cell Data</TD>
</BODY> </TR>
bgcolor=”red”> </HTML> <TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
Chapter 4 Page layout and web forms
What is web page layout?
39
 Page layout refers to the way in which the Web designer presents information to users.
Content is essential; however, the layout and delivery are just as important.
 Your target audience, the stakeholders' requirements and your design restrictions will
determine how you enable these characteristics and how you will integrate them into your
page layouts.
i. Navigation :- Clear and easy navigation is critical to a site's success

ii. Interactivity:- attract users to your site, persuade them to stay longer, and give them
reasons to return.
iii. Database integration:- store and sort vital information and use dynamic data.
Effective Web Page Layout
40
 The layout does not force you to read one story on the front page
 If you see a story summary on the front page
 This layout style is often compared to an inverted pyramid, as depicted in the following
figure
 This style offers the user a list of story summaries first, then
references to the details of each story for those interested.
 In any case, if users want further information on any topic, they can
browse to it at their discretion. Otherwise, they can move on to other
pursuits.

Web page layout elements
41
 Before you begin the Web production process, consider the look and structure of your site.
The Web page elements include layout, color, fonts and images, and other multimedia.
 Consider the following items and their functions when planning your Web page layout
 Space (also called white space):- separates elements on the page and reduces page element
clutter.
 Color:- conveys a visual tone or message, and provides a consistent look and feel
 Font:- conveys a visual tone or message, provides a consistent look and feel, and enhances
readability

Cont….
42
 Rule:- or line, divides the page content into related sections
 List :- organizes information into items
 Paragraph :-groups text characters on a page
 Heading level creates various sizes of text to designate and organize content
 Image provides visual appeal, information and navigation (includes symbols and pictograms)
 Logo — provides branding and site navigation
 Margin — controls the proximity of content to the browser window edges
 Border — can be applied to XHTML tables and frames
 Navigation elements — control the user's movement through the site
 Table — formats data into rows and columns; also used to distribute elements into position on a
page
 Frameset — allows multiple pages to be displayed simultaneously

Common layout formats
43
 Web sites use some common basic structures to perform certain important functions. You
can see these common features in action by browsing several sites. For example, navigation
elements are generally located on the left and top margins.
o Black text on a white background is common,
as are company logos in the upper-left corner
of the display. These and other common layout
features actually help each other and the user,
which is the reason they are used so often.
Traditional left-margin layout
Cont….
44
● Top-margin layout: - the top-margin ● Distributed left- and top-margin
layout, in which navigational elements are layout:- the most commonly used
placed along the top of the page. layout, the distributed left- and top-
margin layout.

45
● Right-margin layout:- ● Distributed layout:- which works well

shows the less commonly used for sites with an extensive amount of
content.

web forms
46
 Forms could simply be used to display information, HTML provides them in order to
supply a way for the user to interact with a Web server.
1. The user retrieves a document containing a form from
a Web server.
2. The user reads the Web page and interacts with the
form it contains.
3. Submitting the form sends the form data to the server
for processing.
4. The Web server passes the data to a CGI programme.
5. The CGI software may use database information or
store data in a server-side database.
6. The CGI software may generate a new Web page for
the server to return to the user.
7. The user reads the new Web document and may
interact with it

Form Elements
47
● Form tag is specifying the action that takes place when the form is submitted
● All forms start with the <FORM> tag and end with </FORM>. All other form objects go
between these two tags.
 There are two parts of working form
 The first part is the form that you see on the page itself. Forms are made up of buttons,
text fields, and pull-down menus (collectively known as form controls) used to collect
information from the user
 The second component of a web form is an application or script on the server that
processes the information collected by the form and returns an appropriate response

Cont….
48
 The form tag has two main properties:

i. METHOD:- how the data is sent (GET or POST)
ii. ACTION :- a URI specifying where the information is sent
<form action="http://myserver.com/cgi-bin/test-
cgi.pl" GET or POST
method="get"> • Forms should use METHOD="GET" when the form does
<p>Enter your name: not modify anything on the server:
<input type="text" name="yname" • A search engine query
value="Your Name Here" • A database search
maxlength="50"> • Forms should use METHOD="POST" when the form
changes the state of the server or sends a large amount of data
</p>
• Entering a message on a forum
<input type="submit"> • Uploading a file
</form>
Cont….
49
The tag has the following elements:
● <INPUT> is the tag used for most of the form objects.
● TYPE="text" sets the object to a single-line text field.
● Size="40" sets the field to show 40 characters.
● MAXLENGTH="30" means that only a total of 30 characters can be typed in this field.
● NAME="personal-name" sets the text field's name to be personal-name
● VALUE=... Another attribute, VALUE, can be used to place an initial text in the
field. e.g. Name: <INPUT TYPE="text" NAME="name" SIZE="35“ VALUE= "---
please type here---">

Form controls
50
The devices that allow input of data onto a form are called the controls
 There are different types of form controls that is used to collect data from a visitor to your
site.
 Text input controls
 Buttons
 Checkboxes and radio buttons
 Select boxes
 File select boxes
 Hidden controls
 Submit and reset button
Cont….
51
 There are actually three types of text input used on forms:
 Single-line text input controls: Used for items that require only one line of user input, such
as search boxes or names. They are created using the <input> element.
 Password input controls: Single-line text input that mask the characters a user enters.
 Multi-line text input controls: Used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created with the <textarea>
element.

Single-line text input controls:
52
<form action="abc.php" method="get">

First name: <input type="text" name="first_name"/><br>
Last name: <input type="text" name="last_name"/><br>
<input type="submit" value="submit" />
</form>
 Will result

Cont….
53
Following is the list of attributes for <input> tag.

 Type: Indicates the type of input control you want to create. This element is also used to
create other form controls such as radio buttons and checkboxes.

 Name: Used to give the name part of the name/value pair that is sent to the server,
representing each form control and the value the user entered.
 Value: Provides an initial value for the text input control that the user will see when the
form loads.
 Size: Allows you to specify the width of the text-input control in terms of characters.
 maxlength: Allows you to specify the maximum number of characters a user can enter into the
Password input controls
54
User name<input type="text" name="user_name"/><br>

Password <input type="password" name="password"/><br>
</form>
 Will result

Multiple-Line Text Input Controls
55
Description : <br />
<textarea rows="5" cols="50" name="abc">
Enter description here...
</textarea>
</form>
 Will result:-

Creating Button
56
 There are various ways in HTML to create clickable buttons. You can create clickable
button using<input> tag.

 When you use the <input> element to create a button, the type of button you create is
specified using the type attribute.

 Submit: This creates a button that automatically submits a form.
 Reset: This creates a button that automatically resets form controls to their initial values.
 button: This creates a button that is used to trigger a client-side script when the user clicks
that button.

Cont….
57
<input type="submit" name="Submit" value="Submit" />

<br/>
<input type="reset" value="Reset" /><br/>
<input type="button" value="Button" />

</form>

Checkboxes Control
58
 Checkboxes are used when more than one option is required to be selected.
<form>
<input type="checkbox" name="maths" value="on"> Maths<br>
<input type="checkbox" name="physics" value="on"> Physics<br>

<input type="submit" value="Select Subject"/>
</form>
 Will result

Cont….
59
Following is the list of important checkbox attributes:

 Type: Indicates that you want to create a checkbox.
 Name: Name of the control.
 Value: The value that will be used if the checkbox is selected. More than one checkbox
should share the same name only if you want to allow users to select several items from the
same list.
 Checked: Indicates that when the page loads, the checkbox should be selected.

Radio box Control
60
 Radio Buttons are used when only one option is required to be selected. They are created
using input> tag as shown below:
<form action="abc.php" method="post">
<input type="radio" name="subject" value="maths" />Maths<br>
<input type="radio" name="subject" value="physics" />

Physics<br>
<input type="submit" value="Select Subject" />
</form>
 Will result

Cont….
61
Following is the list of important radio box attributes:

● Type: Indicates that you want to create a radio box.
● Name: Name of the control.
● Value: Used to indicate the value that will be sent to the server if this option is selected.
● Checked: Indicates that this option should be selected by default when the page loads.

Select box Control
62
 Drop down Box is used when we have many options available to be selected but only one or
two will be selected.
Following is the list of important attributes of
<form>
<select name="dropdown"> <select>:
<option value="Maths" selected>Maths</option>
Name: This is the name for the control.
<option value="Physics">Physics</option>
Size: This can be used to present a scrolling
</select>
<input type="submit" value="Submit" /> list box.
</form> Multiple: If set to "multiple" then allows a
 Will result:-
user to select multiple items from the menu.

63
Following is the list of important attributes of <option>:

 Value: The value that is sent to the server if this option is selected.
 selected: Specifies that this option should be the initially selected value when the page
loads.
 label: An alternative way of labeling options.

File Select Boxes
64
 If you want to allow a user to upload a file to your web site from his computer, you will
need to use a file upload box, also known as a file select box. This is also created using the
<input> element.
<form name="fileupload" enctype="multipart/form-data">
<input type="file" name="fileupload" accept="image/*" />
</form>
 will result

Chapter 2 Upto 4.pptx Static Site Development (HTML & CSS)

Uploaded by

Copyright:

Available Formats

Chapter 2 Upto 4.pptx Static Site Development (HTML & CSS)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 2 Upto 4.pptx Static Site Development (HTML & CSS)

Uploaded by

Copyright:

Available Formats

Chapter 2 Static site development (HTML & CSS)

Static & Dynamic web page

Static (fixed) web page

 Difficult to manage and handle the web page

 Pre build document and not sufficient

 A tag added around content are referred to as the markup

of the markup are commonly referred to as tags.

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

 The syntax for attribute as follow

e.g. <p align=“left”>this is paragraph</p>

Web Applications Development Technologies 06/19/2023

 An element called HTML surrounds the whole document.

 It contains two sub-elements, HEAD and BODY.

 These elements are required to form any HTML document.

<title> Document Title </title></head>

start of HTML document.

Web Applications Development Technologies 06/19/2023

 Heading are defined with the <h1> to <h6> tags.

divisions of the document.

to very small in an <H6> tag.

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

This will produce:

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

Center text-the <CENTER> element

text has color</FONT>

 This will produce following result:

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

It is a separate language used to enhance the display capabilities of HTML.

look more stylish Web Applications Development Technologies 06/19/2023

 CSS provides support for three types of style sheets

 inline style sheet

document to define the style for an entire Web page.

Web Applications Development Technologies 06/19/2023

 Example of linked style sheet, or external style sheet

a {text-decoration: none; font-size: 11pt}

color: blue} th {color: white;

p {font-family: Verdana, Garamond; background-color: blue;

font-size: 11pt} font-size: 11pt;

table {font-family: Verdana, Garamond; text-align: left}

Web Applications Development Technologies 06/19/2023

window. the output produced is:

 The start attribute

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

Web Applications Development Technologies 06/19/2023

 rows – displays borders between rows only

Web Applications Development Technologies 06/19/2023

 Cell spacing- gives the amount of space between cells.

Web Applications Development Technologies 06/19/2023

 <TABLE border=”3” cellspacing =”1” cellpadding =”1”>