Ir para conteúdo

Tudo Sobre Html, Parte 1.

Raphael Lion

Por Raphael Lion
em Programação Web

 Share

Posts Recomendados

Raphael Lion

Raphael Lion 2

Postado
Postado

Introdução

 

 

 

As redes de computadores existem há mais de vinte anos e são utilizadas por milhões de pessoas em todo o mundo.

 

A primeira rede , ARPANET, que na sua origem conectava centros militares e de pesquisas, foi utilizada por alguns cientistas de computação para obter acesso a computadores, compartilhar arquivos e enviar mensagens eletrônicas Hoje em dia ,cientistas, engenheiros professores, estudantes, bibliotecários, médicos, homens de negócios, políticos e até crianças, o utilizam para receber jornais eletrônicos, ter acesso a "Bulletins boards"(BBS – Visto mais adiante) , consultar bases de dados e utilizam, remotamente, vários equipamentos.

 

Atualmente, dentro da comunicação global, a informação disponível na INTERNET ultrapassa os limites físicos, políticos e as estruturas econômicas de todas as partes do planeta, transformando-se em um fórum universal que independente de raça ,profissão ou idade, disponibiliza informações das mais variadas para todos que se ligam a rede.

 

A ARPANET "foi aposentada" em 1990 , a CSNET deixou de existir em 1991 e a INTERNET continua crescendo incontrolavelmente. Hoje, ela engloba mais de 5000 redes espalhadas em 145 países espalhados pelos 5 continentes.

 

Estima-se um crescimento de 10% ao mês e um intercâmbio de mais de 15 milhões de mensagens entre a INTERNET e todas as demais redes conectadas.

 

A INTERNET começou a ser utilizada no Brasil, em meados de 89/90, somente por Instituições de pesquisas e um pouco depois por Universidades, permanecendo , assim , até o final de 1995, quando a exploração comercial teve início com a liberação de um BackBone lançado pela EMBRATEL, com um grande incentivo para a sua propagação da mídia, que passou a abordar o assunto, utilizando-se até de novelas.

 

A INTERNET nasceu em 1969 para descentralizar informações militares norte-americanas em várias redes, a fim de se evitar que um ataque soviético estratégico destruísse informações militares armazenadas em grandes computadores. Com isso, surgiu a ARPANET (rede da Advance Research Projects Agency), um projeto experimental do departamento de defesa norte americano que interligava computadores a centros de comando remotos. Algumas redes experimentais se juntavam a ARPANET através de rádios e satélites.

 

No final dos anos 70 surgiu a USENET (Users Network) prestando serviços a comunidades universitárias e algumas organizações comerciais. No início da década de 80, a ARPANET dividiu-se em : ARPANET e MILNET (também militar), mantendo a comunicação entre ambas originou o nome de DAR INTERNET e depois se abreviou para INTERNET.

 

 

 

Em 1986, foi criada a NSFNET (National Science Foundation Network) para viabilizar a conexão de pesquisadores aos cincos grandes centros dos EUA e abrangendo, rapidamente redes acadêmicas e escolares.

 

Nessa época, a INTERNET iniciou sua expansão. Novas redes foram a ela conectadas, mais computadores e, consequentemente mais participantes. Redes internacionais similares surgiram e hoje, temos uma presença mundial significativa, salvo na África , onde contamos com poucos pontos de presença.

 

 

 

Como funciona a Internet

 

 

 

Para que uma rede exista é preciso que muitos computadores possam ser interligados ao mesmo tempo. É preciso instalar em cada computador um dispositivo chamado placa de rede. Ela permitirá que muitos computadores sejam interligados simultaneamente , formando o que se chama de uma rede local , ou LAN ( do inglês Local Area Network ). Se essa LAN for ligada à Internet , todos os computadores conectados à LAN poderão ter acesso à Internet. É assim que muitas empresas proporcionam acesso à Internet a seus funcionários.

 

Uma rede é formada por vários computadores interligados dentro de um estabelecimento (cidade, estado..).

 

A INTERNET é a "rede das redes". Ela é composta de pequenas redes locais(LANS), redes estaduais e enormes redes nacionais que conectam computadores de diversas organizações mundo afora.

 

