Introduction to HTML Marco Maratea Sistemi Operativi e Reti di Calcolatori 2015/16 1 Organization of a text Sequential reading pag1 pag6 pag7

pag4 pag5 pag2 2 pag3 Organization of an hypertext Reading through associative connection Modes (pages) link 3

Hypertext: terminology browser: application for surfing the network page: single sheet of an hypertext home-page: entry point of a Web site 4 hotspot, hotword: part of a page that, if

selected, it allows to reach another point in the hypertext or a new resource Hypertext: terminology 5 FAQ: Frequently Asked Question on a give topic portal: web site that offers resources and services, it is generally an entry point towards other sites

Search engine: web site that allows to retrieve other sites (Google of course. Other examples?) forum: I think you should well know what it is, you Aulaweb users! ;-) Client-server As remarked, WWW uses the client-server model. Thus, there is:

6 the client (browser), running on user machine the server, running on a service provider (provider) the network The server receives a request for a page and it provides back an HTML document that the browser parses amd visualizes to the user Markup Languages

7 In a document, the markup is the code that keeps information on the document formatting. Markup languages In the field of text editing, tools have been implemented in order to automate some operation on the building of documents. There exist two kinds of editors:

8 WYSIWYG editors. Editors that uses markup. Markup languages In editors that use markup, a text is composed by two parts:

9 The real content The instructions that indicate how the real content should be represented (formatted). In general, the text is enclosed in proper instruction called tags (or labels) Tags are written using common characters, thus documents with markup can be written through a simple a text editor. Word files (.doc) 10 Word files (.doc)

11 Internal format of a Word file. It is a binary file, and no markup tags are distinguished. Rich Text Format files (.rtf) 12 RTF is a text-only format where information (tag) regarding formatting are recognizable. PostScript files (.ps)

It is a format used for printing. Also in this case, tags are recognizable. 13 HTML 14 Web hypertexts are written using the HyperText Markup Language (HTML) HTML is not a programming language !!! HTML is a markup language that allow to describe the position of all the elements

in a Web page. HTML 15 HTML documents are text-only files (ASCII coding) with, of course, tagging (like RTF, PS). They have .htm or .html extension. Browsers parse and visualize them by sequentially interpreting the the formatting specification

HTML: syntax data 17 An HTML file always starts with the tag and, thus, it ends with HTML: syntax characteristics of the document

document 18 HTML: 19 The title of the document

HTML: properties 20 HTML: properties example

bgcolor="red" bgcolor="yellow predefined color bgcolor="#00ffff" text="#eeeeee" link="#ffffff" background="images/mybg.gif"

21 HTML: RGB 22 Each color can be codified using a triple of value representing the amount of RED, GREEN, and BLUE. Thus, each value is an integer between 0 and 255. Each value has to be translated in hex

format (base 16). Through this code it is possible to represent up to 16,7 millions of colors (i.e. all possible combination of the three colors = 2563) HTML: RGB 23 Color Decimal coding BLACK 0 0

BLUE 0 0 GREEN 0 RED 255 WHITE Hex coding

0 #000000 255 #0000ff 0 #00ff00 0 0 #ff0000

255 255 255 255 #ffffff HTML: how to retrieve color codes? 24 HTML: how to retrieve color codes? 25

HTML: headings The document in the is visualized following the formatting directives. Headings can be written using tags, where X is an integer value from 1 to 6. Lower is the number, higher is the resulting font.





to begin a new paragraph. HTML: an example 27 A document draft

A very important heading

A less important headings

Hello world hello world hello world hello world

Hello world hello world hello world hello HTML: an example

28 HTML: font Font format:

29 bold italic

emphasized programming code very bold texttexttext ... ... HTML: alignment 30

test to center
HTML: lists