Let's learn HTML for Weasyl! part 4 by ManaPuddingFox

Text aligning and divs

In my previous tutorial I first wrote that paragraphs can be text align. THIS IS WRONG AND I HAVE FIXED THE TUTORIAL. The preview WILL show it works..... but won't work once you submit a comment, journal, submission, etc. So how do you align? You have to use the div tag.

Ah yes, the div tag, how I love you so when coding a site. These are the backbones used for layout. Don't worry, no big lesson here! They are only used for one main thing here, text aligning. But what exactly is a div? It's a block element, it is a division or section. You can add many elements within a div, like paragraphs, links, headers, and more!

The code

<div>This is a div</div>

<div>
<p>This is a <span style="color:#FF00FF;">div</span> with some stuff in it!</p>
<ul><li>Stuff</li><li>More stuff!</li></ul>
</div>

Which renders

This is a div

This is a div with some stuff in it!

  • Stuff
  • More stuff!

Only divs can be aligned. Weasyl handles text aligning differently then usual. Not too incredibly different but instead of adding a property to the style attribute, they have pre-built classes you can use. I won't go into details about classes and ids are you cannot create your own here.

There are four ways to align: left (default), center, right, and justified. Unless it's a special reason, you don't have to align left as that is the default.

The breakdown

<div class="align-center">TEXT HERE</div>
class - designates we are using the class attribute, we are going to call a class
=" " - class name goes in between the quotes
align-center - class name

The code

<div class="align-left">Aligned Left</div>

<div class="align-center">Aligned Center</div>

<div class="align-right">Aligned Right</div>

<div class="align-justified">Aligned Justified</div>


Which renders

Aligned Left

Aligned Center

Aligned Right

Aligned Justified


What is justified?

Justified is also a text alignment, you may have seen it on a word processor program. What it does is that it tries to align the text to the left and right margins. This is commonly used in newspapers. This often causes gaps between words sometimes. I made this section justified to try and show it off!



Practice!

Use the comments below to test it out yourself!

Part 3

Part 5

Let's learn HTML for Weasyl! part 4

ManaPuddingFox

5 February 2014 at 20:18:29 MST

Journal Information

Views:
538
Comments:
2
Favorites:
10
Rating:
General

Tags Modify

Edit Tags


Comments

  • Link

    You may want to explain what justified means; not everyone knows, and your example doesn't make it obvious!

    • Link

      Yea I was thinking that. I shall add it! ^ ^