SlideShare uma empresa Scribd logo
1 de 27
Baixar para ler offline
Curso HTML
O que são Tags HTML
Tags mais utilizadas
Revisão
O que é HTML?
Hypertext Markup Language
(Linguagem de Marcação de Hipertexto)
Publicação de conteúdo
(texto, imagens, vídeos, áudio etc) na web
Facilitar a manipulação dos elementos
Fornece ferramentas para o CSS e o
Javascript fazerem seu trabalho da melhor
possível
Semântica com menos códigos
Retro compatibilidade
<tagname>conteúdo vai aqui...</tagname>
Estrutura básica
HTML Headings (cabeçalhos)
<h1> define o título mais importante. <h6> define o título menos importante:
<h1>Esse é o cabeçalho 1</h1>
<h2>Esse é o cabeçalho 2</h2>
<h3>Esse é o cabeçalho 3</h3>
<h4>Esse é o cabeçalho 4</h4>
<h5>Esse é o cabeçalho 5</h5>
<h6>Esse é o cabeçalho 6</h6>
HTML Paragraphs (parágrafos)
Um parágrafo em HTML é definido com a tag <p>:
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
Elementos de formatação em HTML
<p>Os elementos de <strong>formatação</strong> foram projetados
para exibir tipos especiais de texto</p>
● <b> - texto em negrito
● <strong> - Texto importante
● <i> - texto itálico
● <em> - texto enfatizado
● <mark> - texto marcado
● <small> - Texto pequeno
● <del> - Texto excluído
● <ins> - Texto inserido
● <sub> - Texto de subscrito
● <sup> - Texto do sobrescrito
Elementos vazios
Os elementos HTML sem conteúdo são chamados de elementos vazios
<br> define uma quebra de linha
<br> define uma linha horizontal
<p>Este é um parágrafo<br /> com quebra de linha.</p>
<hr />
<p>Este é outro parágrafo.</p>
O HTML5 não exige que os elementos vazios sejam fechados. Mas se você quer uma
validação mais rigorosa, ou se você precisa tornar seu documento legível por analisadores
XML, você deve fechar todos os elementos HTML corretamente.
HTML Links
Um link em HTML é definido com a tag <a>:
<a href="https://sae.digital/">Este é um link</a>
<a href="pagina2.html">Este é um link</a>
<a href="#id">Este é um link</a>
HTML Media
HTML Media
HTML Images
As imagens em HTML são definidas com a tag <img>
O arquivo de origem (src), texto alternativo (alt), largura e altura são
fornecidos como atributos:
<img src="saedigital.png" alt="SAE Digital" width="556"
height="358">
HTML Images
Tag <figure>
<figure> marcar uma foto em um documento
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Legenda</figcaption>
</figure>
HTML Media
HTML Video
Os Vídeos em HTML são definidas com a tag <video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Seu navegador não suporta a tag video.
</video>
HTML Media
HTML Audio
Os Vídeos em HTML são definidas com a tag <audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Seu navegador não suporta a tag áudio.
</audio>
HTML Media
HTML Plug-ins
O elemento <object> é suportado por todos os navegadores
Define um objeto incorporado (embed) dentro de um documento HTML
Incorporar plug-ins como: Java, leitores de PDF, Flash Players
<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="pagina2.html"></object>
<object data="saedigital.png"></object>
https://www.w3schools.com/html/html_object.asp
Citações HTML e elementos de citação
Define uma seção que é citada de outra fonte
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML Tables
Uma tabela HTML é definida com a tag <table>
Linha <tr>
Cabeçalho <th>
Célula de tabela <td>
Célula em mais de uma coluna colspan
Célula mais de uma linha rowspan
HTML Lists
Uma lista desordenada:
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
HTML Lists
Uma lista ordenada:
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
HTML Iframes
Um iframe é usado para exibir uma página da Web
dentro de uma página da Web
<iframe src="pagina2.html" height="200" width="300"></iframe>
Tags de comentário HTML
Você pode adicionar comentários à sua fonte HTML
usando a seguinte sintaxe:
<!-- Escreva seu comentário aqui -->
Bloco HTML e elementos em linha
Cada elemento HTML tem um valor de exibição padrão
dependendo do tipo de elemento que é
O valor de exibição padrão para a maioria dos elementos
é em bloco ou inline
Curso HTML
Revisão primeira aula,
Tags mais utitlizadas

Mais conteúdo relacionado

Semelhante a Curso HTML Tags e Estrutura

Semelhante a Curso HTML Tags e Estrutura (20)

GUIA DE REFERÊNCIA RÁPIDA Código HTML
 GUIA DE REFERÊNCIA RÁPIDA  Código HTML GUIA DE REFERÊNCIA RÁPIDA  Código HTML
GUIA DE REFERÊNCIA RÁPIDA Código HTML
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
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
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Php aula1
Php aula1Php aula1
Php aula1
 
Iniciação em HTML
Iniciação em HTMLIniciação em HTML
Iniciação em HTML
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Html completo
Html completoHtml completo
Html completo
 
