Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
285 views

Html-Css Tutorial

The document provides an introduction to HTML and CSS through Codecademy. It discusses how HTML provides the structure and skeleton for webpages using tags, and how CSS is used to style webpages. It covers basic HTML terminology like tags, opening and closing tags, and nesting tags. It also teaches some basic HTML elements like paragraphs, headings of different sizes from H1 to H6, hyperlinks using the <a> tag, and images using the <img> tag. Links and images can be nested, with images nested inside links to make them clickable.

Uploaded by

api-300059075
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
285 views

Html-Css Tutorial

The document provides an introduction to HTML and CSS through Codecademy. It discusses how HTML provides the structure and skeleton for webpages using tags, and how CSS is used to style webpages. It covers basic HTML terminology like tags, opening and closing tags, and nesting tags. It also teaches some basic HTML elements like paragraphs, headings of different sizes from H1 to H6, hyperlinks using the <a> tag, and images using the <img> tag. Links and images can be nested, with images nested inside links to make them clickable.

Uploaded by

api-300059075
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

DM I - CODEACADEMY

Introduction to HTML and CSS - http://www.codecademy.com


1. 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, there's a tab called test.html. 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 Internet browser (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.

Created by: Ms. Stevens-McGrath

2. 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

Created by: Ms. Stevens-McGrath

3. Basic terminology
To learn more HTML, we should learn how to talk about HTML. Already you have seen we use
<>s a lot.
1.
2.
3.
4.

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

Created by: Ms. Stevens-McGrath

4. Make the head


Everything in our HTML file will go between the opening <html> and closing </html> 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".

Created by: Ms. Stevens-McGrath

5. Paragraphs in the body


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 <html> tags, right after the <head> tags, like this:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
</body>
</html>

Created by: Ms. Stevens-McGrath

6. 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. The
content between this tag will be the biggest!

Created by: Ms. Stevens-McGrath

7. 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>
<h2>
<h3>
<h4>
<h5>
<h6>

- 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!

Created by: Ms. Stevens-McGrath

8. Using every heading


Nice work! Given that there are six heading sizes altogether, we will make use of all six.

Created by: Ms. Stevens-McGrath

9. Mid-lesson breather
Here's a quick summary of things we've learned:
1.
2.
3.
4.
5.

HTML is used to give websites structure.


We open HTML files using a browser, and the browser renders (shows us) the file.
HTML files have a <head> and a <body> (just like you!)
In the head, we have the <title> tags, and we use these to specify the webpage's name.
How to make headings and paragraphs.

10. 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!
<a href="http://www.codecademy.com">My Favorite Site!</a>

1. First, there's an opening <a> 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 <a> and your closing </a>
tags. This is what you will be able to click on.
3. Finally, you have your closing </a> tag.

Created by: Ms. Stevens-McGrath

11. Adding images


You can add images to your websites to make them look fancy.
We use 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 there is no ending tag. It has / in the tag to close it: <img src="url" />.
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) after src=? It's "https://s3.amazonaws.com/codecademyblog/assets/f3a16fb6.jpg". That tells the <img> 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 <img> tag.

Created by: Ms. Stevens-McGrath

10

12. Click that image


Now you know how to add links and images to your website. Why not make that image a link?
For example:
<a href="http://www.codecademy.com/">
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/>
</a>

1. First we open our <a> tag and point the href to http://www.codecademy.com/ again.
2. But this time, instead of using text inside the <a> tag, we use an <img> tag.
3. Finally, we have our closing </a> tag.
Now when you click on the yellow duck, you will be taken to http://www.codecademy.com!
Placing one HTML tag inside of another is called nesting.

See lines 7 9

Created by: Ms. Stevens-McGrath

11

13. Images and links


Let's make sure you really understand images and links before we move on to the review.

Created by: Ms. Stevens-McGrath

12

You might also like