PW 02 noções básicas html parte 1 tags fonte cor imagens

(1)

Instituto Federal de Educação, Ciência e Tecnologia

Introdução ao HTML

Prof. Henrique Neto

Técnico em

Computação Gráfica

Campus Avançado de Jaguaruana

(2)

AGENDA

 O que é HTML?

– _{Visão Geral;}

– _{Tags, atributos e valores;}

 Aplicações de Tags:

– _{Fonte e Texto;}

(3)

O que é HTML?

 O HTML é uma linguagem de marcação de hipertextos;

 Ele tem como objetivo ajudar na definição da estrutura de

documentos na web;

 Os documentos disponíveis na Internet, independente da

temática que abordem (notícias, entretenimento,

ciência, comércio, etc) são estruturados através do

(4)

O que é HTML?

 É uma linguagem composta por TAGs:

– _{Rótulos ou elementos entre parênteses angulares (}_<>_); – Ex: <body>, <head>, <html>, <b>, …

– _{Não são case-sensitive (}_<body>_!=_<BODY>_);

 As tags de marcação indicam para o navegador web como

mostrar a página;

 A extensão de um arquivo HTML pode ser htm ou html;

 Um arquivo HTML pode ser criado usando um editor de texto

(5)

O que é HTML?



Cada TAG é composta por:

– Comandos/Tag:

• Define um elemento da página web;

– Atributos:

• Personaliza um determinado comando;

– Valores:

(6)

O que é HTML?



Podemos verificar TAGs:

<

tag

> … <

/tag

>

<

tag

>

<

tag

atributo1=valor1 atributo2=valor2

...> … <

/tag

>

Tag de início e fechamento, respectivamente.

Atributo

(7)

O que é HTML?

 Exemplo de TAG:

<b>

Olá!

</b>

O meu nome é Carlos.

Olá! O meu nome é Carlos.

Comando para deixar um texto em negrito

Tag de início e fechamento, respectivamente.

(8)

O que é HTML?

 Exemplo de TAG:

<hr

color=

”red”

/>

______________________

hr: Elemento para desenhar uma linha vermelha

color:

atributo que define a cor da linha

red:

valor do atributo color, que especifica a cor

da linha a ser desenhada.

Tag para criar uma linha

vermelha

(9)

Estrutura de um documento HTML

 A construção de um documento HTML inicia-se pela

definição do layout básico deste;

 Inciado e fechado pelas TAGs <html> e </html>;

 Formado por dois componentes principais:

– _{Head: <head></head>}

• Conjunto de dados gerais sobre a página; – _{Body: <body></body>}

(10)

(11)

Estrutura de um documento HTML

 Vamos começar ??? Abram ...

– Bloco de Notas (Windows); – Gedit (Linux);

– Ferramentas Online:

• https://html5-editor.net/

(12)

Meu primeiro HTML (arquivo.html)

<html>

<head>

<title>

Minha Página

</title>

<meta

name=”autor”

content=”Bruno”

/>

</head>

<body

bgcolor=”yellow”

>

Essa é a minha primeira página!

</body>

</html>

(13)

(14)

Estrutura de um documento HTML

 Entendo o código em arquivo.html;

– As tags <html> e </html> dizem ao browser onde começa e onde termina o código HTML;

– As tags <head> e </head> não produzem informações visuais e são utilizadas como uma seção de configuração;

• Comandos que devem ser lidos antes de carregar a página; • OPCIONAL;

– As tags <title> e </title> definem qual é o título da página;

• O título pode ser visto no canto superior esquerdo do seu browser;

(15)

Estrutura de um documento HTML

 Entendo o código em arquivo.html;

– _{A tag}_{<meta name=”description” ...>}_contem

detalhes que podem ser úteis para os motores de

busca;

• Eles podem usar o conteúdo dessa tag para fornecer uma descrição da página quando está é aprensenta;

– _{As tags}_<body>_e_</body>_{definem o conteúdo da} página que será apresentado no browser;

(16)

Meu primeiro HTML (arquivo.html)

(17)

Estrutura de um documento HTML

 Um exemplo comum de acontecer:

– Ao invés de exibir Canção, ele exibe: • Can��o ou CanÃ§Ã£o.

 Isso está ligado ao padrão de codificação de exibição que o

