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

Paragraphs and spans

First off, I want to apologize for not updating this sooner. I ended up getting sick and stayed off of the computer till I was feeling better. Also another note, PLEASE feel free to test out the codes I go over in the comment section for practice. I am not sure if people are missing that part at the bottom of each part.

UPDATE: I mentioned previous that paragraphs can text align. THEY CANNOT. Only divs can. I will make a tutorial about text aligning.



Paragraphs

Paragraphs are pretty simple, they act exactly like a paragraph in a book. They are used for normal text. Half the time you don't really need a paragraph tag- you can get the same effect by simply hitting the enter key twice. So why use it? On websites, there is no SEO benefit in using a paragraph tag or not using it and using the break line tag. For Weasyl you won't need it either UNLESS you want to alter all the text in the paragraph tag. For Weasyl, this includes color.

Paragraph tags naturally have a margin top and bottom to them.

The code

<p>This is a paragraph</p>
<p>This is a second paragraph</p>

That renders this:

This is a paragraph

This is a second paragraph


You can get the same results by doing this:

The code

This is like a paragraph

This is like a second paragraph


That renders this:

This is like a paragraph

This is like a second paragraph




Spans

Spans are blank tags- in the sense that there is no prebuilt styling to them. They do nothing on their own without additional styles applied to them. They can wrap around words, sentences, paragraphs. They can be within a paragraph tag. Spans shouldn't be placed on the outside of a paragraph tag, as there is no point in such action.

The code

<span>This is a span by itself. See no difference?</span>

That renders

This is a span by itself. See no difference?

What can be applied to spans? On Weasyl, so far only colors.




Altering the <p> and <span> tags

With Weasyl you can alter a paragraph's color and it's alignment.

Color

So far, this is the only inline style function you can do on Weasyl. You can add colors to paragraphs and spans. To add a color style, within the element add: style="color:COLOR CODE HERE;"

The breakdown

<p style="#FFFF00;">TEXT HERE</p>
style - is the styling attribute, this says that a styling property is going to affect the paragraph element it is within
=" " - properties of the attribute go into the quotes
color: - this is a property. This says that the styling property will be to change the text color
#FFFF00; - the text color will be #FFFF00. every property within style MUST end with a semi-colon!!!!

Codes

<p style="color:#FF00FF;">Here is a color style in a paragraph</p>

<p>There is <span style="color:#FF4500;">a span in</span> this paragraph</p>

<p>This <span style="color:#9ACD32;">paragraph</span> has <span style="color:#2E8B57;">two</span> spans</p>

There <span style="color:#4682B4;">are</span> a <span style="color:#4682B4;">few</span> s<span style="color:#4682B4;">pa</span>ns in this sen<span style="color:#4682B4;">tence.</span>

<span style="color:#6A5ACD;">This whole sentence is a span.</span>

That renders

Here is a color style in a paragraph

There is a span in this paragraph

This paragraph has two spans

There are a few spans in this sentence.

This whole sentence is a span.




Practice!

Now use the comments below to practice!

Part 2

Part 4

Let's learn HTML for Weasyl! part 3

ManaPuddingFox

3 February 2014 at 16:22:57 MST

Journal Information

Views:
973
Comments:
19
Favorites:
16
Rating:
General

Tags Modify

Edit Tags


Comments

  • Link

    Whee Colours X3

  • Link

    **

    Useful.

    **
  • Link

    Right-aligned or the other alignments don't seem to be working in your example there.

    [ This example ] is a colored acronym link with inline styling between the <a> and </a> tags.

    <a href="https://www.weasyl.com/~shadwolf"><span style="color:#C93824;"><b>[ This example ]</b></a></span>

    • Link

      Weird! It was working in the preview..... I'll take a peek at it.

      I also realized that inline style can also be used for headers, so I will be making a "bonus" tutorial with everything people can color. I can also mention it in the next tutorial- which is links~

    • Link

      Test test test

      • Link

        Ooooooooo, tis a bug...... it doesn't work! Preview shows it does though.

        • Link

          OH I SEE goes to fix

          • Link

            Figured out whats wrong? :o
            I would of thought this to be the only way of formatting?;

            <div class="align-center"> TEXT EXAMPLE</div>

            TEXT EXAMPLE (<div> format)

            TEXT EXAMPLE (<p> format)

            • Link

              Yup! Seems you can only do it with divs. No paragraphs.

  • Link

    Practicing! Yay this is so helpful!

    Thank you very much! :D

    • Link

      Awww, the green color I chose didn't work :c

    • Link

      You are welcome! Hmmmm, how did you put in the green color?

      • Link

        Same as the Purple o:
        Maybe I messed up and didn't notice ^^

  • Link

    This will be my default comment text. I LOVE SMALL TEXT.

    • Link

      Did you do that with style="font-size:value;" ?

      • Link

        No, I used. the < sub > code. uvu

        • Link

          ohhhhhhhhh!
          Another tag that Weasyl lets ya use. Neato!