html short intro
DESCRIPTION
HTML short introTRANSCRIPT
-
Feel free to change this text.
Why learn HTML? 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
1. To the right, we have a test.htmlfile.
2. Change the text on line 2 (the bit between and ) to anything you like!
3. 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!
Something here
HTML and 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 CSSCascading 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 on the first line. This tells the browser what language it's reading (in
this case, HTML).
b. Always put on the next line. This starts the HTML document.
c. Always put on the last line. This ends the HTML document.
-
Instructions
1. Go ahead and put the three lines mentioned above into test.html, which is now blank.
2. In between the second and last line (between the and the ), feel free to write
whatever message you like.
See here
Basic terminology 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:
4. Example of closing tag:
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.
Some text!
The last exercise taught us how to set up our HTML file. Everything we do now will go
between and.
Practice makes perfect! One more time:
Instructions
1. Put in the tag.
2. Put in the opening and closing tags.
3. Between the tags, write whatever you like.
4. Press Save & Submit Code to see what you've written appear on the page!
This is the header
My title page
-
Make the head Everything in our HTML file will go between the opening and closing tags.
There are always two parts to an HTML file: the head and the body. Let's start with the head.
The head contains information about your HTML file, like its title. The title is what we see in the
browser's title bar or page tab. For example the title of this page is "HTML Basics | Codecademy".
Instructions
Let's add a head and a title to our webpage. If you get stuck at any point, click "Stuck? Get a hint!"
below for an example.
1. Add an opening tag and closing tag.
2. Between the tags, add in an opening tag and closing tag.
3. Between the tags, write in a title for your page. For example, "My Webpage."
4. Press "Save & Submit Code" to continue
My title page
1
Hi everybody
Paragraphs in the body Great job! To review, an HTML file has both a head and a body. The head is where you put
information about your HTML file, like its title.
The body is where you put your content, such as text, images, and links. The content in the body
is what will be visible on the actual page.
The body goes inside the tags, right after the tags, like this:
My Webpage
Instructions
-
1. Underneath the closing tag, put an opening tag and a closing tag, like in the
example above.
2. Inside the body, create two paragraphs. Each paragraph starts with an opening tag and ends
with a closing tag. We can write content in between the tags, like this:
Hello world!
Headings & Paragraphs
Header 1
Paragraph1
Paragraph2
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 )
c. Create paragraphs (in the with tags)
The next step is to give our paragraphs headings using heading tags. Let's start with the tag.
The content between this tag will be the biggest!
Instructions
1. In the body section, create a heading. To do this, create an tag.
2. Add content.
3. Close the element with a closing tag. (Your content should now be between and .)
4. Underneath the heading tags, create two paragraphs using tags with whatever content you
like.
-
Headings & Paragraphs
Header 1
Paragraph1
Header 3
Paragraph2
Header 5
Paragraph3
More about headings! HTML actually lets us have more than one heading size. There are six heading sizes,
where is the boss and is puny!
- The CEO
- VP
- Director
- Middle management
- Lowly assistant
- Gets coffee for everyone
Below we'll ask you to add headings of various sizes. Feel free to write whatever you like for
the headings!
Instructions
1. Your code currently has one heading and two paragraphs.
2. Add an heading before the second paragraph.
3. Add an heading after the second paragraph, and then add a third paragraph after this
heading.
-
Headings & Paragraphs
Header 1
Paragraph1
Header 2
Paragraph2
Header 3
Paragraph3
Header 4
Paragraph4
Header 5
Paragraph5
Header 6
Paragraph6
Using every heading Nice work!
Given that there are six heading sizes altogether, we should make use of all six.
Instructions
1. Add three more headings to the code, making use of , and. Make sure to close
all your tags!
2. Under each heading, add a short paragraph. Dont forget paragraphs need opening and
closing tags!
Mid-lesson breather You've done an awesome job! Here's a quick summary of things we've learned:
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 and a (just like you!)
4. In the head, we have the tags, and we use these to specify the webpage's name.
-
5. How to make headings and paragraphs.
Instructions
1. Add a title between the tags.
2. Create a sized heading in the body. Make your heading say anything you want! (Just don't
forget to close it.)
3. Create three paragraphs using tags and fill them with content (e.g.about cars, your pet, favorite
city to travelwhatever you like!)
My Favorite Site!
You're going places! What if you wanted to send the user to another part of your website, or another website
altogether? You use hyperlinks, or links for short!
My Favorite Site!
1. First, there's an opening tag and that tag has an attribute called href. The href value tells your
link where you want it to go, in this case http://www.codecademy.com.
2. Then you have a description of your link between your opening and your closing tags.
This is what you will be able to click on.
3. Finally, you have your closing tag.
Instructions
1. In the body section, create a link. To do this, create an tag. Point your link to a website by
setting the value of the href attribute
2. Add a description of your link
3. Close the element with a closing tag
-
Adding images You can add images to your websites to make them look fancy.
We use an image tag, like so: . 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 there is no ending tag. It has / in the tag to close it: .
Check out the tag to the rightit adds a picture of a rubber duck to the page! (You can see it
by clicking on the Preview button.)
See the web address (or URL) aftersrc=? It's"http://s3.amazonaws.com/codecademy-
blog/assets/f3a16fb6.jpg". That tells the tag where to get the picture from!
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 tag.
Instructions
Add a second image below the first one. (Make sure it's before the closing tag!)
If you can't think of a good picture, use this ninja:
http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg
AAAA AAAAA AAAA
Click that image Good work! Now you know how to add links and images to your website. Why not make that
image a link? For example:
-
1. First we open our tag and point the href tohttp://www.codecademy.com/ again.
2. But this time, instead of using text inside the tag, we use an tag.
3. Finally, we have our closing tag.
Now when you click on the yellow duck, you will be taken tohttp://www.codecademy.com!
Placing one HTML tag inside of another is called nesting.
Instructions
1. In the body section, create an tag.
2. Choose a website to point your link to, like .
3. Now create your tag between your opening tag and closing tag. Don't forget
the src!
4. Finally, close your tag after your tag.
AAAA AAAAA AAAA
AAA
Images and links Good work! Let's make sure you really understand images and links before we move on to the
review.
Instructions
1. Between the tags, add two images using the tag. One should be a link; the other
should not. The link can go anywhere you want.
2. After your two images, create a link that's just a line of text. It can link anywhere you want.
-
Build Your Own Webpage
Result
YEAH SANDWICHES
I like eggs.
And ham!
But mostly sandwiches.
Every house needs a frame An HTML page is sort of like a house: it needs a certain number of essential structures in
order to work.
Just like a house, an HTML page needs a frame. In this case, your frame is made
of , , , and tags.
Instructions
Your webpage is blank as the day it was born! Let's add five things:
1. The tag
2. Your tags
3. Your tags
4. tags (with any title you like!) between your head tags
5. Your tags
-
Header 1
It's better with a header Your webpage could use an header between the body tags to let everyone know that the
page is about you.
Instructions
Create an tag inside your body tags. Between your opening and closing tags,
type your name for all to see!
Header 1
Paragraph 1
Paragraph 2
Paragraph 3
Tell us about yourself Your page is coming along, but it's not telling us much yet.
You could use a paragraph or two telling your readers what your interests are, what you do for
a living, how much you love learning HTML, and so on.
Instructions
Insert three tags after your tag (but before your closing tag!). Write a little bit
about yourself in each of the three paragraphs. You can say whatever you want! It's your
webpage.
Header 1
Paragraph 1
-
Paragraph 2
Paragraph 3
A picture's worth a thousand words Nice work! Your page is still looking a bit spare, though. Better add an image or two to spruce
things up a bit.
Remember, to insert an image from the web you will need to right-click and select "Copy
image URL." Then use this URL in your tag.
Instructions
Insert an tag between your tags. Feel free to put it anywhere! (We think it'd look
best after your tag, but before your tags.) You can make the src attribute point to any
image you like.
Header 1
Paragraph 1
Paragraph 2
Paragraph 3
Link me! Great! There's only one problem: your webpage is like a house with no doors. There's no way
to get in or out! We'll fix that by adding a couple of links.
Once you successfully add your links and hit Run, you've finished! Revel in the glory of your
newly created webpage.
If it still looks a little basic to you, don't worry. We'll soon teach you CSS to make your
webpages look sharp!
Instructions
Add at least two links to your webpage. You can turn an image or a bit of text into a link; you
can even turn part of the text inside your tags into a link!
Check out the Hint if you've forgotten how the tag works.
-
HTML Basics II