Basic HTML5 Page
We are going to start by writing code for a basic HTML page. You will need a text editor, and there are many free ones online. I’ve tried several, but the one I like best is CoffeeCup Free HTML Editor. My favorite feature of the software is the “validate HTML” service. It’s very helpful to write some code, and check your document as you go for any missing tags or errors using this feature. Validating your HTML can be a great teacher, as you can look up the error descriptions and understand what you have done wrong. Also, don’t worry if you don’t understand all of this yet. You will learn as you go.
When you open CoffeeCup editor for the first time, a little welcome window will open. Select “new blank page,” or if you don’t see this window, go to the file menu, and select “new HTML5 page.” Another great feature of this editor is that it will create a blank page with some of the basic elements you need for an HTML page. If you would rather start from scratch, or you selected a different text editor, delete all the text and we will go through the necessary elements now.
To begin writing our code, we need to tell the Web browser that we are using HTML5.
- To do this, you will declare the html version by adding <!DOCTYPE html> to the beginning of each HTML5 page. The text between the angled brackets is called a tag, and html tags are usually written with an opening and closing tag. For example, <head> and </head>. Closing tags use a backward slash before the word. Two exceptions in our template are when we set the language and the character encoding (explained next).
- Next you will set the default language to English (en). <html lang=”en”> You can look online for a list of possible language codes, such as “fr” for French.
- Then you will begin the head of the document. <head>
- Next, you will set the character encoding to UTF-8. <meta charset=”UTF-8”>
- After that, you will add the Web page’s title between these two tags: <title> </title> For example: <title>Basic HTML Page </title>
- Then, you will end the head of your document </head>
- Next, you will begin the body of your page. This is where your main content will go. <body>
- Then you will end the body of the page </body>
- Finally, you will end your Web page </html>
Your finished code should look something like this:
Since you will use these elements for every Web page, you can save it as a template, or go ahead and use the code that is already provided each time you open a new HTML5 page with CoffeeCup. They include some extra lines, and you can go ahead and delete anything that was not mentioned above for now. For our first HTML5 page, we are going to write an article that has an image and a paragraph. Go ahead and add the following code.
- Find the line after the first <body tag> and begin your article. Type: <article>
- We want to tell our readers what the article is about, so we use heading tags. There are 6 heading sizes and they begin with h1 as the largest, going down to h6 as the smallest. Add <h1>Pyramids</h1> and give your article a heading between those two tags. I chose “pyramids” for mine.
- Next, you will choose a photo for your article. If you don’t have one on your computer, you can go to Google images, click on the search settings icon in the upper right, select “advanced search,” scroll down to “usage rights,” and choose “free to use, share, or modify, even commercially.” I chose a Wikipedia photo of pyramids. Now you can type in any subject and find photos that are free to use for your Web site. Make sure you check if the person who posted the photo wants a credit for the photo. You will need to keep track of this information to provide a credit in your page if you use the photo. There are also Web sites that offer free photos, though many of them offer some for free, and some for a charge, and I get frustrated searching on these types of sites. My favorite free stock photo site is www.freedigitalphotos.net. You could also befriend a photographer.
- Once you have selected a photo, you will need to create a folder to keep all the resources for your Web page together. Save your HTML5 page on your desktop and close it in your text editor. You will see the icon on your desktop. Place this HTML page into your folder. I named this folder Basic HTML Page. Place your photo in this same folder as well. Now you can go back to CoffeeCup and open the file to continue working.
- You will probably need to resize your photo. Digital photos are measured using pixels. If a monitor has a resolution of 1024×768, then an image that is 500 px will take up about half the browser window. You can play around with sizes to see what works best for your page. I found a free photo on Google Images of a pyramid that is 4372×2906. Obviously, this is too big. If we put that in our Web page as is, we will have to scroll, and users will only see a piece of the photo. You can try this and experiment with why this doesn’t work. There are many free photo editors online. I used Pixlr and clicked on “Editor.” Follow their instructions to resize your photo. While you can always make an image smaller, you can’t make it bigger. If you do, you end up with a blurry photo. I made the pyramid photo 275 px wide, and Pixlr automatically adjusted the height based on the original ratios. The finished photo was 275×183. It’s best to make the photo the size you want it to be on your Web page. You can also set the size by just changing the width and height yourself in the code. This is a good way to see how big you would like the photo to be on your page. However, if you leave the image the original size, this will slow down the performance of your page, as the browser has to calculate the image and show it according to your settings, rather than just loading and displaying the image. You will now add your image to the page. Type <img src=”mywebpage.jpg” width=”275” height=”183” alt=”My Web page photo”/> This states that the image source is the jpg in your folder named mywebpage.jpg, which has a width of 275 pixels and a height of 183 pixels. Look up the properties of your own photo’s dimensions to set the width and height.
- Now we will add a paragraph. You will need an opening and closing paragraph tag, and you will write the text for your page within these tags. In my text, I added a link to a Wikipedia page about pyramids for the reader. To do that, I typed <a href=”http://en.wikipedia.org/wiki/Pyramid “ rel=”external” title=”Pyramid”>Pyramids</a> are <em>cool</em>. So are you.
- You can copy/paste this for now. Try editing it by changing the link in the quotes beginning with “http” to whatever page that you want. The title is “Pyramid,” which is the name of the Wikipedia article. Before the </a>, you will use the word that you want to turn into the link in your paragraph. You will also notice that I added some <em> tags for emphasis. Generally, we will do our text styling using CSS3 style sheets, which you will learn later on, but I added that for fun. HTML is used to tell your browser about the different elements on your page like the heading, paragraph, and images. CSS3 will be what you will use to style your html, where to place the elements, give it color, and your own design.
- Finally, you will end your article </article> You should see your ending </body> and </html> tags after that.
Your code should look something like this. We indent new tags and line up the closing tags to make the code easier to read.
And your basic HTML5 page should look something like this:
Look at you go! You’re a genius. You have created your first Web page. Hooray!