SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
index.html
• Esta declaração deve ser a primeira coisa em seu documento HTML, antes da tag <html>.
• O <! DOCTYPE> declaração não é uma tag HTML; é uma instrução para o navegador da
web sobre qual versão do HTML da página é escrito.
<!DOCTYPE HTML>
• Essa TAG indica o começo e o final do documento HTML.
• Instruções - códigos - que possuem funções especificas.
• Códigos interpretados pelo navegador
<html></html>
• Indica onde começa e termina o cabeçalho do documento html, que contém informações
específicas e que não são exibidas no navegador, apesar de existirem e possuírem
enorme importância;
<head></head>
• Contém o título da página;
<title></title>
• É o corpo do documento HTML, é onde são inseridos todos os elementos – textos, links,
imagens - o que queremos que apareçam na nossa página.;
<body></body>
• Mais uma tag "invisível"
• Ordena informações no cabeçalho da página <head> e define o que ele contém;
• Fornece informações que podem ser utilizadas pelos mecanismos de busca na web.
• http-equiv: Faz uma correspondência com campos de cabeçalho do protocolo HTTP. Uma ação é
desencadeada quando lidos pelo navegador;
• content: Especifica meta-informação para que seja associada com o valor especificado no http-equiv.
<meta http-equiv="content-type"
content=“text/html; charset=utf-8">
<meta http-equiv="refresh"
content=“10;
url=http://google.com">
• As tags possuem atributos, que são informações que passamos para que ela se comporte
de determinada maneira.
• Atributos globais: class, id, acesskey, draggable, hidden, lang, style, tabindex, title.
<button class="btn-red">Cancelar</button>
• Principais atributos
<div class="titulo-maior"></div>
class: pode-se repetir no html
• Principais atributos
<div id="titulo-cabecalho"></div>
id: é único em todo html
• Atributos de tags
<body bgcolor="#73A57E" text="#52D648">
Corpo da página
</body>
• Direciona para outra página, link ou arquivo.
<a></a>
<a href="http://www.google.com.br">Google</a>
• Utilizada para formatar um título ou tópico de uma seção.
• Disponibiliza 6 níveis
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
• Delimita parágrafos e insere o espaço de uma linha em branco entre eles.
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
• Atributos:
• align: define uma posição de alinhamento para o elemento que está sendo
formatado pela tag.
• Os valores podem ser: left: esquerda; center: centralizado; right: direita; justify:
justificado;
<p align="left">Primeiro parágrafo</p>
<p align="center">Segundo parágrafo</p>
• Utilizado quando é necessário que se faça uma quebra de linha em uma frase.
<br>
• Cria uma linha horizontal no documento, também utilizada para separar seções de
informação.
<hr>
• Cria uma lista não ordenada.
<ul></ul>
• Cria um item em uma lista não ordenada.
<li></li>
• Lista não ordenada completa
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
• Mudando o indicador
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
</ul>
• Cria uma lista ordenada.
<ol></ol>
• Lista ordenada completa
<ol>
<li>Ouro</li>
<li>Prata</li>
<li>Bronze</li>
</ol>
• Mudando indicador/Iniciando indicador
<ol start="5" type="A">
<li>Ouro</li>
<li>Prata</li>
<li>Bronze</li>
</ol>
<a></a>
<html></html>
<head></head>
<title></title>
<body></body>
<meta>
<h1></h1> - <h6></h6>
<p></p>
<br>
<hr>
<ul></ul>
<li></li>
<ol></ol>
• HTML Princípios Básicos - (http://pt.slideshare.net/mayzaoliveira/htmlprincipiosbasicos)
• Tutorial de HTML - Tabelas (http://www.clem.ufba.br/tuts/html/c09.htm)

Mais conteúdo relacionado

Mais procurados (20)

Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
Html e css
Html e cssHtml e css
Html e css
 
HTML
HTMLHTML
HTML
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Aula 03
Aula 03Aula 03
Aula 03
 
Aula 02
Aula 02Aula 02
Aula 02
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Introdução ao HTML
Introdução ao HTML Introdução ao HTML
Introdução ao HTML
 
Aula de XHTML
Aula de XHTMLAula de XHTML
Aula de XHTML
 
Aula 05
Aula 05Aula 05
Aula 05
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
 
Aula 04
Aula 04Aula 04
Aula 04
 
Aula 07
Aula 07Aula 07
Aula 07
 
Aula 09
Aula 09Aula 09
Aula 09
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
 
HTML básico
HTML básicoHTML básico
HTML básico
 
HTML & CSS - Aula 4
HTML & CSS - Aula 4HTML & CSS - Aula 4
HTML & CSS - Aula 4
 

Semelhante a HTML - HyperText Markup Language - 2

Semelhante a HTML - HyperText Markup Language - 2 (20)

HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Diazo para todos
Diazo para todosDiazo para todos
Diazo para todos
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Aula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.brAula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.br
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
HTML introdução
HTML  introduçãoHTML  introdução
HTML introdução
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Aula html5
Aula html5Aula html5
Aula html5
 
Html completo
Html completoHtml completo
Html completo
 
Iniciação em HTML
Iniciação em HTMLIniciação em HTML
Iniciação em HTML
 

Mais de Israel Messias

Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebIsrael Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Israel Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Israel Messias
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosIsrael Messias
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-ServidorIsrael Messias
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosIsrael Messias
 
Ferramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasFerramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasIsrael Messias
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioIsrael Messias
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasIsrael Messias
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoIsrael Messias
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2Israel Messias
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1Israel Messias
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPIsrael Messias
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosIsrael Messias
 
HTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioHTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioIsrael Messias
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review Israel Messias
 
HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5Israel Messias
 
HTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - IntroduçãoHTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - IntroduçãoIsrael Messias
 

Mais de Israel Messias (20)

CMS
CMSCMS
CMS
 
Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente Web
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1
 
Websockets
WebsocketsWebsockets
Websockets
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - Modelos
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-Servidor
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dados
 
Ferramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasFerramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - Canvas
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - Áudio
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - Medidas
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - Revisão
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTP
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivos
 
HTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioHTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - Formulário
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review
 
HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5
 
HTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - IntroduçãoHTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - Introdução
 

HTML - HyperText Markup Language - 2

  • 1.
  • 2.
  • 4. • Esta declaração deve ser a primeira coisa em seu documento HTML, antes da tag <html>. • O <! DOCTYPE> declaração não é uma tag HTML; é uma instrução para o navegador da web sobre qual versão do HTML da página é escrito. <!DOCTYPE HTML>
  • 5. • Essa TAG indica o começo e o final do documento HTML. • Instruções - códigos - que possuem funções especificas. • Códigos interpretados pelo navegador <html></html>
  • 6.
  • 7. • Indica onde começa e termina o cabeçalho do documento html, que contém informações específicas e que não são exibidas no navegador, apesar de existirem e possuírem enorme importância; <head></head>
  • 8. • Contém o título da página; <title></title>
  • 9. • É o corpo do documento HTML, é onde são inseridos todos os elementos – textos, links, imagens - o que queremos que apareçam na nossa página.; <body></body>
  • 10. • Mais uma tag "invisível" • Ordena informações no cabeçalho da página <head> e define o que ele contém; • Fornece informações que podem ser utilizadas pelos mecanismos de busca na web. • http-equiv: Faz uma correspondência com campos de cabeçalho do protocolo HTTP. Uma ação é desencadeada quando lidos pelo navegador; • content: Especifica meta-informação para que seja associada com o valor especificado no http-equiv. <meta http-equiv="content-type" content=“text/html; charset=utf-8">
  • 12. • As tags possuem atributos, que são informações que passamos para que ela se comporte de determinada maneira. • Atributos globais: class, id, acesskey, draggable, hidden, lang, style, tabindex, title. <button class="btn-red">Cancelar</button>
  • 13. • Principais atributos <div class="titulo-maior"></div> class: pode-se repetir no html
  • 14. • Principais atributos <div id="titulo-cabecalho"></div> id: é único em todo html
  • 15. • Atributos de tags <body bgcolor="#73A57E" text="#52D648"> Corpo da página </body>
  • 16.
  • 17. • Direciona para outra página, link ou arquivo. <a></a> <a href="http://www.google.com.br">Google</a>
  • 18. • Utilizada para formatar um título ou tópico de uma seção. • Disponibiliza 6 níveis <h1>Título 1</h1> <h2>Título 2</h2> <h3>Título 3</h3> <h4>Título 4</h4> <h5>Título 5</h5> <h6>Título 6</h6>
  • 19. • Delimita parágrafos e insere o espaço de uma linha em branco entre eles. <p>Primeiro parágrafo</p> <p>Segundo parágrafo</p>
  • 20. • Atributos: • align: define uma posição de alinhamento para o elemento que está sendo formatado pela tag. • Os valores podem ser: left: esquerda; center: centralizado; right: direita; justify: justificado; <p align="left">Primeiro parágrafo</p> <p align="center">Segundo parágrafo</p>
  • 21. • Utilizado quando é necessário que se faça uma quebra de linha em uma frase. <br>
  • 22. • Cria uma linha horizontal no documento, também utilizada para separar seções de informação. <hr>
  • 23. • Cria uma lista não ordenada. <ul></ul>
  • 24. • Cria um item em uma lista não ordenada. <li></li>
  • 25. • Lista não ordenada completa <ul> <li>Item 1</li> <li>Item 2</li> </ul>
  • 26. • Mudando o indicador <ul type="circle"> <li>Item 1</li> <li>Item 2</li> </ul>
  • 27. • Cria uma lista ordenada. <ol></ol>
  • 28. • Lista ordenada completa <ol> <li>Ouro</li> <li>Prata</li> <li>Bronze</li> </ol>
  • 29. • Mudando indicador/Iniciando indicador <ol start="5" type="A"> <li>Ouro</li> <li>Prata</li> <li>Bronze</li> </ol>
  • 31. • HTML Princípios Básicos - (http://pt.slideshare.net/mayzaoliveira/htmlprincipiosbasicos) • Tutorial de HTML - Tabelas (http://www.clem.ufba.br/tuts/html/c09.htm)