Curso de HTML/Introdução: diferenças entre revisões
| [edição verificada] | [edição verificada] |
Conteúdo apagado Conteúdo adicionado
m Robô: A corrigir o redireccionamento duplo para Curso de HTML/Fundamentos/Introdução/Contexto |
Ir melhorando essa página, até... chegar em uma boa qualidade. Depois distribuímos o conteúdo em mais páginas (de forma bem pensada). |
||
Linha 1:
== A sintaxe XHTML ==
O '''XHTML''' é a reformulação do [[w:HTML|HTML]] baseada no [[w:XML|XML]]. O XHTML tem actualmente três versões, 1.0 e 1.1, ambas linguagens de marcação seguras que se tornaram uma recomendação da [[w:W3C|W3C]], e uma nova versão 2.0 ainda em desenvolvimento.
== Características obsoletas ==
'''Frames''', do inglês '''quadro''', servem para dividir a sua página em várias telas, possibilitando que seja mostrada mais de uma página na mesma tela.
Quando for fazer um ''frame'', ao invés de inserir a ''tag'' <tt><body></tt> apos a tag <tt></head></tt> deverá utilizar <tt><frameset></tt>.
=== Atributos de FRAMESET ===
* cols: define as colunas do frame em pixel ou porcentagem. <tt><frameset cols=”X.X”></tt>
* rows: define as linhas do frame em pixel ou porcentagem. <tt><frameset rows=”X.X”></tt>
* border: define a espessura da borda <tt>frameset border=”X”</tt>
Já a tag <tt><frame></tt> é inserida entre as ''tags'' <tt><frameset></frameset></tt>, ela especifica as páginas que irão abrir nos ''frames'' correspondentes.
=== Atributos de FRAME ===
* src: especifica o endereço que será carregado. <tt><frame src="endereço"></tt>
* name: nomeia o frame <tt><frame name="nome_frame"></tt>
* norezise: determina que o frame não poderá ser redimensionando. <tt><frame noresize></tt>
==== Exemplo de página com frame ====
<syntaxhighlight lang="html5" enclose="div">
<html>
<head>
<title>Exemplo Frame</title>
</head>
<frameset cols="30%,*">
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
<frameset cols="30%,*" >
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
</frameset>
</html>
</syntaxhighlight>
;Página
[[Imagem:Frames firefox.png|center|600px]]
----
<p align="right">[[../|Índice]] - [[Curso de HTML/Recursos meta|Recursos meta]] | [[Curso de HTML/Lista de tags HTML|Lista de ''tags'' HTML]]</p>
== Introdução/Contexto ==
{{Revisão}}
HTML - '''H'''iper'''T'''ext'''M'''arkup'''L'''anguage - Linguagem de Marcação de Hipertexto.
O HTML é uma linguagem derivada da SGML, criada com o fim específico de formatar textos para a World Wide Web. Neste curso são apresentados os fundamentos do HTML tal como é usado e padronizado pelo W3C (World Wide Web Consortium). Actualmente, o nome correto para a recomendação do W3C é XHTML, mas a continuação do uso de "HTML" não constitui um erro grave (existindo algumas diferenças entre eles que iremos ver mais à frente).
O principal a saber, antes de iniciar o estudo da HTML, é que se trata de um padrão desrespeitado por companhias de'''software'', que frequentemente incluem "extensões" da linguagem em seus aplicativos. Entretanto, é preciso tomar cuidado para não usar essas extensões, que limitam a correta exibição das páginas em determinados navegadores. Neste curso, portanto, é apresentado o HTML padrão e o XHTML segundo, também, as suas diferenças, conforme [http://www.w3.org/TR/html] e [http://www.w3.org/TR/xhtml1].
''Material necessário'''<br>
* Um editor de textos:
Pode ser o Notepad (bloco de notas) do Windows, mas é recomendável algum que suporte a sintaxe HTML, como o Jedit, [[Vim]], Emacs, ou qualquer um de sua preferência.
* Um navegador
O Internet Explorer serve, mas é recomendável o uso do Mozilla Firefox ou do Opera, que são mais compatíveis com as regras W3C.
==== O que é o HTML? ====
O'''HTML'''é bastante utilizada actualmente, para confecção de documentos e exibição principalmente na Web. A HTML foi inicialmente uma derivada da {{w|SGML}}, uma {{w|meta-linguagem}} (ou seja, uma linguagem para criação de linguagens) com todos os elementos para marcar dados ou textos com atributos. Atualmente, a HTML, ou {{w|XHTML}}, é uma derivada da {{w|XML}}.
A marcação, referida no nome da HTML, é nada mais do que indicar partes especiais num texto simples. Por exemplo: partes em {{w|negrito}}, partes em {{w|itálico}}, inserção de {{w|imagem|imagens}}, etc.
Já o {{w|hipertexto}} é o meio no qual vários documentos estão ligados entre si por meio de um ou mais'''{{w|link}}s''ou ligações, áreas de texto especiais que ativam outros documentos com um {{w|mouse|clique}}. A ligação pode se estabelecer estruturalmente, também - no cabeçalho do documento pode haver indicação de documento-pai, documento seguinte, etc -, mas é mais comum definir-se a ligação dentro do próprio texto.
O HTML, como linguagem de marcação de hipertextos, permite fazer muitas coisas, desde inserir e formatar texto, até inserir imagens, passando por organizar os conteúdos em {{w|tabela}}s, inserir objetos em formatos de terceiros (tal como {{w|Flash}}, [[Java]], {{w|ActiveX}}, entre outros). Outras coisas são também possíveis em linguagens comerciais derivadas da HTML; neste caso, as características adicionais limitam-se a alguns {{w|navegador}}es ou renderizadores de página. Resumidamente, um navegador ou renderizador é um programa que transforma o código HTML, escrito pelo autor, em uma página de exibição coerente. A HTML é uma linguagem com uma {{w|sintaxe}} rígida em certos aspectos, principalmente se houver interesse em respeitar toda sua norma - alguns programas conseguem contornar pequenas violações.
Como o próprio nome diz, o HTML é uma linguagem de marcação, isso significa que, quando ao trabalhar com HTML, devemos marcar os pontos de início e fim de alterações/formatações.
Essa marcação é feita através de comandos denominados''tag's'' e seus respectivos atributos e ocorre da seguinte forma:
<syntaxhighlight lang="html4strict" enclose="div">
<tag atributo1="valor1" atributo2='valor2'>Texto a ser formatado</tag>
</syntaxhighlight>
Existem algumas exceções à essa regra, como as ''tag's'' usadas para inserir objetos como imagens e quebras de linha.
Como você podem ter observado, é possível colocar o valor dos atributos entre {{w|apóstrofes}} (') ou entre {{w|aspas}} (").
O '''HTML''' é uma linguagem padronizada, apesar de haver várias extensões. As versões oficiais e padronizadas são publicadas pelo ''[http://www.w3.org World Wide Web Consortium]'' (ou, abreviadamente, ''W3C'').
== Introdução/Uma rápida introdução ao HTML ==
=== O que é uma tag? ===
Um documento HTML não é nada mais do que um arquivo de texto plano,escritas em um arquivo com a extensão .html . Então você me pergunta: como se faz para aumentar o tamanho da letra, colocar em negrito, itálico, mudar a cor, e todo tipo de coisa que vejo Internet? A resposta é, que para isso usa se sequências de caracteres para indicar ao navegador que alguma parte do seu texto, não deve ser mostrada como o resto, que aquele pedaço, deve ser vermelho e em itálico, para aumentar a visibilidade e chamar atenção, o nome desta sequência de caracteres é chamada de ''tag'' (em inglês significa marcação, dando sentido ao ''Markup'' (marcação da sigla HTML), que sempre começam com o caracter '''<'''(menor que) e terminam com o'''>'''(maior que). Devido a isso, quando for necessário inserir um destes caracteres numa página html, deve-se usar a notação &lt;('''l'''ower'''t'''han - menor que) e &gt;('''g'''reter'''t'''han - maior que), respectivamente, já que o que vier depois do < será entendido como uma'''tag'', resultando em vários problemas na apresentação do seu documento. A''tag''é um comando que diz como um texto será entendido, ou formatado pelo navegador. Existem dois tipos de''tags'', as como a tag <n> que marca um bloco de texto, em que é obrigatório haver uma marca dizendo onde termina a formatação, no caso, o negrito, sendo no caso desta''tag''</n>(repare na barra, que ocorre no fechamento de todas as''tags''que marcam um bloco); e as''tags''que terminam nela mesma, como a''tag''<br />, que indica um salto de linha, e não há nada mais a ser dito(repare no espaço e na barra no final, diferente do outro tipo de''tag'').
<br />
Segundo a W3C todas as''tags''devem ser escritas em minúsculo <!-- explicar e referenciar --><br />
=== Estrutura básica de um documento HTML ===
:<nowiki><html></nowiki>
::<nowiki><head></nowiki>
:::<nowiki><title> Título </title></nowiki>
::<nowiki></head></nowiki>
::<nowiki><body></nowiki>
:::<nowiki><p> Este é um parágrafo </p></nowiki>
::<nowiki></body></nowiki>
:<nowiki></html></nowiki>
<br />
Veja acima, que todas as''tags''abertas, foram fechadas, o documento começa com a''tag''<html> e termina com o fechamento desta''tag''</html>. O fechamento de uma''tag''é representada pela /.
''<html>'''- marca do início do documento HTML<br />
'''<head>'''- início do cabeçalho<br />
'''<title>'''- título<br />
'''<body>'''- corpo do documento<br />
'''<p>'''- parágrafo
=== Atributos das'''tags''===
Quando uma''tag''possui um atributo, ele é inserido antes do > na abertura da''tag'', ou antes do espaço . <tag atributo="valor">texto</tag> ou <tag atributo="valor" />
==== Font ====
===== Color =====
O atributo''color''é utilizado para modificar a cor de um pedaço de texto e pode receber 3 tipos de valores:
* Hexadecimal
Neste a cor é representada por um valor em hexadecimal que indica a cor no sistema RGB, ficando #<font color="#F00">ab</font><font color="#0F0">cd</font><font color="#00F">fe</font>
* RGB
<!-- Adicionar explicação sobre RGB -->
* Nome da cor:
Neste caso o valor e um nome de cor pré-definida
{| border="0" cellpadding="0" cellspacing="0"
! style="background: black; color: white; width: 50px; padding:5px" | Black<br />#000000
! style="background: green; width: 50px; padding:5px" | Green<br />#008000
! style="background: silver; width: 50px; padding:5px" | Silver<br />#C0C0C0
! style="background: lime; width: 50px; padding:5px" | Lime<br />#00FF00
|-
! style="background: gray; width: 50px; padding:5px" | Gray<br />#808080
! style="background: olive; width: 50px; padding:5px" | Olive<br />#808000
! style="background: white; width: 50px; padding:5px" | White<br />#FFFFFF
! style="background: yellow; width: 50px; padding:5px" | Yellow<br />#FFFF00
|-
! style="background: navy; width: 50px; padding:5px" | Navy<br />#000080
! style="background: marron; width: 50px; padding:5px" | Maroon<br />#800000
! style="background: red; width: 50px; padding:5px" | Red<br />#FF0000
! style="background: blue; width: 50px; padding:5px" | Blue<br />#0000FF>
|-
! style="background: purple; width: 50px; padding:5px" | Purple<br />#800080
! style="background: teal; width: 50px; padding:5px" | Teal<br />#008080
! style="background: fuchsia; width: 50px; padding:5px" | Fuchsia<br />#FF00FF
! style="background: aqua; width: 50px; padding:5px" | Aqua<br />#00FFFF
|}
===== Size =====
O atributo''size'''é usado para modificar o tamanho da fonte de um pedaço de texto.
* Relativo: quando se utiliza os sinais de maior e menor para indicar que aquele texto deve ser maior x ou menor x que a fonte do local. <!--(confuso!)-->
* Nomeado: big small x-big
== Os elementos do HTML/Agrupamento de conteúdo ==
Tal como qualquer linguagem de marcação, a HTML tem marcas ou elementos (conforme nomenclatura oficial do W3C). Os elementos são diferenciados do texto comum por uma marca de início - o "'''<'''" e uma marca de final - o "'''>'''". Tecnicamente, de acordo com a XML, tudo que está dentro de um "< >" é uma marcação (Markup), e tudo que não está dentro, um texto (CharData).
Podemos vulgarmente classificar os elementos de marcação em dois tipos: os elementos normais e os elementos simples.
==== Elementos normais ====
----
Chamamos de elementos normais aos elementos de marcação que obrigatoriamente aparecem aos pares, envolvendo um trecho de texto. Sua função é atribuir uma propriedade ao texto envolvido, e somente ao texto envolvido. Sendo assim, nos elementos normais há sempre uma marcação de abertura e uma marcação diferenciada no fechamento.
===== Texto em itálico =====
* Exemplo de texto em'''itálico'':
<syntaxhighlight lang="html5" enclose="div">
Tal como a torre pisa''estas palavras'''estão inclinadas.
</syntaxhighlight>
* Saída:
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
| align="center" |
Tal como a torre pisa'''estas palavras'''estão inclinadas.
|}
<br />
É possível fazer marcações "em cascata", ou seja, marcar trechos dentro de trechos marcados com outra característica.
===== Texto em negrito =====
* Exemplo de texto sublinhado dentro de texto em negrito.
<syntaxhighlight lang="html5" enclose="div">
<b>O Fortuna, velut luna statu variabilis,'''semper crescis aut decrescis...'''</b>
</syntaxhighlight>
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
| align="center" |
<b>O Fortuna, velut luna statu variabilis,'''semper crescis aut decrescis...'''</b>
|}
<br />
===== Cruzamento de atributos =====
Não cruze atributos distintos. Embora o HTML possa ser permissivo quanto a isso, o XHTML já não o é:
* Exemplo de cruzamento de atributos distintos (<font style="color:#cc0000;>Não faça isto nos seus projetos</font>)
<syntaxhighlight lang="html5" enclose="div">
<b>Cruzamentos entre atributos distintos <i>dá sempre para</b> o torto</i>.
</syntaxhighlight>
* Saída:
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
| align="center" |
<b>Cruzamentos entre atributos distintos <i>dá sempre para</b> o torto</i>.
|}
<br />
<br />
==== Elementos simples ====
----
Os elementos simples são aqueles que se encontram sempre sozinhos, pois a sua função é produzir no texto ou na página alguma exibição especial - ou indicar alguma coisa que não precisa necessariamente ser exibida.
Como não possuem marca de fechamento, os elementos simples são caracterizados por uma barra inclinada'''/'''ao final, antes do ">". Quaisquer elementos simples deve ter essa barra, para indicar ao navegador que não é preciso procurar uma marcação de fechamento. (Isso simplifica o processo de exibição da página, em alguns programas.)
===== Linha Horizontal =====
* Exemplo - linha horizontal:
<syntaxhighlight lang="html5" enclose="div">
Nome: Alberto<hr />Idade: 46 anos
</syntaxhighlight>
* Saída
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
| align="center" |
Nome: Alberto<hr />Idade: 46 anos
|}
<br />
===== Mudança de linha =====
* Exemplo - Mudança de uma linha:
<syntaxhighlight lang="html5" enclose="div">
E eu disse que poderia mudar de linha<br />mas ninguém acreditou!
</syntaxhighlight>
* Saída:
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
| align="left" |
E eu disse que poderia mudar de linha<br />mas ninguém acreditou!
|}
<br />
===== Mudança de parágrafo =====
* Exemplo da mudança de parágrafo:
É recomendável antes de qualquer texto escrever-se'''<nowiki><p></nowiki>''', para possibilitar a mudança de parágrafo:
<syntaxhighlight lang="html5" enclose="div">
<p>Era uma vez um parágrafo</p><p>Era uma vez outro parágrafo</p>
<p>...tantos parágrafos que poderiam existir aqui</p>
</syntaxhighlight>
* Saída:
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
| align="left" |
<p>Era uma vez um parágrafo</p><p>Era uma vez outro parágrafo</p><p>...tantos parágrafos que poderiam existir aqui</p>
|}
<br />
<br />
==== Estrutura básica ====
----
Todo documento HTML obedece a uma estrutura padrão composta por 3'''tags''ou elementos essenciais e mais alguns atributos.
A estrutura é a seguinte:
<syntaxhighlight lang="html5" enclose="div">
<html>
<head>
<title>Título da Página</title>
</head>
<body>
"Conteúdo da página"
</body>
</html>
</syntaxhighlight>
A saída na Janela de um''browser''seria
<center>[[Imagem:Html_browser_pic1.gif]]</center>
<br />
==== Explicação das''tags''da estrutura básica ====
----
<br />
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
|
''Tags <html></html>'''
|}
Esta é a''tag''mais famosa do HTML. Ela inicia e termina todos os documentos HTML que seguem o padrão W3C. Todo o conteúdo que será exibido ou utilizado pela página''web''deve estar declarado entre elas nas devidas sub-''tags''.
<br />
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
|
''Tags <head></head>'''
|}
Mais conhecidas como''tags''de cabeçalho, elas podem conter as seguintes declarações:
* Do Título da página:''<title></title>'''
* De estilos CSS que a página utilizará:''<style></style>'''
* De''scripts''JavaScript, VBscript, etc:''<script></script>'''
* De meta dados:''<meta>'''
* De''links''que permitem a adição de outros conteúdos dependendo do''browser''sendo utilizado:''<link>'''
<br />
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
|
''Tags <title></title>'''
|}
São''tags''utilizadas para definir o título da página. Este título é sempre exibido na Barra de Título do''browser''.
<br />
{| style="background:#f4f4f4; border:dotted 1px #c8c8c8;"
|-
|
''Tags <body></body>'''
|}
Definem o local onde deve estar o conteúdo do''site''e a estrutura na qual ele será exibido. Entre essas''tags''será incluído o conteúdo da página que poderá ser estruturado através de tabelas ou com o uso de estilos CSS. Podem ser adicionados''links''que farão a ligação com outras páginas''web''e utilizados os recursos que foram declarados entre as tags <head></head> (scripts, estilos CSS etc).
== Os elementos do HTML/Dados tabulares ==
=== Tabelas ===
Para se iniciar uma tabela dentro do documento html usa-se a tag''table'', porém são necessárias as tags''td'' e ''tr''para construí-la.
<syntaxhighlight lang="html5" enclose="div">
<table>
<tr>
<td>Uma célula</td>
<td>Outra célula</td>
</tr>
<tr>
<td>Uma célula em quebra de coluna</td>
<td>Uma última tabela</td>
</tr>
</table>
</syntaxhighlight>
<br />
A saída seria:
<br />
{|
|-
| style="border:solid 2px #000;" | Uma célula
| style="border:solid 2px #000;" | Outra célula
|-
| style="border:solid 2px #000;" | Uma célula em quebra de coluna
| style="border:solid 2px #000;" | Uma última tabela
|}
<br>
==== Parâmetros de Table ====
Para se manipular o aspecto gráfico e a disposição de uma tabela usam-se vários parâmetros
===== Width =====
''width''dá o comprimento da tabela na página. Um comprimento''width''pode ter o seu valor em''pixels''ou em percentagem de espaço. 100% representa a ocupação máxima do espaço disponível para a tabela.
<syntaxhighlight lang="html5" enclose="div">
<!-- A tabela tem de largura 250 pixels -->
<table width="250">
<tr>
<td>Tabela de uma célula</td>
</tr>
</table>
<!-- A tabela ocupa 70% do espaço disponível para ela -->
<table width="70%">
<tr>
<td>Table de uma célula</td>
</tr>
</table>
</syntaxhighlight>
<br />
A saída desta última tabela é:
<br />
{| width="70%"
|-
| style="border:solid 2px #000;" | Table de uma célula
|}
===== Height =====
Assim como''width''o parâmetro''height''comporta-se da mesma maneira, alterando a altura da tabela.
<syntaxhighlight lang="html5" enclose="div">
<table height="150">
<tr>
<td>Uma célula</td>
</tr>
</table>
</syntaxhighlight>
<br />
A saída é:
<br />
{| heidth="150"
|-
| height="150" style="border:solid 2px #000;" | Uma célula
|}
===== Border, Bgcolor e bdcolor =====
''Border''define a espessura da borda da tabela;
''Bgcolor''define a cor de fundo da tabela;
''Bdcolor'' ou ''bordercolor'' define a cor da borda da tabela;
<syntaxhighlight lang="html5" enclose="div">
<table border="4" bdcolor="green" bgcolor="grey">
<tr>
<td>Uma mistura de cores berrante!</td>
</tr>
</table>
</syntaxhighlight>
<br />
A saída seria:
<br />
{|
|-
| style="background:grey; border:solid 2px green;" | Uma mistura de cores berrante!
|}
===== Cellpadding =====
''Cellpadding'' aumenta ou diminui a borda interior em cada célula.
<syntaxhighlight lang="html5" enclose="div">
<table cellpadding="5">
<tr>
<td>Padding 5</td>
</tr>
</table>
</syntaxhighlight>
<br />
A saída é:
<br />
{| cellspacing="0" cellpadding="5"
|-
| style="border:solid 2px #000;" | Padding 5
| style="border:solid 2px #000;" | Outra célula
|}
===== Cellspacing =====
Aumenta o espaço entre células.
<syntaxhighlight lang="html5" enclose="div">
<table cellspaccing="5">
<tr>
<td>CellSpacing é 5</td>
</tr>
</table>
</syntaxhighlight>
{| cellspaccing="5"
|-
| style="border:1px solid #000" | CellSpacing é 5
| style="border:1px solid #000" | Outra célula
|-
| colspan="2" style="border:1px solid #000" | Repare no espaço que elas têm entre si
|}
==== <nowiki><td></nowiki> ====
No corpo da tabela existem várias tags que representam a forma como os dados são visualizados: assim são controladores da organização do espaço.
<nowiki><td></nowiki> representa o conteúdo dentro de uma tabela. td quer dizer ''table data''.
<syntaxhighlight lang="html5" enclose="div">
<table>
<tr>
<td>Conteúdo</td>
</tr>
</table>
</syntaxhighlight>
==== <nowiki><tr></nowiki> ====
<nowiki><tr></nowiki> controla e incrementa uma nova linha na tabela. tr quer dizer ''table row''.
<syntaxhighlight lang="html5" enclose="div">
<table>
<tr> <!-- Linha de começo é sempre necessária -->
<td>
</tr>
<tr> <!-- Nova linha -->
</tr>
</table>
</syntaxhighlight>
==== <nowiki><th></nowiki> ====
<nowiki><th></nowiki> é a linha mestra e não pode ser deformada por outras de nível inferior, sendo assim qualquer uma das outras terá que se ajustar a esta. Embora seja aconselhável a inserção desta tag numa das linhas que queremos para mestra, não é necessária actualmente pois os ajustes da tabela são feitos pelo conteúdo da tag style.
<syntaxhighlight lang="html5" enclose="div">
<table>
<th>
<td></td>
</th>
<tr>
<td></td>
</tr>
</table>
</syntaxhighlight>
=== Imagens ===
Podemos criar imagens usando a marcação ''img''.
'''Exemplo''':
<syntaxhighlight lang="html5" enclose="div">
<img src="imagem.jpg" alt="A minha imagem">
</syntaxhighlight>
Neste caso nós estamos a requisitar a imagem denominada ''imagem.jpg'' incluindo o parâmetro ''src'' e damos-lhe um comentário com o parâmetro ''alt''. Estes dois são os parâmetros obrigatórios exigidos pela W3C.
Existem mais opções para alteração do aspecto da imagem:
==== Width ====
Para se alterar a largura da imagem recorre-se ao parâmetro ''width''
<syntaxhighlight lang="html5" enclose="div">
<!-- Altera a largura da imagem para 200 pixels -->
<img src="imagem.jpg" alt="A minha imagem" width="200">
<!-- Altera a largura da imagem para 75% do seu valor real -->
<img src="imagem.jpg" alt="A minha imagem" width="75%">
</syntaxhighlight>
==== Height ====
Pode-se alterar a altura da imagem com o parâmetro ''height'' através da referência por percentagem ''%''assim como por pixelagem''px''
<syntaxhighlight lang="html5" enclose="div">
<!-- Altera a largura e a altura da imagem para 200 e 100 pixels respectivamente -->
<img src="imagem.jpg alt="A minha imagem" width="200" height="100">
<!-- Altera somente a altura da imagem para 150 pixels -->
<img src="imagem.jpg" alt="A minha imagem" height="150">
</syntaxhighlight>
É necessário ter sempre em atenção o uso do parâmetro ''alt'' numa imagem para assegurar a compatibilidade com as normas da W3C. Se não se quiser comentar nada na imagem pode-se somente deixar em branco o valor de ''alt''.
==== Align ====
Podemos sempre alinhar as imagens na página para torná-la mais agradável e atraente. Para isso usa-se o parâmetro ''align''
<syntaxhighlight lang="html5" enclose="div">
<!-- Alinhar uma imagem à direita -->
<img src="imagem.jpg" alt="Uma imagem alinhada à direita" align="right">
</syntaxhighlight>
==== Border ====
Por padrão uma imagem que é inserida no documento HTML apresenta uma borda de 2 pontos de espessura. Com o parâmetro ''border'' é possível diminuir, retirar ou aumentar essa borda em torno da imagem.
Para mudar a cor da borda inserida diretamente na imagem, utilizar a seguinte linha de comando:
<syntaxhighlight lang="html5" enclose="div"><img src="imagem.jpg" alt="Uma imagem bem contornada" style = "border:#ffcc66 sold 10px;"></syntaxhighlight>
Normalmente usa-se uma técnica muito mais atraente: contornar a imagem com uma '''tabela'''.
<syntaxhighlight lang="html5" enclose="div">
<!-- Aumentar para 4 pontos a borda da imagem -->
<img src="imagem.jpg" alt="Uma imagem!" border="4">
<!-- Fazer desaparecer a borda em volta da imagem -->
<img src="imagem.jpg" alt="Uma imagem sem borda" border="0">
<!-- Usar uma tabela para contornar a imagem -->
<table border="4" bdcolor="green" cellpadding="0" cellspacing="0">
<tr>
<td><img src="imagem.jpg" alt="Uma imagem bem contornada" border="0"></td>
</tr>
</table>
</syntaxhighlight>
==== ''Links'' ====
Para fazermos uma imagem com uma [[w:Hiperligação|hiperligação]] basta usar a tag ''a''como se usa no texto.
<syntaxhighlight lang="html5" enclose="div">
<a href="http://www.dominio.com/pagina" target="_parent">
<img src="imagem.jpg" alt="Imagem com ligação" border="0">
</a>
</syntaxhighlight>
==== Curiosidade ====
Podemos criar uma galeria de imagens clicáveis usando todos os parâmetros de cima. Encolhemos as imagens e criamos um''link''à imagem original, organizando-as dentro de uma tabela.
<syntaxhighlight lang="html5" enclose="div">
<table width="300" border="1" bdcolor="grey" cellpadding="1" cellspacing="1">
<tr>
<td width="100" height="100"><a href="imagem1.jpgl"><img src="imagem1.jpg" alt="Imagem 1"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem2.jpgl"><img src="imagem2.jpg" alt="Imagem 2"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem3.jpgl"><img src="image3.jpg" alt="Image 3"
width="200" height="200" border="0"></a></td>
</tr>
<tr>
<td width="100" height="100"><a href="imagem4.jpgl"><img src="imagem4.jpg" alt="Imagem 1"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem5.jpgl"><img src="imagem5.jpg" alt="Imagem 2"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem6.jpgl"><img src="image6.jpg" alt="Image 3"
width="200" height="200" border="0"></a></td>
</tr>
</table>
</syntaxhighlight>
A Saída dentro de um browser teria o seguinte aspecto (ao clicar-se numa imagem, abrir-se-á na mesma janela a respectiva imagem, mas no tamanho normal):
<center>[[imagem:html_browser_pic3.gif]]</center>
== Os elementos do HTML/Metadados ==
As meta''tags''são usadas para diversas ocasiões. É possível fazer passar ao''browser''informações acerca do conteúdo, do autor, de descrições, etc, assim como controlar fluxo de informação e indexação a''crawlers''dos serviços de motores de busca.<br />
Para se usar este recurso, usamos a tag <code><meta></code> dentro do corpo de <code><head></code>, composto pelos parâmetros <code>HTTP-EQUIV</code>, <code>name</code> e <code>content</code>.
<syntaxhighlight lang="html5" enclose="div">
<html>
<head>
<title>Página</title>
<meta http-equiv="Refresh" content="60" />
</head>
<body>
</body>
</html>
</syntaxhighlight>
No exemplo acima, a''tag''meta indica ao''browser''que a página em questão deve ser actualizada de 60 em 60 segundos. Outras''tags''meta podem ser combinadas de forma a criarem outras instruções. De seguida apresentamos mais umas.
=== Indexação ===
Como já foi referido, as meta''tags''podem ser usadas para informar aos''crawlers''dos motores de busca o tipo de dados, as páginas, etc que podem ou não ser indexadas. Essas instruções são passadas usando o parâmetro <code>name="robots"</code> seguido da instrução que queremos passar ao''crawler''com <code>content="<informação a passar ao crawler>"</code>.
Exemplos destas metatags para''bots'':
* <code><meta name="robots" content="INDEX" /></code>: Este parâmetro informa ao''crawler''que pode indexar a página, ou seja, indexar a informação que se encontra nela.
* <code><meta name="robots" content="FOLLOW" /></code>: Este parâmetro passa ao''crawler''a informação das hiperligações existentes na página, levando-o a segui-las para poder ou não - consoante as meta''tags''que existirem nas outras páginas - a indexar a informação lá existente.
* <code><meta name="robots" content="NOINDEX" /></code>: Com isto estamos a pedir ao''crawler''para não indexar a página referida.
<br />
Também é possível combinar vários parâmetros:
* <code><meta name="robots" content="INDEX,NOFOLLOW" /></code>: Lendo isto, o''crawler''indexará a página referida mas não seguirá as hiperligações sugeridas no resto do documento.
=== Descrição ===
Com estas''tags''descritivas, podemos oferecer ao serviço de indexação ou motor de busca um texto personalizado e descritivo da página, ao invés das primeiras linhas que contem.
* <code><meta name="description" content="Esta é a página pessoal do Vitor!" /></code>
<br />
Não há muita variação possível aqui, a descrição é feita de apenas uma forma.
=== Palavras chave ===
Para que''crawlers''indexem por categorias, precisamos fazer passar uma metatag com palavras chave acerca do''site'':
* <code><meta name="keywords" content="palavra chave nº1, palavra chave nº2, ..." /></code>
=== Autor ===
É possível fazer passar informação do autor da página através das''metatags''. A forma de uso é a seguinte, desconhecendo-se actualmente outra forma de actuar.
* <code><meta name="author" content="Lightningspirit" /></code>
=== Cache ===
Podemos através das''metatags''optar por não fazer''cache''tanto à página como aos ficheiros nela submetidos no''browser''do cliente.
* <code><meta http-equiv="cache-control" content="no-cache" /></code>
ou
* <code><meta http-equiv="Pragma" content="no-cache" /></code>
=== Refresh e redirecionamentos ===
Com o mesmo http-equiv, é possível fazer passar ao''browser'' o ''refresh'' da página de x em x segundos:
* <code><meta http-equiv="Refresh" content="60" /></code>: De 60 em 60 segundos (1 em 1 minuto) o ''browser'' atualizará a página
Do mesmo modo, acrescentando apenas um parâmetro, é possível redirecionar o ''browser'' para outra página:
* <code><meta http-equiv="Refresh" content="3;URL:página de destino" /></code>: Ao entrar nesta página, o cliente é redirecionando dentro de 3 segundos para a URL especificada.
== Os elementos do HTML/Texto ==
=== Editores de HTML ===
Como já tivemos oportunidade de observar, o código de um documento HTML é texto puro (isto é, é completamente traduzível através da tabela de caracteres ASCII). Visto isto, qualquer editor de texto sem formatação permite escrever código HTML. Seguem-se alguns exemplos:
* Notepad (Windows)
* Vim (Unix)
* Emacs (Unix)
* Xemacs (Unix e Windows)
* Wordpad (Windows)
* Edit (DOS)
Obviamente que para trabalhos mais complexos o melhor é usar-se um editor HTML especializado. Existem muitos gratuitos na internet. Seguem-se alguns exemplos:
* [http://baixaki.com.br/site/detail5761.htm PHP Editor] - Editor de PHP compacto e completo. Também serve para HTML.
* [http://baixaki.com.br/site/detail4214.htm AceHTML Free] - Versão gratuita do aclamado AceHTML. Possui muitas funções. É a melhor opção para edição de HTML.
* [http://baixaki.com.br/site/detail15233.htm Sothink HTML] - Para quem tem um computador lento e precisa de poupar memória, este editor de HTML é dos melhores que andam pela rede.
* [http://www.openoffice.org OpenOffice.org] - Para quem tem o OpenOffice ou queira instalá-lo, também poderá usar a ferramenta de edição de HTML existente no pacote.
Seja qual for a sua opção, aconselho-o a vasculhar pelo menos todos estes quatro programas aqui apresentados. Depois de um tempo a experimentá-lo poderá perceber qual deles é o melhor para a sua situação.
=== Marcações básicas ===
O primeiro passo é criar um ficheiro vazio e dar-lhe a extensão '''.html'''. Para detalhes sobre como fazer isto consulte a documentação do seu Interface com o Utilizador (User Interface). Seguidamente é necessário abrir o ficheiro vazio com o editor de texto escolhido.
Começa-se por inserir a estructura básica dos documentos HTML que, como já vimos, é composta por um mínimo de 3 TAGs normais ('''<html>''', '''<head>''' e '''<body>'''):
<syntaxhighlight lang="html5" enclose="div">
<html>
<head>
<title>Título da Página</title>
</head>
<body>
DOCUMENTO HTML<hr />Este documento tem o propósito de mostrar
somente o que existe
em <body> saí no corpo do ''browser''.
</body>
</html>
</syntaxhighlight>
A saída é a seguinte:
<center>[[Imagem:Html_browser_pic2.gif]]</center>
== Os elementos do HTML/Usando seletores em elementos HTML ==
=== CSS - Cascading Style Sheet ===
==== Introdução ====
Folhas de estilo em cascata (CSS) é a ''formatação'' de seu (X)HTML, qualquer alteração (cor de fonte, tamanho de fonte, tamanho da alguma coluna, etc.) no HTML, antigamente deveria ser feita em todas as páginas de seu ''site''.
==== Mas porque? ====
Simples, os ''sites'' antigamente eram desenvolvidos com a ''estrutura'' junto com a ''formatação'', isso gerava um trabalho imenso a cada alteração. E o código desses ''sites'' eram sujos demais, com tabelas desnecessárias e diversas "sujeiras" criadas por editores ''WYSIWYG''.
Com o bom uso da CSS isso é possível ser contornado sem alterar a estrutura do projeto ''web''.
==== Por que devo usar CSS? ====
* Código enxuto, deixa seu (X)HTML a ser usado para sua função principal, sem sujar o código, focando na ''acessibilidade'' e ''semântica'';
* Facilidade de manutenção;
* Otimização de tempo de carregamento da página.
=== Sintaxe CSS ===
A sintaxe CSS é bem simples, segue abaixo um exemplo:
<syntaxhighlight lang="CSS" enclose="div">
seletor {
propriedade: valor;
}
</syntaxhighlight>
Onde:
'''seletor''' é a ''tag'' HTML que você quer estilizar.
'''propriedade''' é a propriedade CSS que você quer aplicar para o seletor.
'''valor''' é o valor a ser declarado para propriedade.
==== Seletores ====
Existe diversas formas de estilizar um seletor, desde estilizar um seletor genérico, por exemplo:
<syntaxhighlight lang="CSS" enclose="div">
div {
propriedade: valor;
}
/* Desta forma todos elementos 'DIV' receberiam as declarações CSS. */
</syntaxhighlight>
Até estilizar apenas um único elemento, por exemplo, um elemento com o atributo 'ID' (lembre-se que em seu (X)HTML não pode existir elementos com o atributo 'ID' igual):
<syntaxhighlight lang="CSS" enclose="div">
#ElementoUnico {
propriedade: valor;
}
/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */
</syntaxhighlight>
<p style="color:red">Nota: No caso de estilização por 'ID' não há diferenças se escrevermos "#ElementoUnico" ou "div#ElementoUnico" Veremos a seguir que pode existir diferenças na estilização utilizada desta forma com elementos com o atributo 'CLASS'.</p>
===== Seletor de ''tag'' =====
Como já vimos, é o seletor CSS utilizado para elementos genéricos.
'''Exemplo''':
<syntaxhighlight lang="CSS" enclose="div">
p {
propriedade: valor;
}
/* Desta forma todos elementos 'P' receberiam as declarações CSS. */
</syntaxhighlight>
===== Seletor de ID =====
Como já vimos, é o seletor CSS utilizado para um elemento específico. Este seletor vem sempre acompanhado de "#" antes da 'ID'
'''Exemplo''':
<syntaxhighlight lang="CSS" enclose="div">
#ElementoUnico {
propriedade: valor;
}
/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */
</syntaxhighlight>
===== Seletor de Classe =====
No (X)HTML pode (e deve) ser re-aproveitadas classes de elementos que recebem as mesmas declarações. Este seletor vem sempre acompanhado de "." antes da 'CLASS'
'''Exemplo''':
<syntaxhighlight lang="CSS" enclose="div">
CÓDIGO HTML:
<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>
CÓDIGO CSS:
.linksIguais {
color:red;
text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS com a classe 'estilosIguais" receberia as declarações CSS. */
</syntaxhighlight>
Por quê se disse "ELEMENTOS" e não "LINKS HTML"? Por causa da forma que o CSS foi escrito.
Declarando apenas a classe como '''seletor''', você está indicando que TODOS elementos com esta classe (seja ''link'', ou não) receberá as propriedades do CSS.
Se o seu desejo for especificar estas propriedades apenas para ''links'', você deve indicar a ''tag'' alvo antes da classe:
'''Exemplo''':
<syntaxhighlight lang="CSS" enclose="div">
CÓDIGO HTML:
<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>
<p class="estilosIguais">Este parágrafo receberá as declarações CSS?</p>
CÓDIGO CSS:
a.linksIguais {
color:red;
text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS <a>, com a classe 'estilosIguais" receberia as declarações CSS. */
</syntaxhighlight>
{{AutoCat}}
| |||