o browser utiliza e o editor HTML utiliza; – ISO-8859-1 ou UTF-8

 Se Can��o, seu browser está na codificação ISO-8859-1 e o

editor utiliza codificação UTF-8;

 Se CanÃ§Ã£o. O browser está na codificação UTF-8 e o editor

(18)

Estrutura de um documento HTML

 Para ISO-8859-1:  Para UTF-8: <html> <head> …

... </head> . . . </html> <html> <head> …

...

</head> . . .

(19)

Estrutura de um documento HTML

 Outra Maneira:

– _{No editor HTML utilizado, salve o arquivo com a}

codificação correta;

– _{Se o navegador usa ISO-8859-1, salve o arquivo}

com tal codificação;

– _{Se o navegador usa UTF-8, salve o arquivo com tal}

(20)

Elementos que não são interpretados

 Algumas ações podem ser ignoradas pelo browser:

<html>

<head>

<title> Observe </title>

Olá Turma!

Abaixo vou elencar algumas coisas que vocês precisam estudar: Conceitos de Web

Por hoje é isso <abraco> um abração a todos </abraco> </body>

(21)

AGENDA

 O que é HTML?

– _{Visão Geral;}

– _{Tags, atributos e valores;}

 Aplicações de Tags:

– _{Fonte e Texto;}

(22)

Tags básicas para formatação de Fonte e Texto

 Novo Parágrafo:

– _{Inicia um novo parágrafo inserindo uma linha em}

branco entre o novo parágrafo e o anterior;

 Parágrafo alinhado à esquerda, à direita e no centro:

<p>

Novo Parágrafo

</p>

<p

align=

”left”

>

Novo Parágrafo

</p>

<p

align=

”right”

>

Novo Parágrafo

</p>

<p

align=

”center”

>

Novo Parágrafo

</p>

(23)

Tags básicas para formatação de Fonte e Texto

 Texto em Negrito, itálico e sublinhado:

 Exemplo:

<b>

Texto

</b>

<! Negrito>

<i>

Texto

</i>

<! Itálico>

<u>

Texto

</u>

<! Sublinhado>

<p>

Esse é

<u>

apenas

</u>

um

<i>

simples

</i>

(24)

Tags básicas para formatação de Fonte e Texto

 Texto Riscado:

 Texto centralizado:

 Quebra de linha:

– Esta tag faz com que o texto seguinte mude para a linha subsequente;

<s>

Texto

</s>

<center>

Texto

</center>

</br>

<! quebra de linha>

(25)

Praticando com HTML ...

(26)

Tags básicas para formatação de Fonte e Texto

 Alterar fonte do texto:

 Alterar a cor do texto:

 Alterar o tamanho do texto:

<font

face=”Arial”

>

Texto com fonte Arial

</font>

<font

color=”red”

>

Texto com fonte Arial

</font>

<font

size=”2”

>

Texto com fonte Arial

</font>

(27)

Tags básicas para formatação de Fonte e Texto

<font

face=”Arial”

>

Texto com fonte Arial

</font>

<font

color=”red”

>

Texto com fonte Arial

</font>

<font

size=”2”

>

Texto com fonte Arial

</font>

Arial Black Impact Comic Sans MS Verdana Courier

(28)

Tags básicas para formatação de Fonte e Texto

<font

face=”Arial”

>

Texto com fonte Arial

</font>

<font

color=”red”

>

Texto com fonte Arial

</font>

<font

size=”2”

>

Texto com fonte Arial

</font>

blue green orange yellow black white white

(29)

Tags básicas para formatação de Fonte e Texto

 Cabeçalhos:

– _{Normalmente usados para identificar páginas e}

seções;

– _{Possuem aparência diferenciada do restante do}

texto;

– _{Possui seis níveis;}

<h1> Título de nível 1 </h1> <h2> Título de nível 2 </h2> <h3> Título de nível 3 </h3> <h4> Título de nível 4 </h4> <h5> Título de nível 5 </h5> <h6> Título de nível 6 </h6>

(30)

Tags básicas para formatação de Fonte e Texto

(31)

Praticando com HTML ...

(32)

Praticando com HTML ...

 Crie o HTML que representa a seguinte página:

Sugestão:

