O Guia do Iniciante para HTML e CSS

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".

Criar um site HTML e arquivos 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.

Fazer uma instalação da área de trabalho do site

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".

Faça um primeiro parágrafo do site

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.

Criar um rodap√© de conte√ļdo do cabe√ßalho do 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√°.

Tornar um site conte√ļdo real

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 {}

Faça um site primeiro CSS

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

Crie um site adicionando imagens

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.

Faça uma adição de imagem bruta ao site

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).

Corrigir imagens de um site

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; }

Criar um site alinhado imagens

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?

O Guia do Iniciante para HTML e CSS
4.7 (93.33%) 3 Votes