Difference between revisions of "AY Honors/Internet - Advanced/Answer Key"

From Pathfinder Wiki
< AY Honors‎ | Internet - AdvancedAY Honors/Internet - Advanced/Answer Key
m (updating some text)
 
(52 intermediate revisions by 9 users not shown)
Line 1: Line 1:
−
{{honor_header|3|2006|Vocational<br>North American Division}}
+
{{HonorSubpage}}
−
==1. Have the Internet Honor ==
+
<!--{{Honor Master|honor={{#titleparts:{{PAGENAME}}|1|3}}|master=Modern Technology}}-->
−
{{ay_prerequisite|Vocational|Internet}}
+
<section begin="Body" />  
−
==2. Have the Basic Computer Honor==
+
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=1}}
−
{{ay_prerequisite|Vocational|Computer}}
+
<noinclude><translate><!--T:42-->
−
==3. Define the following terms (or their equivalents) and tell when and how they are used:==
+
</noinclude>
−
;a. HTTP:
+
<!-- 1. Have the Internet honor. -->
−
Hyper-text Transfer Protocol. HTTP is the set of rules for exchangingfiles (text, graphic images, sound, video, and other multimedia files) on the World Wide Web. It is the actual communications protocol that enables Web browsing.  
+
{{honor_prerequisite|honor=Internet}}
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 1 -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=2}}
 +
<noinclude><translate><!--T:43-->
 +
</noinclude>
 +
<!-- 2. Have the Basic Computer Honor -->
 +
{{honor_prerequisite|honor=Computers}}
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 2 -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3}}
 +
<noinclude><translate><!--T:44-->
 +
</noinclude>
 +
<!-- 3. Define the following terms (or their equivalents) and tell when and how they are used: -->
 +
<noinclude></translate></noinclude>
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3a}}
 +
<noinclude><translate><!--T:45-->
 +
</noinclude>
 +
Hyper-text Transfer Protocol. HTTP is the set of rules for exchanging files (text, graphic images, sound, video, and other multimedia files) on the World Wide Web. It is the actual communications protocol that enables Web browsing.  
  
−
;b. Hyperlink :
+
<!--T:3-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 3a -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3b}}
 +
<noinclude><translate><!--T:46-->
 +
</noinclude>
 
A hyperlink, more commonly called a link, is an electronic connection between one web page to either (1) other web pages on the same web site, or (2) web pages located on another web site. More specifically, a hyperlink is a connection between one page of a hypertext document to another.  
 
A hyperlink, more commonly called a link, is an electronic connection between one web page to either (1) other web pages on the same web site, or (2) web pages located on another web site. More specifically, a hyperlink is a connection between one page of a hypertext document to another.  
  
−
;c. HTML :
+
<!--T:4-->
−
HyperText Markup Language, the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics). Also, in HTML a word, a block of text, or an image can be linked to another file on the Web. HTML files are viewed with a World Wide Web browser, such as Internet Explorer, Mozilla Firefox, Netscape, or Opera (among others).  
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 3b -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3c}}
 +
<noinclude><translate><!--T:47-->
 +
</noinclude>
 +
HyperText Markup Language, the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics). Also, in HTML a word, a block of text, or an image can be linked to another file on the Web. HTML files are viewed with a World Wide Web browser, such as Internet Explorer, Mozilla Firefox, Netscape, or Opera (among others).  
  
−
;d. Browser safe colors and hex codes:
+
<!--T:5-->
−
'''Browser safe colors''' – Many monitors/graphics cards (especially those sold before 2002) were set to display only 256 of the millions of colors that are viewable to the human eye. The browser safe colors are those 216 defined colors that both PC and Macintosh monitors ALWAYS have in common. If those 216 colors are chosen to be used when creating or publishing a website, a user will always see the same colors that you do on your monitor (colors that aren’t part of this 216 color palette are known to sometimes dither, which means they may appear “purple” on one monitor, red on another, and orange on yet another. Photos are not usually grossly affected by this coding).
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 3c -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3d}}
 +
<noinclude><translate><!--T:48-->
 +
</noinclude>
 +
'''Browser safe colors''' – Many monitors/graphics cards (especially those sold before 2002) were set to display only 256 of the millions of colors that are viewable to the human eye. The browser safe colors are those 216 defined colors that both PC and Macintosh monitors ALWAYS have in common. If those 216 colors are chosen to be used when creating or publishing a website, a user will always see the same colors that you do on your monitor (colors that aren’t part of this 216 color palette are known to sometimes dither, which means they may appear “purple” on one monitor, red on another, and orange on yet another. Photos are not usually grossly affected by this coding).
  
