Introdução ao HTML
https://www.facebook.com/alvarofpinheiroaulas/
br.linkedin.com/in/alvarofpinheiro/
http://www.alvarofpi...
World Wide Web (WWW)
A World Wide Web (WWW) é mais frequentemente chamada de
a Web (Teia) e é a denominação dada a uma red...
Hyper Text Markup Language (HTML)
HTML significa Linguagem de Marcação de Hipertexto. Um
arquivo HTML é um arquivo de text...
Document Type Definition (DTD)
Um documento HTML é validado em relação a uma DTD, isto é,
Definição de Tipo de Documento. ...
Tags - Cabeçalho
<!DOCTYPE> Define o tipo do documento
<html> Tag de início
<head> Define informação sobre o documento
<ti...
Tags - Página
<html> Define um documento HTML
<body> Define o corpo do documento
<h1> a <h6> Define título 1 a título 6
<p...
Tags - Tabela
<table> Define uma tabela
<th> Define um cabeçalho de tabela
<tr> Define uma linha de tabela
<td> Define uma...
Tags - Tabela
<table>
<tr>
<td>
linha 1, célula 1
</td>
<td>
linha 1, célula 2
</td>
</tr>
<tr>
<td>
linha 2, célula 1
</t...
Tags - Estilo
<style> Define uma definição de estilo
<div> Define uma seção num documento
<span> Define uma seção num docu...
Tags - Vínculo
<a href> Víncula um arquivo
File Acessa um arquivo no seu PC local
ftp Acessa um arquivo num servidor FTP
h...
Tags -Âncora
<a href="http://www.w3schools.com/">Visite as W3Schools!</a>
<a href="http://www.w3schools.com/" target="_bla...
Tags - Script
<script> Define a script
<noscript> Texto alternativo se o script não for executado
<object> Define um objet...
Tags - Texto
<h1>Este é um título</h1>
<h2>Este é um título</h2>
<h3>Este é um título</h3>
<h4>Este é um título</h4>
<h5>E...
Tags - Formatação
<b> Define texto em negrito
<big> Define texto grande
<em> Define texto enfatizado;
<i> Define texto em ...
Tags - Entrada
<form>
Primeiro nome:
<input type="text" name="firstname">
<br>
Último nome:
<input type="text" name="lastn...
Tags - Saída
<code> Define texto de código de computador
<kbd> Define texto de teclado
<samp> Define amostra de código de ...
Tags - Controle
<form> Define um formulário para entradas do usuário
<input> Define um campo de entrada
<textarea> Define ...
Tags - Botões
Botões Radiais:
<form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name=...
Tags - Listas
Listas Não Ordenadas: Uma lista não ordenada é uma lista de
itens. As listas de itens são marcadas com bulle...
Tags - Imagem
<img> Define uma imagem
<map> Define um mapa de imagem
<area> Define uma área dentro de um mapa de imagem
<i...
Tags - Background
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
http://www.alvarofpinheiro.e...
Tags – Estilo
Folha de Estilo Externa
<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css">
</head>
Folha de...
Tags – HTML5
<embed> inserir conteúdo externo
<video> inserir vídeos
<audio> inserir audio stream
<source> inserir vídeo o...
Próximos SlideShares
Carregando em…5
×

Introdução ao HTML

477 visualizações

Publicada em

