programação web - htmlsauloifmg.com.br/disciplinas/web/aula1.pdf · • a única linguagem que o...
TRANSCRIPT
Programação Web - HTML
Professor: Saulo Henrique Cabral Silva
Instituto Federal de Minas GeraisCampus Ponte Nova
HTML
• Início em 1980, Tim Bernes-Lee– Implementado Pascal.
• 1989, o CERN investiu esforços e a primeira requisição HTPPem um servidor através da internet foi realizada.
• 1990, o CERN controlava e revisava todos os padrões doHTML.– Após 1995 a W3C, é quem regula a linguagem.
– W3CWorld Wide Web Consortium
2
HTML
• A única linguagem que o navegador consegue interpretar(“entender”) para a exibição é o HTML.
• Ou seja: “Quem dita o que vemos (conteúdo) em uma páginaé o HTML”.
3
Testando…
Loja do Seu José
Bem vindo ao armazém do Seu José, o melhor depósito debugigangas da região...
Confira as promoções
Veja o nosso catálogo de Produtos
• Para testar, faça o seguinte:– copie o texto em qualquer editor de texto de sua máquina (eu
recomendo o brackets);
– salve-o com o nome de index e com extensão .html
– Abra o arquivo em um navegador a sua escolha
5
index.html
Abra em um navegador a sua escolha
Comentário sobre o resultado do nossoteste
• Conseguimos exibir o nosso texto
• Para que a informação seja mostrada para o usuário de umaforma “mais elegante”, precisamos seguir algumas regras– No HTML marcamos o texto para que assim o navegador saiba
representar cada informação.
• Alguns outros problemas que precisam ser tratados:– Exibição de quebra de linha
– Caracteres especiais (acentuados)
– ...
6
Marcações ou tags
• HyperText Markup Language
• Para exibir informações da forma desejada (com suasrespectivas formatações) é necessário adicionar asmarcações.
• Marcações indicam qual o significado daquele texto.
• Influenciam a maneira com que
cada trecho será exibido.
7
Teste 2 – usando algumas marcações
<!DOCTYPE html><html>
<head><title>Loja do Seu José</title><meta charset="utf-8">
</head>
<body><h1>Loja do Seu José.</h1><h2>Armazém do Seu José, o melhor depósito de bugigangas </h2><ul>
<li>Confira as promoções</li><li>Veja o nosso catálogo de Produtos</li>
</ul></body>
</html>
8
Comentários do segungo Teste
• O resultado é exibido de maneira muito mais agradável elegível.
• Apenas adicionamos as marcações.
• Apesar de estarem corretamente marcadas, as informaçõesnão apresentam nenhum atrativo estético.– Grande deficiência do HTML (Científico).
– Resolveremos o problema com o uso do CSS.
9
Sintaxe do HTML
• O HTML é um conjunto de tags responsáveis pela marcaçãodo conteúdo de uma página no navegador.
• As tags são definidas segundo a sintaxe: <nomeDaTag>
• Diversas tags são disponibilizadas
pelo HTML, cada uma com sua
funcionalidade específica.
11
TAGS
A instrução DOCTYPE
• DOCTYPE não é uma tag HTML, ela é uma instrução queindica para o navegador qual a versão do HTML deve serutilizada para renderizar a página.
• Ao utilizar o <!DOCTYPE html>, indica para o navegador autilização mais recente do HTML (versão 5 atualmente).
• <!DOCTYPE html>
13
Estrutura de um documento HTML
• Um documento HTML precisa seguir obrigatoriamente aseguinte estrutura composta pelas tags:– <html>
– <head>
– <body>
– Instrução <!DOCTYPE html>
14
A tag <html>
• Primeira tag inserida em um documento HTML.
• Dentro dessa tag é necessário declarar outras duas tags:– <head>
– <body>
• A tag <head> e <body>, podem ser
consideradas “irmãs”, pois estão no
mesmo nível hierárquico da tag “pai”.
15
Tag <head>
• A tag <head> possui informações que dizem respeito apenasao navegador.– O usuário não visualiza tais informações.
– Serão informações exibidas apenas na área do documento donavegador.
• Para a tag <head>, é obrigatório especificar o título do
documento a ser criado. <title>– Essa informação será exibida na barra de título da
janela do navegador ou na aba do documento.
16
Tag <head>
• Outra configuração utilizada, principalmente em documentoscujo conteúdo é escrito em um idioma como o português é ochamado encoding ou charset.– Acessíveis pela tag <meta>
– Um dos charset’s mais comuns é o UTF-8 (Unicode)
– latin1 (muito usado antigamente)
– <meta charset= “utf-8”>
• A recomendação atual é o UTF-8, amplamente suportado emnavegadores e compatível com
praticamente todos os idiomas
do mundo.
17
Nossa Tag <head>
<html>
<head>
<title> Loja do seu José</title>
<meta charset = “utf-8”>
<meta http-equiv="refresh" content="5">
</head>
<body>
<!--Aqui vem o conteúdo do corpo da página -->
</body>
</html>
18
namecontent
meta
Tag <body>
• A tag <body> contém tudo que será de certa forma exibido najanela do navegador do usuário.
• É necessário que o <body> tenha pelo menos um “filho” (pelo menos uma tag).
<body>
<h1>Indica o título</h1>
</body>
19
TAGS HTML
• Já vimos que o HTML é um compilado de diversas tags cada umacom sua função.
• O HTML5, adicionou novas tags.– https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list
• Por hora vamos trabalhar com as tags de:
– Títulos;
– Parágrafos;
– Ênfase.
– Listas
20
Títulos
• Tags referentes a títulos são conhecidas como heading…
• As tags de heading são tags de conteúdo e vão de <h1> a <h6>– Segue se a ordem de importância (<h1> é o título principal)
– <h6> menor importância
• A ordem de importância, além de influenciar no tamanhopadrão de exibição do texto, tem impacto nas ferramentas de desenvolvimento que veremos adiante.– Google, Bing ou Yahoo! Levam em consideração essa ordem.
21
Parágrafos
• Quando exibimos qualquer texto em nossa página, érecomendado que ele seja sempre conteúdo de alguma tagfilha da <body>.– A marcação mais indicada para textos comuns é a tag parágrafo.
– <p> Seu José o maior comerciante de Ponte Nova</p>
– Para vários parágrafos use várias tags
<p> Alguma coisa de Seu José </p>
<p> Alguma coisa da História de Seu José</p>
<p> Algum comentário sobre os produtos de Seu José</p>
22
<p> </p>
<body> </body><br> quebra de linha
Tags de ênfase
• Para dar uma ênfase diferente a um trecho de texto,utilizamos as tags de ênfase.– <strong>, deixa um texto mais forte (negrito) [<b>]
– <em>, em itálico [<i>]
– <small>, diminui o tamanho
• Testando no contexto de Seu José...
<!-- Essa é uma boa hora para falarmos comentários --><p> Algum <strong> comentário </strong> sobre os produtos de Seu José</p>
23
Link’s <a>
• Link, define uma ligação, um elo, uma conexão.
• Link– Uma página
– Uma imagem
– Email (mailto:email@email?Subject=)
– Endereço FTP
– Arquivos em geral (endereço e download = ?)
– Botões
<a href=“endereço” download=“nomeArquivo.ext”>Texto Visível </a>
24
A estrutura dos aquivos de um projeto
• Um site é um conjunto de página web sobre um determinadoassunto, empresa, produto ou qualquer outra coisa.
• É comum que todos os arquivos de um site estejam dentro de umasó pasta.– Pode haver dezenas de páginas
– Assim como um livro, precisamos de um índice para auxiliar na navegaçãodessas páginas.
• O index por convenção já é adotado pelos
servidores, como a página inicial de todo site
(a não ser que seja configurada outra página para
iniciar) index.html
25
Exercício
• Crie a primeira página do seu Site.– Pense em algumas informações iniciais (parágrafos)
– Apresentação
– Vantagens dos seu negócio
– Planos
– Localização
27