Web Development For Beginners

Monday, 18 February 2013

Learning HTML Tags

Having created the most basic of HTML pages last time, it's time to add a little more to it. Today, we are going to introduce the building blocks of any web page - the tag!

Last time, we covered the concept of code having a vocabulary. We even used a little vocabulary -

. When writing HTML, this vocabulary has a special name - anything that is include between angled brackets is called a tag. Tags essentially tell the browser how to display various pieces of text, images, video or other media. In a way, you can think of your browser like a TV screen - the HTML page is the signal and the browser is the TV that decodes that signal and displays it. The specifics of each HTML page or web page are shown based on the various tags dotted around the page.

More code, less analogy

Let's cement the idea with another example. Open up your index.htm page that you began creating last time and replace it completely as follows:

<h1>Welcome to my homepage</h1>
<p>I am a bit of text between two HTML tags</p>
<p>em>In here I am a bit of emphasised text</em>, but out here, I am not.</p>

If you save this file and then load it in your browser, you should be greeted with something similar to the following:

What can we learn from this:

As before, HTML pages are just text.
Tags affect how text is displayed on the screen - the <h1> tag makes text big and bold (as it should it stands for Heading 1), the <p> tag leaves some nice white-space around our text (as it should - it stands for Paragraph), the <em> tag italicised our text.
Tags come in pairs - or in other words tags surround a piece of text and they affect the piece of text that they surround.
The pairs of tags don't look identical - the first one of the pair just has angled brackets around it, the second one of the pair, however has angled brackets and a forward slash.
- we usually say tags have an opening tag and a closing tag.
- the closing tag is denoted by the forward slash inside the angled brackets just before the tag name (eg </h1>)
Tags can be nested inside each other - for example the <em> tag is inside a set of <p> tags.
You need to close tags in the order of last in first out - in the above piece of code, we open a paragraph tag, then open an emphasis tag, then we have some text, then we close the emphasis tag and only after that can we close the paragraph tag.

Go and play

That's really enough learning for today - however, there is some homework for you:

Write down, in your own words, what a tag is.
Examine the above piece of HTML and write down all the tags that were used.
Create a new page and using the tags you've identified, create a web page and try to make it look exactly like this (click on the image for a larger view>:

Thursday, 10 January 2013

Writing your first HTML page

Nothing is more frustrating than reading pages and pages and pages about programming before you actually get your hands dirty. So without further adeu, let's write our very first HTML page. I'm going to assume you are, at least, computer literate enough to create directories and files and open them in some sort of editor.

Step 1 - Create a directory for your code

Create a new directory for your code. Call it "development" if you fancy - it has a nice ring to it after all!

Step 2 - Open a text editor

Open your text editor. If you are using Windows, then open Notepad (you can do this rather quickly by holding down the Windows Key and 'r' and then, in the "Run" box that comes up type "notepad.exe" and hit Enter). If you are OSX, then open TextEdit.

Step 3 - Write the HTML

Type the following in to your text editor

<html>
This is my first HTML page
</html>

Step 4 - Save your work

Save the file into the directory you created in step 1. Call it "index.html".

Step 5 - Open it in the browser

Use Windows Explorer or Finder to navigate to the directory and then double-click on the "index.html" file you create. Your default browser should open and you should see something similar to this:

Summary

This might seem like a very simple first HTML page - and it is! However, even in the smallest snippet of code above, we've learned a lot:

Code is just text

The first thing we learned is that HTML code is just text, and that it can be written in the most basic of text editors. You don't need any special tools, though it has to be said, some text editors make creating HTML easier - we will explore these in the future.

Code has a syntax

All code has a syntax. To put it another way, code can be considered a language, a little bit like music in a way. There are specific ways of writing things that make a piece of text HTML rather than just a piece of text. When we are dealing with HTML, our syntax uses "tags". Tags are simple - in the above example <html> and </html> are the tags. Tags are enclosed in the "greater than" and "less than" signs and usually have some other text between them. Tags usually have an opening tag and a corresponding closing tag - somewhat akin to writing a sentence - you start with a capital letter and end with a full stop (or other punctuation). Notice how the second tag has a forward slash before the "html" part - this signifies that we are closing the tag or ending the sentence.

Code has a vocabulary

All code has a vocabulary - be it the simplest HTML page through to the most complex piece of C code. All code has a vocabulary - these are often called keywords or reserved words. The vocabulary of the code tells the computer what to do with your code. In the above example, we used only one keyword - "html" - this told the web browser to treat our code as an html page.

Extra credit

It might not seem like much at the moment, but you have taken the first step towards creating your own website from scratch. Now it's time to for you to experiment - code is about practice, so even at this stage it is important to practice what you know. Here are a few ideas to play with:

Change the text from "This is my first HTML page" to something else and see what happens (hint, you need to hit reload/refresh on your browser to see the changes
Change the tags (the parts that say "html" to something else and see if there is any effect.
Create a new file and try to type the above example from memory.
Rename index.html to something else. Does it have any effect? If so, what?
Change the file extension of index.html and see if that has any effect. If so, what? You might need to change your Windows Explorer options to "show file extension" to do this.

Monday, 17 December 2012

What does a web server have to do with a cinema?

Image from Wikipedia

Web development is an incredibly broad topic. It spans everything from creating simple home pages using HTML through to more complex "dynamic" pages that use computer programs to display content drawn from a database in response to a user's interaction. Creating simple web pages is a difficult enough hurdle for someone completely new to the field, but when you start introducing actual code into the equation, it gets exponentially more difficult. Some of the barriers you'll encounter include figuring out the difference between client and server side programming. Learning multiple programming languages. Understanding the role of the web server, the web host. Figuring out how to publish your web page. The difference between ftp and http. The list goes on.

Don't be put off though. It is very satisfying to get your own web page up and running and available on the world wide web. And like any great journey, it starts with a single step.

In order to get your website onto the world wide web for all to see, you will need to understand two basic concepts. The first is that you need to create a file (or files if you have lots of pages) that will be your website. The second is that you will need to have a Web server that will show your website when people try to view it.

You can consider this interaction somewhat like a movie. In the old days, movies would be shown on screen using a projector and a reel of film. The reel of film can be thought of as your website - this is the actual content that you want to display to the rest of the world. The projector can be considered as the Web server - this is the thing that lets other people see your website.

Now, most people didn't own large 35mm projectors with which to show private screenings of films in their own home based movie theatre. Instead cinemas would have all the equipment needed to show a film and people would come to the cinema to watch a movie (well they still do, but home cinemas are much more prevalent these days). In a similar way, most people do not have the software needed to actually show their website to the world. Instead most people use a Hosting provider to actually show their websites. The hosting provider has all the necessary software like a web server to make our website available on the internet for all and sundry to view.

Don't worry if this is a bit confusing at first. We will walk through the process one step at a time. After you have put together a few pages and got them hosted, you'll have a better understanding of all these moving parts.

Sunday, 16 December 2012

Welcome to web development for beginners

Welcome to my blog on web development for beginners. I will be covering topics about creating websites from the ground up - everything from HTML, CSS to create your average static site through to dynamic sites with programming thrown in using Javascript, PHP and even some Ruby and Python. I hope you find it useful and if you have any suggestions or questions, drop me a comment and I will try to cover whatever you are interested in.