−
:'''Hex codes''' are the 6-alphanumeric digits that define the 216 websafe colors, as well as millions of other colors. This six digit format is the way that HTML tells the browser what colors to display. For example, #000000 is white, #FFFFFF is black, and #FF0000 is fire engine red. For a complete list of browser safe colors visit http://www.lynda.com/hex.html
+
<!--T:6-->
 +
:'''Hex codes''' are the 6-alphanumeric digits that define the 216 websafe colors, as well as millions of other colors. This six digit format is the way that HTML tells the browser what colors to display. For example, #000000 is black, #FFFFFF is white, and #FF0000 is fire engine red.  
  
−
;e. URL:
+
<!--T:7-->
−
Uniform Resource Locator – The standard way to give the address of any resource on the Internet that is part of the World Wide Web (WWW). A URL looks like this: http://www.pathfindersonline.org.  
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 3d -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3e}}
 +
<noinclude><translate><!--T:49-->
 +
</noinclude>
 +
Uniform Resource Locater – The standard way to give the address of any resource on the Internet that is part of the World Wide Web (WWW). A URL looks like this: http://www.clubministries.org.  
  
−
;f. Gif :
+
<!--T:8-->
−
Graphic Interchange Format – this format was developed by Compuserve in the early days of the internet. It is an 8-bit image format (256 colors) that optimized for internet usuage. Images stored in this format are usually of a low-resolution quality, they may be animated, and they may have transparent parts. Photographs usually do not look good if saved in this format.  
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 3e -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3f}}
 +
<noinclude><translate><!--T:50-->
 +
</noinclude>
 +
Graphic Interchange Format – this format was developed by Compuserve in the early days of the internet. It is an 8-bit image format (256 colors) that optimized for internet usage. Images stored in this format are usually of a low-resolution quality, they may be animated, and they may have transparent parts. Photographs usually do not look good if saved in this format.  
  
−
;g. JPEG:
+
<!--T:9-->
−
Joint Photographic Experts Group. A compression technique used for saving images and photographs. This compression method reduced the file size of the images without reducing its quality. Widely used on the World Wide Web.  
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 3f -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=3g}}
 +
<noinclude><translate><!--T:51-->
 +
</noinclude>
 +
Joint Photographic Experts Group. A compression technique used for saving images and photographs. This compression method reduced the file size of the images without reducing its quality. Widely used on the World Wide Web.
  
−
==4. Learn and demonstrate the use of these HTML tags OR demonstrate equivalent website construction commands in one of the current website development languages (PHP, XML, etc.)==
+
<!--T:52-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 3g -->
 +
{{CloseReq}} <!-- 3 -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4}}
 +
<noinclude><translate><!--T:53-->
 +
</noinclude>
 +
<!-- 4. Learn and demonstrate the use of these HTML tags OR demonstrate equivalent website construction commands in one of the current website development languages (PHP, XML, etc.) -->
 +
<noinclude></translate></noinclude>
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4a}}
 +
<noinclude><translate><!--T:54-->
 +
</noinclude>
 +
This tells the web browser (Internet Explorer, Firefox, Chrome, Safari, Spartan) that this document should be viewed as a web page (instead of as a Word document, PDF file, etc.)
  
−
===<html>===
+
<!--T:55-->
−
This tells the web browser (Internet Explorer, Firefox, Netscape) that this document should be viewed as a web page (instead of as a Word document, PDF file, etc.)
+
All tags with a backslash (/) show that this part of the command is DONE! All opening tags have a matching closing tag, kind of like parenthesis always both open ( and end). Notice that (1) each formatting tag appears between "less than" (<) and "greater than" (>) signs, and (2) the tags always appear in pairs, with the second tag in the pair beginning with a "slash" (/).  
  
−
===<head>===
+
<!--T:56-->
−
This comment allows for additional parts such as Meta tags (for search engines), and other “overall” information. Most of this information is NOT viewed by the user, but is instead “directions” to the browser.
+
<noinclude></translate></noinclude>
−
<title>Title of Page</title>
+
{{CloseReq}} <!-- 4a -->
−
===</head>===
+
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4b}} <!--T:11-->
−
This tag, and all other tags with a backslash (/) show that this part of the command is DONE! All opening tags have a matching closing tag, kind of like parenthesis always both open ( and end). Notice that (1) each formatting tag appears between "less than" (<) and "greater than" (>) signs, and (2) the tags always appear in pairs, with the second tag
+
<noinclude><translate><!--T:57-->
−
in the pair beginning with a "slash" (/).  
+
</noinclude>
 +