Essas redes estão interligadas de diversas formas, desde uma simples linha telefônica discada até malhas de fibras óticas. Estar na INTERNET significa participar de uma rede interconectada.

 

As redes que formam a Internet são Interligadas por outras redes de alta capacidade , chamadas backbones ( espinha dorsal ). Os backbones são poderosos computadores conectados por linhas de grande largura de banda como canais de fibra óptica , elos de satélite e elos de transmissão por rádio. Como já vimos , a Internet surgiu a partir da criação do backbone original , o ARPAnet, um projeto militar para intercâmbio de informações estratégicas financiado pelo governo americano. Ao longo dos anos a Internet passou por várias etapas , transformando-se numa rede de pesquisa acadêmica e , finalmente , na grande rede que é .

 

A melhor forma de entender a Internet é pensar nela não como uma rede de computadores, mas como uma rede de redes. Sendo assim, a Internet não tem um dono ou uma empresa encarregada de administrá-la . A instituição que mais se aproxima de uma administração central é a Internet Society. Trata –se de uma entidade que se baseia no trabalho voluntário de seus integrantes com o objetivo de exercer o mínimo controle necessário para manter a Internet em funcionamento.

 

O princípio básico de uma rede é a capacidade de "comunicação" entre dois computadores. Para isso, utilizam-se protocolos , regras ou convenções que regem essa comunicação. Para que a comunicação se efetive , dois computadores devem utilizar o mesmo protocolo, simultaneamente.

 

TCP/IP (Trasmission Control Protocol / INTERNET Protocol) é a família de protocolos da INTERNET, desenvolvida nos anos 70 e utilizada pela primeira vez em 1983.É considerado um protocolo aberto e "sem dono". O que significa dizer que não é produto de empresa nenhuma específica.

 

Cada vez que ocorre uma transferência, o protocolo age quebrando a informação , formando diversos pacotes e roteadores, que estão programados para enviá-los corretamente ao seu destino.

 

As redes de nível captam o tráfego nos "BackBones"(redes de alta velocidade) e o distribuem para suas próprias redes e vice-versa.

 

 

 

World Wide Web

 

 

 

WWW é um serviço baseado um hipertextos (documentos que possuem , dentro de si , conexões com outros documentos) que permite buscar e recuperar informações distribuídas por diversos computadores da rede . O hipertexto é uma forma de apresentação gráfica de informação que contém palavras com ligações subjacentes com outros textos , o que torna possível leituras diversas , não - lineares. Você pode selecionar uma das palavras que aparece assinalada e ter acesso a um novo documento , associado com o termo selecionado. O novo documento , por sua vez , é um outro hipertexto com novas palavras assinaladas.

 

Assim , como o gopher, o servidor WWW pode interligar-se com diversos outros servidores WWW, possibilitando a navegação em informações disponíveis na rede . Torna-se , assim , irrelevante para o usuário a localização física dos documentos recuperados.

 

O documento recuperado não precisa ser necessariamente em texto. Também pode conter outros tipos de informação , tais como imagens , gráficos e sons. Cabe lembrar que através de um servidor WWW, é possível não só o acesso a documentos , mas também o acesso aos demais serviços da rede , como ftp,wais,gopher ,telnet, os quais você verá posteriormente.

 

 

 

E - Mail

 

Correio Eletrônico

 

 

 

É o servidor básico de comunicação em redes de computadores . O processo de troca de mensagens eletrônicas é bastante rápida e fácil ,necessitando apenas de um programa de correio eletrônico e do endereço eletrônico dos envolvidos.

 

 

 

* endereço eletrônico de um usuário na INTERNET contém todas as informações necessárias , para que a mensagem (username) e uma parte relacionada à localização no formato:

 

username@subdominios.domínio

 

EX: joão@mas.com.br

 

Uma mensagem é composta de cabeçalho e corpo . O cabeçalho informa a data do envio da mensagem, o endereço do emitente , um título sobre o assunto , além de informações de controle . O corpo da mensagem é o seu conteúdo.

 

