Create your first HTML website

At the end of this task, you should have your very own website, written in HTML, styled up to highest aesthetic standards with CSS, and with interactive dynamic content written in JavaScript.

What exactly do you need for this endeavor? Well, it turns out all you need is a text editor and a web browser. (If you are using Internet Explorer, you need to download a sensible browser like Firefox or Chromium).

What exactly is HTML anyway? It’s an abbrevation that stands for: Hyper-Text Mark-up Language (a quick explanation). In practice, it’s very much like XML, which you should know a little about as well.

Task

Now it’s time to start building your website. The content of your website is totally up to you: we recommend collecting some material about the topic that you wish to present, like pictures, textual content, video, lists of items, etc. Content is king.

Put all those resources in a folder on your hard drive. This will be the base folder of your website. Now create an empty file index.html in that folder.

This empty file will soon contain some text. The text you will populate it with.

To get an understanding of how HTML is normally applied and to get a feel about its structure, read the following links:

• Elements and Tags in HTML
• Create your first website

Now dive in deeply by following any one of these fine manuals in whole:

• Continue with the HTML.net tutorial
• HTMLDog’s Beginner HTML Tutorial
• Learning HTML for Kids!

Finally, become up-to-date with Dive Into HTML5 tutorial.

Now what’s up with cascading style sheets aka CSS?

You style your webpages with CSS: determine the font, sizes of elements, colors, backgrounds, offsets and margins… Here’s a good, short CSS tutorial for you:

• W3Schools CSS Tutorial

And finally there is JavaScript, the dynamic runtime of today’s Web. JavaScript is a programming language, unlike HTML (mark-up language) and CSS (declarative language). If you’ve gone over the fun introduction to programming and JavaScript continue through the W3Schools JavaScript tutorial.

And this is it of the basics. :)

Happy experimenting! That’s all you need to do, experiment and see what happens.

You can use these interactive instant-feedback HTML+CSS+JavaScript editors for experimenting:

• JS Bin
• jsFiddle

But always save your progress to the hard disk, so you will be able to recall it later if needed.

Remember

W3Schools’ HTML reference is an invaluable resource. There’s also a CSS property reference, CSS selectors reference, and JavaScript reference.