Linguagem HTML Parte 1

Aulas sobre a linguagem HTML

Enviado por

Daniel Faria

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

46 visualizações31 páginas

Linguagem HTML Parte 1

Aulas sobre a linguagem HTML

Enviado por

Daniel Faria

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 31

Curso de Desenvolvimento de

Aplicações Web - Parte 1

Linguagem HTML
Daniel da Costa e Faria
Linguagem HTML
• Linguagem de Marcação de Hipertextos
• Documentos que possuem ligações (links) para outros
documentos.
• Atualmente na versão 5
• Estruturadas a partir de tags (<tag></tag>), que
definem os elementos presentes no documento.
• Tags principais: head,body,p,table,form,a,img,input
HTML as tags
• Tags são como contêiners, elas indicam qual é o tipo do conteúdo
entre suas tags de abertura e de início
• Tags HTML são iniciadas por < (menor que), seguidas pelo texto da
tag e terminadas em > (maior que).
• A maior parte das tags HTML possui uma tag idêntica, mas com a
barra invertida (/) na frente, indicando onde o bloco de conteúdo da
tag termina. Ex.: <p></p>,<a href=””></a>,<h1></h1>
Estrutura básica de uma página HTML
• Tudo começa em <!DOCTYPE html>, que diz ao navegador como ler a
página, no caso, como HTML versão 5.
• Em seguida a tag <html>, que marca o início do documento
• Depois de <html> vem a tag <head>, onde inserimos informações
sobre o site, como título, autor do site e assunto, e onde anexamos
arquivos de folhas de estilo CSS e Javascript
• Depois vem a tag <body>, que indica que seu conteúdo deve ser o
• Por último a tag </html>, que marca o fim do documento
Aqui informamos ao navegador que tipo de documento estamos criando
Início do documento
Começo do cabeçalho
Conjunto de carcateres da página. Em resumo, resolve
problema de acentos.

Fim do cabeçalho
Começo do corpo do documento

Fim do corpo do documento

Final do documento
Tags HTML e seus atributos
• Atributos são propriedades que usamos para adicionar
informações sobre uma tag
• Inserimos atributos nas tags digitando espaço, depois o
nome do atributo, seguido de igual (=) e por aspas duplas
(“ “). Dentro das aspas duplas digitamos o valor do atributo.
Por exemplo, para um link temos o seguinte
Tag Atributo Valor do atributo Tag de fim

<a href="http://www.olamundo.com.br">Site do Olá, Mundo</a>

Outros exemplos de atributos
<form action="processa.php"></form>

<link rel="stylesheet" href="estilos.css">

<video src="meu-video.mp4"></video>
Tags de conteúdo da HTML - Titulos
• HTML possui seis níveis de cabeçalhos
• São eles h1,h2,h3,h4,h5 e h6
• h1 é usado para o título principal
• h2 é utilizado para subtítulos
• Se o capítulo tiver mais sub-divisões, utiliza-se h3, e assim por diante.
• h1 apresenta o texto maior, enquanto h6 apresenta o menor
Tags de conteúdo da HTML - Parágrafos

• Inicados pela tag <p> e terminados pela tag </p>. Cada par dessas
tags representa um parágrafo do texto. Ex.:
<p>Júpiter é o maior planeta do sistema solar. Responde por mais de
70% da massa de todos os 8 planetas, com raio de 69.911 km.</p>
<p>O segundo em tamanho no Sistema Solar é Saturno, com raio de
58.232 km.</p>
Tags de conteúdo HTML : negrito, itálico,
subscrito e sobrescrito
• Para escrever textos em negrito inserimos o texto dentro das tags <b>
e </b>
• Textos entre <i> e </i> aparecerão em itálico
• Textos entre <sub> e </sub> aparecerão subscritos
• Textos entre <sup> e </sup> aparecerão sobescritos
Usando span
• Usamos a tag span quando queremos marcar uma parte do texto do
parágrafo.
• Sozinho ele não faz efeito nenhum, apenas quando associamos ele ao
CSS (folhas de estilo) para dar um destaque no meio da frase.
Este span vai aparecer diferente apenas
por que recebeu uma classe para CSS
No span que recebeu a classe destaque foi aplicado um código em CSS
para definir uma borda azul e um espaço interno (padding) para dar
uma folga entre a palavra e a borda.
O outro span que não recebeu nada (a palavra continente) não mostra
nenhuma mudança na tela
Listas
• HTML possui 3 tipos de listas: ordenadas, não ordenadas e listas de
definição
• Listas ordenadas possuem ordem nos elementos, por exemplo, abc,
123, i, ii,iii. O tipo de indicador da lista depende do atributo type.
• Uma lista criada com <ol type=”a”> mostrará marcadores em letras
mínusculas, já com <ol type=”A”> mostrará marcadores com letras
maíusculas
HTML : Listas
• As listas não-ordenadas não apresentam ordem de elementos,
apenas um marcador, que pode ser quadrado (square), circulo (circle,
apresenta um circulo branco com uma borda preta) ou disco(disc,
que é o padrão, uma bolinha preta em cada linha)
• Para definir o tipo de marcador, utilizamos o elemento type
HTML Listas de definição
• Listas de definição são usadas para inserir um termo acompanhado
do sua definição. Possui tres elementos: dl, dt e dd
• <dl> cria a lista
• <dt> contem o termo que queremos definir
• <dd> contem a definição do termo
HTML Inserindo mídia
• Podemos inserir imagens, áudio e vídeos em nossas páginas HTML
• Para inserir uma imagem, utilizamos o elemento img que possui o
atributo src (source, fonte da imagem) escrevendo da forma
• <img src=”endereco_da_imagem” alt=”Texto alternativo”>, onde
• img é a tag
• src é o endereço onde a imagem está salva
• alt=”Texto alternativo” é um texto que aparece na tela do usuário
caso o endereço em src estiver errado ou a imagem não esteja no
local indicado
Repare que a imagem do CSS não
aparece, pois o arquivo indicado no src
não existe. O que aparece é o texto do alt
HTML - Inserir áudio
• Para inserir música na página utilizamos a tag <audio> com o atributo
controls (adiciona os botões).
• Dentro da tag <audio> inserimos a tag source com atributo src
seguido de igual(=) e dentro das aspas duplas o local do arquivo de
música.
• Por uma questão de licença, cada navegador implementou um grupo
de tipos de áudio suportados.
• Tipos mais suportados: mp3, ogg e wav
• Dica: na tag audio se quiser que ele execute sozinho, adicione o
atributo autoplay. Se quiser que repita, adicione o atributo loop
Inserindo vídeos
• Para inserir vídeos temos a tag <video>, que é escrita quase igual à
tag <audio>
• Também possui o atributo controls e autoplay
• Também dentro dela inserimos a tag <source> com o atributo src, que
indica onde o video está salvo
• Para rodar, o formato do vídeo deve ser mp4 ou wbem
Exemplo de código
Resultado da tag <video>
Livros indicados