HTML Técnicas em Programação para Internet Professora: Jaqueline Alves dos Santos
Como funciona uma página?
O que é HTML? HyperText Markup Language Linguagem padrão da internet Não é linguagem de programação Pode ser escrito em editores de texto simples, como Bloco de Notas Ao salvar o arquivo, é preciso salvar como formato ".htm" ou ".html" Por convenção, o nome da página principal de um site deve ser "index.html", pois é o arquivo que o servidor irá procurar caso não seja solicitado um arquivo específico
Tags Comandos do código HTML que formam a página Para abrir uma tag, coloque o comando correspondente entre "<" e ">“ Para fechar a tag, coloque o comando correspondente entre "</" e ">"
Estrutura básica de uma página <html> <head> <title>Nome da página</title> </head> <body> (Conteúdo da página, como texto, links, imagens, vídeos e etc.) </body> </html>
Propriedades de <body> Através dos atributos de <body>, podemos definir cor do texto, cor dos links, cor de fundo e imagem de fundo. <body bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor" background="endereço da imagem"> bgcolor: cor do fundo da página. Padrão: branco text: cor do texto. Padrão: preto link: cor dos links. Padrão: azul alink: cor do link quando acionado. Padrão:azul vlink: cor dos links já visitados. Padrão: azul background: endereço da imagem de background. Padrão: Sem background. align: alinhamento do texto (Esquerda = left, Centralizado = center, Direita = right). Padrão: esquerda
Cores É possível inserir os valores das cores das seguintes formas: Colocando o nome da cor em inglês. Ex.: Branco = White, Preto = Black, Azul = Blue, Rosa = Pink Colocando os valores RGB da cor. Ex.: Branco = RGB(255,255,255), Preto = RGB(0,0,0), Amarelo = RGB(255,255,0) Colocando o valor hexadecimal da cor. Ex.: Branco = #FFFFFF, Preto = #000000, Verde = #00FF00 Tabela de cores: http://www.efeitosespeciais.net/tabela.htm
Heading A tag <hx> é utilizada para destacar o texto colocando-o em negrito e definindo um tamanho, onde x varia entre 1 (maior tamanho) e 6 (menos tamanho). <h1>Maior tamanho de heading possível</h1> <h6>Menor tamanho de heading possível</h6>
Font Para editar o texto de forma mais personalizada, é possível utilizar a tag <font> e seus atributos face: nome da fonte (Arial, Times, Courier) color: cor da fonte size: tamanho da fonte entre 1 e 7 Ex.: <font face="Arial" color="blue" size=5>Fonte Arial azul tamanho 5</font>
Negrito, Itálico e Sublinhado <b>negrito</b> <i>itálico</i> <u>sublinhado<</u>
Parágrafo e Alinhamento Para indicar um parágrafo, utilizamos a tag <p>. Nela, podemos atribuir o alinhamento do texto. <p align=“left”>Alinhado à esquerda</p> <p align=“center”>Texto centralizado</p> <p align=“right”>Alinhado à direita</p> <p align=“justify”>Texto justificado</p>
Imagem As imagens podem no mesmo local da sua página ou em outro endereço web, mas precisam estar nos formatos gif, png ou jpg A tag para inserir uma imagem é <img>, e o local da imagem é indicado pelo atributo src Ex.: <img src=“imagens/foto.jpg”>
Imagem Atributos Height: altura da imagem Width: largura da imagem Alt: Texto alternativo da imagem Border: Tamanho da borda da imagem Align: Alinhamento do texto em relação a imagem (top, middle, left, right) Ex.: <img src=“imagens/foto.jpg” width=100 height=300 alt=“Minha foto” border=1 align=“left”>
Links Pontos clicáveis que levam a documentos, outros sites ou parte específica da mesma página Para indicar a existência de um link, utilizamos a tag <a>, e para definir para onde o link levará, utilizamos o atributo href. Ex.: <a href=“www.google.com”>Clique aqui para acessar o Google</a>
Links href=mailto:nome@email.com.br target: indica onde a nova página deve ser aberta - Mesma página = “_self” (Padrão) - Nova página = “_blank”
Lista Lista ordenada A tag <ol> indica o início de uma lista ordenada, e cada item dessa lista é indicado pela tag <li> <ol> <li>Primeiro item</li> <li>Segundo item</li> </ol>
Lista Lista não ordenada A tag <ul> indica o início de uma lista não ordenada, e cada item dessa lista é indicado pela tag <li> <ul> <li>Primeiro item</li> <li>Segundo item</li> </ul>
Lista Atributo type para <li> em lista ordenada type=A: Ordena em letras maiúsculas type=a: Ordena em letras minúsculas type=I: Ordena em numerais romanos maiúsculos type=i: Ordena em numerais romanos minúsculos
Lista Atributo type para <li> em lista não ordenada type=disc: Formato de disco (padrão) type=circle: Formato de círculo type=square: Formato de quadrado
Tabela A tag <table> indica a criação de uma tabela A tag <tr> indica a criação de uma linha na tabela A tag <td> indica a criação de uma célula na linha
Tabela <table> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <td>Célula 3</td> <td>Célula 4</td> </table>
Tabela Atributos border: espessura da borda da tabela em pixels width: largura da tabela em pixels ou % align: alinhamento horizontal do conteúdo da tabela, linha ou célula (left, center, right) valign: alinhamento vertical do conteúdo da tabela, linha ou célula (top, middle, bottom)
Linha Inserindo uma linha, é possível criar separações no conteúdo da página. Basta inserir a tag <hr>. Atributos width: largura da linha em px ou % align: alinhamento da linha (left, center, right) color: cor da linha
Letreiro Serve para dar um comportamento diferente ao conteúdo inserido nele. A tag utilizada para isso é <marquee>. Atributos behavior: tipo de efeito (scroll ou slide) width: tamanho do letreiro na tela