PROF. FLÁVIO IZO Programação WEB AULA 03 ESTRUTURA HTML – PARTE I.

PROF. FLÁVIO IZOProgramação WEB

AULA 03 ESTRUTURA HTML – PARTE I

Objetivos da Aula

1.0 Ferramentas necessárias;

2.0 O que é HTML?

3.0 O que são tags HTML?

4.0 Criando seu primeiro Website;

5.0 Outras tags HTML;

6.0 Atributos das tags HTML;

7.0 Criando links;

8.0 Exercício;

Introdução

Criar um site não é tão difícil quanto parece;

É necessário ter disciplina e estar atento aos

conceitos abordados e suas formas de

aplicação;

1.0 Ferramentas Necessárias

Utilizaremos o notepad ou Notepad ++,

tendo em vista que é um programa

encontrado em qualquer equipamento;

O que almeja-se agora é simplicidade, pois se

aprendermos a criar um website (mesmo que

simples) no notepad, posteriormente poderar-

se-á utilizar qualquer outra ferramenta mais

robusta (Frontpage, Dreamweaver etc.);

1.0 Ferramentas Necessárias

Outros editores que podem ser utilizados são: Pico (Linux) ou TextEdit (Mac);

Outro programa que será necessário é o

browser;

Pode-se utilizar qualquer um: Firefox;

Internet Explorer;

Opera;

etc.

2.0 O que é HTML?

Língua mãe do navegador;

Inventado em 1990 por Tim Berners-Lee (troca

de informações);

HTML é uma linguagem que possibilita

apresentar informações na Internet;

Quando abre-se uma página na Internet, vê-se

a interpretação que seu navegador faz do

HTML;

2.0 O que é HTML?

Façamos um teste:

Acesse um site qualquer;

Clique com o botão direito;

E clique em “código fonte” ou “exibir código fonte”;

2.0 O que é HTML?

Existem diversas linguagens para construção

de Websites: PHP, ASP, Java, Coldfusion etc.

No entanto, o HTML é a base para todas, ou

seja, de nada adianta utilizar umas dessas

linguagens citadas se não conhecermos o

HTML;

2.0 O que é HTML?

HTML: HyperText Mark-up Language;

Hyper é o oposto de linear. Você pode ir de onde estiver

para onde quiser. Não é necessário que você tenha

visitado o site MSN.com antes de visitar o site HTML.net.

Text é texto e não há mais nada a acresentar.

Mark-up significa marcação e é o texto que você escreve.

Você cria a marcação da mesma forma que escreve em um

editor seus cabeçalhos, marcadores, negrito, etc

Language significa linguagem e é exatamente o que

HTML é; uma linguagem.


Tags são rótulos usados para informar ao navegador

como deve ser apresentado o website.

Todas as tags têm o mesmo formato: começam com

um sinal de menor "<" e acabam com um sinal de

maior ">".

Genericamente falando, existem dois tipos de tags -

tags de abertura: <comando> e tags de fechamento:

</comando>. A diferença entre elas é que na tag de

fechamento existe um barra "/".


Tudo que estiver contido entre uma tag de

abertura e uma tag de fechamento será

processado segundo o comando contido na tag.

Existe uma exceção: para algumas tags a abertura

e o fechamento se dá na mesma tag.

Tais tags contém comandos que não necessitam de

um conteúdo para serem processados, isto é, são

tags de comandos isolados, por exemplo, um pulo

de linha é conseguido com a tag <br /> ou régua

<hr />.


A seguir veremos alguns exemplos;

Para testar seus exemplos deve-se salvar o

arquivo (notepad) com a extensão .html

Posteriormente deve-se:

Abrir o Navagador;

Clicar em Arquivo (file) -> Abrir (open);

Procurar o arquivo e abrir;


Exemplos:

Criar um texto negrito com as tags <b> e </b>;

Criar um texto em itálico com as tags <i> e </i>;

Vamos colocar entre esses textos a tag <br />;

<b>Aqui tem um texto em

negrito</b><br />

<i>Aqui tem um texto em itálico</i>


As tags <h1>, <h2>, <h3>, <h4>, <h5> e

<h6> informam ao navegador que trata-se de

um cabeçalho (h vem de "heading" -

cabeçalho ). Sendo <h1> o cabeçalho maior e

o <h6> o cabeçalho menor;<h1>Aqui tem um texto em tamanho

grande</h1><br />

<h3>Aqui tem um texto em tamanho médio</h3><br />

<h6>Aqui tem um texto em tamanho pequeno</h6>


Lembre-se que por padrão escrevemos as

tags em minúsculo;

4.0 Criando seu primeiro Website

A estrutura HTML básica é composta das

seguintes tags:<html lang=“pt-br”>

<head>

<meta charset=“UTF-

8” />

</head>

<body>

</body>

</html>

• A tag <html> indica o início/fim

do conteúdo do site;

• A tag <head> indica o início/fim

do cabeça do site. Fornece

