Post on 28-Jun-2015
Aula: Data:
Turma:
Ambiente Web
Washington Silva
Professor:
06 13/04/2023
Ambiente Web
Instrutor: Washington Silva
Ambiente Web
O que é HTML O que são TAGS Visualizando o documento em HTML Principais TAGS Formatação
Sumário
Instrutor: Washington Silva
Ambiente Web
O QUE É HTML? HTML – é uma linguagem de marcação de
hipertexto. H - Hyper T – Text M - Markup L – Language
Instrutor: Washington Silva
Ambiente Web
HTML pode ser feito em qualquer editor de texto, até mesmo o simples Bloco de Notas:
Clique em: Botão Iniciar > Executar > NotePad
Instrutor: Washington Silva
Ambiente Web
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 < />
Instrutor: Washington Silva
Ambiente Web
TAGS
• <Comando> Seu Texto </Comando>
Instrutor: Washington Silva
Ambiente Web
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.
Instrutor: Washington Silva
Ambiente Web
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>
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA
<HTML> <HEAD> <TITLE> Minha primeira Página </TITLE> </HEAD>
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA <BODY> Sejam bem vindo ao mundo HTML! </BODY> </HTML>
Instrutor: Washington Silva
Ambiente Web
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>
Instrutor: Washington Silva
Ambiente Web
• <H1>• Cabeçalho de tamanho 1• <H2>• Cabeçalho de tamanho 2• <H3>• Cabeçalho de tamanho 3• <H6>• Cabeçalho de tamanho 6
Instrutor: Washington Silva
Ambiente Web
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>
Instrutor: Washington Silva
Ambiente Web
TAG – PARÁGRAFO <P>
Instrutor: Washington Silva
Ambiente Web
Instrutor: Washington Silva
Ambiente WebTAG - 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
Instrutor: Washington Silva
Ambiente Web
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>
Instrutor: Washington Silva
Ambiente Web
TAG - QUEBRA DE LINHA <BR>
Instrutor: Washington Silva
Ambiente Web
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
Instrutor: Washington Silva
Ambiente Web
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.
Mais algumas tags
FORMATAÇÃO
ATRIBUTOS DO CORPO
<body bgcolor=?> Cor de fundo.
<body text=?> Cor de texto.
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.
GRAFISMO
<img src=“imagem.jpg"> Insere uma imagem.
<img src=“imagem.jpg“ align=?>
Alinha uma imagem em relação ao resto do texto.
<img src=“imagem.jpg“ border=?> Define a borda da imagem.
<img src=“ imagen" width=“ %">
Define o tamanho da exibição da Imagem.
Formatação
Vamos montar uma nova pagina Inserir texto fomatar cor, fonte, tamanho da
fonte Inserir 15 imagens Inserir 10 gif animadosNão quero que reste nenhuma duvida sobre
inserir imagem na pagina de vcs .....
EXERCÍCIO
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
VAMOS AO LABORATÓRIO