Create your first web page from scratch by writing HTML code
How to create a website from scratch
I am publishing this article on the Internet, and so you may be using either a Mac or a PC computer. In either case, the process is pretty much the same, except you are probably going to be using different text editors depending on which operating system and type of computer you are on.
How to create a website in Notepad using a Windows computer
On a Windows-based PC, you are most likely to use a program called Notepad to create your first web page from scratch. To start Notepad, click on the start menu, then find and click on an item that says"Run". Type "notepad" or "notepad.exe", and a blank text document should open in Notepad. This is where you are going to type your HTML code described below. On Windows 7, click on the round start button in the lower right corner of your screen, and type in "Notepad" into the search input box, then click on the search result that says Notepad to start it up.
How to create a website on a Mac
On a Mac, you will be using something like Komodo Edit, Aptana Studio, Bluefish, Eclipse, SeaMonkey, Amaya, Kompozer, Nvu or TextWrangler. Do a Google search on any of these and see if you like any one in particular. I have used TextWrangler on the Mac before for writing HTML and PHP code.
The most important thing to understand here is that we need a basic text-editor capable of saving files with html extension. All of the editors above support this functionality. It's so basic most computers already have a text editor installed, you are pretty much ready to start right now.
Learn how to make a website displayed below
Below is an example of what you are going to learn on this page. It doesn't get any more basic than this. And that's the point of this tutorial.
Figure 1. A website made from scratch using a regular text-editor.
Using a text editor of your choice we will write HTML code to create your very first web page from scratch. You will need to create a new text file and save it as index.html. This file will contain the code needed to display your very first web page, which I explain below.
Does the file have to be called index.html?
The file you are going to save to your computer does not have to be called index.html, so why do I use it as an example? index.html, or even index.php are usually set as reserved filenames on your web hosting server (we're not there yet). So, when your server finds a file called index.html in its main root directory for your domain name, it automatically assumes that it is the front page of your website and chooses to displays it, and not some other file in the same directory.
Let's say for example that you have a file called notindex.html and it's stored in the root directory for your domain name on your web hosting server. When someone goes to your domain name, the browser will not open notindex.html just because it's the only html file there. Unless we rename it back index.html. Usually, if index.html is missing from the root folder, the web server will display a directory of all files that exist in that folder.
For now, we are saving this file to our own computer, not to our hosting server. So it doesn't really matter what it is going to be called, but for the sake of being relevant to what you will need to do later, it's probably a good idea to save it as index.html. However, as long as we are working on our local computer to test our first website, it could be saved as myfirstwebsite.html if that makes you feel more accomplished.
Commonly, each separate HTML web page is typed into its own separate html file. While index.html is assumed to be your homepage, you can easily imagine that a web page containing a description about you could be called something like about.html and your homepage could simply link to that page. I'll talk about linking pages later, but for now we're concerned with just one file - your homepage.
This is the bare minimum HTML code your browser expects from your first web page
Below I show an explanation of the basic idea of writing your first HTML code. It is followed by a more elaborate example of the code you need to type into your text editor in order to create your very first web page. This is called HTML code. As you can see, it is pretty easy to grasp even if you've never seen anything like this before.
An HTML tag - the building block of a web page
To start a new HTML document we begin by typing in the HTML tag. When we create a new page in HTML, we always open a new tag called HTML first. Everything else follows after that tag.
In computing, the less-than and greater-than symbols are regularly used with a bracket-like function since almost all keyboards lack buttons for actual angled brackets. In this context, the less-than and greater-than symbols are often referred to as angled brackets, diamond brackets, crocodile brackets or chevrons.
Below is a slightly elaborate example of an HTML webpage. But it is simply a series of different tags being opened and closed one after another. You will notice that some tags are located within other tags. By convention, the TITLE tag, for example must be located within the HEAD tag. It's just the way browser expects you to write this part of your HTML code. Whatever text you enter in between the TITLE tags will be displayed in the title of your browser when you open this file. A good example of the visibility of the text you enter into the TITLE tag would be Google search results. If your page is found on Google, or other search engines, it is the text inside TITLE tag that you see on the search engine results page!
Whatever goes into the BODY tag that will be actually displayed inside your browser window. If you enter plain text in there, a line of text will be displayed. I use the P tag to indicate that I start a new paragraph. But you don't really need to use the P tag to enter text, although I strongly suggest that you do.
The one and only HTML tag
In HTML, we use angled brackets to enclose HTML commands within them. Opening a new tag lets the browser know what we want to achieve. The browser looks inside the brackets for a specific command that it expects. For example the html tag lets the browser know where our html document starts. The HTML tag usually indicates the start of an HTML document and that we are going to be typing all kinds of other tags within it to create our first web page. By itself the HTML tag doesn't do anything. If you simply opened and closed the HTML tag, the browser would display an absolutely blank page.
Other HTML tags could be HEAD, TITLE, BODY, H1 and P
In the example above, the HTML tag is not the only thing there. We also have the HEAD tag, the TITLE tag and the BODY tag. In addition I used a tag called H1, which will create big header text. I also used the tag called P to let the browser know that I am starting a new paragraph.
What HTML code should I type into the text editor to make my first page?
What will my first website created from scratch look like?
Copy and paste the code above into your favorite text-editor and save the file as index.html (note the html extension). Find the file in the directory you saved it in and double click on it - it will automatically open in your default browser. This code will produce the following effect:
My first website ever
This is the first ever website. I created it from scratch by typing HTML code. It was easy.
Thanks for visiting websitehomework.com - an website containing html tutorials covering topics such as how to make websites from scratch, css, javascript and other website-related subjects.