IT101 Week 10: Internet and Web Technology - Notes

Internet

  • Definition: Decentralized network of computers, servers, and IoT devices.

  • Operation: Functions over TCP/IP protocol, enabling data transmission across various networks.

  • Access: Primarily accessed through the World Wide Web (WWW) via Internet Service Providers (ISPs).

  • Regulation: Not regulated, allowing for a diverse array of applications and user-generated content.

World Wide Web (WWW)

  • Definition: A system facilitating public access to the internet, enabling users to browse web pages.

  • Operation: Utilizes the Hypertext Transfer Protocol (HTTP) to retrieve and transmit information.

  • Web Pages: Typically (HTML) formatted, hosted on web servers.

  • Navigation: Uses Uniform Resource Locators (URLs) to link and access different pages throughout the web.

Web Server

  • Definition: A server system that stores, processes, and delivers web content to clients (typically web browsers).

  • Key Functions:

    • Serves content in the form of HTML, images, stylesheets, and JavaScript.

    • Operates over HTTP and HTTPS protocols, utilizing port 80 for HTTP and port 443 for HTTPS.

    • Common software used includes Apache, Nginx, and Microsoft Internet Information Services (IIS).

Web Browser

  • Definition: An application used to access the WWW and display web content.

  • Features:

    • Reads and interprets HTML, CSS, and JavaScript.

    • Performs DNS lookups based on user input (URLs).

    • Often includes features like bookmarks, history tracking, and browser extensions.

    • Developer mode is available for debugging and web development purposes.

  • Common Examples: Opera, Internet Explorer (IE), Microsoft Edge, Google Chrome, Mozilla Firefox, and Safari.

Search Engines

  • Definition: Software systems that search for and index information across the WWW.

  • Process: Involves crawling to locate new content, indexing for accessibility, and ranking algorithms to prioritize search results.

  • Ranking Factors: Quality of the content, backlinks, technical details, and site reputation.

  • Popular Search Engines:

    • Google: Most widely used search engine.

    • Bing: Microsoft's search engine.

    • DuckDuckGo: A search engine focusing on user privacy and non-tracking.

    • Baidu: A major search engine in China.

Internet Explorer and Microsoft Edge

  • Internet Explorer (IE):

    • Released in 1995, it offers strong legacy compatibility and is bundled with Windows OS.

  • Microsoft Edge:

    • Introduced in 2015 as an upgraded version of IE, promising improved performance and security.

    • Forked from the open-source Chromium project and also bundled with Windows OS.

Google Chrome

  • Definition: Google’s web browser known for its extensive feature set.

  • Popularity: Currently the most widely used web browser.

  • Characteristics:

    • Supports a vast array of extensions, enhancing functionality for web developers.

    • Known for its fast performance but criticized for high RAM usage.

    • Privacy concerns exist regarding Google's data management practices.

Mozilla Firefox

  • Definition: A web browser emphasizing privacy and support for developers.

  • Features:

    • Open-source development encourages community collaboration.

    • Extensive support for add-ons and extensions, alongside advanced developer tools.

    • May exhibit slower performance compared to Chrome in certain scenarios.

Safari

  • Definition: A web browser designed for Apple devices.

  • Characteristics:

    • Deep integration with Apple's ecosystem.

    • Prioritizes user privacy and is energy-efficient.

    • Limited add-on support and exclusive to Apple devices.

Opera

  • Background: Released in 1995, it has evolved over the years to include modern functionalities.

  • Attributes:

    • Based on the Chromium engine, enabling modern web standards and performance.

    • Contains built-in ad-blocker and battery-saving mode.

    • Also features a VPN service, enhancing user privacy.

    • Currently owned by an investment group led by Chinese investors.

DuckDuckGo

  • Description: A privacy-focused search engine and browser extension.

  • Features:

    • Ensures encrypted connections where feasible, does not track user browsing behavior.

    • Offers a minimalistic interface for browsing.

Tim Berners-Lee

  • Background: An English computer scientist renowned for creating the World Wide Web.

  • Achievements:

    • Invented fundamental web technologies: HTML (Hypertext Markup Language), URL (Uniform Resource Locator), and HTTP (Hypertext Transfer Protocol) around 1989.

    • Developed the world’s first web server.

  • Quote: "I just had to take the hypertext idea and connect it to the TCP and DNS ideas and—ta-da!—the World Wide Web."

HTTP (Hypertext Transfer Protocol)

  • Definition: A protocol for transferring hypertext and enables web content to be shared and accessed.

  • Functionality:

    • Utilizes methods like GET and PUT for communication between browsers and web servers.

    • Commonly operates over port 80 for standard traffic and port 443 for secure transactions.

    • Users can observe HTTP operations in browser development tools under Inspect > Network.

