O que vamos aprender?

Aqui você vai aprender como estruturar páginas HTML estilizadas com o
CSS de uma forma muito prática e criando vários projetos.
Para isso, dividimos o conteúdo em quatro partes:

1. Primeiro você irá aprender a usar as principais tags do HTML para

criar a estrutura das páginas web
2. Depois, você vai aprender como usar o CSS para estilizar as tags,
usando diferentes formas de selecionar os elementos HTML
3. No terceiro dia, você vai aprender como alterar o posicionamento
dos elementos na página e como algumas propriedades específicas
alteram as dimensões dos elementos
4. No último conteúdo, você aprenderá sobre o significado que cada
elemento HTML carrega e sobre como isso impacta a acessibilidade
da página e a interpretação do conteúdo por indexadores de
pesquisa, como o Google
5. Para fechar com chave de ouro, você desenvolverá a sua própria
página, aplicando todo o seu conhecimento, de acordo com a
especificação do projeto final

OBS: html não é uma linguagem de programação, é uma linguagem de marcação de textos.

O que vamos aprender?

Para trabalhar com desenvolvimento de software web, você vai precisar
de um sólido conhecimento nas partes fundamentais do código que roda
no cliente : HTML, CSS e JavaScript . Afinal, esse será o ponto de
contato dos usuários com as suas aplicações.
Na primeira parte da sua jornada através do HTML & CSS , você vai
aprender na prática como utilizar HTML para estruturar páginas web.

Você será capaz de:

● Estruturar páginas web com HTML utilizando as tags html , head e

body ;
● Utilizar o HTML para estruturar textos e títulos;
● Utilizar o HTML para criar listas, links e adicionar imagens;

Por que isso é importante?

Para trabalhar com desenvolvimento web, não é estritamente necessário
aprender HTML e CSS. Porém, no decorrer da sua carreira, certamente
você vai se deparar com código e/ou aplicações inteiras que rodam no
cliente . Então, o quanto antes você iniciar seu contato com as linguagens
de marcação, estilo e comportamento utilizadas no cliente (por exemplo,
os browsers ), mais rápido irá desenvolver as habilidades necessárias
para criar páginas web cada vez mais robustas!
O HTML e o CSS são duas das pedras fundamentais no desenvolvimento
web. São duas linguagens muito poderosas, que te permitem criar
páginas web do zero e são utilizadas como base para inúmeras outras
tecnologias de desenvolvimento web, como vamos aprender ao longo do
curso.
Você pode pensar no HTML como se fosse o esqueleto da sua página. É
através do HTML que você irá criar a estrutura de como a página vai ser
exibida, definindo quais tags servirão para títulos, subtítulos, parágrafos,
e outros conteúdos ricos como links , imagens, vídeos etc.

Conteúdos
Para que você aprenda na prática, a partir de agora vamos ter vários
conteúdos interativos, por meio dos quais você irá seguir a teoria e fazer
exercícios ao mesmo tempo. Vamos lá!
Você irá desenvolver alguns desafios entre os vídeos. Para subi-los para o
seu repositório de exercícios, siga as instruções abaixo.
PS: Peça ajuda no Slack em caso de dúvidas!
fundamentos

Antes de começar: versionando seu código

Para versionar seu código, utilize o seu repositório de exercícios. 😉

Abaixo você vai ver exemplos de como organizar os exercícios do dia em
uma branch, com arquivos e commits específicos para cada exercício. Você
deve seguir este padrão para realizar os exercícios a seguir.

1. Abra a pasta de exercícios:

cd ~/trybe-exercicios

2. Certifique-se de que está na branch main e ela está sincronizada

com a remota. Caso você tenha arquivos modificados e não
comitados, deverá fazer um commit ou checkout dos arquivos antes
deste passo.

git checkout main

git pull
 3. A partir da main, crie uma branch com o nome exercicios/3.1
(bloco 3, dia 1)

git checkout -b exercicios/3.1

4. Caso seja o primeiro dia deste módulo, crie um diretório para ele e o
acesse na sequência:
mkdir fundamentos
cd fundamentos

5. Caso seja o primeiro dia do bloco, crie um diretório para ele e o acesse
na sequência:
mkdir bloco-3-introducao-a-html-e-css
cd bloco-3-introducao-a-html-e-css

6. Crie um diretório para o dia e o acesse na sequência:

mkdir dia-1-html-css-estruturas-de-pagina
cd dia-1-html-css-estruturas-de-pagina

7. Os arquivos referentes aos exercícios deste dia deverão ficar dentro do

diretório ~/trybe-exercicios/fundamentos/block-3-introducao-a-html-e-
css/dia-1-html-css-estruturas-de-pagina. Lembre-se de fazer commits
pequenos e com mensagens bem descritivas, preferencialmente a cada
exercício resolvido.
OBS: o git não adiciona diretórios vazios, coloque um arquivo dentro.

