HTML 5

Created by Nick Merrigan
Lets start off by building a recipe to see the new
changes using HTML 5. When creating the recipe, use

h1, p, ul, and div tags.
Here I have created a recipe on bon bons. Copy this
code to follow along with this presentation.
<html>
<head>
<title>Bon Bons</title>
</head>
<body>
<div id = "fact">
<h2>Chocolate Fact</h3>
<p>Chocolate is technically responsible for the microwave. Scientists were experimenting
with micro waves in hopes of creating better radar detectors
and in the wake of World War II, scientists were testing devices called magnetrons. A
scientist named Percy Spencer entered the lab with a chocolate
bar in his pocket and realized it quickly began to melt. Spencer then realized that the
magnetron could potentially be used to cook food. He
successfully tried popping corn and then attempted to cook an egg which cooked so quickly,
it blew up in his face.</p>
</div>
<div id = "recipe">
<h1>Peanut Butter Bon Bons</h1>
<h3> Ingredients:</h3>
<img src="bon.jpg" align = "right">
<ul>
<li>1/2 cup oleo</li>
<li>1 lb. powdered sugar</li>
<li>2 cups peanut butter</li>
<li>3 cups rice krispies</li>
<li>1 large Hershey bar</li>
<li>1/2 bar parafin</li>
<li>6 oz package of chocolate chips</li>
</ul>
<h3>Mix:</h3>
<p>Mix oleo, powdered sugar, peanut butter, and rice krispies together. Form mixture into balls and
refrigerate.
While they are refrigerating, make the chocolate syrup.</p>
<h3>Melt:</h3>
<p>In double boiler, melt 1 larger Hershey bar with 6 oz package of chocolate chips and 1/2 bar of parafin
on low heat.
Once balls are cooled in fridge, dip them in the chocolate syrup until well coated and set aside. Once all
cooled, place bon bons in refrigerator.</p>
<p><em><strong>Makes 90 one inch bon bons.</strong></em>

</div>
<div id = "footer">
<p> &copy 2013 Sweets of America. All rights reserved</p>
</div>
</body>
</html>
body{
background-color: #D2B48C
}
h1, h2, h3, p, ul{
color: white;
}
h3{
text-decoration: underline
}
#recipe{
background-color: #993300;
border-style: solid;
border-width: 5px;
border-color: black
margin-top: 10px;
margin-right: 300;
margin-left: 300;
padding:5px;
#fact{
background-color: #5C3317;
width: 200px;
height: 532px;
border-style: inset;
border-width: 5px;
border-color: black;
float:right;
padding: 10px
}
}
#footer p{
font-size: 10px;
color: black;
text-align: center;
}
Now that we have the recipe built, lets look at how
HTML 5 has changed the code. We will look at:

<header>
<footer>
<section>
<aside>
<article>
<mark>
<time>
<nav>
<video>
The header tag is just as it sounds. You use this tag
when you are creating your header. The header is

usually comprised of one or two images. These images
are usually the logo and a banner. The code would
look something like this.
<header>
<img src =images/headerLogo.gif>

<img src=images/headerBanner.jpg>
</header>
The footer is also just as it sounds. This tag is used to
create a footer in your website. Lets replace the div id

= footer with a footer tag instead.
<footer>
<p> &copy 2013 Sweets of America. All rights
reserved</p>
</footer>
Refresh your page now and see how it changes. Notice
how the page changes, the reason for this is because
the style sheet is no longer looking for the div id footer.
Change the CSS to footer now instead of #footer.
If your page isnt showing what you previously had,
your problem is simple. The elements we are using are

new and therefore are not supported in older
browsers. If you have IE8 or older, explorer wont show
the page correctly. If you are worried that your
audience wont see your page properly, dont use these
items yet.
Mobile browsers in smartphones such as the iPhones
and Android phones do support these elements. If you
main target is mobile users, you should go ahead and
use these elements.
The section tag is used to separate sections of the
webpage. This could be thought of as dividing a page

