Introdução a HTML. André Tavares da Silva.

Transcrição

1 Introdução a HTML André Tavares da Silva andre.silva@udesc.br

2 HTML HiperText Markup Language Linguagem de marcação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos)

3 Navegadores (browsers) Apesar de existir uma norma internacional para definição da HTML, nem todos os navegadores (browsers) exibem uma mesma página igualmente. Por isso, quando as páginas são disponibilizadas em servidores, é necessário testálas nos diferentes browsers. Essa edição deve ser feita utilizando o modo comando, já que não se tem controle da forma com que os editores salvam as páginas. Por esse motivo, é necessário conhecer os comandos HTML para edição neste modo.

4 Tags HTML Todo documento HTML é composto de tags (etiquetas/rótulos). Cada elemento de texto (palavra, frase, parágrafos) são rotulados por meio de tags, cuja estrutura possui normalmente início e fim. Uma página HTML deve começar com a tag <HTML> e terminar com </HTML>.

5 Tags HTML O nome da tag é escrita entre os sinais de menor que (<) e maior que (>). A tag de fechamento inicia com uma barra (/) para se diferenciar da tag de início. Por exemplo, a tag "i" serve para indicar que o texto entre seu início e final está em itálico. Exemplo: <i>este texto está em itálico</i>.

6 Tags HTML Após iniciar o documento com a tag <HTML> você deve incluir o cabeçalho que é feito com as tags <HEAD> </HEAD>. E também um título usando o par <TITLE>... </TITLE>. Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para intitular a janela de visualização.

7 Tags HTML O "corpo" do documento deve ser demarcado pelo par <BODY>... </BODY>. É nesta parte do documento que serão colocados todos os comandos para apresentação de uma página HTML.

8 Exemplo de HTML mínimo Um documento simples seria digitado da seguinte maneira: <HTML> <HEAD> <TITLE>Exemplo de HTML</TITLE> </HEAD> <BODY> Aqui comandos em HTML que compõe a página. </BODY> </HTML>

9 Tags para formatação de texto Exemplos de tags para formatação de texto: <b>negrito</b> <i>itálico</i> <u>sublinhado</u> <center>centralizado</center> Negrito Itálico Sublinhado Centralizado

10 Parágrafos Em HTML são necessários comandos para definir parágrafos. Não basta simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. É preciso colocar uma tag para um parágrafo ou para uma linha nova. A tag <BR> indica uma quebra de linha. Note que não é necessário finalizar a tag, pois ela apenas indica a posição da quebra de linha.

11 Parágrafos A tag <P> e </P> define um parágrafo em HTML. Em algumas tags, é possível inserir atributos. Podemos definir o alinhamento do parágrafo na tag <P> através do parâmetro align. Os atributos são: Left: Alinhamento à esquerda Rigth: Alinhamento à direita Center: Centralizado Justify: Texto justificado

12 Parágrafos - Exemplo <p align="left">texto alinhado à esquerda</p> <p align="right">texto alinhado à direita</p> <p align="center">texto centralizado</p> <p align="justify">texto justificado</p>

13 Parágrafos - Exemplo Texto alinhado à esquerda Texto alinhado à direita Texto centralizado Texto justificado

14 Formatação da Fonte A tag <FONT> permite definir tamanho, estilo e cor do texto. A tag <FONT> normalmente pode ser substituída por CSS. Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Porém, vamos estudar como formatar um texto usando apenas HTML.

15 Tipo/estilo da Fonte O atributo face define qual a fonte será utilizada para exibir o texto entre as tags <FONT> e </FONT>. Exemplo: <font face= arial">escrito em Arial.</font> <font face= courier">escrito em Courier.</font> <font face= times">escrito em Times.</font> <font face="verdana,tahoma,arial">texto.</font>

