# Internet and the Web * Internet: A system of interconnected networks using the Internet Protocol Suite (TCP/IP). * Hypertext: Text with links to other texts. * Web = Internet + Hypertext (Tim Berners Lee). # Parts of the Web * Web client: A node that requests a resource from a Web server. * Web server: A node that stores resources and delivers them upon request. * Web browser: Application on a Web client that displays resources and allows selection/navigation. * Resources: Originally documents (e.g., HTML, JPG, etc.). # HTTP - HyperText Transfer Protocol * HTTP Definition: It is the means by which a browser fetches a resource from a server. Messages are text strings. * The server responds with the resource or an error code. * HTTPS: HTTP wrapped in an encrypted stream. # Locating a Resource * URL: A way of specifying the type and location of a resource and how to access it. * Example URL: http://www.google.co.uk # URLs - Uniform Resource Locators * General Form: scheme://domain:port/path?query#fragment * Example: http://www.mycooking.com:80/cakes/coffeewalnut.html#icing * scheme: Protocol to be used to reach the resource (e.g., http, https, ftp, pop). * domain: Where the resource is located (e.g., google.co.uk). * port: Network port used by the server. It is the communication endpoint associated with a specific process on the server side. It defaults to the scheme's default port (e.g., 80 for http). * path: The relative location of the resource. * query: Key/value pairs specifying parameters to be passed to the resource. * fragment: Identifies a specific point within the resource. # HTML - HyperText Markup Language * HTML: Describes the structure and content of a document. * Structure: Defined using tags. * Tags: Appear in pointy brackets (e.g., ``````). * Start and End Tags: Enclose text (content) and/or other tags (e.g., ``` … ```). # HTML Document Structure 1. Document Type Declaration 2. A header 3. A body ```html

Hello World

``` # Elements and Attributes * A tag can contain: * An element: e.g., in ```

```, the tag contains element p ```

This is a paragraph

``` * An element, with one or more attribute-value pairs: `````` * Element ```img``` shows the image at the URL specified by attribute ```src```, which must be gif, jpeg, png, scg or pdf * Attribute ```alt``` describes the image when the image is not displayed * Width and height default to the natural values for the image # Useful HTML Elements * Headings: ```

```, ```

```, ```

```, ```

``` (successively smaller). * ```

This is a big heading

``` * New line: ```
``` * Lists: * Unordered ```

``` or ordered ```
``` * Elements in a list are specified using ```
1. ``` * Unordered List Example: ```html
   • List item
   • Another
   ``` * Ordered List Example: ```html
   1. List item
   2. Another
   ``` # Tables in HTML * HTML tables consist of `````` elements. * `````` may contain several rows ``````. * A row may include several headings ```

   ``` or data items ```

   ```. ```html Heading 1 Heading 2 R1C1 R1C2 R2C1 R2C2 ``` # Links: Absolute vs Relative * Absolute (or complete) URL: ```html Second example ``` * Relative URL: ```html A file in the sibling folder named old ``` * Attribute target with value “_blank” opens a new page. ```html ``` # Links & Anchors * Anchor definitions: ```html Index ``` * Links to parts of a document: ```html Jump to IndexA point in a remote page ``` # Interactions: The ``` ``` element * The `````` element may include `````` elements for user interaction. * Data is sent to the server when the user presses the submit button. ```html Your Name: Your comment: ``` # HTML Validation * Ensures structural and syntactic correctness. * Compatible with all browsers and other processors. * W3C Markup Validation Service: http://validator.w3.org/ * Uses DOCTYPE declaration to determine document type. * Returns a list of errors, warnings, or confirmation of compliance. # Further HTML Material & Practice * HTML tags list: https://www.w3schools.com/tags/ * W3 Schools Tutorial: http://www.w3schools.com/html/ * Practice using main tags (html, head, meta, body, h1, h2, p, br, ul, ol, li, a, table). * Check your page using the browser console and the validator (http://validator.w3.org/). # How to Find a Resource? scheme://domain:port/path?query#fragment # Identifying Files Using Paths * File systems are tree structures. * Nodes = folders and files. * Edges = inclusion of files into parent folder. * Names in the same folder are unique. # Specifying (Absolute) Paths * The slash symbol / stands for inclusion. * / identifies the root folder. * /laura identifies the folder laura inside myroot. * /laura/Note.txt identifies the file Note.txt inside folder laura. # Relative Paths * You can specify a relative path by giving the "directions" from one resource to another. * E.g., The relative path from Index.html to Me.jpg is ../photos/Me.jpg. * Symbol .. means enclosing folder.