using a div tag. Replace your remaining div tags with
section tags. Call the section <section id = recipe>
<section id = fact>. Dont forget to replace the
</div> tags with closing section tags.
Change the CSS to call upon the section tag instead of
the div ids.
Refresh the page, you should see no change in what
the page looked like previously.
The aside tag is similar to the section tag. The
difference between these two tags is simple.

The section tag is used to group sets of information on
the webpage. If we had an ingredients div and the
preparation div, we would have changed both of those
to section tags.
The aside tag is peripheral content. We can place
these minor sections into an aside tag. This is like
placing this content aside as an extra for the site.
An article is used when using a blog, or have a news article. Lets add a
new section to our recipe called news. In that section, use the article
tag and make up some fake article. Here is my example.
</aside>
<section id= "news">
<article>
<h1>Chocolate Prices Rise</h1>
<p>Chocolate prices rise due to war. The military has taken more than
90 percent of chocolate making it a rare delicacy. Chocolate has risen
300 percent.
The only people able to afford this chocolate are... <a href =
"">more</a>.</p>
</article>
</section>
<h1>Peanut Butter Bon Bons</h1>
#news{
background-color: #5C3317;
width: 200px;
height: 560px;
border-style: inset;
border-width: thin;
border-color: black;
margin-right: 5px;
float:left;
padding: 10px
}
Change your CSS for the aside to match the news
section. The only difference between the article and

the aside is which side they are on. Change your CSS
for your recipe to have a margin of 200 on each side
instead of 300.
Add a footer now to have a margin of 200 on the left
and the right. Also make the background color black.
Make the height 25px.
The mark tag is like adding a highlighter to your
website. If you want to highlight anything on your

site, you would just use the mark tag. Here is an
example.
<p><em><strong><mark>Makes 90 one inch bon
bons.</mark></strong></em>
The next slide is a preview of what your page should
look like.
The time tag is used for a date and time. Lets add one to our
article right under the h1 tag. Make sure and make the font
white using the CSS.
There are several ways to write in the date and time.
<time datetime=2013-02-18> 2/18/2013> </time>
This is the official Internet format. Here are some other ways to
write it.
2013-02
2013
2013-02-18 09:00
2013-02-18 18:00
05:00
2013-02-18 05:00z
Headers arent only used to create headers for the webpage.
A header tag can also be used when creating the articles.

For example, if we used the header tag on the recipe, we
would stick the tag here.
<article>
<header>
<h1>Chocolate Prices Rise</h1>
<time datetime=2013-02-18> 2/18/2013 </time>
</header>
<p>.</p>
</article>
When we add more headers to the webpage, we want
to consider adding classes. This is a good idea so the

top of the page doesnt look like the headers of each
section in the articles.
Lets take a look at adding navigation. Lets create a navigation
bar at the top of the recipe page. Lets first create the links for the
navigation. Lets add the navigation at the very top of the page
right under the section id recipe tag.
<nav>
<ul>
<li>HOME</li>
<li>TOC</li>
<li>MAIN COURSE</li>
<li>APPETIZERS</li>
<li>DESSERTS</li>
</ul>
</nav>
ul{
background-color: #efe5d0;
margin: 10px
list-style-type: none;
padding: 5px 0px 5px 0px;
}
ul li{
display: inline;
padding: 5px 10px 5px 10px;
}
ul li a:link, ul li a:visited{
color: #954b4b;
border-bottom: none;
font-weight: bold;
}
ul li.selected{
background-color: #c8b99c;
}
Now that we have the navigation, preview the page.
You will notice that not only the navigation has

changed, but your unordered list looks different as
well. Lets add the nav tag in front of all the uls that are
meant for navigation. For example nav ul, nav ul li,
nav ul li a:link, nav ul li a:visited
The video tag is used to put a video into your site. This
can be done with this code.

