MOCpages : Share your LEGO® creations
LEGO models my own creation MOCpages toys shop HTML group
Welcome to the world's greatest LEGO fan community!
Explore cool creations, share your own, and have lots of fun together.  ~  It's all free!
Conversation »
HTML Basics
Join to comment
HTML stands for Hyper-Text Markup Language, and it is what makes the internet go 'round. When you look at a page, what you see is only a front, behind which the HTML operates. HTML is a type of code that internet browsers read and turn into the pages you see. There is also a good deal that goes on that isn't apparent until you go past the page and open it up and expose the code.

MOCpages allows you to control the content of your pages to a certain extent using HTML. The mess of code that you see when you upload pictures is the HTML that tells the page to retrieve the pictures from storage and how to display them when the page is opened. Understanding some basic codes will allow you to go beyond pictures and basic text.

Basic text tags:
When you use HTML you place whatever you want to be affected between a start and end tag.
Start tag: <> End tag: </>

You must have both a start and end tag or else crazy stuff may result. Here's an example of how you would use tags to change a few words in a sample sentence.

This tag should make <>these words</> bold.

The content between the tags is 'these words' and there are start and end tags. However, those tags won't do anything because they're empty. What you put into the tags will determine what will happen to the stuff between the tags. For example:

This tag should make <b>these words</b> bold.

By putting a 'b' inside the tags, 'these words' will be bolded. If you were to use an 'i', they would be italicized.

This is the basis of all HTML. Almost everything Flare or anyone else does on their pages is some variation of these basics.

The basic text altering tags are:

<i></i> Italics
<b></b> Bold
<u></u> Underline
<s></s> Strikethrough
<sub></sub> Subscript
<sup></sup> Superscript
<center></center> Center text alignment

There are more, but they aren't tags that you'll ever use. These will cover most of your basic needs.

Moving on from basic tags, we now have tags that are variable. (It's really not that complicated, I just can't think of a simple way of putting it.)

For example, you will likely want to link to another page, whether it's a friend's creation, or a reference page, or if you're in the MOC Olympics and required to link to the group page and your opponent.

The tag for a link is 'a'.

<a></a>

However, this isn't good enough, you will need to tell it what to link to. Find the page you wish to link to and open it. Look in the address bar at the top of your browser window and copy the address there. Now, you'll need to take your tag and add some stuff to it, so that it looks like this:

<a href=""></a>

You will paste your address in between the quotation marks like this:

<a href="http://www.example.com">stuff in here will become a link</a> (note that part of this has been automatically turned into a link by MOCpages, simply ignore it)

Anything (text, pictures, etc.) in between the start and end tags will now take you to the address when you click on it.

Here's another thing you may be interested in: Font color and size! Let's begin with the basic font tag.

<font></font>

Okay, so you probably have that much figured out by now. Let's make it a little more interesting now. Perhaps you'd like your text a little bigger?

<font size="4">text put here would be size 4</font>

This will make any text between the start and end tags larger. 2 is normal sized text, but you can go larger or smaller with it. You can't use decimals.
We can also use the font tag to change color!

<font color="red">text put here would be red</font>

You can type in the name of a color, or enter in a six-digit hex code, or use an RGB code. Those last two are slightly complex, so you may not want to use them.
Here's a page containing all of the color names and their hex codes.
http://www.htmlgoodies.com/tutorials/colors/article.php/3478961

It is possible to use the font tag to change both color and size (and a lot of other things) at the same time.

<font color="red" size="4">text put here would be size 4 and red</font>

This would create large red text between the start and end tags.

One last thing: you can use multiple tags simultaneously to compound the effect. For example, if you wanted to have text bolded and italicized, you would do something like this:

<i><b>text put here would be bolded and italicized</b></i>

Make sure that each set of tags it within the other. If the bold start tag comes first, then the bold end tag must come last, if the italic tag comes second, then it must come second to last, etc.
Example:

Correct
<b><i><u>text here</u></i></b>

Incorrect
<b><i><u>text here</b></i></u>


That's all for now, I hope you were able to understand everything. I may get around to answering questions if I remember to check back. If you really need to get a hold of me, just comment on one of my creations and ask me to take a look back here.

I will NOT tell you how to invisibly embed music, create scrolling text, etc. I know that I used to have a tutorial on how to do music, but I realized that pages that used it were drastically slowing MOCpages down. I know that the servers have been upgraded, but if we keep adding music and the like it will slow right back down again, and I know that I'd rather have the page load up than have to wait for it, then put up with music that I probably won't like and I can't turn off.

So please, for the sake of MOCpages (which is provided free for your enjoyment), don't slow it down for some lame gimmick that is supposed to impress people.

Thank you for reading.
Permalink
| September 28, 2010, 5:42 pm
 Group admin 
Wow! This is one of the best summaries of HTML I have ever seen!
Permalink
| September 28, 2010, 6:17 pm
A very good idea, Jeff!
Permalink
| September 28, 2010, 6:22 pm
Ah, drat. I always mean to edit and press reply instead. Now my whole post is likely to show up again. Also, since I edited the original post, It's going to have to be moderated again. I suppose I should remove the Flare smack and it won't happen anymore.
Permalink
| September 28, 2010, 7:09 pm
 Group admin 
Quoting Jeff Fauble
Ah, drat. I always mean to edit and press reply instead. Now my whole post is likely to show up again. Also, since I edited the original post, It's going to have to be moderated again. I suppose I should remove the Flare smack and it won't happen anymore.

Don't worry about it. I didn't see anything worthy of moderation.
Permalink
| September 28, 2010, 8:13 pm
Other topics
« HTML Basics



LEGO models my own creation MOCpages toys shop HTML group


You Your home page | LEGO creations | Favorite builders
Activity Activity | Comments | Creations
Explore Explore | Recent | Groups
MOCpages is an unofficial, fan-created website. LEGO® and the brick configuration are property of The LEGO Group, which does not sponsor, own, or endorse this site.
©2002-2014 Sean Kenney Design Inc | Privacy policy | Terms of use