banner ads

HTML & CSS

INTRODUÇÃO

Você já parou para pensar em quantos sites já visitou hoje? Em quantas páginas desses sites você navegou? E já pensou em você mesmo criar uma página dessas? Se sim, esse artigo te trará informações básicas para você começar essa trajetória, afinal yes, you can! Primeiramente, te apresento duas ferramentas muito importantes para websites: HTML e CSS.

HTML é uma linguagem de marcação usada para escrever todo o conteúdo de um site e o CSS é uma folha de estilo, ou seja, após o conteúdo escrito no HTML, o CSS dará o estilo material da página.

Uma analogia bacana é pensar na construção de uma casa onde o HTML é a estrutura do edifício com suas divisões/cômodos. Já o CSS é o estilo aplicado para essa construção, como será o piso, a cor das paredes, o estilo das portas e janelas, etc.

Entendendo alguns conceitos importantes

Antes de começarmos a entender a estrutura básica dessas linguagens é importante entendermos alguns conceitos usados ao criar páginas web. O primeiro deles é a ideia de criar, testar e refinar. Essas são etapas básicas para construção de códigos já que consistem em obviamente criar – ou escrever – um código, ver se ele funciona da forma como ele foi projetado para funcionar e, por fim, ajustá-lo. Acredite, você sempre terá como aprimorar um código.

Por falar em aprimorar um código, outro conceito importante é o de semântica. A semântica possibilita que tanto o browser (o navegador do computador) como outros programadores consigam ler de forma simples o seu código, isto é, um HTML semântico descreve o conteúdo que está inserido nele.

No caso do navegador, essa técnica é útil para facilitar a acessibilidade do site já que alguns usuários utilizam ferramentas capazes de ler e “ditar” o site para navegar por páginas web. Assim, se as páginas estiverem bem descritas, essas ferramentas conseguirão ditar melhor o conteúdo ao usuário.

Já no caso do programador, pense que você pode criar uma página que mais tarde precisará de manutenção e essa, por sua vez, será feita por outra pessoa. Novamente, quanto mais esse conteúdo estiver bem descrito, mais fácil ficará para a outra pessoa entender tudo o que está ali. Um HTML não semântico dificulta – e muito – o refinamento e a manutenção do seu trabalho.

Mas antes de pensar em criar um site, é necessário ter um conteúdo para colocar nele. Afinal, não faz muito sentido criar uma página vazia, não é mesmo? Outro ponto importante é também ter um editor de texto para digitá-lo. Existem muitos editores que são úteis para isso, como, por exemplo, o Brackets e o Sublime, ambos gratuitos.

HTML

Como já falamos, o HTML é uma linguagem de marcação. Escrevemos ele através de tags, que são descritas com <> (sinais de menor que e maior que).

Como na construção de uma casa, existe uma estrutura básica que deve ser seguida. Para que o browser consiga entender qual linguagem e versão estão sendo usadas, ele deve interpretar aquele arquivo/página. Por isso, é necessário, antes de qualquer outra coisa, usar declarações indicando:

1) a versão da linguagem que será utilizada e

2) a linguagem que você utilizará.

No HTML, usamos a declaração <!DOCTYPE> e nesse link aqui você encontra mais informações sobre isso. Após dizer ao navegador qual versão será utilizada, é hora de explicar para ele qual linguagem ele deve traduzir aquele conteúdo. Para isso, utilizamos o <html> após a declaração do <!DOCTYPE>.

Vale dizer também que o conteúdo dentro do html é dividido em vários contêineres que variam de acordo com o tipo de página e conteúdo que você está fazendo. Essas divisões são necessárias para, além de organizar o conteúdo, facilitar a compreensão e leitura de tudo.

Eu não sei como funciona na casa onde você mora, mas nas casas que eu já vi sendo construídas existiam colunas de ferro que eram utilizadas para manter toda a estrutura em pé. Após o término da construção já não é possível vê-las porque o cimento, tijolos e todos os outros materiais já cobriram essas colunas, mas elas ainda estão lá.

