| join now | shop | freebies & contests | help
     gURL.com  the Web    web search powered by Yahoo!


SHOUT OUT BOARDS

YOUR ROOM


HELP ME HEATHER

SEX ED BLOG



gURL GAMES

QUIZZES



COMIX

PHOTOS



POLLS

VIDEO



BODY IMAGE

SEX

  you are here  >>> FIND OUT > gURL guides  
  related topics  >>>  being yourself  |  d.i.y.  |  school & careers  |  music, movies & media  |  gadgets, tech & more    

 

Left Image
Layout
<<return to list of topics

Now it's time to take that jumble of text and images and organize it.

break tag
A very useful tag is the break tag <br>, which creates a line break just like the return button does when you're typing. You can use it to break up blocks of text, and also to organize images. This tag doesn't require a closing tag, and you can pile them on one after another to make more breaks. It looks like this:

Dear gURL,<br>you are totally freakin cool.<br><br>love,<br>me.<br><img src="http://www.ImageHostingSite.com/ImageName.gif"><br><img src="http://www.ImageHostingSite.com/ImageName2.gif">

Dear gURL,
you are totally freakin cool.

love,
me.

paragraph alignment
You can also use the paragraph tag <p>. This tag is used in places like blogs where you want blocks of text to read like a document. It creates separate paragraphs and is similar to (but not the same as) using 2 break tags in a row:

I want lots of chocolate. Then I want lots of raspberries.<p>Mmmm... raspberries and chocolate...

I want lots of chocolate. Then I want lots of raspberries.

Mmmm... raspberries and chocolate...

Using the paragraph tag, you can align the blocks of text that you create:

<p align="right">I'm really hungry right now.<br> Yup, sure am hungry.<br> When is my lunch break?<br> </p>

I'm really hungry right now.
Yup, sure am hungry.
When is my lunch break?

image alignment

If you want to align images, you can do that within the image tag, like this:

<img src="http://www.ImageHostingSite.com/ImageName.gif" align="right">






When you have images and text in the same document, you might want the text to wrap around, or surround, the image:

<img src="http://www.ImageHostingSite.com/ImageName.gif" align="left">This text is wrapping around the image on the left. You can wrap text around an image on the right, too! Woah... trippy! You know, I make rhymes about wrapping text... some people call me a "wrapper". If I had long hair, you could call me "Wrap-unzel". My favorite song is called "Bohemian Wrap-sody". In today's world, I feel like html gets a bad "wrap".

This text is wrapping around the image on the left. You can wrap text around an image on the right, too! Woah... trippy! You know, I make rhymes about wrapping text... some people call me a "wrapper". If I had long hair, you could call me "Wrap-unzel". My favorite song is called "Bohemian Wrap-sody". In today's world, I feel like html gets a bad "wrap".

PreviousNext
page [ 123456789101112 ]

Right Image

email this feature to a friend:
IM this feature to a friend (AIM only):
tell us what you think of this feature.

  CONNECT EXPLORE gURL.com BY TOPIC ABOUT gURL  
 
shout out boards
gURL newsletter


being yourself
beliefs
body image
brainylicious
dating
d.i.y.
fashion & style
friends & family
health
music, movies & media
school & careers
sex
sports
sucky emotions

contact us
what is gURL?
advertise on gURL
privacy policy
terms of service
help

 
  ADVERTISEMENT

   
   Also... Get your horoscope mailed to you every day!
   Sign up for gURL and Astrology.com's daily newsletter.

 

© iVillage Inc. 1995-2008. All rights reserved.