0% acharam este documento útil (0 voto)
175 visualizações10 páginas03 - Como Funciona HTML e CSS
Curso de HTML5 e CSS3
Enviado por
Robson CordeiroDireitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF ou leia on-line no Scribd
0% acharam este documento útil (0 voto)
175 visualizações10 páginas03 - Como Funciona HTML e CSS
Curso de HTML5 e CSS3
Enviado por
Robson CordeiroDireitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF ou leia on-line no Scribd
/ 10
_mesces
COMO FUNCIONA
A HTML E AS
he
Pode ser estranho pra vocé ler “a HTML” e
Se etlel 1g OCS MMU o1 1 MeO (OTL)
tecnologias com o artigo masculino na maioria
das vezes. Na verdade, isso nem esta totalmente
errado, mas eu sempre vou considerar defini-las
pela tradugdo dos seus termos. HTML é uma
Linguagem de Marcacao Hipertexto. CSS sao as
Folhas de Estilo em Cascata. Notou que sdo
termos em feminino? Pois as polémicas nao
for-Te- lam Xe] le 0a [eae Mt au
Eu pregrame em HTML
Talvez vocé j4 tenha ouvido alguém falar a frase acima. Ey
Geralmente ela é dita por pessoas iniciantes ou entao aqueles se a,Cabeoat
que se baseiam apenas na capa de um Unico livro da série Programacao
Head First (use a cabeca), que estampa na capa "programacéo gm HT MLS
em HTMLS”. s
=
Acontece que a prépria sigla ja entrega seu objetivo: Hypertext ss
Markup Language traduzido para o bom e velho Portugués
significa Linguagem de Marcagao Hipertexto. Vocé vai notar
daqui a pouco que ela no funciona com instrugées, como toda
linguagem de programagao. A HTML é baseada em marcagées
chamadas tags, e elas comandam tudo.
Além disso, o termo “programaco” envolve estruturas
especializadas que dependem do uso de varidveis simples e compostas,
condigées, lagos e até coisas mais complexas como objetos. Nada disso existe na
HTML nem nas CSS. Por outro lado, todas essas caracteristicas estéo presentes na
linguagem JavaScript. Essa sim é uma Linguagem de Programagao
HTML trabalha fundamentada apenas nas marcas ou etiquetas (do Inglés tag) e as
CSS funcionam baseadas nos seletores, propriedades e valores. Vocé vai entender
mais sobre isso mais pra frente.
Sendo assim, em breve vocé terd a base suficiente para conseguir dizer com certeza
que HTML e CSS no sao linguagens de programacao.
IMPORTANTE! Dizer que HTML e CSS nio so linguagens de
programacao nao as torna RUINS de maneira nenhuma! O que
estamos fazendo aqui é uma simples classificacdo. Nao hd nada de
errado com elas e nenhuma outra linguagem é melhor ou pior que elas
por conta disso, ok?
Para que serve HTML, CSS e JS?
Uma das coisas mais importantes para quem esté comecando o desenvolvimento de
sites & compreender para que serve esse trio de tecnologias, que geralmente sao
estudados em conjunto. Basicamente, de forma resumida, temos um panorama
simples:
er Conteddo
Cor Estilo
Perit Interatividade
#DevWeb - Capitulo 03 prof. Gustavo Guanabara Pagina 3 de 10 Guarde bem a tabela anterior sempre que vocé precisar decidir qual linguagem vai
utilizar em cada situagao.
Abra ai o seu site de noticias favorito, Ao abrir uma determinada noticia, vocé vai ver
0 texto, as imagens, os videos e todo aquele contetido que compée a noticia em si.
Isso tudo foi criado em HTML. Ela é focada em contetido.
Agora preste atenco nas cores, na posico dos componentes e organizacao visual do
contetido em colunas, blocos visuais e tudo mais. Tudo foi definido em CSS. Ela é
focada no design/estilo.
Finalmente, provavelmente existe o menu do site. Quando vocé clica nele, acontece
uma animagéo. Ao mover 0 mouse sobre as sessdes, é possivel que acontecam
algumas interacées interessantes. Isso foi desenvolvido com ajuda de JavaScript. Ela
uma linguagem focada nas interagées.
Tags HTML, ai vamos nos
Como eu ja disse anteriormente, a HTML funciona baseada em marcagées especificas
chamadas tags. Uma tag é um conjunto de palavras entre sinais de colchete
angular, conforme representado a seguir.
conteudo
TTT
e![]()
. Isso é algo
natural, no se preocupe com isso agora.
Eu ainda uso , , ,
, ...
Com 0 surgimento da verséo 5 da HTML, algumas tags simplesmente deixaram de
existir ou tornaram-se obsoletas. Uma tag obsoleta pode até estar funcionando no
seu navegador hoje em dia, mas a propria W3C - consércio responsavel por manter
as especificacées da linguagem - recomenda que elas néo sejam mais usadas pelos
profissionais e aos poucos nao sero mais suportadas pelos navegadores nas suas
futuras versées.
APRENDA MAIS: Sempre que vocé quiser saber quais so as tags
que esto sendo consideradas obsoletas pelo W3C, basta consultar a
referéncia oficial da linguagem, disponivel no site abaixo e acessar o item
15: Obsolete Features.
HTML Standard: https://html. spec.whatwg.org/multipage/
De forma simples e direta (vou até escrever “gritando” aqui, pra dar énfase): NAO
USE TAGS OBSOLETAS NO SEU SITE! Ufa! Que alivio colocar isso pra fora
desabafar @
Chegou a vez dos seletores CSS
Como j& vimos anteriormente, as CSS so as Cascading Style Sheets (Folhas de
Estilo em Cascata). Elas séo usadas para configurar um resultado visual dos
elementos HTML.
As configuragdes das CSS sao realizadas através dos seletores. Vamos ver a
anatomia de um seletor.
seletor
—
Pp { G30
TP, gamit Apaanil
font-family: Arial;
font-size: 12pt;
color: blue;
propriedsde valor
#DevWeb - Capitulo 03 prof. Gustavo Guanabara Pagina 5 de 10 © seletor apresentado anteriormente vai configurar o visual dos elementos de
pardgrafo do site corrente. O uso das chaves delimita todas as declaracées relativas
ao seletor atual. No seletor que eu te mostrei, serdo feitas trés configuracbes:
+ A fonte escolhida foi Arial.
* O tamanho da letra sera 12pt (pontos)
* Acor da letra serd azul.
Note que, ao final de cada declaragao, temos que colocar ponto-e-virgula para
indicar que ela se encerrou.
Todas as propriedades devem ter seu valor, e eles devem ser separados por dois
pontos. Vocé nao é obrigado(a) a usar nenhuma declaracao especifica. Sé utilize a
propriedade que vocé realmente deseja alterar.
Estrutura basica de um documento
HTML
Ao criar um novo documento HTML, devemos sempre escrever a estrutura basica de
um documento desse formato. Vamos analisar cada uma das 11 linhas que compéem
esse documento base.
Document
uauner
onru9
10
11
Cursos gratis de tecnologia
que te preparam parao
mercado de trabalho
#DevWeb - Capitulo 03 —_ prof. Gustavo Guanabara Pagina 6 de 10 Linha 1: Indica que o documento atual seré escrito na versao mais atualizada da
linguagem (no caso, HTML5)
+ Linhas 2 € 11: Delimitam o documento HTML, que é sempre dividido em duas
partes: a cabega e 0 corpo. Na linha 2, também estamos indicando que o contetido
desse site sera no idioma Portugués do Brasil
+ Linhas 3 e 7: Delimitam a cabega da pagina, local onde sao realizadas algumas
configuragées iniciais como formatos, estilos, icone de favoritos, etc.
* Linha 4: adiciona ao documento atual © suporte a caracteres acentuados.
Remover essa linha pode causar erros de renderizacao de algumas letras na tela.
+ Linha 5: Indica que 0 contetido apareceré, por padrao, ocupando todo o espaco
disponivel da tela e com uma escala de 1:1.
+ Linha 6: Configura 0 titulo da pagina, que apareceré como identificacéo da aba do
navegador, ao lado do favicon.
+ Linhas 8 e 10: Delimitam o corpo da pagina, a maior porcao do site, que vai
aparecer na tela. € aqui onde colocaremos todo 0 nosso contetido.
Por enquanto é isso!
Agora vocé jé conhece a base suficiente para comecar a criar seus préprios sites
basicos. No préximo material vamos instalar os softwares necessdrios para a criacdo
de documentos e comecar a aprender as principais tags. Complemente sempre o
nosso contetido com os videos que eu indico no final de cada material.
Quer acompanhar tudo em video?
Eu sei que as vezes as pessoas gostam mais de assistir +
videos do que ler livros, e é por isso que eu lanco ha \
anos materiais no canal Curso em Video no YouTube. O BQH@ ENR) ao
link que vou compartilhar contigo faz parte da playlist ven Mem-pl i
completa onde vocé encontra o Médulo 1 do Curso ins
de HTMLS e CSS3, completamente gravado com base 2
nesse material. ABERTURA
CURSO HTMLS + CSS2
5 5 Além de acessar 0 link a seguir,
SURE voc também pode ter acesso as aulas apontando a cémera do
seu celular para o cédigo QR ao lado. Todo dispositive
smartphone ou tablet atualizado jé possui esse recurso de
leitura de cédigos habilitado por padrao.
Médulo 1 do curso: https://www.youtube.com/
playlist?list=PLHz AreHm4dkZ9-
atkcmcBaMZdmLHft8n
#DevWeb - Capitulo 03 prof. Gustavo Guanabara Pagina 7 de 10 Teste seus conhecimentos
Terminou de ler esse capitulo e j4 acompanhou todos os videos e
referéncias externas que indicamos? Pois agora, responda a essas 10
perguntas objetivas e marque em cada uma delas a Unica opcao
‘EasS
verdadeira. Ai sim, vocé vai poder comprovar que realmente entendeu
© contetido.
1. Qual das frases a seguir é a Unica
tecnicamente CORRETA de se falar?
“Eu programo em linguagem HTML”
“Eu programo em linguagem CSS”
© “Eu programo em linguagem
JavaScript”
“Eu programo em linguagem VSCode”
2. A sigla HTML significa:
® Host Text Makeup Language
© HyperText Markup Language
© Hyper Tree Makeup Language
D Host Tree Markup Language
3. A sigla CSS significa:
A Cascading Style Sheets
Cell Safety Science
© Characteristic Score Style
D Chief Scale Sheets
4. Correlacione a coluna da esquerda
com a da direita, de acordo com 0 foco
de cada uma das tecnologias:
(1) HTML (_) interatividade
(2)CSS — (_) contetido
(3)3s (_) estilo
W1-2-3
B3-2-1
1-3-2
D3-1-2
Solugées digitais
para negocios
5. Qual tag abaixo nao tem fechamento?
A
© <meta>
[ <strong>
1B <head>
6. Na tag <a>, o href é um(a)
(A contetido
B parametro
© caracteristica
© valor
7. Todas as configuracdes visuais dos
elementos HTML sao realizadas pela
linguagem CSS. Agrupamos todas as
declaracées CSS de um mesmo
elemento dentro de um(a):
Aseletor
© parametro
valor
(D selecionador
8. Para mudar a cor de um texto em
CSS, configuramos qual propriedade?
text
[B text-color
color
© font-color
#DevWeb - Capitulo 03
prof. Gustavo Guanabara
Pagina 8 de 10 9. Para indicar que um determinado
documento HTML esta escrito na verséo
mais recente da linguagem, devemos
adicionar a seguinte instrucao:
A <html lang=“versions">
B <titlesHTMis
©
D
#DevWeb - Capitulo 03
prof. Gustavo Guanabara
10. Qual é a tag de um documento HTML
adicionada pra manter a compatibilidade
com os caracteres acentuados, muito
comuns na lingua Portuguesa?
shead charset="UTF-8">
[Tol]
Pagina 9 de 10 Suas anotacées
Nao guarde conhecimento. Ele ¢ livre. Compartilhe o seu e veja ele se espathando pelo mundo @
#DevWeb - Capitulo 03 —_ prof. Gustavo Guanabara Pagina 10 de 10
< > p>Exemplo de paragrafo
para a criagdo de um pardgrafo simples. A maioria das tags possuem uma abertura e um fechamento, e vocé identifica isso pela presenga da barra no fechamento da tag. Além disso, as tags também podem ter atributos e valores, que véo configurar seu comportamento: ersmetro conteddo er . ree Exemplo de Link Lo Ls gun valor fedumente Cursos que vao te levar ao proximo nivel Pea ello} #DevWeb - Capitulo 03 prof. Gustavo Guanabara Pagina 4 de 10 Uma mesma tag pode ter varios parametros, cada um com seu valor. Entretanto, algumas tags nao possuem a necessidade de contetdo interno e por isso nao possuem fechamento. E 0 caso, por exemplo, das tagse
