Transcript head> and
Just A Few More Fun Objectives
1 Having Some Fun With Java Script
2 Using Style Sheets
Having Some Fun With Java Script
What is JavaScript?
JavaScript is the most popular scripting
language in the world. It is the standard
language of the web, and widely used in
Webpages and even mobile phones
And You Can Use It
But Don’t Worry
No Coding for you!!!!!!!!!!!!!!!!!
JavaScript was designed to add
interactivity to HTML pages
Almost anyone can put small
"snippets" of JavaScript code into
HTML pages.
You could insert a clock on your page
You Could Insert the Current Date And Time
You Could Have a Slide Show of images
How Do I Do It?
All you need to do is search for the code
at different Internet sites for example use Google
Java Script to insert date and time on my page
The code Starts with <script> and ends with
1 You can copy all the code
2 Then insert it in the Heading Section or Body
of Your Web Page
</script>
Lets Try an Example
Key this simple code below with your text editor and look at it with your browser
to make sure it works
<html>
<head>
<title>Java Script Example </title>
</head>
<body>
<h1>This is my GIS416 class</h1>
<br>
<h2>Welcome to My Website<h2>
<p> The objective for today is to get an idea of how
Java Script Works
<br>
<br>
</body>
</html>
Go to the site below and find the code to insert the
Date and Time
Highlight and Copy the code
http://www.yaldex.com/FSDateAndTime/DateTime1.htm
<html>
<head>
<title>Java Script Example </title>
</head>
<body>
<h1>This is my GIS416 class</h1>
<br>
<h2>Welcome to My Website<h2>
<p> The objective for today is to get
an idea of how
Java Script Works
<br>
<br>
</body>
</html>
Paste Your Code Here
Just before the </body>
Your Webpage should look like this
This was a very basic example
But!!! Basically…… That’s all you have to do
CSS?
Cascading Style Sheets
•CSS defines how to display your Web Pages
Style sheets are very predominant when creating Web Sites
If you download and use Web Templates you will see they also
come with Style Sheets
CSS defines HOW HTML elements are to be displayed,
Just like the font and the color tags in HTML
Styles normally saved in external .css files.
External style sheets enable you
to change appearance of all the pages in your Web site
by editing one single CSS document!
Why Cascading Style Sheets
Anyone Creating a Web page must Link to the style.css document to
format their web page
This is how companies set standard for all employees
when creating web sites
Show Me?
?
?
Create a folder for yourself and use your text editor to create
the following document………..call it
mypage2.html
<html>
<head>
<link rel= "stylesheet" type="text/css" href="ex1.css" />
<title>Polar Bear Page</title>
</head>
<body>
<h1>This is my GIS416 class</h1>
<br>
<h2>Welcome to My Website<h2>
<p> The objective for today is to get an idea of how
Cascadding Style Sheets work. The term is CSS
</body>
</html>
This line will reference an external
Style sheet that you will create next.
Use your text editor and create a style sheet definition file
call it………ex1.css…save it in the same folder as your
mypage2.html file. Just enter what you see below
body {background-color: yellow}
h1 {font -size: 36pt}
h2 {color:blue}
p {margin-left: 50px}
Use Your Brower and open the mypage2.html file
It should look like this.
This web page references the style sheet you created for formatting.
Remove the line indicated from you mypage2.html file
and re save it..then look at it with your browser
Remove this Line
<html>
<head>
<link rel= "stylesheet" type="text/css" href="ex1.css" />
<title>Polar Bear Page</title>
</head>
<body>
<h1>This is my GIS416 class</h1>
<br>
<h2>Welcome to My Website<h2>
<p> The objective for today is to get an idea of how
Cascadding Style Sheets work. The term is CSS
</body>
</html>
It will look very plain…no formatting
Many times the style definition will
be put right into the HTML document
so you don’t need to have to
files. The style definitions can be
put in the heading section.
The STYLE TAG
<style>
…………………</style>
Method 2: Internal
-using the HTML tag <style>
<html>
<head>
<title>Example<title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
<html>
<head>
<title>Polar Bear Page</title>
<style type="text/css">
body {background-color: yellow}
Use your text editor
Enter this code
Save as mypage3.html
Look at it with your browser
h1 {font -size: 36pt}
h2 {color:blue}
p {margin-left: 50px}
</style>
</head>
<body>
<h1>This is my GIS416 class</h1>
<br>
<h2>Welcome to My Website<h2>
<p> The objective for today is to get
an idea of how
Cascadding Style Sheets work.
The term is CSS
</body>
</html>
Your Webpage should look like this one
The style sheet definitions are embedded in
the webpage code within the heading section
Using Style 1
Using Style 5
Example You want a RED BACKGROUND
With HTML <body bgcolor="#FF0000">
CSS Coding
body {background-color: red}
Almost Looks Like HTML
body {background-color: #FF0000;}
How Do We Get to the Style Sheet ?
How Does This Thing Work ?
Create a LINK
HTML document to the STYLE sheet
<link rel="stylesheet" type="text/css" href="style/style.css" />
Code must be inserted in the header section of the HTML
Between the <head> and </head> tags.
html>
head>
title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body> ...
Browser uses the layout from the CSS file when displaying the HTML file.
Several HTML documents can be linked to the same style sheet.
One CSS file can be used to control the layout of many HTML documents.
Example
Different background colors
Applied to <body> and <h1> elements.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Two properties to <h1> are divided by a semicolon.
Assume You want a Background image of a Butterfly
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Image is in the same folder as the Style Sheet
Avoid Repetition of the Background Image
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Style Sheets Using Fonts
onts
The Property
Font family [font-family]
Used to set a prioritized list of fonts for a web page.
If the first font on the list is not installed on
the computer used to access the site
the next font on the list will be tried until a
suitable font is found.
Sample
Prioritized List of Fonts
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
<h1> will be displayed using the font "Arial".
If this font is not installed on the user's computer,
"Verdana" will be used instead.
If both these fonts are unavailable,
a font from the sans-serif family
will be used to show the headlines.
Font style [font-style]
Defines the chosen font
normal, italic or oblique.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
See Sample Next Slide
H2 line is italicized
Font weight [font-weight]
BOLD
A font can either be normal or bold.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
See Next Slide For Sample
Code used to describe font-properties for <p>:
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Or
p { font: italic bold 30px arial, sans-serif; }
Let’s Talk About TEXT and CSS
..zzz
Text indention [text-indent]
A 30px is applied to all text paragraphs marked with <p>:
p{
text-indent: 30px;
}
SAMPLE
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Text alignment [text-align]
LEFT RIGHT
CENTER
JUSTIFY
<th> is aligned to the right
Table data <td> are centred.
Text paragraphs are justified:
th {
text-align: right;
}
td {
text-align: center;
}
p { text-align: justify;
}
th {
text-align: right;
}
td {
text-align: center;
}
p { text-align: justify;
}
<link rel="stylesheet" href="ex2.css" type="text/css" />
</head>
<body>
<h1>Text alignment</h1>
<h2>Text alignmen in table</h2>
<table border="1" width="100%">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Plain HTML Code
Text decoration [text-decoration]
( Underline Text )
<h1> are underlined headlines,
<h2> are headlines with a line above the text
<h3> are headlines with a line though the text.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 { text-decoration: line-through;
}
Let’s Talk About Links Briefly
• Links specified in HTML with <a> tags.
We can therefore use a as a selector in CSS:
a{
color: blue;
}
Links Can Be Visited and Not Visited
a:link {
color: blue;
}
a:visited {
color: red;
}
Link Not Not Clicked on Yet
OK So Were Done !!!
Time For Simple Exercises