<HTML> for Whelps22:26 Jan 26 2005
Times Read: 1,885
Click here for a PDF Cheat Sheet
you can print out.
So, you've got a profile on VampireRave.com and you want to snazz it up. Or maybe you want a little pizzazz in your posts. Well, here's a brief tutorial for you.
Internet browsers have made communicating with people possible and have made the ability to show off paramount. Why write black text on a grey background when you can write white on black with red trim? Or
italicize for
emphasis?
The Hyper-Text Markup Language, or HTML, was designed as a way of adding extra information within your text to describe special features. Special tags enclosed in < brackets > provide for this markup. If a command is inside those brackets, your web browser will understand that you want to change what you are reading.
My hope for this tutorial is not only to answer the usual questions for those who've never used HTML, but also explain why some codes
don't work here on VampireRave.com. VampireRave.com is highly customized for efficiency and security. It also has a distinct look. This look and feel has a tendency to override some standard functions.
For example, you can't underline text unless it is a web link, and that link will be
red. You can't override this behavior on VampireRave.
Another VR thing to note is that it automatically handles adding a new line for you whenever you hit Enter. This carriage return would normally be inserted by placing a
tag anywhere you want to force a new line. But VR is nice enough to do it for you. Be warned about this however if you choose to write a document up with FrontPage, for example, to remove them before posting. If you plan to write everything here on VR, you needn't worry about that.
But! One thing before I continue...
Always copy your posting
somewhere before posting on VR! Too many people have lost an incredibly witty, long-winded post to the fickleness of the internet. This is NOT a VR problem, but a security issue imposed by the internet itself. It is just a really good idea to write your profile/message/journal entry offline in Notepad or some other editor that you can save your file, then copy and paste it here.
With that, let's talk about what we can do. Most of the tags work in pairs and surround some text to apply the change to. You have a beginning tag and an ending tag. Usually the ending tag is the same code word as the start but with a / in front of it. Also, the case of the code word is not important, so feel free to use all uppercase or lowercase, whichever you like. I tend to use all capitals so it stands out.
Emphasis Style
Some simple emphasis can be done with italics and bold text as follows:
italicized text =
italicized text
bold text =
bold text
italicized and bold =
italicized and bold
Note that anything
outside the brackets is not affected by your tags.
Note that anything
outside the brackets is not affected by your tags.
Formatting
Centering text on your page, take poetry for example, is very simple to do with the
tag.
This text is centered on the page.
This text is centered on the page.
You can do all alignments with the tag as follows:
This text is aligned to the left side of the page, which is the default.
This text is aligned to the left side of the page.
This is another way to center text on the page.
This is another way to center text on the page.
This text is aligned to the right side of the page.
This text is aligned to the right side of the page.
This text is fully justified, stretching to both margins.
This text is fully justified, stretching to both margins, which is the default here at VR.
If you want to quote someone and want to indent the whole quote, you can use
.
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.
You can also place a line in your text to separate sections. This horizontal rule line is added with the single tag of
. There is no closing tag for a HR line.
You can even tell it how long the line should be. Either as a number of pixels in length, or a percentage of the screen width. The first example below is only 50 pixels long (very short) and the other is 50% of the screen.
To make a short bar that is centered on the page, just wrap a tag pair around it.
Links
The most common thing you'll find on the web is a link to another web page. This is done with the tag. The code word HREF= is assigned to the webpage you want to link to. The text you put between the tags will be underlined and colored red on VR to show that you can click it to go to another page.
Click here to visit a cool website.
Click here to visit a cool website.
Images
While VR has made it very easy to upload pictures for your profile and portfoliio, sometimes in your profile you might want to link to pictures. Remember, these pictures are hosted on another website, and not on VR. So not only do you need to know the web address of the other website, you should make sure you have their permission to link to the picture. This will also slow a browser down as it must retrieve that picture and display it. These are just courtesy guidelines so that you do not overload a page with graphics.
The SRC= code word is the link to the website and graphic filename. The ALT= code will display text in a ToolTip pop-up box when you hover your mouse over the image. This is also for those poor souls who are viewing a website without graphics abilities, or who have turned display of graphics off for speed/security reasons.
Linked images
Often you'll find images that let you click on them to go to another webpage. This is nothing more than wrapping an tag around an ![]()
tag. This way, instead of text being linkable, the image will be.
Text Size
The tag is quite versatile in that it lets you change the font, it's size, and color.
Size=1 is the smallest font size.
Size=1 is the smallest font size.
Size=2 is the default font size.
Size=2 is the default font size.
Size=3... Size=4... Size=5... Size=6...
Size=7 is the largest font size.
Size=7 is the largest font size.
Please note, large text is considered shouting, just like ALL CAPS. Many people find it annoying, so use this sparingly. SIZE=5 is really the largest you need to use anywhere.
Text Colors
Adding color to your message is another great way to help it stand out. Just remember, on VR you are working on a black background and you can't change this. Any colors you use should be bright, or at least not too dark, so the words can be read.
This text is red.
This text is red.
Note: that is the American spelling; "colour" will not be recognized.
Only 16 color names are supported by the HTML standard. There are others recognized by Internet Explorer, Netscape, and more, but there are no guarantees. The main 16 are: Red, Maroon, Lime, Green, Blue, Navy, Silver, White, Aqua, Teal, Fuchsia, Purple, Yellow, Olive, Gray, and Black.
Of these 16, two have other common names. You can replace "Aqua" with "Cyan" and "Fuchsia" with "Magenta". This corresponds to the printing color scheme of Cyan/Magenta/Yellow/Black, so they are carried over.
Color Hex/#RGB codes
But 16 colors would just be boring. While you can use the other names, to list them here will be futile. (I'll link to this list instead.) What I'd rather do is explain Hex codes, because using these codes will guarantee you have the right color. It's just cryptic to those unfamiliar with them, so color names are often used.
Instead of writing the name of the color, you may come across a code that looks like #DC143C, which happens to be the RGB code for Crimson. This code is made up of three Hexadecimal numbers. Hex numbers are a two-digit computer friendly way of representing numbers from 0 (#00) to 255 (#FF). Single digits run from 0 to 9 then count 10 to 15 as the letters A through F.
The color code tells the browser to make a color from Red, Green, and Blue light. The smaller number for one of these three is darker, and a higher number is brighter.
So for example, #000000 is Black, #FF0000 is Red, #00FF00 is Lime (bright green), #0000FF is Blue, #FFFF00 is Yellow, #FF00FF is Magenta/Fuchsia, #00FFFF is Cyan/Aqua, and #FFFFFF is White. Virtually every possible visible color can be created with these codes. I won't list them out. Instead, I'll point you to the VisiBone color palette. There you can click a color you like and find out the #Hex code for it.
This text is Crimson.
This text is Crimson.
Fun with Quizzes
Putting it all together, I thought I'd use an example that many of us are familiar with here: Personality quizzes in our profiles.
There are many websites out there with personality quizzes on them. One that is used here a lot is Quizilla.com.
They have thousands of quizzes that you can pick to size up yourself in relationship to something else. One popular quiz here is: Which Vampire: The Masquerade clan do you belong in?
By clicking on that link, you can take the quiz yourself, answering the list of questions. When done, it will show you a picture and a description of which clan you belong to. It also provides a text box with some HTML code in it. You can copy and paste that HTML code directly into your profile. By now, I'm hoping after reading this tutorial, you may be able to understand all of the codes.
Inside that box on Quizilla.com, the easiest steps to copy and paste this is:
1) Right-click in the box and choose "Select All" from the popup menu.
2) After all of the text is selected, right-click again and choose "Copy" from the popup menu.
3) The HTML code is now in your clipboard. Return to your profile edit screen on VampireRave, or wherever you are editing.
4) Paste in the text of the results by again right-clicking and select "Paste" from the pop-up menu.
In closing, let me just say, most of these tags have many more options. I have only listed some of the standard and simpler options. This is a good start for fledgling web users. If you want to know more, feel free to ask me, and I may soon make a second tutorial with the more advanced features.
Enjoy the Rave,
The Elder Lurker Daniel
COMMENTS
-
deathzombies
07:59 Apr 09 2010
Thank you so much for writing this. It helped me so much... Just one thing, is there a way for non-premium members to have a background on their profile? Please let me know. Also I have added you to my friends list.