We kicked off our 2018/2019 session this week and it was good to see some new faces and also many familiar ones. Welcome all!
Our plan for the year is similar to last year’s, though we plan to do different projects, week-to-week. This week though we started with the basics.
Getting The Right Tools
We got pretty-much everyone set up with Google Chrome as our standard web browser and Visual Studio Code as our standard text editor.
Google Chrome is a great browser for programers as it contains useful tools to help you debug your code. https://www.google.com/chrome/
Visual Studio Code is a great text editor. It helps you with writing many languages, including the two we’ll be using, HTML and JavaScript. It also works well to help you manage your files and folders. Finally, we will see later in the year how it integrates with source control software. https://code.visualstudio.com/download
Files and Folders
We talked about how computers store information and what’s inside a hard disk.
The computer organises files with folders (also known as directories) and sub-folders (subdirectories). No two files in the same folder can have exactly the same name.
We looked at how to find your way, using File Explorer on Windows and Finder on Mac, to your account’s home directory and how to find your desktop folder. We all created folders to store our files for this year.
Web Pages
We talked about how there are three main languages used for most modern web pages:
- HTML: This is the content of the page. HTML stands for HyperText Markup Language. Hypertext means enhanced text with links that can bring you to new pages. A markup language is one that adds tags around the text-based content. A program (web browser in this case) can interpret these tags to know how to treat the content.
- CSS: This is the style of the page. CSS stands for Cascading Style Sheets. Colors, sizes, fonts, etc. are normally specific in CSS. The great benefit is that you can have one set of CSS files for your entire website and can quickly update the appearance of all pages in one go. Having said all that, we won’t be looking at them and we’ll be doing more old-fashioned formatting directly in the HTML files themselves.
- JavaScript: This is the logic of the page. Scripts bring webpages to life and allow them to react when you interact with them. This is the language we will spend the vast majority of our time looking at this year.
Writing HTML
Tags in HTML generally come in pairs. We have a start tag such as <html> and and its corresponding end tag </html>. End tags are identical to their matching start tag except there is a forward slash before the name.
Some tags don’t need to enclose content. We saw <img> which didn’t need a </img> as it wasn’t around anything else. It was enough in itself.
Some tags had attributes. This was additional information inside the tag itself. For <img>, for example we specificified the src=”” attribute to provide the location of the image file. We also specified the width=”” and height=”” attributes. It looked something like this:
<img src="picture.jpg" width="400" height="300" >
Some of the tags we saw were:
- <html> – The tag which wraps the entire content of the HTML file.
- <head> – A section at the top of the file containing document information. In our case it just contained the page title.
- <title> – The page title. Belongs in the <head> section.
- <body> – The main content of the page. We saw how the bgcolor=”” attribute can be used to set the colour and talked about RGB colour and HTML colour names.
- <p> – A paragraph.
- <h1>,<h2>,<h3>,<h4>,<h5> – Heading levels. Large text in different levels.
- <b>, <i>, <u> – Bold, italics and underscore respectively.
- <img> – An image. We saw the scr=””, height=”” and width=”” attributes.
- <a>: A link to another page. We saw the href=”” attribute to specify the destination.
Download
The files for this week can be found on GitHub.
Useful Resources
A really handy reference location for both JavaScript and HTML is:
Specifically, one page which is particularly convenient is the table of HTML colour names:
CoderDojo Athenry 