HTML - Guia rápido
HTML significa Hypertext Markup Llinguagem, e é a linguagem mais amplamente usada para escrever páginas da web.
Hypertextrefere-se à maneira como as páginas da Web (documentos HTML) são vinculadas. Assim, o link disponível em uma página da web é denominado Hipertexto.
Como o próprio nome sugere, HTML é um Markup Language o que significa que você usa HTML para simplesmente "marcar" um documento de texto com tags que informam ao navegador da Web como estruturá-lo para exibição.
Originalmente, o HTML foi desenvolvido com a intenção de definir a estrutura de documentos como cabeçalhos, parágrafos, listas e assim por diante para facilitar o compartilhamento de informações científicas entre pesquisadores.
Agora, o HTML está sendo amplamente usado para formatar páginas da web com a ajuda de diferentes tags disponíveis na linguagem HTML.
Documento HTML básico
Em sua forma mais simples, a seguir está um exemplo de um 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>Tags HTML
Como dito anteriormente, HTML é uma linguagem de marcação e faz uso de várias tags para formatar o conteúdo. Essas tags são colocadas entre colchetes angulares<Tag Name>. Exceto algumas tags, a maioria das tags tem suas tags de fechamento correspondentes. Por exemplo,<html> tem sua marca de fechamento </html> e <body> tag tem sua tag de fechamento </body> etiqueta etc.
O exemplo acima de documento HTML usa as seguintes tags -
| Sr. Não | Tag e descrição |
|---|---|
| 1 | <!DOCTYPE...> Esta tag define o tipo de documento e a versão HTML. |
| 2 | <html> Esta tag engloba o documento HTML completo e compreende principalmente o cabeçalho do documento que é representado por <head> ... </head> e o corpo do documento que é representado por tags <body> ... </body>. |
| 3 | <head> Esta tag representa o cabeçalho do documento que pode manter outras tags HTML como <title>, <link> etc. |
| 4 | <title> A tag <title> é usada dentro da tag <head> para mencionar o título do documento. |
| 5 | <body> Esta tag representa o corpo do documento que mantém outras tags HTML como <h1>, <div>, <p> etc. |
| 6 | <h1> Esta tag representa o título. |
| 7 | <p> Esta tag representa um parágrafo. |
Para aprender HTML, você precisará estudar várias tags e entender como elas se comportam, ao formatar um documento textual. Aprender HTML é simples, pois os usuários precisam aprender a usar diferentes tags para formatar o texto ou as imagens para fazer uma página da web bonita.
O World Wide Web Consortium (W3C) recomenda o uso de tags em minúsculas a partir de HTML 4.
Estrutura do Documento HTML
Um documento HTML típico terá a seguinte estrutura -
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Estudaremos todas as tags de cabeçalho e corpo nos capítulos subsequentes, mas por enquanto vamos ver o que é tag de declaração de documento.
A declaração <! DOCTYPE>
A tag de declaração <! DOCTYPE> é usada pelo navegador da web para entender a versão do HTML usado no documento. A versão atual do HTML é 5 e faz uso da seguinte declaração -
<!DOCTYPE html>Existem muitos outros tipos de declaração que podem ser usados em documentos HTML, dependendo de qual versão do HTML está sendo usada. Veremos mais detalhes sobre isso ao discutir a tag <! DOCTYPE ...> junto com outras tags HTML.
Tags de título
Qualquer documento começa com um título. Você pode usar tamanhos diferentes para seus títulos. HTML também tem seis níveis de títulos, que usam os elementos<h1>, <h2>, <h3>, <h4>, <h5>, e <h6>. Ao exibir qualquer título, o navegador adiciona uma linha antes e uma linha depois desse título.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Tag de parágrafo
o <p>tag oferece uma maneira de estruturar seu texto em diferentes parágrafos. Cada parágrafo de texto deve estar entre uma tag de abertura <p> e uma tag de fechamento </p>, conforme mostrado abaixo no exemplo -
Exemplo
<!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>Isso produzirá o seguinte resultado -
Tag de quebra de linha
Sempre que você usa o <br />elemento, tudo o que segue começa na próxima linha. Esta tag é um exemplo de umempty , onde você não precisa abrir e fechar as tags, pois não há nada entre eles.
A tag <br /> tem um espaço entre os caracteres bre a barra para a frente. Se você omitir este espaço, os navegadores mais antigos terão problemas para processar a quebra de linha, enquanto se você perder o caractere de barra e apenas usar <br>, isso não é válido em XHTML.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Centrando Conteúdo
Você pode usar <center> tag para colocar qualquer conteúdo no centro da página ou em qualquer célula da tabela.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Linhas Horizontais
As linhas horizontais são usadas para separar visualmente as seções de um documento. o<hr> tag cria uma linha da posição atual no documento até a margem direita e quebra a linha de acordo.
Por exemplo, você pode querer dar uma linha entre dois parágrafos como no exemplo dado abaixo -
Exemplo
<!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>Isso produzirá o seguinte resultado -
Novamente <hr /> tag é um exemplo de empty , onde você não precisa abrir e fechar as tags, pois não há nada entre eles.
o <hr /> elemento tem um espaço entre os caracteres hre a barra para a frente. Se você omitir este espaço, os navegadores mais antigos terão problemas para renderizar a linha horizontal, enquanto se você perder o caractere de barra e apenas usar<hr> não é válido em XHTML
Preservar formatação
Às vezes, você deseja que seu texto siga o formato exato em que foi escrito no documento HTML. Nesses casos, você pode usar a tag pré-formatada<pre>.
Qualquer texto entre a abertura <pre> tag e o fechamento </pre> tag preservará a formatação do documento de origem.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Isso produzirá o seguinte resultado -
Tente usar o mesmo código sem mantê-lo dentro <pre>...</pre> Tag
Espaços não separáveis
Suponha que você queira usar a frase "12 homens irritados". Aqui, você não gostaria que um navegador dividisse "12, Angry" e "Men" em duas linhas -
An example of this technique appears in the movie "12 Angry Men."Nos casos em que você não deseja que o navegador do cliente quebre o texto, você deve usar uma entidade de espaço não separável em vez de um espaço normal. Por exemplo, ao codificar os "12 Homens Irritados" em um parágrafo, você deve usar algo semelhante ao seguinte código -
Exemplo
<!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>Isso produzirá o seguinte resultado -
A HTML elementé definido por uma marca inicial. Se o elemento contiver outro conteúdo, ele termina com uma tag de fechamento, onde o nome do elemento é precedido por uma barra conforme mostrado abaixo com algumas tags -
| Iniciar Tag | Conteúdo | Tag de fim |
|---|---|---|
| <p> | Este é o conteúdo do parágrafo. | </p> |
| <h1> | Este é o conteúdo do título. | </h1> |
| <div> | Este é o conteúdo da divisão. | </div> |
| <br /> |
Então aqui <p>....</p> é um elemento HTML, <h1>...</h1>é outro elemento HTML. Existem alguns elementos HTML que não precisam ser fechados, como<img.../>, <hr /> e <br />elementos Estes são conhecidos comovoid elements.
Os documentos HTML consistem em uma árvore desses elementos e eles especificam como os documentos HTML devem ser construídos e que tipo de conteúdo deve ser colocado em que parte do documento HTML.
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>Especificar Conjunto de Caracteres
Você pode usar a tag <meta> para especificar o conjunto de caracteres usado na página da web.
Exemplo
Por padrão, os servidores e navegadores da Web usam a codificação ISO-8859-1 (Latin1) para processar páginas da Web. A seguir está um exemplo para definir a codificação 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>Para veicular a página estática com caracteres chineses tradicionais, a página da web deve conter uma tag <meta> para definir a codificação 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>O comentário é um trecho de código que é ignorado por qualquer navegador da web. É uma boa prática adicionar comentários ao código HTML, especialmente em documentos complexos, para indicar seções de um documento e quaisquer outras notas para quem está olhando o código. Os comentários ajudam você e outras pessoas a entender seu código e aumenta a legibilidade do código.
Os comentários HTML são colocados entre <!-- ... -->Tag. Portanto, qualquer conteúdo colocado nas tags <! - ... -> será tratado como comentário e será completamente ignorado pelo navegador.
Exemplo
<!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>Isso produzirá o seguinte resultado sem exibir o conteúdo fornecido como parte dos comentários -
Comentários válidos vs inválidos
Os comentários não são aninhados, o que significa que um comentário não pode ser colocado dentro de outro comentário. Em segundo lugar, a sequência de traços duplos "-" pode não aparecer dentro de um comentário, exceto como parte da tag de fechamento ->. Você também deve se certificar de que não haja espaços na string de início do comentário.
Exemplo
Aqui, o comentário fornecido é válido e será apagado pelo navegador.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Isso produzirá o seguinte resultado -
Porém, a linha a seguir não é um comentário válido e será exibido pelo navegador. Isso ocorre porque há um espaço entre o colchete angular esquerdo e o ponto de exclamação.
<!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>Isso produzirá o seguinte resultado -
Comentários multilinha
Até agora, vimos comentários de uma única linha, mas o HTML também suporta comentários de várias linhas.
Você pode comentar várias linhas pela marca especial de início <! - e marca de término -> colocada antes da primeira linha e no final da última linha, conforme mostrado no exemplo abaixo.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Comentários condicionais
Os comentários condicionais funcionam apenas no Internet Explorer (IE) no Windows, mas são ignorados por outros navegadores. Eles são suportados a partir do Explorer 5 e você pode usá-los para fornecer instruções condicionais para diferentes versões do IE.
Exemplo
<!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>Você se deparará com uma situação em que precisará aplicar uma folha de estilo diferente com base em diferentes versões do Internet Explorer; em tal situação, comentários condicionais serão úteis.
Usando tag de comentário
Existem poucos navegadores que suportam a tag <comment> para comentar uma parte do código HTML.
Note- A tag <comment> tornou-se obsoleta em HTML5. Não use este elemento.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>Se você estiver usando o IE, ele produzirá o seguinte resultado -
Mas se você não estiver usando o IE, ele produzirá o seguinte resultado -
Código do Script de Comentário
Embora você aprenda JavaScript com HTML, em um tutorial separado, mas aqui você deve tomar nota de que se estiver usando Java Script ou VB Script em seu código HTML, é recomendável colocar esse código de script dentro de comentários HTML adequados para que navegadores podem funcionar corretamente.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>Isso produzirá o seguinte resultado -
Comentando folhas de estilo
Embora você aprenda a usar folhas de estilo com HTML em um tutorial separado, aqui você deve tomar nota de que, se estiver usando Folha de Estilo em Cascata (CSS) em seu código HTML, é recomendável colocar esse código de folha de estilo dentro de comentários HTML adequados para que os navegadores antigos funcionem corretamente.
Exemplo
<!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>Isso produzirá o seguinte resultado -
As imagens são muito importantes para embelezar, bem como para representar muitos conceitos complexos de forma simples em sua página da web. Este tutorial o guiará por etapas simples para usar imagens em suas páginas da web.
Inserir Imagem
Você pode inserir qualquer imagem em sua página da web usando <img>tag. A seguir está a sintaxe simples para usar essa tag.
<img src = "Image URL" ... attributes-list/>A tag <img> é uma tag vazia, o que significa que pode conter apenas uma lista de atributos e não possui tag de fechamento.
Exemplo
Para tentar o exemplo a seguir, vamos manter nosso arquivo HTML test.htm e o arquivo de imagem test.png no mesmo diretório -
<!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>Isso produzirá o seguinte resultado -
Você pode usar o arquivo de imagem PNG, JPEG ou GIF com base no seu conforto, mas certifique-se de especificar o nome do arquivo de imagem correto em srcatributo. O nome da imagem sempre diferencia maiúsculas de minúsculas.
o alt atributo é um atributo obrigatório que especifica um texto alternativo para uma imagem, se a imagem não puder ser exibida.
Definir localização da imagem
Normalmente mantemos todas as imagens em um diretório separado. Então, vamos manter o arquivo HTML test.htm em nosso diretório inicial e criar um subdiretórioimages dentro do diretório inicial onde manteremos nossa imagem test.png.
Exemplo
Supondo que a localização da nossa imagem seja "image / test.png", tente o seguinte exemplo -
<!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>Isso produzirá o seguinte resultado -
Definir largura / altura da imagem
Você pode definir a largura e a altura da imagem com base em seus requisitos usando width e heightatributos. Você pode especificar a largura e a altura da imagem em termos de pixels ou porcentagem de seu tamanho real.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Definir borda da imagem
Por padrão, a imagem terá uma borda em torno dela, você pode especificar a espessura da borda em termos de pixels usando o atributo border. Uma espessura de 0 significa que não há borda ao redor da imagem.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Definir alinhamento de imagem
Por padrão, a imagem será alinhada no lado esquerdo da página, mas você pode usar align atributo para defini-lo no centro ou à direita.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Gráficos da Web grátis
Para Free Web Graphics incluindo padrões, você pode olhar para Free Web Graphics
As tabelas HTML permitem que os autores da web organizem dados como texto, imagens, links, outras tabelas, etc. em linhas e colunas de células.
As tabelas HTML são criadas usando o <table> tag na qual o <tr> tag é usada para criar linhas de tabela e <td>tag é usada para criar células de dados. Os elementos em <td> são regulares e alinhados à esquerda por padrão
Exemplo
<!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>Isso produzirá o seguinte resultado -
Aqui o borderé um atributo da tag <table> e é usado para colocar uma borda em todas as células. Se você não precisa de uma borda, pode usar border = "0".
Título da Tabela
O título da tabela pode ser definido usando <th>tag. Esta tag será colocada para substituir a tag <td>, que é usada para representar a célula de dados real. Normalmente, você colocará sua linha superior como cabeçalho da tabela conforme mostrado abaixo, caso contrário, você pode usar o elemento <th> em qualquer linha. Os títulos, que são definidos na tag <th>, são centralizados e em negrito por padrão.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Atributos de Cellpadding e Cellspacing
Existem dois atributos chamados cellpadding e cellspacing, que você usará para ajustar o espaço em branco nas células da tabela. O atributo cellspacing define o espaço entre as células da tabela, enquanto o cellpadding representa a distância entre as bordas da célula e o conteúdo dentro de uma célula.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Atributos Colspan e Rowspan
Você vai usar colspanatributo se você deseja mesclar duas ou mais colunas em uma única coluna. De maneira semelhante, você usarárowspan se você deseja mesclar duas ou mais linhas.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Fundos de tabelas
Você pode definir o fundo da mesa usando uma das seguintes maneiras -
bgcolor atributo - você pode definir a cor de fundo para toda a tabela ou apenas para uma célula.
background atributo - você pode definir a imagem de fundo para a tabela inteira ou apenas para uma célula.
Você também pode definir a cor da borda usando bordercolor atributo.
Note- Os atributos bgcolor , background e bordercolor tornaram-se obsoletos no HTML5. Não use esses atributos.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Aqui está um exemplo de uso backgroundatributo. Aqui, usaremos uma imagem disponível no diretório / 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>Isso produzirá o seguinte resultado. Aqui, a imagem de fundo não se aplica ao cabeçalho da tabela.
Altura e largura da mesa
Você pode definir a largura e altura da mesa usando width e heightatributos. Você pode especificar a largura ou altura da tabela em termos de pixels ou em termos de porcentagem da área disponível da tela.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Legenda da Tabela
o captiontag servirá como um título ou explicação para a tabela e aparecerá no topo da tabela. Esta tag está obsoleta na versão mais recente de HTML / XHTML.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Cabeçalho, corpo e rodapé da tabela
As tabelas podem ser divididas em três partes - um cabeçalho, um corpo e um pé. A cabeça e o pé são bastante semelhantes aos cabeçalhos e rodapés de um documento processado em texto que permanecem os mesmos para todas as páginas, enquanto o corpo é o principal detentor do conteúdo da tabela.
Os três elementos para separar a cabeça, corpo e pés de uma mesa são -
<thead> - para criar um cabeçalho de tabela separado.
<tbody> - para indicar o corpo principal da tabela.
<tfoot> - para criar um rodapé de tabela separado.
Uma tabela pode conter vários elementos <tbody> para indicar diferentes páginas ou grupos de dados. Mas é notável que as tags <thead> e <tfoot> devem aparecer antes de <tbody>
Exemplo
<!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>Isso produzirá o seguinte resultado -
Mesas Aninhadas
Você pode usar uma tabela dentro de outra tabela. Não apenas tabelas, você pode usar quase todas as tags dentro da tag de dados da tabela <td>.
Exemplo
A seguir está o exemplo do uso de outra tabela e outras tags dentro de uma célula da tabela.
<!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>Isso produzirá o seguinte resultado -
O HTML oferece aos autores da web três maneiras de especificar listas de informações. Todas as listas devem conter um ou mais elementos de lista. As listas podem conter -
<ul>- Uma lista não ordenada. Isso listará os itens usando marcadores simples.
<ol>- Uma lista ordenada. Isso usará diferentes esquemas de números para listar seus itens.
<dl>- Uma lista de definições. Isso organiza seus itens da mesma maneira que são organizados em um dicionário.
Listas HTML não ordenadas
Uma lista não ordenada é uma coleção de itens relacionados que não possuem ordem ou sequência especial. Esta lista é criada usando HTML<ul>tag. Cada item da lista é marcado com um marcador.
Exemplo
<!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>Isso produzirá o seguinte resultado -
O tipo Attribute
Você pode usar typeatributo para a tag <ul> para especificar o tipo de marcador que você gosta. Por padrão, é um disco. A seguir estão as opções possíveis -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Listas ordenadas em HTML
Se você for solicitado a colocar seus itens em uma lista numerada em vez de com marcadores, será usada a lista ordenada em HTML. Esta lista é criada usando<ol>tag. A numeração começa em um e é incrementada em um para cada elemento de lista ordenado sucessivo marcado com <li>.
Exemplo
<!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>Isso produzirá o seguinte resultado -
O tipo Attribute
Você pode usar typeatributo para a tag <ol> para especificar o tipo de numeração que você gosta. Por padrão, é um número. A seguir estão as opções possíveis -
<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.Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo em que usamos <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>Isso produzirá o seguinte resultado -
O atributo inicial
Você pode usar startatributo para tag <ol> para especificar o ponto de partida da numeração que você precisa. A seguir estão as opções possíveis -
<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.Exemplo
A seguir está um exemplo onde usamos <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>Isso produzirá o seguinte resultado -
Listas de definição de HTML
HTML e XHTML suportam um estilo de lista que é chamado definition listsonde as entradas são listadas como em um dicionário ou enciclopédia. A lista de definições é a forma ideal de apresentar um glossário, lista de termos ou outra lista de nomes / valores.
A lista de definições usa as três tags a seguir.
- <dl> - Define o início da lista
- <dt> - Um termo
- <dd> - Definição de termo
- </dl> - Define o fim da lista
Exemplo
<!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>Isso produzirá o seguinte resultado -
Uma página da web pode conter vários links que levam você diretamente a outras páginas e até mesmo a partes específicas de uma determinada página. Esses links são conhecidos como hiperlinks.
Os hiperlinks permitem que os visitantes naveguem entre os sites clicando em palavras, frases e imagens. Assim, você pode criar hiperlinks usando textos ou imagens disponíveis em uma página da web.
Note- Recomendo que você faça um breve tutorial sobre como compreender URL
Vinculando documentos
Um link é especificado usando a tag HTML <a>. Esta tag é chamadaanchor tage qualquer coisa entre a tag de abertura <a> e a tag de fechamento </a> torna-se parte do link e o usuário pode clicar nessa parte para acessar o documento vinculado. A seguir está a sintaxe simples para usar a tag <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Exemplo
Vamos tentar seguir o exemplo com links http://www.tutorialspoint.com em sua página -
<!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>Isso produzirá o seguinte resultado, onde você pode clicar no link gerado para acessar a página inicial do Tutorials Point (neste exemplo).
O Atributo alvo
Nós usamos targetatributo em nosso exemplo anterior. Este atributo é usado para especificar o local onde o documento vinculado é aberto. A seguir estão as opções possíveis -
| Sr. Não | Opção e descrição |
|---|---|
| 1 | _blank Abre o documento vinculado em uma nova janela ou guia. |
| 2 | _self Abre o documento vinculado no mesmo quadro. |
| 3 | _parent Abre o documento vinculado no quadro pai. |
| 4 | _top Abre o documento vinculado em todo o corpo da janela. |
| 5 | targetframe Abre o documento vinculado em um targetframe nomeado . |
Exemplo
Tente o exemplo a seguir para entender a diferença básica em algumas opções fornecidas para o atributo de destino.
<!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>Isso produzirá o seguinte resultado, onde você pode clicar em links diferentes para entender a diferença entre as várias opções fornecidas para o atributo de destino.
Uso do caminho de base
Quando você vincula documentos HTML relacionados ao mesmo site, não é necessário fornecer um URL completo para cada link. Você pode se livrar dele se usar<base>tag no cabeçalho do documento HTML. Esta tag é usada para fornecer um caminho base para todos os links. Portanto, seu navegador concatenará o caminho relativo dado a esse caminho base e criará uma URL completa.
Exemplo
O exemplo a seguir usa a tag <base> para especificar a URL base e, posteriormente, podemos usar o caminho relativo para todos os links em vez de fornecer a URL completa para cada link.
<!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>Isso produzirá o seguinte resultado, onde você pode clicar no link gerado HTML Tutorial para chegar ao tutorial de HTML.
Agora o URL fornecido <a href = "/html/index.htm" está sendo considerado como <ahref = "http://www.tutorialspoint.com/html/index.htm"
Vinculando a uma seção da página
Você pode criar um link para uma seção específica de uma determinada página da web usando nameatributo. Este é um processo de duas etapas.
Note- O atributo name tornou-se obsoleto em HTML5. Não use este atributo. Use o atributo id e title .
Primeiro, crie um link para o lugar onde deseja chegar em uma página da web e nomeie-o usando a tag <a ...> da seguinte maneira -
<h1>HTML Text Links <a name = "top"></a></h1>A segunda etapa é criar um hiperlink para vincular o documento e local onde você deseja chegar -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Isso produzirá o seguinte link, onde você pode clicar no link gerado Go to the Top para chegar ao topo do tutorial HTML Text Link.
Go to the TopDefinir cores de link
Você pode definir as cores de seus links, links ativos e links visitados usando link, alink e vlink atributos da tag <body>.
Exemplo
Salve o seguinte em test.htm e abra-o em qualquer navegador da web para ver como link, alink e vlink atributos funcionam.
<!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>Isso produzirá o seguinte resultado. Basta verificar a cor do link antes de clicar nele, a seguir verifique a cor ao ativá-lo e quando o link for visitado.
Links para download
Você pode criar um link de texto para fazer o download de seus arquivos PDF, DOC ou ZIP. Isso é muito simples; você só precisa fornecer o URL completo do arquivo para download da seguinte forma -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Isso produzirá o link a seguir e será usado para baixar um arquivo.
Caixa de diálogo de download de arquivo
Às vezes, é desejável que você dê uma opção em que o usuário clique em um link e a caixa "Download de arquivo" seja exibida para o usuário em vez de exibir o conteúdo real. Isso é muito fácil e pode ser obtido usando um cabeçalho HTTP em sua resposta HTTP.
Por exemplo, se você quiser fazer um Filename arquivo baixável de um determinado link, sua sintaxe será a seguinte.
#!/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- Para obter mais detalhes sobre os programas PERL CGI, consulte o tutorial PERL e CGI .
Vimos como criar links de hipertexto usando texto e também aprendemos como usar imagens em nossas páginas da web. Agora, aprenderemos como usar imagens para criar hiperlinks.
Exemplo
É simples usar uma imagem como hiperlink. Só precisamos usar uma imagem dentro do hiperlink no lugar do texto, conforme mostrado abaixo -
<!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>Isso produzirá o seguinte resultado, onde você pode clicar nas imagens para acessar a página inicial do Tutorials Point.
Essa foi a maneira mais simples de criar hiperlinks usando imagens. A seguir, veremos como podemos criar links de imagens sensíveis ao mouse.
Imagens sensíveis ao mouse
Os padrões HTML e XHTML fornecem um recurso que permite incorporar muitos links diferentes em uma única imagem. Você pode criar links diferentes em uma única imagem com base nas diferentes coordenadas disponíveis na imagem. Uma vez que diferentes links são anexados a diferentes coordenadas, podemos clicar em diferentes partes da imagem para abrir os documentos de destino. Essas imagens sensíveis ao mouse são conhecidas como mapas de imagens.
Existem duas maneiras de criar mapas de imagens -
Server-side image maps - Isso é habilitado pelo ismap da tag <img> e requer acesso a um servidor e aplicativos de processamento de mapa de imagem relacionados.
Client-side image maps - Isso é criado com o usemap atributo da tag <img>, junto com as tags <map> e <area> correspondentes.
Mapas de imagem do lado do servidor
Aqui você simplesmente coloca sua imagem dentro de um hiperlink e usa ismapque o torna uma imagem especial e quando o usuário clica em algum lugar dentro da imagem, o navegador passa as coordenadas do ponteiro do mouse junto com a URL especificada na tag <a> para o servidor web. O servidor usa as coordenadas do ponteiro do mouse para determinar qual documento deve ser devolvido ao navegador.
Quando ismap é usado, o atributo href da tag contendo <a> deve conter a URL de um aplicativo de servidor como um cgi ou script PHP etc. para processar a solicitação de entrada com base nas coordenadas passadas.
As coordenadas da posição do mouse são pixels da tela contados a partir do canto superior esquerdo da imagem, começando com (0,0). As coordenadas, precedidas por um ponto de interrogação, são adicionadas ao final da URL.
Por exemplo, se um usuário clicar em 20 pixels acima e 30 pixels abaixo do canto superior esquerdo da imagem a seguir -
Que foi gerado pelo seguinte snippet de código -
<!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>Em seguida, o navegador envia os seguintes parâmetros de pesquisa para o servidor web, que podem ser processados por ismap.cgi script ou map file e você pode vincular quaisquer documentos que desejar a essas coordenadas -
/cgi-bin/ismap.cgi?20,30Desta forma, você pode atribuir diferentes links para diferentes coordenadas da imagem e quando essas coordenadas são clicadas, você pode abrir o documento vinculado correspondente. Para aprender mais sobreismapatributo, você pode verificar Como usar o ismap de imagem?
Note- Você aprenderá programação CGI quando estudar programação Perl. Você pode escrever seu script para processar essas coordenadas passadas usando PHP ou qualquer outro script. Por enquanto, vamos nos concentrar em aprender HTML e, mais tarde, você pode revisitar esta seção.
Mapas de imagem do lado do cliente
Os mapas de imagens do lado do cliente são habilitados pelo usemap atributo da tag <img /> e definido por tags de extensão <map> e <area> especiais.
A imagem que vai formar o mapa é inserida na página usando a tag <img /> como uma imagem normal, exceto que carrega um atributo extra chamado usemap. O valor do atributo usemap é o valor que será usado em uma tag <map> para vincular tags de mapa e imagem. O <map> junto com as tags <area> definem todas as coordenadas da imagem e links correspondentes.
A tag <area> dentro da tag do mapa, especifica a forma e as coordenadas para definir os limites de cada ponto ativo clicável disponível na imagem. Aqui está um exemplo do mapa de imagem -
<!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>Isso produzirá o seguinte resultado -
Sistema de coordenadas
O valor real de coords é totalmente dependente da forma em questão. Aqui está um resumo, a ser seguido por exemplos detalhados -
rect = x1 , y1 , x2 , y2
x 1 ey 1 são as coordenadas do canto superior esquerdo do retângulo; x 2 ey 2 são as coordenadas do canto inferior direito.
circle = xc , yc , radius
x c e y c são as coordenadas do centro do círculo e raio é o raio do círculo. Um círculo centrado em 200,50 com um raio de 25 teria o atributo coords = "200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
Os vários pares xy definem vértices (pontos) do polígono, com uma "linha" sendo desenhada de um ponto ao próximo ponto. Um polígono em forma de diamante com seu ponto superior em 20,20 e 40 pixels em seus pontos mais largos teria o atributo coords = "20,20,40,40,20,60,0,40" .
Todas as coordenadas são relativas ao canto superior esquerdo da imagem (0,0). Cada forma possui um URL relacionado. Você pode usar qualquer software de imagem para saber as coordenadas de diferentes posições.
Não é difícil colocar um link de e-mail em HTML em sua página da web, mas pode causar problemas desnecessários de spam para sua conta de e-mail. Existem pessoas que podem executar programas para coletar esses tipos de e-mails e depois usá-los para spam de várias maneiras.
Você pode ter outra opção para facilitar o envio de e-mails para você. Uma opção poderia ser usar formulários HTML para coletar dados do usuário e, em seguida, usar script PHP ou CGI para enviar um e-mail.
Um exemplo simples, consulte nosso Formulário de Contato . Recebemos o feedback do usuário usando este formulário e, em seguida, estamos usando um programa CGI que coleta essas informações e nos envia um email para o ID de email fornecido.
Note- Você aprenderá sobre Formulários HTML em Formulários HTML e aprenderá sobre CGI em nosso outro tutorialPerl CGI Programming.
Tag de email HTML
HTML <a>tag oferece a opção de especificar um endereço de e-mail para enviar um e-mail. Ao usar a tag <a> como uma tag de e-mail, você usarámailto: email addressjunto com o atributo href . A seguir está a sintaxe de usomailto em vez de usar http.
<a href = "mailto: [email protected]">Send Email</a>Este código irá gerar o seguinte link que você pode usar para enviar e-mail.
Send EmailAgora, se um usuário clicar neste link, ele iniciará um cliente de e-mail (como Lotus Notes, Outlook Express etc.) instalado no computador do usuário. Existe outro risco em usar esta opção para enviar e-mail porque se o usuário não tiver o cliente de e-mail instalado em seu computador, não será possível enviar e-mail.
Configurações padrão
Você pode especificar um assunto e corpo de email padrão junto com seu endereço de email. A seguir está o exemplo para usar o assunto e o corpo padrão.
<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>Este código irá gerar o seguinte link que você pode usar para enviar e-mail.
Send FeedbackOs quadros HTML são usados para dividir a janela do navegador em várias seções, onde cada seção pode carregar um documento HTML separado. Uma coleção de quadros na janela do navegador é conhecida como conjunto de quadros. A janela é dividida em quadros de forma semelhante às tabelas são organizadas: em linhas e colunas.
Desvantagens das molduras
Existem algumas desvantagens em usar frames, por isso nunca é recomendado usar frames em suas páginas da web -
Alguns dispositivos menores não conseguem lidar com frames frequentemente porque sua tela não é grande o suficiente para ser dividida.
Às vezes, sua página será exibida de forma diferente em computadores diferentes devido à resolução de tela diferente.
O botão Voltar do navegador pode não funcionar como o usuário espera.
Ainda existem poucos navegadores que não suportam a tecnologia de quadros.
Criação de quadros
Para usar frames em uma página, usamos a tag <frameset> em vez da tag <body>. A tag <frameset> define como dividir a janela em frames. orows atributo da tag <frameset> define quadros horizontais e colsatributo define quadros verticais. Cada quadro é indicado pela tag <frame> e define qual documento HTML deve ser aberto no quadro.
Note- A tag <frame> tornou-se obsoleta em HTML5. Não use este elemento.
Exemplo
A seguir está o exemplo para criar três quadros horizontais -
<!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>Isso produzirá o seguinte resultado -
Exemplo
Vamos colocar o exemplo acima da seguinte maneira, aqui substituímos o atributo de linhas por cols e alteramos sua largura. Isso criará todos os três quadros 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>Isso produzirá o seguinte resultado -
Os atributos da tag <frameset>
A seguir estão atributos importantes da tag <frameset> -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | cols Especifica quantas colunas estão contidas no conjunto de quadros e o tamanho de cada coluna. Você pode especificar a largura de cada coluna de uma das quatro maneiras - Valores absolutos em pixels. Por exemplo, para criar três quadros verticais, use cols = "100, 500, 100" . Uma porcentagem da janela do navegador. Por exemplo, para criar três quadros verticais, use cols = "10%, 80%, 10%" . Usando um símbolo curinga. Por exemplo, para criar três quadros verticais, use cols = "10%, *, 10%" . Nesse caso, o curinga ocupa o restante da janela. Como larguras relativas da janela do navegador. Por exemplo, para criar três quadros verticais, use cols = "3 *, 2 *, 1 *" . Esta é uma alternativa às porcentagens. Você pode usar larguras relativas da janela do navegador. Aqui, a janela é dividida em sextos: a primeira coluna ocupa metade da janela, a segunda ocupa um terço e a terceira ocupa um sexto. |
| 2 | rows Este atributo funciona como o atributo cols e assume os mesmos valores, mas é usado para especificar as linhas no conjunto de quadros. Por exemplo, para criar dois quadros horizontais, use rows = "10%, 90%" . Você pode especificar a altura de cada linha da mesma maneira como explicado acima para as colunas. |
| 3 | border Este atributo especifica a largura da borda de cada quadro em pixels. Por exemplo, border = "5". Um valor zero significa sem borda. |
| 4 | frameborder Este atributo especifica se uma borda tridimensional deve ser exibida entre os quadros. Este atributo assume o valor 1 (sim) ou 0 (não). Por exemplo, frameborder = "0" não especifica nenhuma borda. |
| 5 | framespacing Este atributo especifica a quantidade de espaço entre os quadros em um conjunto de quadros. Isso pode assumir qualquer valor inteiro. Por exemplo, framespacing = "10" significa que deve haver um espaçamento de 10 pixels entre cada frame. |
Os atributos da tag <frame>
A seguir estão os atributos importantes da tag <frame> -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | src Este atributo é usado para dar o nome do arquivo que deve ser carregado no quadro. Seu valor pode ser qualquer URL. Por exemplo, src = "/html/top_frame.htm" carregará um arquivo HTML disponível no diretório html. |
| 2 | name Este atributo permite que você dê um nome a um quadro. É usado para indicar em qual quadro um documento deve ser carregado. Isso é especialmente importante quando você deseja criar links em um quadro que carrega páginas em outro quadro; nesse caso, o segundo quadro precisa de um nome para se identificar como o destino do link. |
| 3 | frameborder Este atributo especifica se as bordas desse quadro são ou não mostradas; ele substitui o valor fornecido no atributo frameborder na tag <frameset> se um for fornecido, e isso pode assumir os valores 1 (sim) ou 0 (não). |
| 4 | marginwidth Este atributo permite que você especifique a largura do espaço entre a esquerda e a direita das bordas do quadro e o conteúdo do quadro. O valor é dado em pixels. Por exemplo marginwidth = "10". |
| 5 | marginheight Este atributo permite que você especifique a altura do espaço entre as partes superior e inferior das bordas do quadro e seu conteúdo. O valor é dado em pixels. Por exemplo marginheight = "10". |
| 6 | noresize Por padrão, você pode redimensionar qualquer quadro clicando e arrastando nas bordas de um quadro. O atributo noresize impede que um usuário seja capaz de redimensionar o quadro. Por exemplo noresize = "noresize". |
| 7 | scrolling Este atributo controla a aparência das barras de rolagem que aparecem no quadro. Isso leva os valores "sim", "não" ou "automático". Por exemplo, scrolling = "no" significa que não deve haver barras de rolagem. |
| 8 | longdesc Este atributo permite que você forneça um link para outra página contendo uma longa descrição do conteúdo do quadro. Por exemplo longdesc = "framedescription.htm" |
Suporte de navegador para frames
Se um usuário estiver usando qualquer navegador antigo ou qualquer navegador que não ofereça suporte a quadros, o elemento <noframes> deve ser exibido para o usuário.
Portanto, você deve colocar um elemento <body> dentro do elemento <noframes> porque o elemento <frameset> deve substituir o elemento <body>, mas se um navegador não entende o elemento <frameset>, ele deve entender o que está dentro Elemento <body> que está contido em um elemento <noframes>.
Você pode colocar uma mensagem interessante para o seu usuário com navegadores antigos. Por exemplo, Desculpe !! O seu navegador não suporta frames. conforme mostrado no exemplo acima.
Nome do quadro e atributos de destino
Um dos usos mais populares de frames é colocar barras de navegação em um frame e carregar as páginas principais em um frame separado.
Vamos ver o exemplo a seguir, onde um arquivo test.htm tem o seguinte código -
<!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>Aqui, criamos duas colunas para preencher com dois quadros. O primeiro quadro tem 200 pixels de largura e conterá a barra de menu de navegação implementada pormenu.htmArquivo. A segunda coluna preenche o espaço restante e conterá a parte principal da página e é implementada pormain.htmArquivo. Para todos os três links disponíveis na barra de menu, mencionamos o quadro de destino comomain_page, portanto, sempre que você clicar em qualquer um dos links na barra de menu, o link disponível será aberto na página principal.
A seguir está o conteúdo do arquivo 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>A seguir está o conteúdo do arquivo 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 carregamos test.htm arquivo, ele produz o seguinte resultado -
Agora você pode tentar clicar nos links disponíveis no painel esquerdo e ver o resultado. O atributo target também pode assumir um dos seguintes valores -
| Sr. Não | Opção e descrição |
|---|---|
| 1 | _self Carrega a página no quadro atual. |
| 2 | _blank Carrega uma página em uma nova janela do navegador. Abrindo uma nova janela. |
| 3 | _parent Carrega a página na janela pai, que, no caso de um único conjunto de quadros, é a janela principal do navegador. |
| 4 | _top Carrega a página na janela do navegador, substituindo quaisquer quadros atuais. |
| 5 | targetframe Carrega a página em um targetframe nomeado. |
Você pode definir um quadro embutido com tag HTML <iframe>. A tag <iframe> não está de alguma forma relacionada à tag <frameset>, em vez disso, ela pode aparecer em qualquer lugar do seu documento. A tag <iframe> define uma região retangular dentro do documento na qual o navegador pode exibir um documento separado, incluindo barras de rolagem e bordas. Um quadro embutido é usado para incorporar outro documento ao documento HTML atual.
o src atributo é usado para especificar o URL do documento que ocupa o quadro embutido.
Exemplo
A seguir está o exemplo para mostrar como usar o <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>Isso produzirá o seguinte resultado -
Os atributos da tag <Iframe>
A maioria dos atributos da tag <iframe>, incluindo nome, classe, frameborder, id, longdesc, marginheight, marginwidth, nome, rolagem, estilo e título se comportam exatamente como os atributos correspondentes para a tag <frame>.
Note- Os atributos frameborder , marginwidth , longdesc , scrolling , marginheight descontinuados no HTML5. Não use esses atributos.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | src Este atributo é usado para dar o nome do arquivo que deve ser carregado no quadro. Seu valor pode ser qualquer URL. Por exemplo, src = "/html/top_frame.htm" carregará um arquivo HTML disponível no diretório html. |
| 2 | name Este atributo permite que você dê um nome a um quadro. É usado para indicar em qual quadro um documento deve ser carregado. Isso é especialmente importante quando você deseja criar links em um quadro que carrega páginas em outro quadro; nesse caso, o segundo quadro precisa de um nome para se identificar como o destino do link. |
| 3 | frameborder Este atributo especifica se as bordas desse quadro são ou não mostradas; ele substitui o valor fornecido no atributo frameborder na tag <frameset> se um for fornecido, e isso pode assumir os valores 1 (sim) ou 0 (não). |
| 4 | marginwidth Este atributo permite que você especifique a largura do espaço entre a esquerda e a direita das bordas do quadro e o conteúdo do quadro. O valor é dado em pixels. Por exemplo marginwidth = "10". |
| 5 | marginheight Este atributo permite que você especifique a altura do espaço entre as partes superior e inferior das bordas do quadro e seu conteúdo. O valor é dado em pixels. Por exemplo marginheight = "10". |
| 6 | height Este atributo especifica a altura de <iframe>. |
| 7 | scrolling Este atributo controla a aparência das barras de rolagem que aparecem no quadro. Isso leva os valores "sim", "não" ou "automático". Por exemplo, scrolling = "no" significa que não deve haver barras de rolagem. |
| 8 | longdesc Este atributo permite que você forneça um link para outra página contendo uma longa descrição do conteúdo do quadro. Por exemplo longdesc = "framedescription.htm" |
| 9 | width Este atributo especifica a largura de <iframe>. |
Todos os elementos HTML podem ser categorizados em duas categorias (a) Elementos de Nível de Bloco (b)Elementos embutidos.
Elementos de Bloco
Os elementos do bloco aparecem na tela como se tivessem uma quebra de linha antes e depois deles. Por exemplo, o <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Os elementos />, <blockquote> e <address> são todos elementos de nível de bloco. Todos eles começam em sua própria nova linha e tudo o que os segue aparece em sua própria nova linha.
Elementos Inline
Os elementos embutidos, por outro lado, podem aparecer dentro de frases e não precisam aparecer em uma nova linha própria. O <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < os elementos code>, <cite>, <dfn>, <kbd> e <var> são todos elementos embutidos.
Agrupando Elementos HTML
Existem duas tags importantes que usamos com muita frequência para agrupar várias outras tags HTML (i) tag <div> e (ii) tag <span>
A tag <div>
Esta é a marca de nível de bloco muito importante, que desempenha um grande papel no agrupamento de várias outras marcas HTML e na aplicação de CSS no grupo de elementos. Mesmo agora, a tag <div> pode ser usada para criar um layout de página da web onde definimos diferentes partes (esquerda, direita, superior, etc.) da página usando a tag <div>. Esta tag não fornece nenhuma mudança visual no bloco, mas tem mais significado quando usada com CSS.
Exemplo
A seguir está um exemplo simples de tag <div>. Aprenderemos Cascading Style Sheet (CSS) em um capítulo separado, mas usamos aqui para mostrar o uso da 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>Isso produzirá o seguinte resultado -
A tag <span>
O HTML <span> é um elemento embutido e pode ser usado para agrupar elementos embutidos em um documento HTML. Esta tag também não fornece nenhuma mudança visual no bloco, mas tem mais significado quando usada com CSS.
A diferença entre a tag <span> e a tag <div> é que a tag <span> é usada com elementos embutidos, enquanto a tag <div> é usada com elementos em nível de bloco.
Exemplo
A seguir está um exemplo simples de tag <span>. Aprenderemos Cascading Style Sheet (CSS) em um capítulo separado, mas usamos aqui para mostrar o uso da 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>Isso produzirá o seguinte resultado -
Por padrão, o fundo da sua página da web é branco. Você pode não gostar, mas não se preocupe. O HTML oferece duas boas maneiras de decorar o fundo de sua página da web.
- Fundo HTML com cores
- Fundo HTML com imagens
Agora vamos ver as duas abordagens, uma por uma, usando exemplos apropriados.
Fundo Html com Cores
o bgcolor atributo é usado para controlar o plano de fundo de um elemento HTML, especificamente o corpo da página e planos de fundo da tabela.
Note- O atributo bgcolor obsoleto em HTML5. Não use este atributo.
A seguir está a sintaxe para usar o atributo bgcolor com qualquer tag HTML.
<tagname bgcolor = "color_value"...>Este color_value pode ser fornecido em qualquer um dos seguintes formatos -
<!-- 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)" >Exemplo
Aqui estão os exemplos para definir o plano de fundo de uma 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>Isso produzirá o seguinte resultado -
Fundo Html com Imagens
o backgroundO atributo também pode ser usado para controlar o plano de fundo de um elemento HTML, especificamente o corpo da página e os planos de fundo da tabela. Você pode especificar uma imagem para definir o plano de fundo de sua página ou tabela HTML.
Note- O atributo background foi descontinuado em HTML5. Não use este atributo.
A seguir está a sintaxe para usar o atributo background com qualquer tag HTML.
Note- O atributo background foi descontinuado e é recomendado o uso da folha de estilo para configuração de background.
<tagname background = "Image URL"...>Os formatos de imagem usados com mais frequência são imagens JPEG, GIF e PNG.
Exemplo
Aqui estão os exemplos para definir imagens de fundo de uma mesa.
<!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>Isso produzirá o seguinte resultado -
Planos de fundo padronizados e transparentes
Você pode ter visto muitos planos de fundo padrão ou transparentes em vários sites. Isso pode ser feito simplesmente usando uma imagem padronizada ou uma imagem transparente de fundo.
É sugerido que ao criar padrões ou imagens GIF ou PNG transparentes, use as menores dimensões possíveis, mesmo tão pequenas quanto 1x1, para evitar carregamento lento.
Exemplo
Aqui estão os exemplos para definir o padrão de fundo de uma mesa -
<!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>Isso produzirá o seguinte resultado -
As cores são muito importantes para dar uma boa aparência ao seu site. Você pode especificar cores no nível da página usando a tag <body> ou pode definir cores para tags individuais usandobgcolor atributo.
A tag <body> tem os seguintes atributos que podem ser usados para definir cores diferentes -
bgcolor - define uma cor para o fundo da página.
text - define uma cor para o corpo do texto.
alink - define uma cor para links ativos ou links selecionados.
link - define uma cor para o texto vinculado.
vlink- define uma cor para os links visitados - ou seja, para o texto com link que você já clicou.
Métodos de codificação de cores HTML
Existem três métodos diferentes para definir cores em sua página da web -
Color names - Você pode especificar nomes de cores diretamente como verde, azul ou vermelho.
Hex codes - Um código de seis dígitos que representa a quantidade de vermelho, verde e azul que compõe a cor.
Color decimal or percentage values - Este valor é especificado usando a propriedade rgb ().
Agora veremos esses esquemas de cores um por um.
Cores HTML - Nomes de cores
Você pode especificar um nome de cor direto para definir a cor do texto ou do fundo. O W3C listou 16 nomes de cores básicas que serão validadas com um validador HTML, mas existem mais de 200 nomes de cores diferentes suportados pelos principais navegadores.
Note- Verifique uma lista completa de nomes de cores HTML.
W3C Padrão 16 Cores
Aqui está a lista de nomes W3C Standard 16 Colors e é recomendado usá-los.
| Preto | cinzento | Prata | Branco | ||||
| Amarelo | Lima | Aqua | Fúcsia | ||||
| Vermelho | Verde | Azul | Roxa | ||||
| Marrom | Oliva | Marinha | Cerceta |
Exemplo
Aqui estão os exemplos para definir o plano de fundo de uma tag HTML pelo nome da cor -
<!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>Cores HTML - Códigos hexadecimais
Um hexadecimal é uma representação de 6 dígitos de uma cor. Os primeiros dois dígitos (RR) representam um valor vermelho, os próximos dois são um valor verde (GG) e os últimos são o valor azul (BB).
Um valor hexadecimal pode ser obtido de qualquer software gráfico como Adobe Photoshop, Paintshop Pro ou MS Paint.
Cada código hexadecimal será precedido por uma cerquilha ou cerquilha #. A seguir está uma lista de algumas cores usando notação hexadecimal.
| Cor | Cor HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Exemplo
Aqui estão os exemplos para definir o plano de fundo de uma tag HTML por código de cores em hexadecimal -
<!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>Cores HTML - Valores RGB
Este valor de cor é especificado usando o rgb( )propriedade. Essa propriedade assume três valores, um para vermelho, verde e azul. O valor pode ser um número inteiro entre 0 e 255 ou uma porcentagem.
Note - Todos os navegadores não suportam a propriedade rgb () de cor, portanto é recomendado não usá-la.
A seguir está uma lista para mostrar algumas cores usando valores RGB.
| Cor | Cor 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) |
Exemplo
Aqui estão os exemplos para definir o plano de fundo de uma tag HTML por código de cores usando valores 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>Cores de segurança do navegador
Aqui está a lista de 216 cores supostamente mais seguras e independentes do computador. Estas cores variam desde o código hexa 000000 até FFFFFF e serão suportadas por todos os computadores com 256 paletas de cores.
| 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 | Otox | 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 |
As fontes desempenham um papel muito importante em tornar um site mais amigável e aumentar a legibilidade do conteúdo. A face e a cor da fonte dependem inteiramente do computador e do navegador que está sendo usado para visualizar sua página, mas você pode usar HTML<font>tag para adicionar estilo, tamanho e cor ao texto em seu site. Você pode usar um<basefont> tag para definir todo o seu texto com o mesmo tamanho, face e cor.
A tag de fonte tem três atributos chamados size, color, e facepara personalizar suas fontes. Para alterar qualquer um dos atributos de fonte a qualquer momento em sua página da web, basta usar a tag <font>. O texto a seguir permanecerá alterado até que você feche com a tag </font>. Você pode alterar um ou todos os atributos de fonte em uma tag <font>.
Note−As tags font e basefont estão obsoletas e devem ser removidas em uma versão futura do HTML. Portanto, eles não devem ser usados, é sugerido o uso de estilos CSS para manipular suas fontes. Mas ainda para fins de aprendizado, este capítulo irá explicar as tags de fonte e base em detalhes.
Definir tamanho da fonte
Você pode definir o tamanho da fonte do conteúdo usando sizeatributo. O intervalo de valores aceitos é de 1 (menor) a 7 (maior). O tamanho padrão de uma fonte é 3.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Tamanho Relativo da Fonte
Você pode especificar quantos tamanhos maiores ou quantos tamanhos menores que o tamanho da fonte predefinida deve ser. Você pode especificar como<font size = "+n"> ou <font size = "−n">
Exemplo
<!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>Isso produzirá o seguinte resultado -
Configurando a face da fonte
Você pode definir a face da fonte usando o atributo face, mas esteja ciente de que se o usuário que estiver visualizando a página não tiver a fonte instalada, ele não poderá vê-la. Em vez disso, o usuário verá a fonte padrão aplicável ao computador do usuário.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Especifique fontes alternativas
Um visitante só poderá ver sua fonte se a tiver instalada em seu computador. Portanto, é possível especificar duas ou mais alternativas de faces de fonte listando os nomes das faces da fonte, separados por vírgula.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">Quando sua página for carregada, o navegador exibirá a primeira fonte disponível. Se nenhuma das fontes fornecidas estiver instalada, ele exibirá a fonte padrão Times New Roman .
Note - Verifique uma lista completa de HTML Standard Fonts.
Configurando a cor da fonte
Você pode definir qualquer cor de fonte que você gosta usando o atributo de cor . Você pode especificar a cor desejada pelo nome da cor ou pelo código hexadecimal dessa cor.
Note - Você pode verificar uma lista completa de HTML Color Name with Codes.
Exemplo
<!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>Isso produzirá o seguinte resultado -
O elemento <basefont>
O elemento <basefont> deve definir um tamanho de fonte, cor e tipo de fonte padrão para qualquer parte do documento que não esteja contida em uma tag <font>. Você pode usar os elementos <font> para substituir as configurações <basefont>.
A tag <basefont> também leva atributos de cor, tamanho e face e suportará a configuração de fonte relativa, dando a size um valor de +1 para um tamanho maior ou -2 para dois tamanhos menores.
Exemplo
<!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>Isso produzirá o seguinte resultado -
Formulários HTML são necessários quando você deseja coletar alguns dados do visitante do site. Por exemplo, durante o registro do usuário, você gostaria de coletar informações como nome, endereço de e-mail, cartão de crédito, etc.
Um formulário receberá a entrada do visitante do site e, em seguida, irá publicá-lo em um aplicativo de back-end, como CGI, ASP Script ou script de PHP, etc. a aplicação.
Existem vários elementos de formulário disponíveis, como campos de texto, campos de área de texto, menus suspensos, botões de opção, caixas de seleção, etc.
O HTML <form> tag é usada para criar um formulário HTML e tem a seguinte sintaxe -
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Atributos de formulário
Além dos atributos comuns, a seguir está uma lista dos atributos de formulário usados com mais frequência -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | action Script de back-end pronto para processar seus dados transmitidos. |
| 2 | method Método a ser usado para fazer upload de dados. Os mais freqüentemente usados são os métodos GET e POST. |
| 3 | target Especifique a janela ou quadro de destino onde o resultado do script será exibido. Aceita valores como _blank, _self, _parent etc. |
| 4 | enctype Você pode usar o atributo enctype para especificar como o navegador codifica os dados antes de enviá-los ao servidor. Os valores possíveis são - application/x-www-form-urlencoded - Este é o método padrão que a maioria dos formulários usa em cenários simples. mutlipart/form-data - É usado quando você deseja fazer upload de dados binários na forma de arquivos como imagem, arquivo de texto, etc. |
Note- Você pode consultar Perl e CGI para obter detalhes sobre como funciona o upload de dados de formulário.
Controles de formulário HTML
Existem diferentes tipos de controles de formulário que você pode usar para coletar dados usando o formulário HTML -
- Controles de entrada de texto
- Controles de caixas de seleção
- Controles da caixa de rádio
- Selecione os controles da caixa
- Caixas de seleção de arquivo
- Controles ocultos
- Botões clicáveis
- Botão Enviar e Redefinir
Controles de entrada de texto
Existem três tipos de entrada de texto usados em formulários -
Single-line text input controls- Este controle é usado para itens que requerem apenas uma linha de entrada do usuário, como caixas de pesquisa ou nomes. Eles são criados usando HTML<input> tag.
Password input controls- Esta também é uma entrada de texto de uma linha, mas mascara o caractere assim que o usuário o insere. Eles também são criados usando a tag HTMl <input>.
Multi-line text input controls- É usado quando o usuário precisa fornecer detalhes que podem ser mais longos do que uma única frase. Os controles de entrada de várias linhas são criados usando HTML<textarea> tag.
Controles de entrada de texto de linha única
Este controle é usado para itens que requerem apenas uma linha de entrada do usuário, como caixas de pesquisa ou nomes. Eles são criados usando a tag HTML <input>.
Exemplo
Aqui está um exemplo básico de entrada de texto de uma linha usada para usar o nome e o sobrenome -
<!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>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos da tag <input> para a criação de campo de texto.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de texto será definido como text. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value Isso pode ser usado para fornecer um valor inicial dentro do controle. |
| 4 | size Permite especificar a largura do controle de entrada de texto em termos de caracteres. |
| 5 | maxlength Permite especificar o número máximo de caracteres que um usuário pode inserir na caixa de texto. |
Controles de entrada de senha
Essa também é uma entrada de texto de uma linha, mas mascara o caractere assim que o usuário o insere. Eles também são criados usando a tag HTML <input>, mas o atributo type é definido comopassword.
Exemplo
Aqui está um exemplo básico de uma entrada de senha de linha única usada para obter a senha do usuário -
<!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>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos da tag <input> para a criação do campo de senha.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de senha será definido como password. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value Isso pode ser usado para fornecer um valor inicial dentro do controle. |
| 4 | size Permite especificar a largura do controle de entrada de texto em termos de caracteres. |
| 5 | maxlength Permite especificar o número máximo de caracteres que um usuário pode inserir na caixa de texto. |
Controles de entrada de texto de várias linhas
Isso é usado quando o usuário é solicitado a fornecer detalhes que podem ser mais longos do que uma única frase. Os controles de entrada de várias linhas são criados usando a tag HTML <textarea>.
Exemplo
Aqui está um exemplo básico de uma entrada de texto de várias linhas usada para obter a descrição do item -
<!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>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos para a tag <textarea>.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 2 | rows Indica o número de linhas da caixa da área de texto. |
| 3 | cols Indica o número de colunas da caixa da área de texto |
Controle de caixa de seleção
As caixas de seleção são usadas quando mais de uma opção deve ser selecionada. Eles também são criados usando a tag HTML <input>, mas o atributo type é definido comocheckbox..
Exemplo
Aqui está um exemplo de código HTML para um formulário com duas caixas de seleção -
<!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>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos para a tag <checkbox>.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de caixa de seleção será definido como checkbox.. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value O valor que será usado se a caixa de seleção estiver marcada. |
| 4 | checked Defina como marcado se quiser selecioná-lo por padrão. |
Controle de botão de rádio
Os botões de rádio são usados quando não há muitas opções, apenas uma opção deve ser selecionada. Eles também são criados usando a tag HTML <input>, mas o atributo type é definido comoradio.
Exemplo
Aqui está um exemplo de código HTML para um formulário com dois botões de opção -
<!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>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos para o botão de rádio.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | type Indica o tipo de controle de entrada e para controle de entrada de caixa de seleção será definido como rádio. |
| 2 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 3 | value O valor que será usado se a caixa de rádio for selecionada. |
| 4 | checked Defina como marcado se quiser selecioná-lo por padrão. |
Selecionar caixa de controle
Uma caixa de seleção, também chamada de caixa suspensa, que oferece a opção de listar várias opções na forma de lista suspensa, de onde um usuário pode selecionar uma ou mais opções.
Exemplo
Aqui está um exemplo de código HTML para um formulário com uma caixa suspensa
<!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>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos importantes da tag <select> -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 2 | size Isso pode ser usado para apresentar uma caixa de lista de rolagem. |
| 3 | multiple Se definido como "múltiplo", então permite que um usuário selecione vários itens do menu. |
A seguir está a lista de atributos importantes da tag <option> -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | value O valor que será usado se uma opção na caixa de seleção for selecionada. |
| 2 | selected Especifica que esta opção deve ser o valor selecionado inicialmente quando a página carrega. |
| 3 | label Uma forma alternativa de opções de rotulagem |
Caixa de upload de arquivo
Se você quiser permitir que um usuário carregue um arquivo em seu site, você precisará usar uma caixa de upload de arquivo, também conhecida como caixa de seleção de arquivo. Isso também é criado usando o elemento <input>, mas o atributo type é definido comofile.
Exemplo
Aqui está um exemplo de código HTML para um formulário com uma caixa de upload de arquivo -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Isso produzirá o seguinte resultado -
Atributos
A seguir está a lista de atributos importantes da caixa de upload de arquivo -
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | name Utilizado para dar um nome ao controle que é enviado ao servidor para ser reconhecido e obter o valor. |
| 2 | accept Especifica os tipos de arquivos que o servidor aceita. |
Controles de botão
Existem várias maneiras em HTML de criar botões clicáveis. Você também pode criar um botão clicável usando a tag <input> definindo seu atributo type comobutton. O atributo type pode assumir os seguintes valores -
| Sr. Não | Tipo e descrição |
|---|---|
| 1 | submit Isso cria um botão que envia automaticamente um formulário. |
| 2 | reset Isso cria um botão que redefine automaticamente os controles do formulário para seus valores iniciais. |
| 3 | button Isso cria um botão que é usado para acionar um script do lado do cliente quando o usuário clica nesse botão. |
| 4 | image Isso cria um botão clicável, mas podemos usar uma imagem como plano de fundo do botão. |
Exemplo
Aqui está um exemplo de código HTML para um formulário com três tipos de botões -
<!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>Isso produzirá o seguinte resultado -
Controles de formulários ocultos
Os controles de formulário ocultos são usados para ocultar dados dentro da página que mais tarde podem ser enviados ao servidor. Esse controle fica oculto dentro do código e não aparece na página real. Por exemplo, o seguinte formulário oculto está sendo usado para manter o número da página atual. Quando um usuário clicar na próxima página, o valor do controle oculto será enviado ao servidor da web e lá ele decidirá qual página será exibida a seguir com base na página atual passada.
Exemplo
Aqui está um exemplo de código HTML para mostrar o uso de controle oculto -
<!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>Isso produzirá o seguinte resultado -
Às vezes, você precisa adicionar música ou vídeo em sua página da web. A maneira mais fácil de adicionar vídeo ou som ao seu site é incluir a tag HTML especial chamada<embed>. Esta tag faz com que o próprio navegador inclua controles para a multimídia fornecida automaticamente pelo navegador que suporta a tag <embed> e o tipo de mídia fornecido.
Você também pode incluir um <noembed>tag para os navegadores que não reconhecem a tag <embed>. Você pode, por exemplo, usar <embed> para exibir um filme de sua escolha, e<noembed> para exibir uma única imagem JPG se o navegador não suportar a tag <embed>.
Exemplo
Aqui está um exemplo simples para reproduzir um arquivo midi incorporado -
<!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>Os atributos da tag <embed>
A seguir está a lista de atributos importantes que podem ser usados com a tag <embed>.
Note−Os atributos align e autostart tornaram-se obsoletos no HTML5. Não use esses atributos.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | align Determina como alinhar o objeto. Ele pode ser definido como centro, esquerda ou direita . |
| 2 | autostart Este atributo booleano indica se a mídia deve iniciar automaticamente. Você pode defini-lo como verdadeiro ou falso. |
| 3 | loop Especifica se o som deve ser reproduzido continuamente (definir o loop como verdadeiro), um certo número de vezes (um valor positivo) ou não (falso) |
| 4 | playcount Especifica o número de vezes para reproduzir o som. Esta é uma opção alternativa para o loop se você estiver usando o IE. |
| 5 | hidden Especifica se o objeto multimídia deve ser mostrado na página. Um valor falso significa não e valores verdadeiros significa sim. |
| 6 | width Largura do objeto em pixels |
| 7 | height Altura do objeto em pixels |
| 8 | name Um nome usado para fazer referência ao objeto. |
| 9 | src URL do objeto a ser incorporado. |
| 10 | volume Controla o volume do som. Pode ser de 0 (desligado) a 100 (volume total). |
Tipos de vídeo suportados
Você pode usar vários tipos de mídia como filmes Flash (.swf), AVI's (.avi) e tipos de arquivo MOVs (.mov) dentro da tag embed.
.swf files - são os tipos de arquivo criados pelo programa Flash da Macromedia.
.wmv files - são os tipos de arquivo de vídeo de mídia do Windows da Microsoft.
.mov files - são o formato Quick Time Movie da Apple.
.mpeg files - são arquivos de filme criados pelo 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>Isso produzirá o seguinte resultado -
Áudio de fundo
Você pode usar HTML <bgsound>tag para reproduzir uma trilha sonora no plano de fundo de sua página da web. Esta marca é suportada apenas pelo Internet Explorer e a maioria dos outros navegadores a ignora. Ele baixa e reproduz um arquivo de áudio quando o documento host é baixado pela primeira vez pelo usuário e exibido. O arquivo de som de fundo também será reproduzido sempre que o usuário atualizar o navegador.
Note- A tag bgsound está obsoleta e deve ser removida em uma versão futura do HTML. Portanto, eles não devem ser usados, é sugerido o uso de tag de áudio HTML5 para adicionar som. Mas ainda para fins de aprendizado, este capítulo irá explicar a tag bgsound em detalhes.
Esta tag tem apenas dois atributos loop e src . Ambos os atributos têm o mesmo significado explicado acima.
Aqui está um exemplo simples para reproduzir um pequeno arquivo 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>Isso produzirá a tela em branco. Esta tag não exibe nenhum componente e permanece oculta.
O Internet Explorer também pode lidar com apenas três arquivos de formato de som diferentes - wav, o formato nativo para PCs; au, o formato nativo para a maioria das estações de trabalho Unix; e MIDI, um esquema universal de codificação de música.
Tag de objeto HTML
HTML 4 apresenta o <object>elemento, que oferece uma solução multifuncional para inclusão de objeto genérico. o<object> O elemento permite que os autores de HTML especifiquem tudo o que é exigido por um objeto para sua apresentação por um agente do usuário.
Aqui estão alguns exemplos -
Exemplo 1
Você pode incorporar um documento HTML em um documento HTML da seguinte maneira -
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Aqui, o atributo alt entrará em cena se o navegador não suportar tag de objeto .
Exemplo - 2
Você pode incorporar um documento PDF em um documento HTML da seguinte maneira -
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Exemplo - 3
Você pode especificar alguns parâmetros relacionados ao documento com o <param>tag. Aqui está um exemplo para incorporar um arquivo 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>Exemplo - 4
Você pode adicionar um documento Flash da seguinte maneira -
<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>Exemplo - 5
Você pode adicionar um miniaplicativo Java em um documento HTML da seguinte maneira -
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>o classidatributo identifica qual versão do Java Plug-in usar. Você pode usar o atributo codebase opcional para especificar se e como fazer o download do JRE.
Uma marca de seleção HTML é um pedaço de texto de rolagem exibido horizontalmente ou verticalmente em sua página da web, dependendo das configurações. Isso é criado usando a tag HTML <marquees>.
Note- A tag <marquee> tornou-se obsoleta em HTML5. Não use este elemento; em vez disso, você pode usar JavaScript e CSS para criar tais efeitos.
Sintaxe
Uma sintaxe simples para usar a tag HTML <marquee> é a seguinte -
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>Os atributos da tag <marquee>
A seguir está a lista de atributos importantes que podem ser usados com a tag <marquee>.
| Sr. Não | Atributo e descrição |
|---|---|
| 1 | width Isso especifica a largura do letreiro. Pode ser um valor como 10 ou 20% etc. |
| 2 | height Isso especifica a altura do letreiro. Pode ser um valor como 10 ou 20% etc. |
| 3 | direction Isso especifica a direção na qual o letreiro deve rolar. Pode ser um valor como cima, baixo, esquerda ou direita . |
| 4 | behavior Isso especifica o tipo de rolagem do letreiro. Isso pode ter um valor como scroll, slide e alternate . |
| 5 | scrolldelay Isso especifica quanto tempo atrasar entre cada salto. Isso terá um valor como 10 etc. |
| 6 | scrollamount Isso especifica a velocidade do texto do letreiro. Isso pode ter um valor como 10 etc. |
| 7 | loop Isso especifica quantas vezes o loop. O valor padrão é INFINITE, o que significa que o letreiro faz um loop infinito. |
| 8 | bgcolor Isso especifica a cor de fundo em termos de nome da cor ou valor hexadecimal da cor. |
| 9 | hspace Isso especifica o espaço horizontal ao redor do letreiro. Pode ser um valor como 10 ou 20% etc. |
| 10 | vspace Isso especifica o espaço vertical em torno do letreiro. Pode ser um valor como 10 ou 20% etc. |
Abaixo estão alguns exemplos para demonstrar o uso da marca de seleção.
Exemplos - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>Isso produzirá o seguinte resultado -
Exemplos - 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>Isso produzirá o seguinte resultado -
Exemplos - 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>Isso produzirá o seguinte resultado -
Exemplos - 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>Isso produzirá o seguinte resultado -
Aprendemos que um documento HTML típico terá a seguinte estrutura -
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Este capítulo fornecerá mais detalhes sobre a parte do cabeçalho que é representada pela tag HTML <head>. A tag <head> é um contêiner de várias tags importantes, como tags <title>, <meta>, <link>, <base>, <style>, <script> e <noscript>.
A tag HTML <title>
A tag HTML <title> é usada para especificar o título do documento HTML. A seguir está um exemplo para dar um título a um documento HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Isso produzirá o seguinte resultado -
A tag HTML <meta>
A tag HTML <meta> é usada para fornecer metadados sobre o documento HTML que inclui informações sobre a expiração da página, autor da página, lista de palavras-chave, descrição da página etc.
A seguir estão alguns dos usos importantes da tag <meta> dentro de um documento HTML -
<!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>Isso produzirá o seguinte resultado -
A tag HTML <base>
A tag HTML <base> é usada para especificar o URL base para todos os URLs relativos em uma página, o que significa que todos os outros URLs serão concatenados no URL base durante a localização do item fornecido.
Por exemplo, todas as páginas e imagens fornecidas serão pesquisadas após prefixar os URLs fornecidos com o URL base http://www.tutorialspoint.com/ diretório -
<!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>Isso produzirá o seguinte resultado -
Mas se você alterar a URL base para outra coisa, por exemplo, se a URL base for http://www.tutorialspoint.com/home, a imagem e outros links fornecidos se tornarão como http://www.tutorialspoint.com/home/images /logo.png e http://www.tutorialspoint.com/html/index.htm
A tag HTML <link>
A tag HTML <link> é usada para especificar relacionamentos entre o documento atual e o recurso externo. A seguir está um exemplo para vincular um arquivo de folha de estilo externo disponível emcss subdiretório dentro da raiz da web -
<!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>Isso produzirá o seguinte resultado -
A tag HTML <style>
A tag HTML <style> é usada para especificar a folha de estilo do documento HTML atual. A seguir está um exemplo para definir algumas regras de folha de estilo dentro da tag <style> -
<!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>Isso produzirá o seguinte resultado -
Note- Para saber como funciona a Folha de Estilos em Cascata, por favor, verifique um tutorial separado disponível em css
A tag HTML <script>
A tag HTML <script> é usada para incluir um arquivo de script externo ou para definir um script interno para o documento HTML. A seguir está um exemplo em que estamos usando JavaScript para definir uma função JavaScript simples -
<!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>Isso produzirá o seguinte resultado, onde você pode tentar clicar no botão fornecido -
Note- Para saber como funciona o JavaScript, consulte um tutorial separado disponível em javascript
Cascading Style Sheets (CSS) descreve como os documentos são apresentados nas telas, impressos ou talvez como são pronunciados. O W3C tem promovido ativamente o uso de folhas de estilo na Web desde que o consórcio foi fundado em 1994.
Cascading Style Sheets (CSS) fornece alternativas fáceis e eficazes para especificar vários atributos para as tags HTML. Usando CSS, você pode especificar várias propriedades de estilo para um determinado elemento HTML. Cada propriedade possui um nome e um valor, separados por dois pontos (:). Cada declaração de propriedade é separada por um ponto e vírgula (;).
Exemplo
Primeiro, vamos considerar um exemplo de documento HTML que usa a tag <font> e atributos associados para especificar a cor do texto e o tamanho da fonte -
Note- A tag da fonte tornou-se obsoleta e deve ser removida em uma versão futura do HTML. Portanto, eles não devem ser usados, é sugerido o uso de estilos CSS para manipular suas fontes. Mas ainda para fins de aprendizado, este capítulo trabalhará com um exemplo usando a tag font.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>Podemos reescrever o exemplo acima com a ajuda da Folha de Estilo da seguinte maneira -
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>Isso produzirá o seguinte resultado -
Você pode usar CSS de três maneiras em seu documento HTML -
External Style Sheet - Defina regras de folha de estilo em um arquivo .css separado e, a seguir, inclua esse arquivo em seu documento HTML usando a tag HTML <link>.
Internal Style Sheet - Defina regras de folha de estilo na seção de cabeçalho do documento HTML usando a tag <style>.
Inline Style Sheet - Defina regras de folha de estilo diretamente junto com os elementos HTML usando style atributo.
Vamos ver todos os três casos um por um com a ajuda de exemplos adequados.
Folha de estilo externa
Se você precisa usar sua folha de estilo para várias páginas, então é sempre recomendado definir uma folha de estilo comum em um arquivo separado. Um arquivo de folha de estilo em cascata terá extensão como.css e será incluído em arquivos HTML usando a tag <link>.
Exemplo
Considere que definimos um arquivo de folha de estilo style.css que tem as seguintes regras -
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}Aqui definimos três regras CSS que serão aplicáveis a três classes diferentes definidas para as tags HTML. Eu sugiro que você não se preocupe em como essas regras estão sendo definidas porque você as aprenderá enquanto estuda CSS. Agora vamos usar o arquivo CSS externo acima em nosso seguinte documento HTML -
<!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>Isso produzirá o seguinte resultado -
Folha de estilo interna
Se você deseja aplicar as regras da folha de estilo a um único documento, pode incluir essas regras na seção de cabeçalho do documento HTML usando a tag <style>.
As regras definidas na folha de estilo interna substituem as regras definidas em um arquivo CSS externo.
Exemplo
Vamos reescrever o exemplo acima mais uma vez, mas aqui vamos escrever regras de folha de estilo no mesmo documento HTML usando a tag <style> -
<!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>Isso produzirá o seguinte resultado -
Folha de Estilo Inline
Você pode aplicar regras de folha de estilo diretamente a qualquer elemento HTML usando styleatributo da tag relevante. Isso deve ser feito apenas quando você estiver interessado em fazer uma alteração específica em qualquer elemento HTML apenas.
As regras definidas em linha com o elemento substituem as regras definidas em um arquivo CSS externo, bem como as regras definidas no elemento <style>.
Exemplo
Vamos reescrever o exemplo acima mais uma vez, mas aqui vamos escrever regras de folha de estilo junto com os elementos HTML usando style atributo desses elementos.
<!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>Isso produzirá o seguinte resultado -
UMA scripté um pequeno programa que pode adicionar interatividade ao seu site. Por exemplo, um script pode gerar uma mensagem de caixa de alerta pop-up ou fornecer um menu suspenso. Este script pode ser escrito usando JavaScript ou VBScript.
Você pode escrever várias pequenas funções, chamadas manipuladores de eventos, usando qualquer uma das linguagens de script e, em seguida, acionar essas funções usando atributos HTML.
Hoje em dia, apenas JavaScript e as estruturas associadas estão sendo usadas pela maioria dos desenvolvedores da web, o VBScript nem mesmo é suportado por vários navegadores principais.
Você pode manter o código JavaScript em um arquivo separado e incluí-lo onde for necessário ou pode definir a funcionalidade dentro do próprio documento HTML. Vamos ver os dois casos um por um com exemplos adequados.
JavaScript externo
Se você pretende definir uma funcionalidade que será usada em vários documentos HTML, é melhor manter essa funcionalidade em um arquivo JavaScript separado e incluir esse arquivo em seus documentos HTML. Um arquivo JavaScript terá extensão como.js e será incluído em arquivos HTML usando a tag <script>.
Exemplo
Considere que definimos uma pequena função usando JavaScript em script.js que tem o seguinte código -
function Hello() {
alert("Hello, World");
}Agora vamos usar o arquivo JavaScript externo acima em nosso seguinte documento HTML -
<!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>Isso produzirá o seguinte resultado, onde você pode tentar clicar no botão fornecido -
Script Interno
Você pode escrever seu código de script diretamente em seu documento HTML. Normalmente mantemos o código do script no cabeçalho do documento usando a tag <script>, caso contrário, não há restrição e você pode colocar seu código-fonte em qualquer lugar do documento, exceto dentro da tag <script>.
Exemplo
<!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>Isso produzirá o seguinte resultado, onde você pode tentar clicar no botão fornecido -
Manipuladores de eventos
Os manipuladores de eventos nada mais são do que funções definidas simplesmente que podem ser chamadas contra qualquer evento de mouse ou teclado. Você pode definir sua lógica de negócios dentro de seu manipulador de eventos, que pode variar de um a 1000 códigos de linha.
O exemplo a seguir explica como escrever um manipulador de eventos. Vamos escrever uma função simples EventHandler () no cabeçalho do documento. Chamaremos essa função quando qualquer usuário passar o mouse sobre um parágrafo.
<!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>Agora, isso produzirá o seguinte resultado. Passe o mouse sobre esta linha e veja o resultado -
Ocultar scripts de navegadores mais antigos
Embora a maioria (senão todos) dos navegadores de hoje em dia suporte JavaScript, alguns navegadores mais antigos ainda não. Se um navegador não oferecer suporte a JavaScript, em vez de executar seu script, ele exibirá o código para o usuário. Para evitar isso, você pode simplesmente colocar comentários HTML em torno do script, conforme mostrado abaixo.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>O elemento <noscript>
Você também pode fornecer informações alternativas para os usuários cujos navegadores não suportam scripts e para os usuários que desativaram a opção de script em seus navegadores. Você pode fazer isso usando o<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>Linguagem de script padrão
Pode haver uma situação em que você incluirá vários arquivos de script e, em última análise, usará várias tags <script>. Você pode especificar uma linguagem de script padrão para todas as suas tags de script . Isso evita que você especifique o idioma sempre que usar uma tag de script na página. Abaixo está o exemplo -
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Observe que você ainda pode substituir o padrão especificando um idioma na tag de script.
Um layout de página da web é muito importante para dar uma aparência melhor ao seu site. Leva um tempo considerável para projetar o layout de um site com ótima aparência.
Hoje em dia, todos os sites modernos estão usando CSS e estrutura baseada em JavaScript para criar sites responsivos e dinâmicos, mas você pode criar um bom layout usando tabelas HTML simples ou tags de divisão em combinação com outras tags de formatação. Este capítulo lhe dará alguns exemplos de como criar um layout simples, mas funcional para sua página da Web usando HTML puro e seus atributos.
Layout HTML - Usando tabelas
A maneira mais simples e popular de criar layouts é usando a tag HTML <table>. Essas tabelas são organizadas em colunas e linhas, para que você possa utilizar essas linhas e colunas da maneira que desejar.
Exemplo
Por exemplo, o seguinte exemplo de layout HTML é obtido usando uma tabela com 3 linhas e 2 colunas, mas a coluna de cabeçalho e rodapé abrange ambas as colunas usando o atributo colspan -
<!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>Isso produzirá o seguinte resultado -
Layout de múltiplas colunas - usando tabelas
Você pode projetar sua página da web para colocar o conteúdo da web em várias páginas. Você pode manter seu conteúdo na coluna do meio e você pode usar a coluna da esquerda para usar o menu e a coluna da direita pode ser usada para colocar propaganda ou alguma outra coisa. Este layout será muito semelhante ao que temos em nosso site tutorialspoint.com.
Exemplo
Aqui está um exemplo para criar um layout de três colunas -
<!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>Isso produzirá o seguinte resultado -
Layouts HTML - Usando DIV, SPAN
O elemento <div> é um elemento de nível de bloco usado para agrupar elementos HTML. Enquanto a tag <div> é um elemento de nível de bloco, o elemento HTML <span> é usado para agrupar elementos em um nível embutido.
Embora possamos obter layouts muito bons com tabelas HTML, as tabelas não foram realmente projetadas como uma ferramenta de layout. As tabelas são mais adequadas para apresentar dados tabulares.
Note - Este exemplo usa Cascading Style Sheet (CSS), portanto, antes de entender este exemplo, você precisa ter um melhor entendimento de como funciona o CSS.
Exemplo
Aqui, tentaremos obter o mesmo resultado usando a tag <div> junto com CSS, o que quer que você tenha alcançado usando a tag <table> no exemplo anterior.
<!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>Isso produzirá o seguinte resultado -
Você pode criar um layout melhor usando DIV, SPAN junto com CSS. Para obter mais informações sobre CSS, consulte o tutorial CSS.