Primeiros passos com HTML CSS - Giulia Amaral

Prévia do material em texto

Autora
Giulia Amaral
Analista de Sistemas, empreendedora e
instrutora FullStack. Acredita na inclusão por
meio da educação e tecnologia, e por isso, é
uma das criadoras da comunidade Open Source
Sanja Tech, presente no Vale do Paraíba e da
Plataforma de ensino Estudante.dev.
LinkedIn: @giuliaamarall
1
Introdução
Esse E-book tem o objetivo de ensinar aos alunos iniciantes de
Desenvolvimento Web sobre conceitos básicos para a criação de
aplicações web utilizando HTML5 e CSS3.
O conteúdo abordado é didático e de rápida leitura, para que, todo
iniciante, dentro da sua curva de aprendizagem, compreenda
primeiramente a essência dessas duas tecnologias. Por estas
razões, o aluno não precisa de pré-requisitos técnicos, mas é
importante saber navegar na internet, criar pastas e arquivos e fazer
downloads de softwares para melhor aproveitamento.
2
CAPÍTULO 1 - O início de tudo
1.1 introdução
Em 1969, a Internet nasceu como uma rede fechada para
determinados grupos governamentais dos Estados Unidos, cujo
nome era Arpanet. Após 30 anos, em meados de 1990, a
Internet como conhecemos foi disponibilizada ao público civil.
Mas para que qualquer pessoa, com um computador conectado
na rede, pudesse visualizar os conteúdos da internet, foi
necessário criar a World Wide Web (www) ou Rede de Alcance
Mundial.
1.2 WWW
O WWW ou simplesmente Web, é um serviço que utiliza a
internet para ser um meio de comunicação global, onde os
usuários podem livremente acessar dados que trafegam na
rede (textos, imagens, vídeos, etc) a partir de um computador
conectado e um navegador (Chrome, Edge e Mozilla são alguns
exemplos).
nota: é comum confundir a web com a própria internet, entretanto, a web é um
serviço que utiliza a internet para funcionar
3
1.2.1 Como funciona o WWW
Para que funcione, a World Wide Web utiliza três parâmetros: o
HTTP, a URL e o HTML.
● O HTTP ou Protocolo de Transferência de Hipertexto é o
recurso responsável pela comunicação e transferência de
dados, e que assegura que as pessoas consigam visualizar
conteúdos e dados de um site, a partir de cliques ou
toques na tela
● A URL é o endereço de um site, ou seja, o texto que o
usuário digita na barra do navegador para acessar um
website
● O HTML ou HyperText Markup Language, é uma
linguagem de marcação utilizada na construção de páginas
Web.
1.2.2 HTTP e servidores web
O HTTP e Servidores Web estão explicitamente interligados,
mas antes, é necessário compreender o que é um servidor:
Um servidor, pode ser considerado um computador, que opera
de forma similar aos computadores domésticos, porém com
uma capacidade superior de processamento e armazenamento.
Em geral, os servidores foram criados para oferecer serviços e
suprir altas demandas de dados, sendo que os mais comuns no
mercado são os servidores para envio e recebimento de
4
https://pt.wikipedia.org/wiki/P%C3%A1gina_web
https://pt.wikipedia.org/wiki/P%C3%A1gina_web
e-mails; servidores de arquivos e documentos; e os servidores
web, que armazenam arquivos que compõem os sites.
Servidores Web estão conectados na internet e hospedam
sites. Os seus dados podem ser acessados através de uma
URL.
Esses servidores possuem diversos componentes que
controlam como os usuários acessam os arquivos hospedados.
O principal componente é o HTTP, um software instalado no
servidor web que será responsável por transferir os dados
hospedados de um site no servidor; dentre esses dados, existe
o HTML, que será o responsável por mostrar os conteúdos na
tela do usuário.
De forma simples, o navegador utilizado para acessar uma URL,
faz uma requisição utilizando o protocolo HTTP para ter acesso
aos dados de um site hospedado em um Servidor Web, que
então, devolverá os dados solicitados, também via HTTP. O
navegador então faz uma análise dos arquivos HTML,
interpreta-os, e mostra ao usuário a página completa.
5
CAPÍTULO 2 - O HTML
1.1 introdução
O HTML é uma abreviação para Hypertext Markup Language,
que em português significa Linguagem de Marcação de
Hipertexto. Hipertexto são conteúdos textuais e links que
conectam páginas Web entre si, seja dentro de um site ou entre
sites. Mas o HTML ainda consegue utilizar a Marcação para
adicionar dados de hipermídia, como imagens, vídeos, gráficos
e áudios.
1.1 Tags
Um documento HTML é formado por um conjunto de TAGS.
No geral, as TAGS são utilizadas para adicionar os conteúdos
visuais de um Website, mas também podem ser usadas para
armazenar configurações no navegador.
Uma TAG é formada por pelos sinais de menor e maior "" e
entre esses sinais, o nome da TAG, conforme no exemplo baixo:
6
1.2.1 Anatomia
Na maioria dos casos, um elemento HTML será formado por
uma tag de abertura, uma tag de fechamento, seguido pelo
conteúdo.
● A tag de abertura: Consiste no nome do elemento,
envolvido entre os sinais de abertura e fechamento. Isso
indica onde o elemento se inicia.
● A tag de fechamento: É a mesma coisa que a tag de
abertura, mas inclui uma barra antes do nome do
elemento. Isso demonstra onde o elemento acaba — nesse
caso, onde é o fim do parágrafo.
● Conteúdo: Esse é o conteúdo do elemento, que nesse
caso é apenas texto, mas poderia ser outros tipos de
conteúdo a depender do tipo de tag.
● Elemento: é o conjunto da união da tag de abertura, a de
fechamento, e o conteúdo.
1.2.2 Atributos
7
O elemento HTML também pode conter atributos, que são
usados para acrescentar informações extras em uma TAG.
No exemplo acima, foi adicionado o atributo class, e esse
atributo recebeu o valor titulo-principal.
Por regra todo atributo precisa seguir a seguinte estrutura:
● O nome do atributo, seguida por um sinal de igual (=)
● Duas aspas, uma de abertura e uma de fechamento, que
envolve o valor do atributo
1.2.3 Aninhando Elementos
É possível adicionar elementos html dentro de outros elementos
html, e isso é chamado de aninhamento.
No exemplo acima, a tag , recebeu um tag de abertura e
fechamento , que pode ser utilizada para enfatizar
8
textos (ou apenas um determinado trecho do texto) ou seja,
fazer um efeito de negrito, como no exemplo abaixo:
● Essa é uma frase sem negrito
● Essa é uma frase com negrito
O aninhamento é uma prática comum no momento de construir
páginas HTML. O aninhamento é uma prática comum no
momento de construir páginas HTML.
1.2.4 Elementos vazios
Alguns elementos não possuem tag de fechamento, pois são
formados por apenas uma tag de abertura; portanto não podem
receber conteúdos internos e envolver outros elementos html
aninhados
A tag (usada para inserir imagens) é um exemplo clássico
de uma tag vazia ou nula. Perceba que ela não possui uma tag
de fechamento . A forma que é incorporada uma imagem
no código HTML é por meio do atributo SRC, que recebe o link
ou caminho da imagem.
1.2.5 Principais Tags HTML
9
Logo abaixo você encontra uma lista com as principais tags
HTML, incluindo as tags nulas. É importante ressaltar que as
tags sempre estão em constante atualização, portanto,
dependendo do ano que estiver lendo este ebook, algumas
podem ter sido inseridas na lista global ou mesmo removidas:
Tags Descrição
 Informa ao navegador a versão do HTML,
