HTML Conceitos básicos de formatação de páginas WEB
HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto relativamente rígido e estático de marcas (tags) de formatação Permite também criar ligações (links) entre documentos, entre documentos e outros tipos de ficheiros, etc.
Estrutura base de uma página <html> <head> <title> Título da página HTML </title> </head> <body> Texto da Página </body> </html> Início da declaração de um documento HTML Título que aparece na janela do browser Texto visível na área principal de conteúdo da página Todas as tags têm uma tag de início e de fim: <tag>... </tag> Exemplo: <html>... </html>
Formatação de Texto <p>... </p> - Parágrafo <i>... </i> - Itálico <b>... </b> - Bold <h1>... </h1> - Heading 1 <h2>... </h2> - Heading 2... <h6>... </h6> - Heading 6 <pre>... </pre> - Apresenta o texto da mesma maneira em que foi digitado, mantendo quebras de linha e tabulações <blockquote>... </blockquote> - Indentação do texto <address>... </address> - Formatação de endereços
Formatação de frases Estilos lógicos: <cite>... </cite> - Para títulos de livros, filmes, e citações curtas. <code>... </code> - Para indicar trechos de código de programas. <dfn>... </dfn> - Indica definição de uma palavra, em geral apresenta o texto em itálico. <em>... </em> - Ênfase, também normalmente apresentado em itálico. <kbd>... </kbd> - Indica uma entrada via teclado. <samp>... </samp> - Indica uma sequência de caracteres, por exemplo uma mensagem de erro ou um resultado. <strong>... </strong> - Forte ênfase, mostrado normalmente em negrito. <var>... </var> - Indica variáveis, ou valores que o utilizadoro deverá escrever; geralmente mostrado em itálico. Estilos físicos: <b>... </b> - Quando disponível no browser, é mostrado em negrito (em alguns browsers poderá ser sublinhado) <i>... </i> - Itálico (em alguns casos, caracteres inclinados) <tt>... </tt> - Tipo teletype - fonte de espaçamento fixo. <u>... </u> - Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links. <strike>... </strike> ou <s>... </s> - Frase riscada. <big>... </big> - Fonte um pouco maior. <small>... </small> - Fonte um pouco menor. <sub>... </sub> - Frase em estilo índice, como em H2O. <sup>... </sup> - Frase em estilo expoente, como em Km2.
Atributos de formatação Cada tag tem um conjunto de atributos pré definido que podem ser usados para formatar o conteúdo encapsulado nas mesmas Exemplos: bgcolor background size width height face color src href...
Fontes Sintaxe: <font face="fonte_da_letra size="tamanho_da_letra"> Texto </font> Exemplos: <font size="+2">letra maior</font> <font size="-2">letra menor</font> <font face="verdana">fonte Verdana</font> <font face="arial">fonte Arial</font> <font face="courier New">Fonte Courier New</font>
Quebra de linha Quando se pretende mudar de linha usa-se o elemento: <br>. É necessário sempre que se pretende uma quebra de linha num determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos. Com sucessivos <br> inserem-se diversas linhas em branco nos documentos. Este elemento tem um atributo especial, que será apresentado na secção sobre inserção de imagens.
Links Sintaxe: <a href= caminho" target= tipo de abertura do link">texto</a> Exemplos: <a href="http://www.sapo.pt">sapo</a> <a href="http://www.sapo.pt" target="_blank" >SAPO</a>
Imagens Sintaxe: <img src= origem width= largura height= altura alt= descrição border= tipo de border align= alinhamento > Exemplo: <img src="/imagens/moebcort2-1327.gif width=100 height=100 alt= uma imagem border= 1 align= center >
Caracteres Especiais O HTML permite que caracteres especiais sejam representados por sequências de escape Sintaxe: &<representação do caracter>; Exemplos: Espaço - < - < > - > & - & Ã - Ã ã - ã à - à á - á â - â Ç - Ç ç - ç... - - -
Linhas horizontais Linha horizontal: <hr> este elemento "vazio" insere uma linha horizontal. Exemplos: <hr size="7"> (insere uma linha com a largura de 7 pixels). <hr width="50%"> (insere uma linha que ocupa 50% do espaço horizontal disponível). <hr width="30%" align="right" noshade> (insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita e sem efeito tridimensional. <hr size="70" width="2" align="left"> (insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <hr>).
Exemplos de formatação (1) <html> <head> <title>título da página HTML</title> </head> <! o corpo da página tem uma cor de fundo azul e uma linha horizontal cujo comprimento ocupa 75% da largura da página --> <body bgcolor="blue" text="white"> <hr width="75%"> </body> </html>
Exemplos de formatação (2) <html> <head> <title> Título da página HTML </title> </head> <body> <p align=center>texto</p> <h1 align=right>texto</h1> <font face= Arial color= #FFFF00 style= background=red > Texto </font> <tt>texto</tt> <!- bloco de texto de comprimento fixo --> </body> </html>
Listas não numeradas - Exemplo <html> <head> <title> Título da página HTML </title> </head> <body> <ul> <li>texto 1</li> <li>texto 2</li> <li>texto 3</li> </ul> </body> </html>
Listas numeradas - Exemplo <html> <head> <title> Título da página HTML </title> </head> <body> <ol> <li>texto 1</li> <li>texto 2</li> <li>texto 3</li> </ol> </body> </html>
Listas encadeadas - Exemplo <html> <head> <title> Título da página HTML </title> </head> <body> <ul> <li>texto</li> <ol> <li>subtexto 1-1</li> <li>subtexto 1-2</li> </ol> <ul> <li>subtexto 2-1</li> </ul> </ul> </body> </html>
Imagens e Links - Exemplo <html> <head> <title> Título da página HTML </title> </head> <body> <img src= est.jpg height=100 width=200> <a href= link.html >Link 1</a> <a href= http://www.est.ips.pt >Link 2</a> <a href= mailto:mart@est.ips.pt >Link 3</a> </body> </html>
Tabelas - Exemplo <html> <head> <title> Título da página HTML </title> </head> <body> <table border="1"> <caption><b>tabela</b></caption> <tr> <!-- tr = table row, ou seja, uma linha --> <th rowspan="2"> <th colspan="2">bases de Dados</th> </th> <th rowspan="2">projecto de Bases de Dados</th> </tr> <tr> <th>gestão</th> <th>industrial</th> </tr> <tr> <th>diurno</th> <!-- th = table header --> <td>10</td> <!-- td = table data --> <td>20</td> <td>1</td> </tr> <tr> <th>nocturno</th> <td>5</td> <td>4</td> <td>0</td> </tr> </table> </body> </html>
Referências Tutoriais de HTML, CSS, JavaScript, PHP, etc.: http://www.w3schools.com/