PROGETTAZIONE E MANAGEMENT DEL MULTIMEDIA PER LA COMUNICAZIONE XVIII - PowerPoint PPT Presentation

PROGETTAZIONE E MANAGEMENT DEL MULTIMEDIA PER LA COMUNICAZIONE XVIII EDIZIONE – 2014/2015 LINGUAGGI DI MARKUP HTML cristina gena dipartimento di informatica cgena@di.unito.it http://www.di.unito.it/~cgena/ materiale e info sul corso http://www.di.unito.it/~cgena/teaching.html Fonte delle slides http://www.w3schools.com/html/default.asp

HTML COMMENTS • Comment tags <!-- and --> are used to insert comments in HTML. Example <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Remember to add more information here —> • Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: Example <!-- Do not display this at the moment <img border="0" src="pic_mountain.jpg" alt="Mountain"> —> 2

HTML COMMENTS • Conditional Comments • You might stumble upon conditional comments in HTML: <!--[if IE 8]> .... some HTML here .... <![endif]--> • Conditional comments defines HTML tags to be executed by Internet Explorer only. 3

HTML IMAGES • HTML images are defined with the <img> tag. • The source file (src), alternative text (alt), and size (width and height) are provided as attributes: Example <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> 4

HTML IMAGE ATTRIBUTES • The alt attribute specifies an alternate text for the image, if it cannot be displayed. • The value of the alt attribute should describe the image in words: <img src="html5.gif" alt="The official HTML5 Icon"> • The alt attribute is required . A web page will not validate correctly without it. (http://validator.w3.org) • Screen readers are software programs that can read what is displayed on a screen. • Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille output. • Screen readers are used by people who are blind, visually impaired, or learning disabled. • Note: Screen readers can read the alt attribute. 5

HTML IMAGE ATTRIBUTES • Image Size - Width and Height • The values are specified in pixels (without px after the value): <img src="html5.gif" alt="HTML5 Icon" width="128" height=“128"> • You can also use the style attribute to specify the width and height of an image. • The values are specified in pixels (use px after the value): <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px"> • Both the width, the height, and the style attributes, are valid in the latest HTML5 standard. • We suggest you use the style attribute. It prevents styles sheets from changing the default size of images: 6

HTML IMAGE STORAGE • If not specified, the browser expects to find the image in the same folder as the web page. • However, it is common on the web, to store images in a sub-folder, and refer to the folder in the image name: <img src=" images /html5.gif" alt="HTML5 Icon" style="width:128px;height:128px"> • If a browser cannot find an image, it will display a broken link icon (http:// www.w3schools.com/html/tryit.asp?filename=tryhtml_images_wrong) • Some web sites store their images on image servers. • Actually, you can access images from any web address in the world: <img src="http://www.w3schools.com/images/w3schools_green.jpg"> 7

USING AN IMAGE AS A LINK • It is common to use images as links: Example <a href=“http://www.w3schools.com/html/ “> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </a> 8

IMAGE MAPS • For an image, you can create an image map, with clickable areas: Example <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map 9

HTML LINKS HTML links are defined with the <a> tag: Link Syntax: <a href="url">link text</a> Example <a href=“local.php">This is a local link</a> <a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a> 10

HTML LINKS - COLORS AND ICONS • When you move the mouse cursor over a link, two things will normally happen: • The mouse arrow will turn into a little hand • The color of the link element will change • By default, links will appear as this in all browsers: • An unvisited link is underlined and blue • A visited link is underlined and purple • An active link is underlined and red You can change the defaults, using CSS styles 11

HTML LINK PATH Examples <a href=“local.html">This is a local link</a> <a href=“php/local.html”>This is a local link</a> <a href=“../php/local.html”>This is a local link</a> 12

HTML I PATHNAME <a href=" file:///c:/wwwroot/pagine/pippo.html"> Pathname assoluto Sconsigliato! 39

Pathname HTML relativi I PATHNAME < a href =“pippo.html“> -> il file è nella stessa cartella della pagina pluto.html da cui parte il collegamento pippo.html pluto.html 40

Pathname HTML relativi I PATHNAME < a href =“cani/pippo.html“> -> il file pippo.html è nella cartella cani, contenuta a sua volta nella cartella della pagina pluto.html da cui parte il collegamento pluto.html cani pippo.html 41

Pathname HTML relativi I PATHNAME < a href =“../cani/pippo.html“> -> il file pippo.html è nella cartella cani che sta allo stesso livello della cartella che contiene la pagina pluto.html da cui parte il collegamento pluto.html cani pippo.html 42

Pathname HTML relativi I PATHNAME < a href =“../../cani/pippo.html“>-> il file pippo.html è nella cartella cani che sta ad un livello superiore rispetto alla cartella che contiene la pagina pluto.html da cui parte il collegamento pluto.html cani pippo.html 43

IMAGE PATHS <img src="html5.gif" alt="HTML5 Icon" style=“width:128px;height: 128px"> <img src=“ images /html5.gif” alt="HTML5 Icon" style=“width: 128px;height:128px"> <img src=“../ images /html5.gif” alt="HTML5 Icon" style=“width: 128px;height:128px"> <img src="/ images /html5.gif" alt="HTML5 Icon" style=“width: 128px;height:128px"> —> MAIN ROOT

HTML LINKS - THE TARGET ATTRIBUTE • The target attribute specifies where to open the linked document. • This example will open the linked document in a new browser window or in a new tab : Example <a href="http://www.w3schools.com/" target=" _blank ">Visit W3Schools!</a> 19

HTML LINKS - THE ID ATTRIBUTE • The id attribute can be used to create bookmarks inside HTML documents. • Bookmarks are not displayed in any special way. They are invisible to the reader. • Add an id attribute to any <a> element: <a id="tips" >Useful Tips Section</a> • Then create a link to the <a> element (Useful Tips Section): <a href=" #tips ">Visit the Useful Tips Section</a> • Or, create a link to the <a> element (Useful Tips Section) from another page: <a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a> Example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark 20

HTML TABLES < table style="width:100%"> < tr > <td>Jill</td> <td>Smith</td> http://www.di.unito.it/~cgena/aim/ <td>50</td> </ tr > < tr > <td>Eve</td> <td>Jackson</td> <td>94</td> </ tr > </ table >

HTML TABLES • Tables are defined with the < table > tag. • Tables are divided into table rows with the < tr > tag. • Table rows are divided into table data with the < td > tag. • A table row can also be divided into table headings with the < th > tag. • Note : Table data <td> are the data containers of the table.They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

AN HTML TABLE WITH A BORDER ATTRIBUTE < table style=“width:100%; height: 20%” border=“1”> < tr > <td>Jill</td> <td>Smith</td> <td>50</td> </ tr > Note The border attribute is on its way out of the < tr > HTML standard! It is better to use CSS. <td>Eve</td> To add borders, use the CSS border property: <td>Jackson</td> table, th, td { <td>94</td> border: 1px solid black; } </ tr > </ table >

HTML TABLES • An HTML Table with Collapsed Borders • If you want the borders to collapse into one border, add CSS border-collapse: table, th, td { border: 1px solid black; border-collapse: collapse; }