Unit 4

Page Layout and Navigation

By :Prof. Priya Patel

Assistant Professor
PICA
Creating and Formatting Tables

⚫ For creating and formatting tables in web page we have to use <table>
</table> tag.
⚫ The HTML tables allow web authors to arrange data like text, images, links,
other tables, etc. into rows and columns of cells.
⚫ HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the page .
⚫ Each table row is defined or insert with the <tr> tag.
⚫ A table header is defined with the <th> tag. By default, table headings are
bold and centered.
⚫ A table data/cell is defined or insert with the <td> tag.
Attribute of table tag
<table [align=“left/right”]
[valign=“top/bottom/middle”]
[border=“value”]
[background=“url of image”]
[bgcolor=“color name”]
[bordercolor=“color name”]
[bordercolorlight=“color name”]
[bordercolordark=“color name”]
[cellpadding=“value/value%”]
[cellspacing=“value/value%”]
[height=“value/value%”]
[width=“value/value%”]
[title=“informational tooltip”]>
….
</table>

** you can apply for raw <tr> cell <td> also

Align: left/right/center: This attribute controls whether text inside the table
cell is aligned to the left , right or centered within the cell.

Valign: top/middle/bottom: the Valign attribute controls over whether the

text inside the table cells is aligned to the top , bottom or vertically centered
within the cell.

Cellpadding and Cellspacing Attributes

⚫ There are two attributes called cellpadding and cellspacing which you will
use to adjust the white space in your table cells.
⚫ The cellspacing attribute defines space between table cells,
⚫ while cellpadding represents the distance between cell borders and the
content within a cell.
.
cellspacing
⚫ <p>Table with cellspacing:</p>
⚫ <table cellspacing="10">
⚫ <tr>
⚫ <th>Month</th>
⚫ <th>Savings</th>
⚫ </tr>
⚫ <tr>
⚫ <td>January</td>
⚫ <td>$100</td>
⚫ </tr>
⚫ </table>
cellpadding
⚫ <p>Table with cellpadding:</p>
⚫ <table cellpadding="10">
⚫ <tr>
⚫ <th>Month</th>
⚫ <th>Savings</th>
⚫ </tr>
⚫ <tr>
⚫ <td>January</td>
⚫ <td>$100</td>
⚫ </tr>
⚫ </table>
Colspan and Rowspan Attributes
⚫You will use colspan attribute if you want to merge
two or more columns into a single column. Similar
way you will use rowspan if you want to merge two
or more rows
⚫ <td rowspan="2">$50</td>
⚫ <td colspan="2">$50</td>
Tables Backgrounds
You can set table background using one of the
following two ways −
⚫bgcolor  attribute − You can set background color
for whole table or just for one cell.
⚫background attribute − You can set background
image for whole table or just for one cell.
⚫You can also set border color also
using bordercolor attribute.
Table Height and Width
⚫ You can set a table width and height using width and height attributes. You
can specify table width or height in terms of pixels or in terms of
percentage of available screen area.

Table Caption
⚫ The caption tag will serve as a title or explanation for the table and it
shows up at the top of the table.

Table Header, Body, and Footer

⚫ <thead> − to create a separate table header.
⚫ <tbody> − to indicate the main body of the table.
⚫ <tfoot> − to create a separate table footer.
⚫ A table may contain several <tbody> elements to indicate different pages or
groups of data. But it is notable that <thead> and <tfoot> tags should
appear before <tbody>
Nested Tables
⚫ You can use one table inside another table. Not only tables you can use almost all the
tags inside table data tag <td>.
Summery

⚫ Use the HTML <table> element to define a table

⚫ Use the HTML <tr> element to define a table row
⚫ Use the HTML <td> element to define a table data
⚫ Use the HTML <th> element to define a table heading
⚫ Use the HTML <caption> element to define a table caption
⚫ Use the CSS border property to define a border
⚫ Use the CSS border-collapse property to collapse cell borders
⚫ Use the CSS padding property to add padding to cells
⚫ Use the CSS text-align property to align cell text
⚫ Use the CSS border-spacing property to set the spacing between cells
⚫ Use the colspan attribute to make a cell span many columns
⚫ Use the rowspan attribute to make a cell span many rows
⚫ Use the id attribute to uniquely define one table
You can also create and format table using CSS
⚫ For that like other CSS write css for table tag and apply it.
⚫ You can also format odd and even row and cell in table using CSS. For that
please visit

