UNINOVE Introdugao ao HTML e CSS INTRODUGAO, CONCEITOS F UTILIZAGAO DAS LINGUAGENS HTMLS F S83 PARA DESENVOLVIMENTO DE INTERFACES ESTATICAS DA WEB. APRESENTAGAO DO CONSORCIO W3C (WORLD WIDE WEB CONSORTIUM) F EVOLUGAO DAS LINGUAGENS FM QUESTAO, AUTOR(A): PROF. ADILSON ROGERIO DE ALMEIDA, AUTOR(A): PROF. ADILSON ROGERIO DE ALMEIDA, Apresentagao Prezado aluno, seja bem-vindo! Se voc® jé chegou até aqui é porque tem acesso @ internet, jf ‘navega na web", Mas como sdo feitas as paginas da internet afinal? Bem, esse é o assunto que abordaremos nesta disciplina, a qual & composta por 16 tépicos que apresentardo o desenvolvimento de paginas estaticas para «@ internet fazendo uso das linguagens HTMLS (linguagem de marcagao) e CSS3 (linguagem de estilo). SUGESTAO: Para que voc’ tenha éxito nos seus estudos & necessario que acompanhe 0s tépicos com atencio, faga todas as atividades e exercicios propostes. Analise e compreenda o que esté sendo feito em cada etapa, pratique.‘Vamos criar as nossas paginas da web juntos, passo a passo. Definiremos a seguir alguns conceitos referentes as linguagens em estudo. O que éo0 HTML HTML. (sigla em inglés para Hyper Text Markup Language) & uma Linguagem de Marcacio de Hipertexto utilizada para eriagao de paginas da Web. Essa a linguagem que o seu navegador (também conhecido como Browser, om inglés) decodifica para exibir as paginas. (FERREIRA & EIS, ONLINE, p.7) © termo inglés browseré usado no jargio da internet para designar um programa capaz de ler e apresentar ao usuério os conteidos de um documento web escrito em linguagem de marcagio. Browser vem do verbo to browse, que significa folhear casualmente as paginas de um livro e foi traduzido para o portugués como navegador, gerando a tdo bem conhecida expresso “navegar na internet”. Sdo exemplos de navegadores o Internet Explorer, o Firefox, 0 Opera, o Chrome, o Safari, entre outros.[..] SILVA, 2011, P.2 Hipertexto pode ser definide como todo o conteddo o qual se encontra inserido em um documento para @ web, sendo que sua principal caracteristica seria a possibilidade de se interligar @ outros documentos também na web. (SILVA, 2011, p.20)(0 HTML é baseado no conceito de Hipertexto. Hipertexto sao conjuntos de elementos ~ ou nés~ ligados por conexdes. Estes elementos podem ser palavras, imagens, videos, diudio, documentos ete. Estes elementos conectados formam uma grande rede de informacio, Eles nao esto conectados linearmente como se fossem textos de um livro, conde um assunto ¢ ligado ao outro seguidamente. A conexao feita em um hipertexto é algo imprevisto que permite a comunicagéo de dados, organizando conhecimentos ¢ guardando informagées relacionadas. Para distribuir informagdo de uma maneita global, é necessério haver uma linguagem que seja entendida universalmente por diversos meios de acesso. © HTML se propae a ser esta Tinguagem. FERREIRA & ELIS, 2010, P.7Com a linguagem HTML é possivel desenvolver uma pagina para a web defininde toda a estruturagao do contetido da mesma, subdividindo-o adequadamente (titulo, subtitulo, posicionamento de imagens, tabelas, dentre outros contetidos que se deseja inserir). (WSCSCHOOL, ONLINE) As paginas criadas em html sio visualizadas pelos navegadores. A finalidade de um Navegador Web, entio, 6 ler um documento HTML e exibi-Io como uma pagina da Web, nio exibindo as tags, mas sim as utilizando para interpretar e exibir da maneira planejada o contedido da pagina criada. (W3CSCHOOL, ONLINE) ‘Veja abaixo um exemplo do site da UNINOVE aberta no navegador e de uma parte de seu cédigo html: suies Se © eo raat area PAU Pa aurcy Sree aM) feed ‘AIBA MAIS. RADAR UNINOVE é Gosnstes Reward Yale do Silico e as ue a Startups billondrias SRR invade abr evento DICA LEGAL: COMO VER O C6DIGO HTML DE UM SITE ABERTO NO NAVEGADOR Para ver o cédigo de um site no navegador Chrome, basta utilizar o atalho Ctrl+u ! Se vocé utilizar o Crtlvu e abrir o cédigo do site veria o html assim: Breve Histdrico da evolucao do HTML‘Tim Berners-Lee trabalhava na Seco de Computagio da Organizagio Europeia de Pesquisa Nuclear (CERN) ‘quando deu inicio & pesquisa que visava descobrir um método que proporcionasse aos cientistas de todo © mundo a possibilidade de compartilharem eletronicamente seus textos e pesquisas, além da funcionalidade de interligar esses documentos. Dessa forma foram criadas as nogdes de web e links que conhecemos atualmente Desde a invengio da web em 1992 por Tim Berners-Lee, a HTML evoluiu a cada versio langada, sendo a versio mais atual a HTMLS. (SILVA, 2011, p.21) AHTML evolutu por oito versdes, sendo clas:HTMLA.O1 199 HIML2.0 19 HTMLA de Hrwus HrMi3.0 HIML3.2 Mais adiante serd abordado 0 que é a W3C (World Wide Web Consortium), ok? ‘Uma curiosidade @ respeito da evolugdo do HTML € que em um workshop da WSC em 2004 as empresas Mozila e Opera apresentaram uma proposta para evolugao do HTML4 para o HTMLS, mas a W3C se recusou a dar continuidade a essa ideii ‘Mas pouco tempo depois, as empresas Fundagio Mozila, Apple e Opera anunciaram a criagio de uma organizagio que visava a evolusio do HTML, tal organizagio foi (nada WHATWG, a qual passou a desenvolver a linguagem XHTML.Como o resultado esperado para essa linguagem nao foi alcangado, a WSC se aliou @ WHATWG para desenvolverem entio 0 HTMLS, que é a versio que estudaremos, HTML ‘an Ww WHATWG IMPORTANTE! Vocé pode verificar que existem duas publicagées da especificagio do HTMLS, uma delas se encontra no site da W3C (https:/www.w3.org (https:/www.w3.org)) € a outra no site da WHATWG (https:/whatwg.org (attps:/whatwg.org)) , ambas com algumas diferencas no conteido das especificagées da linguagem HTML... OHTMLS HTMLS é a mais recente evolugo do padrio que define © HTML. Essa versio do HTML chegou incorporada com novos elementos, atributos e comportamentos. Esse maior conjunto de tecnologias permite desenvolvimento de websites mais poderosos.Abaixo vocé pode verificar algumas das melhorias relacionadas a0 HTMLS (Font : HIMLS. Disponivel la.org/pt- em Texto azul tamanho 12 Ou seja, se voce tivesse 10 tipos diferentes de fontes em uma mesma pagina, entio teria de fazer esta formatagao 10 vezes. Até que fazer isto em uma s6 pagina, tudo bem, mas se o site tivesse 100 paginas entdo seria muito trabalhoso manter e alterar estas fontes, nio acha?© CSS veio como uma solugao para este problema pois com ele foi realizada a separagdo entre a insercio dos conteiidos (com html) ¢ a formatagao destes conteiidos (com CSS)© CSS3 (que vamos aprender) é a segunda versio da linguagem CSS, sendo que essa segunda versio possui mais recursos que possibilitam uma maior possibilidade de usos de efeitos de forma mais simplificada do ‘que seria com 0 uso da sua versio anterior, a CSS apenas. (MAZZA, 2012, p.61) OU SEJA, RESUMIDAMENTE, TEMOS QUE: - O HTML possibilita descrever a estrutura e os conteidos das paginas da Web. = © CSS possibilita descrever a forma na qual o contetido deve ser apresentado, ou seja, sua formatagdo (cor, tamanho, etc) ¢ forma de apresentagao (efeitos de transicio, design e layout), Beneficios do uso do CSS © C88 realmente veio para revolucionar o web design, sendo alguns de seus beneficios: - Controle do layout de diversos documentos utilizando apenas uma folha de estilos, - Maior preciso no controle do layout e design= Aplicagéo de diferentes layouts para adaptago do contetdo e design em diferentes formas de apresentasio (impressoras, telas de diferentes tamanhos, etc.) (WSCSCHOOL, ONLINE) PARA SABER MAIS: W3SCHOOL - CSS . Disponivel_ em: . _https://www.w3schools.com/css/css_intro.asp (https://www.w3schools.com/css/css_intro.asp) O que € 0 W3C © WSC (World Wide Web Consortium), criado em outubro de 1994 por Tim Berners-Lee, é um consércio internacional formado por empresas, instituigdes, pesquisadores, desenvolvedores e piiblico em geral. A finalidade desse consércio é desenvolver a web a seu potencial maximo, criando normas, especificagdes & padronizacdes que se aplicam aos mais diversos segmentos e setores da web. (W3C, ONLINE) Cy eHLiderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o WSC tem como missio Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo. SITE W3C No site , vocé encontra um vasto material sobre especificagdes, padres e normas, bem como guias de referéncias e tutorials para o desenvolvimento e eriagao de documentos web. Acesse e confira! O que € 0 w3schools W3Schools é um site para desenvolvedores web, onde vocé pode encontrar tutoriais e referéncias das linguagens de desenvolvimento para web, assim como HTML, CSS, JavaScript, PHP, SQL, W3.CSS Bootstrap. ‘O nome do site é derivado da World Wide Web (W3), mas nao é afiliado com 0 WSC. © WSSchools foi originalmente criado em 1998 pela empresa Refsnes Data, de origem norueguesa. A Refsnes Data é uma empresa de desenvolvimento de software e consultoria, DICA LEGAL: Confira 0 contetido do site clicando aqui (https:/www.wSschools.com)! Vale muito apena conferir, 1s HTML além de jd que esse site possui contetidos de fécil entendimento sobre 0 uso dos c6 possuir intimeros exemplos, + CSS - WSSCHOOL (https://www.w3schools.com) Editores HTML Bem, até agora falamos bastante @ respeito das linguagens que utilizamos para fazer paginas na web, mas cenfim, onde criaremos os cédigos dessas paginas?Os editores HTML sio os softwares que utilizamos para criar as paginas da web empregando as linguagens de marcagao ¢ de estilo, Tais editores possuem diversas funcionalidades que auxiliam no processo de desenvolvimento da pigina, proporcionando, por exemplo a visualizagao do projeto tanto em linhas de cédigos quanto em design de apresentagio. EXTENS@O .HTM OU .HTML ‘Um documento HTML é um arquivo salvo com a extensao .Atml ou .htm. Esses so os arquivos que os editores HTML geram e sio interpretados pelos navegadores. Diferenca entre um arquivo de extensao .html e .htm ‘A extensio .html é a mais usual e comum hoje em dia, A extensio .htm é mais antiga, época em que o sistema DOS era um dos mais utilizados e s6 accitava extensdes de arquivos que contivessem 3 caracteres (por exemplo: doc, txt, exe...)Depois que novos sistemas operacionais foram desenvolvidos, extensdes com mais de trés caracteres puderam ser utlizadas, surgindo assim a extensio html Ambas as extensGes sio interpretadas pelo navegador da mesma forma, mas se houverem dois arquivos com ‘© mesmo nome em uma pasta de um site, o navegador lerd preferencialmente 0 arquivo que possuir extensio html 0 Ginico motivo para que a extensio Jhtm continuar existindo é por questées de compatibilidade , para que sites mais antigos nao deixem de funcionar somente por terem arquivos de extensio .htm. Exemplos de editores HTML Free Para desenvolver nossos cédigos em html e css podemos utilizar editores free especificos, como exemplo podemos citar: Brackets (Disponivel em: http://brackets.io/ (http://brackets.io/)) © Brackets é um editor HTML moderno e poderoso desenvolvido pela Adobe® . Nele 6 possfvel verificar instantaneamente na tela do navegador os resultados das alteragdes feitas no cédigo HTML, sendo que novos recursos ¢ extensdes sdo disponibilizadas a cada 4 semanas, aproximadamente. Neste editor é possivel trabalhar simultaneamente com virios arquivos de um projeto, por exemplo, uma pagina HTML e seu respectivo cédigo CSS, Confira no video abaixo coma instalar e utilizar esse editor! EDITORES HTML NO CELULAR Caso voeé queira editar 0 cédigo em seu celular, pocure em sua loja os editores free disponiveis, em Android sugerimos o editor HTML Quoda. Para visualizar o cédigo sugerimos o Source Viewer. Vocé também pode utilizar outros editores HTML de cédigo aberto, Seguem sugestao de alguns que vod pode baixar e instalar em sua maquina: HTML Kit (verso 292 free) (disponivel para download em : _http://www.htmlkit.com/download/ (http://www-htmikit.com/download/)) Note Pad ++ verso 7.3.3. (disponivel_ para download em: _htips://notepad-plus- plus.org/download/v7.3.3.html (https://notepad-plus-plus.org/download/v7.3.5.htm)) O QUE VOCE PRECISA FAZER NESTE TOPICO: ‘+ Estudar 0 contetido;+ Acessar 0s sites propostos; + Fazer o download do editor HTML Brackets e instalé-lo em seu computador; + Familiarizar-se com os editores HTML; + Conseguir visualizar 0 cédigo de um site em um navegador (no Chrome utilizando 0 Ctri+u); ‘+ Assistir aos videos.. O QUE VOCEé PRECISA TER ENTENDIDO NESTE TOPICO: ‘+ O que é 0 para que serve o HTML ( linguagem de marcago); ‘+ Histétia do HTML; + Oque ée para que serve o CSS (linguagem de estilo); + O que é 0 W3C e 0 WSC School; ‘+O que sio e para que servem os editores HTML. ATIVIDADE FINAL O que significa a sigla HTML? A. Hyper Text Markup Language B. Hyper Text Markup Links C. Hyper Text Management Language D. Hyper Text Markup Letter © que significa a sigla CSS? A. Cascading Sync Sheets B. Cascading Style Survivelence €.Cascading Style Sheets D. Cascading Sign Sheets O HTML é uma Linguagem de: A.Estilo B. Programagio .MarcagaoD.Formatacao O CSS é uma linguagem de: A.Estilo B. Programacio c.Mareagio D. Sinalizagao Quais as versdes das linguagens que aprenderemos em nossos tépicos de estudo? A.HTML © C883 B.HTML3.0 ¢ CS83 C.HTMLS e CS83 D.HTML401 e CSS REFERENCIA MOZILA Developer Network. Disponivel em: . Acesso em 24 abr. 2017, SILVA, Muricio Samy. HTMLS: A linguagem de marcacdo que revolucionou a web. 1. ed. Sio Paulo: Novatec Editora, 2011. ‘TERUEL, Evandro Carlos. HTML5: Guia prético. 1. ed. Sio Paulo: Erica, 2011. WSC. Disponfvel em: . Acesso em 24 abr. 2017. 'W3SCHOOL. Disponivel em: . Acesso em 24 abr. 2017, WHATWG. Disponivel em: . Acesso em 24 abr. 2017.