Your first Web Page
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 .
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.
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.
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:
<title> Your First website</title>
These are typically the same for every basic html page. The title will be usually the name of your website 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.
A larger text size can be used as a header at the top of your page or even for paragraph headers. They range from h1-h4. Here are some examples.
<h1>This is header 1</h1>
<h1>This is header 2</h2>
<h1>This is header 3</h3>
<h1>This is header 4</h4>
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.
A div tag can be used to center text and use CSS for positioning. The style represents a want to use CSS inside a tag without a file, such as style.css.
Here is an example of a DIV tag aligning text
<div style="text-align: center"></div>
<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>
To center the text on the page you will use the <center> tag. Here is an example.
You can also create a line break by using the <br> tag. Here is an example.
A Line break (br) is used to skip down a page. It simply acts as a carriage return.
<br>This is a line break</br>
A Page break (p) is used to skip down a page. It simply acts as a carriage return. It is actually difficult to see the difference between a Page break and a Line break.
<p>This is a page break</p>
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="red">This text is red </font>
<p><font color="green">This text is green </font>
<p><font color="blue">This text is blue </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
Simply stated, a "Bullet List" will allow you to create a list of items. If you've ever used "bullets"in Microsoft Word, you will know how this work. It creates a vertical row of items to be displayed. Here is an example:
The example I used showed this:
The div is used to position the list. The UL is used to start the unordered list. Each item item is followed by a <li>
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
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.
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.
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.
Here is what a hyperlink looks like
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. Like this:
Once clicked, this will navigate the user to the page called "WebsiteDesign1.html"
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:
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>
<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. It is good to think of CSS as a property since it creates the attributes that make up a tag. Attributes can consist of font face,font size, background image, positioning, color,etc.
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 to learn more.
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 firstname.lastname@example.org if you get stuck or have questions. I am here to help.
Questions? Ask Here
Copyright 2010 - All Rights Reserved