Embora a grande maioria das mensagens trocadas via rede sejam constituídas por informação puramente textual, também é possível obter outros tipos de informação , tais como sons e imagens . Através do correio eletrônico, também é possível utilizar outros serviços de rede , tais como listas de discussão, USENET News , ftp , archie.

 

 

 

FTP (File Transfer Protocol)

 

 

Protocolo de transferência de arquivos é o serviço básico de transferências de arquivos na rede . Com a devida permissão , é possível copiar um arquivo de um computador a distância para o seu computador ou transferir um arquivo do seu computador para um computador remoto , para tanto , você deve ter permissão de acesso ao computador remoto .

 

Ante as restrições para transferência de arquivos foi criado o "FTP Anônimo" para facilitar o acesso de usuários de todo mundo a determinadas máquinas que mantém enormes repositórios de informação. Não é necessário uma permissão de acesso . O usuário irá identificar-se como Anonymous quando o sistema requisitar o "log-in".

 

 

 

 

 

HTML

 

 

 

Falemos do que interessa mesmo.HTML – abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web , que por sua vez será composta de textos e comandos especiais que chamaremos de Tags. Não se assuste com o nome, pois se trata de uma linguagem muito simples , e tem como finalidade básica formatar o texto e imagens exibidos e criar ligações entre páginas Web , criando assim documentos com o conceito de Hipertexto.

 

Como em qualquer outra linguagem , o programador deve escrever o código - fonte seguindo as regras de sintaxe da linguagem. Este código – fonte é posteriormente interpretado pelo browser , que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos da Web.

 

Em março de 1989, Tim Berners-Lee do European Laboratory for Particle Physics ( mais conhecido como CERN ) , propôs um novo conjunto de protocolos para um sistema de distribuição de informações da Internet a ser usado entre os diversos grupos de pesquisa em física de altas energias . Os protocolos da WWW foram logo adotados por outras organizações e foi formado um consórcio de organizações , chamado de W3 Consortium , que uniu seus recursos de modo a prosseguir com o desenvolvimento de padrões WWW.

 

Esse consórcio é liderado pelo MIT ( Massachusetts Institute of Technology) , pelo CERN e pelo INRA ( French National Institute for Research in Computer Science and Control). Ele propõe recursos mais novos e sofisticados de HTML , avalia sugestões e implementações alternativas e publica novos "níveis" de versões do padrão HTML.

 

Existem vários programas para editoração HTML , que tornaria nosso trabalho muito mais fácil e nos acomodaria como usuários – finais que não entendem nada do que estão fazendo. Por isso , sofreremos um pouco e usaremos o incrível , sensacional , fantástico e estupendo Bloco de Notas ( NotePad ) do Windows.

 

* Comandos HTML – Tags

 

 

 

Os comandos em HTML são chamados de tags , e eles irão dizer ao browser como o texto, a informação e as imagens serão exibidas . Por exemplo , um tag pode dizer que um texto será exibido em negrito , itálico e com um tipo de fonte qualquer. Além de formatação de texto um tag também pode dizer que na verdade um determinado pedaço do texto é um endereço para outra página Web , que será acessado ao dar um click no endereço.

 

Os tags são identificados por serem envolvidos pelos sinais < > ou </ >. Entre os sinais < > são especificados os TAGS propriamente ditos . No caso de tags que precisem envolver um texto , a sua finalização deverá ser feita usando a barra de divisão "/ " , indicando que o tag está finalizando a marcação de um texto , o que faz os tags normalmente andarem em pares. O formato genérico de um tag é :

 

 

 

<Nome do tag> Texto </Nome do tag> .

 

 

 

Lembraremos sempre que não é necessário estar ligado à Web para criar páginas HTML ou para usar os Browsers. Basta que , ao terminar de escrever sua página no Bloco de Notas , você salve seu documento com um nome qualquer e a extensão HTM ou HTML , para que o browser possa interpretar suas páginas.

 

 

 

 

 

Estrutura básica de uma página

 

Bem , deixarei claro que ultimamente o que vou explicar não é bem assim , pois existe um certo desleixo hoje na Internet , mas , seguindo o padrão clássico teremos :

 

 

 

