É o acrônimo para "HyperText Markup Language", a Linguagem de Marcação de Hipertexto. Com ela são criados através de um software próprio para a função, ou que a tenha embutida, os arquivos html ou htm. De acordo com o correto uso da marcação dos textos o navegador irá então ler as informações do arquivo e exibi-las de forma gráfica.
1.1 Elemento root: html.
O elemento <html> é o elemento raiz. Será em todos os códigos o elemento que trará os demais inclusos.
1.2 Metadados: head, title, link, meta, style.
Metainformação
A metainformação é informação adicionada fora do corpo do documento (então fora do intervalo <body> </body>).
É parte de grande importância para o documento html. Afinal poderá ser usada para alimentar informação aos motores de busca, melhorando a indexação da página. A primeira parte da definição declara o tipo da metainformação associada à segunda. A metainformação não aparecerá à navegação.
Elementos
O que está entre <head> e </head> é informação necessário ao correto funcionamento do propósito da página. Armazena dados que estarão ocultos ao navegar.
O comando <title> é a etiqueta que dará o título aos documentos.
<link> Definirá a cor do link.
<meta>Agrega metainformação ao documento.
<style> Definirá o estilo da informação para o documento. Recurso para aplicação de CSS.
1.3 Seções: body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address.
<body> Todas as informações e parâmetros que geram navegabilidade e funcionalidade perceptível ao usuário são inseridas entre abertura e fechamento da tag.
<article> Faz com que partes do documento possam estar distribuíveis ou independentes para a inserção de informação.
<section> Cria seções dentro do documento.
<nav> Permite a criação da barra de navegação e sua estilização.
<aside> Servirá para agrupar informação com relação ao conteúdo principal. Como publicidades e blocos de navegação.
Elementos heading, começam no h1 e terminam em h6. São os diferentes níveis dos títulos.
<hgroup> Agrupa vários títulos.
<header> Elemento para criação do cabeçalho. Onde se poderá inclusive incluir o logo.
<footer> Para criação do rodapé da página ou seção.
<address> Será usado para fornecer informação referente a contato.
1.4 Comentário.
Comentários são escritos para o autor do código ou equipe que o utilizará. A informação não aparecerá no navegador. Conforme abaixo:
<!-- Comentário -->
1.5 Elementos de agrupamento: p, hr, blockquote, ol, ul, li, dl, dt, dd, div.
<p> Indicará um parágrafo.
<hr> Insere uma régua horizontal. É o elemento Horizontal Rule.
<blockquote> Elemento para longas citações. Blocos de conteúdo.
<ol> Cria listas ordenadas.
<ul> Cria listas não ordenadas.
<li> É usado para indicar o item de uma lista.
<dl> Lista de definição.
<dt> Termo da lista (de definição) a ser definido.
<dd> Definição do termo.
<div> Era usado para descrever e formatar seções. Atualmente é usado para agrupar elementos dentro das seções.
1.6 Elementos de texto semânticos: a, abbr, span, strong, em, br.
<a> Adiciona hyperlinks à página.
<abbr> Representa uma abreviação e poderá fornecer uma descrição completa a ela.
<span> É um container genérico por linha para conteúdo fraseado. Usado para também para fins de estilo. Como agrupamento.
<strong> Especifica maior importância ao texto onde é adicionado.
<em> Texto com ênfase.
<br> Para quebra de linha.
1.7 Conteúdo embutido: img.
Este elemento é usado para inserção de imagens.
Abaixo há dois resultados no navegador e então o código correspondente:
<!DOCTYPE>
<html>
<head>
<title>Aula de HTML Básico</title>
<meta name="keywords" content="aula, html, básico">
<meta name="author" content="Denilson Leite">
<meta charset="utf-8">
</head>
<!-- Esta informação é auxiliar para o criador do código e não aparecerá na navegação -->
<body>
<p> Fatec Carapicuíba </p>
<header style="background-color:#FFDAB9">
<p> Cabeçalho da Página </p>
</header>
<article>
<hgroup>
<h1>Cabeçalho de 1º nível.</h1>
<h2>Cabeçalho de 2º nível. </h2>
<h3>Cabeçalho de 3º nível.</h3>
</hgroup>
<p> <strong> O conteúdo do parágrafo. </strong> </p>
<a href=http://www.google.com.br> Google Brasil </a> <br>
<img src=http://enderecodaimagem.com.br> <!-- Amostra -->
</article>
<aside>
<abbr title="SI é abreviação para Sistemas para Internet">SI</abbr> <!-- Não é usada para parágrafo, a tag abaixo o é -->
<p>SI é abreviação de Sistemas para internet</p>
</aside>
<nav style="background-color:#FFFACD">
<p> Comando para criação da barra de navegação da página </p>
</nav>
<section>
<article>
<p> Conteúdo da Seção </p>
<blockquote cite="http://www.w3c.br/cursos/html5/conteudo/capitulo1.html"> HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.</blockquote>
</article>
</section>
<aside>
<p>Conteúdo do aside</p>
</aside>
<footer>
<p> Aqui irá o contéudo do rodapé da página </p>
</footer>
</body>
</html>
Exemplos de Listas
Código:
<!DOCTYPE>
<html lang="pt-br">
<head>
</head>
<body>
<ul>
<li>Internet</li>
<ol>
<li>Novidades</li>
<ul>
<li>Web para todos</li>
<ul>
<li>O Consórcio W3C trabalha para a aproveitável utilização da web com a acesso para todos. </li>
</ul>
<li>Há como contribuir?</li>
<ul>
<li>Entrar em contato com informação referente à inovação para estudo e resposta relacionada.</li>
</ul>
</ol>
</ul>
</body>
</html>
Estes acima são exemplos básicos de documentos html para demonstração das funcionalidades.
Nenhum comentário:
Postar um comentário