Today we’ll learn how to make a basic HTML5 page to get your started on your website.
If you didn’t know, HTML stands for hypertext markup language. This is the language that allows you to build web pages.
The difference between a markup language and a programming language, like Java or C++, is that it is what tells your browser to display the content on your web page in a specific way. For example, HTML can tell your browser, “Display the paragraphs on this web page this certain way, display this text as a heading, etc.”
Currently, the browsers that support HTML5 are Safari, Chrome, Firefox, Opera, and Internet Explorer.
OK, let’s get started!
Open up any text editor, such as Notepad or Notepad++. You can use NetBeans IDE, too. But we’ll use Notepad++ to show you that you can build a site from a text editor!
Using HTML5, which will be the new standard and is currently under further development, we will use the basic HTML5 “skeleton” or template to create our HTML5 document.
To start an HTML document you always start with these tags: the doctype tag and the html tag. You just need this at the very top: <!DOCTYPE html>. Then you need the “<html>” tag and a closing html tag at the very bottom: “</html>”.
In HTML, we use markup tags. Tags are what say what the content will look like in your browser. Markup tags always start with the “<” bracket, and then have a closing “>” bracket. Most tags that you use will come in pairs, meaning that you will have an opening and closing tag. As you can see in this template, we are using the “<body>” tag as the opening tag and the “</body>” tag as the closing tag. This tag will tell the browser that the content between the “<body>” and “</body>” tags will be the main content of the page.
Next, let’s create a heading and a paragraph to display like so:
include a screen shot here!
Inside of the <body> tags, we will include our content: a heading and a paragraph. The tag for a heading is simply the <h1> tag. There are also <h2>, <h3>, <h4>, <h5>, and <h6>. As the number in the tag gets larger, the text will appear smaller. We’ll just stick to <h1> for now.
We can type the following:
<h1>This is the heading!</h1>
<p>This is a very simple paragraph. You did it!</p>
Notice that we used the <p> tag, which is the paragraph tag. The closing tag for this one is </p>. This tag treats the text in it as a paragraph and displays it to the screen as “regular” text.
Now save your document with whatever you want the document to be named. This example is called “webpage.html” and save as type “HTML”.
Now you can upload this HTML file to your host provider or open up the file in your web browser. Just find the file where you have stored it and open it with your favorite brower.
Well… there! You’ve done it! You’ve created your first HTML5 document!