Java Visual C++ ASP.NET Visual Basic.NET MS SQL

What you should know Flowcharting Software Development Lifecycle Class Creation

Conditions (if/else) Keywords Looping Operators Text Formats Variables

Java Tutorials Visual C++ Tutorials ASP.NET Tutorials

Introduction to web pages

Ever since the introduction of the internet back in the 1990s people have been curious about how to develop their own website. HTML (Hypertext Markup Language) has provided that portal into the strange world of web development. These days more advanced website design is possible with applications such as ASP.NET, Perl, and PHP. However this lesson is aimed at the exact beginner that would just like to see some example scripts just to see their own very first page .

HTML

You may be surprised, but you actually don't have to buy any software to start a simple website. As long as you own a computer with an internet connection you can get started. This example will focus on Windows 7, but will still work on virtually any other operating system. The only difference is the location of where to find this tool.

Notepad

To start your first website you only have to open up the Microsoft Notepad embedded with Windows. For Windows 7 users click on the Start menu - All Programs - Accessories - Notepad. Also keep in mind that the examples on this page are aimed at the absolute beginner.

HTML tags

The first lesson involves setting up some basic tags to be recognized by your web browser. Any web browser should be compatible such as Firefox or Internet Explorer. If you have ever right clicked on a web page and selected View Page Source you will be able to view the web content for that page.

The first set of tags you will notice are:

<html>

<head>

</head>

<title> Your First website</title>

<body>

These are typically the same for every basic html page. Your content though will be placed within the body tags so let's go over your first example. You can type those lines into Notepad for the first part of this lesson.

Text Sizes

A larger text size can be used as a header at the top of your page or even for paragraph headers. Here is an example.

<h1>This is my header</h1>

Go ahead and change the text inside the tags. Be sure to close a tag like this <h1></h1>as an example in your code. Just remember that every tag name must have the same closing tag name followed by the slash.

Bold text

<p><b>See how easy text can be put on the screen?</p></b>

The <b> makes the text bold. The <p> creates a paragraph which basically serves as a return and moves the text to the next line.

To change the header just replace the h1 with either h2 or h3 as in this example. Keep in mind that the header tags can go up to 6 (h6). The larger the number, the smaller the text will be.

<h6>Another header example</h6>

Center text

To center the text on the page you will use the <center> tag. Here is an example.

<p><center>This text is centered on the screen</center></p>

You can also create a line break by using the <br> tag. Here is an example.

Line break

<br>This is a page break</br>

Font colors

Next I am going to show you how to change the color. This is done using the font color keyword followed by a color of your selection. Here are several colors.

<p><font color="green">This text is green</font>

<p><font color="orange">This text is orange</font>

Now you can also use page matching colors from a color chart. All you have to do is use the # (pound) sign in front of the color, followed by the hexadecimal number. Here is an example. <font color="#3333CC"<Example

This font will print the word Example in blue and all of the text underneath it. It is necessary to change the font color again or reference it with a CSS class to control the text coloring.

Finally here is a great page where you can view all types of page matching font color designs. HTML Color Codes

List generation

Next I want to show you how a list can be created. If you have ever used a Word document you will know that a list can produce a series of numbers or bullet points. It is commonly used to indent a paragraph when creating a list of items. The <ol> is called an ordered list. In the example below where you the the type="1"<> this number represented that it will be ordered starting at one. The <li> allows the list of items to be created. Here is the next example.

<ol type="1"><li>Shopping list item 1

<li>Shopping list item 2

</ol>

I'll bet you are just itching to see this run in your browser. Okay for now I'm going to show you the rest of the code to make this work. Just type these lines below.

<body>

<html>

If you had trouble typing this in here is the file you can download directly. Also to make this work you will need to name the file to something like myfirstsite.html. Notepad only saves as a txt extension so you will may need to change this in your system settings. If all else fails you can also go to the site to download Notepad++

Click on this link to see how the html example looks in your browser.

Here is the download link for the html file I made for your convenience.

Download the database file here.

Hyperlinks

Hyperlinks help guide a user around your website. So if you have information that is contained on another page, inserting a hyperlink will direct a user to that specific page. Here is how to create a simple hyperlink. This example will actually link to one of my other pages. Website Design Page

Here is what a hyperlink looks like

<a href="/WebsiteDesign1.html">

Note: The a stands for "anchor" and the href is short for hyperlink reference. It is necessary to embed your text contained in this hyperlink between the anchors because you want that part to stand out to the user.

Adding Images (Pictures)

An image will allow you to add pictures to your website. An image can be nearly any format from JPG, PNG, etc. It is important to make sure that your image is located in the proper folder. Let's start with an example:

<img src=".../images/myworkpic.jpg">

In this example you can see that the img command is pointing to a page on the server in the folder called images. You don't have to create an images folder to link to a picture, but it is a good idea to keep your image files separate from your regular pages.

Adding Youtube Videos

To add a Youtube video you will first need to setup an account and have videos uploaded already. You can watch the video below to learn how to do this.

Once you have a new account with videos, sign into your account and in the upper right corner click on the arrow next to your avatar (picture). Then under the Youtube catagory select Video Manager. After this click on the video you want to add to your page.

Look below the video for the headings that say About Share Add to . Click on the Share heading. Then you will see newer headings appear underneath that say Embed Email Hangout. Click on the heading Embed. Below the Embed heading you will see some scriping text that starts with the tag <iframe>. Now just copy this text into your webpage and a user will see your Youtube video on that page.

Here is what that embedded script looks like:

<iframe width="560" height="315" src="http://www.youtube.com/embed/lE0ga4oJoPQ" frameborder="0" allowfullscreen></iframe>

Observe my example embedded video beow:

CSS (Cascading Style Scripts)

Please keep in mind that it is not necessary to know CSS, but you will gain an advantage if you do. By embedding CSS on your site you will save countless hours on organizing your images, text, tables, etc. So I am highly recommending that if you want to build a professional page then learning CSS will give you that much more of an edge. I won't discuss CSS here as I wanted to keep this page very simple.

Register a domain name (usually about $10/year)

It is highly recommended to get your own domain name instead of using a free website service. I only pay about $10 a year for my domain name www.programmermind.com through Bluehost. Having your own domain is important to stand out in your niche especially if you want to start selling online. Plus you will not be bombarded with ads, but instead can position your ads (if you want) for extra income. Click on this link called Website Hosting to learn more.

Closing thoughts

I hope this page will get you started on creating your very own first website. Just imagine the possibilities such as having your own online store to sell your products, share your hobby with the world, offer online tutorials, and much more. Please contact me at yochatwitme@yahoo.com if you get stuck or have questions. I am here to help.

Note:

The program code is shown above first and then the explanation is below.