PáginasWeb com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira
& Profª. Alessandra Aparecida da Silva
Programação para Web
Você sabe a diferença entre páginas estáticas e páginas dinâmicas?
–Estáticas  sem interação com o u...
HTML
Conhecendo a estrutura de páginas de Internet.
O que vem a ser HTML?
HiperText Markup Language  Linguagem de marcaçã...
AWeb está estruturada em dois princípios
básicos: HTTP e HTML
•HTTP HiperTextTransfer Protocol
•HTML  HiperText Markup L...
Requisitos para o desenvolvimento de uma
páginaWEB
• Conhecer a linguagem HTML para escrever o código fonte de sua página;...
Tags
• Os comandos HTML são chamados deTAGs, compreendem de marcas padrões
que são utilizadas para fazer indicações a um b...
Exemplos
Tag único:
• <br>
Tag duplo:
• <center> abc </center>
Iniciando um documento
Todo documento HTML fica contido entre osTAGs: <HTML> e </HTML>.
Uma página HTML possui três partes...
Uma página Web possui uma estrutura dividida
em 4TAGs básicas:
<HTML> ...</HTML>
<HEAD> ...</HEAD>
<TITLE> ...</TITLE>
<BO...
<HTML> ...</HTML>
• São usados para delimitar os comandos HTML, indicam o início e o fim de
um documento
São usados para delimitar os comandos HTML,
indicam o início e o fim de um documento
• Usado para indicar parâmetros de co...
<TITLE> ...</TITLE>
• Indica o título do documento para o browser. EstaTAG deve estar sempre
dentro dasTAGs <HEAD> </HEAD>.
<BODY> ...</BODY>
Envolvem a seção do corpo do documento.Aqui fica o conteúdo principal da
Home Page.
Opcionalmente podemo...
Mão na massa!
1.Crie uma pasta
2.Abra o Notepad ++ e crie arquivo com o nome
index.html
3.Digite o código abaixo:
<html>
<...
Mão na massa!
Agora substitua o código anterior pelo exemplo
abaixo:
<html>
<head>
<title> Paginas web – HTML </title>
</h...
Trabalhando com textos
• No corpo do documento é onde estará localizado o título e subtítulos, texto,
imagens, ligações co...
Títulos e Subtítulos
Para demarcar títulos e subtítulos, use asTAGs de HEADER (H1 até H6)
Exemplo:
<html>
<head>
<title> P...
Estilos deTexto
• <B> Negrito </B>
• <I> Itálico</I>
• <U> Sublinhado</U>
• <SUP> Sobrescrito</SUP>
• <SUB> Subscrito</SUB>
<p>
A tag responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e insere automaticamente uma linha embran...
Exemplo<html>
<head>
<title> Paginas web – HTML </title>
</head>
<body>
<B> Estilo negrito</B>
<I> Estilo itálico</I>
<U> ...
Trabalhando com Fonte
Para inserir em sua página u texto com fontes de tamanhos, cores e tipos diferentes
utilizamos aTAG ...
Size, Face e Color
• Size =“n”: n varia de 1 a 7 e 3 é o valor padrão da maioria dos navegadores;
• Face =“nome”: nome da ...
Exemplo
<html>
<Head>
<Title>Trabalhando com fonte</Title>
</Head>
<Font size=“1” face=“Tahoma” color=“red”>Texto com cor ...
Próximos SlideShares
Carregando em…5
×

02 html - fontes e estilos

609 visualizações

Publicada em

HTML - trabalhando com fontes e estilos

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
609
No SlideShare
0
A partir de incorporações
0
Número de incorporações
376
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