16 Tamanho da fonte O atributo size define o tamanho do texto. Esse valor é definido entre 1 e 7. <font size= 5 >Este texto é grande</font> Também é possível utilizar as seguintes tags para modificação do texto, em substituição da tag <FONT>: <BIG> - Aumenta a fonte e atribui negrito. Exemplo: <BIG>Texto GRANDE</BIG> <SMALL> - Reduz e altera a fonte. Exemplo: <small>texto pequeno</small> <SUP> - Faz com que o texto fique sobrescrito. Exemplo: <sup>texto sobrescrito</sup> <SUB>- Faz com que o texto fique subscrito. Exemplo: <sub>texto subscrito</sub>

17 Cor da fonte O atributo color define a cor do texto. É possível usar nomes de cores, definidos oficialmente, como yellow ou orange. Mas se necessitar usar outras cores, é possível usar seu código hexadecimal após o sinal de #. Exemplo: <font color= #FF00CC >texto de outra cor</font>.

18 Listas A HTML suporta listas com e sem numeração. Listas com numeração são definidas entre as tags <OL> e </OL>, enquanto as listas sem numeração entre <UL> e </UL>. A tag <LI> indica o início de cada item (assim como <BR> ela não necessita ser finalizada).

19 <OL> <LI> Primeiro item de uma lista ordenada <LI> Segundo item de uma lista ordenada <LI> Terceiro item de uma lista ordenada </OL> <UL> <LI> Primeiro item de uma lista não ordenada <LI> Segundo item de uma lista não ordenada <LI> Terceiro item de uma lista não ordenada </UL> 1. Primeiro item de uma lista ordenada 2. Segundo item de uma lista ordenada 3. Terceiro item de uma lista ordenada - Primeiro item de uma lista não ordenada - Segundo item de uma lista não ordenada - Terceiro item de uma lista não ordenada

20 Links A principal característica da linguagem HTML vem de sua capacidade de interligar parte de um texto e imagens a outros documentos. Os navegadores exibem em destaque estas áreas, colocando os textos de cores diferentes e sublinhados e, as figuras com borda de cor diferente. Estes pontos chaves são denominados links ou hipertextos. A marcação <a> define o ponto de partida dos links e é denominada âncora.

21 Links Para incluir uma âncora em seu documento deve-se proceder da seguinte forma: Inicie a âncora com <a (há um espaço depois de a) Digite o parâmetro href="nome_do_arquivo"> Insira o texto (para links clicados em um texto) que vai funcionar como âncora para o documento seguinte ou insira o tag de colocação de imagens que você aprendeu no item anterior (para links clicados em uma imagem) na figura que você quer que funcione como âncora. Digite </a> para finalizar o texto que serve de link e depois continue o seu texto normalmente.

22 Links - Exemplo Clique <a href= para acessar o site da UDESC-Joinville. Clique aqui para acessar o site da UDESC-Joinville.

23 Imagens A tag para inserir uma imagem em sua página é <IMG>. Exemplo: <img src= arquivo de imagem > src é a sigla de source que significa fonte/origem.

24 Imagens - Atributos Width: Largura da imagem Height: Altura da imagem Border: Tamanho da borda da imagem. Alt: Texto alternativo. Aparece antes de carregar a imagem. <img src="orbita.gif alt= Orbita" border= 1 width="100" height="50">

25 Tabela As tags <TABLE> e </TABLE> indicam o início e final de uma tabela. Cada linha é delimitada pelas tags e. As tags <TH> e </TH> indicam que as colunas são do tipo título (normalmente as colunas da primeira linha), enquanto as colunas normais são delimitadas por <TD> e </TD>.

26 Tabela - Exemplo <TABLE WIDTH=100% BORDER=1> <TH WIDTH=34%>Descrição</TH> <TH WIDTH=33%>Valor</TH> <TH WIDTH=33%>Total</TH> <TD WIDTH=34%>Primeira linha</td> <TD WIDTH=33%>1</TD> <TD WIDTH=33%>1</TD> <TD WIDTH=34%>Segunda linha</td> <TD WIDTH=33%>2</TD> <TD WIDTH=33%>3</TD> </TABLE> Descrição Valor Total Primeira linha Segunda linha

