Introdução

Sendo a base do conhecimento para qualquer desenvolverdor WEB, HTML e CSS são linguagens ultilizadas para o desenvolvimento de sites; criado em 1991 por Tim Berners-Lee, na Suiça, o html foi criado com o intuito de compartilhar documentos com mais facilidade entre as instituições de pesquisas proximas, já o Css só foi desenvolvido em 1995 pela W3C a fim de facilitar o uso de sites que na epoca era muito mais complexa.

O que é HTML

Desenvolvido em 1991, html (Hyper Text Markup Language) é uma linguagem de codgos de marcação que serve como estrutura base de um web site e tem função de informar ao navegador como exibir o conteúdo deixando explicito atraves de sua sintaxe onde ficara o titulo, paragrafo, imagem, cabeçario etc. Para criar um arquivo HTML basta ter instalado em seu desktop um programa editor de texto comum como um bloco de notas ou outro qualquer, dessa forma, para que um documento seja interpretado pelo navegador, é necessário que o arquivo tenha a extensão .html e a partir disso, poderá ser exibido por qualquer navegador web.

Estrutura HTML

A estrutura base do html é dividido em duas partes principais sendo a primeira o HEAD (cabeça) e a segunda o BODY (corpo) onde cada uma tem sua função.

HEAD O elemento que contem as metainformações sobre sua pagina HTML, no HEAD vão algumas informações importantes sobre sua pagina web, como elementos meta, links, titulo da pagina web e outros elementos que daram informções ao navegador de como fazer leitura do arquivo.

• Meta tags - São linhas de código ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave que facilitarão para o usuário na hora de encontrar seu site.
• Link - O Elemento < link> especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação.
• Title - O elemento HTML < title> (Elemento HTML Título) define o título do documento, mostrado na barra de título de um navegador ou na aba da página. Pode conter somente texto e quaisquer marcações contidas no texto não são interpretadas.

BODY O elemento que contem todo o "esqueleto" do HTML, nele fica toda a parte que será visualizada pelos usuarios do site tais como paragrafo, titulos e subtitulos, imagens, que são determinadas atraves dos elementos ou tags.

Declarações

Ao começar a escrever o html é necessario fazer algumas declarações que serão importantes para que o navegador entenda que tipo de arquivo está sendo acessado, estas declarações costumam ficar antes do head; uma das mais importantes é a DOCTYPE, que tem a função de informar qual é o tipo de arquivo html, depois a < html lang> que serve para informar ao navegador o indioma do site. OBS: Caso não seja declarado o doctype, o navegador interpretará como a ultima versão disponivel pelo navegador, atualmente a ultima versão é o HTML5 que é declarada como na imagem a baixo.

Elementos

Os elementos HTML ou tags HTML, são utilizados para informar ao navegador que tipo de estrutura é essa que está sendo construída, podendo ser títulos, parágrafos, imagens, links, entre outros. As tags são formadas por uma estrutura própria, iniciam com o sinal “menor que”( < ), em seguida vem o nome daquele elemento e por fim, o sinal “maior que”( > ). Podem ser dispostas em tags que precisam de fechamento e tags que fecham sozinhas (self-closing). O fechamento de uma tag será definido com uma barra ( / ), sendo que no caso das tags de auto fechamento, não há necessidade da presença desse caractere.

As tags podem ser categorizadas inicialmente em dois tipos, em “nível de bloco” (block-level) e “em linha” (inline). Um elemento em nível de bloco ocupa toda a largura de seu elemento pai, que também chamamos de elemento container, criando assim um “bloco”. Já os elementos inline, geralmente usamos para demarcação de conteúdos de texto.

O elemento < main> define o conteúdo principal dentro do < body> em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação.

O elemento < div> é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id).

O elemento < header> representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.

O Elemento < nav> representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.

O elemento < section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

O elemento < footer> representa um rodapé para o seu sectioning content (conteúdo de seção), Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.

O elemento < p> representa um parágrafo. Em mídias visuais, parágrafos são representados como blocos indentados de texto com a primeira letra avançada e separados por linhas em branco.

O elemento < li> (ou a Lista dos Itens de um elemento HTML) é usado para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai: uma lista ordenada < ol> , uma lista desordenada < ul>

O elemento < a> (ou elemento âncora), com o atributo href cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL.

Os elementos HTML < h1> a < h6> spa representam seis níveis de título de seção. < h1> é o nível de seção mais alto e < h6> é o mais baixo.

O elemento < span> é um conteiner generico em linha para conteúdo fraseado , que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id )

O elemento < img> representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento < figure> e < figcaption>.

O elemento < figure> HTML representa conteúdo autocontido, potencialmente com uma legenda opcional, que é especificada usando o < figcaption> elemento.

O elemento < figcaption> representa uma legenda ou uma legenda associada com uma figura ou ilustração descrita pelo resto dos dados do elemento < figure> que seu elemento pai.

O elemento < button> representa um botão clicável.

O elemento < form> representa uma seção de um documento que contém controles interativos que permitem ao usuário submeter informação a um determinado servidor web.

O elemento < label> representa uma legenda para um item em uma interface de usuário. Ele pode estar associado com um elemento de controle, colocando este dentro do elemento label, ou usando o atributo "for".

O elemento < input> é usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um < input> varia consideravelmente dependendo do valor de seu atributo type.

O elemento < select> representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento < option>.

