Click image to return to Mythodreas

Coding 101

HTML Guide
CSS Guide
More Effects

Text Decoration | Color Code | Font | Images | Links | Dropdown Menus
Backgrounds | Positioning Text | Embed Videos


Learning the basics of HTML


HTML, or Hyper Text Markup Language, is the structure and building block of a webpage. It uses tags which are element names surrounded by angle brackets like < and >, and each tag comes in pairs like <b>text</b>. The beginning tag starts the HTML, and the ending tag ends the HTML. You can start a tag and never end it, but this can lead to complications.<br>For example, <b>text, if the ending tag were missing then the following would happen:text, and since there is no ending tag, the bold tag will continue until the end of your code.


             
Text Decoration
DescriptionHTMLResult
Bold or Strong <b>text</b> or <strong>text</strong> text or text
Italics <i>text</i> text
Strikethrough <s>text</s> text
Underline <u>text</u> text
Subscript <sub>text</sub> text
Superscript <sup>text</sup> text
Combining <b><u><s>text</s></u></b> text
Blink text <blink>flash</blink> This is not supported on Mythos, and is suggested to never be used.


An additional text effect or decoration is the marquee ability. Marquee will move your text from side to side depending on the properties you set.
The standard code is <marquee behavior="scroll" bgcolor="#00CCCC" loop="-1" width="40%">text</marquee> and it will appear as such: text
Now let's break it down!

<marquee behavior="scroll/slide/alternate"></marquee> will set how the text will move across the screen. Scroll will make the text
scroll sideways, continuously. Slide is similar to Scroll, but it will stop once it reaches the edge. Alternate will make the text bounce back and forth between the edges.

The bgcolor is optional and can be replaced with a color word, color rgb, or color hexadecimal (scroll down to see the code for color). It will trap the marquee text in a colored box, making its edges easier to see.

As for loop, you can control how many times the text will run from side to side, but if you set it as "infinite" or "-1" then the text will loop for an eternity.

Now width is set to give a measurement to marquee effects in pixels. It can be width="40%" or width="300"

Keep in mind that you do not have to put text in a marquee. You can have pictures or videos of your choice just as long as you enclose that image and video code with a </marquee> at the end (scroll down to see the code for images and videos).

         
Color
wherever the color code is, you can do the following
TypeCode Result
Color Name "RED" or "red" Makes color into red
Hexadecimal Number "#FF0000" Makes color into red
RGB Number "rgb(255,0,0)" Makes color into red
Find colors easy by using Color Picker by W3Schools

         
Font Tags and Styles
face, size, and color can appear in any order. Size can be in em, px, %, or the number itself.
HTMLResult
<font size="5">text</font> text
<font size="2" color="#FF6600">text</font> text
<font size="2" color="ORANGE">text</font> text
<font face="verdana" size="2" color="ORANGE">text</font> text



         
Images
src, height, and width can appear in any order
doing a style is best and keeps image sizes from being changed
HTMLResult
<img src="pictureURL.extension">
<img src="pictureURL.extension" height="35" width="45">
<img src="pictureURL.extension" style="height:45px; width:35px;">
<img src="can'tfindimageorcan'tload.jpg" alt="No" style="height:45px; width:35px;"> No


         
Links
HTMLResult
<a href="http://www.mythodreas.com/forums.php">Click Here</a> Click Here
<a href="http://www.mythodreas.com/forums.php" target="_blank">

Sends to blank page</a>

Sends to blank page
<a href="http://www.mythodreas.com/forums.php" target="_top">

Breaks out of frame</a>

Breaks out of frame
<a href="http://www.mythodreas.com/forums.php">

<img src="favicon.ico" style="height:45px; width:35px;" target="_top"></a>

<A HREF=#redirectstoareaofpage>101</A> then later on in page, <a id=redirectstoareaofpage>Redirects to wherever this is located</a> Example


Dropdown Menu
HTML Description Result
<select> <option value="dragon">Bewhile</option> <option value="dog">Binkie</option> <option value="lion">Leo</option> </select> This is a dropdown menu.
         
Background
HTMLDescription
<body background="http://www.solidbackgrounds.com/images/1920x1080/

1920x1080-black-solid-color-background.jpg">

Makes URL into background
<body bgcolor="#FFFFFF">

Makes background into a color


         
Positioning and Breaking Text
HTMLDescription Result
<center>text</center>

Makes URL into background
text
<p>text</p>

Text is now a paragraph

text

text

text<br>

br acts as the Enter key
text
text
<p align="right">text</p>

Text aligned to the right

text

<p align="left">text</p>

Text aligned to the left

text

<p align="justify">text</p>

Text stretched so each line has equal width

text




Let's end this tutorial with a quick look into a playable Youtube video. Mythodreas clears frames so it's best to stick to the following code. Keep in mind that the whole Youtube link is not used. The URL, https://www.youtube.com/watch?v=hRicv_vkUFI, will not work correctly unless you have it as https://www.youtube.com/v/hRicv_vkUFI. As for the rest of the properties in a video code... the colors are for the box the video is in, autoplay (if set to 1 and not 0) will play right as the user goes to your profile or homepage. Loop is how many times it will play (please leave this as 1 on Mythodreas). Type and AllowScriptAccess are necessary.
         
Video
HTMLDescription
<embed src="https://www.youtube.com/v/DSh-YywIL00& color1=0x660198&color2=0x000000&autoplay=1&loop=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="70"></embed></object> A video that will automatically play and repeat one time.
Ready to learn CSS?
Created by MythoAid, referenced from W3Schools
.