When learning HTML, there are a lot of tutorials out there that just makes you copy and paste code without telling you how it “really” works. Don’t get me wrong, I learn a lot from those tutorials because I have an experimental mind that just likes to break things and put them together to figure out how it works.
But I want to do something different…something more enjoyable to learn and perhaps more informative. HTML is very simple to use, and if you think about it, all sites are heavily built on this language.
I’m creating a series of tutorials and case studies that will help any beginner or even someone that is familiar with web developing to know how to use HTML programming language better. So if you’re starting out, you’re right on track with this first post. The things we are going to cover in this series will be:
1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome
I recently posted 10+ web design tools that web developers should use, and from that article, the only tools you need are a browser most preferably Mozilla Firefox, and a text editor, in which I will be using my Mac for these tutorials, and so I will be using Panic Coda. However, Notepad and Scite, falls within the same category.
I would advise you to make a new folder on your Desktop or some place to store all these files and images. I labeled mine “Website Tutorial” but you can name it whatever you want. Inside this folder, I created 1 more additional folder named “images“.
After you opened your text editor, I would immediately save the blank file as a “index.html“. Remember the extension of .html. Why save it as “index.html”? Index is a special name for an .html file that hosting companies will pick up as the first page of your website. So if your Home page is labeled index.html, and if I went to your site, then I will see your Home page. The same goes for labeling your About page as index, and I will see that if I went to just yoursite.com.
The first thing that your html file needs is a HTML DOCTYPE declaration. This declaration is included in html files to allow the browser and internet to determine what syntax to use in decoding your site. Basically put, it tells the browser the language you are using. I haven’t found a reason or difference between the doctypes nor have I came to a point where I had to use a different one. However, the main doctype I use is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
W3C is pretty much the web standards for websites. If your website is validated to their validator then that means your site has no problems in there, and search engines tend to like validated sites since they are nicely coded and structured.
I would save this code somewhere in your knowledge, whether it be a separate notepad to hold all these coding snippets, but this piece of code hardly changes.
The general structure of an HTML page will consist of the following tags: html, head, body.
Once you declared the Doctype, it’s time to set up the Html structure. To do this, just simply add the tag:
<html> </html>
This simply tells the browser, “Hey, I’m using HTML to code this section/website. Make sure you use the HTML language decoder” or something like that. Our code will go inside these html tags.
Note: You will begin to notice that most tags/keywords in html are enclosed in arrow tags i.e . For most tags, you have to close the html tags with a “/” that precedes the keyword i.e . So if there was a tag called
<div>
you have to close it with
</div>
after the code you put.
The head section is put inside the html tags. The head section contains a few tags that does numerous things. For now, we will only worry about two things, and that is Meta and the Title of the site. But first off, you need to declare the Head Structure like this:
<head> </head>
Meta
The meta is a series of information that search engines may use to describe your site, or label your site under. Here’s an example of a basic setup for Meta Tags in the Head Section.
<meta name="description" content="Description Goes Here" /> <meta name="keywords" content="Keywords, separated, by, commas" />
As you can see, your description about your site goes there, and also keywords about your site. Might I add that recently meta information isn’t the best thing to go by in terms of searching on search engines. I will explain more about search engines in another article.
Title
The title tag is coded like this:
<title>Enter your title</title>
Simple enough? Just enter your title within the title tags and you will see that Title across the browser bars/tabs. I’ll also add that there is no exact order for putting code in the head section. I prefer to keep it clean, and put the meta stuff first and title second. It’s up to you. Once you’re done, make sure the head tag is closed, and you’re finished with the Head section.
You might have been curious and tried to check out all of your code to see what it did to your site. Unfortunately, other than the title, you’ll just get a blank page. The reason why is because the Doctype, the html, and the head are just preparation for your website. They are the foundation of your house to give an analogy. Once you have them done, then you are ready to build the actual site.
To begin, you must enclosed all of your content within a body tag like this:
<body> </body>
Once that’s done, then anything you type inside the body tags will show on your site.
That’s it in terms of what makes an HTML site. You have your Doctype, HTML, Head, and Body. And there you have it, your first site. Of course not as grand as what we see today, but it’s a start. At the bottom of this post, I included the source files of what we did just in case you want to see if you did something wrong. In addition, there’s also more resources for you guys just in case you’re too antsy to wait for my next post. I will try to get these tutorials made as fast as possible.
W3C Schools – All about Web Programming and Description of Tags
HTML Doctypes – List of Doctypes
Meta Element for HTML
If you want to contribute a tutorial, resource, or some inspirational links, just send them through, and we'll get them featured!
[...] more here: How to Create a Simple Website | Creative-Le Designs tags: companies-offer, even-promote, sold-at-flippa, squeeze, the-first, these-companies, [...]
[...] more from the original source: How to Create a Simple Website Share and [...]
[...] This post was mentioned on Twitter by Dan Le, Philip Brunner. Philip Brunner said: How to Create a Simple Website | Creative-Le Designs: http://bit.ly/d8XthQ [...]
[...] get an absolute link from another site, or just put the image in the images folder we made in the last tutorial and use the right relative [...]
[...] Thanks again to everyone following me on twitter, and subscribing to my feeds. In terms of what you can expect is a nice documentation on making a WordPress theme which will also be converted into a PDF for people to download, and also continuing my HTML/CSS tutorials for the beginners. [...]
[...] Beginning HTML – HTML Doctypes, Head, Body 2. HTML Images and Hyperlinks – IMG, A 3. Basic HTML Structure, Tags, Classes, and IDs [...]
[...] Beginning HTML – HTML Doctypes, Head, Body 2. HTML Images and Hyperlinks – IMG, A 3. Basic HTML Structure, Tags, Classes, and IDs [...]
[...] Beginning HTML – HTML Doctypes, Head, Body 2. HTML Images and Hyperlinks – IMG, A 3. Basic HTML Structure, Tags, Classes, and IDs [...]