Coding Mastered: 2013

Thursday, December 26, 2013

Paragraphs in the Body

We have set up a lot of the basic things for your HTML file for you.

We have learned about opening and closing tags. When we put content between the tags, the entire bit is called an element.

element = <opening tag> + content + <closing tag>

Notice we have both title tags now, but we need <body> tags. The content in the body is what will be visible on the actual page. The body goes inside the html tags, but not inside the head tags, like this:

<html>
    <head></head>
    <body></body>
</html>

Instructions

Between the title tags, give your page a name. It can be anything!
Underneath the closing </head>tag, put in the opening and closing<body> tags.
Inside the body, create two paragraphs! Each paragraph requires opening and closing tags:  and. We put content in between the tags.

Friday, December 20, 2013

Make the Head

Everything in our HTML file will go between the opening <html> and closing </html> tags.

There are always two parts to the file: the head and body. Let's focus on the head.

a. It has an opening and a closing tag.
b. The head includes important information about the webpage, such as its title.
c. The title is the words we see in the tab (for example, the title of this page is "Introduction to HTML").

Instructions

Add a <head> opening and </head>closing tag. See the Hint for more.
Between the <head> tags, add in opening <title> and closing </title>tags.
In between the <title> tags, write the title of your webpage: Bad to the Bonez Webpage Inc. You'll be able to see the title at the top of your browser window: click and open in a new tab to see!
Press Save & Submit Code!

Thursday, December 19, 2013

Basic Terminology

To learn more HTML, we should learn how to talk about HTML. Already you have seen we use <>s a lot.

Things inside <>s are called tags.
Tags nearly always come in pairs: an opening tag and a closing tag.
Example of opening tag: <html>
Example of closing tag: </html>

You can think of tags as being like parentheses: whenever you open one, you should close it. Tags also nest, so you should close them in the right order: the most recently opened tag should be the first one closed, like in the example below.

<first tag><second tag>Some text!</second tag></first tag>

The last exercise taught us how to set up our HTML file. Everything we do now will go between <html> and</html>.

Practice makes perfect! One more time:

Instructions

Put in the <!DOCTYPE HTML> tag.
Put in the <html> opening and closing tags.
Between the <html> tags, write whatever you like.
Press Save & Submit Code to see what you've written appear on the page!

Wednesday, December 18, 2013

HTML & CSS

HTML stands for HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext!

A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.

What makes webpages pretty? That's CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS in later courses.

The first thing we should do is set up the skeleton of the page.

a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML).
b. Always put <html> on the next line. This starts the HTML document.
c. Always put </html> on the last line. This ends the HTML document.

Instructions

Go ahead and put the three lines mentioned above into test.html, which is now blank.
In between the second and last line (between the <html> and the </html>), feel free to write whatever message you like.

Sunday, December 8, 2013

Why Learn HTML

Coding Mastered

Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we'll use HTML to add paragraphs, headings, images and links to a webpage.

In the editor to the right, there's a tab called test.html. This is the file we'll type our HTML into. See the code with the <>s? That's HTML! Like any language, it has its own special syntax(rules for communicating).

When we press Save & Submit Code, the results tab will act like an Internetbrowser (e.g. Chrome, Firefox, Internet Explorer). A browser's job is to transform the code in test.html into a recognizable webpage! It knows how to lay out the page by following the HTML syntax.

Instructions

To the right, we have a test.htmlfile.
Change the text on line 2 (the bit between  and ) to anything you like!
Hit Save & Submit Code, and you'll see how the test.html file would look in a browser. Did you see that? The tags made our text bold!

Open a Text Document and Paste this text in:

<!DOCTYPE html>

Feel free to change this text.