Na postagem anterior demos uma rápida olhada nos principais componentes de uma página; Hoje vamos colocar a mão na massa e produzir nossa primeira página.
Alguns programas facilitam a edição do código, eu gosto muito do Pspad, um editor muito bom é o melhor, é grátis. Para baixá-lo acesse o endereço http://www.pspad.com/. Vou utilizá-lo para construção da primeira camada de nossa página de testes.
Para instalá-lo basta baixar o executável (clique aqui para baixar), clicar duas vazes sobre o arquivo baixado e seguir as instruções que se seguem. Estes procedimentos são bem simples mas em caso de duvidas deixe um comentário que vou esclarecer melhor.
Vale lembrar que não e preciso um editor específico para edição de uma página, pode ser usado qualquer editor de texto como o bloco de notas do Windows. Indiquei o PSPad apenas porque ele facilita o trabalho, completando algumas coisas, tem uma ajuda muito boa e colore o código como mostrado nos exemplos, assim fica mais fácil não se perder.
Deixando a conversa de lado vamos trabalhar. Nossa primeira missão é criar um Currículo on-line. No editor digite a estrutura como no exemplo abaixo.
Como já disse antes, dentro da tag BODY é que devemos colocar o conteúdo, então vamos inserir nosso conteúdo logo após a linha 6.
Prontinho, a primeira página de nosso site esta pronta. A eu esqueci de explicar as tag’s, então vamos lá.
Basta salvar o arquivo com a extensão ".htm" e abri-lo no navegador de internet que quiser.para ver o resultado. A principio achara feio, mas a primeira camada deve ser assim, sem frescuras, somente a informação.
Ate a próxima pessoal.
Alguns programas facilitam a edição do código, eu gosto muito do Pspad, um editor muito bom é o melhor, é grátis. Para baixá-lo acesse o endereço http://www.pspad.com/. Vou utilizá-lo para construção da primeira camada de nossa página de testes.
Para instalá-lo basta baixar o executável (clique aqui para baixar), clicar duas vazes sobre o arquivo baixado e seguir as instruções que se seguem. Estes procedimentos são bem simples mas em caso de duvidas deixe um comentário que vou esclarecer melhor.
Vale lembrar que não e preciso um editor específico para edição de uma página, pode ser usado qualquer editor de texto como o bloco de notas do Windows. Indiquei o PSPad apenas porque ele facilita o trabalho, completando algumas coisas, tem uma ajuda muito boa e colore o código como mostrado nos exemplos, assim fica mais fácil não se perder.
Deixando a conversa de lado vamos trabalhar. Nossa primeira missão é criar um Currículo on-line. No editor digite a estrutura como no exemplo abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Como já disse antes, dentro da tag BODY é que devemos colocar o conteúdo, então vamos inserir nosso conteúdo logo após a linha 6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<h1>José Sarney</h1>
<h2>Objetivo</h2>
<p>
Meu objetivo é ...
</p>
<ul>
<li>Objetivo</li>
<li>Experiências</li>
<li>Formação</li>
<li>Cursos</li>
<li>Interesses</li>
<li>Contato</li>
</ul>
</body>
</html>
Prontinho, a primeira página de nosso site esta pronta. A eu esqueci de explicar as tag’s, então vamos lá.
- DOCTYPE = Define o tipo de documento.
- HTML = Marca o inicio é fim de nosso código.
- HEAD = Marca o inicio e fim do cabeçalho do código, onde inserimos as propriedades do documento.
- TITLE = É o título da página, este título aparece no topo do navegador.
- BODY = Marca o inicio é fim do corpo de nosso documento, ou seja, o conteúdo.
- H1 = Marca o título principal do conteúdo.
- H2 = Marca nosso subtítulo.
- P = Marca nosso parágrafo.
- UL = Início de uma lista.
- LI = Marca cada item da lista.
Basta salvar o arquivo com a extensão ".htm" e abri-lo no navegador de internet que quiser.para ver o resultado. A principio achara feio, mas a primeira camada deve ser assim, sem frescuras, somente a informação.
Ate a próxima pessoal.
Olá Paulo,
ResponderExcluirEstou com algumas dificuldades acredito que você possa me ajudar. Ao tentar postar um código no Blogger, o Blogger encara ele como um código e não como um texto. Você tem idéia de alguma tag que eu coloco antes do texto do código? Tipo uma tag [code] algo assim? Estou perguntando porque você postou aqui no seu blog um código de html e apareceu normalmente.
Abraços e desculpe o incômodo.
Basta usar HTML entities veja abaixo:
ResponderExcluir&.l.t.;./.l.i.&.g.t.;
Basta retirar os pontos e o código acima ficaria como abaixo.
</li>