O que é html
O que é htmlO que é html
O que é html
 
Aula de XHTML
Aula de XHTMLAula de XHTML
Aula de XHTML
 
html css js ajax exercícios de programação
html css js ajax exercícios de programaçãohtml css js ajax exercícios de programação
html css js ajax exercícios de programação
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 

Curso HTML Tags e Estrutura

  • 2. O que são Tags HTML Tags mais utilizadas
  • 4. O que é HTML? Hypertext Markup Language (Linguagem de Marcação de Hipertexto) Publicação de conteúdo (texto, imagens, vídeos, áudio etc) na web
  • 5. Facilitar a manipulação dos elementos Fornece ferramentas para o CSS e o Javascript fazerem seu trabalho da melhor possível Semântica com menos códigos Retro compatibilidade
  • 8.
  • 9. HTML Headings (cabeçalhos) <h1> define o título mais importante. <h6> define o título menos importante: <h1>Esse é o cabeçalho 1</h1> <h2>Esse é o cabeçalho 2</h2> <h3>Esse é o cabeçalho 3</h3> <h4>Esse é o cabeçalho 4</h4> <h5>Esse é o cabeçalho 5</h5> <h6>Esse é o cabeçalho 6</h6>
  • 10. HTML Paragraphs (parágrafos) Um parágrafo em HTML é definido com a tag <p>: <p>Este é um parágrafo.</p> <p>Este é outro parágrafo.</p>
  • 11. Elementos de formatação em HTML <p>Os elementos de <strong>formatação</strong> foram projetados para exibir tipos especiais de texto</p> ● <b> - texto em negrito ● <strong> - Texto importante ● <i> - texto itálico ● <em> - texto enfatizado ● <mark> - texto marcado ● <small> - Texto pequeno ● <del> - Texto excluído ● <ins> - Texto inserido ● <sub> - Texto de subscrito ● <sup> - Texto do sobrescrito
  • 12. Elementos vazios Os elementos HTML sem conteúdo são chamados de elementos vazios <br> define uma quebra de linha <br> define uma linha horizontal <p>Este é um parágrafo<br /> com quebra de linha.</p> <hr /> <p>Este é outro parágrafo.</p> O HTML5 não exige que os elementos vazios sejam fechados. Mas se você quer uma validação mais rigorosa, ou se você precisa tornar seu documento legível por analisadores XML, você deve fechar todos os elementos HTML corretamente.
  • 13. HTML Links Um link em HTML é definido com a tag <a>: <a href="https://sae.digital/">Este é um link</a> <a href="pagina2.html">Este é um link</a> <a href="#id">Este é um link</a>
  • 15. HTML Media HTML Images As imagens em HTML são definidas com a tag <img> O arquivo de origem (src), texto alternativo (alt), largura e altura são fornecidos como atributos: <img src="saedigital.png" alt="SAE Digital" width="556" height="358">
  • 16. HTML Images Tag <figure> <figure> marcar uma foto em um documento <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Legenda</figcaption> </figure>
  • 17. HTML Media HTML Video Os Vídeos em HTML são definidas com a tag <video> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Seu navegador não suporta a tag video. </video>
  • 18. HTML Media HTML Audio Os Vídeos em HTML são definidas com a tag <audio> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Seu navegador não suporta a tag áudio. </audio>
  • 19. HTML Media HTML Plug-ins O elemento <object> é suportado por todos os navegadores Define um objeto incorporado (embed) dentro de um documento HTML Incorporar plug-ins como: Java, leitores de PDF, Flash Players <object width="400" height="50" data="bookmark.swf"></object> <object width="100%" height="500px" data="pagina2.html"></object> <object data="saedigital.png"></object> https://www.w3schools.com/html/html_object.asp
  • 20. Citações HTML e elementos de citação Define uma seção que é citada de outra fonte <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
  • 21. HTML Tables Uma tabela HTML é definida com a tag <table> Linha <tr> Cabeçalho <th> Célula de tabela <td> Célula em mais de uma coluna colspan Célula mais de uma linha rowspan
  • 22. HTML Lists Uma lista desordenada: <ul> <li>Café</li> <li>Chá</li> <li>Leite</li> </ul>
  • 23. HTML Lists Uma lista ordenada: <ol> <li>Café</li> <li>Chá</li> <li>Leite</li> </ol>
  • 24. HTML Iframes Um iframe é usado para exibir uma página da Web dentro de uma página da Web <iframe src="pagina2.html" height="200" width="300"></iframe>
  • 25. Tags de comentário HTML Você pode adicionar comentários à sua fonte HTML usando a seguinte sintaxe: <!-- Escreva seu comentário aqui -->
  • 26. Bloco HTML e elementos em linha Cada elemento HTML tem um valor de exibição padrão dependendo do tipo de elemento que é O valor de exibição padrão para a maioria dos elementos é em bloco ou inline
  • 27. Curso HTML Revisão primeira aula, Tags mais utitlizadas