teorico 1

Prévia do material em texto

Linguagem de 
Programação para Web
Introdução ao HTML
Material Teórico
Responsável pelo Conteúdo:
Prof. Dr. Pedro Henrique Cacique Braga
Revisão Textual:
Prof. Esp. Gislene Teresinha Rocha Delgado de Carvalho
5
u n
i d a d e
Introdução ao HTML1
Orientações de Estudo
O estudo de Linguagem de Programação Web requer que você conheça as formas de 
navegação e interação entre a página e o usuário. Portanto, quando acessar um site, a partir 
de agora, tente imaginar como ele foi estruturado. Olhe para o navegador e tente construir os 
blocos de conteúdo da página acessada. Essa prática pode ajudar bastante quando começarmos 
a escrever nosso próprio código.
Separe algumas páginas que você acessa com frequência e verifique se há alguma 
semelhança na forma como elas estão estruturadas. Uma outra dica fundamental é procurar 
por páginas que apresentem tutoriais da linguagem, pois assim podemos aprender com outros 
programadores algumas soluções para problemas específicos.
Bons estudos!
6
Unidade: Introdução ao HTML
Contextualização
Para iniciarmos o nosso curso, convido você para assistir a um pequeno vídeo que conta 
a história da Internet de uma forma bem simples e criativa. O filme criado por Melih Bilgil, 
em 2009, mostra como surgiu a necessidade de estarmos conectados ao mundo de forma 
tecnológica. O autor apresenta as principais motivações para a criação da Rede Mundial de 
Computadores através de um documentário animado.
• Assista o vídeo legendado em: http://youtu.be/A5dD2x2iQx8
• Acesse também o site oficial do projeto: http://www.lonja.de/the-history-of-the-internet/
7
Introdução
Você já checou o seu email hoje? Já colocou uma foto do seu café no Instagram, disse como 
está se sentindo, com até 140 caracteres, no Twitter, ou já avisou seus amigos do Facebook 
que neste momento você está estudando? Está cada vez mais difícil ficar desconectado nos dias 
de hoje, não é mesmo? 
Observe alguns dados interessantes coletados pelo IBGE no ano de 2013 no Brasil, 
considerando sua população de 198 milhões de habitantes:
 Figura 1 – Acesso a Internet no Brasil em 2013 segundo o IBGE
Acesso a Internet no Brasil em 2013 segundo o IBGE
A Internet já é parte significativa da nossa vida. Mas você já parou para pensar como ela 
funciona? Como é que podemos nos comunicar com pessoas do outro lado do mundo apenas 
digitando algumas palavras no computador? Ou, ainda, como você pode estar lendo este 
material que eu escrevo da minha escrivaninha de algum lugar do Brasil? O mundo todo está 
conectado por uma rede que se expande mais a cada dia.
Nesta disciplina vamos aprender a criar conteúdo para essa enorme conexão, de acordo 
com as normas de criação e os padrões já estabelecidos e consolidados. Vamos, ainda, discutir 
os caminhos que a internet está trilhando para tentar entender o nosso papel na evolução 
dessa tecnologia.
8
Unidade: Introdução ao HTML
Conceitos iniciais
Antes de criar uma nova página web é preciso conhecer as diferentes formas pelas quais as 
pessoas acessam os dados na rede. Para isso, vamos estabelecer alguns conceitos importantes 
para o nosso curso:
BROWSER (Navegador) é o software pelo qual o usuário pode se conectar à rede. 
Alguns exemplos populares são: Internet Explorer, Google Chrome, Mozilla Firefox e Opera. 
Basicamente, estamos falando da porta de entrada para a rede.
Figura 2 – Principais Navegadores
Quando você procura por uma página em um browser, seu pedido é enviado pela rede a 
um computador específico em algum lugar do mundo, conhecido como Web Server (servidor 
web), que hospeda a sua página. São computadores conectados 24 horas por dia à internet 
e otimizados para que as pessoas consigam acessar suas páginas a qualquer momento e em 
qualquer lugar.
As pessoas têm acessado a internet em um enorme número de dispositivos, sejam eles 
computadores pessoais, notebooks, smartphones, televisões digitais e até mesmo geladeiras 
já possuem acesso à internet. É importante lembrar que cada dispositivo possui uma tela de 
tamanho diferente e conexões com velocidades diferentes.
Como a Internet funciona
Imagine que você, estando em São Paulo, precisa fazer uma consulta no Google sobre 
como funciona a internet. Seu primeiro passo é abrir o navegador de seu dispositivo e, na 
barra de endereços, digitar www.google.com. 
Para encontrar o servidor que hospeda a página do Google, o navegador se conecta a um 
Sistema de Nomes de Domínios (DNS – Domain Name Server), que busca qual o identificador 
(IP) do computador que abriga a página desejada. 
Em seguida, o navegador conecta-se ao computador encontrado e faz uma requisição do conteúdo 
desejado. Este, por sua vez, retorna à página que é mostrada a você na tela do seu dispositivo.
A Figura 3 mostra alguns exemplos de como um usuário pode se conectar a um servidor, 
localizado em diferentes países, como o nosso exemplo do usuário em São Paulo, acessando 
o servidor do Google em San Francisco, nos Estados Unidos.
 
