Material 2 - Tecnologias WEB

•

ESTÁCIO

0

Felipe Falcao

26/04/2015

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 45 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 45 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 45 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

5.996 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

INTRODUÇÃO AO HTML 
VISÃO GERAL 
 
A Web é baseada em 3 pilares: 
 
• Um esquema de nomes para localização de fontes de informação na Web, esse 
esquema chama-se URL. 
 
 
• Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. 
 
 
• Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de 
informação: o HTML. 
 DOM (Document Object Model) é uma 
multi-plataforma que representa como 
as marcações em HTML são organizadas 
e lidas pelo navegador que você usa. 
API (Application Programming Interface) tem 
como objetivo interligar diversas funções em 
um site (por exemplo, busca de imagens, 
notícias, artigos, etc.) de modo a possibilitar 
que possam ser utilizadas em outras 
aplicações. 
INICIANDO UMA PÁGINA HTML 
 
O corpo básico de uma página HTML, é composto pelas tags, 
<HTML></HTML> e <BODY></BODY>. 
 
 
 
Não há necessidade de as tags estarem em letra maiúscula, ou minúscula, 
porém organizar as tags, é mais fácil para a localização em um código. 
 
Aguns exemplos na escrita: 
 
<HTML> 
 <BODY> 
 </BODY> 
</HTML> 
 
<HTML> 
 <body> 
 </body> 
</HTML> 
 
<HtMl> 
 <bodY> 
 </BodY> 
</HTml> 
Mas, para manter a organização, recomenda-
se, uma “configuração” padrão. 
 
Por exemplo: 
<HTML> 
 <BODY> 
 </BODY> 
</HTML> 
Tags são rótulos usados para informar ao navegador como deve ser 
apresentado o website. 
PRIMEIROS PASSOS NO HTML 
 
Para se construir uma página HTML, é necessário primeiramente abrir um editor, pode ser 
utilizado o Bloco de Notas. 
Primeiramente, digita-se os comandos básicos. 
 
 <HTML> 
 <BODY> 
 </BODY> 
 </HTML> 
 
 
Para se colocar um título na página, é necessário digitar as tags <HEAD> e <TITLE>, que 
vai fora da tag <BODY>. 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 </BODY> 
</HTML> 
A página será exibida assim: 
Na tag body, pode ser adicionada as configurações padrões da página. 
 
Atributo “bgcolor” 
 
Serve para alterar a cor de fundo da página HTML. 
 
<BODY bgcolor=”#000055”> = Define a cor de fundo. 
 
No bloco de notas: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY bgcolor=”#000055”> 
 </BODY> 
</HTML> 
 
PRIMEIROS PASSOS NO HTML 
O atributo “bgbolor”, e a cor definida com ele pelo 
código, resultam no fundo azul da página. 
CORES 
 
Numa página HTML, as cores são fundamentais para decorar a página. 
 
No HTML, as cores podem ser nomeadas pelo nome (em Inglês), como white para branco, 
green, para verde, blue, para azul e assim por diante. Podem ser codificadas, por números 
decimais, como 255, 160, 200, ou números hexadecimais, como, FFAA00, na verdade os 
códigos são como uma misturas de cores RGB (Red – Vermelho, Green – Verde, Blue – 
Azul), então se o código decimal for “185 ,0 ,0”, por exemplo, é sinal de que a cor é 
vermelha, pois ele adicionou 185 ao vermelho, 0 ao verde e 0 também ao azul, se o código 
hexadecimal for 006600, deduz-se que a cor é verde, pois os dois primeiros números (que 
correspondem ao vermelho – RRGGBB), são 0, os dois números do meio, são 6 e os dois 
números finais são 0. 
PRIMEIROS PASSOS NO HTML 
CORES 
 
PRIMEIROS PASSOS NO HTML 
CORES 
 
PRIMEIROS PASSOS NO HTML 
CORES 
 
PRIMEIROS PASSOS NO HTML 
CORES 
 
PRIMEIROS PASSOS NO HTML 
Atributo “background” 
 
Serve para adicionar uma imagem como pano de fundo da página HTML. 
 
<BODY> background=”imagem_fundo.jpg”> = Define a imagem “Imagem_fundo.jpg”, 
como pano de fundo da página HTML. 
PRIMEIROS PASSOS NO HTML 
No bloco de notas: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY background="Paisagem.jpg"> 
 </BODY> 
</HTML> 
Pode acontecer que a imagem seja menor que 
o plano de fundo. Neste caso, ela a imagem 
irá se repetir quantas vezes forem preciso. 
TEXTOS 
 
Há vários tipos de forma de se fazer textos em páginas HTML. A mais simples delas é com 
a tag <Hx> (x, corresponde a um número de 1 a 6, sendo 1 o maior e 6 o menor). 
 
Por Exemplo: 
PRIMEIROS PASSOS NO HTML 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 <H1>Título 1</H1> 
 <H2>Título 2</H2> 
 <H3>Título 3</H3> 
 <H4>Título 4</H4> 
 <H5>Título 5</H5> 
 <H6>Título 6</H6> 
 </BODY> 
