_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

< > 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 tags
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. 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 © 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