11:30 PM HTML Básico - Começando sua página |
 Começando sua páginaPara criar suas próprias páginas não é necessário um vasto arsenal de ferramentas, apenas um editor de texto e um navegador já são suficientes. Para um iniciante é até melhor que não sejam usados recursos muito complexos, eles podem fazer com que muitos detalhes triviais, mas importantes, passem despercebidos. Para o nosso curso, usaremos um editor de texto simples de sua preferência (como o kwrite, o gedit ou o Mousepad). Recursos como o syntax highlighting (ou destaque de sintaxe) são realmente úteis durante a criação da sua página ao mesmo tempo que não "fazem o trabalho" por você, então é prudente que você deixe-o ligado. Qualquer navegador que tenha interface gráfica serve para o nosso curso, fique a vontade para escolher o de sua preferência. Começaremos com algo bem simples, abra o editor de texto e insira o seguinte <html> <head> <title>Título da página</title> </head> <body> Essa é a minha primeira página. <b>Esse texto está em negrito.</b> </body> </html> Salve o arquivo como teste.html e abra com um navegador. Você verá o seguinte  Agora vamos explicar algumas coisas sobre o exercício acima. Primeiramente, tudo que estiver entre os sinais de menor que e maior que ('<' e '>'), incluindo eles são chamadas 'tags'. As tags são partes importantes em documentos HTML, elas são as responsáveis por toda a formatação do texto. Com elas você pode dividir o documento em área de cabeçalho e corpo, colocar títulos, criar tabelas, divisões, formulários e ainda formatar trechos específicos do texto, como a parte em negrito acima. A primeira tag <html>. Ela diz ao navegador que esse ponto marca o início de um documento HTML, enquanto que a última tag </html> diz a ele exatamente o que é esperado, que esse é o fim do documento HTML. O texto que está compreendido entre as tags <head> e </head> é informação sobre a área de cabeçalho, como você pode perceber com <title> e </ title> onde o texto que está entre essas tags aparecerá no título da janela do navegador. Prosseguindo, temos as tags <body> e </body> que são responsáveis por guardar os dados referentes ao corpo do documento. Isso significa que o texto que estiver entre elas será exibido pelo navegador. Por fim, as tags <b> e </b> farão com que o texto entre elas seja exibido em negrito (em inglês, bold). Você já deve ter percebido que as tags utilizadas sempre têm um "fechamento" como por exemplo, <html> -> </html>, <head> -> </head> e <body> -> </body>. Isso realmente é valido para uma grande quantidade delas, mas não será onipresente, portanto fique atento. Uma consideração a ser feita sobre as tags é que elas não são sensíveis à caixa, o que significa que <b> é o mesmo que <B> embora as convenções atuais incentivem o uso de todas as tags em letras minúsculas. Então, para seguir os mais novos padrões web você deve usar letras minúsculas. O padrão xHTML demanda necessariamente o uso delas. Uma outra questão que pode surgir é sobre a extensão dos arquivos. Antigamente, muitos sistemas não permitiam salvar extensões que tivessem mais do que três caracteres e por isso era comum ver arquivos com nomes como 'index.htm' ou 'home.htm'. Hoje em dia é raro encontrarmos um sistema moderno que não permita extensões com um número de caracteres que vai muito além de três, logo é totalmente aceitável usar 'index.html' ou 'home.html' como é o caso do nosso último exemplo (teste.html). Os espaços utilizados para separar uma palavra da outra aparecerão normalmente na sua visualização, porém, caso você use mais de um espaço, eles não serão considerados. Para que isso ocorra, é preciso usar uma tag especial. Trataremos agora dos elementos HTML. Considerando o nosso último exemplo, '<b>Esse texto está em negrito</b>' é um elemento onde: 1) o elemento HTML inicia-se com a tag de início '<b>'; 2) o conteúdo do elemento é 'Esse texto está em negrito', e; 3) o elemento HTML termina com a tag de fim '</b>'. Também é um elemento HTML o seguinte trecho: <body> Essa é a minha primeira página. <b>Esse texto está em negrito.</b> </body> O início do elemento é '<body>' e o fim '</body>'. Um detalhe importante a ser mostrado aqui é o que diz respeito à acentuação. Você deve ter notado algumas coisas "estranhas" nos exemplos acima, como 'é' ou 'á'. Essas são referências para os caracteres especiais como 'é' ou 'á' no exemplo acima, mas que também são utilizados em outros casos. O uso deles se deve ao fato de que alguns caracteres são reservados, facilmente perceptível em '<' e '>' que servem para abrir e fechar tags. O que faríamos para inserir esses caracteres em um texto dentro do HTML? Usamos referências especiais para tal, seguindo o exemplo '<' e '>'. Falaremos mais sobre eles na hora devida. Usaremos agora algumas tags para tornarmos nosso texto mais complexo. Abra o editor de textos e crie o arquivo 'teste2.html'. Escreva o código a seguir. Cabeçalhos, parágrafos e quebras de linha <html> <head> <title>Exemplos de texto com cabeçalho, parágrafos e quebras de linha</title> </head> <body> <h1>Esse é um cabeçalho muito grande</h1> <h2>Esse é um cabeçalho um pouco menor, mas bem grande ainda</h2> <h3>Esse é um cabeçalho nem tão grande assim</h3> <h4>Esse é um cabeçalho médio</h4> <h5>Esse é um cabeçalho pequeno</h5> <h6>Esse é um cabeçalho muito pequeno</h6> <hr /> <p>Agora faremos um parágrafo. A tag '<hr />' no código serve para inserir uma linha horizontal, você pode vê- la acima.</p> <p>Note que ao criarmos outro, temos uma linha branca adicionada entre eles</p> Agora o texto está sendo escrito diretamente no corpo do documento, sem nenhuma formatação. <br /> Use a tag vazia '<br />' para quebrar linhas (saltar linhas) senão o seu texto vai ficar bem estranho. <!-- Finalmente, esse é um comentário. O que você escrever aqui não será mostrado no documento exibido pelo navegador, mas pode ajudar a entender o que você quer fazer com o código. --> </body> </html>  Agora vamos explicar um pouco mais sobre as tags usadas nesse exemplo. Preservamos a mesma estrutura de '<html><head><title></title></head><body></body></ html>', mas acrescentamos diversas outras tags. As que se iniciam com o 'h' e são seguidas por um número de 1 a 6 ('<h1>' e '<h4>', por exemplo) servem para fazer um cabeçalho, um texto que se destacará do restante. O número determina o tamanho do mesmo, quanto menor o número, maior a tipografia. A tag '<hr />' serve para inserir uma linha horizontal ao longo de todo o documento enquanto a '<br />' apenas salta para a próxima linha. Uma observação sobre essas duas tags é que ambas podem ser escritas da seguinte maneira: '<br>' ou '<hr>'. A razão pela qual se coloca a barra no final dela é que elas são tags vazias, isto é, não precisam de uma tag para iniciá-las e outra para terminá-las. Os novos padrões da web determinam que toda e qualquer tag deve ser fechada, incluindo as tags vazias. Por isso colocamos a barra no final, para indicar que ela se inicia e se fecha nela mesma. Dessa maneira, garantimos que nosso código possibilite sua reutilização no futuro, quando as novas normas estiverem em vigor. Além dessas tags temos os parágrafos, representados por '<p>' e '</p>'. O texto compreendido entre elas será colocado como um parágrafo separado e ao término da tag uma nova linha será inserida.Fora isso, vale ainda comentar no momento sobre os caracteres especiais utilizados. Temos vários deles nesse exemplo: 'é', "é" 'ç', "ç" ''', "'" '<', "<" '>', ">" 'õ', "õ" 'ê', "ê" são alguns deles. Ao final da apostila teremos uma tabela mostrando cada um deles. Com base no que vimos até aqui, crie um arquivo chamado "seu_nome.html", não esqueça de colocar realmente o seu nome ;). Dentro dele, faça algo dizendo quem é você, seu nome, sua idade, o que faz da vida e qualquer outra coisa que quiser dizer. Não se esqueça de usar as tags que você viu até agora. No final desse documento você verá alguns exemplos dos exercícios que serão passados aqui. Caso precise de alguma referência, não hesite em consultá-los. Algumas tags apresentam atributos que podem ser modificados por você à medida que achar necessário. Veremos alguns exemplos abaixo, tomando como ponto de partida o exemplo de apresentação usado no exercício anterior. <html> <head> <title>Página do Gallois</title> </head> <body> <h1>Olá, seja bem-vindo à minha webpage</h1> <hr /> <p>Meu nome é Felipe Gallois e sou estudante de Ciência da Computação na UDESC. Eu sou bolsista do projeto Fome-Zero em Joinville e responsável por fazer a apostila do curso de criação de páginas web.</p> Caso você encontre algum erro, tenha alguma crítica ou sugestão para a melhoria deste material, mande um e-mail para mim:<br /> felipe@gallois.us<br /><br /> Até a próxima. </body> </html>  Vamos agora alterar alguns atributos, começando pelo cabeçalho. Altere <h1>Olá, seja bem-vindo à minha webpage</h1> para <h1 align="center">Olá, seja bem-vindo à minha webpage</h1> Em segundai, altere <body> para <body bgcolor="blue">  Abra o arquivo e veja as modificações. O que ocorreu efetivamente? Ao inserir o atributo 'align="center"' na tag '<h1>' você solicitou que o texto fosse alinhado no centro da página. No caso do corpo do documento, o atributo 'bgcolor="blue"' quer dizer que você irá alterar a cor do plano de fundo (background color ou bgcolor) para azul (blue). Note que os atributos preferencialmente devem ser escritos em letras minúsculas, novamente para atender às novas convenções. Os valores dos atributos devem sempre estar entre aspas, simples ou duplas, é indiferente. Fique atento apenas ao caso de você querer usar um valor de atributo que tenha aspas, onde você precisará alternar as duas para poder alcançar o resultado desejado, por ex. name='Edson Arantes "Pelé" do Nascimento'. |
|
|
| Total de comentários: 0 | |