HTML - Guida rapida
HTML sta per Hypertext Markup Language, ed è il linguaggio più utilizzato per scrivere pagine web.
Hypertextsi riferisce al modo in cui le pagine Web (documenti HTML) sono collegate tra loro. Pertanto, il collegamento disponibile su una pagina Web è chiamato ipertesto.
Come suggerisce il nome, HTML è un file Markup Language il che significa che si utilizza HTML per "marcare" semplicemente un documento di testo con tag che indicano a un browser Web come strutturarlo per visualizzarlo.
In origine, l'HTML è stato sviluppato con l'intento di definire la struttura di documenti come intestazioni, paragrafi, elenchi e così via per facilitare la condivisione di informazioni scientifiche tra i ricercatori.
Ora, l'HTML è ampiamente utilizzato per formattare le pagine web con l'aiuto di diversi tag disponibili nel linguaggio HTML.
Documento HTML di base
Nella sua forma più semplice, di seguito è riportato un esempio di un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>Tag HTML
Come detto in precedenza, l'HTML è un linguaggio di markup e fa uso di vari tag per formattare il contenuto. Questi tag sono racchiusi tra parentesi graffe angolari<Tag Name>. Tranne pochi tag, la maggior parte dei tag ha i tag di chiusura corrispondenti. Per esempio,<html> ha il suo tag di chiusura </html> e <body> tag ha il suo tag di chiusura </body> tag ecc.
L'esempio sopra del documento HTML utilizza i seguenti tag:
| Suor n | Tag e descrizione |
|---|---|
| 1 | <!DOCTYPE...> Questo tag definisce il tipo di documento e la versione HTML. |
| 2 | <html> Questo tag racchiude il documento HTML completo e comprende principalmente l'intestazione del documento che è rappresentata da <head> ... </head> e il corpo del documento che è rappresentato dai tag <body> ... </body>. |
| 3 | <head> Questo tag rappresenta l'intestazione del documento che può mantenere altri tag HTML come <title>, <link> ecc. |
| 4 | <title> Il tag <title> viene utilizzato all'interno del tag <head> per menzionare il titolo del documento. |
| 5 | <body> Questo tag rappresenta il corpo del documento che mantiene altri tag HTML come <h1>, <div>, <p> ecc. |
| 6 | <h1> Questo tag rappresenta l'intestazione. |
| 7 | <p> Questo tag rappresenta un paragrafo. |
Per imparare l'HTML, dovrai studiare vari tag e capire come si comportano, durante la formattazione di un documento di testo. L'apprendimento dell'HTML è semplice in quanto gli utenti devono imparare l'uso di tag diversi per formattare il testo o le immagini per creare una bella pagina web.
Il World Wide Web Consortium (W3C) consiglia di utilizzare tag minuscoli a partire da HTML 4.
Struttura del documento HTML
Un tipico documento HTML avrà la seguente struttura:
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Studieremo tutti i tag di intestazione e di corpo nei capitoli successivi, ma per ora vediamo cos'è il tag di dichiarazione del documento.
La dichiarazione <! DOCTYPE>
Il tag di dichiarazione <! DOCTYPE> viene utilizzato dal browser Web per comprendere la versione dell'HTML utilizzato nel documento. La versione corrente di HTML è la 5 e utilizza la seguente dichiarazione:
<!DOCTYPE html>Esistono molti altri tipi di dichiarazioni che possono essere utilizzati nel documento HTML a seconda della versione di HTML utilizzata. Vedremo maggiori dettagli su questo mentre discuteremo del tag <! DOCTYPE ...> insieme ad altri tag HTML.
Tag di intestazione
Qualsiasi documento inizia con un'intestazione. Puoi utilizzare dimensioni diverse per le intestazioni. L'HTML ha anche sei livelli di intestazioni, che utilizzano gli elementi<h1>, <h2>, <h3>, <h4>, <h5>, e <h6>. Durante la visualizzazione di qualsiasi intestazione, il browser aggiunge una riga prima e una riga dopo tale intestazione.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Questo produrrà il seguente risultato:
Tag paragrafo
Il <p>tag offre un modo per strutturare il testo in diversi paragrafi. Ogni paragrafo di testo deve essere compreso tra un tag di apertura <p> e un tag di chiusura </p> come mostrato di seguito nell'esempio:
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Questo produrrà il seguente risultato:
Tag di interruzione di riga
Ogni volta che usi il file <br />elemento, tutto ciò che lo segue inizia dalla riga successiva. Questo tag è un esempio diempty elemento, in cui non è necessario aprire e chiudere i tag, poiché non c'è nulla da inserire tra di loro.
Il tag <br /> ha uno spazio tra i caratteri bre il taglio in avanti. Se ometti questo spazio, i browser più vecchi avranno problemi a rendere l'interruzione di riga, mentre se perdi il carattere barra e usi solo <br> non è valido in XHTML.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Questo produrrà il seguente risultato:
Centrare il contenuto
Puoi usare <center> tag per mettere qualsiasi contenuto al centro della pagina o in qualsiasi cella della tabella.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Questo produrrà il seguente risultato:
Linee orizzontali
Le linee orizzontali vengono utilizzate per suddividere visivamente le sezioni di un documento. Il<hr> tag crea una riga dalla posizione corrente nel documento al margine destro e interrompe la riga di conseguenza.
Ad esempio, potresti voler inserire una riga tra due paragrafi come nell'esempio riportato di seguito:
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Questo produrrà il seguente risultato:
Ancora <hr /> tag è un esempio di empty elemento, in cui non è necessario aprire e chiudere i tag, poiché non c'è nulla da inserire tra di loro.
Il <hr /> l'elemento ha uno spazio tra i caratteri hre il taglio in avanti. Se ometti questo spazio, i browser meno recenti avranno problemi a rendere la linea orizzontale, mentre se perdi il carattere barra in avanti e usi semplicemente<hr> non è valido in XHTML
Mantieni formattazione
A volte, vuoi che il tuo testo segua il formato esatto di come è scritto nel documento HTML. In questi casi, puoi utilizzare il tag preformattato<pre>.
Qualsiasi testo tra l'apertura <pre> tag e la chiusura </pre> Il tag preserverà la formattazione del documento di origine.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Questo produrrà il seguente risultato:
Prova a utilizzare lo stesso codice senza tenerlo all'interno <pre>...</pre> tag
Spazi unificatori
Supponi di voler usare la frase "12 Angry Men". In questo caso, non vorresti che un browser divida "12, Arrabbiato" e "Uomini" su due righe:
An example of this technique appears in the movie "12 Angry Men."Nei casi in cui non si desidera che il browser client interrompa il testo, è necessario utilizzare un'entità spazio unificatore invece di uno spazio normale. Ad esempio, quando codifichi i "12 uomini arrabbiati" in un paragrafo, dovresti usare qualcosa di simile al codice seguente:
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Questo produrrà il seguente risultato:
Un HTML elementè definito da un tag iniziale. Se l'elemento contiene altro contenuto, termina con un tag di chiusura, dove il nome dell'elemento è preceduto da una barra come mostrato di seguito con pochi tag -
| Inizia tag | Soddisfare | Fine tag |
|---|---|---|
| <p> | Questo è il contenuto del paragrafo. | </p> |
| <h1> | Questo è il contenuto dell'intestazione. | </h1> |
| <div> | This is division content. | </div> |
| <br /> |
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.
HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML element −
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>This will display the following result −
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value
The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>This will display the following result −
Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are −
- Id
- Title
- Class
- Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −
If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph elements as shown below.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>The title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>This will produce the following result −
Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.
The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example −
class = "className1 className2 className3"The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>This will produce the following result −
At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS. Here, you need to understand what are HTML attributes and how they can be used while formatting content.
Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
- dir
- lang
- xml:lang
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −
| Value | Meaning |
|---|---|
| ltr | Left to right (the default value) |
| rtl | Right to left (for languages such as Hebrew or Arabic that are read right to left) |
Example
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>This will produce the following result −
When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.
Example
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>This will produce the following result −
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Generic Attributes
Here's a table of some other attributes that are readily usable with many of the HTML tags.
| Attribute | Options | Function |
|---|---|---|
| align | right, left, center | Horizontally aligns tags |
| valign | top, middle, bottom | Vertically aligns tags within an HTML element. |
| bgcolor | numeric, hexidecimal, RGB values | Places a background color behind an element |
| background | URL | Places a background image behind an element |
| id | User Defined | Names an element for use with Cascading Style Sheets. |
| class | User Defined | Classifies an element for use with Cascading Style Sheets. |
| width | Numeric Value | Specifies the width of tables, images, or table cells. |
| height | Numeric Value | Specifies the height of tables, images, or table cells. |
| title | User Defined | "Pop-up" title of the elements. |
We will see related examples as we will proceed to study other HTML tags. For a complete list of HTML Tags and related attributes please check reference to HTML Tags List.
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>This will produce the following result −
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>This will produce the following result −
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>This will produce the following result −
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>This will produce the following result −
Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>This will produce the following result −
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>This will produce the following result −
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>This will produce the following result −
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>This will produce the following result −
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>This will produce the following result −
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>This will produce the following result −
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>This will produce the following result −
Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>This will produce the following result −
The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows.
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>This will produce the following result −
These tags are commonly used with CSS to allow you to attach a style to a section of a page.
The phrase tags have been desicolgned for specific purposes, though they are displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>, you have seen in previous chapter. This chapter will take you through all the important phrase tags, so let's start seeing them one by one.
Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>This will produce the following result −
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
Example
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>This will produce the following result −
Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>This will produce the following result −
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must contain this full description and nothing else.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>This will produce the following result −
Acronym Element
The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.
At present, the major browsers do not change the appearance of the content of the <acronym> element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>This will produce the following result −
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>This will produce the following result −
Special Terms
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term. It's usage is similar to italic words in the midst of a paragraph.
Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn> element in an italic font.
Example
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>This will produce the following result −
Quoting Text
When you want to quote a passage from another source, you should put it in between <blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.
Example
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>This will produce the following result −
Short Quotations
The <q>...</q> element is used when you want to add a double quote within a sentence.
Example
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>This will produce the following result −
Text Citations
If you are quoting a text, you can indicate the source placing it between an opening <cite> tag and closing </cite> tag
As you would expect in a print publication, the content of the <cite> element is rendered in italicized text by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>This will produce the following result −
Computer Code
Any programming code to appear on a Web page should be placed inside <code>...</code> tags. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.
Example
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>This will produce the following result −
Keyboard Text
When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>...</kbd> element to indicate what should be typed in, as in this example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>This will produce the following result −
Programming Variables
This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element is a variable.
Example
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>This will produce the following result −
Program Output
The <samp>...</samp> element indicates sample output from a program, and script etc. Again, it is mainly used when documenting programming or coding concepts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>This will produce the following result −
Address Text
The <address>...</address> element is used to contain any address.
Example
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>This will produce the following result −
HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
You can include one or more meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes −
| Sr.No | Attribute & Description |
|---|---|
| 1 | Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc. |
| 2 | content Specifies the property's value. |
| 3 | scheme Specifies a scheme to interpret the property's value (as declared in the content attribute). |
| 4 | http-equiv Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie. |
Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose.
Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as important keywords about the document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>This will produce the following result −
Document Description
You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Document Revision Date
You can use <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Document Refreshing
A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.
Example
If you want your page keep refreshing after every 5 seconds then use the following syntax.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.
Example
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor.
Example
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.
Note − You can check PHP and Cookies tutorial for a complete detail on Cookies.
Setting Author Name
You can set an author name in a web page using meta tag. See an example below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Specificare il set di caratteri
Puoi utilizzare il tag <meta> per specificare il set di caratteri utilizzato all'interno della pagina web.
Esempio
Per impostazione predefinita, i server Web ei browser Web utilizzano la codifica ISO-8859-1 (Latin1) per elaborare le pagine Web. Di seguito è riportato un esempio per impostare la codifica UTF-8:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Per offrire la pagina statica con caratteri cinesi tradizionali, la pagina web deve contenere un tag <meta> per impostare la codifica Big5 -
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Il commento è un pezzo di codice che viene ignorato da qualsiasi browser web. È una buona pratica aggiungere commenti nel codice HTML, specialmente in documenti complessi, per indicare sezioni di un documento e qualsiasi altra nota a chiunque guardi il codice. I commenti aiutano te e gli altri a capire il tuo codice e ne aumentano la leggibilità.
I commenti HTML vengono inseriti nel mezzo <!-- ... -->tag. Quindi, qualsiasi contenuto inserito con i tag <! - ... -> sarà trattato come commento e sarà completamente ignorato dal browser.
Esempio
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>Ciò produrrà il seguente risultato senza visualizzare il contenuto fornito come parte dei commenti:
Commenti validi e non validi
I commenti non si annidano, il che significa che un commento non può essere inserito in un altro commento. Secondo, la sequenza di due trattini "-" potrebbe non apparire all'interno di un commento tranne che come parte del tag di chiusura ->. È inoltre necessario assicurarsi che non vi siano spazi nella stringa di inizio commento.
Esempio
Qui, il commento fornito è un commento valido e verrà cancellato dal browser.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Questo produrrà il seguente risultato:
Tuttavia, la riga seguente non è un commento valido e verrà visualizzata dal browser. Questo perché c'è uno spazio tra la parentesi angolare sinistra e il punto esclamativo.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Questo produrrà il seguente risultato:
Commenti su più righe
Finora abbiamo visto commenti su una sola riga, ma HTML supporta anche commenti su più righe.
È possibile commentare più righe con il tag di inizio speciale <! - e il tag di fine -> posto prima della prima riga e alla fine dell'ultima riga come mostrato nell'esempio riportato di seguito.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>Questo produrrà il seguente risultato:
Commenti condizionali
I commenti condizionali funzionano solo in Internet Explorer (IE) su Windows, ma vengono ignorati da altri browser. Sono supportati da Explorer 5 in poi e puoi usarli per fornire istruzioni condizionali a diverse versioni di IE.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>Ti imbatterai in una situazione in cui dovrai applicare un foglio di stile diverso basato su diverse versioni di Internet Explorer, in tale situazione i commenti condizionali saranno utili.
Utilizzo del tag di commento
Ci sono pochi browser che supportano il tag <comment> per commentare una parte del codice HTML.
Note- Il tag <comment> obsoleto in HTML5. Non utilizzare questo elemento.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>Se stai usando IE, produrrà il seguente risultato:
Ma se non stai usando IE, produrrà il seguente risultato:
Commentare il codice dello script
Anche se imparerai JavaScript con HTML, in un tutorial separato, ma qui devi prendere nota che se stai usando Java Script o VB Script nel tuo codice HTML, si consiglia di inserire quel codice script all'interno di commenti HTML appropriati in modo che il vecchio i browser possono funzionare correttamente.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>Questo produrrà il seguente risultato:
Inserimento di commenti nei fogli di stile
Anche se imparerai a usare i fogli di stile con HTML in un tutorial separato, ma qui devi prendere nota che se stai usando Cascading Style Sheet (CSS) nel tuo codice HTML, allora si consiglia di inserire quel codice del foglio di stile all'interno dei commenti HTML appropriati in modo che i vecchi browser possano funzionare correttamente.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>Questo produrrà il seguente risultato:
Le immagini sono molto importanti per abbellire e rappresentare molti concetti complessi in modo semplice sulla tua pagina web. Questo tutorial ti guiderà attraverso semplici passaggi per utilizzare le immagini nelle tue pagine web.
Inserisci immagine
Puoi inserire qualsiasi immagine nella tua pagina web usando <img>etichetta. Di seguito è riportata la semplice sintassi per utilizzare questo tag.
<img src = "Image URL" ... attributes-list/>Il tag <img> è un tag vuoto, il che significa che può contenere solo un elenco di attributi e non ha tag di chiusura.
Esempio
Per provare il seguente esempio, manteniamo il nostro file HTML test.htm e il file immagine test.png nella stessa directory -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Questo produrrà il seguente risultato:
Puoi utilizzare file di immagine PNG, JPEG o GIF in base alle tue esigenze, ma assicurati di specificare il nome del file immagine corretto in srcattributo. Il nome dell'immagine fa sempre distinzione tra maiuscole e minuscole.
Il alt attributo è un attributo obbligatorio che specifica un testo alternativo per un'immagine, se l'immagine non può essere visualizzata.
Imposta posizione immagine
Di solito manteniamo tutte le immagini in una directory separata. Quindi teniamo il file HTML test.htm nella nostra home directory e creiamo una sottodirectoryimages all'interno della home directory dove manterremo la nostra immagine test.png.
Esempio
Supponendo che la posizione della nostra immagine sia "image / test.png", prova il seguente esempio:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Questo produrrà il seguente risultato:
Imposta larghezza / altezza immagine
È possibile impostare la larghezza e l'altezza dell'immagine in base alle proprie esigenze utilizzando width e heightattributi. È possibile specificare larghezza e altezza dell'immagine in termini di pixel o percentuale della sua dimensione effettiva.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Questo produrrà il seguente risultato:
Imposta bordo immagine
Per impostazione predefinita, l'immagine avrà un bordo attorno ad essa, puoi specificare lo spessore del bordo in termini di pixel usando l'attributo border. Uno spessore di 0 significa, nessun bordo intorno all'immagine.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Questo produrrà il seguente risultato:
Imposta allineamento immagine
Per impostazione predefinita, l'immagine verrà allineata sul lato sinistro della pagina, ma puoi usare align attributo per impostarlo al centro oa destra.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Questo produrrà il seguente risultato:
Grafica Web gratuita
Per la grafica web gratuita, inclusi i modelli, puoi esaminare la grafica web gratuita
Le tabelle HTML consentono agli autori web di organizzare dati come testo, immagini, collegamenti, altre tabelle, ecc. In righe e colonne di celle.
Le tabelle HTML vengono create utilizzando il <table> tag in cui il <tr> tag viene utilizzato per creare righe di tabella e <td>tag viene utilizzato per creare celle di dati. Gli elementi sotto <td> sono regolari e allineati a sinistra per impostazione predefinita
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Qui, il borderè un attributo del tag <table> e viene utilizzato per mettere un bordo su tutte le celle. Se non hai bisogno di un bordo, puoi usare border = "0".
Intestazione della tabella
L'intestazione della tabella può essere definita utilizzando <th>etichetta. Questo tag verrà inserito per sostituire il tag <td>, che viene utilizzato per rappresentare la cella di dati effettiva. Normalmente inserirai la riga superiore come intestazione della tabella come mostrato di seguito, altrimenti puoi utilizzare l'elemento <th> in qualsiasi riga. Le intestazioni, definite nel tag <th>, sono centrate e in grassetto per impostazione predefinita.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Attributi di cellpadding e cellspacing
Ci sono due attributi chiamati cellpadding e cellspacing che userete per regolare lo spazio bianco nelle celle della tabella. L'attributo cellspacing definisce lo spazio tra le celle della tabella, mentre il cellpadding rappresenta la distanza tra i bordi delle celle e il contenuto all'interno di una cella.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Attributi Colspan e Rowspan
Userai colspanattributo se vuoi unire due o più colonne in una singola colonna. In modo simile utilizzerairowspan se vuoi unire due o più righe.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Sfondi di tabelle
Puoi impostare lo sfondo della tabella utilizzando uno dei seguenti due modi:
bgcolor attributo: puoi impostare il colore di sfondo per l'intera tabella o solo per una cella.
background attributo: puoi impostare l'immagine di sfondo per l'intera tabella o solo per una cella.
Puoi anche impostare il colore del bordo usando bordercolor attributo.
Note- Gli attributi bgcolor , background e bordercolor sono obsoleti in HTML5. Non utilizzare questi attributi.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Ecco un esempio di utilizzo di backgroundattributo. Qui useremo un'immagine disponibile nella directory / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato. L'immagine di sfondo qui non si applicava all'intestazione della tabella.
Altezza e larghezza del tavolo
È possibile impostare la larghezza e l'altezza della tabella utilizzando width e heightattributi. È possibile specificare la larghezza o l'altezza della tabella in termini di pixel o in termini di percentuale dell'area disponibile dello schermo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Didascalia
Il captionil tag servirà come titolo o spiegazione per la tabella e verrà visualizzato nella parte superiore della tabella. Questo tag è obsoleto nella versione più recente di HTML / XHTML.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Intestazione, corpo e piè di pagina della tabella
Le tabelle possono essere divise in tre parti: un'intestazione, un corpo e un piede. La testa e il piede sono piuttosto simili alle intestazioni e ai piè di pagina in un documento elaborato di testo che rimangono gli stessi per ogni pagina, mentre il corpo è il principale titolare del contenuto della tabella.
I tre elementi per separare la testa, il corpo e i piedi di un tavolo sono:
<thead> - per creare un'intestazione di tabella separata.
<tbody> - per indicare il corpo principale della tabella.
<tfoot> - per creare un piè di pagina di tabella separato.
Una tabella può contenere diversi elementi <tbody> per indicare pagine o gruppi di dati differenti . Ma è da notare che i tag <thead> e <tfoot> dovrebbero apparire prima di <tbody>
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Tabelle annidate
Puoi usare una tabella all'interno di un'altra tabella. Non solo le tabelle puoi usare quasi tutti i tag all'interno del tag di dati della tabella <td>.
Esempio
Di seguito è riportato l'esempio dell'utilizzo di un'altra tabella e altri tag all'interno di una cella di tabella.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
L'HTML offre agli autori web tre modi per specificare elenchi di informazioni. Tutti gli elenchi devono contenere uno o più elementi di elenco. Gli elenchi possono contenere:
<ul>- Un elenco non ordinato. Questo elencherà gli elementi usando semplici proiettili.
<ol>- Un elenco ordinato. Questo utilizzerà diversi schemi di numeri per elencare i tuoi articoli.
<dl>- Un elenco di definizioni. Questo organizza i tuoi elementi nello stesso modo in cui sono disposti in un dizionario.
Elenchi HTML non ordinati
Un elenco non ordinato è una raccolta di elementi correlati che non hanno un ordine o una sequenza speciale. Questo elenco viene creato utilizzando HTML<ul>etichetta. Ogni elemento nell'elenco è contrassegnato da un punto elenco.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Questo produrrà il seguente risultato:
Il tipo Attribute
Puoi usare typeattributo per il tag <ul> per specificare il tipo di punto che ti piace. Per impostazione predefinita, è un disco. Di seguito sono riportate le possibili opzioni:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Questo produrrà il seguente risultato:
Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Questo produrrà il seguente risultato:
Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Questo produrrà il seguente risultato:
Elenchi ordinati HTML
Se ti viene richiesto di inserire i tuoi articoli in un elenco numerato invece che puntato, verrà utilizzato un elenco ordinato HTML. Questo elenco viene creato utilizzando<ol>etichetta. La numerazione inizia da uno e viene incrementata di uno per ogni successivo elemento dell'elenco ordinato contrassegnato con <li>.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Questo produrrà il seguente risultato:
Il tipo Attribute
Puoi usare typeattributo per il tag <ol> per specificare il tipo di numerazione che ti piace. Per impostazione predefinita, è un numero. Di seguito sono riportate le possibili opzioni:
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Questo produrrà il seguente risultato:
Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Questo produrrà il seguente risultato:
Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Questo produrrà il seguente risultato:
Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Questo produrrà il seguente risultato:
Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Questo produrrà il seguente risultato:
L'attributo iniziale
Puoi usare startattributo per il tag <ol> per specificare il punto di partenza della numerazione di cui hai bisogno. Di seguito sono riportate le possibili opzioni:
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Esempio
Di seguito è riportato un esempio in cui abbiamo utilizzato <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Questo produrrà il seguente risultato:
Elenchi di definizioni HTML
HTML e XHTML supportano uno stile di elenco che viene chiamato definition listsdove le voci sono elencate come in un dizionario o in un'enciclopedia. L'elenco delle definizioni è il modo ideale per presentare un glossario, un elenco di termini o un altro elenco di nomi / valori.
L'elenco delle definizioni utilizza i seguenti tre tag.
- <dl> - Definisce l'inizio della lista
- <dt> - Un termine
- <dd> - Definizione del termine
- </dl> - Definisce la fine dell'elenco
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Questo produrrà il seguente risultato:
Una pagina Web può contenere vari collegamenti che portano direttamente ad altre pagine e persino a parti specifiche di una determinata pagina. Questi collegamenti sono noti come collegamenti ipertestuali.
I collegamenti ipertestuali consentono ai visitatori di navigare tra i siti Web facendo clic su parole, frasi e immagini. In questo modo è possibile creare collegamenti ipertestuali utilizzando testo o immagini disponibili su una pagina Web.
Note- Ti consiglio di seguire un breve tutorial sulla comprensione dell'URL
Collegamento di documenti
Un collegamento viene specificato utilizzando il tag HTML <a>. Questo tag è chiamatoanchor tage qualsiasi elemento compreso tra il tag di apertura <a> e il tag di chiusura </a> diventa parte del collegamento e un utente può fare clic su quella parte per accedere al documento collegato. Di seguito è riportata la semplice sintassi per utilizzare il tag <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Esempio
Proviamo a seguire l'esempio che collega http://www.tutorialspoint.com alla tua pagina -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>Questo produrrà il seguente risultato, dove potrai cliccare sul link generato per raggiungere la home page di Tutorials Point (in questo esempio).
L'attributo di destinazione
Abbiamo usato targetattributo nel nostro esempio precedente. Questo attributo viene utilizzato per specificare la posizione in cui viene aperto il documento collegato. Di seguito sono riportate le possibili opzioni:
| Suor n | Opzione e descrizione |
|---|---|
| 1 | _blank Apre il documento collegato in una nuova finestra o scheda. |
| 2 | _self Apre il documento collegato nello stesso frame. |
| 3 | _parent Apre il documento collegato nel frame principale. |
| 4 | _top Apre il documento collegato in tutto il corpo della finestra. |
| 5 | targetframe Apre il documento collegato in un frame di destinazione denominato . |
Esempio
Prova a seguire l'esempio per comprendere la differenza fondamentale nelle poche opzioni fornite per l'attributo target.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>Ciò produrrà il seguente risultato, in cui è possibile fare clic su diversi collegamenti per comprendere la differenza tra le varie opzioni fornite per l'attributo di destinazione.
Uso del percorso di base
Quando si collegano documenti HTML relativi allo stesso sito Web, non è necessario fornire un URL completo per ogni collegamento. Puoi sbarazzartene se usi<base>tag nell'intestazione del documento HTML. Questo tag viene utilizzato per fornire un percorso di base per tutti i collegamenti. Quindi il tuo browser concatenerà il percorso relativo dato a questo percorso di base e creerà un URL completo.
Esempio
L'esempio seguente utilizza il tag <base> per specificare l'URL di base e successivamente possiamo utilizzare il percorso relativo a tutti i collegamenti invece di fornire l'URL completo per ogni collegamento.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
</html>Questo produrrà il seguente risultato, dove è possibile fare clic sul collegamento generato HTML Tutorial per accedere al tutorial HTML.
Ora dato l'URL <a href = "/html/index.htm" viene considerato come <ahref = "http://www.tutorialspoint.com/html/index.htm"
Collegamento a una sezione di pagina
È possibile creare un collegamento a una particolare sezione di una determinata pagina Web utilizzando nameattributo. Questo è un processo in due fasi.
Note- L' attributo name è obsoleto in HTML5. Non utilizzare questo attributo. Utilizza invece l'attributo id e title .
Per prima cosa crea un collegamento al luogo in cui desideri raggiungere una pagina Web e assegnagli un nome utilizzando il tag <a ...> come segue:
<h1>HTML Text Links <a name = "top"></a></h1>Il secondo passaggio consiste nel creare un collegamento ipertestuale per collegare il documento e il luogo in cui si desidera raggiungere -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Questo produrrà il seguente collegamento, dove è possibile fare clic sul collegamento generato Go to the Top per arrivare all'inizio del tutorial HTML Text Link.
Go to the TopImpostazione dei colori dei collegamenti
È possibile impostare i colori dei collegamenti, dei collegamenti attivi e dei collegamenti visitati utilizzando link, alink e vlink attributi del tag <body>.
Esempio
Salvare quanto segue in test.htm e aprirlo in qualsiasi browser web per vedere come link, alink e vlink gli attributi funzionano.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>Questo produrrà il seguente risultato. Basta controllare il colore del collegamento prima di fare clic su di esso, quindi controllare il suo colore quando lo si attiva e quando il collegamento è stato visitato.
Link per il download
È possibile creare un collegamento di testo per rendere scaricabili i file PDF o DOC o ZIP. Questo è molto semplice; devi solo fornire l'URL completo del file scaricabile come segue -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Questo produrrà il seguente collegamento e verrà utilizzato per scaricare un file.
Finestra di dialogo Download file
A volte si desidera fornire un'opzione in cui un utente farà clic su un collegamento e verrà visualizzata una finestra "Download file" per l'utente invece di visualizzare il contenuto effettivo. Questo è molto semplice e può essere ottenuto utilizzando un'intestazione HTTP nella risposta HTTP.
Ad esempio, se vuoi creare un file Filename file scaricabile da un dato collegamento quindi la sua sintassi sarà la seguente.
#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){ print("$buffer");
}Note- Per maggiori dettagli sui programmi PERL CGI, segui il tutorial PERL e CGI .
Abbiamo visto come creare collegamenti ipertestuali utilizzando il testo e abbiamo anche imparato come utilizzare le immagini nelle nostre pagine web. Ora impareremo come utilizzare le immagini per creare collegamenti ipertestuali.
Esempio
È semplice usare un'immagine come collegamento ipertestuale. Abbiamo solo bisogno di usare un'immagine all'interno del collegamento ipertestuale al posto del testo come mostrato di seguito -
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Questo produrrà il seguente risultato, in cui è possibile fare clic sulle immagini per raggiungere la home page di Tutorials Point.
Questo era il modo più semplice per creare collegamenti ipertestuali utilizzando immagini. Successivamente vedremo come creare collegamenti di immagini sensibili al mouse.
Immagini sensibili al mouse
Gli standard HTML e XHTML forniscono una funzionalità che consente di incorporare molti collegamenti diversi all'interno di una singola immagine. È possibile creare diversi collegamenti sulla singola immagine in base alle diverse coordinate disponibili sull'immagine. Una volta che diversi collegamenti sono collegati a diverse coordinate, possiamo fare clic su diverse parti dell'immagine per aprire i documenti di destinazione. Tali immagini sensibili al mouse sono note come mappe immagine.
Esistono due modi per creare mappe immagine:
Server-side image maps - Questo è abilitato da ismap attributo del tag <img> e richiede l'accesso a un server e alle applicazioni di elaborazione delle mappe di immagini correlate.
Client-side image maps - Questo viene creato con il usemap attributo del tag <img>, insieme ai corrispondenti tag <map> e <area>.
Mappe di immagini lato server
Qui metti semplicemente la tua immagine all'interno di un collegamento ipertestuale e usa ismapattributo che la rende un'immagine speciale e quando l'utente fa clic su un punto all'interno dell'immagine, il browser passa le coordinate del puntatore del mouse insieme all'URL specificato nel tag <a> al server web. Il server utilizza le coordinate del puntatore del mouse per determinare quale documento restituire al browser.
Quando viene utilizzato ismap , l'attributo href del tag <a> che lo contiene deve contenere l'URL di un'applicazione server come uno script cgi o PHP ecc. Per elaborare la richiesta in entrata in base alle coordinate passate.
Le coordinate della posizione del mouse sono i pixel dello schermo contati dall'angolo superiore sinistro dell'immagine, a partire da (0,0). Le coordinate, precedute da un punto interrogativo, vengono aggiunte alla fine dell'URL.
Ad esempio, se un utente fa clic su 20 pixel sopra e 30 pixel verso il basso dall'angolo in alto a sinistra dell'immagine seguente:
Che è stato generato dal seguente snippet di codice:
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Quindi il browser invia i seguenti parametri di ricerca al server web che può essere elaborato da ismap.cgi script o map file e puoi collegare tutti i documenti che ti piacciono a queste coordinate -
/cgi-bin/ismap.cgi?20,30In questo modo è possibile assegnare diversi collegamenti a diverse coordinate dell'immagine e quando si fa clic su tali coordinate, è possibile aprire il documento collegato corrispondente. Per saperne di piùismapattributo, puoi controllare Come usare Image ismap?
Note- Imparerai la programmazione CGI quando studierai la programmazione Perl. Puoi scrivere il tuo script per elaborare queste coordinate passate usando PHP o qualsiasi altro script. Per ora, concentriamoci sull'apprendimento dell'HTML e più tardi potrai rivisitare questa sezione.
Mappe immagine lato client
Le mappe immagine lato client sono abilitate da usemap attributo del tag <img /> e definito da speciali tag di estensione <map> e <area>.
L'immagine che andrà a formare la mappa viene inserita nella pagina usando il tag <img /> come una normale immagine, tranne che porta un attributo extra chiamato usemap. Il valore dell'attributo usemap è il valore che verrà utilizzato in un tag <map> per collegare i tag mappa e immagine. I tag <map> insieme ai tag <area> definiscono tutte le coordinate dell'immagine e i collegamenti corrispondenti.
Il tag <area> all'interno del tag della mappa, specifica la forma e le coordinate per definire i confini di ogni hotspot cliccabile disponibile sull'immagine. Ecco un esempio dalla mappa dell'immagine:
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>Questo produrrà il seguente risultato:
Sistema di coordinate
Il valore effettivo delle coordinate dipende totalmente dalla forma in questione. Ecco un riepilogo, seguito da esempi dettagliati:
rect = x1 , y1 , x2 , y2
x 1 e y 1 sono le coordinate dell'angolo superiore sinistro del rettangolo; x 2 e y 2 sono le coordinate dell'angolo inferiore destro.
circle = xc , yc , radius
x c e y c sono le coordinate del centro del cerchio e il raggio è il raggio del cerchio. Un cerchio centrato a 200,50 con un raggio di 25 avrebbe l'attributo coords = "200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
Le varie coppie xy definiscono i vertici (punti) del poligono, con una "linea" disegnata da un punto al punto successivo. Un poligono a forma di diamante con il suo punto superiore a 20,20 e 40 pixel nei suoi punti più larghi avrebbe l'attributo coords = "20,20,40,40,20,60,0,40" .
Tutte le coordinate sono relative all'angolo superiore sinistro dell'immagine (0,0). Ogni forma ha un URL correlato. È possibile utilizzare qualsiasi software di immagine per conoscere le coordinate di diverse posizioni.
Non è difficile inserire un collegamento e-mail HTML nella tua pagina web, ma può causare problemi di spam non necessari per il tuo account e-mail. Ci sono persone che possono eseguire programmi per raccogliere questi tipi di e-mail e successivamente utilizzarli per lo spam in vari modi.
Puoi avere un'altra opzione per facilitare le persone a inviarti email. Un'opzione potrebbe essere quella di utilizzare i moduli HTML per raccogliere i dati dell'utente e quindi utilizzare lo script PHP o CGI per inviare un'e-mail.
Un semplice esempio, controlla il nostro modulo di contatto . Prendiamo il feedback degli utenti utilizzando questo modulo e quindi utilizziamo un programma CGI che raccoglie queste informazioni e ci invia e-mail all'ID e-mail fornito.
Note- Imparerai a conoscere i moduli HTML nei moduli HTML e imparerai a conoscere CGI nel nostro altro tutorialPerl CGI Programming.
Tag email HTML
HTML <a>tag fornisce l'opzione per specificare un indirizzo e-mail per inviare un'e-mail. Durante l'utilizzo del tag <a> come tag di posta elettronica, utilizzeraimailto: email addressinsieme all'attributo href . Di seguito è riportata la sintassi dell'utilizzo dimailto invece di utilizzare http.
<a href = "mailto: [email protected]">Send Email</a>Questo codice genererà il seguente collegamento che puoi utilizzare per inviare e-mail.
Send EmailOra, se un utente fa clic su questo collegamento, avvia un client di posta (come Lotus Notes, Outlook Express ecc.) Installato sul computer dell'utente. Esiste un altro rischio nell'usare questa opzione per inviare e-mail perché se l'utente non ha un client di posta installato sul proprio computer, non sarebbe possibile inviare e-mail.
Impostazioni predefinite
È possibile specificare un oggetto e un corpo di posta elettronica predefiniti insieme al proprio indirizzo di posta elettronica. Di seguito è riportato l'esempio per utilizzare l'oggetto e il corpo predefiniti.
<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>Questo codice genererà il seguente collegamento che puoi utilizzare per inviare e-mail.
Send FeedbackI frame HTML vengono utilizzati per dividere la finestra del browser in più sezioni in cui ogni sezione può caricare un documento HTML separato. Una raccolta di frame nella finestra del browser è nota come set di frame. La finestra è suddivisa in frame in modo simile alle tabelle sono organizzate: in righe e colonne.
Svantaggi dei frame
Ci sono pochi inconvenienti nell'utilizzo dei frame, quindi non è mai consigliabile utilizzare i frame nelle tue pagine web:
Alcuni dispositivi più piccoli non sono in grado di gestire i frame spesso perché il loro schermo non è abbastanza grande per essere diviso.
A volte la tua pagina verrà visualizzata in modo diverso su computer diversi a causa della diversa risoluzione dello schermo.
Il pulsante Indietro del browser potrebbe non funzionare come spera l'utente.
Ci sono ancora pochi browser che non supportano la tecnologia frame.
Creazione di cornici
Per usare i frame su una pagina usiamo il tag <frameset> invece del tag <body>. Il tag <frameset> definisce come dividere la finestra in frame. Ilrows l'attributo del tag <frameset> definisce i frame orizzontali e colsl'attributo definisce i frame verticali. Ogni frame è indicato dal tag <frame> e definisce quale documento HTML deve essere aperto nel frame.
Note- Il tag <frame> obsoleto in HTML5. Non utilizzare questo elemento.
Esempio
Di seguito è riportato l'esempio per creare tre cornici orizzontali:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Questo produrrà il seguente risultato:
Esempio
Mettiamo l'esempio sopra come segue, qui abbiamo sostituito l'attributo righe con cols e abbiamo cambiato la loro larghezza. Questo creerà tutti e tre i frame verticalmente -
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Questo produrrà il seguente risultato:
Gli attributi del tag <frameset>
Di seguito sono riportati attributi importanti del tag <frameset>:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | cols Specifica quante colonne sono contenute nel set di frame e la dimensione di ciascuna colonna. È possibile specificare la larghezza di ciascuna colonna in uno dei quattro modi: Valori assoluti in pixel. Ad esempio, per creare tre frame verticali, usa cols = "100, 500, 100" . Una percentuale della finestra del browser. Ad esempio, per creare tre frame verticali, usa cols = "10%, 80%, 10%" . Utilizzando un carattere jolly. Ad esempio, per creare tre frame verticali, usa cols = "10%, *, 10%" . In questo caso il carattere jolly occupa il resto della finestra. Come larghezze relative della finestra del browser. Ad esempio, per creare tre frame verticali, usa cols = "3 *, 2 *, 1 *" . Questa è un'alternativa alle percentuali. È possibile utilizzare larghezze relative della finestra del browser. Qui la finestra è divisa in seste: la prima colonna occupa metà della finestra, la seconda occupa un terzo e la terza occupa un sesto. |
| 2 | rows Questo attributo funziona esattamente come l'attributo cols e accetta gli stessi valori, ma viene utilizzato per specificare le righe nel set di frame. Ad esempio, per creare due fotogrammi orizzontali, utilizza righe = "10%, 90%" . È possibile specificare l'altezza di ciascuna riga nello stesso modo spiegato sopra per le colonne. |
| 3 | border Questo attributo specifica la larghezza del bordo di ogni frame in pixel. Ad esempio, border = "5". Un valore zero significa nessun bordo. |
| 4 | frameborder Questo attributo specifica se deve essere visualizzato un bordo tridimensionale tra i frame. Questo attributo assume valore 1 (sì) o 0 (no). Ad esempio frameborder = "0" non specifica alcun bordo. |
| 5 | framespacing Questo attributo specifica la quantità di spazio tra i frame in un set di frame. Può assumere qualsiasi valore intero. Ad esempio framespacing = "10" significa che dovrebbe esserci una spaziatura di 10 pixel tra ogni frame. |
Gli attributi del tag <frame>
Di seguito sono riportati gli attributi importanti del tag <frame>:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | src Questo attributo viene utilizzato per fornire il nome del file che deve essere caricato nel frame. Il suo valore può essere qualsiasi URL. Ad esempio, src = "/html/top_frame.htm" caricherà un file HTML disponibile nella directory html. |
| 2 | name Questo attributo ti permette di dare un nome a un frame. Viene utilizzato per indicare in quale frame deve essere caricato un documento. Ciò è particolarmente importante quando si desidera creare collegamenti in un frame che caricano pagine in un altro frame, nel qual caso il secondo frame ha bisogno di un nome per identificarsi come destinazione del collegamento. |
| 3 | frameborder Questo attributo specifica se vengono visualizzati o meno i bordi di quel frame; sovrascrive il valore fornito nell'attributo frameborder sul tag <frameset> se ne viene fornito uno, e questo può assumere valori 1 (sì) o 0 (no). |
| 4 | marginwidth Questo attributo consente di specificare la larghezza dello spazio tra la sinistra e la destra dei bordi della cornice e il contenuto della cornice. Il valore è espresso in pixel. Ad esempio marginwidth = "10". |
| 5 | marginheight Questo attributo consente di specificare l'altezza dello spazio tra la parte superiore e inferiore dei bordi della cornice e il suo contenuto. Il valore è espresso in pixel. Ad esempio marginheight = "10". |
| 6 | noresize Per impostazione predefinita, puoi ridimensionare qualsiasi riquadro facendo clic e trascinando sui bordi di un riquadro. L'attributo noresize impedisce a un utente di ridimensionare il frame. Ad esempio noresize = "noresize". |
| 7 | scrolling Questo attributo controlla l'aspetto delle barre di scorrimento che appaiono sul frame. Questo assume valori "yes", "no" o "auto". Ad esempio scrolling = "no" significa che non dovrebbe avere barre di scorrimento. |
| 8 | longdesc Questo attributo consente di fornire un collegamento a un'altra pagina contenente una lunga descrizione del contenuto del frame. Ad esempio longdesc = "framedescription.htm" |
Supporto del browser per i frame
Se un utente sta utilizzando un qualsiasi browser precedente o qualsiasi browser che non supporta i frame, l'elemento <noframes> dovrebbe essere visualizzato all'utente.
Quindi devi inserire un elemento <body> all'interno dell'elemento <noframes> perché l'elemento <frameset> dovrebbe sostituire l'elemento <body>, ma se un browser non comprende l'elemento <frameset> allora dovrebbe capire cosa c'è dentro il Elemento <body> contenuto in un elemento <noframes>.
Puoi mettere un bel messaggio per il tuo utente con vecchi browser. Ad esempio, scusa !! Il tuo browser non supporta i frames. come mostrato nell'esempio sopra.
Nome del frame e attributi di destinazione
Uno degli usi più popolari dei frame è posizionare le barre di navigazione in un frame e quindi caricare le pagine principali in un frame separato.
Vediamo il seguente esempio in cui un file test.htm ha il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Qui abbiamo creato due colonne da riempire con due frame. Il primo fotogramma è largo 200 pixel e conterrà la barra dei menu di navigazione implementata damenu.htmfile. La seconda colonna riempie lo spazio rimanente e conterrà la parte principale della pagina ed è implementata damain.htmfile. Per tutti e tre i collegamenti disponibili nella barra dei menu, abbiamo menzionato il frame di destinazione comemain_page, quindi ogni volta che fai clic su uno qualsiasi dei link nella barra dei menu, il link disponibile si aprirà nella pagina principale.
Di seguito è riportato il contenuto del file menu.htm
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>Di seguito è riportato il contenuto del file main.htm -
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>Quando cariciamo test.htm file, produce il seguente risultato:
Ora puoi provare a fare clic sui collegamenti disponibili nel pannello di sinistra e vedere il risultato. L' attributo target può anche assumere uno dei seguenti valori:
| Suor n | Opzione e descrizione |
|---|---|
| 1 | _self Carica la pagina nel frame corrente. |
| 2 | _blank Carica una pagina in una nuova finestra del browser. Apertura di una nuova finestra. |
| 3 | _parent Carica la pagina nella finestra principale, che nel caso di un singolo set di frame è la finestra principale del browser. |
| 4 | _top Carica la pagina nella finestra del browser, sostituendo eventuali frame correnti. |
| 5 | targetframe Carica la pagina in un frame di destinazione denominato. |
È possibile definire un frame in linea con tag HTML <iframe>. Il tag <iframe> non è in qualche modo correlato al tag <frameset>, invece, può apparire ovunque nel documento. Il tag <iframe> definisce un'area rettangolare all'interno del documento in cui il browser può visualizzare un documento separato, incluse barre di scorrimento e bordi. Un frame inline viene utilizzato per incorporare un altro documento nel documento HTML corrente.
Il src l'attributo è utilizzato per specificare l'URL del documento che occupa il frame inline.
Esempio
Di seguito è riportato l'esempio per mostrare come utilizzare <iframe> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>Questo produrrà il seguente risultato:
Gli attributi del tag <Iframe>
La maggior parte degli attributi del tag <iframe>, inclusi name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style e title si comportano esattamente come gli attributi corrispondenti per il tag <frame>.
Note- Il frameborder , marginwidth , longdesc , scrolling , marginheight attributi deprecato in HTML5. Non utilizzare questi attributi.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | src Questo attributo viene utilizzato per fornire il nome del file che deve essere caricato nel frame. Il suo valore può essere qualsiasi URL. Ad esempio, src = "/html/top_frame.htm" caricherà un file HTML disponibile nella directory html. |
| 2 | name Questo attributo ti permette di dare un nome a un frame. Viene utilizzato per indicare in quale frame deve essere caricato un documento. Ciò è particolarmente importante quando si desidera creare collegamenti in un frame che caricano pagine in un altro frame, nel qual caso il secondo frame ha bisogno di un nome per identificarsi come destinazione del collegamento. |
| 3 | frameborder Questo attributo specifica se vengono visualizzati o meno i bordi di quel frame; sovrascrive il valore fornito nell'attributo frameborder sul tag <frameset> se ne viene fornito uno, e questo può assumere valori 1 (sì) o 0 (no). |
| 4 | marginwidth Questo attributo consente di specificare la larghezza dello spazio tra la sinistra e la destra dei bordi della cornice e il contenuto della cornice. Il valore è espresso in pixel. Ad esempio marginwidth = "10". |
| 5 | marginheight Questo attributo consente di specificare l'altezza dello spazio tra la parte superiore e inferiore dei bordi della cornice e il suo contenuto. Il valore è espresso in pixel. Ad esempio marginheight = "10". |
| 6 | height Questo attributo specifica l'altezza di <iframe>. |
| 7 | scrolling Questo attributo controlla l'aspetto delle barre di scorrimento che appaiono sul frame. Questo assume valori "yes", "no" o "auto". Ad esempio scrolling = "no" significa che non dovrebbe avere barre di scorrimento. |
| 8 | longdesc Questo attributo consente di fornire un collegamento a un'altra pagina contenente una lunga descrizione del contenuto del frame. Ad esempio longdesc = "framedescription.htm" |
| 9 | width Questo attributo specifica la larghezza di <iframe>. |
Tutti gli elementi HTML possono essere classificati in due categorie (a) Elementi a livello di blocco (b)Elementi in linea.
Elementi di blocco
Gli elementi del blocco appaiono sullo schermo come se avessero un'interruzione di riga prima e dopo di essi. Ad esempio, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> e <address> sono tutti elementi a livello di blocco. Iniziano tutti sulla loro nuova riga e tutto ciò che li segue appare sulla sua nuova riga.
Elementi in linea
Gli elementi in linea, d'altra parte, possono apparire all'interno di frasi e non devono apparire su una nuova riga propria. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Gli elementi code>, <cite>, <dfn>, <kbd> e <var> sono tutti elementi inline.
Raggruppamento di elementi HTML
Ci sono due tag importanti che usiamo molto frequentemente per raggruppare vari altri tag HTML (i) tag <div> e (ii) tag <span>
Il tag <div>
Questo è il tag a livello di blocco molto importante che gioca un ruolo importante nel raggruppare vari altri tag HTML e applicare CSS su un gruppo di elementi. Anche ora il tag <div> può essere utilizzato per creare layout di pagina web in cui definiamo diverse parti (sinistra, destra, in alto ecc.) Della pagina utilizzando il tag <div>. Questo tag non fornisce alcun cambiamento visivo sul blocco, ma ha più significato quando viene utilizzato con CSS.
Esempio
Di seguito è riportato un semplice esempio di tag <div>. Impareremo il Cascading Style Sheet (CSS) in un capitolo separato, ma lo abbiamo usato qui per mostrare l'uso del tag <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Questo produrrà il seguente risultato:
Il tag <span>
L'HTML <span> è un elemento inline e può essere utilizzato per raggruppare elementi inline in un documento HTML. Inoltre, questo tag non fornisce alcuna modifica visiva sul blocco ma ha più significato quando viene utilizzato con CSS.
La differenza tra il tag <span> e il tag <div> è che il tag <span> viene utilizzato con elementi inline mentre il tag <div> viene utilizzato con elementi a livello di blocco.
Esempio
Di seguito è riportato un semplice esempio di tag <span>. Impareremo il Cascading Style Sheet (CSS) in un capitolo separato, ma lo abbiamo usato qui per mostrare l'uso del tag <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Questo produrrà il seguente risultato:
Per impostazione predefinita, lo sfondo della tua pagina web è di colore bianco. Potrebbe non piacerti, ma non preoccuparti. L'HTML ti offre due buoni modi per decorare lo sfondo della tua pagina web.
- Sfondo HTML con colori
- Sfondo HTML con immagini
Vediamo ora entrambi gli approcci uno per uno usando esempi appropriati.
Sfondo HTML con colori
Il bgcolor l'attributo viene utilizzato per controllare lo sfondo di un elemento HTML, in particolare il corpo della pagina e gli sfondi della tabella.
Note- L' attributo bgcolor è obsoleto in HTML5. Non utilizzare questo attributo.
Di seguito è riportata la sintassi per utilizzare l'attributo bgcolor con qualsiasi tag HTML.
<tagname bgcolor = "color_value"...>Questo color_value può essere fornito in uno dei seguenti formati:
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >Esempio
Ecco gli esempi per impostare lo sfondo di un tag HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Sfondo HTML con immagini
Il backgroundl'attributo può essere utilizzato anche per controllare lo sfondo di un elemento HTML, in particolare il corpo della pagina e gli sfondi della tabella. È possibile specificare un'immagine per impostare lo sfondo della pagina o della tabella HTML.
Note- L' attributo background è obsoleto in HTML5. Non utilizzare questo attributo.
Di seguito è riportata la sintassi per utilizzare l'attributo background con qualsiasi tag HTML.
Note- L' attributo background è deprecato e si consiglia di utilizzare il foglio di stile per l'impostazione dello sfondo.
<tagname background = "Image URL"...>I formati di immagine più utilizzati sono le immagini JPEG, GIF e PNG.
Esempio
Ecco gli esempi per impostare le immagini di sfondo di una tabella.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Sfondi fantasia e trasparenti
Potresti aver visto molti pattern o sfondi trasparenti su vari siti web. Ciò può essere ottenuto semplicemente utilizzando un'immagine modellata o un'immagine trasparente sullo sfondo.
Si suggerisce che durante la creazione di motivi o immagini GIF o PNG trasparenti, utilizzare le dimensioni più piccole possibili anche piccole come 1x1 per evitare un caricamento lento.
Esempio
Di seguito sono riportati degli esempi per impostare il motivo di sfondo di una tabella:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
I colori sono molto importanti per dare un bell'aspetto al tuo sito web. Puoi specificare i colori a livello di pagina usando il tag <body> oppure puoi impostare i colori per i singoli tag usandobgcolor attributo.
Il tag <body> ha i seguenti attributi che possono essere utilizzati per impostare colori diversi:
bgcolor - imposta un colore per lo sfondo della pagina.
text - imposta un colore per il corpo del testo.
alink - imposta un colore per i collegamenti attivi o per i collegamenti selezionati.
link - imposta un colore per il testo collegato.
vlink- imposta un colore per i collegamenti visitati , ovvero per il testo collegato su cui si è già fatto clic.
Metodi di codifica colore HTML
Sono disponibili tre diversi metodi per impostare i colori nella tua pagina web:
Color names - È possibile specificare direttamente i nomi dei colori come verde, blu o rosso.
Hex codes - Un codice a sei cifre che rappresenta la quantità di rosso, verde e blu che compone il colore.
Color decimal or percentage values - Questo valore viene specificato utilizzando la proprietà rgb ().
Ora vedremo questi schemi di colorazione uno per uno.
Colori HTML - Nomi dei colori
È possibile specificare un nome di colore diretto per impostare il colore del testo o dello sfondo. Il W3C ha elencato 16 nomi di colori di base che verranno convalidati con un validatore HTML, ma ci sono oltre 200 nomi di colori diversi supportati dai principali browser.
Note- Controlla un elenco completo del nome colore HTML.
16 colori standard W3C
Ecco l'elenco dei nomi W3C Standard 16 colori e si consiglia di utilizzarli.
| Nero | Grigio | Argento | bianca | ||||
| Giallo | Lime | Aqua | Fucsia | ||||
| Rosso | verde | Blu | Viola | ||||
| Marrone | Oliva | Marina Militare | Teal |
Esempio
Ecco gli esempi per impostare lo sfondo di un tag HTML in base al nome del colore:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colori HTML - Codici esadecimali
Un esadecimale è una rappresentazione a 6 cifre di un colore. Le prime due cifre (RR) rappresentano un valore rosso, le due successive sono un valore verde (GG) e le ultime sono il valore blu (BB).
Un valore esadecimale può essere preso da qualsiasi software di grafica come Adobe Photoshop, Paintshop Pro o MS Paint.
Ogni codice esadecimale sarà preceduto da un cancelletto o un cancelletto #. Di seguito è riportato un elenco di pochi colori che utilizzano la notazione esadecimale.
| Colore | Colore HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Esempio
Ecco gli esempi per impostare lo sfondo di un tag HTML in base al codice colore in esadecimale:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colori HTML - Valori RGB
Questo valore di colore viene specificato utilizzando il rgb( )proprietà. Questa proprietà accetta tre valori, uno per rosso, verde e blu. Il valore può essere un numero intero compreso tra 0 e 255 o una percentuale.
Note - Tutti i browser non supportano la proprietà rgb () del colore quindi si consiglia di non utilizzarla.
Di seguito è riportato un elenco per mostrare alcuni colori utilizzando i valori RGB.
| Colore | Colore RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Esempio
Ecco gli esempi per impostare lo sfondo di un tag HTML in base al codice colore utilizzando i valori rgb ():
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colori sicuri per il browser
Ecco l'elenco dei 216 colori che dovrebbero essere i colori più sicuri e indipendenti dal computer. Questi colori vanno dal codice hexa 000000 a FFFFFF e saranno supportati da tutti i computer con tavolozza di 256 colori.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.
Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.
Set Font Size
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>This will produce the following result −
Relative Font Size
You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size = "+n"> or <font size = "−n">
Example
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>This will produce the following result −
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer.
Example
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>This will produce the following result −
Specify alternate font faces
A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.
Note − Check a complete list of HTML Standard Fonts.
Setting Font Color
You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.
Note − You can check a complete list of HTML Color Name with Codes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>This will produce the following result −
The <basefont> Element
The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>This will produce the following result −
HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes −
| Suor n | Attributo e descrizione |
|---|---|
| 1 | action Script di backend pronto per elaborare i dati passati. |
| 2 | method Metodo da utilizzare per caricare i dati. I metodi più utilizzati sono GET e POST. |
| 3 | target Specificare la finestra o il frame di destinazione in cui verrà visualizzato il risultato dello script. Accetta valori come _blank, _self, _parent ecc. |
| 4 | enctype È possibile utilizzare l'attributo enctype per specificare come il browser codifica i dati prima di inviarli al server. I valori possibili sono - application/x-www-form-urlencoded - Questo è il metodo standard utilizzato dalla maggior parte dei moduli in scenari semplici. mutlipart/form-data - Viene utilizzato quando si desidera caricare dati binari sotto forma di file come immagini, file di parole ecc. |
Note- Puoi fare riferimento a Perl e CGI per dettagli su come funziona il caricamento dei dati dei moduli.
Controlli modulo HTML
Esistono diversi tipi di controlli del modulo che puoi utilizzare per raccogliere dati utilizzando il modulo HTML:
- Controlli di immissione del testo
- Controlli delle caselle di controllo
- Controlli radio box
- Seleziona Box Controls
- Caselle di selezione dei file
- Controlli nascosti
- Pulsanti cliccabili
- Pulsante Invia e ripristina
Controlli di immissione del testo
Esistono tre tipi di input di testo utilizzati nei moduli:
Single-line text input controls- Questo controllo viene utilizzato per gli elementi che richiedono solo una riga di input dell'utente, come caselle di ricerca o nomi. Vengono creati utilizzando HTML<input> etichetta.
Password input controls- Anche questo è un input di testo a riga singola ma maschera il carattere non appena un utente lo inserisce. Vengono anche creati utilizzando il tag HTMl <input>.
Multi-line text input controls- Viene utilizzato quando all'utente è richiesto di fornire dettagli che possono essere più lunghi di una singola frase. I controlli di input multilinea vengono creati utilizzando HTML<textarea> etichetta.
Controlli per l'immissione di testo a riga singola
Questo controllo viene utilizzato per gli elementi che richiedono solo una riga di input dell'utente, come caselle di ricerca o nomi. Vengono creati utilizzando il tag HTML <input>.
Esempio
Ecco un esempio di base di un input di testo a riga singola utilizzato per prendere il nome e il cognome:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <input> per la creazione del campo di testo.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input di testo verrà impostato text. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Può essere utilizzato per fornire un valore iniziale all'interno del controllo. |
| 4 | size Consente di specificare la larghezza del controllo di immissione del testo in termini di caratteri. |
| 5 | maxlength Consente di specificare il numero massimo di caratteri che un utente può inserire nella casella di testo. |
Controlli di immissione della password
Anche questo è un input di testo a riga singola, ma maschera il carattere non appena un utente lo inserisce. Vengono anche creati utilizzando il tag HTML <input> ma l'attributo type è impostato supassword.
Esempio
Di seguito è riportato un esempio di base di immissione di una password su una riga utilizzata per accettare la password dell'utente:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <input> per la creazione del campo password.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input della password verrà impostato password. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Può essere utilizzato per fornire un valore iniziale all'interno del controllo. |
| 4 | size Consente di specificare la larghezza del controllo di immissione del testo in termini di caratteri. |
| 5 | maxlength Consente di specificare il numero massimo di caratteri che un utente può inserire nella casella di testo. |
Controlli per l'immissione di testo su più righe
Viene utilizzato quando all'utente è richiesto di fornire dettagli che possono essere più lunghi di una singola frase. I controlli di input multilinea vengono creati utilizzando il tag HTML <textarea>.
Esempio
Di seguito è riportato un esempio di base di un input di testo multilinea utilizzato per prendere la descrizione dell'articolo:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <textarea>.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 2 | rows Indica il numero di righe della casella dell'area di testo. |
| 3 | cols Indica il numero di colonne della casella dell'area di testo |
Controllo della casella di controllo
Le caselle di controllo vengono utilizzate quando è necessario selezionare più di un'opzione. Vengono anche creati utilizzando il tag HTML <input> ma l'attributo type è impostato sucheckbox..
Esempio
Ecco un esempio di codice HTML per un modulo con due caselle di controllo:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <checkbox>.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input della casella di controllo verrà impostato checkbox.. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Il valore che verrà utilizzato se la casella di controllo è selezionata. |
| 4 | checked Impostare su selezionato se si desidera selezionarlo per impostazione predefinita. |
Controllo tramite pulsante di opzione
I pulsanti di opzione vengono utilizzati quando tra molte opzioni, è necessario selezionare solo un'opzione. Vengono anche creati utilizzando il tag HTML <input> ma l'attributo type è impostato suradio.
Esempio
Ecco un esempio di codice HTML per un modulo con due pulsanti di opzione:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il pulsante di opzione.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input della casella di controllo verrà impostato su radio. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Il valore che verrà utilizzato se la casella radio è selezionata. |
| 4 | checked Impostare su selezionato se si desidera selezionarlo per impostazione predefinita. |
Seleziona Box Control
Una casella di selezione, chiamata anche casella a discesa, che fornisce l'opzione per elencare varie opzioni sotto forma di elenco a discesa, da cui un utente può selezionare una o più opzioni.
Esempio
Ecco un esempio di codice HTML per un modulo con una casella a discesa
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi importanti del tag <select> -
| Suor n | Attributo e descrizione |
|---|---|
| 1 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 2 | size Può essere utilizzato per presentare una casella di riepilogo a scorrimento. |
| 3 | multiple Se impostato su "multiple", consente a un utente di selezionare più elementi dal menu. |
Di seguito è riportato l'elenco degli attributi importanti del tag <option> -
| Suor n | Attributo e descrizione |
|---|---|
| 1 | value Il valore che verrà utilizzato se è selezionata un'opzione nella casella di selezione. |
| 2 | selected Specifica che questa opzione deve essere il valore inizialmente selezionato al caricamento della pagina. |
| 3 | label Un modo alternativo di etichettare le opzioni |
Casella di caricamento file
Se desideri consentire a un utente di caricare un file sul tuo sito web, dovrai utilizzare una casella di caricamento file, nota anche come casella di selezione file. Anche questo viene creato utilizzando l'elemento <input> ma l'attributo type è impostato sufile.
Esempio
Ecco un esempio di codice HTML per un modulo con una casella di caricamento file:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi importanti della casella di caricamento dei file:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 2 | accept Specifica i tipi di file accettati dal server. |
Controlli a pulsante
Esistono vari modi in HTML per creare pulsanti cliccabili. Puoi anche creare un pulsante cliccabile utilizzando il tag <input> impostando il suo attributo type subutton. L'attributo type può assumere i seguenti valori:
| Suor n | Tipo e descrizione |
|---|---|
| 1 | submit Questo crea un pulsante che invia automaticamente un modulo. |
| 2 | reset Questo crea un pulsante che reimposta automaticamente i controlli del modulo ai loro valori iniziali. |
| 3 | button Questo crea un pulsante che viene utilizzato per attivare uno script lato client quando l'utente fa clic su quel pulsante. |
| 4 | image Questo crea un pulsante cliccabile ma possiamo usare un'immagine come sfondo del pulsante. |
Esempio
Ecco un esempio di codice HTML per un modulo con tre tipi di pulsanti:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Controlli dei moduli nascosti
I controlli del modulo nascosto vengono utilizzati per nascondere i dati all'interno della pagina che in seguito possono essere inviati al server. Questo controllo si nasconde all'interno del codice e non viene visualizzato nella pagina effettiva. Ad esempio, il seguente modulo nascosto viene utilizzato per mantenere il numero di pagina corrente. Quando un utente farà clic sulla pagina successiva, il valore del controllo nascosto verrà inviato al server Web e lì deciderà quale pagina verrà visualizzata successivamente in base alla pagina corrente passata.
Esempio
Ecco un esempio di codice HTML per mostrare l'utilizzo del controllo nascosto:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
A volte è necessario aggiungere musica o video nella tua pagina web. Il modo più semplice per aggiungere video o audio al tuo sito web è includere il tag HTML speciale chiamato<embed>. Questo tag fa in modo che il browser stesso includa i controlli per i file multimediali forniti automaticamente che il browser supporti il tag <embed> e il tipo di supporto specificato.
Puoi anche includere un file <noembed>tag per i browser che non riconoscono il tag <embed>. Potresti, ad esempio, usare <embed> per visualizzare un film a tua scelta e<noembed> per visualizzare una singola immagine JPG se il browser non supporta il tag <embed>.
Esempio
Ecco un semplice esempio per riprodurre un file midi incorporato:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Gli attributi del tag <embed>
Di seguito è riportato l'elenco degli attributi importanti che possono essere utilizzati con il tag <embed>.
Note−Gli attributi di allineamento e avvio automatico deprecati in HTML5. Non utilizzare questi attributi.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | align Determina come allineare l'oggetto. Può essere impostato al centro, a sinistra oa destra . |
| 2 | autostart Questo attributo booleano indica se il supporto deve essere avviato automaticamente. Puoi impostarlo su vero o falso. |
| 3 | loop Specifica se il suono deve essere riprodotto continuamente (imposta loop su true), un certo numero di volte (un valore positivo) o non deve essere riprodotto affatto (false) |
| 4 | playcount Specifica il numero di volte per riprodurre il suono. Questa è un'opzione alternativa per il ciclo se stai usando IE. |
| 5 | hidden Specifica se l'oggetto multimediale deve essere visualizzato nella pagina. Un valore falso significa no e valori veri significa sì. |
| 6 | width Larghezza dell'oggetto in pixel |
| 7 | height Altezza dell'oggetto in pixel |
| 8 | name Un nome utilizzato per fare riferimento all'oggetto. |
| 9 | src URL dell'oggetto da incorporare. |
| 10 | volume Controlla il volume del suono. Può essere compreso tra 0 (disattivato) e 100 (volume massimo). |
Tipi di video supportati
Puoi utilizzare vari tipi di file multimediali come i filmati Flash (.swf), i tipi di file AVI (.avi) e MOV (.mov) all'interno del tag embed.
.swf files - sono i tipi di file creati dal programma Flash di Macromedia.
.wmv files - sono i tipi di file Media Video di Microsoft Windows.
.mov files - sono il formato Quick Time Movie di Apple.
.mpeg files - sono file di filmati creati dal Moving Pictures Expert Group.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Questo produrrà il seguente risultato:
Audio di sottofondo
Puoi usare HTML <bgsound>tag per riprodurre una colonna sonora in sottofondo della tua pagina web. Questo tag è supportato solo da Internet Explorer e la maggior parte degli altri browser ignora questo tag. Scarica e riproduce un file audio quando il documento host viene scaricato per la prima volta dall'utente e visualizzato. Il file audio di sottofondo verrà riprodotto anche ogni volta che l'utente aggiorna il browser.
Note- Il tag bgsound è deprecato e dovrebbe essere rimosso in una futura versione di HTML. Quindi non dovrebbero essere usati piuttosto, si consiglia di utilizzare l'audio del tag HTML5 per aggiungere il suono. Ma sempre a scopo di apprendimento, questo capitolo spiegherà in dettaglio il tag bgsound.
Questo tag ha solo due attributi loop e src . Entrambi questi attributi hanno lo stesso significato come spiegato sopra.
Ecco un semplice esempio per riprodurre un piccolo file midi:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Questo produrrà lo schermo vuoto. Questo tag non mostra alcun componente e rimane nascosto.
Internet Explorer può anche gestire solo tre diversi file in formato audio: wav, il formato nativo per PC; au, il formato nativo per la maggior parte delle workstation Unix; e MIDI, uno schema di codifica musicale universale.
Tag oggetto HTML
HTML 4 introduce il <object>elemento, che offre una soluzione per tutti gli usi all'inclusione di oggetti generici. Il<object> L'elemento consente agli autori HTML di specificare tutto ciò che è richiesto da un oggetto per la sua presentazione da parte di un programma utente.
Ecco alcuni esempi:
Esempio 1
Puoi incorporare un documento HTML in un documento HTML stesso come segue:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Qui l' attributo alt verrà visualizzato se il browser non supporta il tag oggetto .
Esempio - 2
È possibile incorporare un documento PDF in un documento HTML come segue:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Esempio: 3
È possibile specificare alcuni parametri relativi al documento con il file <param>etichetta. Ecco un esempio per incorporare un file wav:
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Esempio: 4
Puoi aggiungere un documento Flash come segue:
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Esempio: 5
Puoi aggiungere un'applet java nel documento HTML come segue:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>Il classidl'attributo identifica la versione del plug-in Java da utilizzare. È possibile utilizzare l' attributo codebase facoltativo per specificare se e come scaricare JRE.
Una cornice intermittente HTML è una porzione di testo scorrevole visualizzata orizzontalmente o verticalmente lungo la pagina Web, a seconda delle impostazioni. Viene creato utilizzando il tag HTML <marquees>.
Note- Il tag <marquee> obsoleto in HTML5. Non utilizzare questo elemento, invece puoi utilizzare JavaScript e CSS per creare tali effetti.
Sintassi
Una semplice sintassi per utilizzare il tag HTML <marquee> è la seguente:
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>Gli attributi del tag <marquee>
Di seguito è riportato l'elenco degli attributi importanti che possono essere utilizzati con il tag <marquee>.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | width Specifica la larghezza della cornice intermittente. Questo può essere un valore come il 10 o il 20% ecc. |
| 2 | height Specifica l'altezza della cornice intermittente. Questo può essere un valore come il 10 o il 20% ecc. |
| 3 | direction Specifica la direzione in cui deve scorrere la selezione. Può essere un valore come su, giù, sinistra o destra . |
| 4 | behavior Specifica il tipo di scorrimento della cornice intermittente. Questo può avere un valore come scroll, slide e alternate . |
| 5 | scrolldelay Questo specifica quanto tempo ritardare tra ogni salto. Questo avrà un valore come 10 ecc. |
| 6 | scrollamount Specifica la velocità del testo di selezione. Questo può avere un valore come 10 ecc. |
| 7 | loop Specifica quante volte eseguire il loop. Il valore predefinito è INFINITO, il che significa che la selezione viene ripetuta all'infinito. |
| 8 | bgcolor This specifies background color in terms of color name or color hex value. |
| 9 | hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc. |
| 10 | vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc. |
Below are few examples to demonstrate the usage of marquee tag.
Examples - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>This will produce the following result −
Examples - 2
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>
</html>This will produce the following result −
Examples - 3
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>This will produce the following result −
Examples - 4
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>This will produce the following result −
We have learnt that a typical HTML document will have following structure −
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>This chapter will give a little more detail about header part which is represented by HTML <head> tag. The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags.
The HTML <title> Tag
The HTML <title> tag is used for specifying the title of the HTML document. Following is an example to give a title to an HTML document −
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>This will produce the following result −
The HTML <meta> Tag
The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, page author, list of keywords, page description etc.
Following are few of the important usages of <meta> tag inside an HTML document −
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>This will produce the following result −
The HTML <base> Tag
The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item.
For example, all the given pages and images will be searched after prefixing the given URLs with base URL http://www.tutorialspoint.com/ directory −
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>This will produce the following result −
But if you change base URL to something else, for example, if base URL is http://www.tutorialspoint.com/home then image and other given links will become like http://www.tutorialspoint.com/home/images/logo.png and http://www.tutorialspoint.com/html/index.htm
The HTML <link> Tag
The HTML <link> tag is used to specify relationships between the current document and external resource. Following is an example to link an external style sheet file available in css sub-directory within web root −
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>This will produce the following result −
The HTML <style> Tag
The HTML <style> tag is used to specify style sheet for the current HTML document. Following is an example to define few style sheet rules inside <style> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>This will produce the following result −
Note − To learn about how Cascading Style Sheet works, kindly check a separate tutorial available at css
The HTML <script> Tag
The HTML <script> tag is used to include either external script file or to define internal script for the HTML document. Following is an example where we are using JavaScript to define a simple JavaScript function −
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>This will produce the following result, where you can try to click on the given button −
Note − To learn about how JavaScript works, kindly check a separate tutorial available at javascript
Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994.
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).
Example
First let's consider an example of HTML document which makes use of <font> tag and associated attributes to specify text color and font size −
Note − The font tag deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will work with an example using the font tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>We can re-write above example with the help of Style Sheet as follows −
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>This will produce the following result −
You can use CSS in three ways in your HTML document −
External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
Internal Style Sheet − Define style sheet rules in header section of the HTML document using <style> tag.
Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style attribute.
Let's see all the three cases one by one with the help of suitable examples.
External Style Sheet
If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.
Example
Consider we define a style sheet file style.css which has following rules −
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document −
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>This will produce the following result −
Internal Style Sheet
If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example
Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>This will produce the following result −
Inline Style Sheet
You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only.
Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element.
Example
Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>This will produce the following result −
A script is a small piece of program that can add interactivity to your website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu. This script could be written using JavaScript or VBScript.
You can write various small functions, called event handlers using any of the scripting language and then you can trigger those functions using HTML attributes.
Now-a-days, only JavaScript and associated frameworks are being used by most of the web developers, VBScript is not even supported by various major browsers.
You can keep JavaScript code in a separate file and then include it wherever it's needed, or you can define functionality inside HTML document itself. Let's see both the cases one by one with suitable examples.
External JavaScript
If you are going to define a functionality which will be used in various HTML documents then it's better to keep that functionality in a separate JavaScript file and then include that file in your HTML documents. A JavaScript file will have extension as .js and it will be included in HTML files using <script> tag.
Example
Consider we define a small function using JavaScript in script.js which has following code −
function Hello() {
alert("Hello, World");
}Now let's make use of the above external JavaScript file in our following HTML document −
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>This will produce the following result, where you can try to click on the given button −
Internal Script
You can write your script code directly into your HTML document. Usually we keep script code in header of the document using <script> tag, otherwise there is no restriction and you can put your source code anywhere in the document but inside <script> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>This will produce the following result, where you can try to click on the given button −
Event Handlers
Event handlers are nothing but simply defined functions which can be called against any mouse or keyboard event. You can define your business logic inside your event handler which can vary from a single to 1000s of line code.
Following example explains how to write an event handler. Let's write one simple function EventHandler() in the header of the document. We will call this function when any user brings mouse over a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>Now This will produce the following result. Bring your mouse over this line and see the result −
Hide Scripts from Older Browsers
Although most (if not all) browsers these days support JavaScript, but still some older browsers don't. If a browser doesn't support JavaScript, instead of running your script, it would display the code to the user. To prevent this, you can simply place HTML comments around the script as shown below.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>The <noscript> Element
You can also provide alternative info to the users whose browsers don't support scripts and for those users who have disabled script option their browsers. You can do this using the <noscript> tag.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>Default Scripting Language
There may be a situation when you will include multiple script files and ultimately using multiple <script> tags. You can specify a default scripting language for all your script tags. This saves you from specifying the language every time you use a script tag within the page. Below is the example −
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Note that you can still override the default by specifying a language within the script tag.
A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.
Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.
HTML Layout - Using Tables
The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
Example
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Layout a più colonne - Utilizzo di tabelle
Puoi progettare la tua pagina web per inserire i tuoi contenuti web in più pagine. Puoi mantenere i tuoi contenuti nella colonna centrale e puoi usare la colonna sinistra per usare il menu e la colonna destra può essere usata per inserire pubblicità o altre cose. Questo layout sarà molto simile a quello che abbiamo sul nostro sito web tutorialspoint.com.
Esempio
Ecco un esempio per creare un layout a tre colonne:
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Questo produrrà il seguente risultato:
Layout HTML - Utilizzo DIV, SPAN
L'elemento <div> è un elemento a livello di blocco utilizzato per raggruppare elementi HTML. Mentre il tag <div> è un elemento a livello di blocco, l'elemento HTML <span> viene utilizzato per raggruppare elementi a livello inline.
Sebbene possiamo ottenere layout piuttosto belli con le tabelle HTML, ma le tabelle non sono state progettate come uno strumento di layout. Le tabelle sono più adatte a presentare dati tabulari.
Note - Questo esempio fa uso di Cascading Style Sheet (CSS), quindi prima di comprendere questo esempio è necessario avere una migliore comprensione di come funzionano i CSS.
Esempio
Qui proveremo a ottenere lo stesso risultato usando il tag <div> insieme ai CSS, qualunque cosa tu abbia ottenuto usando il tag <table> nell'esempio precedente.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Questo produrrà il seguente risultato:
Puoi creare un layout migliore usando DIV, SPAN e CSS. Per ulteriori informazioni sui CSS, fare riferimento al tutorial CSS.