informações sobre o site. Ex.: Onde

fica o título da página;

• A tag <body> indica o início/fim

do corpo do site. Todo o conteúdo

do site fica entre essas tags.

Não esqueça de identar!


Agora vamos criar uma página:

Insira as tags básicas do HTML;

Insira o título “Minha primeira página na disciplina PW”

do site entre as tags <title> e </title>;

Insira o conteúdo “Você está acessando a página do

Fulano (colocar seu nome)” entre as tags <p> e </p>;

Salve a página (extensão .html)

Abra a página pelo navegador web (vimos

anteriormente);


Resultado:

Agora, teste no navegador!

<html lang=“pt-br”>

<head> <meta charset=“utf-8” /> <title>Minha primeira página web na disciplina PW</title> </head>

<body> <p>Você está acessando a página do Flávio!</p> </body>

</html>


Faça esse outro exemplo (Observe o que

acontece):

Agora, teste no navegador!

<html lang=“pt-br”><head> <meta charset=“UTF-8” /> <title>Meu website</title></head>

<body> <h1>Um cabeçalho</h1> <p>texto, texto texto, texto</p> <h2>Subtítulo</h2> <p>texto2, texto2 texto2, texto2</p> </body> </html>

5.0 Outras tags HTML

<i>texto itálico</i>

<b> texto em negrito </b>

<b><i>texto itálico e negrito </i></b>

<br /> // quebra de linha

<hr /> // insere uma régua horizontal

<ul> // início da Unordered List

<li>Um item de lista</li> // item

<li>Outro item de lista</li> // item

</ul>

• Item da lista • Outro item da lista

5.0 Outras tags HTML

<ol> // início da Ordered List

<li>Um item de lista</li> // item

<li>Outro item de lista</li> // item

</ol>

<blockquote>Indentação</blockquote>

1. Primeiro item da lista 2. Segundo item da lista

6.0 Atributos das tags HTML

Os atributos auxiliam às tags para que elas

sejam personalizadas de acordo com a

necessidade do desenvolvedor;

Pode-se alterar cor, fundo, tipo de objeto etc.


Exemplos em Listas Desordenadas:


Exemplos em Listas Ordenadas:


Utilize a disciplina Aplicativos Gráficos para

aprender CSS e utilizer na programação web;


Tabela de cores:

Em hexadecimal

O Uso Cores em Interfaces com o Usuário

7.0 Criando links

Criar um link é muito simples, basta utilizar a

tag <a>texto com link</a>;

É necessário também utilizar o atributo

“href” que conterá o endereço onde o usuário

será remetido ao clicar no link;<a href="http://www.globo.com">Aqui tem um link para o site Globo.com</a>

<a href="pagina2.htm">Aqui um link para a pagina 2</a>

<a href=“subdiretorio/pagina2.htm">Aqui tem um link para a página 2</a>

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

7.0 Criando links

Pode-se criar links internos, dentro da própria

página - por exemplo, uma tabela de conteúdos

ou índice com links para cada um dos capítulos

em uma página. Tudo o que você precisa é usar

o atributo id e o símbolo "#".

Use o atributo id para marcar uma área de link;

E chame o link:

<h1 id="heading1">Cabeçalho 1</h1>

<a href="#heading1">Link para o cabeçalho 1</a>

7.0 Criando links

Vejamos o exemplo:<html lang=“pt-br”> <head> ... </head>

<body> <p><a href="#heading1">Link para cabeçalho 1</a></p> <p><a href="#heading2">Link para cabeçalho 2</a></p>

<h1 id="heading1">Cabeçalho 1</h1> <p>Texto texto texto texto</p> <h1 id="heading2">Cabeçalho 2</h1> <p>Texto texto texto texto</p></body></html>

7.0 Criando links

Link para e-mail, ou seja, ao clicar será

aberta a tela do programa de correio

eletrônico;

Adicionando outros atributos:

<a href="mailto:[email protected]">E-mail para Flávio</a>

<a href="pagina2.html" title="Essa é a página 2">Link para a página 2</a>

7.0 Criando links

Atributo “target”:

O atributo “target” possibilita abrir ó link de diversas

formas:

Abrir na mesma página, usa-se target=“_self”;

Abrir em uma nova página, usa-se target=“_blank”;

“_parent” e “_top” são muito utilizados quando utilizamos

frames, por isso não iremos abordar seu estudo neste

momento;

<a href=“pagina2.html“ target=“_self”>Link para a página 2</a>

<a href=“pagina2.html“ target=“_blank”>Link para a página 2</a>

8.0 Exercícios de fixação

Faça a lista01.pdf

Dúvidas!

[email protected]

FLÁVIO IZO

PROF. FLÁVIO IZO Programação WEB AULA 03 ESTRUTURA HTML – PARTE I.

Documents

Transcript of PROF. FLÁVIO IZO Programação WEB AULA 03 ESTRUTURA HTML – PARTE I.