MÓDULO DE HTML5
Prof.: Marcelo Torres
[Link]
[Link]@[Link]
http:/[Link]/[Link]
@martorres_tec
Tags de heading
Os elementos da categoria Heading definem uma
seção de cabeçalhos (títulos e subtítulos):
h1 - <h1> Título 01 </h1>
h2 - <h2> Título 02 </h2>
h3 - <h3> Título 03 </h3>
h4 - <h4> Título 04 </h4>
h5 - <h5> Título 05 </h5>
h6 - <h6> Título 06 </h6>
Parágrafo - Tag <p>
Todo conteúdo textual, como livros, artigos,
documentos Web, é composto por títulos e subtítulos, como
já foi visto anteriormente, e por parágrafos de textos que
seguem estes títulos e subtítulos. A tag utilizada para a
criação de parágrafos é a tag <p> e a sua sintaxe é a
seguinte:
<p>Texto que faz parte do parágrafo</p>
Quebra de Linha - Tag <br />
Uma quebra de linha acontece quando há a
necessidade de fazer com que o restante do conteúdo
passe a ser exibido na linha de baixo. Nos editores de
textos tradicionais para realizar a quebra de linha basta
você pressionar a tecla enter. Para que isso aconteça em
HTML, é preciso a utilização do comando <BR /> e a sua
sintaxe é a seguinte:
Texto interessante <br />Texto que será exibido na linha de
baixo
TAG IMG
O comando utilizado para inserir uma imagem na
página é o comando <IMG />. Através deste comando, é
possível inserir na página uma imagem que esteja no
mesmo diretório, em outro diretório, em outro computador ou
em um servidor da Web, basta especificar a URL no atributo
“src” do comando <IMG />. A sintaxe é:
Exemplos:
<img src=”Imagens/[Link]” />
<img src=”C:\WebSite\Academia\Imagens\[Link]” />
<img src=”[Link] />
TAG FIGURE e FIGCAPTION
• Estes dois elementos foram criados para, entre outras
coisas, suprir uma necessidade básica: a criação de
legendas para imagens, diagramas, fotos, listas de código
ou qualquer outro elemento incorporado ao conteúdo e
que seja relevante ao mesmo.
<figure>
<img src=“[Link]" alt=“Sala de Aula“>
<figcaption>
Alunos da formação Webdesign em seu último dia de aula
</figcaption>
</figure>
Exercício:
Criar uma página HTML de tema livre, está página
deverá conter obrigatoriamente os seguintes itens:
• Título do Tema escolhido;
• Subtítulo;
• Um texto de mais ou menos 5 linhas sobre o tema;
• Uma imagem ilustrando o conteúdo do texto;
• Um outro subtítulo;
• Um texto de mais ou menos 5 linhas sobre o tema;
• Uma imagem ilustrando o conteúdo do subtítulo;
Listas
O HTML prevê três maneiras diferentes para
marcar listas de informações. As listas devem ser
empregadas para marcar os seguintes tipos de
conteúdos:
• Listas não ordenadas com as tags <ul>, <li>
• Listas ordenadas com as tags <ol>, <li>
• Listas de definição com as tags <dl>, <dt>, <dd>
Listas não ordenadas
Exemplo:
<ul>
<li> Informações não ordenadas </li>
<li> Informações ordenas </li>
<li> Definições </li>
</ul>
Listas ordenadas
Exemplo:
<ol>
<li> Bata tudo no liquidificador </li>
<li> Misture o fermento lentamente </li>
<li> Asse em forno pré-aquecido </li>
</ol>
Listas de Definição
Exemplo:
<dl>
<dt> Baixo Custo </dt>
<dd> Significa redução de preços </dd>
<dt> Facíl de usar </dt>
<dd> Painel com dicas de Operação </dd>
<dt> Segurança </dt>
<dd> Proteção contra choque </dd>
<dd> Coberto com material inflamável </dd>
</dl>
Obrigado.