Creating Division- Based Layouts

⚫ The HTML <div> tag is used to group the large section of HTML elements
together.
⚫ The <div> tag defines a division or a section in an HTML document.
⚫ The <div> tag is used to group block-elements to format them with CSS.
⚫ <div> tag is just like a container unit which is used to encapsulate other
page elements and divides the HTML documents into sections.
⚫ The div tag is generally used by web developers to group HTML elements
together and apply CSS styles to many elements at once. For example: If
you wrap a set of paragraph elements into a div element so you can take the
advantage of CSS styles and apply font style to all paragraphs at once
instead of coding the same style for each paragraph element.
⚫ The div tag is not more than a container for other tags. Here are some of the
div's attributes:
⚫ id
⚫ class
⚫ title
⚫ style
⚫ height
⚫ width
 Difference between HTML div tag and span tag

⚫div tag ⚫span tag

⚫HTML div is ⚫HTML span is

a block element. an inline element

⚫HTML div element is used ⚫HTML span element is

to wrap large sections of used to wrap small
elements. portion of texts,
imageetc.
Creating Navigational Aids
What do you mean by navigation?
to move on, over, or through
⚫ A navigation bar is a set of hyperlinks that connect to major pages of your
websites.
⚫ These hyperlinks can be either text-based or graphics.
Creating a text-based navigation bar

⚫ A text-based navigation bar is the simplest and easiest.

⚫ Text-based navigation bar is usually placed at the top of the page,in a single
horizontal line.
⚫ HTML5 includes <nav> tag, a two sided container tag in which you can
optionally place the code for a navigation bar.
⚫<body>

⚫<nav>
⚫<a href="/html/">HTML</a>
⚫<a href="/css/">CSS</a>
⚫<a href="/js/">JavaScript</a>
⚫<a href="/jquery/">jQuery</a>
⚫</nav>
Creating User Forms

⚫ An HTML form is a section of a document which contains controls such as text

fields, password fields, checkboxes, radio buttons, submit button, menus etc.
⚫ An HTML form facilitates the user to enter data that is to be sent to the server for
processing.
⚫ It always insert using <form> tag inside <body> tag.
⚫ Each piece of information for a form is stored in a Field.

Why use HTML Form

⚫ Do develop interactive webpage.
⚫ HTML forms are required if you want to collect some data from of the site
visitor.
⚫ For example: If a user want to purchase some items on internet, he/she must fill
the form such as shipping address and credit/debit card details so that item can be
sent to the given address.
Parts of form
⚫ Users enter or select a field using Form Control/ Elements.

⚫ Form/Control elements include: buttons, checkboxes, text fields, radio

buttons, drop-down menus, etc

⚫ A form usually contains a Submit button to send the information in the

form elements to the server
⚫TypeDescription
⚫<input type="text"> :Defines a one-line text input
field

⚫<input type="radio"> :Defines a radio button (for

selecting one of many choices)

⚫<input type="submit">Defines a submit button (for

submitting the form)
⚫<form>
  <input type="radio" name="gender" value="male" ch
ecked> Male<br>
⚫
  <input type="radio" name="gender" value="female"
> Female<br>
⚫
  <input type="radio" name="gender" value="other"> 
Other
</form>
Add html text field
⚫ We can add it by using <input> tag inside <form> tag
⚫ The type="text" attribute of input tag creates textfield control also known as
single line textfield control.
⚫ The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.
⚫ By default size is 20 character. You can increase its size by giving value in
size attribute.
⚫ Text field have other attributes like value, name, id, size etc…
⚫ Text input fields will be empty when the page loads, unless you provide an
initial text string for its VALUE option
Syntax:
<form>
Name : <input type=“text” name=“myname”/>
</form>
Password control
⚫ exactly the same as text input elements, except that when the viewer types
in, they see "bullet" characters rather then the letter they are typing.
Password text is scrambled during transmission and then unscramble when
the form data is received at the server end.
⚫ Same as textfield by default size is 20 character.
Syntax :
<input type="password" name="pass1" size="30">

