Professora Merris Mozer: Mestranda em Metodologias para o Ensino de Linguagens e Suas Tecnologias

PROFESSORA
MERRIS MOZER
Mestranda em Metodologias para o Ensino

de Linguagens e suas Tecnologias
INTRODUÇÃO AO DESENVOLVIMENTO
DE SISTEMAS WEB
Aula 1
HTML
INTRODUÇÃO
O que é HTML ?
INTRODUÇÃO
HTML ou Hypertext Markup Language

Linguagem de marcação de textos
Pode ser escrito em qualquer editor de texto.
É uma linguagem de marcação de hipertexto
e é usada para criar sites, e pode conter além
de textos, imagens, animações vídeos e sons.
TAG
A base de um documento HTML é um TAG.

“<“
“>”
Exemplo:
<html>
TAG - HTML
O TAG principal do documento HTML é:

<HTML>
Abrindo TAG: <HTML>
Fechando TAG: </HTML>

TAG – HEAD e BODY
Existem mais dois TAGs importantes que são:
TAG <head>
para cria o cabeçalho
TAG <body>
para criar o corpo do documento.
ESTRUTURA BÁSICA
DE UM DOCUMENTO HTML
<HTML>
<head>
</head>
<body>
</body>
</HTML>
RELEMBRANDO
USANDO O BLOCO DE NOTAS
Será utilizado o Bloco de Notas (NotePad),

encontrado no Windows, para começarmos
este estudo sobre HTML, assim possibilitará
de uma forma bem simples o entendimento
dos comandos básicos.
USANDO O BLOCO DE NOTAS
PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 2
Comandos de Formatação
(Parte 1)
QUEBRA DE LINHA
Quando necessitar somente de uma quebra

de linha sem dar espaço entre as linhas,
utilizar o TAG , por exemplo
para demonstrar tópicos.
O TAG não requer seu fechamento

como as demais.
PARÁGRAFO
Para que o documento tenha quebra

de linha ao final do parágrafo, ou seja,
que sejam separados utiliza-se o
TAG ......
CABEÇALHO
O TAG usado é denominado como <h1> conhecido

como header1. Pode-se utilizar h1, h2, h3, h4, h5,
h6.
A numeração que acompanha a letra "h" indica
o tamanho das fontes, a medida que o número
cresce o tamanho das letras diminuem.
Estes TAGs ficam definidos da seguinte forma:
<h1>.........</h1>
ATIVIDADE
PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 3
(Parte 2)
MELHORANDO A APARÊNCIA DO DOC
Para colocar a palavra em negrito "bold"

usamos o TAG desta forma tudo
que estiver entre o TAG ficará em negrito.
Quando desejar destacar um determinado texto
e formatá-lo para itálico, utiliza-se o TAG .
Exemplo:
 negrito 

 itálico 
 sublinhado 
 sobrescrito 
 subscrito 
ATIVIDADE !!
PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 4
(Parte 3)
<big> grande </big>

 pequeno 
<tt> ... </tt> - letras com o mesmo espaço (largura)
CONTINUAÇÃO DA ATIVIDADE !!
ALINHAMENTO
Todo cabeçalho/parágrafo poderá ser alinhado à:

Esquerda
Direita ou
Centralizado
Exemplo
DE: .................................
PARA:.........
……….
…………
ATIVIDADE !!!
PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 5
Trabalhando com cores

(Parte 1)
DEFININDO CORES
Trabalhar com cores é uma tarefa

muito fácil com HTML.
Pode ser utilizado o nome das cores
ou sua forma hexadecimal.
Definindo cores para:
plano de fundo
fontes
COR - PLANO DE FUNDO
Para alterar a cor de fundo

do documento será configurado
o parâmetro background no TAG "body“
Exemplo:
DE: <body>............................</body>
PARA: <body bgcolor=“red”>.........</body>
TAG BODY - COR DA FONTE
Para alterar a cor da fonte de todo

o TAG body utiliza-se o parâmetro “text”
Exemplo: text = “white”

<body bgcolor="silver“ text="white"
COR DA FONTE
TAG para alterar a cor das letras do texto

é a “”.
Esta TAG é uma das mais importantes
para a construção do documento HTML,
pois com ela é possível formatar
em uma única estrutura o tamanho
da letra, o tipo da letra e a cor
que se deseja atribuir para a fonte
ESTRUTURA DA TAG FONT

