Projeto Orientado I: Introdução HTML E Css

Projeto Orientado I
INTRODUÇÃO HTML E CSS

O que é o HTML
◦ A Linguagem de Marcação de Hipertexto (HTML) é uma linguagem de computador que
compõe a maior parte das páginas da internet e dos aplicativos online. Um hipertexto é um
texto usado para fazer referência a outros textos, enquanto uma linguagem de marcação é
composta por uma série de marcações que dizem para os servidores da web qual é o estilo e
a estrutura de um documento.
◦ O HTML é uma linguagem de marcação, sendo assim o esqueleto do nosso site, através dele
desenvolvemos o “corpo” do site, definimos toda a estrutura e o conteúdo site.
◦ O HTML importa todos os arquivos, fotos, vídeos etc, é através dele que o navegador
consegue saber o que precisar carregar, como o arquivo inicial, as “folhas” de estilo do CSS,
arquivos Javascript, fotos, vídeos, etc.
Usos comuns do HTML:
• Desenvolvimento web: Os desenvolvedores usam códigos HTML para projetar como um
navegador vai exibir os elementos das páginas, como textos, hiperlinks e arquivos de mídia.
• Navegação na internet: Os usuários podem navegar facilmente e inserir links entre páginas e
sites relacionados, já que o HTML é amplamente usado para incorporar hiperlinks.
• Documentação: O HTML torna possível a organização e a formatação de documentos, de

maneira similar ao Microsoft Word.
• OBS: O HTML agora é considerado um padrão oficial da internet. O World Wide Web
Consortium (W3C) mantêm e desenvolve especificações do HTML, além de providenciar
atualizações regulares.
Como funciona o HTML
◦ Documentos HTML são arquivos que terminam com uma extensão .html. Um navegador lê o
arquivo HTML e renderiza o seu conteúdo para que os usuários da internet possam vê-lo.
◦ Todas as páginas HTML possuem uma série de elementos, que consistem num conjunto de
tags e atributos. Os elementos HTML são os tijolos de construção de uma página da internet.
Uma tag diz para o navegador onde um elemento começa e termina, enquanto um atributo
descreve as características de um elemento.
◦ As três principais partes de um elemento são:
• Tag de abertura – usada para dizer onde um elemento começa a ter efeito. A tag é cercada de
colchetes angulares(símbolo maior e menor da matemática) para abertura e fechamento. Por
exemplo, use a tag de abertura para criar um parágrafo.
• Conteúdo – essa é a parte que os usuários irão ver.
• Tag de fechamento – igual à tag de abertura, mas com uma barra antes do nome do
elemento. Por exemplo, para encerrar um parágrafo.
Linguagem de Marcação
◦ As marcações são feitas através de TAGs:
◦ Existem tags para tudo que for fazer dentro do HTML, como por exemplo: “Eu
serei um programador”, no HTML seria:
◦ Eu serei um programador , usaria a tag é parágrafo.

Anatomia do HTML
Tags e Elementos HTML mais Utilizados
◦ Atualmente, existem 142 tags HTML disponíveis, que permitem a criação de diversos
elementos.
◦ Elementos Bloco
◦ Os elementos bloco ocupam a largura completa de uma página. Eles sempre iniciam uma
nova linha no documento. Por exemplo, um elemento cabeçalho estará numa linha diferente
de um elemento parágrafo.
◦ Toda página HTML usa essas três tags:
• A tag <html> é o elemento raiz que define todo o documento HTML.
• A tag <head> contém metadados sobre o título e a codificação de caracteres da página.
• A tag <body> inclui todo o conteúdo que aparece na página.
◦ Elementos Em Linha
◦ Um elemento em linha (ou inline) formatam o conteúdo interno de elementos de bloco. Isso
inclui a adição de links ou de linhas com ênfase. Os elementos inline são normalmente usados
para formatar texto sem quebrar o fluxo do conteúdo.
◦ Por exemplo, uma tag faz o elemento ser renderizado em negrito, enquanto a tag
 faz ele aparecer em itálico. Os hiperlinks também são elementos em linha que usam
