FAQs World Wide Web TAGs
Inform´
atica B´
asica
HTML (Aula 1)
Leonardo Medeiros
Instituto Federal de Alagoas
18 de Outubro de 2010
Leonardo IFAL
Roteiro
1 FAQs
2 World Wide Web
Exercitar
3 TAGs
FAQs World Wide Web TAGs
Estrutura da Internet
A estrutura da Internet ´e particularmente interessante. Formada por uma grande rede de computadores, procura interligar diversos computadores ao redor do mundo – os chamados “Servidores”.
Leonardo IFAL
O que ´e um servidor
Um computador, em uma rede local, onde s˜ao processados os software administrativos que controlam o acesso `a rede e seus recursos (como unidades de disco e impressoras). O computador que funciona como servidor coloca seus recursos `a disposi¸c˜ao dos computadores que funcionam como esta¸c˜oes de trabalhos da rede.
FAQs World Wide Web TAGs
O que ´e um cliente de internet
Na internet ou em outras redes, um computador ou programa que responde a comandos provenientes de um computador-cliente. Por exemplo, um servidor de arquivos pode conter um arquivo de dados ou de programas; quando um cliente solicita um arquivo, o servidor transfere uma c´opia do arquivo para o ”cliente”.
Leonardo IFAL
Rede Local
Uma rede local, por outro lado, ´e um conjunto de computadores interligados f´ısicamente (cabos e demais conex˜oes) e logicamente (sistema operacional que gerencie essas conex˜oes).
FAQs World Wide Web TAGs
Partindo dessas defini¸c˜oes o que vem ser a Internet ?
A Internet, nesta vis˜ao, nada mais ´e do que uma grande rede de computadores, interligadas ao redor do mundo, por estruturas f´ısicas (cabos, sinais de r´adio ou sat´elites) e sistemas operacionais.
Leonardo IFAL
World Wide Web - WWW
Outro servi¸co de grande destaque surgiu pelas m˜aos de Tim Berners-Lee, em 1992, inventando a World Wide Web, literalmente “rede de alcance mundial”, um sistema de hiper-texto que permite a interlga¸c˜ao dinˆamica de diversos documentos atrav´es da rede. A imagem virtual de fios interligando documentos ao redor do mundo seria similar ao de uma teia de aranha. Da´ı a analogia do nome.
FAQs World Wide Web TAGs
HTML e a WWW
A base da World Wide Web ´e a linguagem HTML, HyperText Markup Language, ou Linguagem de Marca¸c˜ao de Hipertexto. ´E justamente essa linguagem que vamos abordar no restante da disciplina.
Leonardo IFAL
Exercitar
Nossa Primeira P´agina
Agora, iremos criar nossa primeira p´agina HTML.
Nossa p´agina ser´a extremamente simples e n˜ao iremos acentuar as palavras ainda. Posteriormente veremos como criar acentua¸c˜ao em HTML.
Criar arquivo .htm
1 Criem uma pasta de vocˆes;
2 Criem um arquivo texto dentro da pasta com o nome
pagina.htm.
FAQs World Wide Web TAGs
Exercitar
<HTML>
<TITLE> TITULO DA PAGINA </TITLE> <BODY>
MINHA PRIMEIRA PAGINA </BODY>
</HTML>
Leonardo IFAL
TAGs HTML
A linguagem HTML ´e orientada por marcadores ou TAGs. TAGs s˜ao os comandos utilizados pela linguagem HTML. Cada TAG informa ao programa visualizador ou Browser, como ele dever´a formatar o texto e deve estar dentro dos sinais de menor que (¡) e maior que (¿). Exemplo: ¡HTML¿, ¡BODY¿, etc. Os TAGs podem ser ´unicos ou duplos, com in´ıcio e fim.
Example TAG ´unico: BR TAG duplo: P e /P
FAQs World Wide Web TAGs
Estrutura de um arquivo HTML
Todo o documento HTML fica contido entre os TAGS: ¡HTML¿ e ¡/HTML¿. Temos duas se¸c˜oes b´asicas:
HEAD Cont´em parˆametros de configura¸c˜ao do documento. BODY Cont´em o documento em si.
Leonardo IFAL
Tags Usados No In´ıcio Do Documento
Envolvem todas as se¸c˜oes de um documento (HEAD e BODY).
HTML /HTML Envolvem todas as se¸c˜oes de um documento
(HEAD e BODY).
HEAD /HEAD Envolvem a se¸c˜ao de cabe¸calho do documento.
TITLE /TITLE Indica o t´ıtulo do documento para o Browser. Geralmente os Browsers apresentam este t´ıtulo na barra de t´ıtulo da sua Janela no Windows.
BODY /BODY Envolvem a se¸c˜ao de corpo do documento. Aqui fica o conte´udo principal da Home Page. Opcionalmente
FAQs World Wide Web TAGs
T´ıtulos e Subt´ıtulos
Para demarcar t´ıtulos e subt´ıtulos, use os TAGs de HEADER (H1 a H6), juntamente com as op¸c˜oes CENTER ou BLINK.
H1 e /H1 Envolvem todas as se¸c˜oes de um documento (HEAD e BODY).
H2 e /H2 Envolvem a se¸c˜ao de cabe¸calho do documento. H3 e /H3 Indica o t´ıtulo do documento para o Browser. Geralmente os Browsers apresentam este t´ıtulo na barra de t´ıtulo da sua Janela no Windows.
CENTER /CENTER Envolvem a se¸c˜ao de corpo do documento. Aqui fica o conte´udo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a op¸c˜ao: BACKGROUND.
Leonardo IFAL
Exercitar <HTML> <TITLE> E x e r c i c i o : T i t u l o e S u b t i t u l o </TITLE> <HEAD> </HEAD> <BODY> <H1> TITULO 1 </H1> <BR>
<H2><BLINK> TITULO 2 ( P i s c a n d o ) </BLINK></H2> <BR> <H3><CENTER> TITULO 3 ( C e n t r a l i z a d o )</H3></CENTER> <BR> </BODY>
FAQs World Wide Web TAGs Exercitar
T´ıtulos e Subt´ıtulos
Para demarcar t´ıtulos e subt´ıtulos, use os TAGs de HEADER (H1 a H6), juntamente com as op¸c˜oes CENTER ou BLINK.
H1 e /H1 Envolvem todas as se¸c˜oes de um documento (HEAD e BODY).
H2 e /H2 Envolvem a se¸c˜ao de cabe¸calho do documento. H3 e /H3 Indica o t´ıtulo do documento para o Browser. Geralmente os Browsers apresentam este t´ıtulo na barra de t´ıtulo da sua Janela no Windows.
CENTER /CENTER Envolvem a se¸c˜ao de corpo do documento. Aqui fica o conte´udo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a op¸c˜ao: BACKGROUND.
Leonardo IFAL
Exercitar
T´ıtulos e Subt´ıtulos
Para demarcar t´ıtulos e subt´ıtulos, use os TAGs de HEADER (H1 a H6), juntamente com as op¸c˜oes CENTER ou BLINK.
B /B - Aplica o estilo negrito. I /I - Aplica o estilo it´alico.
U /U - Aplica o estilo sublinhado (nem todos os browser o reconhecem).
SUP /SUP - Faz com que o texto fique sobrescrito. SUB /SUB - Faz com que o texto fique subscrito.
FAQs World Wide Web TAGs Exercitar
<HTML> <TITLE> Don Q u i x o t e de La Mancha </TITLE> <HEAD> </HEAD>
<BODY>
<H1> <CENTER>Don Q u i x o t e de La Mancha </CENTER></H1> <H3>Resumo da Obra</H3> <P> O p r o t a g o n i s t a da o b r a e <B>Dom Q u i x o t e</B> , um p e q u e n o f i d a l g o c a s t e l h a n o que p e r d e u a r a z a o p o r m u i t a l e i t u r a de r o m a n c e s de c a v a l a r i a e p r e t e n d e i m i t a r s e u s h e r o i s p r e f e r i d o s . </P> <P> O romance n a r r a a s s u a s a v e n t u r a s em c o m p a n h i a de <B> Sancho Panca</B> , s e u f i e l
amigo e c o m p a n h e i r o , que tem uma v i s a o m a i s r e a l i s t a . A a c a o g i r a em t o r n o d a s t r e s i n c u r s o e s da d u p l a p o r t e r r a s de <I>La Mancha</ I> , de A r a g a o e de C a t a l u n h a . N e s s a s i n c u r s o e s , e l e s e e n v o l v e em uma s e r i e de a v e n t u r a s , mas s u a s f a n t a s i a s s a o s e m p r e d e s m e n t i d a s p e l a d u r a r e a l i d a d e . <U>O e f e i t o e a l t a m e n t e h u m o r i s t i c o</U> . </P> </BODY> </HTML> Leonardo IFAL
Bibliografia
R. Nakamura.
Apostila HTML b´asico.
FAQs World Wide Web TAGs
D ´UVIDAS ? P´agina das Aulas:
https://sites.google.com/site/leomedeirosifal/
Leonardo IFAL
