In this article I will cover the bare minimum basics to create your first web page from scratch. Believe it or not, creating a web page can be much easier by hand in a text editor than using a fancy WYSIWYG Editor [1], as there is no “Fix it so it’s right” button in those types of editors anyways. 🙂 There are a lot of free web editing tools out there to get started making web pages with. Here are a few of them:
- Komodo Edit (syntax highlighted text editor) [2]
- Filezilla (FTP client to upload HTML / images / other files to your website host) [3]
- GIMP (free image editor with powerful features similar to Photoshop) [4]
- Irfanview (free lightweight image editor for image resizing / changing format / color correction / etc) [5]
To start off creating our HTML web page, we need a proper blank HTML document structure. This is probably the most important part, because the web page must follow the proper specifications for:
- The page to look the same (or at least very close) in all browsers
- Search engines like Bing and Google to properly read the page content effectively, so they add it to their search index
Here is what we are going to start out with. Copy this code into a new file in your text editor, and save it as index.html to your desktop:
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>YOUR PAGE TITLE GOES HERE</title> </head> <body> <!-- Page content goes here (this is a coder's comment tag that is hidden from ever showing on the page) --> </body> </html>
Let’s break all this code down, so you know what does what. Knowing what is happening here is going to be half of your battle. Don’t worry, it’s pretty simple and straightforward.
You have 4 main parts to a basic blank web page format:
- Declaring to the web browser what type of document format is being used, with the <!doctype> tag
- The <html> opening and closing tags, where the entire document’s code goes inside of, except for the document type declaration above it
- The <head> opening and closing tags, where the page configuration data goes inside of
- The <body> opening and closing tags, where the page content goes inside of
In our <head> tag’s inner contents that configure the web page, we have 3 configuration settings:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>YOUR PAGE TITLE GOES HERE</title> </head>
<meta charset=”UTF-8″> sets the web page “character encoding” to UTF-8. This is the default character set for a modern HTML5 web page. Defining it explicitly is a nice precaution to take, so the odds of the web page having “weird symbols” in it are drastically reduced.
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ /> helps control the way the web page looks on smaller screens, like mobile devices. Essentially we are saying to the web browser not to change the scaling of the web page when a smaller screen device first loads the page.
As you may have guessed, <title>YOUR PAGE TITLE GOES HERE</title> is the title of the page. It does not show on the page itself, but either shows at the top bar in your browser window, or when you save the page as a bookmark to your computer.
Now lets look at our <body> tag’s inner contents:
<body> <!-- Page content goes here (this is a coder's comment tag that is hidden from ever showing on the page) --> </body>
We have nothing except an example of a coder’s comment tag, because all that ever goes in here is the actual page content itself (including HTML code to control the formatting of your content). Comment tags can assist you in knowing what is going on where inside your web page (and can be used anywhere), and come in very handy once you start to have a lot of code formatting your web page.
That’s all we need to know about the primary structure of this basic blank template, told you that would be easy! 🙂
Now that we have a blank template and a basic understanding of it, let’s add some text and images for content:
<body> <!-- Page content goes here (this is a coder's comment tag that is hidden from ever showing on the page) --> <h1>Section Title Here</h1> <p> This is text inside a paragraph tag. <br /> This text is forced onto a new line below the text above it. This text IS NOT forced onto a new line. <br /> <img src="http:/mywebsite.com/path/to/image/on/server/image.jpg" alt="Alternate text placeholder here" /> </p> </body>
Before discussing the new HTML tags used here we haven’t yet covered, notice the left margin space we used just the same way as with the <head> tag’s inner contents. This is handy to realize that where you are editing is “nested” inside another HTML tag. If you don’t use margins when nesting you can get lost very easily as your content and HTML formatting grows in size. You generally nest by using the TAB key to create the margin space, but you can use the space bar as well to make a few spaces.
First off we have our <h1> tag:
<h1>Section Title Here</h1>
This is basically a way to title a section or subsection of your content. It creates large bold text on it’s own line, with a margin around it. This tag ranges from <h1> to <h6>, with <h6> being smaller than <h1>.
Next we have our <p> tag, with <br /> and <img /> tags inside it:
<p> This is text inside a paragraph tag. <br /> This text is forced onto a new line below the text above it. This text IS NOT forced onto a new line. <br /> <img src="http:/mywebsite.com/path/to/image/on/server/image.jpg" alt="Alternate text placeholder here" /> </p>
This <p> tag is a paragraph tag. It has an opening and closing tag (just like the html / body / head tags), so content can be added inside of it. It puts all other content that is above or below it on a separate line, and creates a margin around all the content that is within the opening / closing paragraph tags.
The <br /> tag moves all content after it onto a new line, with no margin (other than line height). It does not have a separate closing tag, therefore it ends with a space and forward slash for proper formatting.
The <img /> allows you to display an image on a web page, and can be given optional attributes to follow like height / width / alt (see alt attribute example, adding height=”99″ width=”99″ into the tag would force it to be displayed with 99×99 pixel dimensions). It also does not have a separate closing tag, therefore it ends with a space and forward slash for proper formatting just like the <br /> tag.
That’s about all there is to making a very basic web page. Now you should be able to easily create one on your own. 🙂 If you are new to document editing, don’t forget to click the “save” button after any changes you make.
When creating the main page of a website, or main subpage going in a subdirectory like http://mywebsite.com/mysubdirectory/ , name your HTML file index.html to have it automatically be the main page for that particular directory. Otherwise name it whatever you want, but remember to have the filename extension remain “.html”. Additionally, on a PHP-enabled server you can use “.php” instead of “.html”, if you want to also get your hands dirty adding a little PHP code in your web page [6]. Good luck! 🙂