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.
Firefox 3.5 Quick Review
July 2, 2009
The browser wars continue with recent releases such as Google Chrome 2.0, Opera 10, Internet Explorer 8, but as usual the browser that stands out Mozilla Firefox, with its new 3.5 RC version. The version is a candidate and is not yet final.
Chrome seems to win the race here when it comes to browser speed, but remember this is just a candidate and we can hope to see more from the official release.
Some of the readers may be familiar with the tab tearing facility in the Google Chrome. The feature in a more exciting format is incorporated with the Firefox 3.5. You can grab a tab and drag it a little out to create a new window. The reverse will also work. The similar operations can be found by right clicking on the tabs if you don’t like grabbing and dragging tabs.
The private mode will be of great use where security matters. For example in situations like buying gifts, any sensitive search, a quick mail check from friend’s browser, bill pavement etc you may find this private mode as a real blessing. You can enable and disable that mode according to the nature of work.
Trace Monkey JavaScript Engine
The JavaScript engine TraceMonkey installed to Firefox 3.5 is 20 to 40 times faster than the SpiderMonkey engine installed in Firefox 3.
Conclusion
There’s no doubt Firefox remains the favorite open source browser. Even if Firefox 3.5 fails to deliver the speed it claimed, there’s a world of users who would stick to the open source browsers. However, given other features, it’s the speed of the browsers that appeals most. Now there’s a neck to neck race between the top browsers over speed. Well, you if view the top browsers in a race, it’s this way – Opera is speeding up, Firefox is just ahead but eventually Chrome finishes first. No doubt, Chrome is the fastest browser available right now. It’s high-time for Mozilla to stop bloating features to Firefox and focusing their energy on speed. Once they achieve that they would be free to work add their whims and fancies.
How to plan your first website
June 23, 2009
Even after learning many coding languages, the hardest part for many web developers seems to be the planning stage. Here is what I choose to follow just to make it just a little bit more simple before I begin a project.
Who
One problem that I see too often is that developers often tend to build websites based on what they like, based on the type of website you are making it is most likely going to be targeted do a certain group(s) of people. Do some research, fine out whats popular on whatever it may be you are doing for your website you want visitors that will often come back as well as refer new visitors to your website. Check out similar sites and see how they attract their audiences. Think as a visitor; What would you like change about the website? How can it improve?
Programming Languages
There are many different programming languages that you may want to use base on the purpose of your site. Let me give you a quick and simple run down on some of the most often used languages.
- HTML – HyperText Markup Language the authoring language used to create documents on the World Wide Web. HTML defines the structure and layout of a Web document by using a variety of tags and attributes.
- XHTML – Extensible Hypertext Markup Language
a hybrid between HTML and XML specifically designed for Net device displays. - CSS – Cascading Style Sheet used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page’s HTML.
- JavaScript – developed by Netscape to enable Web authors to design interactive sites. Although it shares many of the features and structures of the full Java language, it was developed independently. Javascript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content.
- PHP – Hypertext Preprocessor, an open source, server-side, HTML embedded scripting language used to create dynamic Web pages.
Where
Start thinking of what web host service you are going to choose. First off make sure it supports the languages you are using for your website. Try searching web host companies on your preferred browser and I would personally go for a company on the first page, now this is not to put down other companies because for all I know they may be running off the same servers, but the way I see it is more popular companies become and stay popular for a certain reason right?
Domain Name
I personally prefer .COM domain names simply off experience learned from a friend, both him and another individual had the same name and they both happened to be web developers now my friend would really try and market him self creating business cards, street ads, and more but they did not seem to do much of a difference for him at least. Both my friend and the other free lance web designer had the same domain name with an exception that my friend was a .NET and he was a .COM our theory is that someone not familiar with your website mite not have a good chance of remembering your full domain name so they may take a guess but one thing they usually remember from the website is the .COM. He recently changed his domain name and seems to be doing a lot better. All in all this may not make a huge difference but it does not hurt to consider it!
Things to Remember
A site should be useful.
A site should have a purpose.
A site should operate quickly, pages should download fast.
A site should be structured to allow visitors to navigate with ease.
Graphics should be kept to a minimum to allow fast loading of your web pages.
Use standard headers and footers for each of your web pages..
Use the same background color throughout your site. (White is most common color)
Use the same color for your text throughout your site. . (Black is most common color).
Use a common font size and color for specialized text segments.
Establish site wide consistency rules.
Keep it simple.
Well I hope i did my part in helping some of you out there seeking ideas on starting a website, just remember you can do it with time, patience, and of course researching the web.
//
