Understanding the internet!
There was great excitement in CoderDojo Athenry as we got started in the creators group. This week we started off by chatting about the internet and talked about how it actually works – we learned:
- That “Servers” are programs that run on computers just like your own laptops – the only difference is these computers are never turned off!
- That the internet is really a bunch of files sitting on these “Servers” (computers that never turn off).
- When your phone or browser wants to look at a website, it first finds the address of that website that has the files from a special server called a “DNS” server (pretty much like a phone book – that lets us use memorable names for computers rather than a bunch of numbers.!)
- When your computer downloads the files, there are three main types of code files that the browser understands – these are:
- HTML which has the content of the webpage (which words to show and which words to emphasise, put in tables, etc )
- CSS which decides how the content should look (which font, etc)
- Javascript which is used for any pages with action – moving pictures, games, sound, animations, etc
- We learned that if you right click any webpage and choose “view source” you can see the html, css and javascript for that webpage – so it’s often easy to learn from pages you like!
- Because the internet was flaky, we built webpages on our own computers and opened them from there.
read on for more!
Building a webpage
We were going to use codepen, but ironically, there were so many ninjas and parents present that the internet broke down!! Instead we worked locally and created our first webpage using just HTML! We learned the following about html:
- HTML uses special codewords to lay out your page. HTML codewords are called “tags“
- All html special tags are contained in angle brackets – < >. For example <p> will start a new paragraph!
- The html codewords are like “Sandwiches” (Ignacio made this great observation). Every time you create a tag, you need to create a closing tag – the html code will apply to everything within the Sandwich. You close a html tag using a </tagname>. For example </p> will finish a paragraph.
We went on to build our first html page using the tags:
- <html> to start a html document – we just add this in to let the browser know we are using html!
- <head> to set the heading information for the html page – usually stuff that doesn’t show on the page goes here
- <title> to set the title of the page in the browser window
- <p> to create a new paragraph
- <img src=”mypic.jpg”> to include a picture in the webpage
We then spent the rest of the time building our own webpages. The sourcecode for our webpage is at the creators 2017 repository here. Next week we will show you how to download this code!
What do we need for next week?
It would be great if for next week, we could make sure everyone has the following installed:
- Visual Studio Code
- Google Chrome
If you have a Chromebook, that’s no problem you can use codepen and it’s just as good! However, this will make sure we can keep going, even when the internet is not working properly.
CoderDojo Athenry 