Text Area
⚫ Text fields that have more than one line and can scroll as the viewer enters
more text. The tag options define the size of the field by the number of
rows and character columns. By adding the option WRAP=VIRTUAL, the
text entered will automatically wrap at the right hand side of the field. You
can also include default text to appear in the field
⚫Creating drop down list
⚫To create a list start with a two sided <select> tag. Within
it place each option in its own <option> tag.
⚫Place the text that you want to appear on the list between
the opening and closing <option >tag.
⚫<p> Color: <select name=“colors” size =“1”>
⚫ <option> Red</option>
⚫<option>Green</option>
⚫<option> Blue</option>
⚫<option> Pink</option>
⚫</select>
⚫</p>
⚫In this code the size attribute is set to 1, which create a
drop down list.
⚫If you set the size attribute to a larger value , the
element appear as a list box.
⚫If there are more item in the list than will fit in the
viewing space, a scroll bar appears automatically at the
right side of the box.
JAVA SCRIPT
⚫ JavaScript is an object-based scripting language that is lightweight and
cross-platform.
⚫ JavaScript is not compiled but translated. The JavaScript Translator
(embedded in browser) is responsible to translate the JavaScript code.
Definition : Javascript is a dynamic computer programming language. It is
lightweight and most commonly used as a part of web pages, whose
implementations allow client-side script to interact with the user and make
dynamic pages. It is an interpreted programming language with object-
oriented capabilities.
⚫ JavaScript was first known as LiveScript, but Netscape changed its name
to JavaScript. Invented in 1995.
Cont…

⚫ The JavaScript client-side mechanism provides many advantages over

traditional CGI(common gateway interface) server-side scripts. For
example, you might use JavaScript to check if the user has entered a valid
e-mail address in a form field.

⚫ The JavaScript code is executed when the user submits the form, and only
if all the entries are valid, they would be submitted to the Web Server.

⚫ JavaScript can be used to trap user-initiated events such as button clicks,

link navigation, and other actions that the user initiates explicitly or
implicitly.
JavaScript can calculate, manipulate and validate data
Where JavaScript is used
⚫ JavaScript is used to create interactive websites. It is mainly used for:
⚫ Client-side validation
⚫ Dynamic drop-down menus
⚫ Displaying data and time
⚫ Displaying popup windows and dialog boxes (like alert dialog box, confirm
dialog box and prompt dialog box)
⚫ Displaying clocks etc.

<h2>Welcome to JavaScript</h2>  
<script>  
document.write("Hello JavaScript by JavaScript");  
</script>  

⚫ You can add java script inside <script> </script> tag inside <head> or
<body>, external JavaScript file.
⚫JavaScript can be implemented using JavaScript
statements that are placed within the <script>... </script>.
⚫Syntax:

⚫The script tag takes two important attributes −

<script ...> JavaScript code </script>
⚫Language − This attribute specifies what scripting
language you are using. Typically, its value will be
javascript. 
⚫Type − This attribute is what is now recommended to
indicate the scripting language in use and its value should
be set to "text/javascript“
⚫<script language="javascript" type="text/javascript">
JavaScript code </script>
Advantages of JavaScript
⚫ Less server interaction − You can validate user input before sending the page off to
the server.
⚫ Immediate feedback to the visitors − They don't have to wait for a page reload.
⚫ Increased interactivity − You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.
⚫ Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.
Limitations of JavaScript
⚫ We cannot treat JavaScript as a full-fledged programming language. It lacks the
following important features −
⚫ Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
⚫ JavaScript cannot be used for networking applications because there is no such support
available.
⚫ JavaScript doesn't have any multithreading or multiprocessor capabilities.
Java script inside <head> tag.
<html>  
<head>  
<script type="text/javascript">  
function msg() {  
  alert("Hello fist java script program");  
}  
</script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>  

Here when user press/ click on button one alert message will be display in
browser. Here we click onlick event.
Comment in java script

<script language="javascript" type="text/javascript">

<!–
// This is a comment. It is similar to comments in C++
/* This is a multiline comment in JavaScript It is very similar to comments
in C Programming */
//-->
</script>

External javascript
⚫ We can create external JavaScript file and embed it in many html page.
⚫ It provides code re usability because single JavaScript file can be used in
several html pages.
⚫ An external JavaScript file must be saved by .js extension. It is
recommended to embed all JavaScript files into a single file. It increases the
speed of the webpage.
Example of external java script file
function msg(){  
 alert("Hello Javatpoint");  
}  //save this file with .js extenssion

