HTML Introductory Tutorial
July 3, 2009
Hello everyone, thank you for visiting my blog. As this is not only my first series of tutorials but actually my first tutorial i am going to try to be slow and steady.
What is HTML
I’ll start off by explaining what HTML actually is, HTML stands for Hyper Text Markup Language. Since HTML is a markup languages it uses mark up tags to describe web pages but we’ll just call them HTML tags or just plain tags.
Getting Started
There are a lot of HTML/CSS text editors out there such as Coffee Cup or even the famous Dreamweaver, but I think its best to learn off a simple text editor such as
Notepad or Text Editor for the mac simply because since a lot of these HTML/CSS editors end up actually doing the work for you without you actually having to learn
the language. Now I know what you’re thinking “What’s wrong with that?” well let’s say you need to rebuild or save a web page from horrible coding it may be easy to
have something generate code for you but it will not be able to fix it for you.
Creating XHTML/HTML Documents
First open up your preferred text editor click on file -> save as -> filename.htm or filename.html, the difference between the two extensions date back to Windows 3.x,
which only recognized 3 letter extensions, and the Mac which recognized the four letter extension. Today’s platforms recognize both.
Document Tags and Elements
Document tags identify each section of an HTML document. Both <html> and </html> tags are required for a document to be valid.
- <html> and </html> The HTML tags define both the beginning and the ending of an HTML/XHTML document. All other tags including both Document tags andElements go between these two tags.
- <head></head> The head section of a page is where you place information that is not generally displayed on the page, but is still important to the page. For instanceif you have embedded style attributes that you want to effect the page, they will need to be placed between the <head></head> tags.
- <title></title> The title, which is included in the head of the document, does not actually render on to the page, but controls the text that displays in the Title bar of thebrowser window.
- <body></body> All the content including images, tables, information, links, and more must be located in between the body tags.
Basic HTML Code
Below would be a basic HTML document including a simple line break and paragraph.
| <html>
<head> <title>My First Web page </title> </head> <body> This is my very first line break <br /> The text breaks one line then continues, if you were to add a second one on the same line it would break another line.<br /><br /> Like This <p>This is my first paragraph did you see how it made its own line space?</p> </body> </html> |
To follow along on your text editor, just copy this code and click on file -> save using either extension .html or .htm and then double click the file to open it on your preferred browser.
Below is what you should see in your browser after testing your code.
This is my very first line break
The text breaks one line then continues, if you were to add a second one on the same line it would break another line.
Like This
This is my first paragraph did you see how it made its own line space?
Conclusion
Now that was easy wasn’t it? This was just an easy introductory tutorial, stay tuned to follow the next tutorial which will include lists, images, and hyperlinks.
Feel free to leave comments and feedback to help guide me in structuring these tutorials.
[...] Continue reading here: HTML Introductory Tutorial [...]