Introdução as principais tags do HTML

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
477
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao HTML

  1. 1. Introdução ao HTML https://www.facebook.com/alvarofpinheiroaulas/ br.linkedin.com/in/alvarofpinheiro/ http://www.alvarofpinheiro.eti.br
  2. 2. World Wide Web (WWW) A World Wide Web (WWW) é mais frequentemente chamada de a Web (Teia) e é a denominação dada a uma rede de computadores ao redor do mundo. Todos os computadores na Web podem comunicar-se uns com os outros. Todos os computadores usam um padrão de comunicação chamado HTTP. A informação na Web é armazenada em documentos chamados páginas Web. As páginas Web são arquivos armazenados em computadores chamados servidores Web. Os computadores que interpretam as páginas Web são chamados clientes Web. Os Clientes Web carregam as páginas com um programa chamado navegador Web. http://www.alvarofpinheiro.eti.br
  3. 3. Hyper Text Markup Language (HTML) HTML significa Linguagem de Marcação de Hipertexto. Um arquivo HTML é um arquivo de texto contendo pequenas etiquetas de marcação (markup tags). As marcações dizem para o navegador Web como mostrar a página. Um arquivo HTML deve ter uma extensão de arquivo htm ou html. Um arquivo HTML pode ser criado usando um simples editor de textos. http://www.alvarofpinheiro.eti.br
  4. 4. Document Type Definition (DTD) Um documento HTML é validado em relação a uma DTD, isto é, Definição de Tipo de Documento. Antes que um arquivo HTML possa ser apropriadamente validado, uma DTD correto deve ser adicionado como primeira linha do arquivo. <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EM " "http://www.w3.org/TR/html4/strict.dtd"> http://www.alvarofpinheiro.eti.br
  5. 5. Tags - Cabeçalho <!DOCTYPE> Define o tipo do documento <html> Tag de início <head> Define informação sobre o documento <title> Define o título do documento <base> Define o URL base para todos os vínculos numa página <link> Define a referência do recurso <meta> Define meta informação <html> <head> <title>Título da página</title> </head> <body> Esta é minha primeira página. <b>Este texto está em negrito</b> </body> </html> http://www.alvarofpinheiro.eti.br
  6. 6. Tags - Página <html> Define um documento HTML <body> Define o corpo do documento <h1> a <h6> Define título 1 a título 6 <p> Define um parágrafo <br> Insere uma única quebra de linha <hr> Define uma linha horizontal <!--> Define um comentário http://www.alvarofpinheiro.eti.br
  7. 7. Tags - Tabela <table> Define uma tabela <th> Define um cabeçalho de tabela <tr> Define uma linha de tabela <td> Define uma célula de tabela <caption> Define um título de tabela <colgroup> Define um grupo de colunas de tabela <col> Define os valores de atributo para colunas em uma tabela <thead> Define um cabeçalho de tabela <tbody> Define o corpo de uma tabela <tfoot> Defines o rodapé (footer) de uma tabela http://www.alvarofpinheiro.eti.br
  8. 8. Tags - Tabela <table> <tr> <td> linha 1, célula 1 </td> <td> linha 1, célula 2 </td> </tr> <tr> <td> linha 2, célula 1 </td> <td> linha 2, célula 2 </td> </tr> </table> http://www.alvarofpinheiro.eti.br
  9. 9. Tags - Estilo <style> Define uma definição de estilo <div> Define uma seção num documento <span> Define uma seção num documento http://www.alvarofpinheiro.eti.br
  10. 10. Tags - Vínculo <a href> Víncula um arquivo File Acessa um arquivo no seu PC local ftp Acessa um arquivo num servidor FTP http Acessa um arquivo num Servidor Web news Acessa um grupo de notícias Usenet telnet Acessa uma conexão Telnet mailto Acessa um e-mail <a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a> <a href="mailto:someone@w3schools.com">someone@w3schools.com</a> <a href="news:alt.html">Grupo de Notícias de HTML</a> http://www.alvarofpinheiro.eti.br
  11. 11. Tags -Âncora <a href="http://www.w3schools.com/">Visite as W3Schools!</a> <a href="http://www.w3schools.com/" target="_blank">Visite as W3Schools!</a> <a href="http://www.w3schools.com/html_links.asp">Dicas Úteis</a> http://www.alvarofpinheiro.eti.br
  12. 12. Tags - Script <script> Define a script <noscript> Texto alternativo se o script não for executado <object> Define um objeto (embedded) <param> Define configurações run-time para um objeto <html> <head> </head> <body> <script type="text/javascript"> document.write("Oi Mundo!") </script> </body> </html> http://www.alvarofpinheiro.eti.br
  13. 13. Tags - Texto <h1>Este é um título</h1> <h2>Este é um título</h2> <h3>Este é um título</h3> <h4>Este é um título</h4> <h5>Este é um título</h5> <h6>Este é um título</h6> <p>Este é um parágrafo</p> <p>Este é outro parágrafo</p> <p>Este <br> é um pará<br>grafo com quebras de linha</p> <!-- Este é um comentário --> http://www.alvarofpinheiro.eti.br
  14. 14. Tags - Formatação <b> Define texto em negrito <big> Define texto grande <em> Define texto enfatizado; <i> Define texto em itálico <small> Define texto pequeno <strong> Define texto forte <sub> Define texto subescrito <sup> Define texto superescrito http://www.alvarofpinheiro.eti.br
  15. 15. Tags - Entrada <form> Primeiro nome: <input type="text" name="firstname"> <br> Último nome: <input type="text" name="lastname"> </form> http://www.alvarofpinheiro.eti.br
  16. 16. Tags - Saída <code> Define texto de código de computador <kbd> Define texto de teclado <samp> Define amostra de código de computador <tt> Define texto de teletipo <var> Define uma variável <pre> Define texto pré-formatado http://www.alvarofpinheiro.eti.br
  17. 17. Tags - Controle <form> Define um formulário para entradas do usuário <input> Define um campo de entrada <textarea> Define controle de entrada de texto multi-linhas <label> Define um rótulo para um controle <fieldset> Define um conjunto de campos <legend> Define um título para um conjunto de campos <select> Define uma lista selecionável (uma caixa drop-down) <optgroup> Define um grupo de opção <option> Define uma opção em uma caixa drop-down <button> Define um botão para pressionar http://www.alvarofpinheiro.eti.br
  18. 18. Tags - Botões Botões Radiais: <form> <input type="radio" name="sex" value="male"> Masculino <br> <input type="radio" name="sex" value="female"> Feminino </form> Caixas de Seleção: <form> <input type="checkbox" name="bike"> Eu tenho uma bicicleta <br> <input type="checkbox" name="car"> Eu tenho um carro </form> http://www.alvarofpinheiro.eti.br
  19. 19. Tags - Listas Listas Não Ordenadas: Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets. <ul> <li>Café</li> <li>Leite</li> </ul> Listas ordenadas: Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números. <ol> <li>Café</li> <li>Leite</li> </ol> http://www.alvarofpinheiro.eti.br
  20. 20. Tags - Imagem <img> Define uma imagem <map> Define um mapa de imagem <area> Define uma área dentro de um mapa de imagem <img src="url"> O atributo alt é usado para definir um "texto alternativo" para uma imagem. O valor do atributo alt é um texto definido pelo autor: <img src="boat.gif" alt="Big Boat"> http://www.alvarofpinheiro.eti.br
  21. 21. Tags - Background <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> http://www.alvarofpinheiro.eti.br
  22. 22. Tags – Estilo Folha de Estilo Externa <head> <link rel="stylesheet" type="text/css" href="meuestilo.css"> </head> Folha de Estilo Interna <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> Estilos Local (inline) <p style="color: red; margin-left: 20px"> Este é um parágrafo </p> http://www.alvarofpinheiro.eti.br
  23. 23. Tags – HTML5 <embed> inserir conteúdo externo <video> inserir vídeos <audio> inserir audio stream <source> inserir vídeo ou audio http://www.alvarofpinheiro.eti.br

×