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

tamyres (não verificado)

sab, 03/19/2005 - 13:21

oi...
eu gostaria de saber melhor como criar um site...

não tenho um objetivo certo...mas espero que vocês tenham como me explicar.

Obrigado

china

sab, 03/19/2005 - 19:39

O primeiro passo é ler este texto como indicado acima:

http://geocities.yahoo.com.br/cesarakg/smart-questions-pt_BR.html

[]s
China

Andresa (não verificado)

ter, 06/14/2005 - 11:48

fotos em um site que estou criando!!!
Coloquei as fotos em tamanho pequeno e qdo clico elas aumentam, mas queria que junto com essa caixa que se abre maior eu pudesse escrever (colocar do que se refere a foto)...
Espero que vcs me retornem o e-mail.....
desde já obrigada!!!!!

china

sab, 06/18/2005 - 15:33

Vc define o tamanho da foto nos parãmetros no tag .

Vc pode deixar sem nenhum que a foto aparece no tamanho original.

Vc está usando porcarias como Frontpage ou Dreamweaver?

Tente usar um editor de html puro (Quanta, bluefish ou homesite) que vc não vai ter esses problemas.

[]s
China

Valquíria (não verificado)

seg, 08/29/2005 - 20:33

OI! Primeiro queria dizer que adorei a iniciativa deste site. Eu preciso muito saber fazer um. Queria saber todos os códigos... será q vc poderia me mandar ou indicar um programa q tenha todos.. não sei..algo assim! Muito Obrigada!

china

sab, 09/03/2005 - 08:36

http://geocities.yahoo.com.br/cesarakg/smart-questions-pt_BR.html

leonardo (não verificado)

dom, 01/01/2006 - 15:08

oi estou fazendo uma pagina e esta sendo feita com tabela mas estou apanhando para abrir o link na tabela principal(meio) tem algum codigo que eu posso colocar para quando eu clicar no link abrir na tabela do meio

china

seg, 01/02/2006 - 08:33

Tabelas e links são entidades separadas. Não entendi o q vc quer fazer.

Esssas mini-dicas de html foram criadas para ajudar a tentar entender como modificar templates dos vários CMS comentados neste site.

Muitos ainda usam tabelas, mas a tendência é acabar com elas de uma vez e usar só o css para definir os espaços destinados a cada tipo de conteúdo.

De qq modo, se vc estiver desenhando páginas a partir do zero acho q vale a pena vc tentar fazer usando só css.

É a técnica mais atual, elegante e leve.

Dê uma olhada em:

http://www.codigofonte.com/css/

http://tableless.com.br/aprenda/faq/

Cogito ergo doleo

[]s
China

Ivana (não verificado)

seg, 06/05/2006 - 14:01

Oi,
Estou fazendo um site para a cidade onde moro e gostaria de saber como instalar um espaço como este para que as pessoas deixassem seus comentários, falassem o que quiserem...tenho procurado bastante no google, mas nem sempre ele acha o que queremos,às vezes ele faz busca que não tem nada a ver com o que solicitamos...
Obrigado pela atenção

china

ter, 06/06/2006 - 08:04

Dê uma olhada nos CMS... a maioria tem opções para disponibilizar comentários.

Vc precisa ler o que está escrito neste site e o texto sobre como fazer perguntas.

http://geocities.yahoo.com.br/cesarakg/smart-questions-pt_BR.html

Páginas

Comente

More information about text formats

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