Saturday, September 17, 2022

HTML Practice #1

What is HTML code?

When you use Blogger to make a blog, you don't really need to know HTML coding. You just type in the white box, and if you want the text larger or a different color, or if you want to add a photo, it's easy to choose those features from the menu at the top. Before Blogger, we had to code with HTML code.

Please log in to Blogger (practice blog) and make a new blog page. Your post title can be HTML Practice.

On the blank page, type: This is the Blogging in English class 

The interesting thing is that browsers (like Firebox, Internet Explorer, Chrome, etc) can't read this text. The Blogger program turns your typed words into HTML code. The browser reads the code, and when you look at the page, it looks like you expected (hopefully!)

If you want to see what the code looks like, change from the Compose view and click on the HTML view at the top left of the page.

Go back to the Compose view. 

Now let's check to see what happens to the code if we make a small change. For example, lets change the words 'Blogging in English' into bold letters.

Look at the HTML view again. Can you see the new coding?

In the early 1990s, when the Internet was just starting out, we didn't have programs like Blogger to make HTML code for us. We had to type the code directly into a text file (but not a Word document). If we typed the code correctly, our web page could be read by the old browsers of the day, and our web page looked like we planned. 

Nowadays, most web pages are not made with only HTML coding, but you can still do it. Here's an old html example:

Strawberry Pop-tart Blow-torches

Here's a more recent one:

Ba Ba Dum

If you right-click on the page, then choose 'View Page Source,' you can see the HTML coding.

___________

Even though we don't really need to understand HTML code these days, it is sometimes helpful to know some basic things. If our web page on Blogger doesn't look exactly like what we want, we can check the HTML code and see what the problem is (sometimes!)

Also, if we want to embed a YouTube video, it's helpful to understand where to put the HTML code.

So ...
Please open 'Memo Cho' on your school PC. Kevin will show you how to make a very simple HTML document using only HTML code.

Next, please download the image below and save it on your desktop. Keep the name "pikachu". Notice that this is a png file. There are also jpg files and gif files for images.



Next, choose a color from the 6 choices below. (There are actually many more colors.)








HTML Practice 1
1) Copy the code below.
2) Paste it onto a blank Memo Cho page.
3) Change 'Kevin' to your name.
4) Type the color code you chose in the top line. (no caps OK)
5) Save it on your desktop as Test1.html 

<body style="background-color:#ff0000"> 
My name is Kevin
<br>
This is a <b>bold</b> word.
<br>
<i>Italics</i> are made like this.
<br>
<img src="pikachu.png">

Next week we'll learn a little more code.

No comments:

Post a Comment