Introduction to the Servage Web Development Course

Hello and welcome to the Servage Web Development Course. Over the next weeks we will take you through a series of tutorials that will show you how to develop your own web site and application from scratch. The course if designed for anyone that has no or little prior knowledge about website development. After this course you will have a good overview over the main technologies used – namely HTML, CSS, PHP and MySQL. The course itself will take you through these areas by building a little Blog-application step by step, that will feature creation, modification, display and design of content.

So, if you are not yet an expert on creating webpages, please continue reading :-)

The beginning

Every website you access via your browser, like Firefox or Internet Explorer, is being displayed to you as a “page” with text, colors, images, animations and even movies. Behind the scenes, the browser receives the data from a server in so called HTML format. Basically that means that the “language” and “syntax” used is called HTML (Hyper Text Markup Language). Like humans can write in different languages, using different sets of grammar and spelling, the computer world has a wide range of languages, where HTML is the name of the language used for websites. So, no matter what content you see, a HTML page will be the document that is sent to your browser. From there further media, like images or video, can be included.

Creating your first html document

Note: To get as much out of this course as possible, I recommend you do the same things as described during the articles.

Create a folder on your computer called “Servage Course”.
Create a file in that folder called “part1.html”.
Open that file with your editor (If you don’t have a specific one, you can use NotePad on Windows or TextEdit on Mac. You can also read here for further ideas for development software).
Write “Hello World” (Please note that throughout this course you never have to write the ” signs that enclose some example text or code).
Now open the part1.html file in your browser. You should see the text “Hello World”, and have now successfully created your first HTML document. A mini-website so to speak :-)

Unfortunately it is not enough to just throw content into a document and hope the browser will display it correctly. Like a Word document, you need to organize your content, and ply styles etc. to the different parts of your document, so the browser knows how to display it to the viewer. In HTML everything is build with so called tags, which are the core of the HTML language.

Open the part1.html in your editor, and replace the content with the following basic HTML document structure:

<html>
  <head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="part1.css" />
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

The text enclosed by < and > are the tags. They instruct the browser to understand the document correctly, but let’s go through these ones step by step.

The <html> tag is the beginning of the document. Please note how we close all tags with a “/”. So for example and the end of the document there is a </html> tag, marking the end of the HTML document.
The <head> tag is one of the core parts of a HTML document. It contains a lot of information about the page content, but not the content itself. In this case it contains the page title and the stylesheet to load (more about CSS below). You notice how a tag can have attributes like <tagname attribute1=value attribute2=other_value>
The <body> tag is the part of the document that contains the actual content. In this case we have simply used a regular paragraph <p> with the text “Hello World”.

Don’t worry if you don’t completely grasp the concept of tags and attributes yet. It will become clear to your during the course :-)

Formatting the content of your page

Mainly, formatting is all about making your content look good by applying fonts, colors and other design. This is done with a technology called CSS (Cascaded Style Sheet), which is a language that “describes” the desired layout of your content The correct way of doing this is by separating the actual content from the design. This is especially important when projects grow bigger and have to be optimized for different target platforms and may even be maintained by different people for design and content. For now, you should simply remember this rule of thumb: Never mix up content (HTML) with design (CSS)!

Create a file called “part1.css” in your “Servage Course” folder.
Add the following content to the part1.css file:

p {
  font-weight: bold;
}

We included the CSS file in our part1.html document with the <link> tag, so this makes the “Hello World” in the <p> element appear in bold. There are many other design settings you can control via the CSS file, but we will go through them in a later part of the course.

This concludes the first part of the Servage Web Development Course. I hope you gained a little insight to how the basics of web documents function. You probably noticed that your website is still located on your local computer and not accessible via the Internet. We will get your website online on your Servage hosting account as soon as we have learned a little more about HTML and CSS and created a little more content on it :-) When we have reached a certain level with HTML and CSS, we will continue with web programming and more :-) So stay tuned! This is going to be a lot of fun!

The complete course is expected to be about 5 parts during the next 6 weeks

Servage Magazine