Linking to Other Sites

< a >

Links are created using the a> element which has an attribute called href. The value of the href attribute is the page that you want people to go to when they click on the link.

<p>Movie Reviews:
<ul>
<li><a href="http://www.empireonline.com">
Empire</a></li>
<li><a href="http://www.metacritic.com">
Metacritic</a></li>
<li><a href="http://www.rottentomatoes.com">
Rotten Tomatoes</a></li>
<li><a href="http://www.variety.com">
Variety</a></li>
</ul>
</p>

Linking to Other Pages on the Sa me Site

<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</p>

Directory Structure

Relative URLs

Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files.

Email Links

<a href="mailto:jon@example.org">Email Jon</a>

mailto:

To create a link that starts up the user’s email program and addresses an email to a specified email address

Opening Links in a New Window

target

<a href="http://www.imdb.com" target="_blank">
Internet Movie Database</a> (opens in new window)

Layout

To indicate where a box should be positioned, you may also need to use box offset properties to tell the browser how far from the top or bottom and left or right it should be placed. (You will meet these when we introduce the positioning schemes on the following pages.

position:static

normal flow, each block-level element sits on top of the next one.

body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
h1 {
background-color: #efefef;
padding: 10px;}
p {
width: 450px;}

position:relative

Relative positioning moves an element in relation to where it would have been in normal flow.

p.example {
position: relative;
top: 10px;
left: 100px;}

position:absolute

When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page. h1 { position: absolute; top: 0px; left: 500px; width: 250px;} p { width: 450px;}

position:fixed

Fixed positioning is a type of absolute positioning that requires the position property to have a value of fixed.

h1 {
position: fixed;
top: 0px;
left: 50px;
padding: 10px;
margin: 0px;
width: 100%;
background-color: #efefef;}
p.example {
margin-top: 100px;}

z-index

When you use relative, fixed, or absolute positioning, boxes can overlap.

h1 {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
width: 100%;
background-color: #efefef;
z-index: 10;}
p {
position: relative;
top: 70px;
left: 70px;}

float

The float property allows you to take an element in normal flow and place it as far to the left or right of the containing element as possible.

clear

body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;}
.clear {
clear: left;}

A Fixed Width Layout

body {
width: 960px;
margin: 0 auto;}
#content {
overflow: auto;
height: 100%;}
#nav, #feature, #footer {
background-color: #efefef;
padding: 10px;
margin: 10px;}
.column1, .column2, .column3 {
background-color: #efefef;
width: 300px;
float: left;
margin: 10px;}
li {
display: inline;
padding: 5px;}

A Liquid Layout

body {
width: 90%;
margin: 0 auto;}
#content {overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;}
.column3 {margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
background-color: #efefef;
padding: 0.5em 0;}
#feature, .article {
height: 10em;
margin-bottom: 1em;
background-color: #efefef;}

Possible Layouts:

960 Pixel wide 12 Column Grid

WHAT IS A FUNCTION?

Functions let you group a series of statements together to perform a specific task. If different parts of a script repeat the same task, you can reuse the function (rather than repeating the same set of st atements).

var msg = 'Sign up to receive our newsletter for 10% off!';
function updateMessage() {
var el = document.getElementByld('message'};
el .textContent = msg;
}
updateMessage(};

function

and to call the function we write :

function

This function will calculated and return the area of a rectangle .

he git the width and height as a parameter , and multiplying the width and height and return area .

example

getArea(2,2);

output:
4

we can assignment a function to varibale like this :

var wallOne= calculateArea(5,2);

6 Reasons for Pair Programming

Greater efficiency it is easier to catch mistakes in the making. Research indicates that pair programing takes slightly longer, but produces higher-quality code that doesn’t require later effort in troubleshooting and debugging (let alone exposing users to a broken product).
Engaged collaboration get off track when someone else is relying on you to complete the work
Learning from fellow students developer has a unique approach to a specific problem, pair programming exposes the other developer to a new solution.
Social skills Pair programming is great for improving social skills. When working with someone who has a different coding style, communication is key.
Job interview readiness A common step in many interview processes involves pair programming between a current employee and an applicant, either in person or through a shared screen.
Work environment readiness Many companies that utilize pair programing expect to train fresh hires from CS-degree programs on how they operate to actually deliver a product.