O TAG <HTML> – que será usado em conjunto com seu tag de fechamento < / HTML > e será colocado no início e no final do documento , delimitando a área onde serão colocados os TAGS HTML .

 

 

 

O TAG <HEAD> - que também terá seu tag de fechamento </HEAD> e servirá para delimitar uma área de cabeçalho com poucos TAGS (não é necessário ter esse TAG para sua página funcionar)

 

 

 

O TAG <TITLE> - que será usado dentro dos tags <HEAD> , e servirá apenas para colocar um título que aparecerá na barra de título do seu browser ( não esqueça o </TITLE>) .

 

Dentro dos TAGS <BODY> </BODY> serão colocados todos os comandos , textos e imagens da sua página . Será o corpo da sua página.

 

Veja um exemplo de estrutura :

 

<HTML>

 

<HEAD>

 

<TITLE> Título da página </TITLE>

 

</HEAD>

 

<BODY>

 

Aqui você coloca os comandos em HTML , seus

 

Textos e Imagens .

 

Aliás , tanto faz colocar os tags em maiúsculas ou

 

minúsculas.

 

</BODY>

 

</HTML>

 

image6zp7.gif

 

Vá até a opção Arquivo – Salvar Como do seu Bloco de Notas e salve o exemplo acima como TESTE. HTM .

 

Ao abrir o arquivo no browser , sua primeira página ficou assim :

 

image7ov5.gif

 

Talvez você tenha de problemas para abrir sua página. Então vou dar uma explicação rápida no Internet Explorer, e no Netscape que são muito parecidos .

 

 

 

1 – Vá até o Menu Arquivo - Abrir… ;

 

2 – Aparecerá uma caixa para você colocar o endereço da página. Clique no botão Procurar (Browse…) ;

 

image8tx1.gif

 

3 – Aparecerá a conhecida caixinha de pastas do Windows. Vá até a pasta onde você gravou sua página e clique em Abrir ( Open ) ;

 

4 – Você voltará até a caixa para a entrada do endereço , já com o caminho dentro da caixa ;

 

5 – Aí é só clicar OK .

 

 

 

Criando Sites HTML

 

 

Agora que aprendemos algumas técnicas , como criar uma página HTML , salvá – la com a extensão . HTM , abrir e vê – la em nosso browser , vamos formatar tudo o que for possível , para dar um ar mais profissional em sua página. Afinal , no exemplo que fizemos até agora , o fundo da nossa página não tem cor , nossas fontes são estáticas o que torna o conjunto da página feio. Vamos ver agora algumas tags que ajudarão a tornar nossas páginas motivo de inveja para qualquer um .

 

 

 

Tags para formatar sua página

 

 

 

* Tags

<H1..6> … </H1..6>

 

 

 

O TAG <H> cria uma espécie de cabeçalho no documento , com padrões de formatação já prontinhos para usar. Serve para identificar o começo de uma seção ou tópico , facilitando a visualização dentro da página. Logo após o TAG <H> deve vir um número de 1 a 6 indicando o tamanho da fonte , sendo que 1 é o maior tamanho e 6 o menor. Exemplo :

 

 

 

<H1> Cabeçalho Grande </H1>

 

<H6> Cabeçalho Pequeno </H6>

 

 

 

Toda vez que usado esse TAG , a fonte já virá padronizada em negrito e em determinado tamanho , além de colocar uma linha em branco após o texto. Lembre –se de fechar com o tag </H> .

 

 

 

* Tags

<CENTER> … </CENTER>

 

 

 

Seria bom se pudéssemos alinhar nosso texto bem no meio da página , centralizado Até agora , tudo o que escrevemos está alinhado à esquerda da nossa página , enquanto esteticamente , ficaria muito melhor centralizado. Essa é a função do TAG <CENTER> que centraliza um texto , uma imagem ou um elemento da página. Exemplo:

 

 

 

<CENTER> Essa frase está centralizada na página </CENTER>

 

 

 

 

 

* Tag

<P>

 

 

 

