Desenvolvimento Web

Crie seu primeiro website

Kenia Yaneth Paiz Chacón

Jun 2, 2023 • 8 min read

Neste artigo, mostrarei como criar sua primeira página da Web usando HTML e CSS, além de aprender sobre tags básicas para criar a estrutura de uma página da Web e adicionar estilos.

Antes de iniciar a criação da página web, devemos ter clareza sobre o que é uma página web, o que é HTML e o que é CSS. Vejamos esses conceitos.

O que é um website?

É um documento digital com informações onde podemos inserir vídeos, imagens, textos, arquivos, entre outros. Ao criar uma página web podemos dar vida a um blog pessoal ou turístico, falar de receitas culinárias ou hobbies, partilhar um portefólio pessoal ou qualquer assunto que nos pareça interessante.

O que é HTML?

É uma linguagem de marcação de hipertexto que nos ajuda a estruturar nossa página ou site. O HTML nos oferece um conjunto de tags para trabalhar com o conteúdo de uma página web, por exemplo, se queremos adicionar uma imagem usamos a tag <img>. Cada tag tem sua própria função ao criar nossa página da web.

Mostrarei as tags HTML básicas mais tarde.

O que é CSS?

São folhas de estilo em cascata que nos ajudam a dar vida à nossa página web. Embora o HTML seja para estruturar páginas, não podemos implementar cor, animação ou layout no conteúdo. Portanto, usaremos CSS.

Coffee Club

A página web que faremos tratará de uma pequena recomendação dos cafés que mais gostamos. A ideia é aprender como estruturar nossa página web com HTML e desenhá-la com CSS.

Nossa página conterá o seguinte:

Header (título da página).
Menu de navegação.
Conteúdo principal.
Footer.

Ferramentas necessárias

Editor de código: Visual Studio Code.

Para o ambiente de trabalho utilizaremos o Visual Studio Code. Deixo o link para download. Na hora da instalação, basta seguir os passos de instalação ou escolher outro editor de sua preferência.

Pixabay: Ferramenta para baixar imagens livres de royalties que usaremos em nosso site.

Link: https://pixabay.com/es/

unDraw: Também o usaremos para baixar as imagens que teremos em nosso site.

Link: https://undraw.co/illustrations

Pigment: É usado para definir nossa paleta de cores na página da web.

Link: https://pigment.shapefactory.co/

Estrutura do nosso HTML

Começamos com a estrutura básica do HTML, incorporando o tipo de documento DOCTYPE, o cabeçalho HEAD e o corpo do nosso conteúdo BODY.

<!DOCTYPE>: Tipo de documento que iremos desenvolver.
<head>: É o cabeçalho que contém as informações gerais da página (conhecidas como metadados). Dentro da cabeça atribuímos o título da página, links para folhas de estilo ou scripts. Essa informação não será exibida pelo usuário.
<body>: Indica o corpo do conteúdo da página que será exibido na tela. Podemos atribuir parágrafos, imagens, vídeos, entre outros.

Dentro do <body> também precisamos de uma estrutura para tratar as informações do nosso conteúdo, que é dividido em cabeçalho, conteúdo principal e rodapé.

Teremos um cabeçalho com o título principal: Coffee Club.

Para nosso menu de navegação, usaremos a tag <nav>. Dentro do nosso menu teremos uma lista não ordenada onde cada item da lista terá um link.

Nosso conteúdo principal terá duas seções: na primeira teremos uma imagem e uma frase icônica, enquanto na segunda teremos uma lista dos cafés que gostamos, incluindo seu nome e uma imagem.

Não se esqueça de atribuir a propriedade da classe (conforme declarado no exemplo). Isso nos ajudará com os estilos que geraremos mais tarde.

Para finalizar o conteúdo do <body>, teremos o rodapé que indicará o título da nossa página web.

Aqui está uma lista das tags HTML básicas (em espanhol):

<tittle>	Define el título de la pestaña del navegador.
<link>	Podemos enlazar archivos .css, hojas de estilo para nuestra página web o si queremos utilizar otros estilos como Bootstrap.
<head>	Provee información general acerca del documento.
<header>	Define el encabezado del cuerpo de la página web, a diferencia del <head>.
<h1> .. <h6>	Sirven para poner títulos dentro de la página de diferentes tamaños. A medida que el número va aumentando, el título muestra menos importancia y se reduce el tamaño de la fuente.
<nav>	Menú de navegación donde podemos insertar enlaces y listas.
<section>	Define secciones donde podemos colocar información de la página web.
<div>	Contenedor para información de la página web.
<p>	Sirve para agrupar un párrafo.
<br>	Sirve para hacer un salto de línea.
<img>	Sirve para añadir imágenes a la página. Con la propiedad src ponemos la dirección donde está ubicada la imagen.
<span>	Es para personalizar o marcar una parte de un texto.
<video>	Para insertar un video.
<audio>	Para insertar un audio dentro de la página.
<iframe>	Inserta contenido de otras páginas como Google Maps.
<ul>	Sirve para listas desordenadas.
<li>	Funciona para elementos dentro de una lista.
<ol>	Ideal para crear listas ordenadas.
<footer>	Define el pie de una página.
<table>	Funciona para crear una tabla.
<tr>	Funciona para crear las filas de una tabla.
<td>	Crea las columnas de una tabla.
<form>	Sirve para hacer un formulario.
<input>	Elemento usado para crear controles de distintos tipos como: Ingresar texto (text). Seleccionar casillas (checkbox). Elegir una opción en específico (radio). Asignar fecha (date). Asignar un botón para generar una acción (submit).
<label>	Aquí se pone el título del <input>.
<textarea>	Útil para introducir textos largos.
<strong>	Resalta el texto importante de una página.
<b>	Necesario para colocar un texto en negritas.
<button>	Para insertar un botón dentro de una página.
<select>	Define un menú desplegable con diferentes elementos.

