1.Introduction to HTML
This unit will introduce you to the basics of HTML, the language used to create websites.
HTML Basics
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.
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!
Basic terminology
To learn more HTML, we should learn how to talk about HTML. Already you have seen we use
Add a
Between the
Paragraphs in the body
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<p>text</p>
<p>text</p>
</body>
</html>
<>s a lot. Make the headAdd a
<head> opening and </head>closing tag. See the Hint for more.Between the
<head> tags, add in opening <title> and closing</title> tags. Paragraphs in the body
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<p>text</p>
<p>text</p>
</body>
</html>
2. Body elements
Paragraphs and headings
<body>
<h1>Learning Html</h1>
<p>Headdings are very easy to learn</p>
<p>But this is not headding its a paragraph</p>
</body>
More about headings!
<body>
<h1>The Ceo</h1>
<h2>VP</h2>
<h3>Director</h3>
<h4>Middle</h4>
<h5>Low</h5>
<h6>Gets</h6>
<h1>Learning Html</h1>
<p>dkfjsl</p>
<p>kjlkfjsl</p>
<p>ljfslkjf</p>
<p>Headdings are very easy to learn</p>
<p>But this is not headding its a paragraph</p>
</body>
Using every heading
<body>
<h1>The Ceo</h1>
<h2>VP</h2>
<h3>Director</h3>
<h4>Middle</h4>
<h5>Low</h5>
<h6>Gets</h6>
<body>
3. Adding images to your site!
Mid-lesson breather
<!DOCTYPE html>
<html>
<head>
<title>Result website</title>
</head>
<body>
<h3>headdding</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</body>
</html>
Adding images
<body>
<img src="http://i1061.photobucket.com/pic.jpg" />
</body>
Click that image
<a href="http://"www.google.com""> <img src="http://bit.ly/PK1euu" /></a>
Images and links
<a href="http://www.google.com" ><img src="pic.jpg" /></a>
<img src="http://profile.ak.fbcdn.net/pic.jpg" />
<a href="http://www.google.com">text</a>
Congratulations!
2.HTML Structure:Using Lists
In this unit, we'll cover more advanced HTML structure and begin customizing your pages.
HTML Basics II
Introduction
Let's get warmed up by adding a
In the body, create a paragraph (using
Indentation is your friend
style of codding is called indentation
<!DOCTYPE html>
Let's get warmed up by adding a
<title> in the <head>.In the body, create a paragraph (using
<p>). Write anything you like!Indentation is your friend
style of codding is called indentation
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Ordered lists
<h3>'List of things I find Ok'.</h3>
<ol>
<li>item one</li>
<li>item two</li>
</ol>
One more ordered list
<ol>
<li>item one</li>
<li>item two</li>
</ol>
Unordered lists
<ul>
<li>one</li>
<li>two</li>
</ul>
Lists inside a list
<ol>
<li>Dad's interests
<ul> <li>knitting</li>
</ul>
</ol>
<ul>
<li>Fav boy name</li>
<ol> <li>ameer</li>
</ol>
</ul>
Making comments
<!---Make me into a comment.---->
Font size
<p style="font-size:10px">text</p>
<p style="font-size:20px">text</p>
<p style="font-size:40px">text</p>
Font color
<h1 style="color:green;font-size:16px">Green</h1>
<p style="color:violet">Violet.</p>
<p style="color:red; font-size:10px">Red</p>
Font family
<ol> <li style="font-family:Garamond;font-size:16px">text</li>
<li style="font-family:Verdana;font-size:12px">text</li>
<li style="font-family:Impact;font-size:10px">text</li> </ol>
Recap
For the paragraph on line 7, make the font have:
a. A size of 20px b. A color of blue c. A font-family of Garamond
3. More nice styling!
Background color
<body style="background-color:brown">
<h3>Favorite Football Teams</h3> <ol style="background-color:yellow">
<li>The Hawthorn Football Club</li>
</ol>
Aligning the text
<ol> <li style="text-align:left">The Hawthorn Football Club</li>
<li style="text-align:center">San Franscisco 49ers</li>
<li style="text-align:right">Barcelona FC</li> </ol>
Strong words!
<p>Do you hear the people <strong>sing</strong>?</p>
Emphasize words!
<p>Hey, don't say <em>that</em>!</p>
Summary
- Make ordered and unordered lists . Change the color, size and type of font
- Add comments to our HTML file .Change the page's background color
- Align text .Bold and italicize text
No comments:
Post a Comment