que nesse caso, é o HTML5
 Essa tag inicializa e finaliza o documento
HTML. Assim sendo, ela conterá todas as
demais tags do seu documento.
 É a tag responsável pelo cabeçalho do
documento, usada para inserir
informações não visíveis na tela do
usuário, e também configurações do
navegador
 Essa tag define o título da sua página, o
nome que aparecerá na aba do
navegador
 Tag nula, permite inserir metadados no
documento HTML
 A tag que representa o corpo do
documento. Nessa tag, todos os
elementos visíveis do site devem ser
inseridos.
10
 Tag para adicionar comentários no código,
todos elementos incluídos dentro dela
serão apenas comentários, ou seja, não
serão visíveis no navegador.Define o cabeçalho visível no site, é nessa
tag que podemos adicionar o título
principal ou menu de navegação
 Essas tags definem uma sessão para sua
página;
 Essas tags definem um rodapé para a
página, geralmente utilizadas no final da
página;
 Essas tags representam o conteúdo
principal do documento ou seja, o
conteúdo relacionado diretamente com o
tópico central da página ou com a
funcionalidade central da aplicação;
 Essas tags definem um artigo da sua
página. Nesse sentido, são utilizadas para
separar o conteúdo da sua página. Muito
utilizado principalmente por blogs ou
páginas de conteúdo;
 Essas tags representam uma seção de
