Crash Course in Web Development
Web page design and creation is fun and addictive. whether you are want your own website and are curious or inquisitive on how to do it, or just to cheap to pay someone else to do it for you, you can learn how to do so very easily. Though you can spend money on any number of programs, from Internet Document Editors (IDE's) to WYSIWYG (what you see is what you get) editors to help you in your web development process, you need nothing more than what comes with your Mac or PC to build your own complete website. Even if you use IDE's and WYSIWYG editors, a thorough understanding of HTML and CSS is essential to using those tools successfully.
To follow along with this tutorial, all you need to use is Notepad if you are on Windows, or TextEdit if you are on a Mac. Create a folder on your desktop or user folder where it will be easy to find and name it "mysite" or something that will be easy for you to remember. This will be your project folder.
The HTML files we will create will have an extension of ".html" and the CSS files of ".css". You need to be sure to save your documents as a plain text type. To do this on a Mac in TextEdit you will need to select from the menu bar, Format -> Make Plain Text before you save. In Notepad on Windows when saving, from the save as file type drop down menu, select "All Types". Be sure to add the appropriate extension to the files you create. Don't worry I will tell you how and when to do it.
How webpages work
When you visit a website, the websites address, also known as a domain name or URL (uniform resource locator) is registered to direct requests for that URL's files to the appropriate web-server. That web server will look for the requested file in that domains folder, and if found, read the content in that file and return that content as a response to the web browser, which will interpret the HTML and CSS and display the web page according to the rules defined in those files.
By default if no specific file is requested after the domain name then the server will look for a file named "index.html". So for example if you visit the site "www.example.com", the web server that handles that domains files will look for a file named "index.html" in that domains public folder (also known as a directory). The exact same file could be obtained by visiting "www.example.com/index.html" (in most circumstances).
HTML and CSS
Throughout this tutorial we will be creating a simple website using HTML (hypertext markup language) and CSS (cascading style sheets). HTML, or more accurately XHTML, is a markup language used for creating internet documents meant to be displayed on web browsers. It is a markup language because it uses special sequences of characters called "tags" that described how to process the content they surround. HTML is concerned more with the structure of a site and the actual content to be displayed, than how that content looks when it is displayed.
CSS is a language used to tell web browsers how the content within those tags should "look", and to apply rules to the HTML tags different than their default display rules. All this will become clear to you as we work through this tutorial. But think of it this way, HTML is a bunch of containers you put your websites content in. CSS is how you place those containers and decorate them. You can use CSS from within the HTML document, but it is best practice to keep it in a separate file and link to it from your HTML file.
Alright, I'm done being confusing for now. Welcome to your crash course in website development! Lets get started building your first web site!