Home
Username:
Password:
HTML 4/5 with CSS Tutorials

Introduction / Creating Your First Page

Subtitles of the Movie

Let's start by creating a very simple HTML page that simply says Hello. This is my first web page. Now HTML is very simple and logical. The browser will read the HTML like you and I read English from the top down and from left to right, thus a simple HTML document begins with what should come first and then ends with what should come last, so go ahead open up your Text Editor. Here I'm using Windows Notepad and the first thing you'll want to do is tell the browser that you'll be speaking to it in the language of HTML. This is done with the html tag, so before we do anything else we're going to type the HTML tag which starts with less than symbol, also called an opening carat. Type HTML, closing carat. This is the first line in your document. Now as you may recall we need to pair our tags with HTML so we must have a pairing closing tag with our opening HTML tab, so go ahead and press the Enter or Return key and add a few lines below your HTML tag and now type opening carat /HTML closing carat. So, there is the companion closing HTML tag to go with the opening HTML tag. Next thing that our document needs is a head, which provides information about your document and a body which is the actual content of the document. Since HTML is always very logical the head section will be on top of the body section. So let's go ahead and add our head tags, which is going to look like this in between the HTML tags. I've gone ahead and tabbed over my head tags so that they are indented a little bit. It's not critical that you structure your html like this but it's better to make it easier to read and understand. After the head we're going to hit the Tab key and add our body tags, two of them. The opening tag and the closing body tag I'm going to add a line between them. Actually, let's go ahead and add some more spaces in between the opening and closing tags so we can add content to our head section and our body section. So your document now should look pretty similar or exactly like my document here and if it does you've just made your very first simple web page. What you have here is also the basic template for all your future HTML documents. Now let's add some content to our page. Now as we've seen, HTML documents all have two parts: a head and a body. In the head section you'll write information about the page and the body section contains the information that actually constitutes the page. Now all of your HTML pages should have a page title which will appear in the top bar of the browser. This will be done in the head section. The element used for this title is the title tag so let's go ahead and in between my head tags press the Tab key to key over there and now let's add my title tag. Then in between the opening and closing title tag let's add our actual title: Here is my first HTML page period. Now let's close the tag like so. Now note that this title will not appear on the page itself. Anything that you want to appear on the page is content and must therefore be added between the body tags. So let's go ahead and add that content. Click down here in the body section, hit the Tab key and type in open carat p closing carat Hello, this is my first web page period and then I'm closing that p tag. P stands for Paragraph, which is exactly what this is here, a paragraph of text. Your HTML document should now look like mine here and now you're done. You've just made your first HTML web page. Next, all we have to do is save this file to our hard drive and then open it in our browser to see the content, so in Notepad or whatever other text editor you're using choose File, Save As. Under the Filename give it a name, make sure that you add the extension .htm. You can also add .html. Both are equivalent. I tend to use .htm since it's shorter. Whichever version you use - .htm or .html - I recommend sticking with one version or the other. Next, here in the Save As Type drop-down menu make sure you choose All Files and not Text Documents because you will actually want to create here an HTML file. If you leave this to save as type Text and you forget the extension Notepad will add a .txt extension and the browser will not understand this as HTML and won't render it for you. Take note of where you're saving the file, in this case my Temp folder and then click on Save. Now we simply open up our browser and from its Main Menu choose File, Open File, browse to the location where you saved your file, in this case it was myfirstpage.htm and notice that here is my page: Hello! This is my first web page. - is the only content. Up here's my title. Here is my first HTML page. So there you have it - your very first HTML document. So that will conclude this first section of the tutorial. Let's now move on to the next section: HTML Building Blocks.

Tutorial Information

Course: HTML 4/5 with CSS
Author: James Gonzalez
SKU: 34077
ISBN: 1-935320-93-9
Release Date: 2009-12-31
Duration: 10.5 hrs / 142 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available