Introducção ao WebDesign [HTML]

Doctor — Sun, 03 Feb 2008 08:25:19 +0000

Tenho visto que existem muitas dúvidas no forum acerca da criação de Sítios (sites) para a Internet. Como tal decidi tomar uma nova abordagem na minha participação a este forum e partilhar alguns dos meus conhecimentos no desenvolvimento de web sites.Tenciono criar vários tópicos, cada um dedicado a um tema relacionado com o webdesign, e como não poderia ser de outra maneira tenciono começar como introdução o HTML, o que é, para que serve e como se faz.

É evidente de referir que esta introdução é muito resumida visto não ser o assunto principal do tema, se precisarem de saber mais acerca da Internet, redes, protocolos TCP/IP ou outro assunto podem pesquisar por exemplo na Wikipedia ou no google.

Será que sabia isso?

Muito basicamente o que necessita saber para iniciar esta leitura é que existe uma rede mundial de computadores, interligados e comunicando entre si. A essa rede chamamos de Internet. Esse rede é composta por um grupo de computadores aos quais iremos chamar de servidores, basicamente eles fornecem um serviço, ou seja armazenam toda a informação disponível na Internet e é neles que alojaremos o nosso web site assim que concluido. Este grupo de servidores é definido por server side, ou seja o lado do servidor, porque este é apenas um dos dois lados da Internet ou outro é o client side, o lado do cliente. Esse lado não é nada mais nada menos do que o computador do utilizador que navega em casa ou noutro lugar qualquer na Internet.

Então o que acontece?

Para navigarmos na Internet precisamos de usar um software que chamamos de navegador ou Browser (existem vários e cada um com as suas especificações; Internet Explorer, FireFox, Opera, Safari, Konqueror entre outros), esse programa permite enviar pedidos ao servidor indicando o site que pretende visualizar, de seguido o servidor envia ao Browser os ficheiros e dados necessários para o Browser fazer a leitura e apresentar a informação correctamente no ecrã do utilizador.
Estes ficheiros são as nossas páginas de Internet (na maioria dos casos)

Mas como o browser sabe como formatar e colocar a informação do website na posição correcta?

O HTML (Hyper Text Markup Language) surgiu na década de ’80 mas só em 1991 que começou a surgir as primeiras TAGs (etiquetas) que hoje definem este standard. A linguagem HTML se podemos chamar assim surgiu como meio de formatar documentos e estilizar de forma que fossem apresentados sempre da mesma forma.
Então é graças ao HTML que o Browser sabe como compor a página de Internet assim que descarregada no meu computador?
Sim! (Obviamente vão existir outros factores, mas este é o primeiro e principal)

Então o que é o HTML?

O Html é uma linguagem para o browser que permite ao mesmo estruturar correctamente uma página de Internet. Colocar os seus elementos nos sítios correctos, texto, imagens, sons entre outros. Actualmente o HTML chegou a sua versão final 4.01 e evoluiu para o XHTML (uma versão do HTML com XML)

Como posso criar um ficheiro HTML para publicar num servidor e entretando ser interpretado pelo meu browser?

Bem para criar um ficheiro HTML é apenas necessário um editor de texto, por exemplo para os utilizadores de Windows poderão usar o NotePad, se bem que não o recomendo. O notePad é um programa muito básico ao qual o utilizador está sujeito a cometer muitos erros sem se aperceber do mesmo. Sugiro por exemplo o NotePad ++ que para além de formatar o código ainda o destaca com cores, ajudando a reconhecer rapidamente potenciais erros de escrita. O ficheiro HTML necessita de ter uma extenção *.html, por exemplo: – omeuwebsite.html – este seria o nome de um ficheiro HTML. Atenção!! O nome de um site Jamais deverá conter caracteres com maíusculas ou especiais tais como acentos, c-cedilhas, as única excepção é o underscore ( _ )