uma tag <a> e um atributo href para indicar o destino do link:
◦ <a href="https://example.com/">Click me!</a>

Tags semânticas
◦ Tags semânticas são tags que possuem um significado, que dão sentido a informação de texto
ao navegador e buscadores, como por exemplo, utilizar a tag <header> e até mesmo 
para indicar que aquele texto é um parágrafo, é uma boa prática tentar sempre utilizar essas
tags semânticas para ajudar no entendimento do código.
Tags sem semânticas
As tags que não possuem semântica não definem um significado para aquele
texto, normalmente são utilizadas apenas para fins de separação e estilização.
Exemplos de algumas tags sem semântica:
CSS – CASCADING STYLE SHEETS
◦ CSS – Folha de estilos em cascata, e é usado para estilizar elementos escritos em uma
linguagem de marcação como HTML. O CSS separa o conteúdo da representação visual do
site. Pense na decoração da sua página. Utilizando o CSS é possível alterar a cor do texto e do
fundo, fonte e espaçamento entre parágrafos. Também pode criar tabelas, usar variações de
layouts, ajustar imagens para suas respectivas telas e assim por diante.
◦ CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, por uma razão bem
simples. O HTML não foi projetado para ter tags que ajudariam a formatar a página. Você
deveria apenas escrever a marcação para o site.
◦ Tags como foram introduzidas na versão 3.2 do HTML e causaram muitos problemas
para os desenvolvedores. Como os sites tinham diferentes fontes, cores e estilos, era um
processo longo, doloroso e caro para reescrever o código. Assim, o CSS foi criado pelo W3C
para resolver este problema.
◦ A relação entre HTML e CSS é bem forte. Como o HTML é uma linguagem de marcação (o
alicerce de um site) e o CSS é focado no estilo (toda a estética de um site), eles andam juntos.
Com CSS algumas perguntas são
respondidas:
◦ Como consigo mudar a cor de fundo?
◦ Como consigo mudar a cor do texto individualmente?
◦ Como adiciono um imagem de fundo (background)?
◦ Como posicionar os objetos da melhor forma possível no meu site?
◦ Como deixar o site responsivo?
◦ Como fazer “animações”?

Como funciona o CSS
◦ O CSS usa uma sintaxe simples baseada em inglês com um conjunto de regras que o governam. Como
mencionamos anteriormente, o HTML nunca teve a intenção de usar elementos de estilo, apenas a
marcação da página. Foi criado para descrever apenas o conteúdo. Por exemplo: Este é um
parágrafo..
◦ Mas como você estiliza o parágrafo? A estrutura da sintaxe CSS é bem simples. Tem um seletor e um
bloco de declaração.
◦ O seletor aponta para o elemento HTML que você deseja estilizar. O bloco de declaração contém uma ou
mais declarações separadas por ponto e vírgula.
◦ Exemplo:
◦ Todos os elementos serão estilizados e serão coloridos de azul e negrito.
p{
color: blue;
text-weight: bold;
}
Anatomia do CSS
O que podemos selecionar?!
Principais atributos CSS
◦ Ainda mais que no HTML, no CSS existem milhares e milhares de atributos. Veja abaixo e nos
próximos slides ou “principais” atributos/propriedades.
◦ Padding: Edita o espaçamento interno do elemento.
◦ Margin: Edita o espaçamento externo do elemento.
◦ Border: altera a borda do elemento.
◦ Outros atributos super importantes são relacionados aos tamanhos:
◦ width: especifica uma largura.
◦ height: especifica uma altura.
◦ Com esses atributos, você pode criar divisões, cards e o que desejar com tamanhos específicos.
Também existem outras variações de tamanhos mínimos e máximos, acrescentando “min-” ou
“max-” na frente de cada um deles, ficando desta forma: ● min-width: especifica uma largura
mínima. ● max-width: especifica uma largura máxima.
◦ OBS: O mesmo vale para a altura.
◦ color: altera a cor do texto.
◦ background-color: altera a cor do fundo.
◦ background: url(“urlaqui”): adiciona uma imagem de fundo.
◦ background-repeat: alterar ou não a repetição da imagem de fundo.
◦ background-position: altera a posição da imagem de fundo .
◦ background-size: altera o tamanho da imagem de fundo.

