Descrição: 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:
O controlsatributo adiciona controles de vídeo, como reprodução, pausa e volume.
É uma boa ideia sempre incluir os atributos widthe height. Se a altura e a largura não forem definidas, a página pode piscar enquanto o vídeo carrega.
O <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>e </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
O controlsatributo adiciona controles de áudio, como reprodução, pausa e volume.
O <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>e </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
widthe heightpara 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>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Título </h1>
<p>parágrafo </p>
</body>
</html>
<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><html>
<body>
<p>Este é um parágrafo.</p>
</html>
<html>
<body>
<p>Os links HTML são definidos com a tag a:</p>
</html>
<html>
<body>
<p>As imagens HTML são definidas com a tag img::</p>
</html>
<html>
<body>
<p>HTML buttons tags:</p>
</html>
<html>
<body>
<li>curso PHP 8</li>
<li>Curso Sistema de Cobranças</li>
<li>Curso NodeJs</li>
</ul>
<li>Wordpress</li>
<li>Elementor</li>
<li>HTML / CSS</li>
</ol>
</html>
<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:
O controlsatributo adiciona controles de vídeo, como reprodução, pausa e volume.
É uma boa ideia sempre incluir os atributos widthe height. Se a altura e a largura não forem definidas, a página pode piscar enquanto o vídeo carrega.
O <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>e </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
O controlsatributo adiciona controles de áudio, como reprodução, pausa e volume.
O <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>e </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
widthe heightpara 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>
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:
O controlsatributo adiciona controles de vídeo, como reprodução, pausa e volume.
É uma boa ideia sempre incluir os atributos widthe height. Se a altura e a largura não forem definidas, a página pode piscar enquanto o vídeo carrega.
O <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>e </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
O controlsatributo adiciona controles de áudio, como reprodução, pausa e volume.
O <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>e </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
widthe heightpara 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