Fonte: Arial Black

Fonte: Comic Sans MS

(33)

AGENDA

 O que é HTML? – _{Visão Geral;} – _{Atributos de Tabelas;}  Aplicações de Tags: – _{Fonte e Texto;}

(34)

Imagens de Fundo e Cores de Fundo

 Cor de Fundo:

– Deve-se usar o atributo bgcolor dentro da tag body;

– Pode-se usar valores em hexadecimal para representar uma cor:

• #0000FF

• #00FF00

• #FFFF00

• #FF0000

(35)

Imagens de Fundo e Cores de Fundo

(36)

Imagens de Fundo e Cores de Fundo

(37)

Imagens de Fundo e Cores de Fundo

(38)

Imagens de Fundo e Cores de Fundo

 Outras opções de cores podem ser encontradas:

– _{http://www.flextool.com.br/tabela_cores.html}

– _{https://www.w3schools.com/cssref/css_colors.as}

(39)

Imagens de Fundo e Cores de Fundo

 Imagem de Fundo:

– _{Deve-se usar o atributo background dentro da tag} body;

– _{O endereço “fotos/imagem.jpg” representa onde a} imagem está salva;

• Nesse caso,trata-se de uma URL relativa;

• Ela aponta para o diretório fotos que contem o arquivo imagem.jpg;

(40)

Imagens de Fundo e Cores de Fundo

 Imagem de Fundo:

– _{É possível usar uma URL que aponte para um site}

que ontenha alguma imagem;

– _{Nesse caso, utiliza-se uma URL absoluta;}

(41)

Praticando com HTML ...

 Mude a cor de fundo da página abaixo. A cor é de sua

preferência. Sugestão: escolha cores que combinem com os parágrafos.

(42)

Praticando com HTML ...

Sugestão de Cor:

(43)

Praticando com HTML ...

Sugestão de Cor:

(44)

Praticando com HTML ...

 Mude a imagem de fundo da página abaixo. A imagem é de sua

(45)

Praticando com HTML ...

Sugestão:

(46)

Praticando com HTML ...

Sugestão:

(47)

Praticando com HTML ...

Sugestão:

(48)

Inserindo Imagens

 Para atribuir uma imagem deve-se utilizar a seguinte tag:

– _{O atributo src especifica a URL do arquivo da}

imagem.

(49)

Definindo

Altura e

Altura

Largura de uma Imagem

Largura

 É possível definir a largura de uma imagem usando-se o

atributo <width> e para altura o <height>;

 Os valores desses atributos podem ser definidos em pixels

ou em porcentagem;

(50)

Definindo uma

BORDA para Imagem

BORDA

 Pode-se utilizar o atributo border, que possui valores

numéricos;

<img

src=”imagem.jpg” border=5

>

(51)

Definindo o

Alinhamento da Imagem

Alinhamento

 Pode-se alinhar a imagem para um determinado ponto da

tela;

 Pode-se ter o seguintes tipos de alinhamento:

– _top;

– _middle;

– _bottom;

– _left;

(52)

Definindo o

Alinhamento da Imagem

Alinhamento

 Alinhamento TOP:

– _{Alinha o texto no começo (topo) da imagem ;}

<img

src=”imagem.jpg” align=top

>

(53)

Definindo o

Alinhamento da Imagem

Alinhamento

 Alinhamento MIDDLE:

– _{Alinha o texto no meio da imagem ;}

<img

src=”imagem.jpg” align=middle

>

(54)

Definindo o

Alinhamento da Imagem

Alinhamento

 Alinhamento BOTTOM:

– _{Alinha o texto na parte inferior da imagem ;}

<img

src=”imagem.jpg” align=bottom

>

(55)

Definindo o

Alinhamento da Imagem

Alinhamento

 Os valores TOP, MIDDLE e BOTTOM, servem mais para

colocar títulos em imagens;

 Quando se coloca uma quebra de linha <br> ou

parágrafo <p>, o texto na sequência é escrito depois da imagem;

<img

src=”imagem.jpg” align=top

>

(56)

Definindo o

Alinhamento da Imagem

Alinhamento

 Alinhamento LEFT:

– _{Todo o texto é alinhado a direita da imagem.}_<br>_e <p> podem ser usados sem que o texto seja