Tudo que você precisa saber sobre Html 5 - Maykon Silveira

Novo documento HTML5 - Maykon Silveira - Introdução ao Html 5 - Maykon Silveira



Tudo que você precisa saber sobre Html 5 - Maykon Silveira

 

O que é HTML?

 

  • HTML significa Hyper Text Markup Language
  • HTML é a linguagem de marcação padrão para a criação de páginas da web
  • HTML descreve a estrutura de uma página da web
  • HTML consiste em uma série de elementos
  • Os elementos HTML informam ao navegador como exibir o conteúdo
  • Os elementos HTML identificam partes de conteúdo como "isto é um título", "isto é um parágrafo", "isto é um link", etc.

 

HTML é a linguagem de marcação padrão para páginas da web.

Com HTML, você pode criar seu próprio site.

HTML é fácil de aprender - você vai se divertir!

 

Aprendizagem fácil com HTML "Experimente você mesmo"

 

O HTML É UMA LINGUAGEM DE PROGRAMAÇÃO? 

 Não!, ele não tem lógica como as linguagens de programação que utiliza if e else, true e false. 

 

Com nosso editor "Experimente você mesmo", você pode editar o código HTML e visualizar o resultado:

 

Exemplo de um código html5 básico:

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Título </h1>
<p>parágrafo </p>

</body>
</html>
 

Títulos No HTML5

 
 
<h1>Este é o título 1</h1>
<h2>Este é o título 2</h2>
<h3>Este é o título 3</h3>
<h4>Este é o título 4</h4>
<h5>Este é o título 5</h5>
<h6>Este é o título 6</h6>

 

 

 

Exemplo de HTML parágrafo:

<!DOCTYPE html>
<html>
<body>

<p>Este é um parágrafo.</p>
<p>Este é um parágrafo.</p>

</body>
</html>

 

Exemplo de HTML link:

<!DOCTYPE html>
<html>
<body>

<h2>LINKS HTML</h2>
<p>Os links HTML são definidos com a tag a:</p>

<a href="https://www.maykonsilveira.com.br">Clique Aqui</a>

</body>
</html>

 

Exemplo de HTML Imagens:

<!DOCTYPE html>
<html>
<body>

<h2>HTML imagens</h2>
<p>As imagens HTML são definidas com a tag img::</p>

<img src="maykonsilveira.jpg" alt="EAD maykonsilveira.com.br" width="70" height="70">

</body>
</html>

 

Exemplo de HTML Buttons - Botões:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Buttons</h2>
<p>HTML buttons tags:</p>

<button>Clique Aqui</button>

</body>
</html>

 

Exemplo de HTML Listas:

<!DOCTYPE html>
<html>
<body>

<h2>Listas no HTML5</h2>

<ul>
<li>curso PHP 8</li>
<li>Curso Sistema de Cobranças</li>
<li>Curso NodeJs</li>
</ul>

<h2>Outros Cursos</h2>

<ol>
<li>Wordpress</li>
<li>Elementor</li>
<li>HTML / CSS</li>
</ol>

</body>
</html>

 

Exemplo de HTML Tabela:

<table>
  <tr>
    <th>Empresa</th>
    <th>Fone</th>
    <th>Páis</th>
  </tr>
  <tr>
    <td>EAD Maykon Silveira</td>
    <td>(41)0000-0000</td>
    <td>Brasil</td>
  </tr>
  
</table>
 

Exemplo de HTML Iframes:

<iframe src="https://maykonsilveira.com.br" title="Cursos online gratuitos"></iframe>

 

Exemplo de Meta Design Responsivo HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

Elementos de código de computador HTML:

<code>
x = 5;
y = 6;
z = x + y;
</code>

 

 

Exemplo de Favicon HTML:

 <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

 

Elementos de formatação HTML

Os elementos de formatação foram projetados para exibir tipos especiais de texto:

  • <b> - Texto em negrito
  • <strong> - texto importante
  • <i> - texto em itálico
  • <em> - Texto enfatizado
  • <mark> - texto marcado
  • <small> - Texto menor
  • <del> - texto excluído
  • <ins> - texto inserido
  • <sub> - Texto subscrito
  • <sup> - Texto sobrescrito

 

Elementos de nível de bloco

Um elemento de nível de bloco sempre começa em uma nova linha.

Um elemento de nível de bloco sempre ocupa toda a largura disponível (estende-se para a esquerda e direita, tanto quanto pode).

Um elemento de nível de bloco tem uma margem superior e uma inferior, enquanto um elemento embutido não.

O elemento <div> é um elemento de nível de bloco.

 

Exemplo

<div>Seja bem vindo a EAD MaykonSilveira.com.br</div>
 

Aqui estão os elementos de nível de bloco em HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1> ao <h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

 

Elementos Inline HTML

Um elemento embutido não começa em uma nova linha.

Um elemento embutido ocupa apenas a largura necessária.

Este é um elemento <span> dentro de um parágrafo.

 <a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

 

 Trabalhando com Formulário - HTML Forms:

aqui estão alguns exemplos:

