Aula 3 - WEB CODING

Profa. Me. Layane Araújo

introdução ao
HTML
 HTML
Hyper Text Markup Language
Linguagem de Marcação de Hipertexto
NA PRÁTICA
ESTRUTURA
BÁSICA
Elementos de citação
<abbr> </abbr>
para textos de abreviação.

<address> <address>
deixa o endereço destacado e faz
o sistema reconhecer o
endereço.
<cite> </cite> destaca citação
dentro do texto.

<q> </q> citação de fala.

<blockquote> </blockquote>
destaca um trecho do texto.
Organizando o código:
Tag de comentário: <!-- -->
Links
Link externo ou link absoluto
<a href=“https://google.com”> Ir para o google </a>

<a href=“https://google.com” target=“_blank”> Ir para o google </a>

Links interno ou link relativo

<a href=“novapagina.html”> Página 2 </a>

<a href=“Pasta/novapagina.html”> Página 3 </a>

<a href=“../index.html”> Página 3 </a>

IMAGENS

A tag img não tem fechamento

Caminho absoluto

Atributos de tamanho
O atributo alt é utilizado para descrever o conteúdo
da imagem. Utilizado também por pessoas com problemas visuais
que possuem dispositivos sonoros de descrição do que está na
tela. Permite a inclusão de pessoas com deficiência visual.
Sites de bancos de imagens gratuitos:
Tag para utilizarmos imagens localizadas no
computador

<img scr=“pasta/imagem.jpg”>

Caminho relativo -
dentro da pasta de seu projeto.

Caso a sua imagem seja muito grande você pode comprimir o tamanho da sua imagem.
Para um carregamento mais rápido da sua página e melhor experiência de navegação do
usuário, é importante que você trabalhe com imagens leves.
Alguns sites:
Criando suas próprias imagens
Formato PNG
Diferença JPG e PNG
Imagens em formato Gif

Ícones
Site para buscar ícones:
Mapeamento de imagem

Tag map

atributo
Image map generator
Quando a própria imagem é um link
TABELAS

Tag table = tabela Tag tr = linhas

Tag th = colunas Tag td = dados
Atributo de tamanho e atributo de borda. Atributo CSS para alinhar o texto.
Exercício de fixação:
Faça uma tabela contendo os dados:

4 colunas (cômodos da casa):

Sala / Cozinha/ Quarto/ Banheiro

5 linhas (cinco utensílios domésticos encontrados em cada um dos cômodos)

Listas
Iframes
Atributos: target e name
 Dados de entrada
FORMULÁRIOS Interação - entre usuário e o back-end.

Tag Form:
Tag Input
Não tem fechamento
Atributo required
Ou um ou outro
Exercício de fixação:
Elabore um formulário simples do tipo
cadastro de aluno, para uma escola.
Use sua criatividade.
Para consultar as tags