9
Figura 3 - Como a Internet Funciona
Glossário
IP (Internet Protocol) é o endereço de identificação de um computador em uma 
rede privada ou pública. Na versão IPV4, os Ips são números de 32 bits, separados em 
4 octetos, como por exemplo: 192.168.0.1
O que é o HTML
Agora que sabemos como a internet funciona, podemos começar a entender como cada site 
é desenvolvido. Uma página web é estruturada por meio de uma linguagem conhecida como 
HTML, que significa HyperText Markup Language, isto é, uma Linguagem de Marcação de 
Hipertextos. Mas, o que é isso, afinal?
Todos os dias, nós lemos documentos de todos os tipos. Se pegarmos uma revista e 
separarmos uma notícia qualquer, podemos observar uma estrutura bem definida que contém, 
por exemplo, um título, uma manchete, alguns parágrafos e, muito provavelmente, algumas 
imagens. Se pegarmos a mesma notícia no site da revista, teremos exatamente os mesmos 
elementos, mas em uma apresentação diferente.
O uso de títulos e subtítulos define também a hierarquia da informação, ou seja, qual 
elemento deve receber mais destaque e que outro deve estar ligado a ele.
10
Unidade: Introdução ao HTML
Figura 4 – Página com mesma estrutura vista de diferentes formas em diferentes dispositivos
A linguagem de marcação é responsável pela definição da estrutura desta página, 
independentemente do navegador ou do dispositivo utilizado. Assim, o HTML é a nossa 
linguagem que marca exatamente o conteúdo de cada divisão de uma página web. Não se 
preocupe, nesse ponto, com o estilo do site, isto é, suas cores, posicionamento, espaçamento 
etc. Essa será a função do CSS, mas isso, veremos mais adiante no nosso curso.
Como funciona o HTML?
Agora que já sabemos o que é o HTML, podemos começar a pensar em como ele funciona. 
A primeira coisa que devemos saber (e pensar nisso durante toda a escrita da página) é que 
estamos trabalhando com blocos de conteúdo.
Observe este trecho de código abaixo. Não se preocupe ainda com o significado deste 
trecho, pois vamos falar sobre ele mais à frente, apenas observe que foram separados, em 
azul, os trechos que fazem parte da linguagem e, em preto, o conteúdo da nossa página.
<html>
 <body>
 <h1>Este é o título da nossa página</h1>
 <p>No primeiro parágrafo podemos colocar a introdução do texto. 
Talvez aqui seja a manchete da nossa notícia, por exemplo.</p>
 <h2>Que tal colocarmos um subtítulo na nossa história?</h2>
 <p>Agora, podemos escrever toda a história que temos para contar, 
