Tec. de Internet - 2

Fundamentos de
HTML
O que é HTML?
O Hypertext Markup Language (HTML) é uma linguagem de
formatação e não de programação.
Essa linguagem tem a função de enviar para o navegador
(Internet Explorer, Firefox, Chrome, etc.), informações
que definem de que maneira textos, imagens e outros itens
deverão aparecer na tela.
Essas informações são chamadas tags (etiquetas) e estão
inseridas nos documentos originais (documento-fonte) que
criaram as páginas.
Tags básicos
<html></html>,<head></head>,<title></title>,<body>
</body>.
O que é HTML5?
Evolução de HTML4 e DOM nível 2.
Remoção ou redefinição de tag de apresentação.
APis de nível fundamental formalizados
A evolução do navegador em uma plataforma de
programação.
HTML5 Suporte do Browser
HTML5 vs HTML4
HTML4 DOCTYPE
HTML5 vs HTML4
Especificação do html5 é menor
HTML 5 DOCTYPE
HTML 5 Codificação de caracteres
Introdução a HTML
Para que possamos criar arquivos HTML é necessária a
utilização de um editor de texto.
Editor de texto Notepad++

Notepad++ é um editor de código livre que substitui-o
Notepad. Ele funciona em ambiente Windows e suporta
várias linguagens de programação.
Faz download do Notepad++ no site abaixo.
http://notepad-plus.sourceforge.net/br/site.htm
Notepad++ logo
Marcadores - HTML
São comandos da linguagem HTML que permitem a
formatação do texto.
Bgcolor – Aplica cor de fundo a uma determinada

seção, pode ser definida por uma constante (nome em
ingles da cor) ou um numero hexadecimal
correspondentes.
Relação de cores e números hexadecimais
Tabelas
É por meio de tabelas que imagens e textos são
posicionados dentro da página.
A tabela é uma ferramenta importante para definir
onde as informações , imagens, etc serão organizadas, o
conteudo de cada celula pode ter textos, imagens e ate
mesmo outra tabela.
A tabela e definida pelo tag <table>
Atributos da Tabela
Border – Cofigura os limites (“border”) da tabela,
pode ser definido de seguinte forma: border = “n” , em
que n define a espessura do borda.
Align – Define o alinhamento horizontal do conteudo

dentro da tabela. Os valores determinados para
alinhamento sao: left, center, right.
Valign – define o alinhamento vertical do conteudo

dentro da tabela. Os valore definidos sao: top ,
Middle, Bottom.
Imagens em HTML
As imagens utilizadas na página da web são, em sua
maioria, nos formatos GIF, JPEG ou PNG, sendo GIF e
JPEG os mais comuns.
É importante que o tamanho da imagem esteja entre

15KB e 80KB, pois imagens muito grandes demoram
mais para carregar.
Caso a imagem não esteja em nenhum desses formatos,
é necessário convertê-la com a ajuda de software, como
CorelDRAW ou GIMP e outros...
Atributos ALT e ALIGN
Atributos são características de determinados tags; a
maior parte dos tags do HTML possui atributos.
Sons e Videos
Para inserir video ou som é utilizado o marcador
<EMBED>, É preciso especificar o nome do arquivo por
meio do atributo SRC.
O vídeo possui também outros atributos que podem
alterar o modo de visualização;
Exemplo de atributos que podem alterar o
modo de visualização
Loop: ajustado com o valor TRUE, o vídeo é configurado para
tocar indefinidamente; isso quer dizer, enquanto você acessar
a página, o vídeo passá sem que o usuário tenha a opção de
pará-lo.
Controller: permite mostrar ou não o controle do vídeo.
- False: não mostra o controle. – True: mostra o controle.
Autoplay: permite executar o vídeo, automaticamente, após
ser carregado.
- False: não executa o vídeo. True: executa o video.
Width e Height: define a área de apresentação do vídeo.

Atributos width e height
Esses atributos permitem alterar as dimensões da imagem,
independentemente do seu tamnho real,
Width= “n” – n é o número que determina a largura

da figura, definido em pixels ou em porcentagem.
Heigth= “n” – n é o número que determina a altura da

figura, definido em pixels ou em porcentagem.
Atributo background
É o atributo usado em HTML para inserir imagens de
segundo plano; se esse atributo estiver inserido no tag
<td>, a imagem de segundo plano será inserida
na célula.
Quando o atributo for inserido na tag <table>, a
imagem será inserida na tabela e,
 quando estiver contido na tag <body>, a imagem será
inserida na página como um todo.
Exemplo:
Background= “[caminho][nome da figura]”
Formatação de textos
Para formatar o texto HTML, usamos algumas tags
importantes;
elas nos ajudarão a definir tipo de fonte, tamanho,
cor,, e outros.
O tag <font>: é usado para definir qual o tipo de fonte o
browser irá usar.
Este tag tem os atributos size, color e face, que
definem o tamanho da fonte, cor e a fonte que será
utilizada, respectivamente.
links
links são maneiras como podem ser criadas ligações
entre dois ou mais documentos HTML.

O tag responsável pela criação vínculos ou link é <a>.
Como Planejar ou criar o seu Site?
Projetar um site devemos levar em consideracao os
seguintes pontos:
- Por que estou a criar esse site? O que eu quero que as
pessoas façam ou saibam após visitarem meu site?
- Qual será seu público e o que incluir no site,
- Como apresentar essa informação no site.
- É fundamental identificar o principal objetivo do site e
depois manter essa meta em mente enquanto o
projeta.
NB:Quanto mais complexo é o site, mais tempo e
dinheiro ele consome em sua manutenção.
Escolha o tipo de site que deseja desenvolver.
() Site pessoal
() Site corporativo
() Site institucional
() Site profissional
() Site comercial

Exercicio
Crie um esboço do teu site.
The end

Tec. de Internet - 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tec. de Internet - 2

Enviado por

Direitos autorais:

Formatos disponíveis

Fundamentos de

Remoção ou redefinição de tag de apresentação.

APis de nível fundamental formalizados

A evolução do navegador em uma plataforma de

Editor de texto Notepad++

Bgcolor – Aplica cor de fundo a uma determinada

Align – Define o alinhamento horizontal do conteudo

Valign – define o alinhamento vertical do conteudo

É importante que o tamanho da imagem esteja entre

Width e Height: define a área de apresentação do vídeo.

Width= “n” – n é o número que determina a largura

Heigth= “n” – n é o número que determina a altura da

entre dois ou mais documentos HTML.

() Site pessoal

() Site corporativo

() Site institucional

() Site profissional

() Site comercial

Você também pode gostar