This details tutorial gives you idea how sample html code for home page, how you can make your home page by html.
Introduction to the HTML Web Design Tutorial
You are about to experience the free HTML tutorial created especially for the visual learner. If you would rather learn by watching, then you’ve come to the right place.
We’re going to show you how to make a web page through a series of animated visual tutorials. Actually you get to see the web page being built from the ground up. You just have to do is follow along, and you’ll be building a website in no time.
Each lesson in the series will play inside of a new window. There are control buttons at the top of the window so you can pause, reverse, or fast-forward. Reference material and resources are also available.
If you’re new to learning web design, then you’ll want to watch the lessons in the order they’re presented. Advanced users can skip to a particular lesson using the menu at the top of this page.
Before getting started you may want to read our information on web servers, since you will need a place to host your website once it’s ready to go on the Internet.
So, are you ready to start making web pages? Let begin
HTML Web Design Tutorial #1
Locating Your Computer’s Plain Text Editor
First off, let’s make one thing clear. It’s not necessary any special web design software to make a web page. In fact, you can, originally web pages were supposed to be created using just a plain text editor like. That’s all you really need to write the code for your web page. It will give you more control, and you don’t have to invest in, or learn how to use, any fancy design software.
Majority computers have a default text editor already installed. For Windows® users, it will be Notepad. Macintosh® computers as I think will probably have a program called SimpleText. If you’re using a different operating system, or if for some reason your computer does not have one installed, you can find some free alternatives here.
In part 1, we’re going to see how to locate and open Notepad. If you already know how to open Notepad, then you might want to skip this first one. To begin the first lesson, just click on the “play” button below. A new window will open, and once it has downloaded, it will begin to play. When you’re finished watching, click on the “next” arrow to continue with the series.
HTML Web Design Tutorial #2
Starting Your Web Page in Windows® Notepad
Starting with lesson #2, we’re going to show you how to write HTML using your text editor. HTML is an acronym for HyperText Markup Language. Don’t worry, it’s not as scary as the name implies. HTML is really quite easy to learn, and of course we’ll make it easier, by showing you how.
Basically, we write HTML by using special markers called tags. Each tag contains information that is sent to the web browser. The web browser then displays the web page according to the tags used in creating it.
So, let’s see how to add our first set of tags. If you haven’t already, go ahead and open your text editor (Notepad, SimpleText, Pico, etc.
HTML Web Design Tutorial #3
Adding a Head & Body Section to Your Web Page
In our next lesson, #3, we’re going to split our document into two separate sections. Every web page is supposed to contain a head section, and a body section. Each section has its own special purpose, and anything else you add to your web page will go into one of these two sections accordingly.
In general, the head section holds information about the web page, while the body contains its content. The information contained in the head section will not show on the page itself, but may show in other areas, like the title bar. Most everything you put in the body section however, will show up on the finished web page.
HTML Web Design Tutorial #4
Saving Your Document as an HTML Web Page
In our last lesson we split our document into its two major sections, the head and body. We also added a bit of text into the body section, so we could see how it looks in a web browser. Before we can view it as a web page though, we’ll need to save our text document into HTML format.
If we were to perform a regular save of our document right now, it would be saved as just a plain text file. Instead, we need to use the “Save As” option, so that we can give it a different extension. The extension we’ll use is:
.html
By giving our page this special extension we will then be able to see how it looks as a web page. In part 4, click on the “play” button below to begin, we will see how to add the extension, and create a new folder for holding all of our web files.
Of course, you’ll get to see which section to place each item in, as you watch each of the animated lessons. To begin part 3, click on the “play” button below.
HTML Web Design Tutorial #5
Giving a Title to Your New Web Page
In the last lesson we showed you how to save your document as a web page, and then view it in a browser. If you had entered some text into the body section of your document, then you should have seen it displayed in the browser window. The body section is where we put the stuff we want people to see on our web page.
Now let’s talk about something that goes into the head section of our html document. All web pages are supposed to have a unique title, and that title gets placed inside the document’s head section. It goes inside the head section because the title is information about the web page. It’s there to tell people what that particular page is all about.
Now, you could make a web page without a title, and it would still work. However, you don’t want to do that, and here’s why. Most search engines will list your page by its title, and not having one could lose you a click when someone searches for pages like yours. Also, when a visitor adds your page to their Favorites (Bookmarks), the listing will default to your page title.
Suffice it to say, there are plenty of good reasons to give your web page a title. So, lets see how to do it by clicking on the “play” button below.
HTML Web Design Tutorial #6
Using Line Breaks to Start a New Line of Text
An interesting thing happens to the text you put in your document when it’s displayed on a web page. It all runs in a continuous stream regardless of how many times you hit the “Enter” key in order to start the text on a new line.
When a web browser reads an html document, it deliberately ignores the extra white space placed in the document. Any carriage returns, tabs, or consecutive spaces will be displayed in the web browser as only one single space. In order to add certain effects to your text, you’ll need to use special formatting tags.
In part 6 we will see how to use a special formatting tag called the line break: <br>. Adding one into your html code creates the same effect as hitting the “Enter” key once. Click the “play” button below to begin the line break lesson.
