html básico

Mini-Curso WebDesign IFPB 1

HTML BásicoHTML Básico

Introdução ao HTMLSamuel, Aleksandro e Alessandro

20/08


Preparação/Diretórios

Pasta : Mini-Curso

Pasta : Seu-Nome

Pasta : imagens

Arquivo : index.html

Browser : Visualizar

Backup : Pendrive

Arquivos : tarefa.html


Dicas de sinalização

Básica

Intermediárias

Avançadas

Tarefa1.html

Tarefa2.html

Tarefa3.html

Salve as Tarefas

Tarefas


Organograma do Site

index.html

trf1.html trf2.html trf3.html trf4.html trf5.html trf6.html

Não deixe de fazer as tarefaselas servirão como Conteúdo do seu site !


Criando Página

Abra o bloco de nota e digite.

Abra o Browser e visualize.

Tarefa 01


Cabeçalhos

Tarefa 02 A tag de cabeçalho colocam

uma quebra de linha onde são declarados.

Parágrafos

A tag ela quebra a linha.

Sintaxe ... 

Tarefa 03

Quebras de linha

A tag ela dar uma quebra de linha no local onde foi escrita.

Sintaxe 

Tarefa 04

Lista não Numerada

A tag <ul> ela cria uma estrutura de Tópicos não numerada.

Cada novo item é fornecido pelo Elemento <li > ... </li>

Tarefa 05

Lista Numerada

A tag <ol> cria uma estrutura de Tópicos numerada. Cada novo item é fornecido pelo

Elemento <li > ... </li>

Tarefa 06

Lista de Definição

A tag <dd> cria um espaçamento entre a margem e o inicio da frase “TAB”.

Tarefa 07

12

Lista Intercalada

Mini-Curso WebDesign IFPB

Contem os dois tipos de lista :Numerada e Não Numerada Tarefa 08

Texto pré-Formatado

O texto é

apresentado no navagador na formaEm que foi digitado no html.

Sintaxe <ol > ... </ol>

Tarefa 09

< / >

14

Formatando Textos


 NEGRITO <\b>

 ITÁLICO 

 SUBLINHADO 

 STRONG 

<big> BIG </big>

 SMALL 

 XSOBRESCRITO 

 XSUBSCRITO 

Tarefa 10

15

Uso de Cores <body>


Bgcolor=#rgbFundo da Página

text=#rgbCor do Texto

Tarefa 11

16

Imagem de Fundo <body>


< body background = “caminho/nome.extensão”>

Tarefa 12

17

Inserindo Imagem


< src=“caminho/nome.extensão” Width=tamanho Border= borda >

Tarefa 13

18Mini-Curso WebDesign IFPB



21/08


Alinhamento de parágrafos

Alinhamento de Textos em ralação às imagens;

Hiperlinks, Links e Âncoras

Linhas de Separação

Cores para Links

Sumário

Fontes

Tabelas

Textos que se movem

Frames

20

Alinhamento de Parágrafos


 Centro 

 Direita 

 Esquerda 

 Justificado 

Intermediárias 14

Teste todos os Alinhamentos no texto e na

Imagem ao lado !

MOSTRAR TAREFA 14

21

Alinhamento de texto em Relação às imagens


<img src=“img.ext” align=top> Texto no Topo 

< img src=“img.ext” align=midlle> Texto no meio 

< img src=“img.ext” align=bottom> Texto embaixo 

Insira a imagem “sala.jpg” e faça o exercício proposto: Alinhe a mensagem no topo, no meio e embaixo.

Intermediárias 15

Teste os Alinhamentos de Texto em Relação às imagens !

MOSTRAR TAREFA 15

22

Links Internos (Na página)


<a name = Nome_Ancora> </a>

<a href=#Nome_Ancora> texto </a>

Criando links internos

MOSTRAR TAREFA 16

Intermediárias 16

23

Links Locais (Nos Diretórios Locais)


<a href=“Arquivo.html”> texto </a>

Criando links internos

MOSTRAR TAREFA 17

Intermediárias 17

<a href=“tarefa17.html” >Voltar </a>

<a href="tarefa17_Links_Locais.html"><img src = "imagens/botao.png " alt="Voltar Para Menu"></a>

24

Links Externos (Na WEB)


<a href=“http://site.com.br”> Site </a>

Criando links Externos

MOSTRAR TAREFA 18

Intermediárias 18

25

Links Externos (Na WEB)


<a href=“mailto:ender@email”>email</a>


MOSTRAR TAREFA 19

Intermediárias 19

26Mini-Curso WebDesign IFPB



22/08

27

Frames / Criando o Topo


< hr size= “valor” Noshade width=“valor” align=opção>

Intermediárias 20


MOSTRAR TAREFA 20

28

Frames / Criando o Topo


29

Desafio !


30

Frames / Criando o Frame Principal


< hr size= “valor” Noshade width=“valor” align=opção>

Intermediárias 20


MOSTRAR TAREFA 20

html básico

Documents