Carregar apresentação
A apresentação está carregando. Por favor, espere
1
HTML Técnicas em Programação para Internet
Professora: Jaqueline Alves dos Santos
2
Como funciona uma página?
3
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
4
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 ">"
5
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>
6
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
7
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:
8
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>
9
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>
10
Negrito, Itálico e Sublinhado
<b>negrito</b> <i>itálico</i> <u>sublinhado<</u>
11
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>
12
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”>
13
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”>
14
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=“ aqui para acessar o Google</a>
15
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”
16
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>
17
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>
18
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
19
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
20
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
21
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>
22
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)
23
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
24
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
Apresentações semelhantes
