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

INTRODUÇÃO AO DESENVOLVIMENTO 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

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:

MELHORANDO A APARÊNCIA DO DOC negrito itálico sublinhado sobrescrito subscrito

ATIVIDADE!!

MELHORANDO A APARÊNCIA DO DOC <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!!!

INTRODUÇÃO AO DESENVOLVIMENTO 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

INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 6 Trabalhando com cores (Parte 2)

COR DA FONTE

PAINT E CALCULADORA

Atividade Monte os códigos de cores:

INTRODUÇÃO AO DESENVOLVIMENTO 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>

INTRODUÇÃO AO DESENVOLVIMENTO 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.

INTRODUÇÃO AO DESENVOLVIMENTO 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

INTRODUÇÃO AO DESENVOLVIMENTO 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