separada por parágrafos, como este que você está lendo. Lembre-se de que 
as divisões do nosso texto devem ser pensadas de acordo com a importância 
do seu conteúdo.</p>
 </body>
</html>
11
Os trechos destacados em azul são parte da linguagem HTML e são chamados de elementos 
e são representadosentre os caracteres < e >, constituindo a sua tag. Observe que, na maioria 
dos casos, um bloco de estrutura é limitado por um elemento e pode ter duas tags, marcando seu 
início e fim. A tag de fechamento é representada com uma barra antes do nome do elemento.
 Figura 5 – Estrutura de uma TAG HTML
Vejamos como o nosso exemplo é estruturado pelos elementos e suas tags:
Figura 6 – Divisão do conteúdo da página em blocos
12
Unidade: Introdução ao HTML
Colocando informações em um elemento
Para alguns atributos, precisamos colocar informações essenciais sobre ele. Por exemplo, 
se nossa notícia tem um parágrafo com uma citação em outro idioma, seria interessante 
destacar que esse elemento não está no mesmo idioma do restante da página. Mesmo que o 
parágrafo não seja, visivelmente, destacado no texto para o leitor, é importante colocarmos 
uma informação na sua estrutura. Fazemos isso utilizando os atributos de um elemento.
O atributo é sempre colocado dentro da tag e identificado por um conjunto de nome e valor. 
No nosso caso, podemos identificar o idioma do parágrafo da seguinte forma:
<p lang=”fr”> Ne me quittes pas </p>
Atenção
O código anterior apresenta então um texto em francês, delimitado pelas tags de abertura 
e fechamento de parágrafo. Na tag de abertura (nunca na tag de fechamento) é apresentado 
o atributo lang que informa o idioma do parágrafo.
Tenha em mente que o atributo não altera a composição do elemento, apenas traz uma 
informação a mais sobre ele. Neste caso, o texto não foi traduzido automaticamente para o 
francês por causa do seu atributo, mas ao lermos o código, podemos saber de antemão que o 
conteúdo deste parágrafo já não está em português.
Lembre-se, também, de que um atributo sempre é representado por seu nome seguido do 
símbolo de igualdade e seu valor entre aspas. 
Dica
O HTML 5 permite a utilização de letras maiúsculas no nome do atributo e a omissão das 
aspas, mas esse procedimento não é recomendado.
13
Estrutura Geral
Até agora, já vimos o que são elementos e como eles são representados por suas tags. 
Mas quais são os elementos essenciais do HTML? Como podemos começar a montar a nossa 
página? Vamos lá!
O principal elemento de uma página é o HTML. Tudo o que estiver entre as suas tags de 
abertura e fechamento fará parte do nosso site. Além deste, temos dois elementos principais 
que estão presentes em qualquer arquivo do formato:
• HEAD – estão todos os elementos que fazem parte da configuração da página. Seu 
conteúdo pode não ser visível ao usuário, mas é parte importante da interpretação do 
navegador.
• BODY – aqui estão todos os elementos visíveis da página e toda a estrutura da mesma.
Criando minha primeira página
Neste ponto, já sabemos com é formado um arquivo HTML, mas que tal criarmos nossa 
primeira página? Você deve estar se perguntando qual programa deve ser usado para isso, 
certo? A verdade é que a linguagem html é interpretada por um navegador e, diferente de 
outras linguagens como Java, por exemplo, ela não precisa de um software específico para 
gerar o resultado final apresentado ao usuário.
Por esse motivo, podemos escrever o nosso código em qualquer editor de texto simples, 
como o Bloco de Notas (presente em qualquer computador com sistema operacional windows) 
ou o Microsoft Word, por exemplo. 
Existem alguns softwares que são especializados na criação de sites, como o Microsoft 
Expression Web, ou o Adobe Dreamweaver. Estes apresentam uma interface mais completa, 
permitindo inclusive a criação por meio de um sistema de clicar e arrastar elementos.
Para o nosso curso, é importante conhecermos bem a linguagem, por isso estaremos livres de 
qualquer software pago, focando apenas na linguagem em si. Sendo assim, usaremos o software 
Bloco de Notas (notepad), mas nada o impede de conhecer e utilizar outro, de sua preferência.
Dica
Um bom editor de texto gratuito para programadores é o Notepad++, que pode ser encontrado 
em http://notepad-plus-plus.org/ Experimente-o e veja a facilidade de visualização do código por meio de 
esquemas de cores para cada tag.
Para construir nossa primeira página vamos abrir, então, o Bloco de Notas do Windows. 
Para isso, vá no menu Iniciar e selecione Todos os Programas (All Programs). Em seguida, 
selecione Acessórios (Accessories) e por fim Bloco de Notas (Notepad).
Com o software aberto, digite o código descrito a seguir:
14
Unidade: Introdução ao HTML
<html>
 <head>
 <title>Página teste</title>
 </head>
 <body>
 <p>Olá mundo!</p>
 </body>
