How To Build A Website From Scratch

HTML PROGRAMMING - THE BASICS

In this category I am going to teach you the basics of HTML (Hyper Text Markup Langauge) and CSS (Cascading Style Sheets) whereby you will be able to create a template/layout for a web page and therefore create a whole website (a series of web pages). You will be taught how to Make paragraphs, Change font attributes, Adjust margins, Create links, Incorporate audio/video, images and flash movies, php scripting and so on. This means you will not be taught every single instruction of HTML or CSS (hurray!) but just enough for you to create web pages and a bit more. With many, if not all, programming langauges (such as HTML and CSS) you will never ever use all of its instructions anyway simply because certain instructions are meant for certain procedures (functions) that you will never want to carry out (execute/run).

HTML and CSS are known as Scripting Langauges, which means they are not "Proper" programming langauges whereby you need to calculate equations or carry out logical tests such as IF A = B THEN.... You just enter your HTML and/or CSS instructions and behind the scenes your web browser interprets each instruction and executes (runs) the procedure associated with it. For example. When a web browser interprets a FONT instruction such as Hello it knows it has to display the text within that FONT instruction with red ink, like so: Hello. Therefore. With HTML you only need to know what an instruction does and how to position it within your html script file (web page), as opposed to knowing what goes on behind the scenes technically (the real programming nuts and bolts).

THE STRUCTURE OF AN INSTRUCTION

Before I begin with a real example I must break up the structure (format) of an instruction for you. INSTRUCTION is a generic (old school) term used to describe a whole line of code, such as the FONT instruction above, now commonly called an Element (no longer Instruction). Or put another way. That FONT Element, Hello, is made up as follows:

font is an opening HTML Tag (code) that is followed by an Attribute (setting) called color. With each attribute there must always be a Value associated with it. In this example that value is red. Following that is some Text (hello), followed by the closing HTML Tag /font. A closing html tag always has a forward slash (/) before its tag name. Wrapping each HTML Tags together, with any possible Attributes and Values, are the Less Than < and More Than > brackets. Therefore, the whole thing is known as an Element, or Instruction if you prefer.

Most elements have a closing html tag (i.e. /font) in order to tell a web browser to switch off that component (revert things back to the way they were). For example. If a web page defaults to displaying text with black ink and the next element a web browser executes (runs) is a font element, the text that follows (follows the opening font html tag) will be red. However. As soon as the web browser has displayed that red text the /font html tag tells the web browser to switch back to the previous/default text colour (black in this case). Here is an example:

I am black text

I am red text - Done with the FONT Element: I am red text

I am black text again

Not all HTML Tags have an Attribute and Value pairing. The BOLD element, for example, is made up as follows:

I am black bold text

So it is using the opening HTML Tag called BOLD (abbreviated as b), followed by some Text, followed by the closing HTML Tag /BOLD (abbreviated as /b). In this case a web browser interprets the b html tag as "Switch on BOLD Text". It then displays any text that follows the b html tag as bold text, until it bumps into the closing /b html tag which it interprets as "Switch off BOLD Text". Any text after the /b html tag will be displayed as it was before. So if it was normal before (not bold) it will display as normal text. Here is an example:

I am normal text

I am bold text - Done with the BOLD html tags: I am bold text

I am normal text again

On the other hand, a html tag can have more than one Attribute and Value pairing. The FONT html tag, for example, can use the FACE, SIZE and COLOR Attributes with their respective Values like so:

I am red text using the font called Times New Roman with a size of 3

Example: I am red text using the font called Times New Roman with a size of 3

Each attribute and value pairing can also be used separately as the following examples show:

I have changed the current font to Times New Roman, and I am using its current font size and font color

Example: I have changed the current font to Times New Roman, and I am using its current font size and font color

I am using the current font, with its current font size, but have changed its font colour to Green

Example: I am using the current font, with its current font size, but have changed its font colour to Green

I am using the current font, with its current colour, but have changed its font size to size 5

Example: I am using the current font, with its current colour, but have changed its font size to size 5

As you can see. By using only one attribute and value pairing you can individually set certain aspects of a font's appearance without the need to declare all of its attributes and values, whereas using a combination of pairings allows you more opportunity to set up a completely different font with a completely different look. Especially when used with the BOLD ( ) and ITALIC ( ) html tags. And that is exactly why HTML Tags, Attributes and Values, and so on have been structured in this way, to give you flexibility with your programming (scripting).

Another to be aware of is that each set of HTML Tags (opening and closing tags) must be within the same level. Or nested. For example. This next example is illegal code:



Hello



A web browser will interpret the above, illegal, code as: Switch on the bold text effect, switch on the italic text effect, display the text "Hello", switch off the bold effect and then switch off the italic text effect. This is illegal because after displaying "Hello" the code should switch off the italic text effect first () and then switch off the bold text effect (). This is because nesting works by switching off the last switched on effect (or component) first. So the legal code should be as follows:



Hello



Fortunately, many web browsers can pick up on your mistakes and either correct them for you diplay-wise (i.e. display the text correctly without modifying your illegal code) or by refusing to display the text properly, if at all, until you manually correct the illegal code. With nesting there is a pattern. In this example, with the legal code, the italic html tags are correctly on the inside of the code and the bold html tags are correctly on the outside of the code; because I started with the bold html tag first. If I had started with the italic html tag first the reverse of what I just said would be true. The bold html tags would be on the inside of the code and the italic html tags would be on the outside of the code. You will often see code like this written as follows:

Hello

Depending on your programming style, and text editor, you may also see it written as follows:


 Hello


There are many ways to write html code but regardless of how it is written you must stick to the formatting rules, such as nesting, for your web pages to be displayed properly and more importantly for your code to be validated (executed/run) properly by the web browsers. Firefox has an Add-On called HTML Validator that automatically validates the HTML code within the web page you are viewing/testing, either online or offline, which I strongly recommended you install. Also. Look at the World Wide Web Consortium (W3C) website - They are the body that create/manage the standards for the World Wide Web (Internet). It was founded, and is currently directed, by Sir Tim Berners-Lee (Inventor of HTML and credited as the Inventor of The Internet). So, basically, W3C govern the specifications of html. The current version of HTML is 4.01 (version 4, revision 01).

BASIC HTML WEB PAGE STRUCTURE

To create a web page (html script/code file) all you need is a Text Editor, such as Notepad (built-in to Windows), simply because HTML code, CSS code and JavaScript code is written as Text. It is not like years ago whereby a programmer fiddles around with Machine Programming Code, Hex-Decimal numbers, Flags and Registers. Hence why today you say "Scripting Language". Anyway! Begin by double clicking on the Notepad icon from inside the START Menu >> ALL PROGRAMS >> Accessories folder and then type in the examples below, if you wish.

Whenever you create a web page (html script/code file) you should use a basic web page structure you are comfortable with, that you can quickly turn into another web page. To show you what I mean here is a basic (core), valid, web page that has enough html code inside it to form a web page. The html code can be used time and time again to create other web pages, even though it is only creating a one sentence web page in this example. The point here is that you have the foundation in place.

Fig 1.0 The bare minimum html code needed to create a web page

The first line of code is not strictly needed but should be included if you do not want complaints from a web browser, or online html code validator, about not following the W3C standards (i.e. Error: missing DOCTYPE declaration). A DOCTYPE declaration is not an instruction (element) but simply a statement that tells a web browser, or online html code validator, which HTML Standard to use when checking (validating) your html code. The DOCTYPE statement uses one of three HTML standards.

DOCTYPE Statements

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. HTML Strict - This html standard is a cut down version of HTML 4.01. It does not allow deprecated html code (code that does things the long way around), Frames (a web page split into window panes), a Targeted Link (a link that opens up another web page instead of displaying content in the current web page) and so on. HTML Strict is meant for those using more CSS code than HTML code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. HTML Loose - This html standard is transitional (flexible) because it includes the codes of HTML Strict but also includes codes denied by pure HTML Strict (i.e. deprecated html code) as well as other codes. Basically, this is the DOCTYPE you should declare if you want an easy life! and more importantly the flexibility to do virtually what you like with HTML. Years ago Frames were a nightmare for web browsers to display properly and print properly, but fortunately many of these problems have disappeared due to better html standards and better web browsers that have incorporated those html standards.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">. HTML Frameset - This html standard is a variant of HTML Transitional (Loose) for web pages that use Frames.

In normal scenarios you just declare the same DOCTYPE statement in each of your web pages, but there may be times when you need to declare a specific DOCTYPE in a specific web page in order for that web page's content to be displayed properly. Although this may only need doing 1% of the time, if at all, it is something worth remembering. For example. If you cannot get a Framed web page working it could just be that you need to declare the HTML Frameset DOCTYPE, instead of the HTML Transitional (Loose) DOCTYPE for example.

HTML Tags

The tags called HTML, opening <html> and closing </html>, are the first tags to be written in a html file. The opening HTML tag tells a web browser, or online html validator, that the text within this file is HTML code. And more precisely, your actual html code is in between these HTML tags. Always remember to put the closing /HTML tag at the bottom of the html file.

The opening HTML tag can include the LANG (Language) Attribute with a Value of "country-code", if you wish, which is ideal if your web page is full of Spanish text for example. Why? Because it would allow a web browser to display special, Spanish, characters properly and it would also allow a search engine to distinguish the web page as Spanish. This can be important to someone who is only searching for Spanish content web pages, using search filters, because the search engine would then look for web pages containing LANG="es" before looking for half spanish half french web pages for example. So if you wrote <html lang="es"> and then further down your html file wrote Parlez-vous Français? this would mean you want the whole web page to be recognised as Spanish but also want that specific paragraph to be recognised as French. And it is for this kind of thing that LANG should be used for. One disadvantage of only using LANG with the opening HTML tag is that you could be limiting your audience, search-wise. Why? Because even if they can read Spanish they might not be able to see your web page link in the search engine results because their search engine defaults to English langauge searches for example.

HEAD Tags

The tags called HEAD, opening <head> and closing </head>, define the area where you put the TITLE Tags, META Tags and links to JavaScript files and CSS files. The example below shows how this would be achieved.

Fig 1.1 The text between the HEAD tags is meant for your TITLE Tags, META Tags and links to JavaScript files and CSS files.

If you want to learn about META Tags read the META Tags section. It covers the TITLE Tags and META Tags in general. The LINK line tells a web browser that it must include (link to) a CSS file, by the name of global.css in this example. A CSS file is not really a script file as such, it is more of an Attributes & Values file because that is exactly what it contains - Attributes and Values. Anyway. Do not concentrate on LINK and CSS files now because you will learn more about them in later sections.

BODY Tags

The tags called BODY, opening <body> and closing </body>, define the area where you put your actual web page content html code. The html code that inserts Text, Images and Video for example. It goes in between these BODY tags. For example. In normal scenarios you might want to use plain text such as This is enough HTML Code to form a web page (Fig 1.0 above) but you may also want to use paragraphed text (Text inside the p and /p paragraph tags) perhaps with some attributes and values. You may also want red ink applied, using the FONT tags.

Fig 1.2 The text between the BODY tags is meant for your actual web page content html code

So to clarify. Once you have created yourself a bare-minimum html code template, as in Fig 1.0 above, you can then start inserting plain text and/or html code (Tags, Attributes and Values) in between the BODY tags. When you have done that simply save the text file as a HTML file (i.e. save it as index.htm). If you need to know more about Tags, Attributes and Values visit the W3Schools website.

In the above examples I was using the text editor called Notepad, but I usually use a FREE programming text editor called PSPad which is perfect for writing HTML, CSS, JavaScript, PHP, SQL and so on files. After a while, especially with large web pages, html code can become tricky to manage and identify with Notepad. In contrast, PSPad is a text editor that colour codes tags, attributes and values for example and can also highlight the code between tags. It can also spell check, format the casing of words and much more. I highly recommend it.

In the next section I will further the above example by explaining Tables and the Classic Web Page Layout - A Banner/Logo area at the top of the page, three columns going through the middle and a Footer/Copyright area at the bottom of the page.

Create A Sitemap XML File

Index

Build A Website Table