A principal diferença entre a página HTML e um editor de textos tradicional é que a página não reconhece o fim de um parágrafo com o pressionamento da tecla Enter. Se você simplesmente escrever palavras sem TAGS de formatação em um arquivo html elas serão formatadas em um grande único parágrafo. Você precisa forçar o fim do parágrafo e a quebra de linha usando TAGS especiais. O TAG responsável pela quebra de parágrafos é o TAG <P> . Ele iniciará um novo parágrafo e pulará uma linha entre o texto.

 

Sua sintaxe é apenas :

 

Texto Texto <P>

 

 

 

* Tag

<BR>

 

 

 

Em muitas situações , você precisa quebrar a linha e continuar o texto na linha seguinte , coisa que o TAG <P> não faz , pois ele pulará uma linha. Para isso usamos o TAG <BR> (abreviação de BREAK – Quebrar ) , dando continuidade do texto na linha de baixo.

 

Sua sintaxe é apenas :

 

Texto Texto <BR>

 

 

 

 

 

* Tag

<HR>

 

 

 

O TAG <HR> cria uma linha horizontal que são utilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre um item de informação e outro. Estas linhas podem também ser usadas com atributos de largura e altura. Exemplo :

 

 

 

<HR SIZE=8 WIDTH=80%>

 

 

 

Onde WIDTH indica que a linha ocupará 80% da largura da janela do browser. E SIZE indica que será exibida uma linha com 8 pixels de espessura.

 

 

 

* Formatação e Estilos de Texto

 

 

 

Assim como no editor de textos , você pode criar uma série de efeitos no texto , alterando a forma ou o tipo de fonte. Todos esses TAGS de formatação e estilo de texto devem ter seu tag de fechamento , pois senão se espalhará em toda sua página e não só onde você escolheu. Vamos ver os principais estilos de texto :

 

 

Estilo - Sintaxe - Função
Negrito - [B]Texto[/B] - [b]Deixa o Texto em Negrito[/b]
Itálico - [I]Texto[/I] - [i]Deixa o Texto em Itálico[/i]
Sublinhado - [U]Texto[/U] - [u]Deixa o Texto Sublinhado[/u]
Letreiro - <MARQUEE > Texto </MARQUEE> - Cria o efeito da proteção de tela "Marquee" do Windows
Pulsante - <BLINK> Texto </BLINK> - Cria um efeito " pisca – pisca" no texto

 

 

É importante saber que nem todos esses TAGS funcionam nos dois browsers. Por exemplo , o TAG <BLINK> só funciona no Netscape Navigator , enquanto os TAGS <MARQUEE> e <U> funcionam apenas no Internet Explorer. Existem outros estilos , mas por enquanto , isso vai nos servir.

 

 

 

* Tags

<FONT> … </FONT>

 

 

 

Vamos agora formatar as fontes da nossa página. Para isso vamos usar o tag FONT com seus complementos : FACE , COLOR e SIZE .

 

 

 

O <FONT FACE = "FONTE"> irá definir que tipo de fonte que seu texto irá utilizar. Aconselho a usar fontes de padrão popular no Windows , pois as fontes que seu computador tem , pode ser que outro computador não tenha. Por isso fontes como TIMES NEW ROMAN e ARIAL são aconselháveis.

 

Exemplo :

 

 

 

<FONT FACE = "TIMES"> Coloque aqui seu texto </FONT>

 

 

 

Obs. : A fonte Times New Roman ( Times ) já é o padrão das páginas HTML , podendo se colocar qualquer fonte existente em sua máquina como Mistral , Arial etc.

 

O <FONT SIZE = "TAMANHO DA FONTE "> irá definir qual o tamanho da fonte utilizada , lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 6. Podemos usar tamanhos como 78 e 64 , mas lembre – se que pode não funcionar em alguns micros. Por isso , se você quer aumentar o tamanho de uma fonte , use o sinal de + antes do número que irá definir o tamanho da fonte e , para diminuir use o sinal de - . Por Exemplo :

 

 

 

<FONT SIZE = + 3> Irá deixar o texto com o tamanho 6 </FONT> ;

 

<FONT SIZE = 3> Irá deixar seu texto com o tamanho 3 </FONT> ;

 

 

 

Obs. : O tamanho 3 é o tamanho padrão das páginas HTML , podendo colocar qualquer tamanho compatível a fonte usada.

 