This comment allows for additional parts such as Meta tags (for search engines), and other “overall” information. Most of this information is NOT viewed by the user, but is instead “directions” to the browser.  
  
−
===<body>===
+
<!--T:58-->
−
This is the part of the website text viewable to the audience. It can include tables,
+
<code><title>Title of Page</title></code>
−
images, links, and information all about you or your club.
+
<noinclude></translate></noinclude>
−
All of the commands demonstrated below “happen” between the <body> tag and the
+
{{CloseReq}} <!-- 4b -->
−
</body> tag.
+
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4c}} <!--T:23-->
 +
<noinclude><translate><!--T:59-->
 +
</noinclude>
 +
This is the part of the website text viewable to the audience. It can include tables, images, links, and information all about you or your club. All of the commands demonstrated below “happen” between the <body> tag and the </body> tag.
  
−
===<nowiki><h1>...</h1></nowiki> ===
+
<!--T:60-->
−
Header, level 1 (the largest size type for a header, usually used at the beginning of a page
+
<noinclude></translate></noinclude>
−
or the start of a new section). Smaller headers are tagged with <nowiki><h2>...</h2></nowiki>,
+
{{CloseReq}} <!-- 4c -->
−
<nowiki><h3>...</h3></nowiki>, etc.
+
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4d}} <!--T:12-->
−
===<nowiki><b>...</b></nowiki> ===
+
<noinclude><translate><!--T:61-->
−
boldface text
+
</noinclude>
−
===<nowiki><i>...</i></nowiki> ===
+
<p>Header, level 1 (the largest size type for a header, usually used at the beginning of a page or the start of a new section). Smaller headers are tagged with <nowiki><h2>...</h2></nowiki>, <nowiki><h3>...</h3></nowiki>, etc.</p>
−
italic text
+
<p>As a general rule, you only want one '''<nowiki><h1></nowiki>''' tag per page. This is usually the most important heading on the page, i.e. what the entire page is about. Second-level headings would use an '''<nowiki><h2></nowiki>''', third-level headings an '''<nowiki><h3></nowiki>''', etc.</p>
−
===<nowiki><center>...</center></nowiki> ===
+
<noinclude></translate></noinclude>
−
centered text
+
{{CloseReq}} <!-- 4d -->
−
===<nowiki><p></nowiki> ===
+
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4e}} <!--T:13-->
−
paragraph return (inserts an extra line space between paragraphs)
+
<noinclude><translate><!--T:62-->
−
Note: Any paragraph returns that you insert in your document by simply hitting the Return key on your keyboard will be ignored by a Web browser. You must use the tag.
+
</noinclude>
 +
<p>'''boldface text'''</p>
 +
<p>Note that the '''<nowiki><b></nowiki>''' tag has been depricated in HTML5. If the text is a heading, consider using a '''<nowiki><h1></nowiki>''', '''<nowiki><h2></nowiki>''', '''<nowiki><h3></nowiki>''', etc. tag. If you are trying to "bold" plain text, consider using the '''<nowiki><strong></nowiki>''' tag.</p>
  
−
<p> to create a paragraph break on the screen.
+
<!--T:63-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4e -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4f}} <!--T:24-->
 +
<noinclude><translate><!--T:64-->
 +
</noinclude>
 +
<p>''italic text''</p>
 +
<p>Like the '''<nowiki><b></nowiki>''' tag, the '''<nowiki><i></nowiki>''' tag has been depricated in HTML5. Consider using '''<nowiki><em></nowiki>''' (for emphasis).</p>
  
−
===<nowiki><br></nowiki>===
+
<!--T:65-->
−
line break (no extra space)
+
<noinclude></translate></noinclude>
−
===<nowiki><hr></nowiki> ===
+
{{CloseReq}} <!-- 4f -->
−
horizontal rule (a line running left-to-right across the page, to separate one section from the next)
+
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4g}} <!--T:14-->
−
===<nowiki><ol>...</ol></nowiki> ===
+
<noinclude><translate><!--T:66-->
−
ordered, or numbered, list. Each list item begins with the tag <nowiki><li></nowiki> and falls somewhere between the <nowiki><ol>...</ol></nowiki> tags.
+
</noinclude>
−
===<nowiki><ul>...</ul></nowiki> ===
+
<p>'''<center>This is some centered text</center>'''</p>
−
unordered, or bulleted, list. Again, each list item begins with the tag <nowiki><li></nowiki>.
+
<p>Another tag that was depricated in HTML5. Best practices say to use CSS for centering.</p>
−
===<nowiki><a href></nowiki>===
+
<p>If you were to want to center text in HTML5 using inline CSS, what you might do is this:</p>
−
<a href="filename.html">...</a>
+
<code><nowiki><div style="text-align: center">Text to be centered</div></nowiki></code>
−
a hotlink to another file in the same folder
 
−
<a href="http://URL">...</a>
 
−
a hotlink to another site. You will have to know the Uniform Resource Locator (URL), or Web address, of any site to which you want to link your page.
 
−
===<nowiki><img></nowiki>===
 
−
<img src="image.gif">  
 
−
This tag would insert an image with the filename "image.gif" on the far left side of your page.
 
−
==5. Make a simple table – include  text, a graphic, a horizontal rule, and a link. Use hex Codes to color your text. Make your title larger then the main document text. ==
 
  
−
==6. Learn about: ==
+
<!--T:67-->
−
===a. Web graphics and be able to explain the process used to make them download quickly. ===
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4g -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4h}} <!--T:15-->
 +
<noinclude><translate><!--T:68-->
 +
</noinclude>
 +
Paragraph return (inserts an extra line space between paragraphs)
 +
Note: Any paragraph returns that you insert in your document by simply hitting the Return key on your keyboard will be ignored by a Web browser. You must use the tag <nowiki><p></nowiki> to create a paragraph break on the screen.
 +
 
 +
<!--T:69-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4h -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4i}} <!--T:16-->
 +
<noinclude><translate><!--T:70-->
 +
</noinclude>
 +
Line break (no extra space)
 +
 
 +
<!--T:71-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4i -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4j}} <!--T:18-->
 +
<noinclude><translate><!--T:72-->
 +
</noinclude>
 +
Horizontal rule (a line running left-to-right across the page, to separate one section from the next)
 +
 
 +
<!--T:73-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4j -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4k}}
 +
<noinclude><translate><!--T:74-->
 +
</noinclude>
 +
Ordered, or numbered, list. Each list item begins with the tag <nowiki><li></nowiki> and falls somewhere between the <nowiki><ol>...</ol></nowiki> tags.  
 +
 
 +
====Example==== <!--T:25-->
 +
 
 +
<!--T:26-->
 +
<code>
 +
<nowiki>
 +
<ol>
 +
<li>List Item</li>
 +
<li>List Item</li>
 +
</ol>
 +
</nowiki>
 +
</code>
 +
 
 +
<!--T:27-->
 +
Turns into this:
 +
 
 +
<!--T:28-->
 +
<ol>
 +
<li>List Item</li>
 +
<li>List Item</li>
 +
</ol>
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4k -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4l}}
 +
<noinclude><translate><!--T:75-->
 +
</noinclude>
 +
Unordered, or bulleted, list. Again, each list item begins with the tag <nowiki><li></nowiki>.
 +
 
 +
====Example==== <!--T:30-->
 +
 
 +
<!--T:31-->
 +
<code>
 +
<nowiki>
 +
<ul>
 +
<li>List Item</li>
 +
<li>List Item</li>
 +
</ul>
 +
</nowiki>
 +
</code>
 +
 
 +
<!--T:32-->
 +
Turns into this:
 +
 
 +
<!--T:33-->
 +
<ul>
 +
<li>List Item</li>
 +
<li>List Item</li>
 +
</ul>
 +
 
 +
<!--T:76-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4l -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4m}} <!--T:29-->
 +
<noinclude><translate><!--T:77-->
 +
</noinclude>
 +
<code><a href="filename.html">...</a></code>
 +
 
 +
<!--T:35-->
 +
A hotlink to another file in the same folder
 +
 
 +
<!--T:36-->
 +
<code><a href="http://URL">...</a></code>
 +
 
 +
<!--T:78-->
 +
A hotlink to another site. You will have to know the Uniform Resource Locator (URL), or Web address, of any site to which you want to link your page.
 +
 
 +
<!--T:79-->
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4m -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=4n}} <!--T:34-->
 +
<noinclude><translate><!--T:80-->
 +
</noinclude>
 +
<code><img src="image.gif"></code>
 +
 
 +
<!--T:38-->
 +
This tag would insert an image with the filename "image.gif" on the far left side of your page.
 +
 
 +
<!--T:39-->
 +
----
 +
 
 +
<!--T:40-->
 +
A great reference for HTML tags can be found at [http://www.w3schools.com/tags/default.asp W3Schools]
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 4n -->
 +
{{CloseReq}} <!-- 4 -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=5}}
 +
<noinclude><translate><!--T:81-->
 +
</noinclude>
 +
<!-- 5. Make a simple table – include text, a graphic, a horizontal rule, and a link. Use hex Codes to color your text. Make your title larger then the main document text. -->
 +
Learn about making HTML tables at [https://www.w3schools.com/html/html_tables.asp W3Schools] to make a table and put it on your website.
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 5 -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=6}}
 +
<noinclude><translate><!--T:82-->
 +
</noinclude>
 +
<!-- 6. Learn about: -->
 +
<noinclude></translate></noinclude>
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=6a}}
 +
<noinclude><translate><!--T:83-->
 +
</noinclude>
 
*i. Three web graphics are supported by the majority of web browsers (gif, jpg, and png). JPG are great for photographs, and gifs work well for clipart, navigation buttons, anything that has transparent areas, and just about anything else. PNG graphics are still not widely accepted, but when they are they will be great, offering lossless compression and displaying images on the web. The advantages of PNG is that it supports images with millions of colors and produces background transparency without jagged edges. These files are 3-15% smaller than gifs, the format they were created to replace. They’re also open source, meaning that its free to create them, manipulate them, and use the png codex to create them.  
 
*i. Three web graphics are supported by the majority of web browsers (gif, jpg, and png). JPG are great for photographs, and gifs work well for clipart, navigation buttons, anything that has transparent areas, and just about anything else. PNG graphics are still not widely accepted, but when they are they will be great, offering lossless compression and displaying images on the web. The advantages of PNG is that it supports images with millions of colors and produces background transparency without jagged edges. These files are 3-15% smaller than gifs, the format they were created to replace. They’re also open source, meaning that its free to create them, manipulate them, and use the png codex to create them.  
−
*ii. Many programs such as Adobe Photoshop and Corel Draw offer a “save to web” feature that lowers the actual number of colors SAVED in the graphic. While millions of colors may be saved in a large digital photograph, by reducing its size and color-depth, it is possible to shrink many pictures to less then 5% of their original size.  
+
*ii. Many programs such as Adobe Photoshop and Corel Draw offer a “save to web” feature that lowers the actual number of colors SAVED in the graphic. While millions of colors may be saved in a large digital photograph, by reducing its size and color-depth, it is possible to shrink many pictures to less than 5% of their original size.  
  
−
===b. Web safe colors and know when to use them.  ===
+
<!--T:84-->
−
From the definitions section you already know what web safe colors are. You should use them whenever you are creating banners, headers, text colors, navigation buttons, or other features of a standard website. Use this knowledge to create a jpg and a gif that are both under 15k, but that are still easily viewable on a website, and to create at least five graphical navigation buttons and a title header for your website.  
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 6a -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=6b}} <!--T:19-->
 +
<noinclude><translate><!--T:85-->
 +
</noinclude>
 +
Refer to requirements 3d to review the definition. You should use web safe colors whenever you are creating banners, headers, text colors, navigation buttons, or other features of a standard website. Use this knowledge to create a jpg and a gif that are both under 15k, but that are still easily viewable on a website, and to create at least five graphical navigation buttons and a title header for your website.  
  
−
==7. Individually or as a family, unit, or other group, develop a functioning website. All the pages of the website should be “linked” together so that someone visiting your “Homepage” may click to each of the other pages on your website. The website should be composed of no less than 4 pages. The website should include: ==
+
<!--T:86-->
−
*a. A welcome page that states the reason for the website & includes at least one image or photograph.
+
<noinclude></translate></noinclude>
−
*b. A photos page that shows activities/events you, your family, or group have enjoyed
+
{{CloseReq}} <!-- 6b -->
−
*c. A guest book or contact page where people can “sign in” that they have visited OR where a contact email address is listed where people can email you when they visit your website.
+
{{CloseReq}} <!-- 6 -->
−
*d. A links page to other websites that you enjoy. This page should contain at least 8 links.
+
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=7}}
−
*e. If your page is for Pathfinders/Youth group/Church or similar organization, create a calendar page that contains upcoming events.
+
<noinclude><translate><!--T:87-->
−
*f. Maintain the above website for at least 3 months.  Keep the website information current by changing and editing the content often (Add pictures, update the calendar, etc.).
+
</noinclude>
 +
