Web Design 1: Unit 1. Tutorial 1 The J-Prop Shop

Parts of an HTML Document:

<!DOCTYPE html>

<html>

<head></head>

<body>

<header>

</header>

<section>

<article>

</article>

</section>

<aside>

</aside>

<footer>

</footer>

</body>

</html>

http://www.codecademy.com/
First Lesson^

Turn In Screen Shots
https://drive.google.com/folderview?id=0B3BjDhgpt8jPTFRGXzdPTnVtS3c&usp=sharing

Tutorial 1

The J-Prop Shop

Each document on the World Wide Web is referred to as a Web page and is stored on a Web server. When you access a Web page, a Web browser retrieves the page from its Web server and renders it on your computer. Web pages are text files written in Hypertext Markup Language (HTML). The structure of an HTML document consists of different elements nested within each other in a hierarchy of elements. The top element in that hierarchy is the html element, which contains all of the other elements within an HTML file. Directly below the html element in the hierarchy are the head and body elements. The head element contains general information about the document which aids search engines in directing interested users to the page. The body element contains all of the content that appears in the rendered Web page. Prior to the opening <html> tag, many HTML files also include a Document Type Declaration, or doctype to indicate the type of markup language used in the document.

We are going to create the basic structure of an HTML Document that will be used for the J-Prop Web page. Start your text editor and open a blank document. Type the following lines of code in your document:

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

Save the file as jprop.htm in the J-Prop student data file.
The first element that we will add to the <head> of the web page is the <title> element, which is the text of the document title. To add a title to your Web page, click at the end of the opening <head> tag and then press the Enter key to insert a new line in your text editor. Press the Spacebar several times to indent the new line of code and then type the following:

<head>

<title>The J-Prop Shop</title>

</head>
As you write your HTML file, you can add notes of comments about your code. These comments are not displayed by browsers but are used to help explain your code to yourself and others. To add notes or comments, insert a comment tag.

Click at the end of the opening <head> tag and then press the Enter key to insert a new line in your text editor. Directly above the opening <title> tag, type the following lines of code:

<head>



<title>The J-Prop Shop</title>

</head>

Save your changes to the file.
We will now work on the contents of the <body> of the Web page. We will use structural elements which are the elements that define the major sections of a Web page. The following are HTML5 Structural Elements:

article – a subsection covering a single topic.

aside – content containing side issues to the main topic.

footer – content placed at the bottom of the page.

header – content placed at the top of the page.

nav – a navigation list of hypertext links.

section – a major topical area in the page.

To insert the HTML5 structural elements, return to the jprop.htm file in your text editor. Within the <body> element, insert the following tags:

<body>

                        <header>

                        </header>

                        <section>

                        </section>

                        <aside>

                        </aside>

                        <footer>

                        </footer>

            </body>

Save your changes to the file.
Structural elements can also be nested within one another. In the structure of this Web page, we will insert three article elements within the section element. Insert the following code within the section element:

<section>

            <article>

            </article>

            <article>

            </article>

            <article>

            </article>

</section>

Save your changes to the file.
We are now ready to begin entering content into the body by using grouping elements, which are elements that contain content that is viewed as a distinct block within the Web page. The following are Grouping Elements:

address – contact information

blockquote – an extension quotation

dd – a definition from a description list

div – a generic grouping element

dl – a description list

dt – a definition term from a description list

figure – a figure or illustration

figcaption – the caption of a figure

hn – a heading where the n is a value from 1 to 6

li – a list item from an ordered or unordered list

ol – an ordered list

p – a paragraph

ul – an unordered list

We will now add headings to the Web page. Return to the jprop.htm file. Within the <header> element, insert the following tags:

     <header>

<h1>The J-Prop Shop</h1>

<h2>Quality Juggling and Circus Props</h2>

                 </header>

            Within the first <article> element, insert the following <h2> heading:

                <article>

                        <h2>Welcome</h2>

                </article>

            Within the second <article> element, insert:

                <article>

                        <h2>Specials This Month</h2>

                </article>

            Within the third and final <article> element, insert:

                <article>

                        <h2>Quality Tested</h2>

                </article>

            Finally, within the <aside> element, insert:

                <aside>

                        <h2>Customer Comments</h2>

                </aside>
Save your changes to the file. Now reload the jprop.htm file in your Web browser to view the page body content.
The interpretation of a particular heading depends on how it’s used. The h2 headings that you just entered were used to provide a title for articles or sections in the Web page or as a subtitle to the main title of the page. You can indicate that an h2 heading acts as a subtitle by grouping it with a main title heading using the hgroup element.

We are going to group the first two headings so that they are interpreted as a main title and a subtitle. Return to the jprop.htm in your text editor. Indent the first two headings in the document and then enclose them within <hgroup> tags as follows:

            <body>

                        <header>

                                    <hgroup>

                                                <h1>The J-Prop Shop</h1>

                                                <h2>Quality Juggling and Circus Props</h2>

                                    </hgroup>

                        </header>

