Ead PBH HTML Css Resumo

Programação Web - Curso 1 - HTML e CSS
O HTML é uma linguagem de hipertexto e marcação e essa é a sua principal característica. Isso faz com
que ela seja uma linguagem poderosa para desenvolvimento de sites. As marcações são inseridas nos
textos e para os usuários do sites elas são invisíveis. A sua principal finalidade é passar instruções ao
navegador para que o mesmo possa criar uma página.
Todas as marcações são realizadas pelas tags que em geral são estruturas de linguagem de marcação que
contém instruções. Os navegadores interpretam essas instruções e a partir disso criam a página. A forma
mais comum de utilização das tags, são como delimitadores de estilo ou de conteúdo, ou seja ela agrupa
os conteúdos de acordo com o tipo, forma e formatações.
As tags marcam o conteúdo e criam elementos nas páginas web com a função de organizar, identificar e
limitar o conteúdo da página. O navegador além de reconhecer esses elementos, processa todos eles e
apresentar o conteúdo aos usuários do site.
Os elementos normalmente são criados com uma tag de abertura e uma de fechamento feitas com um
nome entre os sinais de maior e menor “< >” conforme o exemplo abaixo:
Fonte: Pixabay
O exemplo mostra uma tag de parágrafo, ou seja o navegador ao ler essa tag, saberá que todo o conteúdo
inserido entre as tags de abertura: <p> e fechamento: </p> deve ser mostrada como um parágrafo,
aplicando assim as formatações e os comportamentos padrões apropriadas para ele. Note que a tag de
fechamento é criada com uma barra “/”, isto indica ao navegador o fim do parágrafo.
As tags são fundamentais para o desenvolvimento de sites para internet. É através das tags que se

classifica os tópicos do site e define o que será agrupado entre os diversos conteúdos da página de forma
temática e organizada.
Para se ter uma boa organização no site, é necessário utilizar boas praticas na criação de tags levando em
conta os rótulos utilizados, a coerência com o conteúdo e a utilização semântica(Levar em consideração o
significado de cada tag) no HTML. As tags precisam ser usadas com muito cuidado e de forma racional,
pois são elas que irão criar a estrutura principal do seu site.
Verifique o código HTML abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 1</title>
</head>
<body>

<p>Prof: Lucas Tavares</p>
</body>
</html>
Explicando brevemente:
<!DOCTYPE html>: Define que este documento é um documento HTML. Importante para o navegador
de internet entender de forma correta todas as tags do documento.
<html>: É o elemento raiz de uma página HTML. Toda estrutura em HTML deve possuir essa tag
iniciando e terminando o código.
<head>: Elemento que contém meta informações sobre a página HTML. Meta informações ou
Metadados, são dados sobre outros dados. Isso que dizer que são uma explicação de como aquele arquivo
deve funcionar da maneira correta. O computador(Servidor) onde aquele arquivo vai ficar salvo lê essas
informações e disponibiliza aquele arquivo que no caso é um site da forma correta para todos que
acessarem esse site. Os metadados facilitam o entendimento dos relacionamentos e a utilidade das
informações dos dados.
<title>: Especifica um título para a página HTML (Esse título é mostrada na barra de título do navegador
ou na guia da página).
Função da tag Title
A tag title define o titulo que está dentro do quadro vermelho conforme a imagem acima.
<body>: Define o corpo do documento. É um contêiner(Espaço) para todo o conteúdo visível, como

parágrafos, imagens, hiperlinks, tabelas, listas e etc. É aqui que fica toda a parte visível do site para o
usuário.
Função da tag BODY
Na imagem acima, onde está demarcado com um quadrado vermelho, é o local onde fica todo o código
que está escrito entre as tags <body> e </body>. Ou seja, toda a parte visível ao usuário da página que
você está criando.
Todos os documentos HTML consistem em elementos HTML aninhados.
O exemplo abaixo, contém quatro elementos HTML ( <html>, <body>, <h1> e <p>):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Documento</title>
</head>
<body>

<h1>Meu primeiro cabeçalho</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
O atributo charset
O atributo charset serve para indicar o formato de codificação de caracteres utilizado no documento.
ASCII, UTF-8, ANSI e ISO-8859-1 são exemplos de charsets.
Quando usamos o charset dentro da tag meta de nosso arquivo, estamos informando ao

navegador: quando for ler esse arquivo, use as regras do charset UTF-8.
Veja a diferença de um documento com a tag <meta charset="UTF-8"> e sem a
tag <meta charset="UTF-8">
As Tags de comentário em HTML
Você pode adicionar comentários ao seu Código HTML usando a seguinte sintaxe:

O atributo href
No HTML nós conseguimos ligar uma página a outra. É esse processo que faz com que
nós tenhamos sites que possuem várias páginas com conteúdo vasto e em geral de forma
organizada.
A tag <a> define um hiperlink. O hiperlink que faz essa ligação citada acima. O atributo <href>
especifica o URL(Endereço) da página para a qual o link vai:
Exemplo:
<a href="https://www.google.com">Visite o Google</a>
Módulo 04 - Elementos HTML
4.1 - Elementos HTML
Todos os documentos HTML consistem em elementos HTML aninhados.
O exemplo abaixo, contém quatro elementos HTML ( <html>, <body>, <h1> e <p>):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Documento</title>
</head>
<body>

<h1>Meu primeiro cabeçalho</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
Módulo 05 - Atributos HTML
5.1 - O atributo href

No HTML nós conseguimos ligar uma página a outra. É esse processo que faz com que
nós tenhamos sites que possuem várias páginas com conteúdo vasto e em geral de forma
organizada.
A tag <a> define um hiperlink. O hiperlink que faz essa ligação citada acima. O atributo <href>
especifica o URL(Endereço) da página para a qual o link vai:
Exemplo:
<a href="https://www.google.com">Visite o Google</a>
5.2 - O atributo src
A tag<img> é usada para inserir uma imagem em uma página HTML. O atributo src
(source - traduzindo: buscar) especifica o caminho onde a imagem esta salva para que
ela seja exibida:
Exemplo:
<img src="exemplo_img.jpg">
5.3 - Atributos de largura e altura

A tag <img> também pode conter os atributos width e height. Eles especificam a largura
e a altura da imagem (em pixels):
Exemplo:
<img src="imagem.jpg" width="500" height="295">
5.4 - O atributo alt

O atributo alt é necessário para que a tag <img> especifique um texto alternativo para
uma imagem, se a imagem, por algum motivo, não puder ser exibida. Isso pode ocorrer
devido à conexão lenta ou a um erro no atributo src ou se o usuário usa um leitor de tela.
Exemplo:
<img src="kombi.jpg" alt="Kombi">
5.5 - O atributo lang

Condições de conclusão
Feito: Ver
Você sempre deve incluir o atributo lang dentro da tag <html> para declarar o idioma da página da
Web. Isso serve para ajudar os mecanismos de busca como o Google e navegadores como o Google
Chrome por exemplo a direcionar melhor as pesquisas e traduzir as páginas web automaticamente para os
usuários.
O código do país também podem ser adicionados ao código do idioma no atributo lang. Portanto, os dois
primeiros caracteres definem o idioma da página HTML e os dois últimos caracteres definem o país.
O exemplo a seguir especifica português como idioma e Brasil como país:
<!DOCTYPE html>
<html lang="pt-BR">
<body>
...
</body>
</html>
Módulo 06 - Cabeçalhos e Rodapé
6.1 - Cabeçalhos
Feito: Ver
Cabeçalhos em HTML são títulos que você pode exibir em site.
Exemplo:
Cabeçalho 1
Cabeçalho 2
Cabeçalho 3
Cabeçalho 4
Cabeçalho 5
Cabeçalho 6
Os cabeçalhos HTML são definidos com as tags <h1 > até <h6>.
<h1> define o cabeçalho mais importante. Um título maior por exemplo.
<h6>define o cabeçalho menos importante. Um subtítulo por exemplo

Exemplo do código HTML:
<h1>Cabeçalho 1</h1>
6.2 - Rodapé
Feito: Ver
Rodapé
A tag <footer> é usada para colocar um rodapé em seu site.
No rodapé da página podemos colocar:
-Informações do autor do site
-Informações sobre os direitos autorais
-Informações de Contato
-Mapa do site
Exemplo:
<footer>
<p>© 2020 Autor - Todos os direitos reservados.</p>
</footer>
Módulo 07 - Parágrafo e Quebra de Linha
7.1 - Parágrafos HTML

