Making Your First Web Page

Hi, so we aren’t really going to make a web page that becomes part of the web. What we are going to do is create something called an HTML document. HTML is basically code for your web browser to display sites. HTML also makes it harder for me to make these tutorials; WordPress tries to read my code, and I want you to view it as code.

– Kelly

Start off by opening a simple text editor. I recommend that you use Notepad++ because it is a good text editor used by a large audience. Regular Notepad that comes pre-installed on any Windows PC works fine as well, but doesn’t have any special tools. Do NOT use anything like Microsoft Word or Wordpad, because these are not text editors. OK, now type in the following text into your text editor:

<html>

<h1>Hello world!</h1>

</html>

With that done, save the text with the extension .html. (The name of the document does not matter.) Open the document up from where ever you saved it, and it should open up with your default browser. You should see something like the image below.

Sorry, for some reason the image could not be displayed.

Cool, right? OK, now I shall explain what this all means. HTML is made up of things called tags. “<html>” was our HTML opening tag, and “</html>” was our closing tag. What

ever is between the two tags is part of the HTML. The same rules apply to the header tags; whatever is between the two tags is part of the header. All tags have “<>”. The “/” indicates closing. Simple?

Now make an HTML document with the following code:

<html>

<i><h1>Hello world!</h1></i>

<br/>

<h2>Hello world!</h2>

</html>

Open your document up. Wait, Kelly, what does this all mean? Try to figure it out, and continue reading when you did your best.

So, you should have definitely gotten the “<html>” part. Now, as you probably noticed, the i opening and closing tags make the header inside italic. You probably also noticed that “<br/>” starts a new line. I will tell you that “br” means break line. Since you can’t have anything inside of a break line, it just opens and closes itself. Did you notice that the h2 tag makes a smaller header than the h1 tag? There are six different headers: h1, h2, h3 etc. The larger the number the smaller the header. If you are interested in learning more HTML, here is a link to start:
w3schools

The code for that link, which I typed in for WordPress to read is: <a href=”http://www.w3schools.com/html/”>w3schools</a&gt;

I hope you enjoyed my tutorial and plan to continue with your HTML journey.

Advertisements

About specialtechs

Jared's the name, computers are the game. This blog is about computer related material. I'll talk about the hottest software, operating systems and comparisons, hardware and issues, maybe even a written tutorial here and there.
This entry was posted in Programming Languages, Programming Tutorials and tagged , , , . Bookmark the permalink.

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