Introdução ao HTML e Web

Prévia do material em texto

BECOMP
Capacitação 2022.1
Bem-vindos à primeira capacitação de 2022!
Panorama Geral
�  
A Trinidade das Páginas Web
� HTML, CSS e JavaScript
� HTML: caracteriza o conteúdo, a estrutura básica do site
� CSS: estiliza, trabalha na apresentação estética do site (fontes, cores, etc.)
� JavaScript: dá inteligência ao site, dinamicidade, interatividade, funcionalidade
� obs.: das 3, somente JavaScript é uma linguagem de programação!
HTML
O bloco de construção básico da web
Introdução ao HTML
� HTML = Hypertext Markup Language (hypertext se refere aos links)
� É uma linguagem de marcação, não de programação
� Extensão dos arquivos: .html (por exemplo: main.html é um arquivo html)
� O HTML diz ao navegador como estruturar sua página a partir de uma série de
elementos pré-definidos, que usamos para ditar como será mostrado um conteúdo
� Um elemento representa não somente a estética (como será mostrado), mas também
carrega uma semântica (dois elementos podem ‘aparecer’ do mesmo modo, mas terem
significados distintos)
Anatomia de um Elemento
�  
Tags
� Ok... Mas o que é uma tag?
� Uma tag é a responsável por criar um elemento de um certo tipo na sua página
� Por exemplo, a tag cria um parágrafo, a tag cria um texto em negrito, a
tag cria um título, e por aí vai...
 
Aninhando Elementos
� Podemos (e devemos!) colocar elementos dentro de outros
 
Meu site
Olá mundo!
Atributos de Elementos
�  
Elementos Vazios
� Elementos vazios não tem conteúdo, portanto sua sintaxe não inclui a tag de
fechamento
� A imagem () e o input () são exemplos de elementos vazios
� Suas propriedades são passadas pelos atributos
� Exemplos:
Class e Id – Atributos Especiais
� São atributos seletores
� Seu uso mais comum é integrado ao CSS, pois normalmente temos vários elementos
distintos mas que queremos aplicar o mesmo estilo. Então, atribuímos a todos eles a
mesma classe, e aplicamos o estilo à classe
� Diferença: empregamos classe para selecionar um grupo de elementos (mais de 1) e id
para identificar um elemento, assim, nos referimos a esse elemento pelo seu id
blablabla
blablabla
Prática no
Bloco de Notas
Estrutura do HTML
Meu primeiro site
Esta é minha página
Bem-vindo a este website teste!
Estrutura do HTML
Meu primeiro site
Esta é minha página
Bem-vindo a este website teste!
Especifica o tipo de HTML da página
Estrutura do HTML
Meu primeiro site
Esta é minha página
Bem-vindo a este website teste!
Especifica o tipo de HTML da página
El
em
en
to
 r
ai
z
Estrutura do HTML
Meu primeiro site
Esta é minha página
Bem-vindo a este website teste!
Especifica o tipo de HTML da página
El
em
en
to
 r
ai
z
head: contém os metadados, é um
container para todos os conteúdos da
página que não são visíveis para o visitante
Estrutura do HTML
Meu primeiro site
Esta é minha página
Bem-vindo a este website teste!
Especifica o tipo de HTML da página
El
em
en
to
 r
ai
z
head: contém os metadados, é um
container para todos os conteúdos da
página que não são visíveis para o visitante
body: contém todo o conteúdo visual,
visíveis para o visitante
Teste/Prática: Ctrl+C Ctrl+V
Meu primeiro site
Esta é minha página
Bem-vindo a este website teste!
VS Code
O nosso editor de código
VS Code
� É um editor de código que suporta várias linguagens, altamente customizável e com
funcionalidades muito úteis, como o terminal integrado e muitos atalhos
� https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
� Extensões úteis: Code Runner (Ctrl+Alt+N), Bracket Pair Colorizer, Material Icon Theme,
React Native Tools, GitLens
� Atalhos úteis: Ctrl+D, F5, Ctrl+Shift+P, Ctrl+’
Metadados e a Head
�  
Comentários, Identação e Observações
� Os comentários no código não aparecem no site, mas são uma boa prática para
outro desenvolvedor compreender seu código. Em HTML:
� A identação é uma boa prática para facilitar a leitura e organização do seu código.
Consiste apenas em aninhar os elementos empregando o Tab
� obs.: o HTML 5 é case insensitive, ao contrário do C. Isso significa que ele não se
importa com maiúsculas e minúsculas: é igual a ou a
Tags
(Algumas) Tags relevantes
Tags: Cabeçalhos e Parágrafos
�  
Tags: Listas
�  
Tags: Listas
Lista de Compras
Arroz
Feijão
Cebola
Melhores da NBA
Lebron James
Stephen Curry
Ja Morant
Lista não-ordenada Lista ordenada
Tags: Hyperlinks (Anchors)
� Hyperlinks são os links que tornam a web de fato uma teia de conexões
� Devemos passar como atributo o destino que o link nos levará. Para isso, usamos o
atributo href (hypertext reference).
� A tag do hyperlink é o (anchor), e tudo que se encontra dentro dessa tag será
clicável como um link
IME Júnior
Login