Feito: Ver
Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto.
A tag <p> do HTML é usado para definir um parágrafo.
Um parágrafo sempre inicia em uma nova linha e os navegadores adicionam automaticamente algum
espaço em branco (uma margem) antes e depois de um parágrafo.
Exemplo:
<p>Um parágrafo.</p>
<p>Outro parágrafo.</p>
7.2 - Quebra de Linha

Feito: Ver
A tag <br> do HTML é usada para definir uma quebra de linha.
Use a tag <br> se você deseja inserir uma nova linha sem iniciar um novo parágrafo:
Por que utilizar a tag <br>?
Módulo 08 - Estilos HTML

8.1 - O atributo de estilo do HTML
Feito: Ver
O atributo style do HTML pode ser usado para adicionar estilos a um elemento
como: cor, fonte, tamanho e muito mais.
Exemplo:
A configuração do estilo de um elemento HTML pode ser feita com o atributo

style.
O atributo style do HTML possui a seguinte sintaxe:

<nomeDaTag style="propriedade:valor;">
A propriedade é uma propriedade CSS. O valor é um valor CSS.
9.1 - Formatação de texto HTML

Feito: Ver
O HTML contém alguns elementos que você pode utilizar para definir os textos do seu
site com algum significado e aparência específicos.
Exemplo:
Este texto está em negrito
Este texto está em itálico
Este é subscrito e sobrescrito
Elementos de formatação do HTML
Os elementos de formatação podem ser usados quando você deseja exibir tipos especiais de texto e seu
site:
<b> - Texto em negrito
<strong> - texto importante
<i> - texto em itálico
<em> - Texto enfatizado
<mark> - Texto marcado
<small> - Texto menor

<del> - Texto excluído
<ins> - texto inserido
<sub> - Texto subscrito
<sup> - Texto sobrescrito
Veja nas imagens de exemplo abaixo o uso de cada uma das tags e o resultado no texto:
Módulo 10 - Cores HTML
10.1 - Cores HTML

Feito: Ver
Em HTML as cores HTML devem ser especificadas com nomes de cores predefinidos
ou com valores RGB, HEX, HSL, RGBA ou HSLA.
Você pode estar se perguntando, mas afinal, o que são essas siglas?
Essas siglas são formas de definir qual a cor que você deseja.
Aqui vai uma breve explicação de cada uma, você pode utilizar a forma que encaixar melhor em seu site.
Não se preocupe em aprofundar sobre o assunto. Você precisa ter apenas uma noção do que se trata cada
uma das siglas e como você consegue utiliza-las.
RGB
rgb é abreviatura para:
r = red (vermelho)
g = green (verde)
b = blue (azul)
O valor expresso pela sigla rgb(red, green, blue) indica uma cor obtida com a mistura de uma
quantidade de cor vermelha (red - vermelho em inglês) com verde (green - verde em
inglês) e azul (blue - azul em inglês).
Existem duas maneiras de definir a quantidade de cada uma das três cores:
Uma faixa de números de 0 (zero) até 255
ou
Uma faixa de porcentagens de 0% até 100%
Não é válido usar em uma definição de cor uma mistura de números e porcentagens.
Correto
rgb(145, 230, 50)

ou
rgb(20%, 0%, 70%)
Incorreto
rgb(255, 20%, 120)
Exemplo de combinação de cores: O branco é quando se tem o maior valor para as 3 cores, ou seja, 255
para Red, Green e Blue. E o preto é formado quando se tem o valor 0 para essas 3 cores.
Então seria rgb(255, 255, 255) para a cor branca e rgb(0, 0, 0) para a cor preta.
A medida que você vai manipulando esses três valores as cores vão sendo criadas.
HEX
O HEX vem de Hexadecimal e é o sistema de numeração utilizado na programação de

microprocessadores, em especial nos equipamentos e máquinas de estudo e sistemas de desenvolvimento.
Trata-se de um sistema de numeração posicional que representa os números em base 16, sendo assim,
utilizando 16 símbolos. Este sistema utiliza os símbolos 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9 do sistema decimal,
além das letras A, B, C, D, E e F.
Em HTML uma cor hexadecimal é especificada com: #RRGGBB.
RR (vermelho), GG (verde) e BB (azul) são números inteiros hexadecimais entre 00 e FF, especificando a
intensidade da cor.
Por exemplo, #0000FF é exibido como azul, porque o componente azul é definido como seu valor mais
alto (FF) e os outros são definidos como 00.
HSL
A declaração de cores com uso da função hsl (hue, saturation, lightness) permite que você declare as
cores com uso de três parâmetros:
Hue = tom.
Saturation = saturação.
Lightness = luminosidade.
A sintaxe geral para a declaração com uso dessa função seria:

