Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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 inWebpages and even mobile phones
But Don’t WorryNo 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 codeat 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 </script>
1 You can copy all the code
2 Then insert it in the Heading Section or Body of Your Web Page
Lets Try an ExampleKey this simple code below with your text editor and look at it with your browserto make sure it works
<html><head><title>Java Script Example </title></head><body><h1>This is my PHT302 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 multimedia web 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 HereJust 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?
•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 alsocome 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 siteby editing one single CSS document!
Why Cascading Style SheetsAnyone Creating a Web page must Link to the style.css document to format their web page
This is how companies set standard for all employeeswhen creating web sites
??Show Me?
Create a folder for yourself and use your text editor to createthe 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 PHT302 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 externalStyle 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 yourmypage2.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 fileIt should look like this.
This web page references the style sheet you created for formatting.
Remove the line indicated from you mypage2.html fileand re save it..then look at it with your browser
<html><head><link rel= "stylesheet" type="text/css" href="ex1.css" /><title>Polar Bear Page</title></head><body><h1>This is my PHT302 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>
Remove this Line
It will look very plain…no formatting
Many times the style definition willbe put right into the HTML documentso you don’t need to have tofiles. The style definitions can beput in the heading section.
The STYLE TAG
<style> …………………</style>
Method 2: Internal
<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>
-using the HTML tag <style>
<html><head><title>Polar Bear Page</title><style type="text/css">body {background-color: yellow}
h1 {font -size: 36pt}h2 {color:blue}p {margin-left: 50px} </style></head><body><h1>This is my PHT302 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>
Use your text editorEnter this codeSave as mypage3.html
Look at it with your browser
Your Webpage should look like this one
The style sheet definitions are embedded inthe webpage code within the heading section
Using Style 1
Using Style 5
Example You want a RED BACKGROUND
<body bgcolor="#FF0000"> 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
<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.
Different background colors Applied to <body> and <h1> elements.
Example
body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
Two properties to <h1> 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 Fontsonts
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;}
<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 familywill 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 rightTable 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
OK So Were Done !!!
Time For Simple Exercises