uma página cujo conteúdo é
tangencialmente relacionado ao conteúdo
do seu entorno, que poderia ser
considerado separado do conteúdo;
 Essa tag define um conteúdo de
navegação
11
 é um container genérico para conteúdos,
não possui valor semântico
, , ,
, , 
Tags usadas para adicionar títulos no
documento HTML. O título principal
sempre será o h1
 Tag que inicializa um parágrafo
 Transforma todo o texto dentro desse
intervalo em negrito;
 Transforma todo o texto dentro desse
intervalo em itálico;
 Usado para inserir links externos e
internos
 Tag nula, usada para fazer quebra de
linhas
 Tag nula, usada para formação de linhas
horizontais
 Tag nula, usada para inserir imagens
 Inicializa um container para adicionar
vídeos
 Inicializa um container para adicionar
áudios
 Usado para inserir links de conteúdos
multimídia como vídeos e áudios
 Usada para inserir conteúdos de páginas
externas
 Inicializa uma lista ordenada
12
 Inicializa uma lista não ordenada
 Adiciona itens em uma lista
 Cria um container para adicionar tags
adicionais de formulário
 Usado para inserir campos interativos de
formulário
 Usada para inserir códigos css
diretamente no arquivo HTML
 Usada para inserir scripts no arquivo