Nota: atenção que uma maioria de servidores de internet estão predefinidos para reconhecer que a página inicial, ou seja o índice de um site, o ficheiro com o nome – index.html – Imagine que quando insere no browser : – http://www.digitalworldpress.wordpress.com/ como poderia o servidor saber a que ficheiro se refere o utilizador, assim o servidor parte do princípio que seja o ficheiro Index. Caso o servidor esteja configurado para procurar o ficheiro index.html e este não existir, então o servidor poderá mostrar uma página de erro ou mostrar o conteúdo da pasta publica do mesmo (P.S. nós não queremos isso).

Sendo assim e para partir sempre com bons hábitos iremos definir que a Home page do nosso site se chama – index.html

Porreiro agora que tenho um ficheiro html que faço com ele?

Bem basciamente está na hore de inserir conteúdos nele .

O fichero html é composto por elementos chamados de TAG ou seja etiquetas, esses elementos podem assumir atributos (veremos isso daqui a um momento). uma TAG tem o seguinte aspecto:

Código:

uma TAG é composta por este símbolo < (menor que) o nome da TAG (no exemlo Font) e por fim este símbolo > (maior que)
As TAG na sua maior envolvem em torno de dados por exemplo imaginemos que queremos formatar uma linha de texto, esta seguinte frase:

A minha primeira TAG HTML

com a TAG font podemos alterar a font dos cáracteres, cor ou tamanho, por exemplo

) e com 2 colunas nas linha do meio (2 ) usamos o atributo colspan, este permite dizer ao browser que queremos que nessas linhas as duas colunas sejam fundidas numa só, assim poderemos ter os esquema pretendido de uma linha com 1 célula do tamanho de 750px, uma segnda linha com duas células, a 1ª com 25% do total da largura (relativo aos 750px) e uma segunda célula com 75% do total da largura, e por fim uma terceira linha com o tamanho de 750px apenas com uma célula.

Para completar o nosso primeiro layout precisamos de saber como se insiram imagens dentro do HTML, para tal temos a TAG essa TAG tal como a TAG
não tem fecho, para indicar a imagem pretendida usamos o atributo source (fonte) abreviado da seguinte maneira “src” então num exemplo temos:

Por fim para uma maior acessibilidade damos um nome a imagem de forma a quando pararmos o rato em cima surge uma caixinha do browser a indica-lo assim:

Implementamos da seguinte forma no nosso exemplo

Código:

A minha primeira TAG HTML

Vamo-lá então analisar, como referido temos a nossa frase e em torno a TAG, reparem primeiro que a TAG se repete em torno da frase, mas que a direita da frase foi acrescentado esse símbolo / … Isto acontece para informar o Browser onde começa o texto a ser formatado e onde acaba. A TAG iniciou a formatação e a TAG fechou a formatação.Atenção !!! é sempre necessário fechar as TAGs quando abertas..

Por fim analisamos que dentro da TAG font existem atributos, no nosso exemplo 3 atributos, face, color e size. O primeiro indicamos que tipo de fonte iremos usar, o segundo a cor e por fim o tamanho. Cada TAG tem atributos específicos, muito dificilmente consiguerá decorar todas as TAGs e seus atributos, mas para isso não faz mal, facilmente encontrará tudo o que necessita através do Google, outro meio também é usando software de desenvolvimento HTML (Dreamweaver, WebDesigner da MS, APtana entre outros)

Outro aspecto importante a ter em atenção é como são abertas múltiplas TAGs e depois encerradas. Por exemplo:

para cada linha da tabela e dentro dessas linas as TAG para cada célula. Então sabemos que no nosso exemplo a tabela possui 3 linhas e 2 colunas, contudo na primeira linha apenas queremos 1 célula (1 coluna) e na terceira linha idem então temos esta formatação:

Código:

Este texto irá aparecer em negrito e itálico <— Isto não pode acontecer!

Código:
Este texto irá aparecer em negrito e itálico