<video controls
Autoplay
Width=512 height=288
Src=video/nameOfMovie.mp4
Poster=images/poster.png
Id=video>
Video controls makes the player supply controls for
audio and video playback

Autoplay makes the video start playing when the page
is loaded
Height and width are the dimensions of the video.
The src is the location of the video.
The poster is an image that shows if the video isnt
playing.
The id is used in case we want to add some CSS.
Loop, You can also add a loop to replay the video the
video after it is done playing.
There are 3 different formats for web video. MP4 Ogg
and WebM.
MP4- MP4 is supported by Safari and IE9 or greater.
You may also find support in version of Chrome.

Ogg- Ogg is supported by Firefox, Chrome, and Opera
WebM- WebM is supported by Firefox, Chrome, and
Opera
Video formats most often used.
WebM is in third place, but is backed by Google and
supported by others.
MP4 is in second and is the industry darling.
Ogg is the most used video format.
If youre worried about someone seeing your video, you
can give a browser the choice. If one format doesnt

work, its possible another will. The code will look
something like this.
<video controls autoplay width =512 height=288
<source src=video/YouMovie.mp4>
<source src=video/YouMovie.webm>
<source src=video/YouMovie.ogv>
<p>Sorry, your browser doesnt support the video
element.</p>
</video>
<video controls autoplay width =512 height=288>

<source src=video/YouMovie.mp4 type=video/mp4;
codecs=avcl.42E01E, mp4a.40.2>
<source src=video/YouMovie.webm
type=video/webm; codecs=vp8, vorbis>
<source src=video/YouMovie.ogv type=video/ogg;
codecs=theora, vorbis> <p>Sorry, your browser
doesnt support the video element.</p>
</video>
If you dont know the code to be more specific, you
dont need it. Adding the code is a way to make your

website more efficient.
If you want a flash video on your site, you must place
an object tag inside the video tag.
HTML is still fairly new. Learning it is a great way to
stay current with web design, you just need to know

when a good time to start using it is. You can see the
div tag was replaced in many areas, but it will always
be there to divide sections other tags wont. The new
tags in HTML 5 are meant to better optimize and
organize a website. Some tags weigh more for search
engines than others.

HTML 5

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML 5

Încărcat de

Drepturi de autor:

Formate disponibile

Created by Nick Merrigan

Lets start off by building a recipe to see the new

changes using HTML 5. When creating the recipe, use

Here I have created a recipe on bon bons. Copy this

code to follow along with this presentation.

<p><em><strong>Makes 90 one inch bon bons.</strong></em>

Now that we have the recipe built, lets look at how

HTML 5 has changed the code. We will look at:

The header tag is just as it sounds. You use this tag

when you are creating your header. The header is

<img src =images/headerLogo.gif>

The footer is also just as it sounds. This tag is used to

create a footer in your website. Lets replace the div id

If your page isnt showing what you previously had,

your problem is simple. The elements we are using are

The section tag is used to separate sections of the

webpage. This could be thought of as dividing a page

The aside tag is similar to the section tag. The

difference between these two tags is simple.

Change your CSS for the aside to match the news

section. The only difference between the article and

The mark tag is like adding a highlighter to your

website. If you want to highlight anything on your

Headers arent only used to create headers for the webpage.

A header tag can also be used when creating the articles.

When we add more headers to the webpage, we want

to consider adding classes. This is a good idea so the

Lets take a look at adding navigation. Lets create a navigation

Now that we have the navigation, preview the page.

You will notice that not only the navigation has

can be done with this code.

Video controls makes the player supply controls for

audio and video playback

There are 3 different formats for web video. MP4 Ogg

You may also find support in version of Chrome.

If youre worried about someone seeing your video, you

can give a browser the choice. If one format doesnt

<video controls autoplay width =512 height=288>

If you dont know the code to be more specific, you

dont need it. Adding the code is a way to make your

HTML is still fairly new. Learning it is a great way to

stay current with web design, you just need to know

S-ar putea să vă placă și