Download - Html básico
Mini-Curso WebDesign IFPB 1
HTML BásicoHTML Básico
Introdução ao HTMLSamuel, Aleksandro e Alessandro
20/08
Mini-Curso WebDesign IFPB 2
Preparação/Diretórios
Pasta : Mini-Curso
Pasta : Seu-Nome
Pasta : imagens
Arquivo : index.html
Browser : Visualizar
Backup : Pendrive
Arquivos : tarefa.html
Mini-Curso WebDesign IFPB 3
Dicas de sinalização
Básica
Intermediárias
Avançadas
Tarefa1.html
Tarefa2.html
Tarefa3.html
Salve as Tarefas
Tarefas
Mini-Curso WebDesign IFPB 4
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 !
Mini-Curso WebDesign IFPB 5
Criando Página
Abra o bloco de nota e digite.
Abra o Browser e visualize.
Tarefa 01
Mini-Curso WebDesign IFPB 6
Cabeçalhos
Tarefa 02 A tag de cabeçalho colocam
uma quebra de linha onde são declarados.
Mini-Curso WebDesign IFPB 7
Parágrafos
A tag <p> ela quebra a linha.
Sintaxe <p> ... </p>
Tarefa 03
Mini-Curso WebDesign IFPB 8
Quebras de linha
A tag <br> ela dar uma quebra de linha no local onde foi escrita.
Sintaxe <br >
Tarefa 04
Mini-Curso WebDesign IFPB 9
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
Mini-Curso WebDesign IFPB 10
Lista Numerada
A tag <ol> cria uma estrutura de Tópicos numerada. Cada novo item é fornecido pelo
Elemento <li > ... </li>
Tarefa 06
Mini-Curso WebDesign IFPB 11
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
Mini-Curso WebDesign IFPB 13
Texto pré-Formatado
O texto é
apresentado no navagador na formaEm que foi digitado no html.
Sintaxe <ol > ... </ol>
Tarefa 09
< / >
14
Formatando Textos
Mini-Curso WebDesign IFPB
<b> NEGRITO <\b>
<i> ITÁLICO </i>
<u> SUBLINHADO </u>
<strong> STRONG </strong>
<big> BIG </big>
<small> SMALL </small>
<sup> XSOBRESCRITO </sup>
<sub> XSUBSCRITO </sub>
Tarefa 10
15
Uso de Cores <body>
Mini-Curso WebDesign IFPB
Bgcolor=#rgbFundo da Página
text=#rgbCor do Texto
Tarefa 11
16
Imagem de Fundo <body>
Mini-Curso WebDesign IFPB
< body background = “caminho/nome.extensão”>
Tarefa 12
17
Inserindo Imagem
Mini-Curso WebDesign IFPB
< src=“caminho/nome.extensão” Width=tamanho Border= borda >
Tarefa 13
18Mini-Curso WebDesign IFPB
HTML BásicoHTML Básico
Introdução ao HTMLSamuel, Aleksandro e Alessandro
21/08
Mini-Curso WebDesign IFPB 19
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
Mini-Curso WebDesign IFPB
<p align=center> Centro </p>
<p align=right> Direita </p>
<p align=left> Esquerda </p>
<p align=justify> Justificado </p>
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
Mini-Curso WebDesign IFPB
<img src=“img.ext” align=top> Texto no Topo </p>
< img src=“img.ext” align=midlle> Texto no meio </p>
< img src=“img.ext” align=bottom> Texto embaixo </p>
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)
Mini-Curso WebDesign IFPB
<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)
Mini-Curso WebDesign IFPB
<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)
Mini-Curso WebDesign IFPB
<a href=“http://site.com.br”> Site </a>
Criando links Externos
MOSTRAR TAREFA 18
Intermediárias 18
25
Links Externos (Na WEB)
Mini-Curso WebDesign IFPB
<a href=“mailto:ender@email”>email</a>
Criando links Externos
MOSTRAR TAREFA 19
Intermediárias 19
26Mini-Curso WebDesign IFPB
HTML BásicoHTML Básico
Introdução ao HTMLSamuel, Aleksandro e Alessandro
22/08
27
Frames / Criando o Topo
Mini-Curso WebDesign IFPB
< hr size= “valor” Noshade width=“valor” align=opção>
Intermediárias 20
Criando links Externos
MOSTRAR TAREFA 20
28
Frames / Criando o Topo
Mini-Curso WebDesign IFPB
29
Desafio !
Mini-Curso WebDesign IFPB
30
Frames / Criando o Frame Principal
Mini-Curso WebDesign IFPB
< hr size= “valor” Noshade width=“valor” align=opção>
Intermediárias 20
Criando links Externos
MOSTRAR TAREFA 20