O mesmo acontece com o <head> (ou cabeçalho, em português). Esse elemento indica informações que não aparecerão ao usuário, mas mostram ao navegador o nome da página, qual tabela de caractere será usada, as páginas de CSS que darão estilo para aquele HTML, o link das fontes usadas… Enfim, para entender melhor isso tudo eu indico a leitura desse artigo aqui, ele traz informações com mais exemplos sobre o cabeçalho e o que é preciso ter nele.

Outras divisões em uma página HTML

Agora que falamos do head, faltou explicar o que existe dentro da página e o usuário pode ver. Esse campo é o <body> (ou corpo, em português). Dentro desse campo ficam algumas outras divisões. Seguem algumas:

  • <main>: específica o conteúdo mais importante da página. Uma página deve ter apenas um conteúdo principal, ou seja, apenas um main;
  • <div>: uma divisão genérica utilizada para agrupar conteúdos que serão estilizados da mesma forma;
  • <nav>: seção de navegação de uma página. Indica um bloco de linhas que, caso acionado, levarão o usuário para outra página;
  • <títulos>: são usados para definir ~tadã~ títulos. Existem seis categorias e elas vão do <h1> até o <h6>, sendo o H1 o maior;
  • <parágrafo>: novamente caindo no óbvio, a tag <p> (é assim que ela é declarada) define um parágrafo;
  • <table>: declarado para criar tabelas;
  • <rodapé>: a tag <footer> recebe as informações que ficarão no rodapé da página, como nome do autor, direitos autorais, ano de criação, etc;

É possível compreender melhor a estrutura básica necessária e algumas das divisões existentes nesses links do GitHub, Tableless e Fundação Bradesco.

Ah! Também é importante avisar que sempre que abrimos uma tag é necessário fechá-la. Por exemplo, ao declarar o conteúdo principal de uma página, ou seja, um main, é necessário seguir a seguinte estrutura:

<main>

conteúdo que será colocado aqui dentro

</main>

Isso acontece porque quando você não fecha essas declarações, o navegador entende que todo o conteúdo colocado depois dela ainda faz parte daquela declaração, já que não foi indicado o seu final. Para isso, como demonstrado no exemplo, é necessário colocar uma barra dentro da tag antes de especificar aquela divisão.

CSS

Como já dissemos, o CSS serve para estilizar a página HTML. Para isso, declaramos as divisões usadas no HTML para decorarmos o conteúdo dentro dele. A declaração para estilizar um parágrafo, por exemplo, é feita da seguinte maneira:

p {

color: uma-cor-aqui;

font-family: uma-fonte-aqui;

border: um-estilo-de-borda-aqui;

}

O CSS permite caracterizar uma série de coisas dentro do site, tantas que não acho válido citá-las aqui. Mas, um conceito importante ao determinarmos o quanto cada objeto ocupará em nossa tela – que é definida dentro do CSS – é a ideia de página responsiva.

De forma geral, existem muitas maneiras de definir o tamanho de cada conteúdo, mas não necessariamente a maneira escolhida será capaz de adaptar o conteúdo para apresentá-lo de forma correta em qualquer tipo de tela. Isso acontece porque ao definir o tamanho do conteúdo por pixel, por exemplo, o navegador dará a medida definida no CSS para ele, independente de qual dispositivo seja usado para visitá-lo. Por isso, ao estilizar uma página, é necessário se atentar às medidas utilizadas e à forma que isso implicará na visualização do usuário.

Para compreender melhor o CSS, acho que a leitura deste artigo é muito válida.

Aprimorando o conhecimento

Agora que você já tem uma breve ideia sobre a forma como HTML e CSS funcionam, acho que é bacana dar uma lida neste artigo. Essa apostila da Caelum também pode te ajudar bastante.

Caso o seu intuito seja conhecer ainda mais esse assunto e, quem sabe, construir seu próprio site, esse curso gratuito da Udacity pode ser uma ótima fonte de aprendizado. E como é sempre muito bom ter mais de uma fonte de informação, também indico esse outro curso do KhanAcademy.

Related Articles:


—————————————-­—————————————-­—- Este Post é um oferecimento de Acelerato – Gestão de Projetos ágeis e Help Desk Não perca tempo, acesse acelerato.com, cadastre-se gratuitamente e descubra como podemos ajudá-lo.

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

Leave a comment