HTML FUNÇÕES BÁSICAS

#HTML

Oi pessoal tudo bem?

Hoje trago um artigo que fiz com as funções básicas do HTML, gosto de fazer esses artigos para sempre ter ali caso surja alguma duvida poder consultar e construindo melhor as paginas.

HTML FUNÇÕES BÁSICAS

Surgimento do Html

Em 1991 Tim Berners-Lee criou essa linguagem de marcação para melhorar a comunicação entre ele e seus colegas de trabalho no CERN, desde então já surgiram 5 versões e o HTML(1991,1995,1997,1997,2014) se tornou a base da web.

O HTML é formado por tags, ou seja, deve ser sempre criado uma tag de abertura e fechamento, com esses elementos podemos agrupar tipos de conteudo, alterar tamanho e forma das fontes e adicionar diferentes mídias ao longo da pagina Web

Com o HTML definimos o significado e a estrutura do conteúdo da web e, além de texto, nossas páginas precisam de imagens, vídeos e vários outros formatos e para isso temos os elementos HTML

Estrutura básica

A primeira linha do documento deve ser o < !DOCTYPE html >, apesar de parecer um elemento HTML ela apenas diz ao navegador que ele está lidando com um arquivo do tipo HTML5. Os elementos HTML vem logo abaixo.

< meta charset=”UFT-8 > a marca meta indica informações de matadados que normalmente não fica4rão visiveis para o visualizador, a menos que ele use o próprio navegador para exibir o código fonte.

Metaelementos ou metamarcas fornecem informações descritivas sobre a pagina da WEB. Por exemplo, eles ajudam os mecanismos de pesquisa a exibir os resultados para as pessoas.

O conjunto de caracteres UFT-8 pode parecer insignificante , mas é crucial para estabelecer o modo como os computadores interpretam caracteres, caso esteja ausente, pode inclusive levar a um comprometimento de segurança

São 3 as tags básicas do HTML sendo elas: < html> está é a raiz do documento, todos os elementos devem estar dentro dela; < head> esta tag contém elementos que serão lidos pelo navegador, como por exemplo metadados; < body> que é o corpo do site, é onde devemos colocar textos, imágens, audios, videos.

Semântica

A semântica nos permite descrever mais precisamente o nosso conteúdo, agora um bloco de texto não é apenas uma div, agora é um article e tem mais significado assim. E temos vários elementos para ressignificar as divs:

< section >

Representa uma seção genérica de conteúdo quando não houver um elemento mais especifico para isso.

< header >

É o cabeçalho da página ou de uma seção da página e normalmente contém logotipos, menus, campos de busca.

< article >

Representa um conteúdo independente e de maior relevância dentro de uma página, como um post de blog, uma notícia em uma barra lateral ou um bloco de comentários. Um article pode conter outros elementos, como header, cabeçalhos, parágrafos e imagens.

< aside >

É uma seção que engloba conteúdos relacionados ao conteúdo principal, como artigos relacionados, biografia do autor e publicidade. Normalmente são representadas como barras laterais.

< footer >

Esse elemento representa o rodapé do conteúdo ou de parte dele, pois ele é aceito dentro de vários elementos, como article e section e até do body. Exemplos de conteúdo de um < footer > são informações de autor e links relacionados.

< h1 > < h6 >

Eles não foram criados na versão 5 do HTML e nem são específicos para semântica, mas servem para esse propósito. São utilizados para marcar a importância dos títulos, sendo < h1 > o mais importante e < h6 > o menos. Uma dica: use apenas um < h1 > por página, pois ele representa o objetivo da sua página.

Listas

As listas servem para agrupar uma coleção de itens, como uma lista de igredientes ou, contatos e etc. vamos aprender a utilização dos elementos da lista são eles: < ul >, < ol > e < li >

O elemento < ul > cria uma lista não ordenada, onde a ordem dos elementos não é importante, e é representada com pontos, círculos ou quadrados.

O < ol > serve para criar listas ordenadas, nessas a ordem importa, portanto elas são representadas com números, algarismos romanos ou letras.

< ol type="A" > ordena a lista com letras maiúsculas: (A, B, C...)

< ol type="a" > ordena a lista com letras minúsculas: (a, b, c...)

< ol type="I" > ordena a lista com números romanos: (I, II, III...)

< ol type="i" > ordena a lista com números romanos minúsculos: (i, ii, iii...)