MaraHTML

Coding resources, tutorials and more.

HTML Introduction

Share this page:
One of the greatest benefits of Marapets is that you get to create your own, multi-paged website, also known as a Marasite. Unfortunately, most people don't know how to write any kind of HTML so they're stuck with plain white backgrounds, boring text and no graphics. Since HTML is code, people assume it's going to be too difficult or boring to figure out so they give up. I am here to tell you it's neither hard nor tedious - and you don't even need a pocket protector!

In this tutorial, I will take you through all the basics of HTML. I will show you how to add graphics, change and format your text, use colors, add links, create tables, add music, and use headers and footers. I'll also get you started with CSS (cascading style sheets).

Introduction to HTML and Basic Codes

In this section I'm going to teach you all about the most basic of HTML code. Lucky for you, you won't need a lot of it because it's already built in to the Marasite pages. Still, it's good to know in case you ever want to build a website elsewhere. I'll mark all the optional sections so you can refer back to them later.

URL And Other Funky Acronyms:

Just like BRB and LOL, the world of making web pages has its own set of acronyms. However, instead of telling you what they stand for (I promised this wasn't going to be boring and I intend to keep it that way!), I'll just tell you what they mean:

URL: Website or web page address you type into your web browser. Example: http://www.marapets.com
HTML: Web page code you write to make a web page.
FAQ: A lot of websites have a section for Frequently Asked Questions, otherwise known as FAQs

Web Page vs. Website:

Both the terms web page and website have been around so long they're frequently mis-used. Just for clarification, a web page is one HTML document. Example: the page you're currently looking at is my Introduction to HTML and Basic Codes page. A website is a collection of web pages. So this page you're looking at is part of my entire website, which currently consists of about 20 pages.

Open and Close Tags:

HTML is basically 2 things: tags and text. The tags are what allow you to add pictures, color your text and so forth. The text is the actual content of your site (i.e. whatever text you want on your website). The text is self-explanatory, but the tags are what this tutorial is about. I will introduce you to various different tags and teach you how to use them. An important note about tags: be aware of which tags have a closing tag. For example, the B (bold) tag is actually 2 tags: the open and the close. So, to make your text bold, you'd type Your text here. If you just used the tag and forgot about the tag, all of your text would be bold. So make sure you close your tags unless it's not needed. And, just so you know, very few tags don't need to be closed.

Basic HTML Page:

A basic HTML page consists of 2 sections: a HEAD and a BODY. But before you can even do that, you have to first specify that your document is an HTML document. Years ago, before web browsers became so forgiving, you had to put in all 3 of these tags (HTML, HEAD and BODY). Otherwise, your web browser wouldn't know if the document was supposed to be a web page or a regular text document. That said, let's look at all 3 of these elements.

HTML tag: The HTML tag simply tells the browser that it's looking at a web page. Since the HTML tag is built-in to Marasites, you won't need to worry about this.
HEAD tag: The HEAD tag contains information about your page that doesn't actually show up on the page. For example, the TITLE of your page goes in the head. Also, if you opt to use CSS (cascading style sheets), the code goes in the HEAD. Since the HEAD tag is built-in to Marasites, you won't need to worry about this.
BODY tag: The BODY tag is where the code and content of your web page go. Again, the BODY tag is built-in to Marasites so, unless you want to change something like the background of your page, you won't need to worry about this either.

Here's what a basic HTML page looks like:

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
This is my first web page. Now I have to figure out what to do with it!
</BODY>
</HTML>

Saving Files:

When saving your HTML document, you MUST save it with an extension of either .HTM or .HTML. This is not an issue with Marasite pages. But, if you're creating a website elsewhere, you'll need to save them as HTML documents. To do this, simply save your file as yourfilename.HTM or yourfilename.HTML.

Another thing to know (that you can ignore on Marasites since they've already set it up for you) is that the home page for your site should be named index.htm (or html), default.htm (or html) or home.htm (or html). However, be sure you only use one of these names, otherwise there's no telling which page will come up when someone loads your URL.

Line and Paragraph Breaks:

Inevitably, you will want to put some breaks in your text. Otherwise your web page will be one big paragraph. There are 2 ways to put breaks in your text: BR tags and P tags. Personally, I tend to stick with the BR tags since they're easier to deal with and have no closing tag. However, for the sake of being thorough, I'll explain both.

  - This tag creates a break in your text and forces it to the next line. If you want 2 line breaks so you can start a new paragraph, simply use 2 of these tags. NOTE: This is one of the few tags that has no closing tag.
Your paragraph here - Another option is to use the paragraph break tag which automatically formats the paragraph breaks for you. Simply put the opening and closing tags around each of your paragraphs and wa-la! A paragraph is born.

Code:

Looks like:

Line One 
Line Two 
Line Three

Line One
Line Two
Line Three

Paragraph One
Paragraph Two

Paragraph One

Paragraph Two

Horizontal Lines:

Now that you've mastered breaking up your lines and paragraphs, perhaps you'd like to do something more to actually separate certain sections of your page. Horizontal lines are just the trick and they're really easy to use. Plus, you can change their color, thickness, width and alignment, all of which I'll explain how to do. Another great thing about the HR (which stands for horizontal rule) is that it has no closing tag. Also, by default, all horizontal lines are centered and sized to fit the width of the page.

Code:	Looks like:
<HR>
<HR size="5" color="#000000">
<HR color="#FF0000">
<HR width="50%" color="#0000FF">
<HR size="2" color="#008000" width="70%" align="left">