Thursday, October 24, 2013

Lesson 31 - HTML

Today we had a lesson again just before bedtime.

I suggested we do some music stuff with Turtle Roy but she was like "naa, I wanna do vim stuff and go command-line again, it's been a while". So there we went.

We started working on a little scrapbook HTML page. So we fired up vim again.

    vim kuvat.html

She did well. She remembered how to enter insert mode and all. The first thing we added was this:

    <img src="">

What a bunch of meaningless noise that is, isn't it?. I tried to explain that this is an HTML document where you have to have "tags". This particular one is an image tag and the src attribute is used to point the location of the image. She didn't seem to pay much attention. I'm sure she was thinking along the lines of "this markup lang involves way to much boilerplate".

The next thing was to find her first picture. After some discussion we went googling for robot pictures and found one (picking a suitable search term and selecting the picture took quite a while indeed).

The hardest thing on this lesson was copying the image URL to the clipboard (she needs both her hands to do that). And then of course the notion of clipboard was entirely new to her. She insisted on having a look at the clipboard and I tried to explain that you cannot see it because it's inside the computer. You just have to believe that the URL is now on the clipboard honey. Cannot blame her for some scepticism here. State that's hidden from the user, waddup?

Finally we got back into vim and managed to paste the image URL between the quotes in the img tag. And POW! There was our first HTML document. She was quite disappointed in not seeing the picture in vim. But hey, all the WYSIWYG editors are crap, right?

Finally we opened it in the browser from the command-line using

    open kuvat.html

That was it! I hope we'll collect more fancy robot pics in the same scrapbook later. Maybe learn more HTML too.

No comments:

Post a Comment