Cuando ya tengamos lista nuestra estructura HTML, así se visualizará en el navegador:

Pronto! Já temos nossa estrutura HTML, mas precisamos que nossa página da Web ganhe vida. Para isso usaremos CSS, para que nosso site tenha estilos e determinadas propriedades como adicionar cor, tipo de fonte, alinhar texto e ajustar elementos.

Quando adicionamos estilos à nossa página web podemos ter arquivos separados (como o nome indica folhas de estilo) e apenas chamar o arquivo com a tag <link>, mas também podemos trabalhar os estilos dentro do arquivo HTML com a tag <style>. Desta vez, teremos os estilos dentro do HTML.

💡

Obs: A tag <style> vai estar após a tag <head>.

Em CSS temos muitas propriedades onde cada propriedade é utilizada para atribuir um estilo, seja estilos a fontes, atribuir cor de fundo, cor de texto, alinhar elementos, atribuir largura ou altura a uma imagem, container, etc. Mas como usamos essas propriedades com nosso código HTML? Fácil: em CSS temos seletores.

O que são os seletores?

Seletores são ferramentas para chamar um elemento de um documento HTML. Temos seletores para:

Tag: chamamos de tag HTML adequada. Por exemplo, se você quiser mudar a cor do seu título principal, pode usar a própria tag <h1>.
Classes: nas tags HTML podemos ter classes e, ao invés de chamar a própria tag, em CSS podemos chamar suas classes, que são representadas por um ponto (.) (por exemplo: .container1).

ID: nas tags HTML podemos ter o id, que representa uma identificação única de um elemento HTML. Em CSS, os ids são representados pela Hashtag (#) (por exemplo, #container1).

Universal (*): O seletor universal tem uma base geral para todos os elementos HTML. Os estilos adicionados a este seletor serão aplicados a todo o documento. Normalmente, usamos o universal para atribuir a margem e o preenchimento de nossa página.

Geralmente, os navegadores trazem uma margem específica para a página da web, mas se você não quiser que sua página da web tenha essa margem padrão, você pode usar este seletor e atribuir a margem que deseja.

Estilos do nosso website - primeira parte

Segunda parte

Lista de propriedades que usamos no CSS (espanhol)

margin	Establece los márgenes de un elemento o contenedor, donde podemos asignar margen de los cuatro lados afuera de un elemento como si fuera una caja. top. bottom. left. right.
padding	Establece el espacio que tendremos del contenido que hay dentro de un elemento, es decir, el espacio que habrá dentro de la caja, así como en los cuatro lados. top. bottom. left. right.
font-family	Define el tipo de fuente que queremos utilizar.
font-size	Define el tamaño de la fuente.
text-align	Sirve para la alineación del texto: center. left. right. justify.
display	Propiedad que especifica cómo trabajaremos un elemento (si va a ser flexible, en bloque o bloque en línea): flex. block. inline-block.
justify-content	Define como vamos a justificar los elementos de un contenedor: Center: centra los elementos de una sección Space-round: alinea los elementos con espacios asignados antes, entre y después de líneas. Space-between: alinea los elementos con espacios entre líneas.
font-weight	Establece el peso de la fuente (si la queremos más negrita).
background-color	Sirve para poner un color de fondo.
height	Define el alto de un elemento.
line-height	Útil para el interlineado de un texto.
text-decoration	Ideal para la decoración del texto, como subrayado, por ejemplo.
color	Define el color de la letra.

Agora nossa página ficará assim com o CSS:

Se quiser ver o código da página e as imagens que atribuímos, pode entrar aqui.

Lembre-se que esta página é apenas o começo para criar algo muito mais avançado, mais criativo e com mais conteúdo visual. Hoje abordamos o básico de HTML e CSS, mas você pode considerar mais elementos para construir o site para você.

Espero que esta informação tenha sido útil. Sucesso com seu site. Saudações!

💡

As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.