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

Hello all!

On my previous journal I expressed how happy I was that you can use HTML on Weasyl submissions, comments, and journals. Reason being is, if you don't know, I am a web designer. I work with HTML all day at my job. I am proficient at HTML and CSS. I mainly focus on styling. I also just REALLY like making things pretty. So this was a very nice perk for me. And I saw a few people wanted tips/ refreshers- so I thought it would be nice to have a few journals breaking down some fun things you can do and proper HTML.

You CAN also use markdown formatting- it seems easy enough but I don't know it off hand. The guide is pretty simple though.

NOTE: Be sure to practice in the comments! See the bottom of this journal



Basics and introduction

This will be the lamest of the guides since this is the "follow these simple rules" guide. It's important to show it before I actually show you some tags. What's a tag? It's an element when read by something that supports HTML changes something or adds something (or can remove something). There are a lot of different types of tags out there, some for text, some for formatting, some for images, a lot!

What makes up a tag?
You need brackets, opening and closing <> and a valid element within the brackets for the beginning bracket.

EXAMPLE: <p> , <h1> , <b>

Most tags need an ending tag (I will go over exceptions at the bottom). Ending tags consist of opening and clothing brackets <> a slash / and then the same element within the brackets. The tags opening and clothing MUST MATCH.

EXAMPLE: </p> , </h1> , </b>

Here are some examples of COMPLETE tags

<p>Your text goes here </p>
<h1>Your text goes here </h1>
<b>Your text goes here </b>


Think of BBCode
Most of you know what that is. The general markup of BBCode is the same as HTML.. Beginning tag and ending tag. Bracket, element, bracket to begin. Bracket, slash, element, bracket to end. Only difference are less elements, some different elements, and the brackets used are [] instead of <>

The BBCode for bold is [b] your text in here [/b] - this would make "your text in here" bold. The [b] and the [/b] are beginning and end tags.

[b] is the beginning tag
[/b] is the ending tag

Exception to the rule?
There ARE tags that DO NOT require an ending tag. Only these specific tags can render correctly like this. But what they DO need is a / before the >
So it would be bracket, element, slash, bracket. < element />

EXAMPLE: <img /> , <hr />

That is all that is needed. So for instance, to display an image it would be this:

<img src="URL HERE" />

There is a beginning bracket <
img is the element for "image"
src is the element for "source"
A URL within the src attribute
A slash / , then an ending bracket >

This says "this element will be an image and it's source is here.
If we are yo use this image as the source, and the code above, this is the result:

FINAL UPDATE: Seems images (img tag) will not be supported~



Conclusion for this part

I know this part was DRULE and BORING, but it is REALLY important to type out tags correctly and understand why. We will go over more fun things next time I PROMISE. For practice, let's try these tags:

<b>YOUR TEXT HERE</b> - bolded text like this
<i>YOUR TEXT HERE</i> - italic text like this
<u>YOUR TEXT HERE</u> - underlined text like this

PRACTICE BY COMMENTING IN THIS JOURNAL BELOW



Outline of what we will be going over

Let's learn HTML for Weasyl! part 1

ManaPuddingFox

23 January 2014 at 20:18:34 MST

Journal Information

Views:
1263
Comments:
23
Favorites:
19
Rating:
General

Tags Modify

Edit Tags


Comments

  • Link

    Thaaaaanks

  • Link

    I totally love this feature, I am a (web)designer too so these kind of features makes it extra fun /^_^ Need to apply this in my profile info or something, its super empty atm :P lolol Anywayss very nice of u to share this with everyone else :D

    • Link

      Oh yay! Nice to meet a fellow designer! Yea I should spruce up my profile as well ^ ^

      • Link

        Yaay for designers! ♥Just read ur profile, it already looks neat!

        Pfft need to make some time to actually write something about myself :P I have a huge problem with summarizing myself lolol

        • Link

          ^____^ Aw thanks! Yea writing about me is haaaaaaaaaaaaaard. I may have to revamp mine~

          • Link

            I think its already good! at least peeps can read about u :3

  • Link

    Really nicely written guide. :3

    I should say though you didn't need to put spaces in the shown examples it works fine if you use inline markdown with the ( ` ) key at beginning and end of the HTML code like this example here. ^^

    <h1>title here</h1>

    • Link

      <h1>Testing</h1>

    • Link

      OOOOOOOOOOOO thank you! I am going to re-write this a bit!

      • Link

        You're welcome! :3

        • Link

          HOW DID YOU GET COLORED TEXT!?

          I tried inline styles..... didn't work. TELL ME YOUR SECRETS. Is it a class?

          • Link

            Haha… Wouldn't you like to know! ;p

            If you knew your HTML, you wouldn't be forgetting your <span> tags ;p

            <span style="color:#FF4400;">Type me a wonderful colorful message! </span>

            • Link

              I didn't know you could do inline styles! I guess you can only do colors? I tried text aligning (though you can do that with markup) and floating- no go for those.

              • Link

                Yeah alignment styles are done with <div> tags. I'm pretty its only colors, not sure what else you could do with <span> tags.

  • Link

    Thanks for posting this! Looks super useful and I'll definitely be using it in the future. :9

  • Link

    This will be useful.

  • Link

    ahhh HTML, this just brings back fond memories. :3

  • Link

    Still getting a grasp of this madness but what about links to other pages?

    • Link

      Ah yea! The html for that is:
      <a href="FULL URL">Link text</a>

      Change FULL URL to the URL of the page you wanna go to.

      EX:
      <a href="https://www.weasyl.com/journal/29607/let-s-learn-html-for-weasyl-part-1">Example</a>

      Renders:
      Example