HTML - HiperText Markup Language Tecnologia para Web Prof.º Enrique Pimentel Leite de Oliveira [email protected] 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. 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> 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> 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. 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. 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> 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> • Sobrescrito <SUP>Texto</SUP> • Itálico <I>Texto</I> • Subscrito <SUB>Texto</SUB> • Sublinhado <U>Texto</U> • 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: <FONT FACE=“Fonte" COLOR=“Cor" SIZE=“Tamanho"> Texto formatado </FONT> • Exemplo: <FONT FACE="ARIAL" COLOR="RED" SIZE="3"> Texto formatado </FONT> Listas • Lista não-ordenada. Sintaxe: <UL> <LI>Texto do item</LI> <LI>Texto do item</LI> </UL> • Lista ordenada. Sintaxe: <OL> <LI>Texto do item</LI> <LI>Texto do item</LI> </OL> Alinhamento centralizado • Centraliza um texto, uma imagem ou um elemento da página; • Sintaxe: <CENTER>Essa frase está centralizada na página</CENTER> 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: <A HREF=“http://endereço”>Texto na página com link</A> • Exemplo: <A HREF=“http://www.aes.edu.br”>AES</A> 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: <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> <TR> <TD>Linha2Coluna1</TD> <TD>Linha2Coluna2</TD> <TR> </TABLE> Formulários HTML • Elemento form – Atributo method • 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 – 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 – 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-html40119991224/cover.html#minitoc
Download