Let’s include the JavaScript file into html page. It calls the JavaScript function on button
click.
<html>  
<head>  
<script type="text/javascript" src="message.js"></script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>  

Here message.js is external javascript file. It include inside html code using src
Variable in javascript
⚫ is simply a name of storage location. There are two types of variables in
JavaScript : local variable and global variable.
⚫ There are some rules while declaring a JavaScript variable (also known as
identifiers).
⚫ Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )
sign.
⚫ After first letter we can use digits (0 to 9), for example value1.
⚫ JavaScript variables are case sensitive, for example x and X are different
variables.
<script>  
var x = 10;  
var y = 20;  
var z=x+y;  
document.write(z);  
</script>  

⚫ Local Variable : if we declare any variable inside function or loop or

conditional statement like if..else than it become local variable.
 <script>  
function abc(){  
var x=10;//local variable  
}  
If(10<13){  
var y=20;//JavaScript local variable  
}  
</script>  

Global variable : A JavaScript global variable is accessible from any

function. A variable i.e. declared outside the function or declared with
window object is known as global variable.

<script>  
var data=200;//gloabal variable  
function a(){  
document.writeln(data);  
}  
function b(){  
document.writeln(data);  
}  
a();//calling JavaScript function  
b();  
</script>  
JavaScript global variable within function
⚫ To declare JavaScript global variables inside function, you need to
use window object. For example:
window.value=90;  
⚫ Access global variable of one function into another function.

function m(){  
window.value=100;//declaring global variable by window object  
}  
function n(){  
alert(window.value);//accessing global variable from other function  
}  
DOM (Document Object Model ) ** important**
⚫ The document object represents the whole html document.

⚫ html document is loaded in the browser, it becomes a document object. It is

the root element that represents the html document. It has properties and
methods. By the help of document object, we can add dynamic content to
our web page.
⚫ The way a document content is accessed and modified is called
the Document Object Model, or DOM
We can access and change the contents of document by its methods.

Method Description

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with newline character at
the end.
getElementById() returns the element having the given id value.
getElementsByName() returns all the elements having the given name value.
getElementsByTagName() returns all the elements having the given tag name.
getElementsByClassName() returns all the elements having the given class name.
Properties of document object
Let's see the properties of document object that can be accessed and modified
by the document object.
Accessing value of form using java script
In this example, we are going to get the value of input text by user. Here, we
are using document.form1.name.value to get the value of name field.

<script language =“javascript”  type="text/javascript">  

function printvalue()
{  
var name=document.form1.fname.value;  
alert("Welcome: "+name);  
}  
</script>  
  
<form name="form1">  
Enter Name:<input type="text" name=“fname"/>  
<input type="button" onclick="printvalue()" 
value="print name"/>  
</form>  
Explanation of above example
⚫In this example, we are going to get the value of input
text by user. Here, we are
using document.form1.name.value to get the value of
name field.
⚫Here, document is the root element that represents the
html document.
⚫form1 is the name of the form.
⚫name is the attribute name of the input text.
⚫value is the property, that returns the value of the input
text
output
document.getElementById() method
⚫ we can use document.getElementById() method to get value of the input
text. But we need to define id for the input field.

<script language =“javascript”  type="text/javascript">  

function getcube()
{  
var number=document.getElementById("number").value;  
alert(number*number*number);  
}  
</script>  
<form>  
Enter No:<input type="text" id="number" name="number"/
><br/>  
<input type="button" value="cube" onclick="getcube()"/>  
</form>  
getElementByName() Method
⚫ The document.getElementsByName() method returns all the element of
specified name.

<script type="text/javascript">  
function totalelements()  
{  
var allgenders=document.getElementsByName("gender");  
alert("Total Genders:"+allgenders.length);  
}  
</script>  
<form>  
Male:<input type="radio" name="gender" value="male">  
Female:<input type="radio" name="gender" value="female">  
  
<input type="button" onclick="totalelements()" value="Total Genders">  
</form>  

⚫ For more about javascript please visit : https://www.javatpoint.com/javascript-

tutorial
⚫More about Navigation
⚫https://www.w3schools.com/howto/howto_js_topn
av.asp
⚫https://www.w3schools.com/tags/tag_nav.asp
⚫https://www.w3schools.com/howto/howto_css_me
nu_horizontal_scroll.asp
⚫For more about javascript please visit :
https://www.javatpoint.com/javascript-tutorial
Thank You…