</HTML> 
Todos os tamanhos possíveis do “H” 
Pode-se também formatar o título (heading) usando a tag FONT. O alinhamento fica por 
conta do atributo align que pode ser left (esquerdo), center (centro), right (direito) e 
justify (justificado). No exemplo abaixo estão dois títulos (headings). O primeiro está 
Arial, 4, vermelho e o segundo Tahoma, 2, azul, centralizado. 
PRIMEIROS PASSOS NO HTML 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 <H1><FONT FACE="Arial" SIZE="4" COLOR="red">Título 1</FONT></H1> 
 <H2 ALIGN="center"><FONT FACE="Tahoma" SIZE="2" COLOR="blue">Título 2</FONT></H2> 
 </BODY> 
</HTML> 
Tela do navegador mostrando a variação do heading 
Atributo text 
 
Serve para definir a cor do texto padrão da página HTML. 
 
<BODY text=”YELLOW”> = Define a cor padrão de tudo aquilo que for escrito na página 
HTML como texto, sem configurações. 
PRIMEIROS PASSOS NO HTML 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#FFFF00"> 
 <H1>Título em amarelo</H1> 
 </BODY> 
</HTML> 
No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Parágrafos 
 
Observe que com o H, não é necessário que se mude de parágrafo, mas caso você prefira 
usar uma tag que não seja o H, ou não usar tags, é preciso que você use uma quebra de 
linhas, pois o HTML, não quebra de linha no mesmo momento que você digita a tecla 
“Enter”. Veja a figura 3.2. 
 
Por Exemplo: 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#003300"> 
 <H1>Observe que se eu não aciono nenhum comando para quebra de linha no HTML, ele não 
quebra de linha automaticamente, mesmo que eu parta a pala 
 vra ao meio</H1> 
 </BODY> 
</HTML> 
No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Parágrafos 
 
Para quebrar a linha, usa-se a tag <BR>, que simplesmente quebra a linha, ou a tag 
<P></P>, que cria um parágrafo. 
 
Por Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#003300"> 
 <H1>Se algum momento do texto eu quiser quebrar linha utilizo <br> 
 o comando "BR" para isso.</H1> 
 <P>Quando eu uso a tag "p"</P> 
 ele realiza o parágrafo logo após a determinação da tag "/p". 
 </BODY> 
</HTML> 
 
No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Parágrafos 
 
 A tag <P></P>, ainda serve para configurar páginas. 
 
Por Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#0000FF"> 
 <h1><p style="text-align:center"> 
 Alinha o texto escrito para o centro da página</P></h1> 
 </BODY> 
</HTML> 
 
No navegador aparece o seguinte: 
Os Alinhamentos podem ser: 
Comando Posição 
style="text-align:left” 
style="text-align:center” 
style="text-align:right” 
Atributo font 
 
Além de todos os atributos para se escrever textos no HTML, há o mais útil de todos,o atributo font. Nele pode conter a formatação de letra, tamanho e cor. 
 
Por Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#0000FF"> 
 <font color="#AA0000" face="arial" size="12">Onde Face é a letra, Size, é o 
 tamanho da letra e color é a cor da letra</font> 
 </BODY> 
</HTML> 
 
PRIMEIROS PASSOS NO HTML 
No navegador aparece o seguinte: 
Comentário 
 
Para se fazer um comentário em uma página HTML utiliza-se “<!-- --!>” . Com o objetivo 
de que o texto escrito não seja exibido na área gráfica, mas que seja somente 
informativo ao código com intuito de manter o entendimento e a organização do 
mesmo. 
 
Por Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Página vazia</TITLE> 
 </HEAD> 
 <BODY> 
 <!--Você adiciona esse comentário em qualquer parte do seu código, e 
 ele não será exibido na área gráfica --!> 
 </BODY> 
</HTML> 
PRIMEIROS PASSOS NO HTML 
No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Estilos de caracteres 
 
Você pode no HTML, formatar uma palavra, frase ou letra, como negrito, itálico, 
sublinhado, subscrito e sobrescrito. 
 
Para isso, usa-se os comandos: 
 
 
Formatação Comando 
 
Negrito <B></B> 
 
Itálico <I></I> 
 
Sublinhado <U></U> 
 
Subscrito <SUB></SUB> 
 
Sobrescrito <SUP></SUP> 
 
 
PRIMEIROS PASSOS NO HTML 
Estilos de caracteres 
Por Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#003300"> 
 Esse é o texto, e essa palavra está em <B>Negrito</B>, essa está em 
 <I>Itálico</I>, essa <U>sublinhada</U>, essa <SUB>subscrita</SUB>, 
 e essa SUP>sobrescrita</SUP> 
</HTML> No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Listas 
As listas são muito úteis pois servem para organizar assuntos em tópicos, números, ou 
menus. 
O exemplo de LISTA abaixo descreve a tag <OL>, no qual define uma lista numerada, e 
a tag <LI>, é a tag que define os itens da lista. 
 
Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#003300"> 
 <OL> 
 <LI>Introdução 
 <LI>Dedicatória 
 <LI>Capitulo 1 
 </OL> 
 </BODY> 