O <FONT COLOR = "COR "> irá colocar uma cor na fonte escolhida e seguirá o padrão de cores RGB , o mesmo do BODY BGCOLOR. Exemplo :

 

 

 

<FONT COLOR = "BLACK"> Veja um texto pretinho! </FONT>

 

 

 

Obs. : A cor preta é o padrão de cor usado nas páginas HTML , podendo –se usar qualquer outra cor descrita em inglês ou código hexadecimal , descrito mais adiante .

 

Todos esses complementos de tag podem ser usados juntos dentro de um só tag , o que facilita a nossa vida. Por Exemplo :

 

 

 

<FONT FACE = "ARIAL" COLOR= "RED " SIZE = "3">TRICOLOR CAMPEÃO !!! </FONT>

 

 

 

Lembre – se de fechar o tag </FONT> para que o formato seja usado só no texto escolhido e não em toda a página.

 

 

 

* Tag BODY parâmetro BGCOLOR

 

 

 

Esse TAG não precisa de tag de fechamento , pois o próprio < BODY > se encarregará disso. Sua função será a de colocar uma cor de fundo para sua página. Sua sintaxe é :

 

 

 

<BODY BGCOLOR = "COR ">

 

 

 

Onde : "COR " será a cor do fundo escolhido , que deverá ser escrito em inglês ou em código. Os browsers disponibilizam até 256 cores para serem usadas como cor de fundo, sendo que cada cor é formada por um código RGB ( red / green / blue ) . O código é composto por três números nos quais os primeiros dois dígitos representam a intensidade do vermelho ( R ); o segundo , a intensidade do verde ( G ) e o último a intensidade do azul ( B ) . Cada cor pode ter um valor que varia de 0 a 255. Se forem atribuídos os valores mínimos R=000 , G=000 e B=000 , é obtida a cor preta. Se forem atribuídos o valor máximo para cada cor ( 255 ) , é obtida a cor branca. Mas , para facilitar nossa vida , vamos escrever o padrão em inglês , que é muito mais simples.

 

Exemplo :

 

 

<BODY BGCOLOR="YELLOW"> ou <BODY BGCOLOR="#FFFF00">

 

 

 

O tag BODY BGCOLOR pode ser colocado logo após o tag BODY , ou até mesmo acoplado em um mesmo tag. Veja uma tabelinha de cores e alguns códigos :

 

Cor - Código Hexadecimal

 

Preto - #000000

Branco - #FFFFFF

Amarelo - #FFFF00

Azul - #0000FF

Verde - #00FF00

Verde Escuro - #2F4F2F

Vermelho - #FF0000

Rosa - #FF00FF

Ciano - #00FFFF

 

Bem, Nesta Primeira Parte do Tutorial HTML, Aprendemos, Tags para formatar sua página, Estrutura básica de uma página, FTP (File Transfer Protocol), E - Mail, Correio Eletrônico, World Wide Web, Como funciona a Internet, Próxima Aula, Ensinarei á por Imagens, Links, Âncoras, Montagem e Listas em HTML, Tabelas em HTML, Frames e Criando uma Frame Line.

Créditos : Não Achei o Nome do Grande Dono do Tutorial Base, mais Retirei do WebMasters Online, e Editei corretamente para adaptar ao Xtibia.

 

Abraços;

Raphael.

Link para o comentário
Compartilhar em outros sites
GM Netox

GM Netox 0

Postado
Postado

Parabéns Rapahel, deve ter dado um trabalho

daqueles para editar e adaptar ao XTibia...Continue trazendo

esses ótimos tutorias que você acha aqui para o XTibia.

 

Obrigado por esta recheando nosso fórum.

 

Abraços

Link para o comentário
Compartilhar em outros sites
Rikezenho

Rikezenho 2

Postado
Postado

Eu ainda vou fazer um tutorial de CSS, daí vamos integrar ele aí xD

CSS é importante :)

Facilita muito o trabalho...

 

Muito bom o tutorial...

Explicou bem, mas podia ensinar a fazer tabelas né.. xD

Tabelas são importantes também...

 

Flwww!

Link para o comentário
Compartilhar em outros sites
  • 10 months later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...