02 html - fontes e estilos

  1. 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
  2. 2. Programação para Web Você sabe a diferença entre páginas estáticas e páginas dinâmicas? –Estáticas  sem interação com o usuário –Dinâmicas  com interação com o usuário Hoje em dia é comum as páginas aparecerem com a data e hora atualizadas automaticamente, com um cumprimento ao usuário, com tela de cadastro, login... É isso que as aulas de PI vem proporcionar: criação de páginas estruturadas com HTML, programação nas páginas PHP, alguns eventos com JavaScript e Banco de dados com MySQL.
  3. 3. HTML Conhecendo a estrutura de páginas de Internet. O que vem a ser HTML? HiperText Markup Language  Linguagem de marcação de páginas de hipertexto, ou seja, é a linguagem na qual são escritas as páginas da web, interpretadas pelo navegador.
  4. 4. AWeb está estruturada em dois princípios básicos: HTTP e HTML •HTTP HiperTextTransfer Protocol •HTML  HiperText Markup Language HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que permite a navegação na web, com o simples clicar do mouse sobre o texto ( ou imagem) que esteja associado a outro link.
  5. 5. Requisitos para o desenvolvimento de uma páginaWEB • Conhecer a linguagem HTML para escrever o código fonte de sua página; • Editor de texto para gerar o seu código fonte (Bloco de notas, Front Page, Dreamweaver, entre outros); • Um navegador de internet (browser) para visualizar as suas páginas (internet Explorer, Netscape, etc)
  6. 6. Tags • Os comandos HTML são chamados deTAGs, compreendem de marcas padrões que são utilizadas para fazer indicações a um browser. • Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem algumas regras: –As tags aparecem sempre entre sinais de “menor que” (<) e “maior que”(>); –Geralmente são utilizadas aos pares, sendo que aTAG de finalização de um comando qualquer é finalizada com a procedência de uma barra (/).
  7. 7. Exemplos Tag único: • <br> Tag duplo: • <center> abc </center>
  8. 8. Iniciando um documento Todo documento HTML fica contido entre osTAGs: <HTML> e </HTML>. Uma página HTML possui três partes básicas: • estrutura principal • um cabeçalho • e um corpo de página.
  9. 9. Uma página Web possui uma estrutura dividida em 4TAGs básicas: <HTML> ...</HTML> <HEAD> ...</HEAD> <TITLE> ...</TITLE> <BODY> ...</BODY>
  10. 10. <HTML> ...</HTML> • São usados para delimitar os comandos HTML, indicam o início e o fim de um documento
  11. 11. São usados para delimitar os comandos HTML, indicam o início e o fim de um documento • Usado para indicar parâmetros de configuração do documento, também utilizado para exibir o título na barra de títulos do browser.
  12. 12. <TITLE> ...</TITLE> • Indica o título do documento para o browser. EstaTAG deve estar sempre dentro dasTAGs <HEAD> </HEAD>.
  13. 13. <BODY> ...</BODY> Envolvem a seção do corpo do documento.Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar uma cor para o fundo da página, usando a opção BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opção BACKGROUNG.
  14. 14. Mão na massa! 1.Crie uma pasta 2.Abra o Notepad ++ e crie arquivo com o nome index.html 3.Digite o código abaixo: <html> <head> <title> PáginasWeb - HTML</title> </head> <body bgcolor=“green”> Corpo da página HTML com cor de fundo. </body> </html> • Veja como fica no navegador.
  15. 15. Mão na massa! Agora substitua o código anterior pelo exemplo abaixo: <html> <head> <title> Paginas web – HTML </title> </head> <body background="fundo.jpg"> Corpo da página HTML com imagem de fundo. </body> </html> Obs. Copie um arquivo com o nome fundo.jpg para a mesma pasta da página salva. • Salve e veja este arquivo no navegador
  16. 16. Trabalhando com textos • No corpo do documento é onde estará localizado o título e subtítulos, texto, imagens, ligações com outras páginas, etc.
  17. 17. Títulos e Subtítulos Para demarcar títulos e subtítulos, use asTAGs de HEADER (H1 até H6) Exemplo: <html> <head> <title> Paginas web – HTML </title> </head> <body> <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><Center>Título de nível 6 Centralizado </Center></H6> </body> </html> Salve e veja este arquivo no navegador
  18. 18. Estilos deTexto • <B> Negrito </B> • <I> Itálico</I> • <U> Sublinhado</U> • <SUP> Sobrescrito</SUP> • <SUB> Subscrito</SUB>
  19. 19. <p> A tag responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e insere automaticamente uma linha embranco entre os parágrafos. Exemplo: <P align=“posição”> texto do parágrafo. Posição pode ser: Left : Alinhamento à esquerda. Center: Centralizado Right: Alinhamento à direita Justify: Alinhamento justificado
  20. 20. Exemplo<html> <head> <title> Paginas web – HTML </title> </head> <body> <B> Estilo negrito</B> <I> Estilo itálico</I> <U> Estilo sublinhado </U> <SUP> Estilo sobrescrito</SUP> <SUB> Estilo subscrito </SUB> <P align=“Center”> Este é um exemplo do primeiro parágrafo centralizado. <P> Este é um exemplo do segundo parágrafo. </body> </html> Salve e veja este arquivo no navegador
  21. 21. Trabalhando com Fonte Para inserir em sua página u texto com fontes de tamanhos, cores e tipos diferentes utilizamos aTAG <Font> ... </Font> Sintaxe do comando: <Font size=“n” face=“nome” color=“cor”> Texto </Font>
  22. 22. Size, Face e Color • Size =“n”: n varia de 1 a 7 e 3 é o valor padrão da maioria dos navegadores; • Face =“nome”: nome da fonte a ser utilizada (Arial,Tahoma, etc.); • Color=“cor”: cor da fonte definida em hexadecimal, ou através de um nome pré-definido de cores.
  23. 23. Exemplo <html> <Head> <Title>Trabalhando com fonte</Title> </Head> <Font size=“1” face=“Tahoma” color=“red”>Texto com cor vemelha. </Font> <br> <br> <Font size=“2” face=“Arial” color=“green”>Texto com cor verde. </Font> <br> <br> <Font size=“3” face=“Tahoma” color=“#FF00FF”> Texto com cor magenta. </Font> <br> <br> </body> </html> Veja como fica no navegador 

×