Simple tutorial I wrote a while back, I decided I might as well put it up. It has all the basic HTML functions, including a few extras.

___________________________________________________

First off, a “/” shows when a tag is ending.

Spacing:

<br> and </br> = break and end break

<p> and </p> = one continuous line of text (a paragraph without spacing)

Text:

<b>  and </b> = bold text in between

<u> and </u> = underlined text in between

<i> and </i> = italicised text in between

<align=”center” and </align> = how you align your text (center, left, right). Just put center, left, or right after the “=” without any space. For example, this is what you would do if you wanted to do something else: <align=”right”>, <align=”left”>. Just don’t forget the end tag!

Other:

<div> and </div> = this makes it so that after placing an image or text in a certain place on the screen using pixels (next paragraph), it won’t make the next one you put down relative to the last. In simpler terms, this makes it so that your page won’t look like you threw graphics and text all over it. Just put the tags before and after placing an image/text paragraph (using the specific ones). These normally only need to be used when designing a website.

<div style=”position: absolute; top:550px; width: 120%; left: 10%; right: 40%; font-size:12pt; font-family:Comic Sans MS; “> = this HTML code looks very complex, but it is actually quite easy to edit (but hard to explain). As you can see, the first part has the <div> tag, which is explained better in the paragraph above. Using this code you can position graphics and text in specific areas on the viewer’s page, using pixels (px). The above code HAS TO BE EDITED to the right values before it can be used. Each part (top, width, left, right) show how far from those places on your screen the image will be. You can use percentage or pixels–your choice. By changing the font name you decide which font will be used in the text if you are creating a paragraph with it instead of an image.

<a href=http://turboRamble.wordpress.com/>turboRamble</a> = a link to a website (put your text you want to be shown where the word “and” is, and your link where the “http://turboRamble.wordpress.com/&#8221; is)

<!– Your Note –> = you can use this to create a note that can not be viewed when published, only when edited. This makes it easier to edit because you can put this before things so you know when things begin and end.

<IMG SRC=”your link here” BORDER=”0″> = you can insert an image by typing this in and linking it to a specific page location.

<li> and </li> = creates a bullet point in which you can put down several thoughts or ideas. Remember to have the second ending tag, because otherwise it will create another bullet point for the next line, and it’ll just keep getting farther and farther…

About HTML:

HTML consists of starting and ending tags which are used to make text do certain things. For instance, if you want something to happen when your mouse hovers over a graphic, you can do that! But, you can also do smaller things with HTML like underlining and changing the font sizes.

-Nathan

P.S. If you have any questions regarding this short tutorial, just comment and I’ll answer best I can. My next post will have some of my artwork, as well as a pre-release of one of my games, so stick around!

Advertisements

About turboRamble

I am a seventeen-year-old who enjoys programming games and applications, as well as reading and writing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s