Internet - Advanced Honor

Vocational Activities

Requirements

  1. Have the Computers I - Basic honor.

    Answer: You must present to the instructor the duly signed card for the Computers I (Basic) honor, proving that it was completed before starting the Internet Advanced honor, as required by the honor's official prerequisite within the Pathfinder program. — Sequential honors exist to ensure that foundational concepts are solid before advancing. Computers I covers hardware, software, operating systems, and file management — without it, the student gets lost in advanced discussions about HTML, HTTP, hosting, and network protocols.

  2. Define the following terms (or their equivalents) and state when and how they are used:
    • HTTP
    • Hyperlink
    • HTML/PHP
    • Safe browsers and hexadecimal color codes
    • URL
    • GIF/PNG
    • JPEG

    Answer: 1) HTTP: HyperText Transfer Protocol, used for communication between the browser (client) and the server that sends the web pages; it is what makes it possible to access and load sites (the secure version is HTTPS, with encryption). 2) Hyperlink: a clickable link (text or image) that takes the user to another page, file, or internet resource; it is used to navigate and connect contents to each other. 3) HTML/PHP: HTML is the markup language that structures and organizes the page content (titles, texts, images, links), interpreted by the browser; PHP is a language that runs on the server to generate dynamic pages (e.g., forms, login, data that changes) before sending the finished HTML to the browser. 4) Secure browsers and hexadecimal color codes: a secure browser is one that uses an HTTPS connection, stays updated, and protects the user's data (the padlock in the address bar); hexadecimal color codes are the way to define colors on the web using six digits preceded by '#' (e.g., #FFFFFF is white, #000000 is black), used in HTML/CSS to color texts, backgrounds, and elements. 5) URL: the complete address of a resource on the internet (e.g., https://www.exemplo.com/pagina), used to locate and access a specific page or file; it is what we type in the address bar. 6) GIF/PNG: image formats ideal for simple graphics, logos, icons, and drawings with few colors; both support a transparent background and the GIF also allows animations, being used when you want sharpness on edges and flat areas. 7) JPEG: an image format with compression ideal for photographs and images with many colors and variations; it greatly reduces the file size (with a small loss of quality), being used for photos on sites where fast loading is important. — HTTPS is the encrypted version of HTTP — every modern browser marks plain HTTP sites as 'not secure'. Hex codes use 6 digits: two for red, two for green, two for blue (RGB). Chromium browsers dominate more than 70% of the global market today.

  3. Learn and demonstrate the use of these HTML tags or demonstrate equivalent website-building commands in one of the current website development languages (PHP, XML, JSP, ASP, etc.).
    • <html> </html>
    • <head> </head>
    • <body> </body>
    • <b> </b>
    • <i> </i>
    • <a href="URL"> </a>
    • <p>
    • <br> </br>
    • <img src="name"/>
    • <hr> </hr>
    • <table> </table>
    • <tr> </tr>
    • <td></td>

    Answer: You must demonstrate to the instructor each HTML tag in use: html (wraps the document), head (header metadata), body (visible content), b (bold), i (italic), a href (hyperlink to another page), p (paragraph), br (line break), img src (inserts an image), hr (horizontal line), table with tr (row) and td (cell). — HTML is declarative: you mark up the content and the browser renders it. The tags form a tree (DOM) that CSS styles and JavaScript manipulates. Semantic tags (header, nav, main, article, footer) were introduced in HTML5 (2014) and improve the accessibility and SEO of the rendered site.

  4. Make a simple table - include text, a graphic, a horizontal rule, and a link. Use hexadecimal codes to color the text. Make your title larger, and then the text of the main document.

    Answer: You must present to the instructor an HTML file containing a simple table (table with tr and td) with text, an image/graphic (img src), a horizontal rule (hr), and a link (a href), using hexadecimal codes (#FF0000 for red, #0066CC for blue) to color the text, with a title in h1 (largest) and the main content in p paragraphs or a smaller h2. — The heading hierarchy h1 to h6 organizes the document and improves SEO. Hex colors are RGB from 0-255 expressed in hexadecimal: #000000 is black, #FFFFFF is white. Tables today are used only for tabular data — for layout, the modern standard is flexbox or CSS grid instead of a table.

  5. Learn more about:
    • Graphics for the web and be able to explain the process used to download them quickly.
    • Web-safe colors and know when to use them. Use this knowledge to create a JPG and a GIF/PNG that are both under 15k but are still easily visible on a website, and create at least 5 graphical navigation buttons and a header for your site.

    Answer: 1) Web graphics and fast download: for graphics to download quickly you need to use the right format (JPG for photos, GIF/PNG for simple graphics), reduce the image dimensions to the size at which it actually appears, and compress/optimize the file with tools such as TinyPNG or Squoosh. The smaller the file (in KB), the faster it loads — that is why heavy images are avoided and features such as browser cache are used. 2) Web-safe colors and creating the elements: the 'web-safe' colors are a set of 216 colors that appear practically the same on any monitor or browser, ensuring visual consistency — used mainly when you want the site to look the same to everyone. Applying this knowledge, create a JPG file and a GIF/PNG, both under 15k yet still sharp on the site (use JPG for the photo, GIF/PNG for the graphic, and optimize until it is light without losing visibility), and produce at least 5 graphic navigation buttons and a header for your site while keeping the same web-safe color palette. — The 216 'web safe colors' came about when monitors had 8 bits (256 colors). Today monitors display millions, but the concept still guides an accessible palette. Reducing image size is critical for mobile/3G — every extra KB delays loading. Google's Squoosh is the current benchmark in image optimization.

  6. Individually or with the family, the unit, or another group, develop a website. All the pages of the site must be "linked" together so that someone visiting your homepage can click through to each of the other pages of your site. The website must consist of at least 4 pages. The site must include:
    • A welcome page, which states the reason the site was created and includes at least one image or photograph.
    • A photo page that shows the activities and events that you, your family, or group have enjoyed.
    • A guestbook or contact page where people can "sign" to prove they visited, or leave a contact email address so that people can send emails when they visit your site.

    Answer: You must present to the instructor a site with at least 4 interlinked pages: 1) a welcome page (home) with the purpose of the site and at least one image or photograph; 2) a photos page displaying your activities and events, or those of your family or group; 3) a guestbook or contact page where visitors can leave an email or comment; 4) an additional page (about, mission, links). — A site with interlinked navigation has been the basic standard since the early days of the web. Today the contact page replaces the guestbook, with a form that sends an email via the backend. The homepage sets the first impression; a hero image generates engagement and immediately indicates what the site is about.