Download
1 / 24
250 likes | 352 Views
HTML. Técnicas em P rogramaçã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
E N D
HTML TécnicasemProgramaçãopara Internet Professora: JaquelineAlves dos Santos
O que é HTML? • HyperText Markup Language • Linguagempadrãoda internet • Não é linguagem de programação • Pode ser escritoemeditores de texto simples, comoBloco de Notas • Aosalvar o arquivo, é precisosalvarcomoformato ".htm" ou ".html" • Porconvenção, o nomedapágina principal de um site deve ser "index.html", pois é o arquivoque o servidoriráprocurarcasonãosejasolicitado um arquivoespecífico
Tags • Comandos do código HTML queformam a página • Para abriruma tag, coloque o comandocorrespondente entre "<" e ">“ • Para fechar a tag, coloque o comandocorrespondente entre "</" e ">"
Estruturabásica de umapágina <html> <head> <title>Nome dapágina</title> </head> <body> (Conteúdodapágina, comotexto, links, imagens, vídeos e etc.) </body> </html>
Propriedades de <body> Através dos atributos de <body>, podemosdefinircor 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çodaimagem"> • bgcolor: cor do fundodapágina. Padrão: branco • text: cor do texto. Padrão: preto • link: cor dos links. Padrão: azul • alink: cor do link quandoacionado. Padrão:azul • vlink: cor dos links jávisitados. Padrão: azul • background: endereçodaimagem de background. Padrão: Sem background. • align: alinhamento do texto (Esquerda = left, Centralizado = center, Direita = right). Padrão: esquerda
Cores É possívelinserirosvalores das cores das seguintesformas: • Colocando o nomedacoreminglês. Ex.: Branco = White, Preto = Black, Azul = Blue, Rosa = Pink • Colocandoosvalores 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> é utilizadaparadestacar o textocolocando-o emnegrito e definindo um tamanho, ondexvaria entre 1 (maiortamanho) e 6 (menostamanho). <h1>Maiortamanho de heading possível</h1> <h6>Menortamanho 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.: <imgsrc=“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.: <imgsrc=“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> <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)
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
