HTML
Basics | Paragraphs | Bullets | Inserting Images
Marquees | Predefined Text | Headings | Layouts

First off, what does HTML stand for? Hyper Text Markup Language. How does it work? By using codes that only a web browser can understand, you can make a webpage.

For this lesson, open up Notepad. This is a standard program all computers have.

In that blank Notepad document, type <html> and press enter a few times and then type </html>

Now, go to File and Save (keyboard shortcut: Ctrl+S) or Save As...

Type in mywebpage.html or whatever you like as long as it ends in .html

Once you go to open that file, you'll notice the icon next to it resembles your web browser logo. This is showing that it is an HTML file and can be viewed in your web browser. It is no longer simply a .txt file.

In your document you just saved, type <head> under <html>

.

We're going to give your web page a title, so type <title>

Put it whatever you want your page's title to be. The title is what shows up on the very top of your web browser and on the tab, etc. Once you've typed your title, type </title>

The slash means end. The tag is now complete that you have an ending slash on it. This is a very important thing to learn as most tags need a starting tag and an ending tag (with a slash) to work properly. Otherwise, your web browser doesn't know when the tag ends and things get messy.

We'll keep this simple.. If you want to learn all the other things you can do in the <head> tag, you'll need to learn CSS (Cascading Style Sheet.) For now, let's just type </head> to show that the Head is done.

Now, let's type <body> and start working on the body of your web page. Let's put a banner, a paragraph, and an image.

We won't put an image banner up yet. Let's just write across the top "MY FIRST WEB PAGE!" in big letters. How do we do that so the computer recognizes it? Type <h1> and then type MY FIRST WEB PAGE! and finish it off with the ending tag </h1>.

We're going type a random paragraph that says "BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH." First type <p> to represent a paragraph is starting and then type your "Blah blah blah's" and then type </p> as your ending tag.

Let's make a break after that paragraph by typing <br /> which is the equivalent of pressing enter to make a line space.

Insert </body> to end the body of your page. Underneath this should be the original </html> ending tag from before.

Your document should look like this:


<html>

<head>
<title>Your Title Here</title>
</head>

<body>

<h1>MY FIRST WEB PAGE!</h1>

<p> BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH.</p> <br /> </body>
</html>

If your document looks like what is above, Save. Go to File > Open. Find your file (make sure the file type shows all files, not just text files) and right-click on it and Open With » and choose your web browser (Internet Explorer, Netscape, Opera, Safari, Chrome, Mozilla Firefox, etc..) Your web browser should open and display the work you've just done.

Now, to add other things to your page see the codes below. Many of the codes you can copy and paste into your web page, save it, and open it up in your browser to see what it looks like.



Basics
BOLD Italics Underline> Strikethrough



Making links: Like this!



Making page anchors, links that connect to another part of the page: Anchor Linked To Bottom of Page



Paragraphs

To make a new paragraph, put the [p] code in the beginning and end of your paragraph.


To make a break in the text, use the [br] code. (Both codes are underneath.)




Bullets
  • When listing, it's helpful to use bullet points.
  • This is an unorganized list.
  • See the code below.
    1. Sometimes you want an organized list.
    2. This means the list is numbered.
    3. The code for this is also found below.




      4. Images
      Images can really add to a page. Beware! They do slow down loading time.
      Remember to type the code in correctly!
      picture



      Marquees
      A marquee is really cool to have on a site! But may not work on every browser as they are a largely outdated mechanism, so don't rely on it.
      The basic code is below.



      You can specialize marquee by changing various features of the code below. For instance, the speed here is set at 8, the color is orange, and the font is Papyrus and the font size is 12.
      Code Below.



      Predefined Text 
      Predefined Text shows the spaces you want it to show.

You     can     use     
        the     [pre]     code   
               to     space     what     you      want. 

Must use the spacebar because using Tab won't show up.


You can find the [pre] code below.





      Headings

      Headings can be different sizes, too.

      Find the one you want and put your text inbetween the code.

      There are 6 sizes. 1 is the largest, 6 is the smallest.





      Layouts
      Click here for a demonstration of a layout you can save and practice with.









      Hi!
      Go back up.