O HTML é a linguagem utilizada
para a publicação de conteúdo na internet.
Esse conteúdo pode ser: imagem,
texto, vídeo, música e é conectado por meio de hiperlinks, que podem retirá-los
de lugares distintos (diferentes diretórios de um computador ou até mesmo de
diferentes sites da web), e agrupá-los em um único lugar. Dessa forma, surge a
arquitetura dos sites, nos levando, por intermédio de links, ao acesso de
variadas informações e acesso a diferentes mídias.
A popularidade do HTML cresceu na
década de 90, quando o browser Mosaic ganhou um grande espaço no mercado (já
que ele interpretava o HTML). A partir daí, outros desenvolvedores de browsers
passaram a utiliza-lo também.
A proposta do html de ser uma
linguagem que fosse compreendida universalmente por diferenciados meios de
acesso, passava a se tornar uma realidade.
- Características:
O HTML tem como característica básica as tags. Onde toda
instrução para marcação de conteúdo, é colocada entre os sinais de < > e o final das instruções entre </>.
Importante: TODA INSTRUÇÃO QUE FOR ABERTA, DEVE OBRIGATORIAMENTE SER FECHADA (E NA MESMA ORDEM EM QUE FOI ABERTA), salvas
pequenas exceções.
Também temos os comandos e seus atributos, que geralmente
complementam ou implementam alguma coisa ao comando principal (como uma mudança
de tamanho em uma fonte, coloração, borda [esses tem sua melhor aplicação no
CSS, mas eu não consegui pensar em nenhum exemplo melhor para dar], etc). Eles serão melhor explicados mais adiante
(nos próximos posts).
- Estrutura básica de uma página:
Uma página web é constituída basicamente por:
- Cabeçalho (Header);
- Área de conteúdo (Article ou Section);
- Rodapé (Footer);
Onde:
- Cabeçalho: Seria a área onde o logotipo do site,
banner divulgativo ou área de login ficaria, por exemplo.
- Área de conteúdo: Reúne os componentes de conteúdo
do site, sendo eles: fotos, textos, áudio, menus...
- Rodapé: A área inferior do site, que
geralmente contém informações de redes sociais e mapa do site.
Exemplo:
<!DOCTYPE>
<html
lang=”pt-br”>
<head><title>Aula 01 –
exemplo 01</title></head>
<body>
<header>
</header>
<aside>
</aside>
<section>
<header>
</header>
<article> </article>
<footer>
</footer>
</section>
<nav> </nav>
</body>
</html>
- Metadados:
Os metadados são sessões que carregam dados sobre outros
dados.
Exemplos:
Head: A tag <head> é um espaço onde
determinados arquivos podem ser indexados, o principal cabeçalho do código.
Title: A tag <title> traz o título da
página, que aparecerá na aba do browser.
Link: A tag <link> nos permite que
coloquemos um link para uma página externa.
Meta: A tag <meta> serve para dar algumas
informações, como: nome do autor, palavras-chave do site...
Style: O atributo style define o estilo a ser seguido por
algum elemento do site, seja ele uma imagem, página, fonte e etc...
- Sessões:
O HTML5 nos trouxe uma novidade para que os códigos se
tornassem mais semânticos e de certa forma, "menos codificados".
Agora existem sessões específicas para serem utilizadas nas
páginas, antes tudo isso era feito em DIV, podendo-as serem definidas com
qualquer nome. Isso causava certo desconforto por parte de pessoas que
precisavam dar uma olhada no código sem conhecê-lo.
Esse problema foi solucionado com a criação das seguintes tags:
<article>: Artigo;
<section>: Alguma sessão específica dentro da página;
<nav>: Sessão
de links agrupados;
<aside>: Agrupa informações relacionadas a um conteúdo principal.
<hgroup>: Padronização de determinado grupo de fontes;
<header>: Área de cabeçalho;
<footer>: Rodapé da página;
<address>: Utilizada para adicionar informações de contato, como endereço.
Outras tags de grande importância semântica continuam:
<body>: Corpo da página;
<h1><h2><h3><h4><h5><h6>: Tamanhos padrões de fontes;
Outras tags de grande importância semântica continuam:
<body>: Corpo da página;
<h1><h2><h3><h4><h5><h6>: Tamanhos padrões de fontes;
- Comentários
Todo código precisa ser comentado. Os comentários permitem
uma melhor explicação sobre alguma funcionalidade do código, eles devem ficar
entre os caracteres <!-- -->, para que não sejam interpretados
pelo navegador.
Exemplo:
<!DOCTYPE>
<html
lang=”pt-br”>
<head><title>Aula 01 –
exemplo 01</title></head> <!-- Cabeça e título da página -->
<body>
<header></header>
<!-- Área
do cabeçalho -->
<aside> </aside>
<section>
<!-- Início de uma sessão
-->
<header>.</header> <!--Cabeçalho da sessão -->
<article> </article> <!-- Artigo -->
<footer></footer>
<!-- Rodapé -->
</section>
<!-- Final da tag sessão
-->
<nav></nav>
</body>
<!-- Fechamento do corpo
da página -->
</html> <!-- Fechamento da tag html -->
-
Elementos de agrupamento:
Os elementos de agrupamento
servem para especificar alguma lista ou grupo de textos:
<div>: A
div cria uma área que pode servir para guardar outros elementos dentro dela.
<p>: Define um parágrafo.
<hr>: Define uma linha vertical, que funciona como
separador entre título e texto, por exemplo.
<blockquote>: Insere uma citação.
- Listas:
As listas também estão dentro dos elementos de agrupamento de
conteúdo, elas podem ser ordenadas ou não.
<ol>: Define
uma lista ordenada;
<ul>: Define
uma lista não ordenada;
<li>: Define
os itens de uma lista;
<dl>: Lista
de definição;
<dt>: Termo
a ser definido;
<dd>: Definição
do termo.
- Elementos de texto semânticos:
Os elementos de textos semânticos servem para identificar,
por exemplo:
<a> -
define um hiperlink;
<abbr> -
marca abreviações e acrônimos;
<em> -
enfatiza um trecho (geralmente como itálico);
<strong> - enfatiza um trecho (geralmente como negrito);
<span> -
sessão para agrupamento e "formatação micro" entre pequenos blocos de texto ou palavras (juntamente com um pequeno
código CSS).
<br> -
quebra a linha.
- Conteúdo embutido:
<img> -
Essa tag indica que a url que será inserida posteriormente é de uma imagem.
** src:
especifica a URL da imagem;
**alt:
indica um texto alternativo para a imagem.
0 comentários:
Postar um comentário