HTML Tutorials I :: Basic Software and your First Webpage

For our first set of tutorials, we will be going through the fundamentals of web design: software, basic page layout, and creating your first page.

First of all, the necessary software. Believe it or not, you already have all the software you need to create web pages! All it takes is Notepad and a web browser.

Note: you can skip this next part and come back later to read this somewhat in-depth discussion on software, especially if you’re a beginner, as software can be complicated and confusing (I have a note when its finished).

Why then, you might ask, do they sell $600+ software for it? Several reasons: First, they speed up your work – the more expensive editors have text auto-complete features, which is a huge help. Second, they have debugging tools, similar to Microsoft Word®’s spelling and grammar check as well as validation¹ tools. Third, they have WYSIWYG² tools which allow you to see what you’re doing as you do it, as well as supporting drag and drop features (personally, I don’t like drag and drop — more on that later).

Some of the more expensive software includes:

  • Adobe Dreamweaver — This is what Tony and I use for our non server-side development; pricey, but worth it in my opinion. Hands down, the best HTML/CSS editor I’ve seen. Read Adobe’s blurb for more info. It has server-side capabilities, but for ASP.NET use Visual Studio. You can try Ebay or Craigslist to get a little $$ off on a used one, but watch out for scams and pirating.
  • Microsoft Visual Studio — Similar to Dreamweaver, but with really nice ASP.NET tools. Dreamweaver can do what Visual Studio can do, but it pales in comparison on the actual programming side. Remember, Visual Studio is only for Microsoft web development. Also included are Visual Basic, Visual C#, Visual C++, Visual J# (for .NET Windows apps and ASP.NET) and SQL Server (et. al.). Just a note, if you don’t plan on doing server-side development or being Microsoft dependent, I would suggest you just get Dreamweaver.If you’ve recovered from fainting after seeing the price tag ($1,199 for the professional edition), there is still hope! There is an “academic” version (meaning not for commercial use) available for only $100! It can be hard to find, but PCNation worked for Tony at this location.
  • Microsoft Visual Studio Express Editions — These are neat, they are a stripped down, free downloadable (is that a word?) version of Microsoft Visual Studio. For web development, all you need is Visual Web Developer Express, making sure you include SQL Server 2005 Express in the installation process. The download is ~75MB, so be prepared.

For those with a smaller budget there are freeware/shareware text editors; try these links:

  • Notepad++ (shareware — free, but if you end up using it, they would appreciate some contribution)
  • NVU (I don’t know much about this one except that it’s free and Windows, Mac and Linux compatible. Also, it has a WYSIWYG feature, nice for freeware. Tony suggested it.)

Ok, enough on software, lets dive in!

For those skipping the software discussion, please pick up here.

I’ll teach you the fundamentals as we go through the lesson, pausing occasionally to point out something of importance. First, lets get a basic organizational framework:

1. Open notepad (or SimpleText if you’re using Mac.) Start » Run » Enter notepad in the console » Press OK

This opens up the basic text editor we will use for this tutorial.

2. Save your file.

This tutorial will use a folder under C://html-tutorial

Click File » Select Save » Browse to the C:// directory » Create a folder called html-tutorial » Double click the folder and save the file as hello-world.html

WARNING: Make sure you save the file with a .html extension, NOT a .txt extension. Only .html extensions³ work for webpages.

Ok, so far we’ve created a directory to store all our files and we’ve saved our first. Next, lets add some content to our page.

Add the following code to your page:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

1. Save your file (ctrl-s)

2. Open up your favorite web browser (such as Firefox or Internet Explorer)

3. Select “Open File” from the “File” menu » Browse to C://html-tutorial/hello-world.html » Select it and press Ok

Congratulations, you have just created your first web page! Lets go over what you’ve done —

the greater-than, less-than symbols are used to enclose tags; tags are what tell the browser about what sort of thing is in the code, like a paragraph or a header. They also create the “frame” of the page.

The frame of the page is: <html> <head> <title> </title> </head> <body> </body> </html>. Every page must have this frame.

The tags that look like this:<****> are called opening tags (asterisks represent content). The tags that look like </****> are called closing tags, they determine the end of a “section”, marked by the opening and closing tags. For example <title>My First Web Page</title> explains what the title of the page is (the title being what appears on the very top of the browser).

Well, that concludes our first HTML tutorial. Next time we will discuss web standards, include a list of basic tags and how to use them, see the code in a browser, and add some color to your pages.

Thanks for tuning in! If you have any questions (pertaining to the topic on hand :-p ), feel free to comment and one of us will get back to you.


¹ Web standards and validation will be discussed in a later chapter.
² WYSIWYG stands for “What you see is what you get”.
³ This is only partly true, there are many extensions that work such as .htm or .aspx, but most of them are beyond the scope of this tutorial.
Advertisements

2 Responses to HTML Tutorials I :: Basic Software and your First Webpage

  1. truecowgirl says:

    Great job on explaining that Jeff. Sounds pretty easy.. I mean to add.. SO FAR!

  2. Ray says:

    Great tutorial.

    I have Dreamweaver, but when I want to just edit some simple code, I usually use a text editor like Smultron. (for mac)

    -Ray

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

%d bloggers like this: