|
|
|
|
 |
 |
 |
 |
|
 |
 |
|||
|
 Curso HTML Módulo 01 - Módulo 02 - Módulo 03 - Módulo 04 - Módulo 05
Módulo 01INTRODUÇÃO Hoje em dia a linguagem HTML, usada na Internet, não é um bicho muito feio. Trata-se mais de comandos conveniados do que programação em si, e talvez seja por isso que há uma grande quantidade de tutoriais na rede, já que seu aprendizado não requer nenhum dom especial para entendê-lo. O primeiro passo para se produzir textos em HTML e ter um editor apropriado, que possa facilitar em muito o aprendizado. Segue alguns disponíveis para download na rede:
Arachnophilia TAGS E ARQUIVO HTML - Parte 1 A linguagem HTML é composta por comandos que indicam ao navegador (browser) de como devem ser lidos os textos, por isso para cada arquivo que se inicia, um TAG deve indicar as intruções para o navegador. Esclarecendo, os TAGS são comandos que informam ao navegador determinada ação que ele deve executar, como comparação, já que toda comparação é burra, e como se fossem os comandos Arquivos, Editar e Formatar etc.; do Word. Todo o documento HTML deve ter os seguintes TAGS para leitura: <HTML> </HTML>, que indica o começo e fim de um documento HTML<HEAD></HEAD>, que indica o cabeçalho da página, isto é, o que deve ser lido primeiro. <TITLE></TITLE>, que indica o título da página. Nota: este comando é importante para que o navegante se localize, pois o seu conteúdo constará na parte superior do navegador e no botão de documento aberto da barra de tarefas. Bem vamos exemplificar o que foi dito até agora: A estrutura básica de um Arquivo HTML é: <HTML><HEAD> <TITLE>Bem-vindo ao mundo do web designer</TITLE> </HEAD> </HTML> Vc percebeu que o título (<TITLE>) da página ficou entre o<HEAD>, por quê? Porque o título deve obrigatoriamente estar entre o cabeçalho e deve ser lido primeiro, caso contrário, ele será visto no corpo do texto e sua página, infelizmente, ficará sem nome. Outra coisa, vc percebeu que para cada abertura de um <TAG> há um fechamento</TAG>? Isto!! A barra significa que vc está fechando aquela ação, por isso lembre-se: para cada <AÇÃO> iniciada, ela deve ser fechada com </AÇÃO>, senão ela se prolongará por todo o documento. Vamos a parte dois da nossa aula: escrever um texto, dar cor e trabalhar com fontes diferentes, certo? Como vc sabe em diagramação tudo que é texto chama-se corpo de texto, certo? Bem em HTML não será diferente, só que com uma diferença, o termo usado será em inglês, isto é, BODY=corpo. Tudo o que vc colocar entre o BODY, será lido pelo navegador como corpo de texto e, portanto estará disponível para visualização. Vamos a um exemplo: Inicie os seguintes comandos no seu editor:<HTML> <HEAD> <TITLE>Bem-vindo ao mundo do web designer</TITLE> </HEAD> <BODY> Aqui vc vai usar toda a sua imaginação e talento para criar páginas Hiper visitadas na internet </BODY> </HTML> Agora salve este arquivo com extensão html e visualize-o em seu navegador. Nota: por convênio estebeleceu-se o seguinte - todo arquivo de abertura de qualquer site, deve-se ter o nome index.html, pois esse será o primeiro arquivo procurado pela platarforma do servidor para abrir o seu site e , portanto, a sua primeira página. Outro fator importante, salve sempre os arquivos em letras minúsculas, pois alguns servidores convertem automaticamente para minúsculas. Pronto?... ficou horrível, né? Bem vamos melhorar as coisas. Existem outros comandos que o navegador responde, esses são comandos que dão forma e caraterísticas aos TAGS, conhecidos como atributos. Para vc melhor entender: uma camisa é um TAG; uma camisa amarela é um TAG e um atributo, no caso: amarela, uma camisa amarela, número 3, manga curta, é um TAG e três atributos: amarela, número 3, manga curta. Passando isso para o HTML: o TAG <BODY> pode possuir atributos, que são:BGCOLOR= indica a cor do fundo da página TEXT= indica a cor do texto da página LINK= indica a cor do link a ser visitado VLINK= indica a cor do link visitado Por serem atributos do BODY, eles devem estar próximo a ele, por isso vejamos o exemplo: <HTML> <HEAD> <TITLE>Bem-vindo ao mundo do web designer</TITLE> </HEAD> <BODY BGCOLOR="pink" TEXT="red" LINK="black" VLINK="white"> Aqui vc vai realizar toda a sua imaginação e seu talento em diagramar páginas para a internet </BODY> </HTML> Note: todos os atributos são seguidos do sinal de = e a sua especificação está entre "aspas", o esquecimento de qualquer um deles causará problema para a leitura do navegador. Agora vc pode visualizar o seu arquivo. Gostou? Não? Ora, então mude as cores... por enquanto vc pode ir alterando as cores, mas sempre usando o nome em inglês: green, yellow, gray etc... Porfirio Amarilla - webdesigner
|
|||
|
|||||||||
- HTML