Verifique os arquivos alterados/adicionados:

git status

Adicione os arquivos que farão parte daquele commit:

# Se quiser adicionar os arquivos individualmente
$ git add caminhoParaArquivo

# Se quiser adicionar todos os arquivos de uma vez, porém,

atente-se
para não adicionar arquivos indesejados acidentalmente
$ git add --all

Faça o commit com uma mensagem descritiva das alterações:

git commit -m "Mensagem descrevendo alterações"

8.Você pode visualizar o log de todos os commits já feitos

naquela branch com git log.

git log

9. Agora que temos as alterações salvas no repositório local precisamos

enviá-las para o repositório remoto. No primeiro envio, a branch
exercicios/3.1 não vai existir no repositório remoto, então precisamos
configurar o remote utilizando a opção --set-upstream (ou -u, que é a
forma abreviada).

git push -u origin exercicios/3.1

10. Após realizar o passo 9, podemos abrir a Pull Request a partir do link
que aparecerá na mensagem do push no terminal, ou na página do seu
repositório de exercícios no GitHub através de um botão que aparecerá na
interface. Escolha a forma que preferir e abra a Pull Request. De agora
em diante, você repetirá o fluxo a partir do passo 7 para cada exercício
adicionado, porém como já definimos a branch remota com -u
anteriormente, agora podemos simplificar os comandos para:

Quando quiser enviar para o repositório remoto

$ git push

Caso você queria sincronizar com o remoto, poderá utilizar

apenas
$ git pull

Quando terminar os exercícios, seus códigos devem estar todos

commitados na branch exercicios/3.1, e disponíveis no repositório
remoto do GitHub. Pra finalizar, compartilhe o link da Pull Request no
canal de Code Review para a monitoria e/ou colegas revisarem. Faça
review você também, lembre-se que é muito importante para o seu
desenvolvimento ler o código de outras pessoas. 🤜🏼🤛🏼

—--------------------------------------------------------------------------------
-----------------------------

Introdução ao HTML

O HTML está ligado ao desenvolvimentos web ele surgiu pela necessidade

de fazer paginas mais ricas, significa hyper tex markup language( ou
linguagem de marcação de texto) que via garantir que nos façamos
paginas mais ricas, o surgimento dessa linguagem surgiu para melhorar o
compartilhamento de informação.

foi criado por tim berners-lee robert cailliau

principais versõe do html 2.0 , 3.2 , 4.01 ,html 5

O HTML é como se force os ossos e musculo e o CSS a pelo, cabelos,

olhos.
fica dificil conseguir colocar em texto puros varios aplicações modernas
como musicas videos ou imagens.

HTML - Primeiras tags

Nesse vídeo você terá contato com as primeiras tags e entenderá como os
elementos se relacionam.

essas acimas são as tags que vamos entender hoje

as tags podem ou não podem conter um fechamento.
resumo de todas as tags HTML
https://www.w3schools.com/tags/default.asp

a tag é dividida em nome, atributo, valor, conteúdo e fechamento da tag.

Para executar o seu código enquanto o desenvolve, utilize a extensão Live

Server do vsCode. Para saber mais sobre ela acesse nosso conteúdo sobre
isso.
1ª linha <!DOCTYPE html> - !DOCTYPE informa ao computador o que ele
está querendo com aquele documento no caso html.
tudo que estiver. todo arquivo html deverá começar com a declaração
<!DOCTYPE html> para informar para o browser que ele é um html 5.
a declaração não é considerada uma tag HTML.

2ª linha <html lang=”pt-br”> -essa tag é a tag <html> ela que abre e
fecha e dentro dela fica todo o conteudo da pagina com as tags html ,
exceto da declaração do <!DOCTYPE html>. o lang=”pt-br” significa qual
a linguagem(idioma) que aquela página de internet irá estar usando.
observe que a tag html se divide em 2 partes head e body
OBS:o CSS padrão do html
https://www.w3schools.com/tags/tag_html.asp

3ª linha <HEAD> ele não vai ter as características visíveis da página, ele
vai ser onde fica as configurações da página. o css e outras coisas além
do html fica aqui.

4ª linha <meta charset=”UTF-8”> essa tag traz o conjunto de caracteres

para a página. idiomas como japonês tem seus textos com caracteres
diferentes.
5ª linha <title> Aprendendo HTML</title> essa tag title é o titulo que vai
ficar no nome da aba do browser.
|OBS: o css vai fica informado no head, junto com se precisar de alguma
coisa de java ou javascript.
6ª linha fechhamento do head </head>
7ª linha <body> começo do body, é o corpo do código que ficará visivel
para os usuarios.
8ª linha <h1> o h significa header é o cabeçalho da seção a prioridade e
o tamanho do texto. o h pode ir de 1 a 6. quanto maior o h menor o texto
sendo o h1 o texto maior para ter maior prioridade. observe que ele ao
final fecha </h1>

