Creating an HTML5 Page

Hello there!

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>”.

Creating an HTML document

This is the basic HTML setup for a web page.

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:

<body>
<h1>This is the heading!</h1>

<p>This is a very simple paragraph. You did it!</p>

</body>

Adding a heading and a paragraph.

Within the body tags is where we will put our content to display on the web page – this includes paragraphs and headings.

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”.

Saving an HTML document

How to save your text document as an HTML document to upload to your site or to open it in a web browser.

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.

Webpage in the browser.

Open up the .html document that you have created in your web browser to see the page that you have created.

Well… there! You’ve done it! You’ve created your first HTML5 document!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: