Hello World - Step One to Making Your First Web-site

The Basic HTML File Structure

Steve Smith, host of your TQA Weekly, explains how build your basic HTML file, and structure it correctly.

Episode #2-19 released on February 5, 2012

Watch on Youtube

Hello World, today, I start teaching you how to create your own personal web-site using HTML5 and CSS3, in a 12-step video course.

This is TQA Weekly, I'm your host, Steve Smith, aka Zed Axis, and I'm going to teach you you how your browser interacts with scripting languages like HTML and CSS, as part of the Hard Coder Series. After all these 12 episodes are done, I'll be making a single full length download-able episode. I plan to interweave one hard coder episode, with one normal episode, every other week. At the end of this series, I'll be asking you, my listeners to send me your creations, and that one I find is the built the cleanest, looks the best, and has the most unique content will be hosted free for a year, and I will give your own domain name.

Today, I'll help you with the basic layout of the most important parts of the HTML document that allows web developers like me to bring you the content on the internet. I'll also explain in other episodes how different types of tags works, how to use CSS to modify the look, and position of objects in the page. What you need to do to guarantee that your web-site can be indexed by search engines, and the importance of clean scripting practices.

Let's explain what HTML and CSS mean first. HTML stands for Hyper Text Markup Language, and CSS stands for Cascading Style Sheets. The HTTP, or Hyper Text Transfer Protocol was designed into HTML as core feature to allow users to fluidly travel between pages whether locally hosted on your computer, or on servers on the now, Internet.

Your typical HTML file is comprised of several sections defined as the head and body. The head contains such things as the title which is what you see at the top of the screen. The body contains the content you see in the browser.

In order to create an HTML file, you need to remember a few details. The layout is extremely important. All commands must be enclosed within square brackets, the kind that are turned 45 degrees on your keyboard. Most commands are an open and closed version. The open command contains the name of the command with the square brackets. The close command is also enclosed within the square brackets, but the name of the command is proceeded by a backslash.

The title command must be enclosed with the head, in order to function correctly. And the head must be opened and closed before the start of the body.

Both the head, then the body, are enclosed within the HTML block, which opens at the beginning of the file, and closes at the end of the file.

Now, to show you what this means

<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>

This is the basic structure of the HTML file. Click to see running Hello World version. You may use notepad, or similiar to create your files, just be sure to save as an *.html file.

Next week, I'll show you how to get your distribution of Ubuntu to upgrade to the next revisions, and the week after this I'll talking about the various command tags we use within the body to organize the content within an HTML file.

Remember to like, share and subscribe to TQA Weekly. For more information like our show notes, how to join our mailing list, get your own TQA Weekly branded gear and apparel, or for our Android Application, please visit tqaweekly.com. We now feature an easier subscribe feature to allow you to download the latest episodes, and the web-site also has a search feature to allow you to find the solutions for your technology issues and problems. Stay safe and online, have a great day!

Host : Steve Smith | Music : Jonny Lee Hart | Editor : Steve Smith | Producer : Zed Axis Productions

Sources & Resources

Community Comments

Share your thoughts, opinions and suggestions

Login or Register to post Your comment.