URL (Uniform Resource Locator)

  • Definition: An address format used to access resources on the internet.

  • Typical Structure:

    • Begins with http(s) representing the access protocol (e.g. https://www.example.com).

    • The browser checks caches and resolves the IP of the hostname to connect.

    • Can specify additional details, such as port numbers (e.g. https://www.example.com:8080).

    • Can retrieve specific resources, exemplified with syntax like https://www.example.com/pages/login.

HTML (Hypertext Markup Language)

  • Definition: The standard markup language for documents designed to be displayed in web browsers.

  • Characteristics:

    • Integrated with CSS and JavaScript to create complete web pages.

    • Utilizes tags to describe the structure of a webpage, which browsers interpret for display.

    • Allows integration of images and other objects within the document.

    • Standardized for compatibility across different browsers.

CSS (Cascading Style Sheets)

  • Definition: A stylesheet language that describes the visual presentation of HTML documents.

  • Functions:

    • Controls layout, colors, fonts, and overall aesthetics of web pages.

    • Enables responsiveness to different screen sizes and mobile devices.

    • Supports animations and transition effects for a dynamic user experience.

JavaScript

  • Definition: A scripting language extensively used in conjunction with HTML files.

  • Capabilities:

    • Can manipulate browser actions, such as opening new windows and navigating pages.

    • Validates user inputs for forms and enhances interactivity.

    • Facilitates multimedia features including audio/video playback, games, and animations.

Notepad++

  • Overview: A widely-used free software for note-taking and coding, particularly in the Windows environment.

  • Characteristics:

    • Automatically saves user notes to prevent data loss.

    • Provides built-in tools for various programming languages, including HTML.

    • Other coding tools suggested include Visual Studio and Sublime Text.

index.html

  • Definition: The default entry point for a website, where web servers look for to display content.

  • Typical Locations:

    • Common index files include: index.html, index.htm, index.php, and default.htm.

  • File Retrieval:

    • The server looks in the base directory of a domain (e.g., example.com) for index.html. For subdomains or folders, it looks in the corresponding directory (e.g., example.com/folder1/).

HTML Tags / Elements

  • Definition: Fundamental building blocks of HTML used to define content.

  • Structure:

    • Enclosed in opening and closing tags (e.g., content).

    • Commonly used in pairs to demarcate the start and end of an element.

HTML Attributes

  • Purpose: Provide additional information about HTML elements.

  • Application:

    • Attributes can be applied to any HTML element and defined within the start tag.

    • Example: <p style="color:blue;">This is a blue paragraph.</p>.

  • Common Attributes: id, class, style, href, src, alt.

<!DOCTYPE html>

  • Function: Declares the document type and HTML version, ensuring proper interpretation by web browsers.

  • Requirement: Mandatory for web browsers to accurately render the page according to HTML standards.

<html> </html>

  • Definition: This tag encapsulates the entire HTML document.

  • Attributes: Can include the lang attribute for language specification, assisting search engines and accessibility tools.

  • Typical Usage: Usually followed by opening tags for <head> and <body> sections (e.g., <html lang="en">).

<head> </head>

  • Purpose: Contains metadata about the HTML document.

  • Contents: Includes information such as document title, linked stylesheets, scripts, and character set.

  • Display: Metadata is not shown directly in the browser content but is essential for functionality and SEO.

<body> </body>

  • Definition: The section where all visual content for display in the browser resides.

  • Contents: Includes text, buttons, links, images, and forms, organized with various tags such as <h1>, <p>.

Header Tags <h1> - <h6>

  • Function: Indicate different levels of headings within the body content.

  • Hierarchy: Ranges from <h1> (largest, primary heading) to <h6> (smallest, least significant heading).

Paragraph and Div Tags <p> and <div>

  • Paragraph Tag <p>: Used to create text blocks. Automatically formats margins.

  • Div Tag <div>: A container element for grouping other elements and structuring content, often utilized with CSS and JavaScript for styling.

  • Comparison: While <p> and <div> appear similar, <div> offers greater flexibility for layout and styling.

HTML Text Formatting

  • Purpose: Tags that modify text display.

  • Common Tags:

    • <ins>: Underlined text.

    • <i>: Italicized text.

    • <b>: Bold text.

    • <small>: Smaller text size.

HTML Example of a Poem

<!DOCTYPE html>
<html>
<body>
<h1>A Poem</h1>
<p>Be not afraid of greatness.<br>
Some are born great, <br>
some achieve greatness, <br>
and others have greatness thrust upon them.
</p>
<p><em>-William Shakespeare</em></p>
</body>
</html>

  • Output Preview:

    • A Poem

    • Be not afraid of greatness.

    • Some are born great,

    • some achieve greatness,

    • and others have greatness thrust upon them.

    • -William Shakespeare

Style Attribute

  • Functionality: Modifies the appearance of HTML elements (e.g., body, h1, div, p).

  • Common Style Properties:

    • background-color

    • color

    • font-family

    • font-size

    • text-align

  • Example Usage:

  <body style="background-color:powderblue;">
  <h1 style="font-family:arial;">This is a heading</h1>
  </body>

Anchor Tag <a>

  • Definition: The <a> tag creates hyperlinks in HTML.

  • Usage: The href attribute specifies the URL linked to.

  • Example:

  <a href="https://www.example.com" title="Go to example.com"> Visit Example </a>

Image Tag <img>

  • Purpose: Embeds images into HTML documents.

  • Attributes:

    • src: Specifies the URL or path to the image file.

    • alt: Provides alternative text if the image cannot load, enhancing accessibility.

    • height and width: Set image dimensions through style.

  • Example:

  <img src="https://photo.com/photos/Monkey.jpg" alt="Descriptive text for the image" style="width:150px;height:200px;">

Form Tag <form>

  • Function: Used to create input forms for user submissions.

  • Attributes:

    • action: URL where form data will be sent.

    • method: HTTP method to send data (GET or POST).

  • Contains: Various input elements like text fields or buttons.

Input Tag <input>

  • Purpose: Accepts user input from forms.

  • Characteristics:

    • Self-closing tag; does not have an ending tag.

    • Different types of input fields available:

    • type="text": Text input field.

    • type="radio": Radio buttons for single-choice options.

    • type="checkbox": Checkboxes offering multiple-choice selections.

    • type="submit": Button to submit the form.

  • Example:

  <form action="/action_page.php">
  First name:<br>
  <input type="text"><br>
  Last name:<br>
  <input type="text"><br>
  <input type="submit" value="Submit">
  </form>