Google+News

=Assignment: Google News =

Objective
To display a total of five articles in a format, similar to Google News.

Assets Required
Per article set, you will need to copy/paste these pieces from [|Google News] :

1. The title

2. A paragraph excerpt

3. An image related to the article

4. The URL of the article

Procedure
1. Create a new project folder called “Google News” in your Dropbox folder.

2. Inside the folder, make an images folder to save all of your article images in.

3. Create an “index.html” file and save it in your “Google News” project folder.

4. Label your webpage with “Google News” in an h1 tag.

5. Paste in your first article’s headline, and wrap and h2 tag around it.

6. Paste in your first article’s paragraph excerpt and wrap a p tag around it.

<span style="background-color: #ffffff; font-family: 'Open Sans',Verdana,Helvetica,sans-serif; font-size: 12px; vertical-align: baseline;">7. Create another p tag and place the text “Read More” in it, and wrap an anchor element around the text to hyperlink it. Place the URL to the article in the href attribute of your anchor element. <span style="background-color: #ffffff; font-family: 'Open Sans',Verdana,Helvetica,sans-serif; font-size: 12px; vertical-align: baseline;">Repeat steps 5-7 for all five articles.

<span style="background-color: #ffffff; color: #808080; font-family: 'Bree Serif',Georgia,serif; font-size: 18px; vertical-align: baseline;">The Result
<span style="background-color: #ffffff; font-family: 'Open Sans',Verdana,Helvetica,sans-serif; font-size: 12px; vertical-align: baseline;">You are creating ONE index.html file, holding all five articles, with proper HTML structure.

<span style="background-color: #ffffff; color: #808080; font-family: 'Bree Serif',Georgia,serif; font-size: 18px; line-height: 1.5;">Submit
<span style="background-color: #ffffff; font-family: 'Open Sans',Verdana,Helvetica,sans-serif; font-size: 12px; line-height: 1.5;">1. Copy the link to your project folder in your Dropbox account.

<span style="background-color: #ffffff; font-family: 'Open Sans',Verdana,Helvetica,sans-serif; font-size: 12px; line-height: 1.5;">2. Post the link to your project folder on your Web Design journal.

<span style="background-color: #ffffff; font-family: 'Open Sans',Verdana,Helvetica,sans-serif; font-size: 12px; line-height: 1.5;">3. Test the link to be sure it works.