<!-- 7. Individually or as a family, unit, or other group, develop a functioning website. All the pages of the website should be “linked” together so that someone visiting your “Homepage” may click to each of the other pages on your website. The website should be composed of no less than 4 pages. The website should include: -->
 +
<noinclude></translate></noinclude>
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=7a}}
 +
<noinclude><translate><!--T:88-->
 +
</noinclude>
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 7a -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=7b}}
 +
<noinclude><translate><!--T:89-->
 +
</noinclude>
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 7b -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=7c}}
 +
<noinclude><translate><!--T:90-->
 +
</noinclude>
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 7c -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=7d}}
 +
<noinclude><translate><!--T:91-->
 +
</noinclude>
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 7d -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=7e}}
 +
<noinclude><translate><!--T:92-->
 +
</noinclude>
 +
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 7e -->
 +
{{ansreq|page={{#titleparts:{{PAGENAME}}|2|1}}|num=7f}}
 +
<noinclude><translate><!--T:93-->
 +
</noinclude>
  
−
==Equipment / Resources for fulfilling the Advanced Internet Honor: ==
+
<!--T:94-->
−
*'''Computer''' (either Macintosh or PC) with an HTML editing program or WYSIWYG web design program and an image editing program on it.  Suggestions for an HTML or WYSIWYG editor and image editing software: Microsoft Front Page Express or go to www.tucows.com and download shareware or freeware programs.
+
<noinclude></translate></noinclude>
 +
{{CloseReq}} <!-- 7f -->
 +
{{CloseReq}} <!-- 7 -->
 +
<noinclude><translate></noinclude>
 +
==Equipment / Resources for fulfilling the Advanced Internet Honor: == <!--T:21-->
 +
*'''Computer''' (either Macintosh or PC) with browser support -- many editing programs are built into the Web 2.0 interface, meaning that all you have to do is login and start editing your webpages/website. OR in some classic environments, you may need to edit with an HTML editing program or WYSIWYG web design program. On a PC, "Notepad" or on a Mac, "TextEdit" can create HTML and freeware such as Komposer (PC, Mac, Linux) are available.
 
*'''A scanner''', a '''digital camera''' or another means of getting photos on the computer.  
 
*'''A scanner''', a '''digital camera''' or another means of getting photos on the computer.  
−
*'''Web space''' can be obtained for free almost anywhere, just do a search for “free web hosting.” Some common ones are Yahoo’s geocities.com, www.tripod.com and www.angelfire.com.  You might have to sign up for a free email address and there will be some advertising on your site.  If you would rather have an ad free site, www.tagnet.org (A Seventh-day Adventist web host) has space for churches, schools, and organizations for a small fee per year. Contact them for more information. You can also contact your local Internet Service Provider for their services.
+
*'''Web space''' can be obtained for free almost anywhere, just do a search for “free web hosting.” Be aware that most free sites are ad supported and those ads may NOT support the ideals of your organization. If you are creating a site for an Adventist church/school, you have free website space already from adventistchurchconnect.com. Contact them or login for more information.
 +
<noinclude></translate></noinclude>
  
−
[[Category:Adventist Youth Honors Answer Book]]
+
[[Category:Adventist Youth Honors Answer Book/Do at home{{GetLangSuffix}}]]
 +
{{CloseHonorPage}}

Latest revision as of 06:19, 9 January 2024

Other languages:
English • ‎español
Internet - Advanced

Skill Level

3

Year

2006

Version

23.11.2024

Approval authority

General Conference

Internet Advanced AY Honor.png
Internet - Advanced
Vocational
Skill Level
123
Approval authority
General Conference
Year of Introduction
2006
See also
Modern Technology Master Award
Science and Technology Master Award


1

Have the Internet honor.


For tips and instruction see Internet.


2

Have the Basic Computer honor.


For tips and instruction see Computers.


3

Define the following terms (or their equivalents) and tell when and how they are used:


3a

HTTP


Hyper-text Transfer Protocol. HTTP is the set of rules for exchanging files (text, graphic images, sound, video, and other multimedia files) on the World Wide Web. It is the actual communications protocol that enables Web browsing.


3b

Hyperlink


A hyperlink, more commonly called a link, is an electronic connection between one web page to either (1) other web pages on the same web site, or (2) web pages located on another web site. More specifically, a hyperlink is a connection between one page of a hypertext document to another.


3c

HTML


HyperText Markup Language, the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics). Also, in HTML a word, a block of text, or an image can be linked to another file on the Web. HTML files are viewed with a World Wide Web browser, such as Internet Explorer, Mozilla Firefox, Netscape, or Opera (among others).


3d

Browser safe colors and hex codes


Browser safe colors – Many monitors/graphics cards (especially those sold before 2002) were set to display only 256 of the millions of colors that are viewable to the human eye. The browser safe colors are those 216 defined colors that both PC and Macintosh monitors ALWAYS have in common. If those 216 colors are chosen to be used when creating or publishing a website, a user will always see the same colors that you do on your monitor (colors that aren’t part of this 216 color palette are known to sometimes dither, which means they may appear “purple” on one monitor, red on another, and orange on yet another. Photos are not usually grossly affected by this coding).

Hex codes are the 6-alphanumeric digits that define the 216 websafe colors, as well as millions of other colors. This six digit format is the way that HTML tells the browser what colors to display. For example, #000000 is black, #FFFFFF is white, and #FF0000 is fire engine red.


3e

URL


Uniform Resource Locater – The standard way to give the address of any resource on the Internet that is part of the World Wide Web (WWW). A URL looks like this: http://www.clubministries.org.


3f

Gif


Graphic Interchange Format – this format was developed by Compuserve in the early days of the internet. It is an 8-bit image format (256 colors) that optimized for internet usage. Images stored in this format are usually of a low-resolution quality, they may be animated, and they may have transparent parts. Photographs usually do not look good if saved in this format.


3g

JPEG


Joint Photographic Experts Group. A compression technique used for saving images and photographs. This compression method reduced the file size of the images without reducing its quality. Widely used on the World Wide Web.



4

Learn and demonstrate the use of these HTML tags OR demonstrate equivalent website construction commands in one of the current website development languages (PHP, XML, etc.)


4a

<html>...</html>


This tells the web browser (Internet Explorer, Firefox, Chrome, Safari, Spartan) that this document should be viewed as a web page (instead of as a Word document, PDF file, etc.)

All tags with a backslash (/) show that this part of the command is DONE! All opening tags have a matching closing tag, kind of like parenthesis always both open ( and end). Notice that (1) each formatting tag appears between "less than" (<) and "greater than" (>) signs, and (2) the tags always appear in pairs, with the second tag in the pair beginning with a "slash" (/).


4b

<head>...</head>


This comment allows for additional parts such as Meta tags (for search engines), and other “overall” information. Most of this information is NOT viewed by the user, but is instead “directions” to the browser.

<title>Title of Page</title>


4c

<body>....</body>


This is the part of the website text viewable to the audience. It can include tables, images, links, and information all about you or your club. All of the commands demonstrated below “happen” between the <body> tag and the </body> tag.


4d

<h1>...</h1>


Header, level 1 (the largest size type for a header, usually used at the beginning of a page or the start of a new section). Smaller headers are tagged with <h2>...</h2>, <h3>...</h3>, etc.

As a general rule, you only want one <h1> tag per page. This is usually the most important heading on the page, i.e. what the entire page is about. Second-level headings would use an <h2>, third-level headings an <h3>, etc.


4e

<b>...</b>


boldface text

Note that the <b> tag has been depricated in HTML5. If the text is a heading, consider using a <h1>, <h2>, <h3>, etc. tag. If you are trying to "bold" plain text, consider using the <strong> tag.


4f

<i>...</i>


italic text

Like the <b> tag, the <i> tag has been depricated in HTML5. Consider using <em> (for emphasis).


4g

<center>...</center>


This is some centered text

Another tag that was depricated in HTML5. Best practices say to use CSS for centering.

If you were to want to center text in HTML5 using inline CSS, what you might do is this:

<div style="text-align: center">Text to be centered</div>


4h

<p>...</p>


Paragraph return (inserts an extra line space between paragraphs) Note: Any paragraph returns that you insert in your document by simply hitting the Return key on your keyboard will be ignored by a Web browser. You must use the tag <p> to create a paragraph break on the screen.


4i

<br />


Line break (no extra space)


4j

<hr />


Horizontal rule (a line running left-to-right across the page, to separate one section from the next)


4k

<ol>...</ol>


Ordered, or numbered, list. Each list item begins with the tag <li> and falls somewhere between the <ol>...</ol> tags.

Example

<ol> <li>List Item</li> <li>List Item</li> </ol>

Turns into this:

  1. List Item
  2. List Item


4l

<ul>...</ul>


Unordered, or bulleted, list. Again, each list item begins with the tag <li>.

Example

<ul> <li>List Item</li> <li>List Item</li> </ul>

Turns into this:

  • List Item
  • List Item


4m

<a href>


<a href="filename.html">...</a>

A hotlink to another file in the same folder

<a href="http://URL">...</a>

A hotlink to another site. You will have to know the Uniform Resource Locator (URL), or Web address, of any site to which you want to link your page.


4n

<img>


<img src="image.gif">

This tag would insert an image with the filename "image.gif" on the far left side of your page.

A great reference for HTML tags can be found at W3Schools



5

Make a simple table – include text, a graphic, a horizontal rule, and a link. Use hex Codes to color your text. Make your title larger then the main document text.


Learn about making HTML tables at W3Schools to make a table and put it on your website.


6

Learn about:


6a

Web graphics and be able to explain the process used to make them download quickly.


  • i. Three web graphics are supported by the majority of web browsers (gif, jpg, and png). JPG are great for photographs, and gifs work well for clipart, navigation buttons, anything that has transparent areas, and just about anything else. PNG graphics are still not widely accepted, but when they are they will be great, offering lossless compression and displaying images on the web. The advantages of PNG is that it supports images with millions of colors and produces background transparency without jagged edges. These files are 3-15% smaller than gifs, the format they were created to replace. They’re also open source, meaning that its free to create them, manipulate them, and use the png codex to create them.
  • ii. Many programs such as Adobe Photoshop and Corel Draw offer a “save to web” feature that lowers the actual number of colors SAVED in the graphic. While millions of colors may be saved in a large digital photograph, by reducing its size and color-depth, it is possible to shrink many pictures to less than 5% of their original size.


6b

Web safe colors and know when to use them. Use this knowledge to create a jpg and a gif that are both under 15k, but that are still easily viewable on a website, and to create at least five graphical navigation buttons and a title header for your website.


Refer to requirements 3d to review the definition. You should use web safe colors whenever you are creating banners, headers, text colors, navigation buttons, or other features of a standard website. Use this knowledge to create a jpg and a gif that are both under 15k, but that are still easily viewable on a website, and to create at least five graphical navigation buttons and a title header for your website.



7

Individually or as a family, unit, or other group, develop a functioning website. All the pages of the website should be “linked” together so that someone visiting your “Homepage” may click to each of the other pages on your website. The website should be composed of no less than 4 pages. The website should include:


7a

A welcome page that states the reason for the website & includes at least one image or photograph.



7b

A photos page that shows activities/events you, your family, or group have enjoyed.



7c

A guest book or contact page where people can “sign in” that they have visited OR where a contact email address is listed where people can email you when they visit your website.



7d

A links page to other websites that you enjoy. This page should contain at least 8 links.



7e

If your page is for Pathfinders/Youth group/Church or similar organization, create a calendar page that contains upcoming events.



7f

Maintain the above website for at least 3 months. Keep the website information current by changing and editing the content often (Add pictures, update the calendar, etc.).





Equipment / Resources for fulfilling the Advanced Internet Honor:

  • Computer (either Macintosh or PC) with browser support -- many editing programs are built into the Web 2.0 interface, meaning that all you have to do is login and start editing your webpages/website. OR in some classic environments, you may need to edit with an HTML editing program or WYSIWYG web design program. On a PC, "Notepad" or on a Mac, "TextEdit" can create HTML and freeware such as Komposer (PC, Mac, Linux) are available.
  • A scanner, a digital camera or another means of getting photos on the computer.
  • Web space can be obtained for free almost anywhere, just do a search for “free web hosting.” Be aware that most free sites are ad supported and those ads may NOT support the ideals of your organization. If you are creating a site for an Adventist church/school, you have free website space already from adventistchurchconnect.com. Contact them or login for more information.
Retrieved from "https://wiki.pathfindersonline.org/index.php?title=AY_Honors/Internet_-_Advanced/Answer_Key&oldid=604104"