HTML
CAPÍTULO 3 - CSS
1.1 Introdução
O CSS ou Folhas de Estilo em Cascata é utilizado para estilizar
as páginas HTML, ou seja, é por meio dessa tecnologia, que é
possível adicionar cores a um texto, alterar tamanhos de
imagens, dentre muitas outras possibilidades.
1.2 Como o CSS funciona?
O CSS possui uma sintaxe de códigos (padrões), que consegue
manipular os estilo (design) dos elementos HTML.
É como se o HTML fosse o esqueleto de uma pessoa, enquanto
o CSS são as roupas. Juntas, elas moldam a estrutura óssea, o
visual e o estilo gráfico de um site
13
1.2.1 Estrutura da Sintaxe CSS
Na sua forma mais simples, é composto por 3 partes:
seletor {propriedade: valor}
● Seletor: É a tag HTML que será modificada pelas
propriedades e valores do CSS
● Propriedade: É a característica (como a cor, tamanho,
fonte) cujo valor define como o navegador deve exibir o
elemento HTML
● Valor: Atribui qual é o valor de uma propriedade
No exemplo abaixo, temos um seletor de parágrafo, que recebe
a propriedade “color” e o valor ”red , na prática, o texto dentro
da aplicação fica na cor vermelha
p {
color: red;
}
14
Também é possível adicionar uma ou mais propriedades aos
seletores:
p {
color: red;
font-size: 2px
}
No exemplo acima, além do seletor receber a propriedade color
para alterar sua cor, também recebeu a propriedade font-size
para alterar o seu tamanho
Além disso, ainda é possível adicionar vários seletores com as
mesmas propriedades, apenas adicionado vírgulas para
separa-los
p, h1, h2, h3 {
color: red;
font-size: 2px
}
15
Assim, todos os seletores que precisam utilizar as mesmas
propriedades CSS são modificados em uma única linha de
código
1.2.2 Tipos de Seletores
Existem diversas formas de manipular o HTML utilizando o CSS,
e para isso, é necessário conhecer os principais tipos de
seletores CSS
● Seletor de Elemento: o seletor “P” utilizado nos exemplos
acima, é um seletor do tipo elemento. Este seletor nada
mais é do que a própria tag HTML.
Obs: as propriedades e valores de um elemento serão
aplicados em todas as tags da mesma natureza, ou seja,
se no site tiver diversas tags , e você utilizar o CSS
para alterar a propriedade color, todas as tags irão
receber essa propriedade igualmente
● Seletor do tipo Class: suponha que exista uma tag h1 com
um atributo class cujo valor seja “titulo-principal”:
Olá mundo!
para construir um seletor class no css basta digitar um
ponto, seguido do valor do atributo class:
.titulo-principal {
font-size: 2px;
}
16
● Seletor do tipo ID: é quase a mesma coisa do seletor por
class, com a diferença de que, se sua tag HTML tiver um
atributo do tipo ID, a construção do seletor no CSS deve
possuir uma sinal de cerquilha (#), seguido pelo valor do
atributo
#titulo-principal {
font-size: 2px;
}
1.2.3 Adicionando o CSS no HTML
Existem três principais formas de adicionar CSS para poder
usá-lo junto ao HTML: a inline, incorporada e externa
● Inline: o CSS é adicionado diretamente em uma tag de
abertura, como neste exemplo:
Olá mundo!
É a forma menos indicada de se trabalhar com CSS, deve
ser usada apenas em casos específicos
● Incorporada: o CSS é incorporado ao código, quando ele
é adicionado dentro da tag head, a partir da tag style:
17
h2 {
color: blue;
}
Apesar de ser uma forma melhor que anterior, ainda sim
não é a mais indicada
● Externa: é o método mais indicado pois dessa forma o
CSS é separado do arquivo HTML
Para isso é necessário criar um arquivo no diretório do
projeto que contenha a extensão .css e depois importar o
nome do arquivo em um tag link na seção head, como
nesse exemplo:
18
O atributo rel define que o arquivo é CSS e o HREF é o
endereço do arquivo
2.0 Propriedades básicas
2.1 Cores
Esta é propriedade mais comum, pois se aplica a muitos
seletores. As cores no CSS seguem o padrão hexadecimal RGB
e as mais básicas podem ser designadas pelo nome
● Exemplo a partir do nome:
p { color: red}
● Exemplo a partir do hexadecimal:
p { color: #FF0000}
2.2 Plano de fundo
19
A propriedade responsável por atribuir valores para
características de fundo de sites e seções é a background.
O background pode receber valores de cor, posicionamento,
imagens, entre outros, veja exemplos:
● background-color: preenche o documento com a cor
desejada.
● background-image: O valor desta propriedade, é o
endereço do arquivo de imagem, que pode estar
localizada no mesmo diretório ou externamente.
● background-position: A posição da imagem na página.
● background-repeat: Usada para repetir a imagem do plano
de fundo.
2.3 Texto e Fontes
Existem diversas propriedades CSS para alterar os textos do
HTML, algumas são:
● text-indent: Define a distância de recuo do texto no início
do parágrafo
● line-height: Define o espaçamento entre as linhas.
● text-align: Define o alinhamento do texto, que pode ser ao
centro, à direita, à esquerda ou justificado.
● text-decoration: Define a decoração de um texto a partir
dos seguintes valores: underline (sublinhado), overline
(sobrelinhado), line-through (uma linha em cima do texto) e
blink (faz piscar o texto).
20
● text-transform: Define uma transformação ao texto, como
torná-las todas maiúsculas - uppercase; - todas minúsculas
- lowercase; - todas as primeiras letras maiúsculas -
capitalize.
● font-size: Esta define o tamanho da fonte.
● font-family: Define a família de fontes. Com ela você pode
declarar uma fonte específica e uma genérica.
● font-weight: Esta propriedade serve para determinar o
peso da fonte.
● font-style: Usada para dar estilo. Alguns dos valores são“normal”, “oblique” ou “italic”.
2.3 Margin
As margens em CSS servem para definir espaços entre blocos
vizinhos e também extremidades do navegador e estão
altamente ligadas a construção de layouts:
● margin-top: Define a margem superior.
● margin-right: Define a margem direita.
● margin-bottom: Define a margem inferior.
● margin-left: Define a margem esquerda.
● margin: Define os valores das quatro margens na seguinte
ordem: top, right, bottom, left.
21
2.3 Padding
A propriedade padding define uma distância entre o conteúdo
de um elemento e suas bordas.
Da mesma forma que vimos em margin, o padding também
pode ser aplicado para os lados com padding-top,
padding-right, padding-bottom e padding-left.
2.4 Bordas
É responsável por especificar a espessura, o estilo e cor da
borda de um elemento.
● border-style: Especifica o estilo da borda.
● border-width: Especifica a espessura.
● border-color: Especifica a cor da borda
22
CAPÍTULO 4 - O próximo passo
Este e-book é um material de apoio do curso introdutório de
HTML e CSS da estudante.dev (Clique aqui para acessar curso
gratuito)
Isso quer dizer, que sabemos o quanto você se dedicou para
acompanhar as aulas, e por isso, queremos primeiramente
agradecer por ter acreditado no nosso ensino e também
parabenizá-lo(a) por ter finalizado o curso.
Aprender HTML e CSS é o início da jornada, um(a)
desenvolvedor(a) é um(a) eterna(a) estudante, e por isso, você
não deve parar de alavancar os seus estudos.
Agora que você finalizou, o próximo passo é aprender Lógica de
Programação e Algoritmos, onde você também pode estudar
gratuitamente pela nossa plataforma ou Youtube
Conheça nossa plataforma em www.estudante.dev
23
https://curto.dev/qn6ApABq
https://curto.dev/c0rZRAAk