Conhecimento mínimo de html necessário





A grande maioria dos CMS possui um editor de html embutido para a entrada de textos. Entretanto, normalmente é mais confortável e seguro escrever em um editor de textos e depois colar a versão final no CMS. Nesse método não há o risco de a conexão cair e todo o trabalho ser perdido. (Estou escrevendo isto no Quanta+...)

Evite usar editores WYSIWYG como FrontPage e Dreamweaver. Esse tipo de software, se não houver cuidado, acabam gerando código sujo que aumenta o peso da página sem necessidade e pode confundir o CMS.

Procure um editor de html que trabalhe com texto puro como o Quanta+, Bluefish e o HomeSite. Eles fazem tudo automaticamente tb. Não é importante decorar os comandos, mas é importante aprender a ler o código html, se vc quiser personalizar seu site.

Use o exemplo abaixo como referência e dê uma olhada no código fonte de várias páginas diferentes que vc vai acabar sacando. (No mozilla é só ir até o menu superior e apertar em "view" e depois em "Page Source"... No M$ IExplorer eu não lembro... mas é fácil de achar).

Note que o browser simplesmente lê a página em de cima para baixo e segue as instruções de "tags" (as coisas que ficam entre < > </>) que marcam o conteúdo. Por exemplo, para existe uma tag para fazer links, deixar o texto em negrito, itálico, etc.

Basta ir seguindo o código fonte e comparar com o que aparece no ar. Com um pouco de paciência vc vai conseguir aprender todo o conhecimento de HTML que achar necessário.

Exemplo:

"<!--" e "-->" marcam os comentários do autor do código, por exemplo:
<!--este é um cabeçalho que declara a versão do html da página-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--Aqui começa o código HTML mesmo.-->
<html>
<!--Esta primeira parte entre os tags <head></head> é lugar das referências a recursos externos e metadados da página.-->
<head>
<title>Titulo da Página</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > <link rel="stylesheet" type="text/css" href="folhadeestilocss.css">
</head> <!--"body" marca o que vai ser efetivamente publicado-->
<body>
A tag mais importante é o que faz links a "href", o código que faz links:
<A href="http://br.br101.org">br101.org</A>

Vira:

br101.org, um link com o texto "br101.org" que leva para o endereço http://br.br101.org

Um cuidado que melhora a usabilidade e facilita o trabalho dos mecanismos de busca é o uso da variável "title" no href:

<A href="http://br.br101.org" title="Diário de um
 jornalista independente & amigos">br.br101.org</A>

Para entender o que ela faz passe o mouse em cima do link abaixo:

br.br101.org

As outras tags são bem mais simples de usar, veja alguns exemplos:

<h1>Titulo h1</h1>

Titulo h1

<h2>Titulo h2</h2>

Titulo h2

<h3>Titulo h3</h3>

Titulo h3

<strong>Bold</strong>=> Bold

<em>Itálico</em>=> Itálico

<u>Sublinhado</u> => Sublinhado

</br> => Quebra de linha

Parágrafo => <p>Parágrafos não são a mesma coisa do que colocar <br>'s antes e depois de um texto</p>

Tabelas são o método mais antigo de colocar textos e imagens de maneira não linear. Atuamente, é mais elegante definir colunas, menus, caixas no CSS (Cascade Style Sheet), mas as tabelas continuam sendo usadas e são um recurso ainda útil. Veja como é o código...

<table width="100%" cellspacing="2" border="1" 
cellpadding="2" align="left" bgcolor="yellow">
  <tbody>
    <tr>
      <td>campo1</td>
      <td>campo2</td>
    </tr>

    <tr>
      <td>campo2</td>
      <td>campo4</td>
    </tr>
   </tbody>
</table>

...e o resultado é

campo1 campo2
campo2 campo4


<!--Todas as tags precisam ser fechadas. Depois do "/body" nada mais é publicado-->

</body>
</html>

Se quiser saber mais dê uma olhada nesta aula do Prof. Jorge L. deLyra no site do IME-USP e procure no google. Há milhões de tutoriais de html (este é bacana tb) espalhados pelo mundo e é um treco razoavelmente fácil de entender mesmo sem nunca ter programado nada.

Comentários

eu vi a pergunta "oi, estou fazendo um site" e então gostaria de obter essa resposta se possível for!
obrigaodo e gostaria de agradecer pela existência de vocês em disponibilizar esse vasto conhecimento pra os
iniciantes e os leigos nesses assuntos!

Oi,

Já visitei muitos sites de tutoriais, mas não encontrei quem possa me explicar, ou seja as tags:
-como fazer a largura e a altura total das paginas, em que elas apareçam de maneira correta nos monitores de qualquer tamanho;
-como configurar esse tamanho em frames?
Obrigada,
Aprilo.

O Quanta+ e o Bluefish são editores parecem nao rodar no rwindows e o Home Site é pago. Alguem conhece outro pro RWINDOWS ? Estou falando bobagem ?

Usa o EditPlus cara ...é tao pequeno que cabe num disquete !

Eu acho q um site tb pode ser feito no Dreamweaver
Pois seus recursos são enormes e acho que o Dreamweaver é a melhor opçao
Em poucos dias me maravilhei no Dreamweaver o o resultado foi gratificante

Eu quero o código pronto que descreva exatamente a essa caixinha pra postar comentarios eu quero saber como ela é feita pos ja to ficando DOIDOOOOOOOOOOOOOOOOOOOOO

alguem me ajude: lexus136@hotmail.com

Páginas

Comente

Filtered HTML

  • Quebras de linhas e parágrafos são feitos automaticamente.

Plain text

  • No HTML tags allowed.
  • Endereços de páginas de internet e emails viram links automaticamente.
  • Quebras de linhas e parágrafos são feitos automaticamente.

Leia antes de postar

Atenção:

Não há censura de opinião nos comentários, mas o vc é o responsável pelo que escrever. Ou seja, aqui vale o Yoyow (You Own Your Own Words).

Lembre-se: Opinião é diferente de informação.

Informações sem fonte ou que não puderem ser checadas facilmente podem ser deletadas.

Serão apagadas sem dó mensagens publicitárias fora de contexto, spam usado para melhorar a posição de sites e outras iniciativas de marqueteiros pouco éticos.

Grosserias desacompanhadas de conteúdo, coisas off-topic e exagero nas gírias ou leet que dificultem o entendimento de não-iniciados tb não serão toleradas aqui.

Vou apagar sumariamente todos os comentários escritos inteiramente CAIXA ALTA, mensagens repetidas e textos que atrapalhem a diagramação do site.

Além de prejudicar, a leitura é falta de educação.

Não publique tb números de telefone, pois não tenho como checá-los. As mensagens com números de telefone serão apagadas inteiras.

Obviamente, qq conteúdo ilegal tb será deletado sem discussão.

Evite também mensagens do tipo "me too" (textos apenas concordando com o post anterior sem acrescentar algo à discussão).

Clique aqui para ver algumas dicas sobre como escrever um texto claro, objetivo e persuasivo.

Todas os comentários são considerados lançados sobre a licença da Creative Commons.

Se você não quer que seu texto esteja sob estes termos, então não os envie.

Creative Commons License
br101.org by br101.org is licensed under a Creative Commons Attribution-Share Alike 2.5 Brazil License. Nenhum produto M$ foi usado na construção destas páginas.
Este site usa Drupal (Apache, PhP e MySql). Se vc quiser tentar aprender a fazer um site igual a este usando softwares livres, vá até o weblivre.br101.org e leia:
Como fazer um website de verdade?
Powered by Drupal