HTML basics

 From http://www.codecademy.com HTML Basics. For remembrance.

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

  1. Things      inside <>s are      called tags.
  2. Tags      nearly always come in pairs: an opening tag and a closing tag.
  3. Example of      opening tag: <html>
  4. 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>.

 

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”).

 

PARAGRAPHS IN THE BODY

We have set up a lot of the basic things for your HTML file for you. This is so you won’t get mad at us for too much repetition—please learn it well!

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>

Paragraphs and headings

We’re definitely making good progress! We’ve learned when and why we use HTML. We’ve also learned how to:

a. Set up an HTML file with tags
b. Title the webpage (in the <head>)
c. Create paragraphs (in the <body> with <p> tags)

The next step is to give our paragraphs headings using heading tags. Let’s start with the <h1> tag, which marks something as the most important. (Everyone knows the most important font is the biggest!)

 

MORE ABOUT HEADINGS!

HTML actually lets us have more than one heading size. There are six heading sizes, where <h1> is the boss and <h6> is puny!

  • <h1> – The CEO
  • <h2> – VP of Fancy Towne
  • <h3> – Director of Some Stuff
  • <h4> – Middle management
  • <h5> – Lowly assistant
  • <h6> – Gets coffee for everyone else

Below we’ll ask you to add headings of various sizes. Feel free to write whatever you like for the headings!

 

MID-LESSON BREATHER

  1. HTML is used to give websites structure.
  2. We open HTML files using a browser, and the browser renders (shows us) the file.
  3. HTML files have a <head> and a <body> (just like you!)
  4. In the head, we have the <title> tags, and we use these to specify the webpage’s name.
  5. How to make headings and paragraphs.

 

ADDING IMAGES

  1. You can add images to your websites to make them look ultra fancy. You just need an image tag, like so: <img>. This tag is a bit different from the others. Instead of putting the content between the tags, you tell the tag where to get the picture using src. It’s also different because this tag self-closes: it doesn’t have a separate tag to close it. Note the / in the tag to close it: <img src=”url” />.
  2. Check out the tag to the right—it adds a picture of a rubber duck to the page! (You can see it by clicking on the Result tab.)
  3. See the web address (or URL, for Uniform Resource Locator) after src=? It’s “http://i1061.photobucket.com/albums/
    t480/ericqweinstein/f3a16fb6.jpg”. That tells the <img> tag where to get the picture from!
  4. Every image on the web has its own image URL. Simply right-click on an image and choose “Copy image URL.” Paste that URL in quotes after src= to insert with your <img> tag.

 

CLICK THAT IMAGE

  1. Good work! Now you know how to add      images to your website. But what if you want to click on that image to      lead you somewhere else?
  2. The <a> tag is the one used to make hyperlinks      (or just links) on webpages. These are the words or images you      click to go to a new page!
  3. Just like <img>, <a> has an attribute that      tells the link where to go. Instead of src, <a> uses href, like so:
  1. <a href=”http://www.codecademy.com”>Learn to code!</a>
  1. src stands for “source.” It      tells the <img> link      where the picture comes from!
  2. href stands for “hypertext      reference.” Remember when we said that hypertext (that is, links) is      text you can click on? Well, href tells that link where to go! The text after href is the web address, and the text      between <a> and </a> is the text you click on.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: