Today: continue to update class webpage, do fun online tutorials to learn web design concepts, and begin using HTML and Notepad++
0. What the heck is HTML?
1. Mozilla Thimble exercises
Before we start building a webpage from scratch, let’s try some fun examples to get you used to looking at and editing website code:
a. X-ray goggles let you peek at and edit the code
c. This sassy cat needs your help!
To get a new image- bing.com, then images, then search for something, then under License choose “Free to share and use”
2. More Web Design Basics
a. What are the parts of a web page?
b. Let’s all help these kittens!
3. Coding from Scratch
Inspiration– check out some of the work created by my high school students last year
We will use Notepad++ as our code editor and will preview our webpage in Firefox.
Webpages are created using HTML and CSS. HTML and CSS tell a browser, like Chrome or Firefox, how a webpage should look and how to display its content.
Let’s just code:
Open up Notepad++
Copy and paste the following.
<! DOCTYPE HTML>
<head>
<title>This is your page title</title>
</head>
<body>
All visible content goes here.
</body>
</html>
Save as index.html
Now we will add text, images, links, and other content.
Common code:
paragraph <p>
line break <br>
bold text <strong>this text is bold</strong>
italicized text <em>this text is italicized</em>
add an image <img src=”image_name.jpg” />
add a link <a href=”#”>this is a link to some other web page</a>
tables (like a grid)
<table>
<tr>
<td>table cell in table row</td>
<td>another table cell</td>
</tr>
<tr>
<td>table cell</td>
<td>table cell</td>
</tr>
</table>
bullets:
<ul>
<li>just a bullet, no numbers</li>
<li>another bullet</li>
</ul>
<ol>
<li>I’m numbered!</li>
<li>I’m numbered, too!</li>
</ol>