Embed Size (px)
DESCRIPTION
html5 tutorial
Citation preview
Exercise 1: inserting links, images and using class selectors
<!DOCTYPE html><html lang="en">
<head> <meta charset="utf-8"> <meta name="description" content="This is an HTML5 example"> <meta name="keywords" content="Smoothies, SmoothieWorld"> <link rel="stylesheet" href="styles.css"></head>
<body><h1>SmoothieWorld</h1><p>Smoothies are the stuff of life. They get you going in the morning, refresh you when you're hot. Here on Smoothieworld we want everyone to
feel the power of Smoothies. We're called Smoothieworld because we even think Smoothies can change the world.</p>
<p>All content on this site is the copyright of SmoothieWorld.</p>
</body></html>
Save as index.html
Alter the line to read: <p>All content on this site is the copyright of <a href = http://www.ayrshire.ac.uk>SmoothieWorld</a></p>
Immediately below, enter the following:<img src = "images/blueberry_smoothie.jpg" alt = "Blueberry Smoothie" width = "180" height = "320"/>
Create a new file, styles.css, and enter the following:h1 { color: purple;
Week 2 Page 1
}Save and run your index.html file
Return to styles.css and add the following:.purple{ color: purple;}
Return to index.html, and alter it to read:<span class = “purple”>Smoothies</span>Do this for each instance of the word “Smoothies”. Save and run your index.html file.
Exercise 2: controlling font elements and sizes
Open index.html and enter the following, directly beneath the h1 tag:<h2> Our mission statement </h2>
In your .css file, enter the following:body{ font-family: “Trebuchet MW”, Tahoma, Arial, sans-serif;}
p{ font-family: “Times New Roman”, Times, serif;}
Save and run your .html file.
In your .css file, add the following to the p element: font-size: 1em;
(The unit of measurement called an em is designed to scale, and unlike pixels, is not related to monitor resolution).
Week 2 Page 2
Alter h1 to 1.5em, and h2 to 1.25em
Exercise 3: using margins to modify space
Open your .css file, and add the following to the body element: margin: 0 20%;
(The 0 value is for the top and bottom margins, the 20% for left and right).
View your .html file in the browser. Change the width of your browser window and see the text reflow.
In your .css file add the following to all of your elements: border: thin red solid;
View your .html file.
In your .css file add the following to the h2 element: margin-bottom: 0em;
Add the following to the p element: margin-top: 0em;margin-bottom: 1.5em;
Experiment with setting different margins before removing the borders from around the text.
Exercise 4: setting line height, font spacing and weight
In your .css file, add the following to the p element: line-height: 1.75em;
Add the following to the h1 element:
Week 2 Page 3
line-height: 1.5em;
Add the following to the h2 element: font-weight: lighter; text-transform: uppercase;
View your .html file, then return to .css and add the following to the h2 element: letter-spacing: 0.2em;
Exercise 5: creating lists
Add the following to the bottom of your index.html file:<h3>Recipe of the Day: Honeydew Melon</h3>
<p>3 cups Honeydew Melon (seeded & chopped) 2 tsp Lime Juice1 cup Vanilla Nonfat Yoghurt1 cup Ice Cubes</p>
<p>Take a blender, add honeydew melon and watermelon; blend until it smoothens.Mix yoghurt, ice and limejuice and blend it again.Transfer it into tall glasses and drink it immediately.</p><p>Preparation time10 MinutesNumber of servings (12 oz)2Calories per serving250295 if 1 tbs sugar added315 if 1 tbs honey added</p></body></html>
Week 2 Page 4
In the first paragraph, change the opening and closing <p> tags to <ul> tagsAlter the first element on the list to read:<li>3 cups Honeydew Melon (seeded and chopped</li>
View your .html file.Repeat the last step for the other three ingredients on the list.
In the next paragraph, change the opening and closing <p> tags to <ol> tagsUse <li> tags to create three list items.View your .html file.In the last paragraph, change the opening and closing <p> to <dl> tags.
Add the following code to separate this list into terms and descriptions:
<dt>Preparation time</dt><dd>10 Minutes</dd><dt>Number of servings (12 oz)</dt><dd>2</dd><dt>Calories per serving</dt><dd>250</dd><dd>295 if 1 tbs sugar added</dd><dd>315 if 1 tbs honey added</dd>
Exercise 6: styling lists
Open your .css file, and add the following:ul{ font-size: 0.875em; background-color: #E5DAB3;}li{ background-color: #AA6C7E;}
Week 2 Page 5
View your .html file, then open your .css file again and add:
ul li{ background-color: #ABCBA5;} Alter your code to ensure that the font size for the ordered list is the same as the unordered list
Exercise 7: margins and padding in lists
Add the following to the ul element: margin-bottom: 2em; padding-left: 0em; list-style-position: inside;
(This last causes the bullets to be nested within the unordered list)
View your .html file.
Open your .css file, and add the following to the ul li element; margin-top: 1em;
Add the following code to your .css file:ol li{ padding-top: 10px;}
Week 2 Page 6
