HTML - HiperText Markup Language Tecnologia para Web Prof.º Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br
HTML É uma linguagem de marcação que utilizamos para criar páginas Web; O código-fonte é interpretado pelo browser (Internet Explorer, Netscape, etc.);
HTML Existem diversos programas de editoração HTML, que tornaria nosso trabalho muito mais simples, porém poderíamos nos tornar usuários desta ferramenta sem entender o que realmente estamos fazendo; Qual quer editor de textos como o bloco de notas no Windows ou o emacs no Linux, pode ser utilizado para criação de documentos html.
<Nome da tag> Texto </Nome da tag> TAG (ou rótulos) São elementos HTML. Quando válidos são interpretados pelo navegador (browser); São identificadas por serem envolvidas pelos sinais < > ou </ >; O formato genérico de uma tag é: <Nome da tag> Texto </Nome da tag> Os comandos em HTML são chamados de tags, e eles irão dizer ao browser como o texto, a informação e as imagens serão exibidas. Por exemplo, uma tag pode dizer que um texto será exibido em negritoa , itálico e com um tipo de fonte qualquer. Além de formatação de texto um tag também pode dizer que na verdade um determinado pedaço do texto é um endereço para outra página Web, que será acessado ao dar um click no endereço.
Estrutura Básica <HTML> <HEAD> <TITLE> Título da página </TITLE> </HEAD> <BODY> Aqui você coloca os elementos HTML, seus textos e imagens. Importante, as tags HTML não são case sensitive. </BODY> </HTML> A TAG <HTML> –será colocado no início e no final do documento , delimitando a área onde serão colocados os TAGS HTML . A TAG <HEAD> - servirá para delimitar uma área de cabeçalho com poucos TAGS (não é necessário ter esse TAG para sua página funcionar) A TAG <TITLE> - servirá apenas para colocar um título que aparecerá na barra de título do seu browser. Dentro das TAGS <BODY> </BODY> serão colocados todos os comandos , textos e imagens da sua página . Será o corpo da sua página.
<!-- Comentário --> Comentários Não são interpretados pelo browser; Sintaxe: <!-- Comentário --> Tudo que for escrito nesta tag não aparecerá em sua página.
<BODY BGCOLOR=“Cor”>Elementos</BODY> Cor de fundo Para se colocar cor de fundo em uma página é preciso utilizar o argumento BGCOLOR juntamente com a tag BODY; Sintaxe: <BODY BGCOLOR=“Cor”>Elementos</BODY> Importante: A cor pode ser um número em RGB (#FF0000) ou um nome em Inglês (Red).
Cabeçalhos (Headings) Utilizado para inserir títulos, ou seja, identificar tópicos ou seções. A letra é diferenciada do restante do texto; Sintaxe: <Hn>Texto do Cabeçalho</Hn> onde n pode variar de 1 a 6, sendo o maior cabeçalho H1 e o menor H6.
<P>Texto</P> Parágrafos Uma página não reconhece o fim de um parágrafo pressionando “Enter”. Para criar parágrafos, deve-se utilizar uma tag. Sintaxe: <P>Texto</P>
Texto<BR>Texto Quebra de Linha A tag <P> insere uma linha em branco imediatamente após sua especificação, em muitas situações precisaremos apenas “quebrar” a linha, continuando na linha seguinte. Sintaxe: Texto<BR>Texto
Estilo de Texto Negrito <B>Texto</B> Itálico <I>Texto</I> Sublinhado <U>Texto</U> Sobrescrito <SUP>Texto</SUP> Subscrito <SUB>Texto</SUB> Espaçamento Regular <TT>Texto</TT>
Formatando Textos A tag FONT é utilizada com argumentos como: FACE, definirá que tipo de fonte seu texto irá utilizar. O padrão é Times New Roman; COLOR, cor da fonte escolhida que seguirá o padrão de cores RGB ou nome da cor em inglês; SIZE, definirá qual o tamanho da fonte a ser utilizada, lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 7. O padrão é 3.
Formatando Textos Sintaxe: Exemplo: <FONT FACE=“Fonte" COLOR=“Cor" SIZE=“Tamanho"> Texto formatado </FONT> Exemplo: <FONT FACE="ARIAL" COLOR="RED" SIZE="3">
<LI>Texto do item</LI> Listas Lista não-ordenada. Sintaxe: <UL> <LI>Texto do item</LI> </UL> Lista ordenada. Sintaxe: <OL> </OL>
Alinhamento centralizado Centraliza um texto, uma imagem ou um elemento da página; Sintaxe: <CENTER>Essa frase está centralizada na página</CENTER>
<HR SIZE=8 WIDTH=70%> Linha Horizontal São utilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre um item de informação e outro; <HR> ou <HR SIZE=8 WIDTH=70%> WIDTH é a porcentagem da largura da janela do browser; SIZE número de pixels da espessura.
Âncoras É um ponto de referência da página que será acessado por um link; Sintaxe para criar uma âncora: <A NAME=“#nomedaâncora”>Texto para linkar</A> Sintaxe para criar um link para a âncora: <A HREF=“#nomedaâncora”>Texto usado como link</A>
Links Fazer uma ligação entre um texto e uma página; Sintaxe: Exemplo: <A HREF=“http://endereço”>Texto na página com link</A> Exemplo: <A HREF=“http://www.aes.edu.br”>AES</A>
<IMG SRC=“Caminho\Imagem.jpg”> Imagens Sintaxe para inserir uma imagem na posição atual: <IMG SRC=“Caminho\Imagem.jpg”> Textos em relação à imagem: <IMG ALIGN=“top” SRC=“Caminho\Imagem.jpg”> <IMG ALIGN=“middle” SRC=“Caminho\Imagem.jpg”> <IMG ALIGN=“bottom” SRC=“Caminho\Imagem.jpg”>
Imagens clicáveis Sintaxe: <A HREF=“http://endereço”><IMG SRC= “Caminho\Imagem.jpg”></A>
Imagens como plano de fundo Para se colocar uma imagem como plano de fundo é preciso utilizar o argumento BACKGROUND juntamente com a tag BODY; Sintaxe: <BODY BACKGROUND=“Caminho\Imagem.gif”> Elementos</BODY>
Tabelas Para inserir uma tabela: Para inserir uma linha: <TABLE>Elementos</TABLE> Para inserir uma linha: <TR>Elementos</TR> Para inserir uma célula (ou coluna): <TD>Texto da célula</TD>
Tabelas Exemplo: <TABLE BORDER=2> <TR> <TD>Linha1Coluna1</TD> <TD>Linha1Coluna2</TD> </TR> <TD>Linha2Coluna1</TD> <TD>Linha2Coluna2</TD> </TABLE>
Formulários HTML Elemento form Atributo method Atributo action input Especifica como os dados do formulário são enviados para o Web server method = “post” Adiciona os dados do formulário na requisição do navegador method = “get” Adicona os dados do formulário diretamente no final da URL Atributo action Especifica a URL que receberá a requisição input Especifica os dados que serão fornecidos a URL contida no atributo action
Formulários HTML Elemento textarea Elemento checkbox Elemento select Atributo rows Define o número de linhas Atributo cols Define o número de colunas Input “password” Insere uma caixa de texto para receber senhas Elemento checkbox Permite que usuários escolham um conjunto de opções Elemento select Insere um drop-down list
Formulários HTML Elemento select Elemento option Insere um drop-down list Elemento option Adiciona itens ao the drop-down list Atributo selected Especifica qual será o item será exibido como selecionado
Elementos meta Especifica informações sobre um documento Atributo name Identifica o tipo de elemento meta “keywords” ( name = “keywords” ) Fornece uma lista de palavras que descrevem a página (utilizadas por sistemas de busca) “description” ( name = “description” ) Fornece a descrição de uma site Atributo content Fornece informações para um sistema de busca catalogar as páginas <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Bibliografia RAMALHO, José Antônio Alves. Iniciando em HTML. São Paulo: Makron Books, 1996. W3C - HTML 4.01 Specification: http://www.w3.org/TR/1999/REC-html401-19991224/cover.html#minitoc