Embora você possa encontrar muitas tecnologias diferentes para impulsionar nossos sites hoje em dia, os dois arquivos mais importantes em toda a Internet são HTML e CSS. Sim, se você precisar de algo complexo, também precisará de mais tecnologias para acompanhá-los. Mas se tudo o que você deseja é criar uma página pessoal simples, HTML e CSS são tudo o que você precisa.
Introdução ao básico
Este é um guia para iniciantes em HTML e CSS que mostrará como criar um site simples o mais rápido possível. Os resultados não serão necessariamente "compatíveis com os padrões". E você terá que fazer algumas leituras por conta própria se quiser ajustar e expandir ainda mais. Mas será um site e funcionará "como deveria" na maioria dos navegadores.
Como o espaço é escasso, não nos aprofundaremos em todos os aspectos do desenvolvimento e design da web. Em vez disso, seguiremos as etapas para passar do zero à página da Web totalmente funcional, explicando o que tudo faz no processo.
Os dois arquivos necessários
Um site moderno consiste em muitos arquivos, mas dois são os mais essenciais: um arquivo HTML e CSS. O arquivo HTML define os elementos e a estrutura de uma página. O arquivo CSS define a aparência desses elementos.
Ambos são arquivos de texto essencialmente típicos, contendo texto especificamente estruturado. Você não precisa de nenhum tipo especial de programa para criar ou ajustá-los: qualquer editor de texto "simples" será necessário. Por "simples", entendemos o seu aplicativo típico no estilo de bloco de notas, e não algo como o editor do LibreOffice ou o Microsoft Words que poderia "enriquecer" o texto de qualquer forma.
O primeiro passo é criar uma nova pasta na sua área de trabalho com dois arquivos de texto vazios dentro dela. Nomeie um deles como "index.html" e o segundo "style.css".
Configure seu espaço de trabalho
Execute seu navegador favorito e carregue o arquivo HTML nele, selecionando “Arquivo -> Abrir” ou arrastando e soltando o arquivo em sua janela.
Abra o arquivo HTML e CSS no seu editor de texto favorito do tipo bloco de notas.
Ser capaz de visualizar todos os três windows ao mesmo tempo, é a maneira mais conveniente de trabalhar. Se você não tiver duas telas para espalhá-las, recomendamos organizar o windows como na nossa foto abaixo.
Coloque a janela do navegador em um lado da tela para ocupar metade dela (verticalmente)4 e coloque os dois blocos de notas windows do outro lado, um sob o outro.
Blocos de construção
Escreva algo no bloco de notas com o arquivo HTML e salve as alterações. Em seguida, atualize a janela do navegador pressionando F5. Você verá imediatamente o texto que você escreveu aparecer na janela do seu navegador.
Parabéns por configurar seu primeiro site! E não estamos brincando, já que os primeiros sites na Internet não diferiram muito em sua aparência em comparação com o que você acabou de criar. O importante, naquela época, era o próprio conteúdo.
O HTML permite que você “marque o conteúdo de cada parte”, usando um conjunto específico de “códigos”. Alguns dos mais importantes são:
- html: indica um documento html. Deve estar no início de cada arquivo html.
- body: todo o conteúdo que você vê em um navegador está incluído nesta tag do corpo. Representa o aspecto visual de um documento html.
- p: parágrafo do texto
- img: imagens
- a href: Links para endereços da web
- div: define uma "caixa" em torno de qualquer conteúdo que você possa "estilizar" com CSS.
Para "definir" uma parte do conteúdo, ela geralmente deve ser delimitada pelo mesmo código, com uma ligeira diferenciação no início e no final. Por exemplo, um parágrafo de texto é definido como:
<p>Standard Text Paragraph</p>
"
”Indica que“ o que se segue é um parágrafo ”e“
”Que“ o parágrafo termina aqui ”. Ao substituir“ p ”por“ div ”nos dois casos, você define uma caixa que encerra o conteúdo em vez de“ marcá-lo como um parágrafo ”.
Note que existem exceções: elementos como imagens (img) e linhas divisórias (hr) não requerem um "código de fechamento".
Alterar e atualizar
Substitua tudo no seu arquivo HTML pelo seguinte:
Atualize seu navegador (F5) e você verá as palavras CABEÇALHO, CONTEÚDO e PASSO aparecerem uma abaixo da outra. Acabamos de criar três caixas "div" invisíveis e autônomas. Cada um deles contém uma das palavras.
Para poder definir sua aparência através do CSS, atribuímos uma palavra-chave a cada uma, uma “identidade” (o “id = nome” no código), correspondente ao seu conteúdo: cabeçalho, conteúdo e rodapé. Todos os elementos em uma página da web podem ter esse alias, configurado como uma "classe" ou um "id". As classes definem alias para itens que aparecem várias vezes na mesma página da web, como parágrafos, links etc. Os IDs definem alias para elementos que aparecem apenas uma vez em cada página, como o nome ou o logotipo de um site.
Conteúdo real
Exclua a palavra "HEADER" entre os códigos div, sem alterar sua estrutura, e digite o nome que você deseja para o seu site.
Faça o mesmo com o seu "CONTEÚDO", mas, em vez de apenas digitar o texto, marque também o início e o fim de cada parágrafo como vimos anteriormente. Substitua o "CONTEÚDO" por dois ou três parágrafos de texto.
Agora é a hora de falar também sobre links. Para converter qualquer frase do seu texto em um link, estruture-o como:
<a href="ADDRESS">TEXT</a>
Você pode copiar e colar isso e substituir "ADDRESS" por "para o qual você deseja que o seu link aponte" e "TEXT" pela frase que será exibida no seu site. Vinculamos uma frase em nosso rodapé ao nosso site com o seguinte:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
Por fim, substitua a palavra "FOOTER" por seu nome, uma pequena frase indicando quem criou ou é o proprietário do site ou qualquer outra coisa que você queira.
Salve as alterações e atualize seu navegador para vê-las lá.
Você tem estilo (.CSS)
O primeiro elemento de qualquer página da web é a cabeça. Nele, geralmente encontramos códigos que definem a identidade do site, seu nome, criador e idioma, além de qualquer tecnologia – além do HTML – usado nele. É aí que vivem a maioria dos links para arquivos JavaScript e CSS externos. Adicione um ao seu site, inserindo o seguinte na parte superior do seu arquivo HTML, logo após a tag html:
Para poder estilizar os elementos de uma página da Web com CSS, você precisará carregar o arquivo CSS de dentro do HTML. E isso significa incluí-lo em sua "cabeça". A seguir, indica que a página HTML "vinculará" a um arquivo "folha de estilo", do tipo "texto / css". Denominado "style.css":
<link rel="stylesheet" type="text/css" href="style.css">
Copie e cole nosso código, como você o vê, "dentro" da cabeça – ou seja, em "" e acima "". Salve as alterações e concentre sua atenção no arquivo CSS. Lá, digite o seguinte:
body {} #header, #content, #footer {} #header, #footer {} #header {} #content {} #footer {} img {}
Site real
CSS, ou Cascading Style Sheets, são simplesmente conjuntos de regras de exibição que correspondem a elementos específicos de uma página da web. Com o CSS, podemos estilizar "onde" e "como" tudo aparecerá em uma página da web.
Na etapa anterior, introduzimos um conjunto de regras em branco para todos os elementos em nossa página. Agora, vamos ver como podemos adicionar parâmetros a eles que definirão sua aparência.
Comece com o corpo, que inclui tudo no seu site. Modifique-o da seguinte maneira:
body { width: 100%; position: relative; margin: 0; padding: 0; }
As regras acima afirmam que queremos que nosso site ocupe toda a largura da janela do navegador (largura: 100%), que não queremos que ele tenha nenhuma distância das bordas da janela do navegador (margem: 0) e não deseja espaço em branco (preenchimento: 0)
Todas as regras para um elemento devem estar entre colchetes e cada regra deve terminar com um ";" como o seguinte:
#Element_ID { RULE 1; RULE 2; RULE 3; }
Continue atualizando o CSS "#header, #content, #footer" para o seguinte:
#header, #content, #footer { float: left; position: relative; }
Com isso, você está dizendo que a posição dos três elementos deve seguir algumas regras comuns: cada um deve ser "relativo" ao anterior e "segui-lo" (flutuar: esquerda). Independentemente do tamanho, forma, aparência ou qualquer outro fator, cada um deles "empurrará" o próximo elemento e nunca se sobreporá.
Atualize #header, #footer com o seguinte para tornar sua página da Web mais parecida com um site real:
#header, #footer { width: 100%; height: 100px; background: rgba(0,0,0,0.9); color: rgba(255,255,255,0.9); text-align: center; font-size: 12px; }
O texto acima define que queremos que o cabeçalho e o rodapé do nosso site tenham 100% de largura, 100 pixels de altura e que o texto exibido neles tenha 3em de tamanho e centralizado.
As regras de plano de fundo e cor especificam, respectivamente, qual a cor que toda a "caixa div" do cabeçalho e rodapé terá e a cor de qualquer texto contido nelas. "RGBA" define a cor com base no padrão de mistura de cores Vermelho – Verde – Azul. Cada cor pode ter um valor de 0 a 255, com combinações de diferentes valores de vermelho, verde e azul, permitindo a exibição de qualquer cor. O último número corresponde à transparência. Então RGBA (255,0,0,0.5) nos daria um vermelho translúcido, enquanto RGBA (50,50.255,1) daria um azul brilhante e "sólido".
Termine concentrando-se no conteúdo básico do site. Defina sua aparência como:
#content { width: 80%; background: rgba(255,255,255,0.9); color: rgba(0,0,0,0.9); margin: 0 10%; }
Salve todas as alterações novamente e atualize a janela do navegador para vê-las.
Estilo da imagem
Para adicionar imagens ao seu site, você precisa voltar ao arquivo HTML. Lá, "dentro" do conteúdo, mas antes do primeiro parágrafo, digite o seguinte:
<img src="/PATH/FILE.JPG" alt="TEXT">
Onde "PATH" e "FILE.JPG" são o "local" e o nome do arquivo de qualquer imagem, disponível online ou localmente, e "TEXT" é uma descrição do que representa para fins de acessibilidade.
Se você tentar salvar e verificar alterações após essa adição, verá que seu site está deformado. O problema será corrigido assim que você criar regras CSS sobre como as imagens devem ser exibidas no seu site.
Retorne ao arquivo CSS e declare como deseja que todas as imagens (img) sejam alinhadas à esquerda, seguindo o fluxo de outros elementos (flutuação: esquerda e posição: relativa).
Para não exceder os limites da página, especifique como deseja que a largura deles seja o máximo da própria página (largura: 100%). Para evitar que as imagens toquem no seu texto, adicione uma margem vertical na parte superior e inferior. O resultado deve ficar assim:
img { float: left; position: relative; width: 100%; margin: 5px 0; padding: 0; }
Complete adicionando outra imagem, desta vez alinhada à esquerda ou à direita. Como antes, você deve primeiro voltar ao código HTML e colar um link para sua imagem, como vimos anteriormente. A diferença é que você precisará adicionar uma "classe", um identificador ao elemento. Em seguida, você especificará via CSS as regras de exibição e quaisquer outros elementos em que a mesma classe seja "anexada".
Denominamos nossa classe "alignright", pois queremos que qualquer objeto, onde está anexado, seja exibido no lado direito da página.
Tente criar o código você mesmo. Adicione uma classe .alignright {} no seu “style.css” e crie regras que devem ser estilizadas. O código CSS deve especificar que queremos que os elementos flutuem para o lado direito da página e tenham 46% de largura (largura: 46%). Como não queremos que as imagens toquem o texto, devemos adicionar um 2% de diferença em torno deles, dividido como 1% de margem (a distância de qualquer outro elemento) e 1% preenchimento (algum "espaço em branco extra ao redor do elemento").
Assim, nossas regras devem definir que qualquer imagem com uma classe .alignright anexada ocupará 46% da largura da página, mais um 1margem% de cada lado, mais 1% de preenchimento de cada lado. Tudo isso soma 50% – exatamente metade da largura da página. O resultado deve ser algo como isto:
img.alignright { float: right; width: 46%; margin: 1%; padding: 1%; }
Próxima página
Sua primeira página da web está pronta e totalmente operacional. Ao aprender mais sobre HTML e CSS, você pode enriquecer ainda mais seu conteúdo, adicionar novos elementos e melhorar sua aparência. Como próxima etapa, tente copiar e renomear o arquivo HTML, modificando seu conteúdo e vinculando cada nova página às outras.
Não parece muito difícil, não é? Bem-vindo ao desenvolvimento da Web: copiando, modificando e vinculando diferentes páginas por meio de links, você criará seu primeiro site completo, adequado, com várias páginas!
Crédito da imagem: Gatinhos Pluks, Gatinhos Pluks, IMG_20171124_142629
Este artigo é útil?
Add comment