title: jan 2410:54 am (1 of...
TRANSCRIPT
![Page 1: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/1.jpg)
My website is www.pgrocer.net.After you click on CIS120/17 you will see this page.
Title: Jan 2410:54 AM (1 of 20)
![Page 2: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/2.jpg)
These are the html examples we will start looking at today.
My audio andSmartboardnotes.
Title: Jan 2411:16 AM (2 of 20)
![Page 3: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/3.jpg)
Clicked on the example HTML5intro.html and this page came up.
Next, I will right click and view the source code to see the HTMLthat I wrote that generated this page. A picture of the source codeis shown on the next slide.
Title: Jan 2411:17 AM (3 of 20)
![Page 4: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/4.jpg)
A paragraph has the tag of <p> and a division has the tag of <div>.A paragraph skips a line at the end but a division does not.
The <head> tag holds information about the page such as the title. Note the close of the title and the close of the head show the </ to show the end of title of head.
The body has the lines I want to appear on the page. In this case it is just one line in a paragraph.
Title: Jan 2411:22 AM (4 of 20)
![Page 5: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/5.jpg)
Good source for information.
Title: Jan 2411:23 AM (5 of 20)
![Page 6: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/6.jpg)
Title: Jan 2411:24 AM (6 of 20)
![Page 7: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/7.jpg)
Title: Jan 2411:24 AM (7 of 20)
![Page 8: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/8.jpg)
Title: Jan 2411:31 AM (8 of 20)
![Page 9: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/9.jpg)
You write the code in a text editor like Notepad or Notepad++ and then saveit with a .html extension.
Title: Jan 2411:33 AM (9 of 20)
![Page 10: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/10.jpg)
I saved the page as firstS19.htmlNow I am loading it to see the result.
Note that you can get a menu in Firefox to help with this.
Title: Jan 2411:46 AM (10 of 20)
![Page 11: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/11.jpg)
Click on the navy bar and select menu barto get the menu I used in the last slide.You can then click on File and get theselection that lets you save or open.
Title: Jan 2411:46 AM (11 of 20)
![Page 12: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/12.jpg)
Now I am adding style to the page using CSS (Cascading Style Sheets).I designate the tag I want to apply the style to such as body or p or li.I have said in body that I want the default font color to be red. For li I overrode the red and specified green.
Title: Jan 2411:50 AM (12 of 20)
![Page 13: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/13.jpg)
Title: Jan 2411:50 AM (13 of 20)
![Page 14: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/14.jpg)
Title: Jan 2411:56 AM (14 of 20)
![Page 15: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/15.jpg)
Title: Jan 2411:59 AM (15 of 20)
![Page 16: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/16.jpg)
Title: Jan 2412:05 PM (16 of 20)
![Page 17: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/17.jpg)
Now I am applying style to the headers that I coded.
Title: Jan 2412:06 PM (17 of 20)
![Page 18: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/18.jpg)
Title: Jan 2412:07 PM (18 of 20)
![Page 19: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/19.jpg)
Title: Jan 2412:07 PM (19 of 20)
![Page 20: Title: Jan 2410:54 AM (1 of 20)cisweb.bristolcc.edu/~pgrocer/audio_smartboardS19/CIS120/c120Ja… · Title: Jan 2411:22 AM (4 of 20) Good source for information. Title: Jan 2411:23](https://reader034.vdocuments.site/reader034/viewer/2022042400/5f0e92a47e708231d43fe3fc/html5/thumbnails/20.jpg)
Title: Jan 2412:11 PM (20 of 20)