técnicas em programação para internet professora: jaqueline alves dos santos
TRANSCRIPT
HTML
Técnicas em Programação para Internet
Professora: Jaqueline Alves dos Santos
Como funciona uma página?
• 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
O que é HTML?
• 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 ">"
Tags
<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>
Estrutura básica de uma página
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
Propriedades de <body>
É possível inserir os valores das cores das seguintes formas:
1. Colocando o nome da cor em inglês. Ex.: Branco = White, Preto = Black, Azul = Blue, Rosa = Pink
2. Colocando os valores RGB da cor. Ex.: Branco = RGB(255,255,255), Preto = RGB(0,0,0), Amarelo = RGB(255,255,0)
3. Colocando o valor hexadecimal da cor. Ex.: Branco = #FFFFFF, Preto = #000000, Verde = #00FF00
Tabela de cores: http://www.efeitosespeciais.net/tabela.htm
Cores
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>
Heading
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>
Font
<b>negrito</b>
<i>itálico</i>
<u>sublinhado<</u>
Negrito, Itálico e Sublinhado
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>
Parágrafo e Alinhamento
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”>
Imagem
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:[email protected]
target: indica onde a nova página deve ser aberta
- Mesma página = “_self” (Padrão)- Nova página = “_blank”
Links
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
Lista
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><tr>
<td>Célula 3</td><td>Célula 4</td>
</tr></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)
Tabela
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
Linha
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
Letreiro