Programação Web - HTMLsauloifmg.com.br/Disciplinas/Web/Aula1.pdf · • A única linguagem que o navegador consegue interpretar ... • O HTML é um conjunto de tags responsáveis

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

Recomendação de editores e ambientes

4

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 HTML

10

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

ESTRUTURA BÁSICA

12

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>



</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

https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list



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é...

<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

mailto:email@email?Subject=



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

A estrutura dos aquivos de um projeto

root (aplicação)

CSS

img

js

index.html

sobre.html

26

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

Documents

Programação Web - HTMLsauloifmg.com.br/Disciplinas/Web/Aula1.pdf · • A única linguagem que o navegador consegue interpretar ... • O HTML é um conjunto de tags responsáveis