1 / 55

Just A Few More Fun Objectives

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

xylia
Download Presentation

Just A Few More Fun Objectives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets

  2. Having Some Fun With Java Script

  3. 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!!!!!!!!!!!!!!!!!

  4. 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 TimeYou Could Have a Slide Show of images

  5. How Do I Do It? All you need to do is search for the codeat different Internet sites for example use GoogleJava 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

  6. Lets Try an Example Key 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>

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

  8. <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 Here Just before the </body>

  9. Your Webpage should look like this

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

  11. 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

  12. 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!

  13. 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 employeeswhen creating web sites

  14. Show Me? ? ?

  15. 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.

  16. 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}

  17. 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.

  18. 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 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>

  19. It will look very plain…no formatting

  20. Many times the style definition willbe put right into the HTML document so you don’t need to have tofiles. The style definitions can be put in the heading section. The STYLE TAG <style> …………………</style>

  21. 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>

  22. <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 code Save as mypage3.html Look at it with your browser

  23. Your Webpage should look like this one The style sheet definitions are embedded inthe webpage code within the heading section

  24. Using Style 1

  25. Using Style 5

  26. CSS Basic Syntax

  27. Example You want a RED BACKGROUND <body bgcolor="#FF0000"> With HTML CSS Coding body {background-color: red} Almost Looks Like HTML

  28. body {background-color: #FF0000;}

  29. 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 HTMLBetween the <head> and </head> tags.

  30. 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.

  31. 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.

  32. 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

  33. 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; }

  34. 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 sitethe next font on the list will be tried until a suitable font is found.

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

  36. <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.

  37. Font style [font-style] Defines the chosen fontnormal, italic or oblique. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;} See Sample Next Slide

  38. H2 line is italicized

  39. 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

  40. 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; }

  41. Let’s Talk About TEXT and CSS ..zzz Hang in There!!

  42. Text indention [text-indent] A 30px is applied to all text paragraphs marked with <p>: p { text-indent: 30px; } SAMPLE

  43. p {font-family: arial, verdana, sans-serif;}td {font-family: arial, verdana, sans-serif; font-weight: bold;}

  44. 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; }

  45. th { text-align: right;} td { text-align: center; } p { text-align: justify; }

More Related