hsl(120, 75%, 50%)
O primeiro valor é para o tom (hue) da cor. O seu valor é um número que representa a medida de um
ângulo (expresso em graus) apontando para um tom da cor na roda de cores imagem abaixo (Imagem -
Roda de Cores).
Em resumo Tom seria a cor propriamente: Ou seja, tom vermelho, são as cores que o vermelho pode
proporcionar.
O segundo valor é para a saturação (saturation) da cor. O seu valor é expresso em porcentagem. Um valor
igual a 100% representa saturação total da cor e 0 é um leve sombreado cinza de saturação.
Em resumo saturação seria a vivacidade ou palidez de uma cor.
O terceiro valor é para a luminosidade (lightness). O seu valor é expresso em porcentagem. Um valor
igual a 100% resulta em cor branca e 0 em cor preta, sendo 50% o valor normal.
Em resumo luminosidade é a denominação que damos à capacidade que possui qualquer cor de
refletir a luz.

Ead PBH HTML Css Resumo

Enviado por

Dados do documento

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

Ead PBH HTML Css Resumo

Enviado por

Direitos autorais:

Formatos disponíveis

Programação Web - Curso 1 - HTML e CSS

As tags são fundamentais para o desenvolvimento de sites para internet. É através das tags que se

Verifique o código HTML abaixo:

Função da tag Title

<body>: Define o corpo do documento. É um contêiner(Espaço) para todo o conteúdo visível, como

Todos os documentos HTML consistem em elementos HTML aninhados.

O atributo charset serve para indicar o formato de codificação de caracteres utilizado no documento.

ASCII, UTF-8, ANSI e ISO-8859-1 são exemplos de charsets.

Quando usamos o charset dentro da tag meta de nosso arquivo, estamos informando ao

As Tags de comentário em HTML

4.1 - Elementos HTML

Todos os documentos HTML consistem em elementos HTML aninhados.

Módulo 05 - Atributos HTML

5.1 - O atributo href

5.2 - O atributo src

5.3 - Atributos de largura e altura

5.4 - O atributo alt

5.5 - O atributo lang

O exemplo a seguir especifica português como idioma e Brasil como país:

Módulo 06 - Cabeçalhos e Rodapé

Cabeçalhos em HTML são títulos que você pode exibir em site.

<h1> define o cabeçalho mais importante. Um título maior por exemplo.

<h6>define o cabeçalho menos importante. Um subtítulo por exemplo

A tag <footer> é usada para colocar um rodapé em seu site.

No rodapé da página podemos colocar:

-Informações do autor do site

-Informações sobre os direitos autorais

Módulo 07 - Parágrafo e Quebra de Linha

7.1 - Parágrafos HTML

A tag <p> do HTML é usado para definir um parágrafo.

7.2 - Quebra de Linha

A tag <br> do HTML é usada para definir uma quebra de linha.

Por que utilizar a tag <br>?

Módulo 08 - Estilos HTML

A configuração do estilo de um elemento HTML pode ser feita com o atributo

O atributo style do HTML possui a seguinte sintaxe:

A propriedade é uma propriedade CSS. O valor é um valor CSS.

9.1 - Formatação de texto HTML

Este texto está em negrito

Este texto está em itálico

Elementos de formatação do HTML

<b> - Texto em negrito

<strong> - texto importante

<i> - texto em itálico

<em> - Texto enfatizado

<mark> - Texto marcado

<small> - Texto menor

<ins> - texto inserido

<sub> - Texto subscrito

<sup> - Texto sobrescrito

10.1 - Cores HTML

rgb é abreviatura para:

Uma faixa de números de 0 (zero) até 255

Uma faixa de porcentagens de 0% até 100%

Não é válido usar em uma definição de cor uma mistura de números e porcentagens.

rgb(145, 230, 50)

Então seria rgb(255, 255, 255) para a cor branca e rgb(0, 0, 0) para a cor preta.

O HEX vem de Hexadecimal e é o sistema de numeração utilizado na programação de

Em HTML uma cor hexadecimal é especificada com: #RRGGBB.

A sintaxe geral para a declaração com uso dessa função seria:

Em resumo saturação seria a vivacidade ou palidez de uma cor.

Você também pode gostar