Nesse post, vamos entender passo a passo como iniciar no mundo da programação web, mais especificamente no HTML e CSS e como criar suas primeiras interfaces. Esse post pode ser o seu primeiro contato com o mundo da programação, mas essas linguagens que mencionamos você tem contato com elas (provavelmente) todos os dias quando você navega na web.
Antes de mais nada você precisa lembrar que esse post faz parte de uma série de materiais produzidos por mim aqui no CSM. Para visitar os demais conteúdos não se esqueça de acessar aqui o curso de Programação web com HTML e CSS.
Configuração do ambiente
O ambiente para programar usando HTML e CSS é o mais simples que existe, talvez até o mais simples que você irá encontrar em toda sua jornada. Essencialmente você só precisa de um navegador e de um editor de texto, esse é o seu “starter pack”.
Para navegadores, pode ser qualquer um que você prefira, veja algumas sugestões:
Já como editor de texto, é verdade que qualquer um deles funciona. Até mesmo o nosso velho amigo notepad. No entanto, quando estamos programando existem diversos atalhos e facilidades que apenas editores específicos para programadores possuem. Por exemplo, quando você abre um parenteses “(” o editor te ajuda a lembrar de fecha-lo, sabendo que isso geralmente ocasiona erros de sintaxe. Então, eu indico a você dois editores:
Criando sua primeira página
Para você conseguir criar sua primeira página web, você precisará criar um simples arquivo de texto com a extensão HTML. Mas, eu recomendo que você mantenha seus projetos bem organizados e em diretórios separados:
A seguir crie um arquivo de texto com qualquer nome, mas com a extensão “.html”:
Dentro desse arquivo você poderá escrever suas primeiras interfaces gráficas usando HTML e CSS!
Vamos iniciar?
No HTML, vamos começar pelas tags, que são escritas entre os símbolos de maior e menor, dessa forma: <xx>… </xx>. A maior parte das tags são semânticas, ou seja, para cada uma delas temos um significado e um resultado diferente para marcarmos como o texto deve se comportar. Segue uma lista das primeiras tags que encontrei durante meu primeiro contato no assunto.
Tags de informação
- <!DOCTYPE html>: obrigatoriamente no início do código e em maiúsculo para o navegador entender qual versão de html está sendo usada. Nao precisa ser fechada;
- <html lang=”pt-br”>: marca tudo que será renderizado dentro do navegador, ou seja, tudo que deve ser exibido. Dentro dela ainda é possível colocar o atributo de linguagem. A tag <html> precisa ser fechada no fim do arquivo;
- <meta charset=”UTF-8″>: vai indicar qual dicionário, ou conjunto de caracteres devem ser usados, e UTF-8 traz acentos e cedilhas. Também não precisa ser fechada;
- <head>: cabeça, ficam todas as informações que devem ser passadas para o navegador, mas não não exibidas;
- <link>: conecta os arquivos de estilo ou de script, por exemplo. Também não precisa ser fechada;
- <title>: título da página que aparece no navegador.
OBS: se você estiver usando o VSCode, é possível digitar “!”+ “Enter”, e a maioria dessa galera informativa já aparece pronta.
Tags de separação de conteúdo
- <body>: corpo, ficam todas as informações que devem ser exibidas na tela;
- <header>: cabeçalho, ou seja, primeira coisa que é exibida;
- <main>: se usa para o conteúdo principal da página;
- <footer>: ou rodapé, o final da página;
- <h>: ou heading, varia de 1 a 6, sendo 1 de maior nível de importância (ou o título principal da página) e a 6, a de menor importância;
- <nav>: ou navigator, tag usada para navegar em menus/botões com links;
- <section>: ou seção, representa uma seção genérica;
- <aside>: ao lado, ou seja, uma seção lateral da página;
- <article>: artigo, uma composição independente dentro da página, como um post num blog;
Tags diversas
- <strong>: negrito;
- <em> ou <i>: emphasis, ou itálico;
- <s>: texto riscado, como se estivesse incorreto;
- <u>: texto sublinhado;
- <blockquote>: indica que o texto é uma citação;
- <br>: para quebra de linha num texto;
- <hr>: separa o conteúdo com uma linha horizontal;
- <div>: ou division, é apenas um divisor de conteúdo, sem função semântica, sendo um elemento de nível de bloco;
- <span>: semelhante ao div, mas sendo um elemento de nível de linha;
- <p>: ou paragraph, faz quebra de textos;
- <ul>: unordered list, para listas que não precisam de sequência. É preciso usar a tag <li> para cada item;
- <ol>: ordered list, para listas que têm uma sequencia;
- atributo “reversed”: inverte a sequência da lista;
- atributo “type”: muda o tipo de número da lista, podendo ser type=”I” para algarismos romanos maiúsculos, “i” para algarismos romanos minúsculos, “A” para letras maiúsculas, “a” para letras minúsculas, ou “1” para números, que é o padrão;
- atributo “start”: permite escolher o valor inicial para a numeração dos itens da lista;
- atributo “value”: usado dentro da tag <li> para dar uma pontuação para cada item, no caso de empate, por exemplo;
- <a>: ou anchor, permite colocar links para onde o usuário é redirecionado ao clicar em algo;
- <img>: insere uma imagem e precisa dos atributos:
- atributo “src”: de source, ou fonte, que mostra o caminho daquela imagem;
- atributo “alt”: de alternativa, que lê aquela imagem para pessoas de baixa visão, aumentando a acessibilidade;
- <audio>: para embutir um arquivo de áudio;
- <iframe: abre uma janela dentro da página para incorporarmos algum arquivo externo;
- <table>: ou tabela. É dividida em linhas (com a tag <tr>, de table row), e cada linha é dividida em células de dados (com a tag <td>, de table data). Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, filetes horizontais, tabelas, etc. A tabela pode ser dividida semânticamente em cabeçalho (tag <thead>, sendo que as células recebem <th>), corpo (<tbody>) e footer (<tfoot>).Para o título da tabela é usada a tag <caption>. E para agrupar células, usamos a propriedade colspan = “x”, sendo x o número de células que você deseja agrupar.
Tags de Formulário
- <form>: ou formulário, onde o usuário consegue enviar dados;
- <input/>: entrada de dados pelo usuário (não precisa ser fechada) e se conecta com a label através de um id ou a tag label pode ser colocada dentro da tag de input
- atributo “type”: é o tipo de conteúdo que será inserido naquele campo, como text, date, image, radio, por exemplo (clique aqui para ver mais opções do atributo type);
- atributo “name”: serve para identificar aquele campo. Um uso específico, por exemplo, é quando usamos type radio e queremos que todas as opções estejam dentro do mesmo conjunto, chamado name=”xx”;
- atributo “value”: representa o conteúdo inicial daquele campo. No caso do type submit, o value é o nome que vai dentro do botão de submeter o formulário;
- atributo “placeholder”: para que apareça uma dica dentro do campo com a sugestão de preenchimento;
- atributo “required”: para tornar o campo com preenchimento obrigatório;
- atributo “checked”: para que uma opção já venha escolhida como padrão, antes do usuário clicar. Usado nos casos de type radio ou checkbox, por exemplo.
- <label>: ou uma etiqueta para a entrada de dados, ou seja, o que deve ser inserido naquele campo de input. Se conecta com o input através de um for = “id” ou dessa forma: <label> <input type=”x”> Etiqueta </label>. O “id” do input e o “for” do label precisam ter o mesmo nome para serem associados;
- <textarea>: área de entrada de conteúdo, similar ao input, mas a caixinha na tela tem tamanho variável conforme desejado (usa-se “cols” e “rows” para variar esse tamanho) Essa tag, diferentemente da input, precisa ser aberta e fechada;
- <select>: seletor, é um campo de seleção, com várias opções de escolha dentro dele. Essas opções são colocadas dentro da tag <option>;
- <button>: ou botão, adiciona um botão clicável na tela;
- <fieldset>: ou configuração de um campo, serve para agrupar assuntos específicos, como os dados de um cartão de crédito, os dados de endereço. E dentro de um fieldset não temos parágrafos, nós temos o título, que é chamado de “legend”.
Já para o CSS, não usamos tags. Então é necessário identificar o que está no HTML e transportar para o CSS.
Escrevendo com CSS
- Para tags, só se coloca o nome do marcador, sem outros caracteres, como chaves, ponto, parênteses etc.;
- Para classes (itens que serão repetidos), colocamos .nomedaclasse;
- Para identificadores (itens únicos), colocamos #nomedoidentificador;
- O CSS possui hierarquia, isso significa que cada elemento tem uma “força” na hora da leitura do código. O CSS irá obedecer o que tem maior força. Por exemplo, uma tag, tem uma força = 1, uma classe, tem uma força = 10 e um identificador, uma força = 100. Se eu escrever os 3 elementos em sequencia e em todos eu aplicar uma cor diferente, será obedecida a cor do identificador que tem maior força. Se eu escrevo duas tags, por exemplo form p, ele soma essas duas forças, que nesse caso valeriam 2 no nível de prioridade. Vale dizer também que se você escrever uma formatação do tipo “inline” no HTML, essa é a que tem a maior prioridade (força = 1000), sobrescrevendo todas as demais colocadas no CSS;
- Se existe uma formatação igual para 2 classes diferentes, é possível colocá-las numa mesma {}, separadas por vírgula, ao invés de copiar a código em 2 lugares;
- Para adicionarmos um comentário no CSS, usamos /* comentário */;
Principais propriedades no CSS
- Color: altera a cor da fonte;
- Background-color: altera a cor do fundo. Os atributos linear-gradient (ou radial-gradient, para gradientes circulares) já criam um gradiente automático, só é preciso escrever a inclinação (se quisermos), as cores e suas porcentagens (se você não digitar a porcentagem, ele divide o espaço igualmente pelo número de cores que você escolheu). Se quisermos colocar uma imagem de background ao invés de colocar uma cor, é preciso digitar a URL dessa imagem. Ex: background: url(“nomedaimagem.extensao”). Cabe dizer, que por padrão, o CSS repete essa imagem até o final da página;
- Opacity: altera a transparência de um elemento. Pode ser aplicada também em uma cor na escala RGB, sendo o último número, chamado de alfa (rgba(0,0,0,0.3), por exemplo);
- Box-shadow: adiciona uma sombra ao box do elemento, e os parâmetros são: deslocamento em X, deslocamento em Y, blur, tamanho da sombra projetada e cor (box-shadow: 10px 10px 5px 20px #000000). Se eu quiser uma sombra interna, escrevo: box-shadow: inset 0 0 15px #888888;
- Font-size: altera o tamanho da fonte (a unidade em se relaciona proporcionalmente ao tamanho da fonte padrão (16px no navegador, caso não seja alterada);
- Font-weight: altera o peso da fonte;
- Font-family: altera o tipo de fonte;
- Font-style: altera o estilo da fonte (itálico, negrito, oblíquo);
- Text-align: altera o alinhamento do texto;
- Text-shadow: adiciona uma sombra ao texto, com os mesmos parâmetros que o box-shadow;
- Text-decoration: altera a decoração do texto (sublinhado, riscado etc.);
- Line-height: altera o espaçamento (altura) entre as linhas;
- Padding: altera o espaçamento interno de um elemento;
- Width: altera a largura de um elemento;
- Height: altera a altura de um elemento;
- Margin: altera o espaçamento externo de um elemento, na seguinte sequência top, right, bottom, left (caso você coloque só dois valores, ele entende que o primeiro é top e bottom e o segundo é right e left;
- Border: cria uma borda ao redor do elemento, com os parâmetros width, style e color;
- Border-radius: arredonda as bordas de um elemento;
- Position: altera a posição de um elemento. O padrão é “static”, que segue o fluxo natural da página. Quando mudamos para “relative”, ele passa a ser relativo em função do posicionamento original que ele se encontrava (canto superior esquerdo é a coordenada inicial). Quando mudamos para “absolute”, ele passa a ser relativo em função da página;
- Float: propriedade que “descola” o elemento da página e permite que os outros elementos fiquem ao redor, tanto à direita como à esquerda. Para pararmos essa propriedade, usamos clear e a posição que escolhemos para o float;
- Comportamentos no CSS servem para realçar alguma característica de um elemento. É preciso colocar a tag/classe/identificador e em seguida “:nomedocomportamento”, que pode ser “hover” (quando o usuário passa o cursor sobre o elemento), “active” (quando um elemento está sendo ativado pelo usuário) etc. Esses comportamentos são chamados de pseudoelementos.
Esses são nossos primeiros contatos com a linguagem. Aguarde que em breve, teremos a continuação.
