#DevWeb - Capítulo 03
prof. Gustavo Guanabara
Página de 1 10
MÓDULO 01 ▪ CAPÍTULO 03
COMO FUNCIONA A
HTML E AS CSS?
Gustavo Guanabara
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Encontra documentos específicos para os exames da tua universidade
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Quiz
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
HTML, CSS e JavaScript: compreendendo as diferenças e aplicações, Esquemas de Programação em C
Este documento fornece uma explicação clara sobre as tecnologias html, css e javascript, abordando suas diferenças, finalidades e aplicações no desenvolvimento web. Além disso, é apresentada a estrutura básica de um documento html e as tags obsoletas recomendadas pela w3c.
Tipologia: Esquemas
2021
1 / 10
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Documentos relacionados
Pré-visualização parcial do texto
Baixe HTML, CSS e JavaScript: compreendendo as diferenças e aplicações e outras Esquemas em PDF para Programação em C, somente na Docsity!
MÓDULO 01 ▪^ CAPÍTULO 03
COMO FUNCIONA A
HTML E AS CSS?
Gustavo Guanabara
M01C COMO FUNCIONA A HTML E AS CSS?
Pode ser estranho pra você ler “a HTML” e
também “as CSS”. Muita gente trata as duas
tecnologias com o ar@go masculino na maioria
das vezes. Na verdade, isso nem está totalmente
errado, mas eu sempre vou considerar defini-las
pela tradução dos seus termos. HTML é uma
Linguagem de Marcação Hipertexto. CSS são as
Folhas de Es@lo em Cascata. Notou que são
termos em feminino? Pois as polêmicas não
param por aqui não…
Guarde bem a tabela anterior sempre que você precisar decidir qual linguagem vai utilizar em cada situação. Abra aí o seu site de notícias favorito. Ao abrir uma determinada notícia, você vai ver o texto, as imagens, os vídeos e todo aquele conteúdo que compõe a notícia em si. Isso tudo foi criado em HTML. Ela é focada em conteúdo. Agora preste atenção nas cores, na posição dos componentes e organização visual do conteúdo 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 animação. Ao mover o mouse sobre as sessões, é possível que aconteçam algumas interações interessantes. Isso foi desenvolvido com ajuda de JavaScript. Ela é uma linguagem focada nas interações. Tags HTML, aí vamos nós Como eu já disse anteriormente, a HTML funciona baseada em marcações específicas chamadas tags. Uma tag é um conjunto de palavras entre sinais de colchete angular , conforme representado a seguir. Na imagem anterior, você consegue perceber o uso da tag
para a criação de um parágrafo simples. A maioria das tags possuem uma abertura e um fechamento , e você identifica isso pela presença da barra no fechamento da tag. Além disso, as tags também podem ter atributos e valores, que vão configurar seu comportamento:
Uma mesma tag pode ter vários parâmetros, cada um com seu valor. Entretanto, algumas tags não possuem a necessidade de **conteúdo** interno e por isso não possuem fechamento. É o caso, por exemplo, das tagse . Isso é algo natural, não se preocupe com isso agora. **Eu ainda uso , , , , …** Com o 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 própria **W3C** - consórcio responsável por manter as especificações da linguagem - recomenda que elas **não sejam mais usadas** pelos profissionais e aos poucos não serão mais suportadas pelos navegadores nas suas futuras versões.
De forma simples e direta (vou até escrever “gritando” aqui, pra dar ênfase): NÃO
USE TAGS OBSOLETAS NO SEU SITE! Ufa! Que alívio colocar isso pra fora e
desabafar 😅 Chegou a vez dos seletores CSS Como já vimos anteriormente, as CSS são as Cascading Style Sheets (Folhas de Estilo em Cascata). Elas são usadas para configurar um resultado visual dos elementos HTML. As configurações das CSS são realizadas através dos seletores. Vamos ver a anatomia de um seletor. APRENDA MAIS: Sempre que você quiser saber quais são as tags que estão sendo consideradas obsoletas pelo W3C , basta consultar a referência oficial da linguagem, disponível no site abaixo e acessar o item 15: Obsolete Features.
HTML Standard: https://html.spec.whatwg.org/multipage/
- Linha 1 : Indica que o documento atual será escrito na versão mais atualizada da linguagem (no caso, HTML5)
- Linhas 2 e 11 : Delimitam o documento HTML, que é sempre dividido em duas partes: a cabeça e o corpo. Na linha 2, também estamos indicando que o conteúdo desse site será no idioma Português do Brasil.
- Linhas 3 e 7 : Delimitam a cabeça da página, local onde são realizadas algumas configurações iniciais como formatos, estilos, ícone de favoritos, etc.
- Linha 4 : adiciona ao documento atual o suporte a caracteres acentuados. Remover essa linha pode causar erros de renderização de algumas letras na tela.
- Linha 5 : Indica que o conteúdo aparecerá, por padrão, ocupando todo o espaço disponível da tela e com uma escala de 1:1.
- Linha 6 : Configura o título da página, que aparecerá como identificação da aba do navegador, ao lado do favicon.
- Linhas 8 e 10 : Delimitam o corpo da página , a maior porção do site, que vai aparecer na tela. É aqui onde colocaremos todo o nosso conteúdo. Por enquanto é isso! Agora você já conhece a base suficiente para começar a criar seus próprios sites básicos. No próximo material vamos instalar os softwares necessários para a criação de documentos e começar a aprender as principais tags. Complemente sempre o nosso conteúdo com os vídeos que eu indico no final de cada material. Quer acompanhar tudo em vídeo? Eu sei que às vezes as pessoas gostam mais de assistir vídeos do que ler livros, e é por isso que eu lanço há anos materiais no canal Curso em Vídeo no YouTube. O link que vou compartilhar contigo faz parte da playlist completa onde você encontra o Módulo 1 do Curso de HTML5 e CSS3 , completamente gravado com base nesse material. Além de acessar o link a seguir, você também pode ter acesso às aulas apontando a câmera do seu celular para o código QR ao lado. Todo dispositivo smartphone ou tablet atualizado já possui esse recurso de leitura de códigos habilitado por padrão. Módulo 1 do curso: https://www.youtube.com/ p l a y l i s t? l i s t = P L H z _ A r e H m 4 d k Z 9 - atkcmcBaMZdmLHft8n
Teste seus conhecimentos Terminou de ler esse capítulo e já acompanhou todos os vídeos e referências externas que indicamos? Pois agora, responda a essas 10 perguntas objetivas e marque em cada uma delas a única opção verdadeira. Aí sim, você vai poder comprovar que realmente entendeu o conteúdo.
Qual das frases a seguir é a única tecnicamente CORRETA de se falar? “Eu programo em linguagem HTML” “Eu programo em linguagem CSS” “ E u p r o g r a m o e m l i n g u a g e m JavaScript” “Eu programo em linguagem VSCode”
A sigla HTML significa: Host Text Makeup Language HyperText Markup Language Hyper Tree Makeup Language Host Tree Markup Language
A sigla CSS significa: Cascading Style Sheets Cell Safety Science Characteristic Score Style Chief Scale Sheets
Correlacione a coluna da esquerda com a da direita, de acordo com o foco de cada uma das tecnologias: 1 - 2 - 3 3 - 2 - 1 1 - 3 - 2 3 - 1 - 2 5. Qual tag abaixo não tem fechamento?
<meta> <strong> <head> 6. Na tag <a>, o href é um(a): conteúdo parâmetro característica valor 7. Todas as configurações visuais dos elementos HTML são realizadas pela linguagem CSS. Agrupamos todas as d e c l a r a ç õ e s C S S d e u m m e s m o elemento dentro de um(a): seletor parâmetro valor selecionador 8. Para mudar a cor de um texto em CSS, configuramos qual propriedade? text text-color color font-color
( 1 ) HTML
( 2 ) CSS
( 3 ) JS
( ) interatividade ( ) conteúdo ( ) estilo
Suas anotações Não guarde conhecimento. Ele é livre. Compartilhe o seu e veja ele se espalhando pelo mundo 🌎