Flexbox
◦ O flex é uma maneira de adaptar seu site, seja no computador ou no celular. Possui sempre dois
eixos: o principal e o transversal.
◦ display: flex: Define o elemento como um flex.
◦ flex-direction: Define a direção principal do flex. ○ Valores: row (padrão), row-reverse, column,
column-reverse.
◦ flex-wrap: Define se os itens devem ou não quebrar a linha. ○ Valores: nowrap (padrão), wrap,
wrap-reverse.
◦ justify-content: Define o alinhamento de acordo com o eixo principal do flex. ○ Valores: flex-
start(padrão), flex-end, center, space-between, space-around.
◦ align-items: Define o alinhamento de acordo com o eixo transversal do flex. ○ Valores: flex-
start(padrão), flex-end, center, space-between, space-around.
◦ gap: Altera o espaçamento entre os elementos.
◦ Dentro de um display flex, pode haver uma div que também é flex, e a mesma editar os itens
internos dela, e assim sucessivamente.
Estilos CSS Interno, Externo e Inline
◦ Vamos começar com o estilo interno. Estilos CSS feitos desta forma são carregados cada vez
que um site é atualizado, o que pode aumentar o tempo de carregamento. Além disso, você
não poderá usar o mesmo estilo CSS em várias páginas, pois está contido em uma única
página. Mas a vantagem disso é que ter tudo em uma página facilita o compartilhamento do
modelo para uma visualização.
◦ O método externo pode ser o mais conveniente. Tudo é feito externamente em um arquivo
.css. Isso significa que você pode fazer todo o estilo em um arquivo separado e aplicar o CSS a
qualquer página desejada. O estilo externo também pode melhorar o tempo de
carregamento.
◦ Por fim, tem também o estilo Inline do CSS. Inline trabalha com elementos específicos que
possuem a tag <style>. Cada componente deve ser estilizado, por isso talvez não seja o
melhor ou o mais rápido para lidar com CSS. Mas pode ser útil, por exemplo, para alterar um
único elemento, visualizar rapidamente as alterações ou se não tiver acesso aos arquivos CSS.
Como integrar o CSS no HTML?
Após salvar como estilo.css precisamos colocar o arquivo em nosso arquivo HTML, porque é ele
quem vai carregar o CSS, o CSS sozinho não faz site! E é com tags de referência que você avisa ao
HTML que existe um arquivo de estilo para ele, veja:
<link rel=“stylesheet” href=“estilo.css”>
Esta tag vai indicar ao HTML que tem um arquivo CSS para ser adicionado à página. Isto deve
ser adicionado dentro da tag <head> </head> do seu HTML, como pode ver nesse print abaixo.

Projeto Orientado I: Introdução HTML E Css

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Projeto Orientado I: Introdução HTML E Css

Enviado por

Direitos autorais:

Formatos disponíveis

Projeto Orientado I

INTRODUÇÃO HTML E CSS

• Documentação: O HTML torna possível a organização e a formatação de documentos, de

◦ <p>Eu serei um programador</p> , usaria a tag <p> é parágrafo.

◦ <a href="https://example.com/">Click me!</a>

◦ Como consigo mudar a cor do texto individualmente?

◦ Como adiciono um imagem de fundo (background)?

◦ Como posicionar os objetos da melhor forma possível no meu site?

◦ Como deixar o site responsivo?

◦ Como fazer “animações”?

◦ background-color: altera a cor do fundo.

◦ background: url(“urlaqui”): adiciona uma imagem de fundo.

◦ background-repeat: alterar ou não a repetição da imagem de fundo.

◦ background-position: altera a posição da imagem de fundo .

◦ background-size: altera o tamanho da imagem de fundo.

Você também pode gostar