Html

653 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
653
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html

  1. 1. HTML
  2. 2. O QUE É HTML?HTML é uma linguagem simples que mistura conteúdo textual e marcações (tags). É usada para exibir conteúdo formatado num cliente web (navegador) e também para interagir com sistemas baseadas na web, hospedados em um servidor.As tags de marcação são usadas para descrever: • aparência • posicionamento (layout) • conteúdo • e elementos na página (ex.: formulários, imagens etc.)As tags são formadas assim: <nome_da_tag [parâmetros] ... >Cada página web (ou HTML) é representada por um arquivo com a extensão .html ou .htm.
  3. 3. Toda página HTML deve ser formada por uma estrutura básica de tags. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Título da página</title> </head> <body> O conteúdo da página vai aqui... </body> </html>
  4. 4. • DOCTYPE Declara o tipo do documento e a versão do HTML. Deve ser o primeiro elemento da página.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">• HTML Elemento raíz da página, que delimita todos os elementos da página. Deve conter a marcação de início e de fim (última tag do documento) e ser único na página. Todos os outros elementos vão dentro dele. <html> ... </html>
  5. 5. • HEAD Define o cabeçalho da página. Deve ser único na página e vir logo após HTML. • TITLE - Define o título da página, que aparece na barra do navegador.• BODY Define o corpo da página. Tudo o que estiver dentro dele é o que será apresentado no navegador. Deve vir logo após a tag HEAD. Esta tag aceita inúmeros parâmetros que definem características da página. • BGCOLOR - define a cor de fundo da página. • TEXT - define a cor padrão do texto. • BACKGROUND - define a imagem de fundo.
  6. 6. oLINK - define a cor padrão dos links. oALINK - define a cor padrão dos links ativos. oVLINK - define a cor padrão dos links visitados. Exemplo:<body bgcolor="purple" text="yellow" link="red"alink="yellow" vlink="green">O conteúdo da página vai aqui.</body>
  7. 7. FORMATANDO CONTEÚDO• H1 ... H6 As tags H? formatam o texto como um cabeçalho ou tópico na página. A tag H1 tem um tamanho de fonte maior, indo até a H6, que tem um tamanho menor. <body> <h1>Tópico 1</h1> Algum texto aqui... <h2>Tópico 2</h2> Outro texto aqui... <h4>Tópico 4</h4> Mais texto ali... <h6>Tópico 6</h6> E mais texto acolá... </body>
  8. 8. FORMATANDO CONTEÚDO• P A tag P serve para demarcar parágrafos de texto. Ela deve conter a marcação de início e fim, apesar dos navegadores aceitarem apenas a marcação de início.Exemplo: <body> <p>Este é um exemplo de parágrafo.</p> <p>Aqui já começa um novo parágrafo do texto.</p> </body>
  9. 9. FORMATANDO CONTEÚDO• BR A tag BR serve para marcar quebra de linha, já que a quebra de linha no fonte do HTML não é representado no navegador. Esta tag não tem marcação de fim.Exemplo: <body> Linha 1 do texto.<br> Esta é a linha 2 do nosso texto.<br> Terceira linha e assim por diante. </body>
  10. 10. FORMATANDO CONTEÚDO• CENTER A tag CENTER serve para centralizar qualquer tipo de elemento contido na sua marcação, desde textos até tabelas e componentes de formulário e imagens. A centralização é baseada no espaço de onde a tag está contida, por exemplo, a página em si, uma célula de um tabela etc. <body> <center>Texto centralizado.</center> Texto com posicionamento padrão (à esquerda). </body>
  11. 11. FORMATANDO CONTEÚDO• BLOCKQUOTE A tag BLOCKQUOTE é usada para fazer uma cotação de texto, ou seja, o texto fica recuado à direita, em relação ao texto que o precede e/ou sucede. Outras tags podem ser aninhadas dentro desta tag. <body> Texto sem cotação. <blockquote>Este texto pode ser uma citação.</blockquote> E aqui continua o resto do texto. </body>
  12. 12. FORMATANDO CONTEÚDO• B A tag B marca um texto em negrito.• I A tag I marca um texto em itálico.• U A tag U marca um texto sublinhado. <body> Este é o curso de <b>HTML</b>.<br> Este é o curso de <i>HTML</i>.<br> Este é o curso de <i><b>HTML</b></i>.<br> Este é o curso de <u>HTML</u>. </body>
  13. 13. FORMATANDO CONTEÚDO• SMALL A tag SMALL marca um texto menor.• BIG A tag BIG marca um texto maior.• S A tag S marca um texto riscado. <body> Texto <small>menor</small><br> Texto <big>maior</big><br> Texto <s>riscado</s>. </body>
  14. 14. FORMATANDO CONTEÚDO• FONT A tag FONT define o tipo, tamanho e cor de fonte do texto marcado. Esta tag aceita os seguintes parâmetros: • SIZE – define o tamanha da fonte, de 1 a 7. • COLOR – define a cor da fonte. • FACE – define o tipo da fonte. <body> Este texto <font size="2" face="Arial" color="red">tem <font size="4" color="green">uma fonte</font> diferente</font>. </body>
  15. 15. FORMATANDO CONTEÚDO• HR A tag HR desenha uma linha horizontal na tela. Os seguintes parâmetros podem ser usados: • width – largura da linha (expressa em pixels ou porcentagem). • size – altura da linha. • color – cor da linha. <body> Este é o texto superior. <hr width="50%" size="20" color="blue"> Este é o texto inferior. </body>
  16. 16. CORES• As cores, em HTML, são expressas nas formas de nome pré-existente e, principalmente como representações hexadecimais dos níveis de cores RGB. São 16 os nomes existentes de cores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. Para todas as outras cores use o padrão hexadecimal, que está na forma #RRGGBB. O primeiro caractere é um #, os dois seguintes são a representação hexa do tom de vermelho, os dois do meio o hexa do verde e os dois últimos o hexa do tom de azul. A mistura das três cores gera outras muitas cores possíveis.
  17. 17. LISTAGENSEm HTML é possível usar dois tipos de listagens: ordenadas e não-ordenadas.• OL Declara uma listagem ordenada (enumerada). Dever marcar o início e o fim da listagem e contar os itens listados dentro da sua marcação. Aceita os atributos: TYPE (A, a, 1, I), START, COMPACT. <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
  18. 18. LISTAGENS• UL Declara uma listagem não-ordenada (com figuras) . Dever marcar o início e o fim da listagem e contar os itens listados dentro da sua marcação. Aceita os atributos: TYPE (SQUARE, CIRCLE, DISC), COMPACT. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
  19. 19. LISTAGENS• LI Declara um item de uma listagem. Deve marcar o início e o fim do item, apesar dos navegadores aceitarem apenas a marcação inicial. Aceita os atributos: TYPE, VALUE.
  20. 20. LISTAGENS <ul type="disc"> <li>Introdução ao HTML</li> <ul type="square"> <li>Textos</li> <ul type="circle"> <li>B</li> </ul> </ul> </ul>
  21. 21. IMAGENS• A apresentação de imagens é totalmente suportada pela HTML. Os formatos de imagens suportados são: GIF e JPG, e em alguns navegadores o formato PNG também é aceito. Não abuse de muitas imagens, principalmente grandes e de alta qualidade, pois pode causar lentidão no tráfego da rede, principalmente por causa do seu tamanho (em bytes).
  22. 22. IMAGENS• IMG A referência à imagem é feita por meio da tag IMG. Esta tag aceita os seguintes parâmetros: • SRC – Caminho da imagem - URL absoluta ou relativa (obrigatório). • ALT – Mensagem a ser exibida sobre a imagem (tooltip). • WIDTH – Largura da imagem, em pixels. • HEIGHT – Altura da imagem, em pixels. • BORDER – Define a largura da borda da imagem ( 0 = sem borda ). • ALIGN – Alinhamento da imagem em relação ao texto (LEFT, RIGHT, TOP, BOTTOM, MIDDLE).
  23. 23. IMAGENS EXEMPLO:<img src="imagens/getjava.gif" width="88” height="31" alt="Get Java">
  24. 24. IMAGENS
  25. 25. LINKS• É possível se criar um vínculo (ou link) de uma página web para outra, bem como um vínculo para qualquer outro recurso que possa estar disponível local ou remotamente, por meio de uma referência. Tanto um texto, quanto uma imagem podem ser vinculados a um outro recurso. Quando um link é criado, o texto ou imagem que possui o vínculo pode levar o usuário ao recurso referênciado através de um simples clique do mouse em cima do elemento vinculado.
  26. 26. LINKS• A Os links (ou hyperlinks) podem ser criados por meio da tag A. Esta tag aceita os seguintes argumentos: • HREF – Caminho para o recurso vinculado (absoluto ou relativo) – obrigatório. Os caminhos absolutos precisam começar por http://. • TARGET – Onde será aberto o recurso. É usado quando se usa frames em HTML ou quando se quer abrir em uma nova janela. Aceita os valores: _BLANK (nova janela), _SELF (mesma janela/frame), _TOP (frame principal), _PARENT (frame pai). Na falta deste atributo, o vínculo é aberto na mesmo janela/frame.
  27. 27. LINKS EXEMPLO:<a href="contato.htm">contato</a> <br><a href="mailto:bruna.sousa123@gmail.com">Mande e-mail</a><a href="vendas.htm"><img src="vendas.gif"></a> <br><a href="fotos/produto1.jpg" target= "_blank">Ver produto 1</a>
  28. 28. TABELAS• As tabelas são elementos da HTML que servem para organizar o layout da página e também organizar dados e informações. São formadas por, basicamente, linhas e colunas. Os dados (texto) ou outros elementos da HTML são posicionados dentro das células da tabela. As tabelas são formadas pelas tags TABLE, TR e TD, porém pode conter outras tags auxiliares e também diversos atributos que formatam a tabela.
  29. 29. TABELAS• TABLE A tag TABLE define uma tabela. Esta tag aceita os seguintes parâmetros: • BORDER – Largura da borda da tabela, em pixels (padrão = 0). • WIDTH – Largura da tabela, em pixels ou em percentual. • CELLPADDING – Distância, em pixels, da borda até o dado da célula. • CELLSPACING – Distância entre as células, em pixels.
  30. 30. TABELAS • ALIGN – Define o alinhamento da tabela (CENTER, LEFT, RIGHT). • BACKGROUND – Define uma imagem de fundo. • BGCOLOR – Define a cor de fundo da tabela. • BORDERCOLOR – Define a cor da borda. • CAPTION - Define um título para a tabela. Ele deve ser colocado logo após a tag TABLE.
  31. 31. TABELAS• TR A tag TR define uma linha da tabela. Esta tag aceita os seguintes parâmetros: • HEIGHT – Altura da linha, em pixels. • ALIGN – Define o alinhamento horizontal na linha (CENTER, LEFT, RIGHT, JUSTIFY). • VALIGN – Define o alinhamento vertical na linha (MIDDLE, TOP, BOTTOM). • BGCOLOR – Define a cor de fundo da linha. • BACKGROUND – Define uma imagem de fundo. • BORDERCOLOR – Define a cor da borda.
  32. 32. TABELAS• TD A tag TD define uma célula da tabela. Cada célula em uma linha define uma coluna. Esta tag aceita os seguintes parâmetros: • WIDTH – Largura da célula, em pixels. • HEIGHT – Altura da célula, em pixels. • ALIGN – Define o alinhamento horizontal na linha (CENTER, LEFT, RIGHT,JUSTIFY). • VALIGN – Define o alinhamento vertical na linha (MIDDLE, TOP,BOTTOM). • BGCOLOR – Define a cor de fundo da linha. • BACKGROUND – Define uma imagem de fundo. • NOWRAP – Expande a célula para não haver quebra de texto.
  33. 33. <table border="1" bgcolor="#FFFF00" cellspacing="2“cellpadding="2"><caption>Clientes</caption><tr height="30" bgcolor="#00FF00"><th align="center">Nome</td><th align="center">Idade</td></tr><tr><td align="left">Marcos</td><td align="center">33</td></tr><tr><td align="left">Rose</td><td align="center">28</td></tr><tr><td align="left">Sérgio</td><td align="center">30</td></tr></table>
  34. 34. TABELAS• COLSPAN e ROWSPAN Os atributos COLSPAN e ROWSPAN da tag TD e TH servem para: COLSPAN – Agrupa células em uma só, mesclando colunas. ROWSPAN – Agrupa células de uma coluna em uma só linha.
  35. 35. TABELAS
  36. 36. FORMULÁRIOS• Os formulários e seus componentes dão ao usuário a capacidade de inserir dados e enviá-los ao servidor, como uma forma de interação. Os componentes disponíveis são: • Campos de texto e senha. • Lista de seleção (combo e lista) • Botões • Botões de radio • Caixas de seleção (checkbox) • Seleção de arquivos
  37. 37. FORMULÁRIOS• FORM A tag FORM define o início e o fim de um formulário. O formulário pode estar dentro de uma tabela ou outros elementos, além de poder conter outros elementos da HTML dentro de si. Esta tag aceita os seguintes parâmetros: • ACTION – Define a URL do recurso para onde serão enviados os dados. • METHOD – Define o método de envio (POST, GET). • NAME – Nome do formulário. Para identificar, caso haja mais de um na página.
  38. 38. FORMULÁRIOS• TEXTFIELD O textfield é um campo usado para a digitação de um texto. É formado pela tag INPUT, com o atributo TYPE=“TEXT”. Aceita os seguintes parâmetros: • NAME – Nome do campo de texto. • VALUE – Valor a ser exibido no campo. • SIZE – Define o tamanho do campo (em número de caracteres).
  39. 39. FORMULÁRIOS<form name="f1" action="/Cadastro“ method="post">Nome: <input type="text" name="nome“ value="Daniel" size="20"></form>
  40. 40. FORMULÁRIOS• PASSWORD O password é um campo usado para a digitação de um texto para senhas. É formado pela tag INPUT, com o atributo TYPE=“PASSWORD”. Aceita os seguintes parâmetros: • NAME – Nome do campo de senha. • VALUE – Valor do campo – o valor exibido será sempre asteríscos (*). • SIZE – Define o tamanho do campo (em número de caracteres).
  41. 41. FORMULÁRIOS<form name="f1" action="/Login" method="post“>Senha: <input type="password" name="senha" size="15"></form>

×