Save your changes to the file.
Next, we will add four paragraphs within the <article> elements. Return to the jprop.htm file in your text editor. Directly below the h2 heading Welcome, insert the following paragraph code:

<h2>Welcome</h2>

<p>

If you’re looking for high-quality, hand-crafted juggling and circus products, the J-Prop Shop is the store for you. I’ve designed and built props for the past 35 years and my products have been used by professional entertainers and hobbyists throughout the world. Our prices are reasonable and our quality is excellent.

</p>

Directly below the h2 heading Specials This Month, insert the following:

            <h2>Specials This Month</h2>

                        <p>

The following devil sticks are available at a special discount for the entire month of May:

            </p>

Directly below the h2 heading Quality Tested, insert the following:

            <h2>Quality Tested</h2>

                        <p>

Every item I create is checked and tested before being shipped out to assure perfect quality. I take pride in every one of my juggling props and I want my customers to feel that same pride.

                        </p>

            Finally, below the h2 heading Customer Comments, insert the following:

                        <h2>Customer Comments</h2>

                                    <p>

Here are a few select quotes from our happy family of customers and associates:

                                    </p>

Save your changes to the file and then refresh the jprop.htm in your Web browser to view the new paragraphs added to the Web page.
We will enter a few select quotes from satisfied customers using the <blockquote> element. Return to the jprop.htm file in your text editor. Scroll down to the <aside> element and after the paragraph within that element, insert the following block quote:

<aside>

            <h2>Customer Comments</h2>

            <p>

            Here are a few select quotes from our happy family of            customers and associates:

            </p>

            <blockquote>

                        <p>

“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”

                        </p>

                        <p>

“Dave Vinet makes the best juggling equipment on the planet. Period.”

            </p>

            <p>

“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”

            </p>

</blockquote>

</aside>

Save your changes to the file and then reload the jprop.htm file in your Web browser to see the revised page with the quoted material.
We will display the company’s address at the bottom of the body of this page using the <address> element. Return to the jprop.htm file in your text editor. Scroll down to the bottom of the file and then within the <footer> element, insert:

<footer>

            <address>

                        The J-Prop Shop

                        West Highland Drive

                        Auburn, Me 04210

                        (207) 555 – 9001

            </address>

</footer>

Save your changes to the file and then refresh jprop.htm in your Web browser to see the revised page with the address text.
The next step will be to display a list of products on this sample page by using an undered list with a nested list tag. Return to the jprop.htm file in your text editor. Within the Specials This Month article, directly below the <p> element, insert the following code:

<article>

<h2>Specials of the Month</h2>

<p>

The following devil sticks are available for the entire month of May:

</p>

<ul>

            <li>Basic Stick ($19.95)

The easiest stick to learn with, but “grippy” enough for the most demanding tricks. Comes in red, green and blue.

            </li>

            <li>Flower Stick ($24.95)

A graceful stick with colored tassels. Flower Sticks float slowly, making them ideal for beginners.

            </li>

            <li>Master Stick ($39.95)

Our most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master Stick is available in custom colors.

            </li>

            <li>Glow Stick ($29.95)

The Glow Stick shines brightly at night (without the danger of a fire stick).

            </li>

</ul>

</article>

Save your changes to the file and then refresh the jprop.htm file in your Web browser to see the list of products that appear as a bulleted list in the middle of the page.
We have added a lot of text content to the Web page but to improve the appearance of the display, you need to apply a style sheet which has already been prepared for you in the data files. You will learn how to create your own style sheet in later lessons. We need to link the jpsstyles.css to the Web page to apply it’s styles.

Return to the jprop.htm file in your text editor. Within the head element at the top of the file, insert the following link element:

<title>The J-Prop Shop Sample Page</title>

<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css” />

</head>

Save your changes to the file. Reload the jprop.htm file in your Web browser and view the format and layout change to reflect the styles in the style sheet.
Internet Explorer version 8 and earlier versions do not recognize styles applied to HTML5 elements and need an external program called a script to work. One of the most useful programs to enable HTML5 support in older browsers is Modernizr. We are going to link our Web page to the Modernizr file. Return to the jprop.htm file in your text editor. Scroll to the top of the file and add the following above the <link> element:

<title>The J-Prop Shop</title>

<script src= “modernizr-1.5.js”></script>

<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css />

</head>

Save your changes t the file. Unless you have access to Internet Explorer 8 or earlier, you will not be able to see the page layout.
Another type of element is a text-level element which marks content like a phrase or a collection of characters within a paragraph or heading. We are going to use the <strong> text-level element to display selected words in boldface text.

Return to the jprop.htm file in your text editor. Scroll down to the unordered list and enclose the name and price of each product within a set of <strong> tags as shown:

<ul>

            <li><strong>Basic Stick ($19.95)</strong>

