Embed Size (px)
Citation preview
Desenvolvimento de SiteAula 07
Washington Silva
• O que é HTML• O que são TAGS• Visualizando o documento em HTML• Principais TAGS• Formatação
Sumário
O que é HTML?• HTML – é uma linguagem de marcação de
hipertexto.• H - Hyper• T – Text• M - Markup• L – Language
• HTML pode ser feito em qualquer editor de texto, até mesmo o simples Bloco de Notas:
• Clique em:• Botão Iniciar > Executar > NotePad
TAGS• Tag é uma palavra-chave (comando) que define
um item (imagens, texto, hyperLink, etc.) que irá fazer parte da página
• Lembrando que a grande maioria trabalha em pares.
As tags são identificadas por estarem entre os sinais < > e < />
Tags
•<Comando> Seu Texto
</Comando>
Tags - Principais
<HTML> </HTML>Marca o início e o fim do documento
<HEAD> </HEAD>Marca o início e o fim do Cabeçalho
<TITLE> </TITLE>Mostra o título na barra de título
<BODY> </BODY>Determina o que vai ser o “corpo” do programa.
Tags – Na prática• <HTML> • <HEAD> • <TITLE> Minha primeira Aula de HTML• </TITLE>• </HEAD>• <BODY> • Bom dia a todos, quem esta com sono
levanta a mão ..• </BODY>• </HTML>
Tags – Na prática
Tags – Na prática
Tags – Na prática• <HTML> • <HEAD> • <TITLE> Minha primeira Página </TITLE>• </HEAD>
Tags – Na prática• <BODY> • Sejam bem vindo ao mundo HTML!• </BODY>• </HTML>
Tags - Principais• <BODY>
<H1> Cabeçalho de tamanho 1 </H1> <H2> Cabeçalho de tamanho 2 </H2> <H3> Cabeçalho de tamanho 3 </H3> <H6> Cabeçalho de tamanho 6</H6></BODY>
• <H1>• Cabeçalho de tamanho 1• <H2>• Cabeçalho de tamanho 2• <H3>• Cabeçalho de tamanho 3• <H6>• Cabeçalho de tamanho 6
TAG – Parágrafo <P>
• <HTML> • <HEAD> • <TITLE> Minha primeira Página HEHEHE </TITLE>• </HEAD>• <BODY> • Sejam bem vindo ao mundo HTML, <P>agora
viajaremos • <P>no html<P>!!!!!• </BODY>• </HTML>
TAG – Parágrafo <P>
TAG - QUEBRA DE LINHA <BR>
• O comando <br> faz uma quebra de linha. Este comando também insere uma linha em branco no seu local ou na linha seguinte á qual ele foi inserido
TAG - QUEBRA DE LINHA <BR>• <HTML>• <HEAD>• <TITLE> Minha primeira página HTML </TITLE>• </HEAD>• <BODY>• Quando um comando <BR> é inserido em um
local do programa, o browser irá<BR> fazer uma quebra de linha, <BR> posiciona-se na linha seguinte ao comando.<BR>
• </BODY>• </HTML>
TAG - QUEBRA DE LINHA <BR>
Formatação Sintaxe Função
NEGRITO <b>texto</b> Aplica o estilo negrito
ITÁLICO <I>texto</I> Aplica o estilo itálico
SUBLINHADO
<u>texto</u> Aplica um sublinhado
SMALL <small>texto</small>
Reduz e altera a fonte
BIG <big>texto</big> Aumenta a fonte e aplica negrito
Cor da fonte <font color=?></font>
Altera a cor da fonte
Formatação
TEXTO
<b></b> Texto negrito.
<i></i> Texto em itálico.
<tt></tt> Texto estilo máquina de escrever, mono espaçamento.
<font size=?></font> Tamanho das letras.
<font color=?></font> Cor das letras.
Atividades• Faça os exemplos
Atividade
• Faça conforme o texto abaixo siga as orientações cor sublinhado itálico
Atividade 2• Realizar uma pesquisa sobre css • Sua pesquisa deve contes os seguintes tópicos • O que é css• Quando surgiu css• Importância em utilizar css• Quais as diferenças entre HTML e o CSS
