~HTML Coding Basics~
Basics | Paragraphs | Bullets | Inserting Images
Marquees | Predefined Text | Headings | Forms
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. Let's put an image underneath that break. Let's use this image:
Using the image's url which is saved with TinyPic. The image's url is saved as: http://i37.tinypic.com/2wf1jcm.gif. So, we must type <img src="http://i37.tinypic.com/2wf1jcm.gif"/>
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:
<title>Your Title Here</title>
<h1>MY FIRST WEB PAGE!</h1>
<p> BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH.</p>
<img src="http://i37.tinypic.com/2wf1jcm.gif" />
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.
BOLD Italics Underline
Making links: Like this!
Making page anchors, links that connect to another part of the page: Anchor Linked To Bottom of Page
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.)
- When listing, it's helpful to use bullet points.
- This is an unorganized list.
- See the code below.
- Sometimes you want an organized list.
- This means the list is numbered.
- The code for this is also found below.
Images can really add to a page. Beware! They do slow down loading time.
Remember to type the code in correctly!
The basic code is below.
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 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.
Want a form to look like that? You can create your own for from HTML or make one using a service, like Wufoo or Response-o-Matic.
Hi! Go back up.
Our Staff | Original Characters | Pokémon Avenue Fan Club Listing | The Apricorn Times | Vaporeon's Library | Jolteon's Quiz Factory
Flareon's Art Museum | Sunshine Shoppe | Midnite @ the Movies | Leafeon's Lovely Garden | Glaceon's Cool Treats Truck
Sylveon's Bowtique | StarEoncyclopćdia | Eevee's Log | Flareon's Journal | Espeon's Diary | A-MAZE-ing | Contests | Fortune Cookies
Jigglypuff's Rehearsal Hall | Pokémon Crosswords | Pokémon Scrambles | Pokémon Star Version | Star Hunt
Who's That Pokemon? | Win An Award | Submit Your Works To Us | Help with Bullies & Gossip | Help With A Busy Schedule
Help With Online Dangers | Help With Virus Prevention | Advice About Anti-Pokemon? | Help With Art Block | What's A Smiley?
What is Chatspeak? | What is Web Courtesy? | Basic HTML Coding | Colors, Fonts & Symbols | Adding Images
Tables | Naming Your Site | Making Content Original | Making A Webpage | Choosing A Host | Gaining Affiliates | How To Update
Avatars & Blinkies | Banners | Button Templates | Headers & Page Dividers | Layouts | Pokémon Plushie Keychains
Pokémon Orphanage | Pokémon Wallpapers | PokéPlates & Updating Tables | Splashes | Textures | Inactive Affiliates
Pokémon is © to Nintendo and associated parties, 1996-2015, and is not affiliated with our fan-site in any way.
All content and images, except official artwork or stated otherwise, on this site is © to Stareon's Hideout, 2006-2014.
Images and text should not be sold, reproduced, and/or distributed in any way without prior permission.
To learn more about legally using these fictional works, please contact the web owner.