Repare que as TAGs são envolvidas a volta do texto, a ordem que se fecham não tem a ver com a ordem que forma escritas na sua abertura, mas sim com a proximidade da informação. uma TAG aberta em primeiro lugar será a última a ser fechada. O seguinte Exemplo é errado!!

Agora que já sabemos como criar TAGs e usá-las correctamente vamos nos preocupar com a estrutura de um documento HTML

Um documento HTML se divide em 2 partes essenciais, o cabeçalho do documento e o seu corpo. O cabeçalho é o primeiro a ser lido pelo Browser, ele existe por motivos importantes, ele indica ao Browser o tipo de documento que é, que tipo de codificação de caracteres foram usados, o título do documento e palavras chaves acerca da página.
O corpo do documento é onde figurará toda a informação contida na página e sua estrutura.
Para começar um documento HTML é necessário declarar onde começa o html com a TAG HTML

no meio dessa TAG ficará todo o conteúdo visível e não visível da página.
Depois teremos o cabeçalho com a TAG e por fim o corpo da página com a TAG

vejamos então:

Código:

  
    O meu primeiro site

    Olá mundo este é o meu primeiro site !

Como vemos a TAG html foi a primeira a ser aberta e a útlima ser fechada, o documento inicia com o cabeçalho que neste exemplo comtém o título do documento e depois segue-se o corpo com a frase; Olá mundo este é o meu primeiro site !

A partir daqui o HTML se desenvolve naturalmente, existem dezenas de TAG que são importantes para saber, irei referir algumas:

isto é um heading ou seja um título 1

-> existem até 6 títulos

…

Esta TAG define um parágrafo, onde inicia e onde acaba
-> para usarmos vários parágrafos basta colocar essa TAG em torno dos parágrafos por exemplo:

Código:

1º parágrado

2º parágrado

e mais um parágrado

-> é uma quebra de linha, a diferença com o parágrafo é que apenas quebra a linha e não dá o espaço de parágrafo
Nota importante:
De estranhar a TAG
não tem fecho, basicamente isto não existe
, sempre que fôr usado no HTML um
nesse preciso sítio será feito uma quebra de linha.

mete o texto a negrito
mete o texto a itálico
define texto enfâsico
enlarja o texto
etc… Existem mais dezenas de TAGs para formatar texto, pesquisem um pouco que as encontrarão todas, iremos avançar mais um pouco para áreas mais complexas.

Nota Importante: é possível inserir comentários no HTML, os comentários servem para o criador do site se organizar e mais tarde saber para que serve certos elementos. Criando comentários poderemos deixar um conjunto de documentação para futuras alterações. os comentários são ignorados pelo browser, assim não irão influenciar na leitura do html e na sua composição. Um comentário se apresenta da seguinte forma:

Ok agora tenho muito texto em todo o lado, mas tá tudo fora do sítio como estruturar isto tudo?

Quando pensamos em HTML puro temos que pensar em tabelas, tou certo que muitos de vocês estão habituados as tabelas do Word ou Excel, aqui no HTML é a mesma coisa.
Uma tabela é composta por linhas e essas linhas estão divididas em células. Dentro de cada célula é possível introduzir textos e imagens e inclusive inserir novas tabelas, isto é tabelas dentro de tabelas, sem limitações.

Imaginemos que queremos criar um site, que tem por estrutura um cabeçalho com o título do nosso site depois numa segunda linha temos os nossos linkes a esquerda uns por baixo de outros e por fim uma terceira linha com o roda pé que contém a assinatura e direitos de autor.

Uma tabela consiste na TAG
, depois dentro da tabela teremos as TAG

Código:

  
    O meu primeiro site estruturado

    Cabeçalho
Espaço para menu de navegaçãoConteúdo da página
Roda pé

