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

Curso HTML módulo 2

  • 1.
  • 2.
    O que sãoTags HTML Tags mais utilizadas
  • 3.
  • 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çãodos elementos Fornece ferramentas para o CSS e o Javascript fazerem seu trabalho da melhor possível Semântica com menos códigos Retro compatibilidade
  • 6.
  • 7.
  • 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) Umparágrafo em HTML é definido com a tag <p>: <p>Este é um parágrafo.</p> <p>Este é outro parágrafo.</p>
  • 11.
    Elementos de formataçãoem 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 elementosHTML 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 linkem 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>
  • 14.
  • 15.
    HTML Media HTML Images Asimagens 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 OsVí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 OsVí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 Oelemento <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 eelementos 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 tabelaHTML é 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 listadesordenada: <ul> <li>Café</li> <li>Chá</li> <li>Leite</li> </ul>
  • 23.
    HTML Lists Uma listaordenada: <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árioHTML Você pode adicionar comentários à sua fonte HTML usando a seguinte sintaxe: <!-- Escreva seu comentário aqui -->
  • 26.
    Bloco HTML eelementos 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 primeiraaula, Tags mais utitlizadas