27 Tabela Outros Elementos Uma tabela também pode conter um título ou texto explicativo. Isso é realizado utilizando a tag <CAPTION> e </CAPTION>.

28 Tabela Outros Elementos <TABLE WIDTH=100% BORDER=1 > <CAPTION>Tabela com titulo</caption> <TH WIDTH=34%>Descrição</TH> <TH WIDTH=33%>Valor</TH> <TH WIDTH=33%>Total</TH> <TD WIDTH=34%>Primeira linha</td> <TD WIDTH=33%>1</TD> <TD WIDTH=33%>1</TD> <TD WIDTH=34%>Segunda linha</td> <TD WIDTH=33%>2</TD> <TD WIDTH=33%>3</TD> </TABLE> Descrição Valor Total Primeira linha Segunda linha Tabela com titulo

29 Tabela Mesclando Colunas Colspan é a abreviação para "column span". colspan é usada nas tags <td> ou <th> para indicar quantas colunas estarão contidas em uma mesma célula. Exemplo, colspan=2 significa que a célula ocupará o espaço de duas colunas.

30 Tabela Mesclando Colunas <TABLE BORDER=1> <CAPTION>Tabela com titulo</caption> <TH WIDTH=34%>Coluna 1</TH> <TH WIDTH=33%>Coluna 2</TH> <TH WIDTH=33%>Coluna 3</TH> <TD COLSPAN=2>Junta duas colunas</td> <TD>1</TD> <TD COLSPAN=3>Junta 3 colunas</td> </TABLE> Tabela com titulo Coluna 1 Coluna 2 Coluna 2 Junta duas colunas 1 Junta 3 colunas

31 Tabela Mesclando Linhas Rowspan especifica quantas linhas estarão contidas em uma célula. Ela pode ser usada nas tags <th> e <td>. Exemplo, rowspan=2 significa que a célula ocupará o espaço de duas linhas.

32 Tabela Mesclando Linhas <TABLE BORDER=1> <CAPTION>Tabela com titulo</caption> <TH WIDTH=34%>Coluna 1</TH> <TH WIDTH=33%>Coluna 2</TH> <TH WIDTH=33% rowspan=3>coluna 3</TH> <TD>1</TD> <TD rowspan=2>2</td> <TD>3</TD> </TABLE> Tabela com titulo Coluna 1 Coluna 2 Coluna

33 Tabela Mesclando Células <TABLE border="1"> Média <TH rowspan=2> </TH> altura Peso <TH colspan=2>média</th> <TH rowspan=2>cabelos<br>castanhos</th> Masculino 1, % Feminino 1, % <TH>altura</TH><TH>peso</TH> <TH>Masculino</TH><TD>1.9</TD><TD>78<TD>70%</TD> <TH>Feminino</TH><TD>1.7<TD>65</TD><TD>63%</TD> </TABLE> Cabelos castanhos

34 Layout com tabelas Uma prática muito utilizada em HTML, é usar tabelas para formatar o layout de uma página. Um exemplo é usar duas colunas para formatar a página como em um jornal. Também é comum utilizar outras tabelas dentro de uma célula, a fim de reduzir a utilização de colspan s e rowspan s.

35 Tabela dentro de tabela altura Média Peso <TABLE border="1"> Masculino 1, % <TH> </TH> Feminino 1, % <TD colspan=2> <TABLE border="1"> <TH colspan="2">média</th> <TH>altura</TH><TH>peso</TH> </TABLE> </TD> <TH>Cabelos<BR>castanhos</TH> <TH>Masculino</TH><TD>1.9</TD><TD>78<TD>70%</TD> <TH>Feminino</TH><TD>1.7<TD>65</TD><TD>63%</TD> </TABLE> Cabelos castanhos