</html>
Observando o trecho anterior, podemos perceber que os elementos head e body estão 
bem separados. No primeiro, temos um outro elemento chamado title que contém o título 
da página que aparece no nome da aba do navegador. No segundo, temos um parágrafo com 
uma frase simples.
Salve o seu arquivo no local de sua preferência com o seguite nome: 
exemplo1.html
Importante
Os nomes de seus arquivos devem sempre conter apenas letras e números, hífens ou 
sublinhados. É proibido o uso de caracteres especiais, como simbolos e acentos, pois 
navegadores antigos podem não validar a sua página. Não se esqueça, também, de verificar 
se a extensão do arquivo é html.
Abra a pasta onde você acabou de salvar seu arquivo e clique duas vezes sobre ele, para que 
seja aberto com o navegador padrão do seu sistema.
Figura 7 – Exemplo 1; a) Pasta que contém o arquivo exemplo1.html; b) Arquivo sendo editado no Bloco de Notas; c) Arquivo 
exemplo1.html aberto no navegador Google Chrome.
15
Faça o teste de abrir este mesmo arquivo com outro(s) navegador(es) que você tenha instalado 
no seu computador. Por padrão, o Windows tem o Internet Explorer e os computadores da 
Apple tem o Safari como navegador oficial. Verifique que sua página continua a mesma 
independentemente do navegador escolhido.
Resumindo
• Navegador – Software que apresenta uma página HTML.
• Serviddor – Computador conectado à internet que contém o site.
• Dispositivo – Aparelho utilizado para acessar a rede.
• HTML – Linguagem de marcação para estrutura da página.
• CSS – Linguagem de Posicionamento e Estilização dos elementos.
16
Unidade: Introdução ao HTML
Material Complementar
Como complemento aos nossos estudos, gostaria de sugerir alguns links interessantes:
• W3C – Site brasileiro do Consórcio World Wide Web
O Consórcio World Wide Web (W3C) é uma comunidade internacional que desenvolve 
padrões com o objetivo de garantir o crescimento da web. Missão do W3C: conduzir a Web a 
seu potencial máximo: http://www.w3c.br
• A Evolução da Web
Um site muito interessante com uma linha do tempo animada sobre a evolução da web:
http://evolutionofweb.appspot.com/
17
Referências
SILVA, M. S. Construindo Sites Com Css e (X) Html: Sites Controlados por Folhas de 
Estilo. Sao Paulo: Novatec, 2010.
IBGE, Pesquisas. Instituto Brasileiro de Geografia e Estatística. 2014. Disponível em: 
http://www.ibge.gov.br/home/estatistica/pesquisas/pesquisa_resultados.php?id_pesquisa=40
DUCKET, J. HTML & CSS design and build websites. Indianapolis: John Wiley & Sons, 2011.
18
Unidade: Introdução ao HTML
Anotações