Size = n
Face = nome da fonte
Color = cor

PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 6
Trabalhando com cores

(Parte 2)
COR DA FONTE
PAINT E CALCULADORA
Atividade
Monte os códigos de cores:

PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 7
IMAGEM
IMAGEM
Comando básico para inclusão de imagens:

<img src="imagens/logo.jpg">
Alinhando a imagem:
<img src="imagens/logo.jpg">
<img src="imagens/logo.jpg">
IMAGEM
ABSOLUTO OU RELATIVO?
Valor ABSOLUTO:
<HTML>
<head>
<title>Tabelas</title>
</head>
<body>
<img src="imagens/ead1.jpg" width="200">
</body>
</HTML>
ABSOLUTO OU RELATIVO?
Valor RELATIVO:
<HTML>
<head>
<title>Tabelas</title>
</head>
<body>
<img src="imagens/ead1.jpg" width="20%">
</body>
</HTML>
PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 8
Link
Âncora para outra página
LINK
A internet é totalmente linkada, ou seja, quando o

usuário clicar em um determinado texto deverá
redirecionar para uma página.
Para isto é necessário criar uma âncora utilizando o
TAG <a></a> , assim:
<a href="www.xxxxxxxx.br"> ... </a>
Hypertext reference
a = anchor = âncora
LINK
Pode-se criar:
Uma âncora para outra página

por um texto ou por uma imagem.
PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 9
Link
Navegação dentro do mesmo documento
LINK
Existem links que navegam dentro do documento

principal, pois este pode ser extenso ou com muitos
títulos.
Para este tipo de programação será necessário criar
áreas dentro do texto principal, estas áreas servem
para mapear o documento. Assim, quando clicar no
tópico, o cursor será posicionado diretamente na área
correspondente.
LINK
Pode-se criar:
Navegação dentro do mesmo documento

PROFESSORA
MERRIS MOZER

DE SISTEMAS WEB
Aula 10
Áreas sensíveis - Quadrangular

ÁREAS SENSÍVEIS DA IMAGEM
ÁREAS SENSÍVEIS DA IMAGEM
Serão utilizadas imagens mapeadas.

Para o mapeamento é necessário criar um mapa e
definir a área sensível da imagem.
Criando o Mapa:
<map name=“img_ead”></map>
Em seguida criar a área sensível.
IMAGEM

Professora Merris Mozer: Mestranda em Metodologias para o Ensino de Linguagens e Suas Tecnologias

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Professora Merris Mozer: Mestranda em Metodologias para o Ensino de Linguagens e Suas Tecnologias

Enviado por

Direitos autorais:

Formatos disponíveis

PROFESSORA

Mestranda em Metodologias para o Ensino

HTML ou Hypertext Markup Language

A base de um documento HTML é um TAG.

O TAG principal do documento HTML é:

Abrindo TAG: <HTML>

Fechando TAG: </HTML>

Existem mais dois TAGs importantes que são:

Será utilizado o Bloco de Notas (NotePad),

Mestranda em Metodologias para o Ensino

Quando necessitar somente de uma quebra

O TAG <br> não requer seu fechamento

Para que o documento tenha quebra

O TAG usado é denominado como <h1> conhecido

Mestranda em Metodologias para o Ensino

Para colocar a palavra em negrito "bold"

<b> negrito </b>

Mestranda em Metodologias para o Ensino

<big> grande </big>

Todo cabeçalho/parágrafo poderá ser alinhado à:

Mestranda em Metodologias para o Ensino

Trabalhando com cores

Trabalhar com cores é uma tarefa

Para alterar a cor de fundo

Para alterar a cor da fonte de todo

Exemplo: text = “white”

TAG para alterar a cor das letras do texto

Mestranda em Metodologias para o Ensino

Trabalhando com cores

Monte os códigos de cores:

Mestranda em Metodologias para o Ensino

Comando básico para inclusão de imagens:

Mestranda em Metodologias para o Ensino

A internet é totalmente linkada, ou seja, quando o

Uma âncora para outra página

Mestranda em Metodologias para o Ensino

Existem links que navegam dentro do documento

Navegação dentro do mesmo documento

Mestranda em Metodologias para o Ensino

Áreas sensíveis - Quadrangular

Serão utilizadas imagens mapeadas.

Você também pode gostar