This article will cover the basics of website creation because it is a huge concept which largely can be broken into two parts depending on your objectives
- The technical aspects of website building this includes coding html, css, hosting, dns, wordpress.
- The business aspects such as getting traffic (viewers) and converting that traffic into sales or enquires or getting an opt in to you list (Marketing Stuff).
This article is a subset of item 1 the technical aspects and covers the very basic minimum of a HTML web page.
A website is just at it’s most basic a text document which contains markup which a web browser (Internet Explorer, Safari, Firefox, Chrome etc) renders into a readable document.
To view the underlying structure of a web page that you visited, regardless of the browser you are using you usually need to do something like…
- Activate Developer Tools (or something like this), this could be a menu item or you may have to download a browser plug-in. Search around the "preferences" section of you browser menu and it should become clear.
- Then if you search through the menu you should see something like "View Source". For example on Internet Explorer on Windows 7 it is under "More Tools".
For most websites the code can look quite scary… however it need not be so!
There are only a few elements required to make a valid web page and on the basis of the 80/20 principle we will go through them here now.
A web page will contain the following at a minimum
- A web page (html) page consists of a number of tags, tags look like this
<html> <head> <body> <img> <script> <title> <p>
all of the previous tag’s are known as opening tags
- Tags consist of both an opening tag and a closing tag, i.e for each opening tag there must be a closing tag, so for example the tag <html> has a corresponding closing tag which takes the form </html>.
- All closing tags as you may guess are defined by the / symbol, so <head> is closed with </head>, <body> is closed with </body>
- Tags can have attributes (a little bit of an advanced topic not required for your first website) such as <p class="myClass" id="myID"> these "attributes" allow you to add extra functionality to your site, such as styling and interactivity via javascript.
- Text, that is the message you wish to convey.
- Basic pages have the file extension htm or html, more advanced interactive pages have extensions such as php, asp, aspx, jsp.
Sample web page follows
Notice how the various tags are nested within each other, and everything is nested within the opening and closing "html" tags.
The "title" tag is nested within the "head" tag which is in turn nested within the "html" tags.
Tags that absolutely must appear in a valid (meaning it will work in a browser as opposed to meeting all standards) html document are <html> <head> <title> and <body>.
01 <html> 02 <head> 03 <title>This is the web page title, and will appear on your browser as title</title> 04 </head> 05 <body> 06 Your main content goes here 07 <p>This is a paragraph</p> 08 <p>This is another paragraph</p> 09 <p>This is a link to the <a href="http://www.apple.com">apple website</a></p> 10 </body> 11 </html>
The above code (minus the line numbers) can be pasted into a text document such as notepad on a PC or TextEdit on a Mac
Save it with a name such as myFirstWebPage.html.
Then go to to your web browser and choose File Open and navigate to the folder where you just stored this document.
Select the HTML document that you just saved and open it.
The web page should then load, go over to Notepad or TextEdit and change some text (not a tag!), Save the file again and reload it in your web browser to view your amended web page.
Obviously this web page is just resident on your computer and not a web server, but that is all that is needed to understand HTML basics.
This is the core basic scaffolding of a HTML document which forms the basis of a web page and will work in any browser.
Consider this the "Hello World" of Web Page Development, not very useful on it’s own but an essential building block to get started.
Even knowing this much may help you to make tweaks to simple web pages.
Wham bam thank you, ma’am, my qusiteons are answered!