</HTML> 
No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Listas 
O exemplo de LISTA abaixo descreve a tag <UL> que tem como objetivo definir uma 
lista não-ordenada, ou seja, somente por tópicos 
 
Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#003300"> 
 <UL> 
 <LI>Introdução 
 <LI>Dedicatória 
 <LI>Capitulo 1 
 </UL> 
 </BODY> 
</HTML> 
No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Listas 
Nesta estrutura são utilizadas 3 tags: dl (definition list), dt (definition term) e dd 
(definition description). 
 
Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Primeira Página </TITLE> 
 </HEAD> 
 <BODY text="#003300"> 
 <DL> 
 <DT>Introdução</DT> 
 <DD>Aqui vai a introdução do 
 livro</DD> 
 <DT>Dedicatória</DT> 
 <DD>Aqui vai a dedicatória do 
 livro</DD> 
 </DL> 
 </BODY> 
</HTML> 
No navegador aparece o seguinte: 
Em uma página HTML, imagens são essenciais. Para inserir imagens, basta que ela seja 
de preferência GIF, ou JPG, não é obrigatório, mas recomenda-se o uso de imagens GIF, 
apenas para botões e ícones, pois ela possui uma definição de apenas 256 cores e o uso 
de imagens JPG, para a inserção de imagens fotográficas, pois ela possui uma definição 
de 16,7 milhões de cores. 
PRIMEIROS PASSOS NO HTML 
Imagens 
TAG img 
 
Na tag imagem, pode-se definir o tamanho, o alinhamento, a borda e outros. 
 
Exemplo: 
 
<img src=”foto.jpg”>, onde foto.jpg, é o nome da imagem. 
 
ou 
 
<img src=”c:\foto.jpg”>, onde “c:\” é a localização da imagem, e foto.jpg, é o 
nome da imagem. 
PRIMEIROS PASSOS NO HTML 
Imagens 
Exemplo 
 
<HTML> 
 <HEAD> 
 <TITLE>Inserindo imagens</TITLE> 
 </HEAD> 
 <BODY> 
 <p style="text-align:center"><FONT FACE="Tahoma" SIZE="20" COLOR="blue"> 
 Essa é a FOTO !!!</FONT></p> 
 <img src="foto.jpg"> 
 </BODY> 
</HTML> No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Imagens 
Para corrigir isso, há os atributos HEIGHT e WIDTH, que significam altura e largura 
respectivamente. 
 
Exemplo: 
<HTML> 
 <HEAD> 
 <TITLE>Redimensionando imagens</TITLE> 
 </HEAD> 
 <BODY> 
 <p style="text-align:center"><FONT FACE="Tahoma" SIZE="20" COLOR="blue"> 
 Essa é a FOTO !!!</FONT></p> 
 <img src="foto.jpg" height=150 width=150> 
 </BODY> 
</HTML> No navegador aparece o seguinte: 
PRIMEIROS PASSOS NO HTML 
Imagens 
Para o deslocamento da imagem na tela para direita, por exemplo, você pode utilizar o 
comando align. 
 
Exemplo: 
(Trocando a linha anterior...) 
<img src="foto.jpg" align=right width=“150" height=“150"> 
No navegador aparece o seguinte: 
É possível adicionar borda a imagem. 
 
Exemplo: 
(Trocando a linha anterior...) 
 
<img src="foto.jpg" align=left width=150 height=150 border=15> 
PRIMEIROS PASSOS NO HTML 
Imagens 
No navegador aparece o seguinte: 
Para fazer o deslocamento espacial da imagem em X e Y utiliza-se os atributos hspace 
(para horizontal) e vspace (para vertical) em pixels. 
 
Exemplo: 
 
<HTML> 
 <HEAD> 
 <TITLE>Deslocando a imagem em X e Y</TITLE> 
 </HEAD> 
 <BODY> 
 <p style="text-align:center"><FONT FACE="Tahoma" SIZE="20" 
 COLOR="blue"> Essa é a FOTO !!!</FONT></p> 
 <img src="foto.jpg" align=left width=200 height=200 hspace=510 vspace=20> 
 </BODY> 
</HTML> 
PRIMEIROS PASSOS NO HTML 
Imagens 
No navegador aparece o seguinte: 
CARREGANDO VÍDEOS NO HTML 
<html> 
<body> 
<embed src="music.mp4" width="320" 
 height="240" hspace="210"> 
<embed src="music.mp4" width="320" 
 height="240" hspace="710" 
 style="margin-top:20px; 
 margin-right:2px; 
 margin-bottom:3px; 
 margin-left:10px;"> 
</body> 
</html> 
	2 - Tecnologias WEB
	3 - Tecnologias WEB
	CARREGANDO VÍDEOS NO HTML
	CARREGANDO VÍDEOS NO HTML