Our first Web Development session started when she had written her very first HTML page on her own using TextEdit and viewing the page in Safari. We agreed to have a little 15 minute session to have a look what she had made. I was really impressed by her enthusiam and motivation and we had a really good time for the next 1 hour or so.
We started by discussing the structure of HTML documents:
- <head> part for meta stuff like <title> element that determines the title of the browser tab
- <body> part for all the rest
No-one should be forced to use TextEdit, Notepad or the like for editing HTML code so before we started working on the code we installed VisualStudio Code, which is a free editor that a large part of professional developers use nowadays. It's a no-brainer, use it. Then we enabled "Format on save" from settings so that the HTML page will always be nicely indented so you can concentrate on the content.
Then we experimented with basic HTML tags like <h1>, <h2>, <ul>, <li> to get started. But quicly she wanted to have, you know, colors, fonts and other cool stuff so we discussed basic styling. I introduced two ways:
- Use a <style> element (it's important to understand the concept of elements and that they can be nested tree-like) and include CSS style declarations within. In this option you'll use a selector like body to select where to apply style and then one or more style declarations within braces { }.
- Use a style attibute directly in an element. This is not preferable because you'll end up with a cluttered document instead of a nice separation of style and content.
She started working on a page describing her pets (two chickens and a lizard!).
We had such a good time that we also got to cover the topic of "how can I get my page on the Internet for reals". And for that you'll need to
- Have your HTML placed on a server
- The server needs to have a public IP. This is where we took a lengthy detour into networking. In home networks there's a router that has one public IP, while the local computers and devices only have a local IP and the router is doing NAT (network address translation) to allow the devices to connect to the Internet. But the problem here is that your laptop computer doesn't have a public IP and thus isn't reachable from Internet.
- You should also have a domain name, such as blogspot.com, which then resolves into an IP address when your computer asks for the IP address from a DNS server.
Then we discussed the URL, which is on your browser's Address Bar. An "Internet URL" will look consist of
- Protocol, such as https:// (tells the browser how to talk with the server)
- Hostname, such as blogspot.com (resolved into IP address on DNS)
- A path such as /images/cat.jpg or just / for the "home page" (tells the server which file should be served)
A local File URL on the other hand will look something like file:///Users/mila/Desktop/milannettisivu.html. I asked her where will the browser look for the page given that File URL. She got it right then: from your own computer.
But the best part of the session was when she told me that I'm a really good teacher. Made me so proud!
