FANDOM


OverviewEdit

In this lesson we will begin to look at the HTML (HyperText Markup Language) programming language.

Where to go?Edit

To begin with, we will be using http://htmledit.squarefree.com . I have found this one to be pretty good overall, so it will be a nice place to test-out the basics.

Whenever you open this page, just delete everything that is in the editor at the top and plan on copying whatever you been working on to a text document on your computer when you are done.

TagsEdit

Basically all of HTML is built on things called tags. These tags (almost) always come in pairs with some text between them like such:

<tag name>  STUFF </tag name>

Congratulations, you now know almost everything there is to know! Anyhow, continuing with what I just mentioned, the majority of what you will do in HTML is learn where and how to use specific types of tags. Notice the forward slash in the latter of the two tags; this is present in every tag pair. The compiler uses this to tell when to end a pair. Think of them like parentheses in math where every '(' must have a ')'. 

DOCTYPE and <html> TagEdit

I have to at least tell you to begin EVERY HTML document you will write. That is

 <!DOCTYPE html> 

There isn't anything else I will add to that for now. I will explain a bit more later.

The html tag is the first one I want to show you. It is how every html file begins (after DOCTYPE) and ends. For now, remember to begin every file as <html> and end every file as </html>. 

<head> and <body> TagsEdit

Most HTML documents will follow a format like this:

<html>
<head>
Information about page
</head>

<body>
The content of the page
</body>

</html>

The <head> and <body> tags are used to partition the page to make it easier to read for both humans and computers. For now, I just want you to know their general purposes because I have not yet explained what exactly goes inside of them.

WritingEdit

You can think of HTML at the base level as a word processor. You can type whatever you want into it and format it to your needs. To see this, run this script:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
TYPE WHATEVER YOU WANT! It will display it!
</body>

</html>

As you can see, it displayed what I typed. HTML documents will display most everything not inside < >. (There are a few cases when it does not but those are for later :))

You are probably thinking right now: "Well, this is mildly interesting. (* ̄m ̄) " and I would agree. If this were all there were to do, it would get boring fast! So, I am going to show you a whole bunch of cool things you can do with it.

Typing Related TagsEdit

Foreword: all the tag pairs work the same way as other tag pairs

  • Bold:  <b> </b>
  • Italics:  <i> </i>
  • Paragraph: <p> </p> you can do this around every paragraph OR you can just put <p> at the beginning of each paragraph in a long chain of paragraphs but end the last one with </p>.
  • Alignment: <div align="center"> </div>
     
     There are more uses for div than this and secondly, you can change "center" to "left", "right", etc

FontEdit

Another very useful tag for typing is font. It can change just about anything about text's appearance. Just like for div, font works by putting several statements inside the first tag. With font you can change the color, size, and face (this is the style or font of the text). 

<font size="14" face="courier" color="green"> Test me!</font>

For these statements, you can put as many or as few as you want in it. You can also put them in any order.

Size Edit

In the size parameter, you can put integers(and maybe half-integers) in it to adjust the size. You can also put something like "+2" or "-3" to adjust the size relative to standard size.

Color Edit

There are two ways to represent colors. One way is the way that I used where you enter in the name of the color i.e. "green","red","blue",etc.

The other way is by using hexadecimal (which is a base-16 number representation): "#3C68B8"

Face Edit

Another amazing utility of font is that you can change the style of the text. There are all kinds of ones you can use. Here is a list of all of them.

N.B. <font> is not used in HTML5(newest version)

HeadingsEdit

One important thing to use in html is headings. They are nice and stylish things to use. They work the same way as bold or italics and use the tags: <h1>,<h2>,<h3>... They go in decreasing size.

HypertextEdit

A very important tool of HTML is the ability to add hypertext to a webpage. Hypertext is what is more colloquially called a "web link". They allow the user to click on them and take them to a different page. Hypertext uses the tag: <a>. Links are defined this way:

<a href="LINK OF PAGE"> STUFF YOU WANT USER TO SEE </a>

Tables, Lists, etc.Edit

I will introduce you to a few of the other more random topics of basic HTML programming.

TablesEdit

Tables are very useful structures in programming. In web development, you will see them EVERYWHERE (@.@). This use for tables will be entirely visual, but there are plenty of others that I will explain later. Tables use the tags:<table>, <tr>, <td>, and <th>. <table>is what begins the table and you will end the table the same way you do for any tag pair. <tr> begins a row of the table, end the row with </tr>. <td> is what begins each individual element in the table. Here is an example that utilizes it:

<!DOCTYPE html>
<html>
<body>

<table>
  <tr>
    <td>Jacob</td>
    <td>Rebec</td>		
    <td>11</td>
  </tr>
  <tr>
    <td>Erik</td>
    <td>Hetler</td>		
    <td>8</td>
  </tr>
</table>

</body>
</html>

As you can see, I just made a table with two peoples' first name, last names, and grade. The <th> tag is a heading for tables. It can be used in rows and columns and functions very similarly to <td>.

There are quite a few nice stylizing things you can do with tables like borders, colors, spacing, and more but that will wait until the next lesson when I introduce CSS.

ListsEdit

Lists function almost identically to tables but they work in only one direction. There are two main types of lists unordered and ordered.

Unordered ListsEdit

Unordered lists use these two tags: <ul> and <li>. The <ul> starts the list and <li> starts every element (both of these need closing tags too). 

Ordered ListsEdit

Ordered lists use these two tags: <ol> and <li>. The <ul> starts the list and <li> starts every element (both of these need closing tags too).  The one difference with ordered lists is that you can decide how to order them. You do this by <ol type="1"> or some other labelling metric. You can use 1,A,a,I, and i.

Horizontal RuleEdit

The <hr> tag creates a horizontal line across the whole page. That is all.