The easiest stick to learn with, but “grippy” enough for the most demanding tricks. Comes in red, green and blue.

            </li>

            <li><strong>Flower Stick ($24.95)</strong>

A graceful stick with colored tassels. Flower Sticks float slowly, making them ideal for beginners.

            </li>

            <li><strong>Master Stick ($39.95)</strong>

Our most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master Stick is available in custom colors.

            </li>

            <li><strong>Glow Stick ($29.95)</strong>

The Glow Stick shines brightly at night (without the danger of a fire stick).

            </li>

</ul>

</article>

Save your changes to the file and then reload the jprop.htm file in your Web browser to view the revised appearance of the bulleted list of products.
Next we are going to add the customers names who made the comments, marking them as citations using the <cite> text-level element. Return to the jprop.htm file in your text editor. Locate the first customer comment and then add the following code at the end of the paragraph, directly before the closing </p> tag:

<blockquote>

            <p>

“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”

<cite>Thomas Gage, Circus England</cite>

            </p>

At the end of the paragraph for the second customer comment, insert:



            <p>

“Dave Vinet makes the best juggling equipment on the planet. Period.”

<cite>Douglas Pederson, Street-Wise Shows</cite>

</p>

Finally, at the end of the paragraph for the third customer comment, insert:

<p>

“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”

<cite>Linda Unger, Linda & Louis</cite>

</p>

Save your changes to the file and then refresh the jprop.htm file in your Web browser to see the revised text of the Customer Comments sidebar.
We will add line breaks using the <br /> tag to separate the citations from the comments to make it easier to read. Return to the jprop.htm file in your text editor. Insert the tag <br /> between the comment and the citation of each of the three customer comments in the file as shown:

<blockquote>

            <p>

“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”

<br />

<cite>Thomas Gage, Circus England</cite>

            </p>

            <p>

“Dave Vinet makes the best juggling equipment on the planet. Period.”

<br />

<cite>Douglas Pederson, Street-Wise Shows</cite>

</p>

<p>

“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”

<br />

<cite>Linda Unger, Linda & Louis</cite>

</p>

            </blockquote>

Save the changes to the file and then refresh the jprop.htm file in your Web browser to verify that each citation starts on a new line below the associated customer comment.
To learn how to insert an inline image, we will replace the name of the company at the top of the Web page with an image of the company logo using the <img> element. Return to the jprop.htm file in your text editor. Go to the h1 heading element at the top of the body section, delete the text The J-Prop Shop from between the opening and closing <h1> tags and then replace it with the following:

<body>

<header>

<h1><img src= “jpslogo.png” alt= “The J-Prop Shop” /></h1>

<h2>Quality Juggling and Circus Props</h2>

</header>

Save your changes to the file and then refresh the jprop.htm in your Web browser to see the new heading with the logo centered across the page.
The company’s address in the page footer is difficult to read because the street address, city name, zip code and phone number all run together on one line. We are going to separate them by a bullet or solid circular marker. Every character that your browser is capable of rendering belongs to a collection of characters and symbols called a character set.   The most commonly used character set on the Web is UTF-8.

Return to the jprop.htm file in your text editor. Scroll down to the address element within the address and insert a space followed by the • character entity as shown below:

<address>

            The J-Prop shop •

            541 West Highland Drive •

            Auburn, ME 04210 •

            (207) 555 – 9001

</address>

We are also going to use a long horizontal line known as an em-dash to mark the customer names in the customer comments section. Locate the customer comment from Thomas Gage and then directly before the opening <cite> tag, insert the following character code followed by a space: (Repeat this for the two remaining customer comments).

<blockquote>

<p>

“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”

<br />

— <cite>Thomas Gage, Circus England</cite>

</p>

<p>

“Dave Vinet makes the best juggling equipment on the planet. Period.”

<br />

— <cite>Douglas Pederson, Street-Wise Shows</cite>

</p>

<p>

“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”

<br />

— <cite>Linda Unger, Linda & Louis</cite>

</p>

</blockquote>

Save your changes to the file. Refresh the jprop.htm file in your Web browser to see the final content of the Web page.
For a browser to apply our character set correctly, we must add the meta element within the head element of your HTML document.

Return to the jprop.htm file in your text editor. Scroll to the top of the file. Directly below the comment in the head section, insert the following meta element as shown:

-->

<meta charset= “UTF-8” />

<title>The J-Prop Shop</title>

<script src= “modernizr-1.5.js”></script>

<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css />

</head>

Save your changes to the file and refresh the jprop.htm file in your browser and verify that the browser renders the page with no errors.

2 comments:

RajputSeoMay 14, 2019 at 4:39 AM
I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.
Webdesign
Strong_SEOJune 18, 2019 at 12:51 AM
Thank you for some other informative website. The place else may just I get that kind of information written in such a perfect method? I have a venture that I am simply now running on, and I’ve been at the glance out for such info. Online Quran Academy

Thursday, June 26, 2014

Unit 1. Tutorial 1 The J-Prop Shop

2 comments: