The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Oct
9
PBS 1 of X – Introduction
Filed Under Computers & Tech, Software Development on October 9, 2015 | 17 Comments
Computer programming is a very powerful skill – it literally lets you tell computers exactly what to do. Contrary to what you may believe, learning to program is not about learning any specific programming language, but about learning the principles shared by all languages. Once you grasp the fundamental principles, you can move from language to language with relative ease. In my two decades of programming I have programmed in X86 Assembler, BASIC, C, C++, Java, JavaScript, Perl, PHP, BASH, Lisp, Maple, Matlab, and more. While doing so I’ve also made use of other computer languages that are not quite programming languages, but still involved telling a computer what you mean like SQL, HTML, CSS, XML & JSON. The point I really want to drive home is that you are not a Java programmer, or a PHP programmer, or a Perl programmer – you are a programmer! The tool you happen to use most today is unlikely to be the one you use most a decade from now. 15 years ago I did 90% of my programming in Java, 10 years ago, PHP, today, Perl, next year, who knows!
In case you hadn’t guessed yet, I’m not going to pick a single computer language for this series of tutorials. I’m very deliberately going to make use of a pallet of languages, and I’m going to focus on the underlying principles, rather than the specific peculiarities of any given language.
In order to help bring everyone along, I’m also not going to go from zero to real programming in one go. The plan is to sneak up on programming in small steps – hence the title of the series. We will be using computer languages from the start, but initially, they won’t be programming languages. Also, in order to be as inclusive as possible, I’m going to avoid vendor-specific languages – that means no Apple Script, no VB Script, no Objective C, and no C# (pronounced ‘see-sharp’ BTW). Instead, I’m going to use the most universal platform of all – the world wide web. We’re going to sneak up on programming by learning to create web pages.
Oct
23
PBS 2 of X – Introducing HTML
Filed Under Computers & Tech, Software Development on October 23, 2015 | 4 Comments
The first baby-step we’ll take towards real programming is the Hyper-Text Markup Language, better known to us all as HTML. HTML is not a true programming language, it is instead a simpler beast known as a markup language – it adds context to text. HTML allows us to mark certain parts of a document as headings, other parts as paragraphs, and yet other parts as being emphasised etc.. Like with programming, we are conveying meaning to the computer, but the range of possible things we can ‘say’ is much smaller and simpler.
Modern best practices for web development are the result of decades of evolution. We’re going to ignore all the techniques that time and experience have shown to be mistake, and jump straight to the end of the story – modern best practice. There have also been many versions of HTML over the years, and again, we’re going to jump straight to the end of the story, and use the latest incarnation of the Hyper-Text Markup Language, HTML5.
Before we dive into the specifics, I want to take a moment to explain the larger context in which we’ll be using HTML. When HTML was originally developed, it was designed to describe both what different elements of a web page were, and, what they should look like. Experience has taught us that this is a terrible idea, so we no longer use HTML in this dual role. Instead, HTML is now just half of a duo of languages used to create a web page – the other partner being Cascading Style Sheets, or CSS. We use HTML to describe what each part of the page is, and CSS to describe how each marked up element on the page should be styled.
We’ll be moving on to CSS once we finish describing HTML. Until we get CSS, the web pages we create will look exceptional plain and frankly boring, but don’t worry, we’ll move on to CSS soon enough, and then you can really let your creative juices fly!
Nov
5
PBS 3 of X – HTML Block Elements
Filed Under Computers & Tech, Software Development on November 5, 2015 | 6 Comments
In the previous instalment we introduced HTML, learned about HTML tags in the abstract, and looked at a basic template for all HTML pages. Over the next few instalments we’ll be working our way through the common HTML tags.
There are two major types of HTML tags, block-level tags, and inline tags, though it should be noted that there is a much less common third type which is a hybrid of the two, referred to as inline-block. For now, we’ll be ignoring these odd-balls.
Block level tags define regions of content – things like titles, paragraphs, lists, list items, and so on. Inline tags affect parts of a block – for example, a few words within a paragraph can be marked for emphasis. With practice the distinction will be comes obvious, especially when we get to the more advanced aspects of CSS, but the different in type can be confusing. A handy way of remembering the difference is that opening a new block-level tag will always start a new line on your page.
In this instalment we’ll start with some of the most common block-level tags.
Nov
20
PBS 4 of X – HTML In-line Elements
Filed Under Computers & Tech, Software Development on November 20, 2015 | 1 Comment
In the previous instalment we introduced the concept of block-level tags, and inline tags. Block level tags define blocks of text like headers, paragraphs and lists, and starting a new block-level tag generally starts a new line in the page. Inline tags on the other hand effect a part of a block, and opening an inline tag generally doesn’t start a new line. In the previous instalment we looked at some of the most important block-level tags, in this instalment we’ll look at some of the most common inline tags.
Dec
27
PBS 5 of X – Images & Links
Filed Under Computers & Tech, Software Development on December 27, 2015 | 4 Comments
Up until now we’ve only encountered very simplistic HTML tags, and we have ignored the fact that many HTML tags can specify attributes. In this instalment we’ll look at two tags that require attributes – those for inserting images into pages, and those for inserting links into pages. Before we can look at the two tags in question, we need to lay two pieces of ground-work – we need to discuss attributes in HTML tags, and we need to discuss URLs, and particularly the difference between relative and absolute URLs.
Jan
8
PBS 6 of X – Introducing CSS
Filed Under Computers & Tech, Software Development on January 8, 2016 | 5 Comments
We have now learned enough HTML to encode basic page content, marking things as headings, paragraphs, lists, etc.. We have completely ignored the look of our pages so far – relying on our browsers’ default styles. The default styles, it’s fair to say, are pretty darn ugly, which is why almost every page on the web has at least some basic styling applied to override these defaults.
In the bad old days, HTML pages were styled by adding attributes directly into the HTML tags. This was very time-consuming, and it greatly reduced the re-usability of the HTML markup. Those attributes still exist in the HTML spec, but we have completely ignored them, and will continue to do so for the entire series. This is not the bad old days, so we now have access to a much better solution – Cascading Style Sheets, or CSS.
Jan
21
PBS 7 of X – More CSS
Filed Under Computers & Tech, Software Development on January 21, 2016 | 4 Comments
In this instalment we’ll build on our basic understanding of CSS from previous instalment. We’ll start with some new CSS selectors, in the process, introduce two new HTML tag attributes, then we’ll move on to the CSS box model. Each HTML tag is represented in the page as a box, and all those boxes can be manipulated with CSS.
Feb
3
PBS 8 of X – CSS Positioning
Filed Under Computers & Tech, Software Development on February 3, 2016 | 4 Comments
In the previous instalment we learned about the CSS box model. Each HTML tag is represented as a box within the browser, and those boxes stack down the page, and inside each other to build up the web pages we see. We also learned how to use FireFox’s developer tools to actually see and inspect the boxes. In this instalment we’ll learn how to take one or more boxes out of the normal flow of the page, and position them elsewhere on the page.
Feb
19
PBS 9 of X – More CSS Positioning
Filed Under Computers & Tech, Software Development on February 19, 2016 | 3 Comments
In the previous instalment we learned how to group multiple HTML tags together to define regions within a page, and then how to move those regions around by floating them, or positioning them explicitly. We’ll start this instalment with a little revision – there was a lot to digest last time! While re-visiting the layout from last time, we’ll also look at some of its limitations, and then we’ll move on to look at the CSS display property, how it can be used to alter layouts, and, how we can use it to improve on our demo layout.
Mar
4
PBS 10 of X – Yet More CSS
Filed Under Computers & Tech, Software Development on March 4, 2016 | 4 Comments
Continuing our look at CSS, in this instalment we’ll start by looking at how to style lists, then we’ll move on to look at some more CSS selectors, and we’ll finish with an introduction to a new CSS concept – pseudo-classes.