Congratulations on your website. I’m assuming you are reading this because you intend on, or already have, a website.
Regardless of how or where you launch your website you will have opportunities to modify the HTML. There is also the CSS on websites.
HTML 5 is the most recent computer language. I will refer to it as just HTML for this article but it is the HTML 5 language. CSS is the Cascading Style Sheet which puts the color, style, the you! into a page of content.
There is so much to each of these, HTML and CSS, that they both need their own space. Don’t let that worry you in the least! You can make your HTML as difficult or as easy as you wish. This article we will cover HTML 5. By the end of this article you will have a page of HTML written by you.
There is a lot to HTML only because there are various alterations that can be made by you to the basic page. This article we will make a basic page, with what is needed just to make it readable by the internet. So, yeah, when your done you will be able to upload the page to your ftp server and it will show up on your internet page.
There are several ways to write HTML. There is a huge popularity for sites like WordPress because they do all the HTML work for you. You just choose which item you want on your web page (using widgets or plugins) and it is fully written and displayed where ever you choose. Even though the HTML is written already you can alter it. Both the HTML and the CSS can be altered to your liking. They have several boxes available for CSS structuring. We will do CSS tomorrow because to be able to work with CSS you need to understand the basics of HTML or you will have no idea what your affecting with your script. So HTML is drawing a picture with a pencil. There you have a picture drawn with lead on a piece of white paper. That’s the basic HTML. Very boring, but it’s there. Then, CSS is the colored pencils and the cool stencils you use to make the picture attractive. Java script is the actions you put into that colored picture! But we aren’t talking about Java today.
In a Nutshell
- HTML – Draws the plain, basic, bare bones of the page.
- CSS – Puts the color and the cool fonts (sizes and types) into that HTML page or pages.
- Java – Moves the items on the page.
Write an HTML Page
So, moving right along. . . you will be using either Notepad or Wordpad to construct your page. Most people use Notepad for it’s simplicity and straightforwardness. Notepad could be called a WYSIWYG (What You See Is What You Get) program. Go ahead and open up Notepad on your computer.
I have my Notepad open. I am going to write a page right along with you. I’ll upload my progress in a photo so you can compare yours.
How A Page Is Read By Computers
A computer that is going to read an HTML page reads it in sections. At the top is a Header section where the title or main thought is written. There are various entries you can put into the header like commands or codes that won’t be displayed to the reader of the page only the computer reading it. Next there is the Body of the page which has such things as Headings and Paragraphs within it. So the computer reads it like this:
The first thing you type is, what you might call, an introduction to the computer reading your HTML page as pictured above. As soon as the reading computer opens this document you want it to know what language you are speaking to it with:
The less than sign < must be present at the beginning of every command and at the end of the command. The exclamation mark says, “Look here computer!” then, ” I’m writing a document type of html.” Then the greater than sign closes the command.
The next line will be to announce the beginning of your html document with:
That is the bottom line basic you have to always have at the beginning of the HTML page. If you were to upload that to the Internet Explorer it would bring up a page, but it would be blank. There’s nothing in it but a command to the computer reading it, right? You want to put a Header section next. The Header section contains the title or announcement of the page. For example, within the header, you want people to read My First HTML Page! You would enter:
<!DOCTYPE html> <html> <head> <title>My First HTML Page!</title>
Notice the new entry? Every item has a specific terminology for the command. For example: <p> = paragraph, <body> = the main part of a web page, <h1> through <h8> = size of titles, h1 being the largest. You may have to look up the exact terminology sometimes. The / must be put at the end of the entry after a command. For example: <title> must have </title> at the end of the title, <p> must have </p> at the end of the paragraph, <html> must have a </html> at the end of the html document. Whatever has a <???> must have a closing </???>
The content of your web page, where you want to write your copy/article is called the <body>. Inside the body you will have maybe a title and paragraphs. Remember when the <body> is opened, put everything you want in it, them remember to close each item and close the </body> close the body.
Your Notepad document should look similar without the black list points at the beginning of each sentence:
- <!DOCTYPE html>
- <title>This Is My First HTML Page!</title>
- <h1>This is Cool<h1>
- <p>Creating HTML is cool and easy to do!</p>
When I first started learning HTML one of my first questions was, “Why is everything on separate lines? Why isn’t it all written out like normal.” There’s a very good answer that took a long time before I found. It’s two reasons. 1. When you add all the different elements for an entire web page to be colorful, engaging, dynamic and what ever else you want, having the HTML written out like regular writing would look like this:
<!DOCTYPE html><html><head><title>This Is My First HTML Page!</title><body><h1>This is cool<h1><p>Creating HTML is cool and easy to do!</p></body></html>
The computer can read either form. But imagine your browser returns an error in what you’ve just written (usually the doctype is much larger). And you have to go back and find it. Which type do you think would be easier for you to search and fix? The error is returned with a line number usually. Even with that help, what a mess to try and look for what you missed. It can be anything from a word missing to a punctuation mark out of place to make a doctype not run.
Reason #2. It’s just plain easier to keep track of where your at and what your opening and closing and filling in!
The format that you write in is up to you, of course. The first method is a newbie method, the second is an advanced program method.
Back to our work. You have Notepad with your DOCTYPE written up with a minimum of formatting, and that’s fine, that’s all we want today, get something that will present on Internet Explorer, right!
Now the most important part, if you ask me, simple but very important! You need to save it in an HTML extension file.
- Click on File
- Save As
- In the File Name box at the bottom of the pop up window, type MyWebsite.html.
- Below that in the Save As Type, click on the arrow for the drop-down menu and select ALL FILES. Remember where you are saving it!
- Select Save
You can close Notepad if it is still open.
Navigate to the folder that you saved your file in. Locate the file. The icon for it should be your default web browser icon. If not, don’t fret.
Right click on your saved HTML file. In the menu select Open. It may ask you what program you want to open this type of file with, select your default browser, or Internet Explorer.
Your browser will open and your HTML will show up on the page just like a website! If you have a website with hosting you can upload your HTML file through an ftp service and it would display your HTML for the entire world to see!
Granted this HTML is a bit boring and there’s so much more you probably want to tell the world! That’s where the CSS style sheet will come in handy. Tomorrow we’ll go over the different types of CSS style sheets and we’ll jazz-up that HTML you just created!
Take your HTML further with learning tools like:
You can close your browser like normal, your HTML file is safely stored on your computer for tomorrow.