Based on C.’s mock up, we built a real HTML page using CSS.
Step 1: Here is how we built the page
First I told her about the
So she did the following to divide up the screen into 4 sections.
Welcome!speech bubblehappy faceask question
Step 2: She picked the font Arial Rounded MT Bold using the Font Book application on the Mac
I told her the div tag needs a class name and she can choose whatever she wanted, so she chose asdf for simplicity of typing, I think she understands the concept that humans are in charge of ‘names’ and variable names.
WELCOME!
Then I talked to her about the <style> tag to change the font face for the class asdf
- font-size : this is the number of ‘points’ or pixels of the height of the font she wanted to use, and we experimented with different numbers until she decided on 50
- font-family : this is cut/pasted from Font Book
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold"; text-align: center;}
For the speech bubble, we found a site http://wigflip.com/ds/ which will allow us to type in any word and generate an image of a speech bubble with the text
C. wanted to use the Yahoo! Messenger happy face as the magic eight ball. I showed her how to Show Package Content for the Yahoo! Messenger app on the Mac. the file is Applications/Yahoo! Messenger/Contents/Resources/cesario.icns
We opened the file using the Mac Preview app and saved it as a .gif file so that transparency is preserved. C. remebers how to do width and height and chose to use 125.
Finally we talked about the text input field
To put the finishing touches, we played with more CSS to add a 60px whitespace
p {margin-top: 60px}
Here is the complete HTML code
<style type="text/css">
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";
text-align: center;}
*.fd {align: center; }
p {margin-top: 60px}
</style>
WELCOME!
<!--- TODO: figure how to center in CSS */ -->
<center>
<p/>
</center>
Teaching Kids Programming 