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 But Don’t Worry No Coding for you!!!!!!!!!!!!!!!!! And You Can Use It

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 and ends with 1 You can copy all the code 2 Then insert it in the Heading Section or Body of Your Web Page

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 Java Script Example This is my GIS416 class Welcome to My Website The objective for today is to get an idea of how Java Script Works

Go to the site below and find the code to insert the Date and Time Highlight and Copy the code

Java Script Example This is my GIS416 class Welcome to My Website The objective for today is to get an idea of how Java Script Works Paste Your Code Here Just before the

Your Webpage should look like this

This was a very basic example But!!! Basically…… That’s all you have to do

CSS? CSS defines how to display your Web Pages Cascading Style Sheets 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 Polar Bear Page This is my GIS416 class Welcome to My Website The objective for today is to get an idea of how Cascadding Style Sheets work. The term is CSS 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 Polar Bear Page This is my GIS416 class Welcome to My Website The objective for today is to get an idea of how Cascadding Style Sheets work. The term is CSS Remove this Line

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 …………………

Method 2: Internal Example body {background-color: #FF0000;} This is a red page -using the HTML tag

Polar Bear Page body {background-color: yellow} h1 {font -size: 36pt} h2 {color:blue} p {margin-left: 50px} This is my GIS416 class Welcome to My Website The objective for today is to get an idea of how Cascadding Style Sheets work. The term is CSS Use your text editor Enter this code Save as mypage3.html Look at it with your browser

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 {background-color: red} CSS Coding 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 Code must be inserted in the header section of the HTML Between the and tags.

html> head> title>My document... 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.

Different background colors Applied to and elements. Example body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } Two properties to are divided by a semicolon.

body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; } Assume You want a Background image of a Butterfly 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 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. The Property

Sample Prioritized List of Fonts h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

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 { 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 { 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 is aligned to the right Table data are centred. Text paragraphs are justified: th { text-align: right; } td { text-align: center; } p { text-align: justify; }

Text alignment Text alignmen in table Heading 1 Heading 2 Cell 1 Cell 2 Cell 3 Cell 4 Plain HTML Code

Text decoration [text-decoration] ( Underline Text ) are underlined headlines, are headlines with a line above the text 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 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