Modelo Descrição
<input type = "text"> Exibe um campo de entrada de texto de linha única
<input type = "radio"> Exibe um botão de opção (para selecionar uma das muitas opções)
<input type = "checkbox"> Exibe uma caixa de seleção (para selecionar zero ou mais de muitas opções)
<input type = "submit"> Exibe um botão de envio (para enviar o formulário)
<input type = "button"> Exibe um botão clicável

 

Exemplo

Um formulário com campos de entrada para texto:

<form>
  <label for="nome">Nome:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Sobrenome:</label><br>
  <input type="text" id="lname" name="lname">
</form>
 

Exemplo

Um formulário com botões de opção:

<p>Escolha uma opção:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>
 
 

Exemplo

Um formulário com caixas de seleção:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1">Bicicleta</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2">Carro</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3">Barco</label>
</form>
 

Exemplo

Um formulário com um botão de envio:

<form action="/action_page.php">
  <label for="fname">Nome:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Fone:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Enviar">
</form>
 
 

HTML 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 esta tag, diz Maykon Silveira
</video>

Como funciona Vídeos:

controlsatributo adiciona controles de vídeo, como reprodução, pausa e volume.

É uma boa ideia sempre incluir os atributos widthheight. Se a altura e a largura não forem definidas, a página pode piscar enquanto o vídeo carrega.

<source>elemento permite que você especifique arquivos de vídeo alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido.

O texto entre as tags <video></video>só será exibido em navegadores que não suportam o <video>elemento.

 

Observação: os navegadores Chromium não permitem a reprodução automática na maioria dos casos. No entanto, a reprodução automática sem som é sempre permitida.

Adicione muteddepois autoplaypara permitir que seu vídeo comece a ser reproduzido automaticamente (mas sem som):

Exemplo

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Seu navegador não suporta esta tag, diz Maykon Silveira
</video>
 

O elemento HTML <audio>

Para reproduzir um arquivo de áudio em HTML, use o <audio>elemento:

Exemplo

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Seu navegador não suporta esta tag, diz Maykon Silveira
</audio>
 

Áudio HTML - Como funciona

controlsatributo adiciona controles de áudio, como reprodução, pausa e volume.

<source>elemento permite que você especifique arquivos de áudio alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido.

O texto entre as tags <audio></audio>só será exibido em navegadores que não suportam o <audio>elemento.


HTML <audio> Reprodução automática

Para iniciar um arquivo de áudio automaticamente, use o autoplayatributo:

Exemplo

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Seu navegador não suporta esta tag, diz Maykon Silveira
</audio>
 

Observação: os navegadores Chromium não permitem a reprodução automática na maioria dos casos. No entanto, a reprodução automática sem som é sempre permitida.

Adicione muteddepois autoplaypara permitir que seu arquivo de áudio comece a tocar automaticamente (mas sem som):

Exemplo

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Seu navegador não suporta esta tag, diz Maykon Silveira
</audio>
 

Id de vídeo do YouTube

O YouTube exibirá um id (como tgbNymZ7vqY), quando você salva (ou reproduz) um vídeo.

Você pode usar este id e referir-se ao seu vídeo no código HTML.


Reproduzindo um vídeo do YouTube em HTML

Para reproduzir seu vídeo em uma página da web, faça o seguinte:

  • Envie o vídeo para o YouTube
  • Anote o ID do vídeo
  • Defina um <iframe>elemento em sua página da web
  • Deixe o srcatributo apontar para o URL do vídeo
  • Use os atributos widthheightpara especificar a dimensão do jogador
  • Adicione quaisquer outros parâmetros ao URL (veja abaixo)

Exemplo

<iframe width="420" height="315"
src="https://www.youtube.com/embed/SNQwBlHSKAQ"
>

</iframe>
 
 

Tag HTML do <artigo>

Exemplo

Três artigos com conteúdo independente e autocontido:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
 

Viu que Legal pessoal, recomendo os seguintes editores, Visual Studio Code e Sublime Text ambos são gratuitos.

 

Salve com a extensão .html e  faça seus testes. 

 

Atenciosamente Maykon Silveira 

 
 

HTML é a linguagem de marcação padrão para páginas da web, Com HTML, você pode criar seu próprio site, HTML é fácil de aprender - você vai se divertir, curso de html5 grátis, html, tags html5 novas tags html, Maykon Silveira, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , treinamento de html5 2022, treinamento de html5, curso de html5, curso maykon silveira html5


Maykon Silveira

Maykon Silveira

CEO / FOUNDER / WEBTEC TECHNOLOGIES
Programador: PHP - HTML - CSS - JAVASCRIPT - MYSQLI - ANDROID - APPLE - MOBILE
Criador de Games: XBOX - PLAYSTATION - MOBILE - COMPUTADORES - EDIÇÃO DE VÍDEOS
Marketing: GOOGLE ADWORDS- FACEBOOK ADS - YOUTUBE
Experiência na área de programação desde 2007.

Alguns Depoimentos dos Alunos Maykon Silveira EAD

Vejam o que os alunos da EAD Maykon Silveira estão falando sobre os cursos.

Política de Privacidade Termos e Condições