You will change the movies.html page you see inside the homework3 folder to include Microdata related to the list of movies - itemscope, itemprop, etc. based on the schema.org we have learned.
You will also include some role attributes wherever necessary according to WAI ARIA topic we have studied - remember that if we are using certain semantic HTML5 tags, those roles are not necessary - you can check by using the validator.w3.org to validate your HTML at the end of this assignment. NOTE: To use the URL in the validator.w3.org site, you will need to use the https:// instead of http:// if you are using the Hills server (or any other web server of your choice).
Director: James Cameron (born August 16, 1954)
Type: Science fiction
Release Date: December 18, 2009
Director: J. J. Abrams (born June 27, 1966)
Type: Science fiction
Release Date: December 18, 2015
Director: James Cameron (born August 16, 1954)
Type: Drama
Release Date: December 19, 1997
Director: Steven Spielberg (born December 18, 1946)
Type: Drama
Release Date: December 15, 1993
<body>
<header>
<h1>Great Movies</h1>
<h2>Great Directors</h2>
</header>
<div>
<h3>Avatar</h3>
<p>Director: James Cameron (born August 16, 1954)</p>
<p>Type: Science fiction</p>
<p>Release Date: December 18, 2009</p>
</div>
<div>
<h3>Star Wars: Episode VII</h3>
<p>Director: J. J. Abrams (born June 27, 1966)</p>
<p>Type: Science fiction</p>
<p>Release Date: December 18, 2015</p>
</div>
<div>
<h3>Titanic</h3>
<p>Director: James Cameron (born August 16, 1954)</p>
<p>Type: Drama</p>
<p>Release Date: December 19, 1997</p>
</div>
<div>
<h3>Schindler's List</h3>
<p>Director: Steven Spielberg (born December 18, 1946)</p>
<p>Type: Drama</p>
<p>Release Date: December 15, 1993</p>
</div>
<footer>
<img src="movielogo.png">
<p>List made by CNIT 132A class at CCSF</p>
<p>Copyright © 2017</p>
</footer>
</body>
body {
background-color: #DEB887;
color: #A52A2A;
}
header {
width: 60%;
background-image: url(images/banner.png);
margin: 0 auto;
text-align: center;
/*border-shadow: 5px 5px 5px gray;*/
font-size: 1.5rem;
color: black;
}
div {
width: 80%;
margin: 0 auto;
border: 2px solid #D2691E;
padding: 0 10px;
}
footer {
width: 60%;
margin: 10px auto;
padding: 3px 0;
text-align: center;
background-color: #A52A2A;
color: white;
font-size: 0.9rem;
}
footer img {
float: left;
margin: 0 5px 5px 0;
}
We need to replace a lot of generic HTML tags such as <div> with the new HTML5 Semantic tags, that convey meaning for the structure. So the outmost <div> will be replaced with <main>, and the ones around the movies will be replaced with <article>. The <p> elements containing the movie data details will be replaced with a <ul> <li> block, since this conveys the meaning list of items pertaining to each movie. Any items with data information, will be wrapped in a <time> with a datatime attribute that has an ISO datetime value.
Just before each <article>, let's add an image of the movie poster. Each <img> will be wrapped in a <div>, so we can set the width on the image container the same, since the widths of these images varies slightly. This will allow us to align all the <article> elements the same.
Finally, we are going to create another container just below main for styling and layout purposes, with the class movie-container. We will add role="list" to this <div>, and an aria-label="Movies" to give a verbal cue to the purpose of this container. The children of this movie-container will list of <div>'s, which will be given a role="list-item" and an aria-label for the name of the movie.
All the images, including the logo in the <footer>, must have a descriptive "alt" attribute for the screen reader.
The styling of a web page is also important for making it more accessible for the visually impaired. Using correct heading levels <h1> through <h6>, will indicate the nesting of information with the font size. In addition, proper choice of font and background colors will improve accessiblity by provide a reasonable level of contrast. Using images for backgrounds can also make text in that element hard to read, such as in the original web page heading. To fix this, we will wrap the headings in an <hgroup> which we will apply some padding and a background-color of white.
Add Microdata attributes to the HTML elements improves Search Engine Optimization, by allowing search engines to understand the data contained in your web page. A large set of standardized descriptions are documented on Schema.org. Each schema contains a number of properties (children), that may themselves also be schema's. For example, a Movie Schema can contain a movie director property, which is an instance of a Person Schema.
When a given element contains data that can be described by a standardize schema, that element must be given an attribute itemscope, and another attribute itemtype={URL of the schema}. The childen of that element that contain known data specified by that schema, must be given an itemprop attribute with the standardized label for that dataum. For example, the element with the data for the genre (type) of the movie will be given the attribute itemprop="genre".
<header class="container">
<hgroup class="movie-header">
<h1>Great Movies</h1>
<h2>Great Directors</h2>
</hgroup>
</header>
<main class="movies container">
<div class="movie-container" role="list" aria-label="Movies">
<div class="movie" role="listitem" aria-label="Avatar">
<div class="movie-poster" role="img">
<img src="images/avatar.jpg" alt="Avatar Movie Poster">
</div>
<article itemscope itemtype="http://schema.org/Movie" aria-label="Avatar Details">
<h3 itemprop="name">Avatar</h3>
<ul class="movie-items">
<li>
Director:
<span itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">James Cameron</span>
(born <time datetime="1954-08-16" itemprop="birthDate">August 16, 1954</time>)
</span>
</li>
<li>
Type:
<span itemprop="genre">Science fiction</span>
</li>
<li>
Release Date:
<time datetime="2009-12-18" itemprop="datePublished">December 18, 2009</time>
</li>
</ul>
</article>
</div>
<hr>
<div class="movie" role="listitem" aria-label="Star Wars 7">
<div class="movie-poster" role="img">
<img src="images/star-wars-vii.jpg" alt="Star Wars VII Movie Poster">
</div>
<article itemscope itemtype="http://schema.org/Movie" aria-label="Star Wars 7 Details">
<h3 itemprop="name">Star Wars: Episode VII</h3>
<ul class="movie-items">
<li>
Director:
<span itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">J. J. Abrams</span>
(born <time datetime="1966-06-27" itemprop="birthDate">June 27, 1966</time>)
</span>
</li>
<li>
Type:
<span itemprop="genre">Science fiction</span>
</li>
<li>
Release Date:
<time datetime="2015-12-18" itemprop="datePublished">December 18, 2015</time>
</li>
</ul>
</article>
</div>
<hr>
<div class="movie" role="listitem" aria-label="Titanic">
<div class="movie-poster" role="img">
<img src="images/titanic.jpg" alt="Titanic Movie Poster">
</div>
<article itemscope itemtype="http://schema.org/Movie" aria-label="Titanic Details">
<h3 itemprop="name">Titanic</h3>
<ul class="movie-items">
<li>
Director:
<span itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">James Cameron</span>
(born <time datetime="1954-08-16" itemprop="birthDate">August 16, 1954</time>)
</span>
</li>
<li>
Type:
<span itemprop="genre">Drama</span>
</li>
<li>
Release Date:
<time datetime="1997-12-19" itemprop="datePublished">December 19, 1997</time>
</li>
</ul>
</article>
</div>
<hr>
<div class="movie" role="listitem" aria-label="Schindler's List">
<div class="movie-poster" role="img">
<img src="images/schindlers-list.jpg" alt="Schindler's List Movie Poster">
</div>
<article itemscope itemtype="http://schema.org/Movie" aria-label="Schindler's List Details">
<h3 itemprop="name">Schindler's List</h3>
<ul class="movie-items">
<li>
Director:
<span itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Steven Spielberg</span>
(born <time datetime="1946-12-18" itemprop="birthDate">December 18, 1946</time>)
</span>
</li>
<li>
Type:
<span itemprop="genre">Drama</span>
</li>
<li>
Release Date:
<time datetime="1993-12-15" itemprop="datePublished">December 15, 1993</time>
</li>
</ul>
</article>
</div>
</div>
</main>
<footer class="container">
<div class="movie-border"></div>
<img src="images/movielogo.png" alt="Logo of a Movie Camera">
<p>List made by CNIT 132A class at CCSF</p>
<p>Copyright © 2017</p>
</footer>
body {
font: 16px Arial, Verdana, sans-serif;
background-image: url(images/speckled-film-small.jpg);
background-repeat: repeat;
}
header {
width: 80%;
height: 8rem;
background-image: url(images/banner.png);
background-size: auto 8rem;
background-repeat: repeat-x;
margin: 1rem auto;
text-align: center;
font-size: 1.5rem;
color: black;
display: flex;
justify-content: space-around;
}
.movie-header {
padding: 0.5rem 1rem;
background-color: white;
}
.movie-border {
width: 100%;
height: 20px;
background-image: url(images/banner.png);
background-size: auto 20px;
background-repeat: repeat-x;
margin: 1rem 0;
}
main {
width: 80%;
margin: 0 auto;
background-color: #f0f0f0;
padding: 0 10px;
display: flex;
justify-content: space-around;
}
footer {
width: 80%;
margin: 1rem auto;
padding: 3px 0;
text-align:center;
background-color: #d0d0d0;
font-size: 0.9rem;
}
footer img {
float:left;
margin: 0 5px 5px 0;
}
.movie-items {
list-style: none;
padding: 0 0;
}
.movie {
display: flex;
margin: 1rem 0;
}
.movie-poster {
width: 100px;
}
.movie-poster img {
height: 100px;
}