Format Text In Blogger Posts

domingo, 27 de abril de 2008

O que são tags HTML?

O que são tags HTML?

Você já está em condições de aprender a chave do HTML - tags.
"Tags"?

Tags são rótulos usados para informar ao navegador como deve ser apresentado o website.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".

Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/".

Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.

Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />.

HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.
Você pode mostrar alguns exemplos?

OK, a tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser mostrado em negrito. (O comando "b" é uma abreviação para "bold" - negrito.)

Exemplo 1:

<b>Este texto deve ser em negrito.</b>

Vai ser apresentado no navegador, como mostrado a seguir:
Este texto deve ser em negrito.

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível e aquele apresentado com o maior tamanho de texto, <h2> o cabeçalho de segundo nível e aquele apresentado com tamanho de texto um pouco menor e <h6> o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto.

Exemplo 2:

<h1>Este é um título</h1>
<h2>Este é um sub título</h2>

Vai ser apresentado no navegador, como mostrado a seguir:
Este é um título
Este é um subtítulo
As tags devem ser escritas com letras maiúsculas ou minúsculas?

Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas.<COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com minúsculas.
Onde devo colocar todas estas tags?

Você deve escrever suas tags em um documento HTML. Um website é constituido por um ou mais documentos HTML. Quando você navega na Web, você está abrindo diferentes documentos HTML.

sábado, 8 de dezembro de 2007

Format Text In Blogger Posts

Settings Formatting

Settings----->Formatting is where you can set a lot of format settings for your Blogger posts. The most important of these is to set Convert line breaks to Yes and save. Now when you press Enter key on keyboard while in the post editor this will enter <br/> in your post and create spacing between the text. Also you should enable float alignment so that your images and text can be aligned properly.

HTML CODE FOR TEXT EFFECTS

While creating a post in Post editor the tool bar in the top frame gives icons to format your text as bold, italic etc. However if you do not have this toolbar use the following HTML codes in Edit Html tab of Post Editor :

To Make text Bold : <B>BOLD</B>

To make it Strong use : <strong>
TEXT
</strong>

To make it Big use : <big>
TEXT
</big>

To make it Small use : <small>
TEXT
</small>

To Emphasize text use : <em>
TEXT
</em>

To make it Italic : <I>ITALIC</I>

To make it Underlined : <U>Underline</U>

For a Strikeout effect : <S>Strikeout</S> You can also use <del> since <S> has been deprecated.

For a line on top of your text : <span style="text-decoration: overline">Overline</span>

To Superscript Text : <SUP>Superscript</SUP>

To Subscript Text : <SUB>Subscript</SUB>

To change font colour : <font color="COLOR">Colored Text</font>

Instead of "COLOR" you can also input the exact hex number of the colour you want. To get the hex number if colors go here.

To Highlight text or give it a background color : <span style="background-">TEXT</span>

Replace "COLOR" with the name of the color like "RED" "YELLOW" etc.

To change font size : <font size="NUMBER">TEXT</font>

Put in a "NUMBER" from 1 to 7.

To change the font : <font face="NAME">TEXT</font>

For font face NAME choose from : Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. Remember to choose a universally available font face or your viewer will not be able to see it.

To give a heading to your text : <h2>TEXT</h2>
Choose from H1 to H5. You can use this to create sub headings by using H1, H2, H3, etc... in sequence.

For Preformatted text useful in displaying poetry use :

<pre>
POETRY
</pre>

For example :

There once was a man from Aruba,
Whose favorite hobby was scuba.
Every day he would wish,
He could spear a big fish.
But settled instead for canned tuna.

To show the meaning of a word when you hover the mouse over it use the 'title' attribute like this :

<abbr title="RED CROSS">RC</abbr>

This will look like this :

RC

Hover your mouse over 'RC' to see the effect.

<acronym title="SOUTH AMERICA">SA</acronym>

This will look like this :
SA
Hover your mouse over 'SA' to see the effect. It works in Firefox 2 and Internet Explorer 7.

INDENT PARAGRAPH

To INDENT TEXT at start of a paragraph insert this styling code :

p {text-indent: 1cm}

immediately before this :

]]></b:skin>

tag in your template. Then when you are starting a paragraph in the Post editor put this code in Edit Html tab :

<p>
PARAGRAPH
</p>

You can also use this code in Edit Html tab of Post Editor immediately before starting a paragraph :

<p style=" text-indent: 20px;">PARAGRAPH <p>

and close it as shown above after the PARAGRAPH. For example :

Maecenas id justo. Proin ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tellus odio, aliquet vel, rhoncus nec, aliquet faucibus, magna. Phasellus tellus sem, aliquet aliquet, pellentesque sed, facilisis nec, tellus

DROP CAPS

You can also use Drop Caps at the start of your paragraph like this :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis, turpis ut facilisis convallis, nulla sem feugiat tellus, in tempus mauris urna non lacus. Duis pellentesque. Cras tempor iaculis lacus. In pharetra elementum purus. Ut odio lectus, pharetra eu, luctus ut, fringilla eget, neque. Ut et augue ac magna gravida varius. Suspendisse at odio.

OR you can use big first letter at the beginning of your paragraph like this :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis, turpis ut facilisis convallis, nulla sem feugiat tellus, in tempus mauris urna non lacus. Duis pellentesque. Cras tempor iaculis lacus. In pharetra elementum purus. Ut odio lectus, pharetra eu, luctus ut, fringilla eget, neque. Ut et augue ac magna gravida varius. Suspendisse at odio.

For the code to implement the above go here.

MARQUEE EFFECTS

To create a moving text effect you can use the <marquee> tag. For example :

<MARQUEE>
Tips For Bloggers! <IMG SRC="http://ezeeblog.googlepages.com/blogtips.png" HEIGHT=40 WIDTH=100 ALT="Tips For Bloggers">
</MARQUEE>

The above code will produce the following effect :
Tips For Bloggers! Tips For Bloggers

You can use the following parameters to define your marquee :

* WIDTH: how wide the marquee is
* HEIGHT: how tall the marquee is
* DIRECTION: which direction the marquee should scroll
* BEHAVIOR: what type of scrolling
* SCROLLDELAY: how long to delay between each jump

* SCROLLAMOUNT: how far to jump
* LOOP: how many times to loop
* BGCOLOR: background color
* HSPACE: horizontal space around the marquee
* VSPACE: vertical space around the marquee

Format Text In Blogger Posts

domingo, 27 de abril de 2008

TAGS' BÁSICOS

O que são tags HTML?

sábado, 8 de dezembro de 2007

Format Text In Blogger Posts

Blog Archive