Atributos

Atributos HTML são palavras especiais usadas dentro da tag de abertura para controlar o comportamento do elemento. Os atributos geralmente são usados para apontar para uma folha de estilo ou por um JavaScript quais elementos HTML acessar e manipular .

Class ( . ) é usado para especificar uma classe para um ou mais elementos HTML , para que no CSS estilizar uma tag específica, ou um conjunto de tags. Também é possível usar no JavaScript para selecionar uma tag específica.

id ( # ) especifica um id exclusivo para um elemento HTML. O valor do atributo ID deve ser exclusivo a somente um elemento em todo o arquivo HTML. É utilizado para identificar destino de âncoras, labels e outras funcionalidades neste sentido.

src utilizado para indicar para a tag qual arquivo ou mídia utilizar. Recebe valores como links ou o nome de um arquivo já presente no projeto.

href Para a tag < a>, o atributo href especifica a URL da página para a qual o link vai.Para elementos < link>, o atributo href especifica a localização (URL) do recurso externo (geralmente um arquivo de folha de estilo).

O que é CSS

CSS é chamado de linguagem Cascading Style Sheet (Folha de Estilo em Cascatas) e é usado para estilizar elementos escritos em uma linguagem de marcação como HTML, o CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, por uma razão bem simples, o HTML não foi projetado para ter tags que ajudariam a formatar a página, Você deveria apenas escrever a marcação para o site. Utilizando o CSS é possível alterar a cor do texto e do fundo, fonte e espaçamento entre parágrafos. Também pode criar tabelas, usar variações de layouts, ajustar imagens para suas respectivas telas e assim por diante.

CSS+HTML

Após salvar como (style.css) precisamos colocar o arquivo em nosso arquivo HTML, porque é ele quem vai carregar o CSS; O código CSS pode ser definido para um documento HTML de 3 formas: através de um código separado carregado pela tag < link>; através do código construído no próprio documento

Sintaxe

A construção do código CSS precisa obedecer a seguinte sintaxe:

O seletor aponta para o elemento HTML que você deseja estilizar, o bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula, cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.Várias declarações CSS são separadas por ponto e vírgula e os blocos de declaração são cercados por chaves.

Seletores Css

Os Seletores definem quais elementos um conjunto de regras CSS se aplica. Este seletores básicos escolhem todos os elementos que correspondem ao nome fornecido, seja ele um elemento, nome, classe ou Id.

Declarações Css

A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto. Tanto as propriedades como os valores são case-sensitive no CSS.

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

A propriedade Background é usada para adicionar efeitos de plano de fundo aos elementos.

• Background-Color - propriedade especifica a cor de fundo de um elemento.
• Background-Image - propriedade especifica uma imagem a ser usada como plano de fundo de um elemento

A propriedade Border permite que você especifique o estilo, a largura e a cor da borda de um elemento.

• Border-style - propriedade especifica que tipo de borda exibir.
• Border-width - propriedade especifica a largura das quatro bordas.
• Border-color - propriedade especifica a cor da borda.

A propriedade Margin é usada para criar espaço ao redor dos elementos, fora de qualquer borda definida.

• Margin-top - propriedade que especifica a margem superior
• Margin-right - propriedade que especifica a margem direita
• Margin-bottom - propriedade que especifica a margem inferior
• Margin-left - propriedade que especifica a margem esquerda

A propriedade Padding é usado para criar espaço ao redor do conteúdo de um elemento, dentro de qualquer borda definida.

• Padding-top - propriedade que especifica a margem superior
• Padding-right - propriedade que especifica a margem direita
• Padding-bottom - propriedade que especifica a margem inferior
• Padding-left - propriedade que especifica a margem esquerda

A propriedade Color é usada para definir a cor do Texto, Borda, Background, link entre outros. A cor é especificada por:

• Um nome de cor - como "vermelho"
• Um valor Hexadecimal - cor hexadecimal é especificada com: #RRGGBB, onde os inteiros hexadecimais RR (vermelho), GG (verde) e BB (azul) especificam os componentes da cor. Todos os valores devem estar entre 00 e FF.
• Um valor RGB - cor RGB é especificado com a função rgb( ) , que tem a seguinte sintaxe "rgb (red, green, blue)" como "rgb(255,0,0)"
• Um valor HSL - HSL significa matiz, saturação e luminosidade - e representa uma representação de cores em coordenadas cilíndricas.

A propriedade Position especifica o tipo de método de posicionamento usado para um elemento.

• Um elemento com position: static; não é posicionado de nenhuma maneira especial; está sempre posicionado de acordo com o fluxo normal da página.
• Um elemento com position: relative; é posicionado em relação à sua posição normal.
• Um elemento com position: fixed; é posicionado em relação à viewport, o que significa que ele sempre permanece no mesmo lugar, mesmo que a página seja rolada. As propriedades superior, direita, inferior e esquerda são usadas para posicionar o elemento.
• Um elemento com position: absolute;é posicionado em relação ao ancestral posicionado mais próximo
• Um elemento com position: sticky;é posicionado com base na posição de rolagem do usuário.

As propriedades Width e Height são usados ​​para definir a altura e a largura de um elemento. As propriedades de altura e largura não incluem preenchimento, bordas ou margens. Ele define a altura/largura da área dentro do preenchimento, borda e margem do elemento (content).

• Width - Define a largura do elemento
• Height - Define a altura do elemento.