Neste exemplo temos entao a nossa tabela com 3 linhas (3

) mas reparemos nos atributos, a tabela possui 750px de largura, com um cellpadding de 5px, isto irá dar um espaço imaginário de 5px em torno dos limites das células assim os textos não ficarão enconstados as linhas de contorno das células. o Cellspacing permite criar espaços entre as células, neste caso não queremos e o border retira a linha de contorno a tabela ficando essa invisível.
Nas 1ª e 3º linhas (

Código:

  
    O meu primeiro site estruturado

Espaço para menu de navegaçãoConteúdo da página

Para terminar este exemplo queremos então fazer o nosso menu de navegação vertical que permite navegar por entre as páginas do nosso site. Tal como tinha dito vou inserir uma tabela dentro da nossa tabela, imaginemos que queremos 4 links (hiperligações), cada um destes links permitam indicar ao browser qual a página que pretendemos abrir. Então se inserir uma tabela com 4 linhas e 1 coluna poderei inserir 1 link por célula. O nosso código fica assim:

Código:

O meu primeiro site estruturado

Home

Acerca de Nós

Onde Estamos

Contactos

Conteúdo da página

Ok assim acrescentei uma tabela com 4 linhas dentro da célula esquerda da 2ª linha da tabela principal, esta nova tabela tem um atributo alterado em relação a tabela mãe, a largura (width) está agora em percentagem e não em píxeis, assim essa nova tabela ficará do tamanho máximo que a célula da tabela mãe lhe permitir, evita de andar a fazer contas para saber o tamanho das células. Dentro de cada linha temos então um link que é representado pela TAG em torno do texto do link a aparecer, essa TAG possui o atributo href que basicamente é onde apontamos o ficheiro que queremos ligar ou seja que será chamado pelo browser.

- Devido já ao cansaço esqueci-me de algo extremamente importante de referir que são so formulários e a Declaração do tipo de Documento. Como tal as minhas desculpas acrescentarei de seguida. – Editado em 1 de setembro

Formulários no HTML

Um dos elementos mais interessantes no HTML é a possibilidade de criar formulários, que poderão ser usados para o utilizador preencher e por exemplo enviar um email ou apenas inserir dados numa base de dados (veremos isso no futuro). Um formulário é basicamente composto por campos de texto ou derivados que assumem atributos que poderão limitar o utilizador no seu preenchimento.

Então como componho um formulário?

Primeiro necessitamos de declarar o formulário, é necessário compreender que todos os elementos de um formulário têm que estar compreendidos entre as TAG do formulário

depois poderemos criar tabelas dentro de uma form, possibilitando assim estruturar correctamente o nosso formulário, seguimos o nosso exemplo:

Código:

O meu primeiro site estruturado

Neste nosso exemplo a célula da tabela mãe reservada a um conteúdo passou a possuir uma nova tabela com 4 linhas sendo que em torno desta tabela foi declarado um formulário, esse formulário contém 5 elementos, um campo de texto, uma área de texto, 2 radio bottons e um botão de submissão.

As TAGs que se destinam ao input, ou seja a introdução de dados possuem o atributo de type que declara o tipo de input, no nosso caso vemos o exemplo do Text, que indica que se trata de um campo de texto de linha única, esse campo pode possuir um atributo que limita o número de caracteres introduzidos – maxlength=”10″ – indica que apenas 10 caracteres podem ser introduzidos, existe outro elemente semelhante do tipo password, esse elemento idêntico ao text apenas oculta os caracteres inseridos na caixa substituindo por bolinhas ou estrelas dependendo do browser.
Nos objectos seguintes vemos que introduzimos do tipo radio que basicamente são botões de selecção redondos, neste exemplo temos 2 e se repararem têm o mesmo nome, o que possibilita ao utilizador apenas seleccionar 1, caso o masculino é seleccionado o feminino será desmarcado. Poderia ser também do tipo checkbox que cria caixas de validação.
No Terceiro elemento temos uma textarea, que é uma caixa de texto multilinha, ou seja permite ao utilizador visualizar correctamente uma mensagem que está a ser escrita. Os seus atributos indicam a largura em caracteres e a altura da caixa. O atributo de largura também pode ser usado em campos de texto ou password.
Por fim tems um input do tipo submite que irá criar um botão de submissão de dados, o seu atributo value indica o que irá surgir escrito no botão como texto. Existe outro elemento semelhante, do tipo reset, que permite criar um botão que repõe todos os valore do formulário.

Mas para onde vai essa informação toda?

A TAG form possui também atributos que permitem indicar o tipo de envio de dados, para onde ou por quê podem ser processados e o nome do formulário

Código:

Neste exemplo o formulário de nome input, possui uma acção, os dados serão processados por um ficheiro *.asp que os receberá por método GET, esse ficheiro é responsavel por gerir a informação enviada pelo HTML.

OS métodos POST e GET serão vistos noutro capítulo. É de referir que muito mais existe em torno de elementos para as form, tais como as Label, fieldset ou as TAG contidas no seu interior as TAG que permite criar um menu do tipo drop down (uma lista) para o qual o utilizador seleccionar determinado dado.

Mas então como sabe, no fim de contas, o Browser de que tipo de HTML o meu documento é processado?

O DocType trata de informar qual a versão do HTML, a encriptação de caracteres entre outros dados ao Browser.
No HTML 4 existe 3 tipos de Doctype

Strict – por exemplo –>
Nos documentos strict autores podem conseguir ricos documentos em acessibilidade que facilmente se adaptam as folhas de estilo (CSS) em várias situações, Contudo em Browser mais antigos é propício a erros por falta de suporte dos mesmos. Neste tipo de documento TAGs como as frame e a font por exemplo não são suportadas, visto que o aspecto enfim estilo da página ficará ao cuidado das folhas de estilo.

Transitional – por exemplo –>
Em transitional, tal como diz o nome, teremos a transição do HTML 4 e de todas as TAG que decaem em uso, assim todo o suporte será dado.

Por fim para as frameset — contudo como dito anterioramente não aconcelho frames
frameset – por exemplo –>

O Doctype tem que ser declarado no início do documento, ele ficará antes mesmo da TAG HTML como no nosso exemplo final

Código:

O meu primeiro site estruturado

Nome:
Sexo:	Masc. Feminino
Mensagem:

Muito mais existe em torno deste assunto, como já aconselhado peço a quem fique interessado para pesquisar pelo google, tenho a certeza que encontrará mais informações necessárias.

Ok tou cansado e vou dormir, estou nisso já a umas horas

Neste meu primeiro tutorial aprendemos que para criar uma página de Internet dependemos do HTML, este possibilita ao Browser estruturar correctamente uma página. Podemos com o HTML formatar texto, tal como se fosse no Word e inserir imagens. Vimos que a melhor forma de colocar elementos numa página HTML era com uma estrutura base de uma tabela e que essas são tão práticas que podemos inserir tabelas dentro de tabelas.

O HTML tem ainda centenas de coisas a oferecer, pesquisem um pouco na internet e descobrem como muito facilmente poderão alterar a cor de fundo da página ou mesmo inserir uma imagem de fundo, como colocar elementos de multimédia ou alterar a codificação da página e acerca das Meta TAG. Poderão ordenar elementos em listas e muito mais.

Compreendam que isto é um tutorial introdutório, existe muito mais que conversar acerca do HTML e muito mais para aprender. Apenas é importante referir que há elementos do HTML que não aconcelho a usar e que tem caido em uso, que são as Frames.. pesquisam acerca delas e descobrem porque nas convenções actuais não se devem usar.

Digital Press

Introducção ao WebDesign [HTML]

isto é um heading ou seja um título 1

…

Scripts

SpyTerminator

Abertura !

Mini-Logo

Tutoriais “Hot’s”