Ppt web.pptx 11 e 12

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


Ambiente Web

O QUE É HTML? HTML – é uma linguagem de marcação de

hipertexto. H - Hyper T – Text M - Markup L – Language


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


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 < />


Ambiente Web

TAGS

• <Comando> Seu Texto </Comando>


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.


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>


Ambiente Web

TAGS – NA PRÁTICA


Ambiente Web

TAGS – NA PRÁTICA

<HTML> <HEAD> <TITLE> Minha primeira Página </TITLE> </HEAD>


Ambiente Web

TAGS – NA PRÁTICA <BODY> Sejam bem vindo ao mundo HTML! </BODY> </HTML>


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>


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


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>


Ambiente Web

TAG – PARÁGRAFO <P>


Ambiente Web


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


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>


Ambiente Web

TAG - QUEBRA DE LINHA <BR>


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


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

Ppt web.pptx 11 e 12

Documents

Transcript of Ppt web.pptx 11 e 12