9ª linha <h2> é o header 2, um pouco menor que o h1

10ª linha <p> representa um paragrafo. fecha com </p>
11ª linha fechamento do body </body>
12ª linha fechamento do html, </html> sempre via ter que ter um
fechamento do html

TAMANHO PADRÃO das letras H1 a H6

h1 { font-size: 24px;} h2 { font-size: 22px;} h3 { font-size: 18px;} h4 { font-size: 16px;} h5 { font-
size: 12px;} h6 { font-size: 10px;}.

outras tags
comandos tags html
<br> é uma tag que faz pular uma linha como um enter no teclado, essa
tag não tem fechamento e pode ser colocada varias para dar o
expaçamento dentre linhas e paragrafos. ex:<br> <br> <br>
<strong> muda o texto para negrito, fechamento </strong>
<em> muda o texto para itálico, fechamento</em>
<u> coloca o texto em sublinhado
<ul> cria uma lista não ordenada com bolinhas antes</ul>
<li> cada parágrafo com nova linha dentro do <ul> e <ol> usa o
<li> fecha com </li>
<ol> cria uma lista ordenada onde cada paragrafo tem um numero
sequencial na frente. usa também o <il> para pular o </li>
<img src=”local da imagem tanto link ou diretorio” alt=”descrever a
imagem para pessoas caso a imagem não aparecer, serve também para
leitores de pessoas cegas” width=”largurapx” height=”alturapx”>
OBS: img não precisa de fechamento, só fechar o >
<hr> coloca uma linha horizontal
obs:underline ou sublinhar é colocado pelo css e não pelo html como
text-decoration: underline;

Para executar o seu código enquanto o desenvolve, utilize a extensão

Live Server . Para saber mais sobre ela acesse nosso conteúdo sobre
isso.

OBS:<tr> criar tabelas

A tag <table> é usada para abrir uma tabela. Com essa tag encontraremos outras tags típicas.
<tr> (as linhas da tabela) e <td> (as colunas da tabela). Mas a melhor explicação é sempre um
exemplo:

fonte:https://tutorialehtml.com/pt/html-tutorial-tabelas/
HTML - Tabelas assimetricas
Para formar uma tabela assimetrica iremos usar 'rowspan' para cruzar mais de uma linha e
'colspan' para cruzar mais de uma coluna. Se quisermos que a primeira linha sirva de título para
todas as colunas usaremos a tag <th> . Essas serão escritas em negrito, como veremos no
seguinte exemplo:

Para fixar a estrutura do html

index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Exercícios</h1>
</body>
</html>

1 - Crie uma lista das pessoas que você já fez amizade na Trybe.
2 - Adicione uma imagem que venha de uma URL externa.
3 - Adicione uma imagem que está no seu computador, local.

HTML - Links externos e internos

comandos
Link externo
<a> serve para colocar hyperlink abaixo veja como se referencia.
—- usando para link externo
<a href=”hyper link para qual a tag vai clicar” target=””>o nome que fica amostra do para clicar
no hyperlink</a>
 OBS: target - pode ser “_blank” que abre uma nova aba, se não tiver
nada escrito no target=”” ele vai mudar a pagina que vemos ao invés de
abrir outra.

exemplo de um link externo para uma playlist no youtube, o

target=”_blank” faz abrir em uma nova página. O nome do link que clica
é Playlist do gosto musical.

—--------------------------------------------------------------------------------
-------------------------
Link interno
—- usando para ir para um lugar do scroll da propria pagina
<a href=”#descreva o nome id do local que quer ir”>
toda tag pode ter um id para ser referenciado digitando
id=”nome” e ser referenciada por #nome.

na foto acima temos um id=”css” na parte inferior no paragrafo escrito

varios conteúdo de css que é referenciado no <a href=” href=”#css”

outro exemplo de link interno.

o exemplo acima vai criar uma referencia para um id chamado nome
( )

o nome que vai aparecer para clicar é “nome” que é o que está
entre o <a></a>

Para fixar
index.html
Copiar
<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Exercícios</h1>
</body>
</html>

1 - Crie um parágrafo para cada pessoa da sua lista.

2 - Crie um link entre a sua lista e os parágrafos de pessoas.
3 - Crie um link para a página do Google.
Não se esqueça de dar um PUSH no seu repositório para sincronizá-lo com
o GitHub

Vamos praticar!
Agora que você já começou a praticar com o HTML , que tal fazermos um
encontro ao vivo pelo Zoom para colocarmos em conjunto a mão na
massa?
Aula ao vivo! Vamos pro Slack, onde o link estará disponível.

SITE COM EXEMPLOS DE VARIAS TAGS HTML

https://tutorialehtml.com/pt/html-tutorial-listas/