A linguagem html e a única onde é possível o seu navegador web consegue interpretar e reproduzir. Para dar inicio aos estudos de html é preciso saber que essa linguagem e utilizada por vários navegadores web, dessa forma podendo gerar resultados diferentes em um mesmo site, como diferenças de fonte, espaçamento e entre outros, portanto, e de extrema importância ser feito vários testes do projeto em navegadores diversos.
A sintaxe do html se da por um conjunto de tags responsáveis pela marcação do conteúdo de uma pagina no navegador. Diversas tags são disponibilizadas pelo html, e cada uma possui uma funcionalidade especifica. As tags são elementos onde são escritos usando a sintaxe <nomedatag>.
Um exemplo de sintaxe utilizada é a de titulo, que é representada pela sintaxe <h1>, onde e responsável por definir o titulo principal da pagina.
TITULOS
Quando queremos indicar que um texto e um titulo na pagina, e utilizado a tag <heading> na sua marcação
Ex:
<h1>TITULO DO SITE</h1>
<h2>Bem-Vindo ao site teste</h2>
As tags de heading são utilizadas para exibir conteúdo de texto e contem 6 niveis, ou seja de <h1 > a <h6> seguindo uma ordem de importância.
A ordem de importância tem grande impacto nas ferramentas que processam HTML. As ferramentas de indexação de conteúdo para buscas, como google, levam em consideração essa ordem de relevância. Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar o seu conteúdo e facilitar a navegação do usuário pelo documento.
PARAGRAFOS
E recomendado, que para qualquer exibição de texto em uma pagina web, que se já utilizado a tag de conteúdo <body>, e para indicar parágrafos, alguma tag filha, como por exemplo a tag de parágrafos
Ex:
<p>
Exemplo de texto muito interessante.
</p>
Quando e necessário dar ênfase em algum trecho no texo, e possível usar a tag<em> a qual atribui ênfase no trecho desejado, da mesma forma, a tag <strong> faz papel semelhante, onde deixa a parte desejada do texto mais “forte”, e assim como possui uma tag para deixar o texto forte, também existe a tag<small>, responsável por diminuir o “peso ” do texto.
TAG<HEAD>
A tag contém informações sobre o documento HTML que são de interesse somente do navegador e para outros serviços da web, e não para as pessoas que vão acessar nosso site. São informações que não serão exibidas diretamente no navegador, também podemos considerar um local onde informamos os metadados sobre a página.
A especificação html obriga a presença da tag de conteúdo <title> dentro da <head>, permitindo definir o titulo do documento, que sera visto da barra de titulo ou aba da janela do navegador.
Tambem e possível configurar caracteres especiais no código html, com a codificação encoding ou charset
Podemos configurar qualquer codificação usando em nosso documento a tag <meta>. O valor mais comum atualmente e o UTF-8, também chamado de Unicode.
EX:
<html>
<head>
<meta charset= “utf-8”>
<title> Teste </title >
</head>
</html>
TAG<BODY>
A tag <body> e onde contem o corpo de um documento html, que sera exibido pelo navegador em sua janela, ou seja, todo conteúdo visível do site. E necessário que a tag tenha no mínimo um elemento “filho”, ou seja, pelo menos uma tag html dentro dele.
<html>
<head>
<meta charset= “utf-8”>
<title> Teste </title>
</head>
<body>
<h1> Titulo do site </h1>
</body>
</html>
TAG<IMG>
Para mostrar uma imagem em seu site, e necessário preencher atributos para que essa imagem seja aderida ao site da forma desejada, e para isso, são usados dois atributos: scr e alt. O primeiro e um atributo obrigatório para que a imagem seja exibida, a qual aponta uma localização a qual ela será exibida, já o segundo atributo e opcional, caso a imagem não apareça, ou não seja visualizada.
O atributo alt não e obrigatório, mas e considerado no caso de um erro, pois prevê o entendimento da imagem para pessoas com deficiência que necessitam de uso de leitores de tela para acessar a web, e também auxilia na indexação de imagens para motores de busca.
Na versão mais recente do html, foram introduzidas novas tags para imagem: <figure> e <figcaption>, a tag <figure > define a imagem em um conjunto, já a tag <figcaption> permite adicionar uma legenda a imagem.
Ex:
<figure>
<img src= “img/imagem_teste.png” alt=” foto teste para site teste ”>
<figcaption>> legenda <</figcaption>
</figure>