Steps for HTML5 Newsletter

© Jerry Belch

Overview of Project

The objective here is to:

  1. This assignment can be done either first or second semester. The project is designed as a joint project between the IT Department and Human Resources/ The project, of course could be done by either department.
  2. Instead of creating a regular text-based project using a template for Newsletters, this project is created in Notepad++ and Google's Chrome.
  3. Department members will learn the advantages of the Flexible Box model for laying out content. Since it is web-based employees can view it electronically on the company network, or it can be uploaded to an Internet server.
  4. The unit is 10 days or two weeks in length.
  5. The company featured in the example newsletter is a floral and gift company.
  6. The newsletter format is designed for four pages, all linked from a menu bar.

Tutorial

  • To get a close-up and detailed look at all elements of CSS and HTML, you need to use Notepad++ and Google Chrome
  • Click on this link to see the finished product for Winchester Canyon Flowers and Gifts
    Winchester Canyon Floral and Gifts
  • In this lesson you will work with the two files listed below.
  • The first file is the HTML file. It is a template for the flexible box model. Flexible Box Model
  • The second is a .css file which handles all the formatting of the content of your web-based newsletter. Main3.css file

    Materials to Collect

    1. Check out web sites for similar newsletters
    2. Check out example newsletters.

      Theme Parks Unlimited
    3. Collect digital pictures if needed for your newsletter. Right-click the images and choose Save image as
    4. Save them in the .jpg file format. This works quite well for our newsletter.
    5. Here are some of the pictures used in our finished newsletter.
    Pictures used in Winchester Canyon Newsletter

    Teacher's Responsibility

  • At beginning of each week of this lesson, handout Progress Logs to help in the evaluation of the project by your IT students.
  • Print out Cathy's Department Template From Janet's Web Site Helpful Forms-Forms, Templates and Letters

  • Printout VE Progress Logs from Janet's Web Site Helpful Forms-Forms, Templates and Letters
  • Fill out the Department Template for IT Department. -What do you want them to accomplish each week. These Department Templates appear on the right-hand side of your screen if you choose to use these plans.

  • Make a copy of the Department Template for the IT manager and give the Department Templates to the CEO.

  • CEO gives out Department Template to department head.

  • Department head gives out Progress Logs to each employee and from the Department Template and the workflow assigns each employee the tasks for the week.

  • Employee accomplishes the work assigned and fills in information on the Progress Log.

  • Completed Progress Logs for each employee are given to the department VP at end of week.

  • Department heads turn progress logs over to CEO.

  • CEO turns over progress logs to teacher.

  • Collect student work at the end of each week.
  • Record students test score at the completion of the unit. Tests are located under Step By Step Tests.

    • Step-By-Step Instructions

    HTML5 Newsletter
    Printer Friendly Version Week 1

    Day 1:

    The top few lines of the HTML file


    1. Follow these instructions to obtain a copy of the two files needed for this lesson
    2. To obtain the Flexible Box Model.html file, proceed as follows.
      • Click on Flexible Box Model Link in the Tutorial Section
      • Right Click on the page after it loads.
      • Click on view Page Source.
      • Drag the whole page to highlight it
      • Type CRTL + C to put the lines of code on the clipboard.
      • Open Notepad++
      • Click on File - New
      • Type CTRL + V to paste it into Notepad++
      • Click on File Save AS - Find a location to store the file - give it a name like Flexible Box Model.html
      • Use HTML for the Save AS type
      • Click Run
      • Click Launch in Chrome.
      • Click on the magnifying glass below. It should look like this.
        Flexible box model

      Video on Downloading the Flexible Box model
    3. To get the Cascading Style Sheet file Follow these steps.
      • In the Tutorial Section of the newsletter Lesson, Click on main3.css
      • After it opens, Right-Click
      • Select SAVE AS
      • Choose location for file to be saved.
      • Keep same File name and File Type.
      • Click Save.
      • Open it in Notepad++.

      Downloading the cascading style sheet video
    4. Let's examine the top few lines of the flexible box model.
    5. Go Back to Notepad++ to examine the lines of code.

    6. You must use Google Chrome to see the flexible box model as it is intended.

    7. Other browsers simply vertically align the boxes.
    8. The first line identifies this document as an HTML5 application.
    9. The second line tells the browser that the language used is English.
    10. The third line begins the <head> part of the document. This is where style sheets are set up, javaScript and information for search engines.
    11. The next line tells the bowser what character set to use.
    12. The <Title> is where the The title of the document is put. This title shows up on top of the tabs used in today's browsers.
    13. The title tag also is used by search engines.
    14. The </Title> ends the tag.
    15. The last line is a link to the file that formats the page. It is a cascading style sheet file and essential to the proper formatting to the web page.

    Laying out the page

    1. We will be using the flexible box model for this exercise.
    2. The flexbox model is a layout system which helps us layout our web page.
    3. It creates a flexible layout for us in which the browser does all the calculations for us as to height, width, and placement.
    4. The flexbox model is especially useful when working with different screen sixes like tablets and call phones.
    5. In the past, tables were used to organize the layout of a page
    6. Next came a fixed box model using <div> tags with fixed heights and widths.
    7. Numerous calculations were necessary to calculate how the boxes fitted together to create a layout.
    8. This model that we will be using has two columns. One is flexible and the other fixed.
    9. HTML and CSS3 have a different way of laying out the page
    10. Let's look at the file that formats these new tags
    11. It is called main3.css
    12. We are looking at just a part of the file that relates to these new tags.
    13. The scroll box above shows these new tags.
    14. All of these elements are used to layout a page using HML5
    15. Each element is separated by a comma and the information inside the curly braces tells the different browsers how to render these tags.
    16. This particular line tells the older browsers to display all these newer elements vertically or blocked.

    Layout 1 Video

    The Flexible Box Model

    1. Now lets examine the html flexible box model file to see how the page is layout
    2. We want to identify all of these sections
    3. Different colors, both background and borders are used to help you see where these sections are.
      Flexible box model


      Cascading Style Sheet File
    4. Clicking on the top magnifying glass allows you to view the flexible box model in its own window.
    5. Try resizing the window. Make it smaller. Make it larger
    6. What happens?
    7. Notice the width of the side news column,the blue color box does not change
    8. The width of the other column does change.
    9. Now lets find the different parts that layout our page.
    10. The big green border around the whole page is the body tag.
    11. If you click on the Cascading Style Sheet magnifying glass you will see the contents of that file
    12. Scroll down until you see the body formatting.
    13. You will see that it has a 5 pixel solid green border.
    14. To see the code for the html flexible box model, click on the magnifying glass then right-click on the form, then view the source.
    15. Scroll down until you see <body> tag.
    16. As you can see the two files work together to obtain the desired effect.
    17. The outside_wrapper , <div ID="outside_wrapper">,tag is a solid red border which goes around the entire page.
    18. Go back and forth between the two files until you can see how they work together.
    19. Look at the <Header ID="top_header">tag. It has a yellow background with a 3 pixel solid black border.
    20. This header is where the company name and logo would go in your newsletter or any other text or pictures you want.
    21. The <Nav id="top_menu">tag is the navigation bar. The background is dark blue, the text is white and border is orange. Here is where you would put links to the other pages of the newsletter.
    22. Flip back and forth between the HTML and Cascading Style sheet files to see the html tag and the formatting in the css file.
    23. Divisions are similar to Sections. The div tags usually are on the outside of section tags.
    24. Section tags are part of HTML5.
    25. Division, <div> were part of previous versions of HTML, but work with HTML5
    26. The term that describes how older tags work with newer releases is called backward compatibility.
    27. <div id="new_div"> has a pink background and goes from just under the navigation bar to the beginning of the footer.
    28. <Section ID="main_section"> has a solid blue border. It covers both columns - the articles and the side news.
    29. Notice that in the flexible box model html filr that each beginning tag has a corresponding ending tag.
    30. The ending tags have a"/" contained inside the tag.
    31. For example, <section id="main_section"> has and ending tag the looks like </section>.
    32. Both articles have their own headers and footers.
    33. These boxes can be used for writing about anything. In the Winchester Canyon Flowers and Gifts newsletter, the first article layout box was used to communicate what to expect at the Bakersfield trade show.
    34. The second article box contains the schedule of events for the trade show.
    35. You may use them for any pertinent data that goes on in your company: grand openings, open houses, employee of the month, new regulations affecting employee, seminars, training available, etc.
    36. To see the finished newsletter, click on the link located in the beginning of this tutorial.
    37. The <Aside id="side_news"> has a red border and an background that is aqua in color.
    38. It was used as a section that is fixed in width - not flexible and holds information about what is happening in each department.
    39. <Footer id="the_footer"> is a green border and contains things like copyright information, etc. Graphics can also be added in as a part of the footer.
    40. IDs are very important in designing layout of a page. By using IDs, you can zero in on a particular element and customize the look of the document.

    Layout 2 video

    Day 2:

    Color Selection


    1. The colors used in the flexible box model are awful.
    2. These colors were used only as a tool to help you identify the different layout parts.
    3. Now it is time for you to find the colors you want to use in you newsletter
    4. Do you already have company colors?
    5. Do you want the colors to match the web site . booth colors or sales catalog?
    6. Look at the information below
    7. It is designed to help you determine what colors and borders for your newsletter.

      The following list examines the meaning of colors

    8. Red - Energy, passion, action, strong, masculine.
    9. Orange - Social communication and optimism
    10. Pink - Love, unconditional love, nurturing
    11. Yellow - Optimistic, cheerful
    12. Green - Balance and growth
    13. Blue - Color of trust and peace.
    14. Indigo - Intuition
    15. Purple - Imaginative, seek meaning of life, spiritual fulfilment
    16. Turquoise - Communication, clarity of mind.
    17. Magenta - Universal harmony and emotional balance
    18. Brown - Down-to-earth, security, material wealth
    19. Gray - Compromise, neither black or white.
    20. Silver - Feminine, energy
    21. Gold - Success, achievement, lucky, quality
    22. White- Complete, pure, color of perfection, purity, innocence
    23. Black- Secretive, hidden, unknown, mystery

    The following list examines the psychology of colors

    1. Adolescents like complex colors. They are used to playing video games with computer graphics
    2. Girls like shades of purple and pink. AS they get older they also like black
    3. Boys favor blue, turquoise, green, yellow, black, white, gray and silver.
    4. Serious business colors include darker colors like dark blue, dark green, indigo, black and gray
    5. Casual business colors are light hearted, bright red, orange, yellow, bright green, bright blue, pink and purple
    6. Some color preferences are climate based. For example, California favors bright and warm colors
    7. Eastern part of country prefers colder, cool colors.
    Comprehensive color chart from http://web.njit.edu/~kevin/rgb.txt.html

    The following list examines color palettes

    1. You want colors that go together and are pleasing to the eye. Here are a few palettes
    2. Palette one
      • #404040 - Dark gray
      • #6dbdd6 - Light blue
      • #b71427 - Dark red
      • #ffe658 - Light yellow
    3. Palette two
      • #558c89 - Light teal
      • #74afad - Blue gray
      • #d9853b - Light brown
      • #ececea - Light gray
    4. Palette three. You decide what colors are in palette three. Turn answers in with progress log
      • #191919
      • #df3d82
      • #ffffff
    5. Palette four. You decide what colors these represent. Turn in you answers in with your progress log,
      • #585858
      • #118c4e
      • #c1e1a6
      • #ff9009
    6. You should also examine the fonts used. Make sure that they are readable.
    7. I know there are so many to choose from. Try to find those that match your company image.
    8. Decide on body, outside wrapper, top_header, menu bar side news, and footer, etc.
    9. Finalize your cascading style sheet file and save it with the colors and fonts you want.
    10. Save your HTML file before entering data into the boxes.
    11. This will be your new template used to create each page of your presentation.

    Day 3:

    Keying the information contained in top header and Navigation bar of the newsletter - Page 1

    1. Put your company name and some graphic in the top_header.
    2. I also identified the document as a newsletter for November.
    3. Remember, the Human Resources should make a newsletter each month.
    4. Make menu bar using links to four pages.
    5. See Winchester Canyon Florist example
    6. I used Winchester Canyon.html as the link name for page 1.
    7. <a href="Winchester Canyon.html" Title=" 1. Bakersfield Trade Show- What to expect. 2. Department staff members duties 3. Trade Show Schedule" >Page 1</a>
    8. See how the title looks. It is used to identify what is contained on page 1.
    9. When the user hovers over the link, the title displays.
    10. I pressed enter after each of the numbered items, so that each would appear on its own line.
    11. It is a good idea to put in the title tags for the other pages in at this point, otherwise you will have to redo them for each page.
    12. It is also a good way to organize your thoughts as to what items, and what pages they go on.

    Colors, Top Header and Navigation Bar Video
    Day 4:

    Keying the information contained Article 1 - Page 1

    1. Fill in your headlines 1 and 2 in the main section.
    2. This is where the headlines go for Article 1
    3. See example below. It contains a main headline and a secondary one. It also contains an image.
    4. <Section id="main_section">
      <Article>
      <Header>
      <h1>Bakersfield Trade Show</h1>
      <h2>What to expect</h2>
      <img src="trade.jpg" align=right height=200 width=200 border=1>
    5. The <p> signifies a paragraph.
    6. <strong> is used to bold the word between the beginning and ending tags.
    7. There two kinds of lists in HTML. The ordered list and the unordered list.
    8. The ordered list , <ol> numbers each list item
    9. The unordered, <ul>, list uses bullets
    10. The <li> makes each list item.
    11. Make sure that you the ending tag for each when you are finished making list items : </ol> and </ul>.
    12. There is a footer for article one. Below is and example of one might look like.
    13. The footer is a good place to give credit to the person who wrote the article.
      <Footer>
      <Center><p>Written by Wendy Smith, Event Planner </p></center>
      </Footer>
      </Article>

    Article 1 Video
    Day 5:

    Keying the information contained article 2 - Page 1


    1. Follow the instructions above. Article 2 is formatted and set up the same way.
    2. Determine what information you want to present in his section of the newsletter.
    3. Do you want it to be in a list format?
    4. Develop headers and footers for article 2.
    5. Winchester Floral used article two to convey the schedule of events or agenda of the Bakersfield trade fair

    Article2/Side News Video

    Printer Friendly Version Week 2
    Day 6:

    Keying the information contained in Side News - Page 1


    1. Because the side news or aside box is a dark blue, it looks much better to use what as the color of the text.
    2. Other light colors would also work.
    3. Remember if you have a dark background, use a light color for the text.
    4. If using a light background, use a dark color for the text.
    5. As you can see from the example below, you can infuse style concepts directly in front of the text you want to change.
    6. <p style="font-family: Helvetica;font-size:14px;font-weight:bold; color:white">
    7. The side news box was use to list the special trade fair deals.
    8. As you can see there are 4 different promotional packages


    Day 7:

    Keying the information contained on page 2


    1. The first article on page 2 is the employee of the month. I used the name of our chief financial officer as the winner.
    2. A picture was included.
    3. You would want to shoot a nice digital picture for this article,
    4. I made general comments about Julie Kramer: grade point average, college plans, part time work, participation in sports, etc.
    5. The next section was an ordered list an each part of what she did in November was listed as a separate item.
    6. Lastly, the footer, contains the name of the person who wrote the article and their title.

    1. The second article on page 2 is entitled Flower Facts
    2. I found it on the Internet.
    3. It is good for florists to know what flower goes with what month.
    4. Winchester Canyon Floral will feature the December Flower of the Month, ,Narcissus, for the trade fair in December along with some balloons and a gift basket.
    5. The headline is Flower Facts
    6. The secondary headline is Targeted Selling By the Month.
    7. The data is presented in tabular form.
    8. The Table Heading, Birth Month Flowers, spans 3 columns and is centered.
    9. Column one is contains the month and most of holidays that fall in that month.
    10. Column 2 is the name of the flower for that month ad some description.
    11. The third column contains an image of the flower for that particular month.
    1. The third section on page 2 is the Side News box It contains the specials offered during the trade show
    2. There four different packages.
    3. Each package contains flowers, balloons, and a gift basket
    4. Each package offers a discounted price when purchased at the trade show.
    5. Package 4 is a monthly subscription and includes a deluxe bouquet, three balloons and an assortment to gift baskets.
    6. Each package is arranged in tabular form.
    7. In package 4,an in-line style tag is used to highlight the month and flower using Tahoma font, bold and yellow in color.

    Day 8:

    Keying the information contained in page 3


    1. Article 1 is about Fund-raising
    2. A description of the car wash and bake sale was presented
    3. Images of some activity at the car wash was included.
    4. Baked goods were displayed as an image.
    5. Picture of team members who organized the event was included.

    1. Article 2, page 3 features a Team picture.
    2. A table containing staff members' names. positions, salary and duties is also included here.
    3. You might not want to show salaries, but each member knew in advance what those amounts were
    4. In most companies, salary information is confidential.
    5. The duties features a hover option where the job is described in some detail.

    1. Side News page 3 features important dates
    2. Included here is a clip art graphic showing how we remember dates. phone and memo pad.
    3. The important date were arranged in tabular form.
    4. Column one contains the dates of the event.
    5. Column two lists the names of the trade shows.
    6. The rest of the space is devoted to pictures of some of our department members:Accounting, Sales, and IT.


    Day 9:

    Keying the information contained in page 4


    Article 1 Field Trip page 4
    1. Headline is Field Trip
    2. Sub headline is Flower Grower.
    3. A picture of an orchid was included here.
    4. A story explaining about the trip and this major orchid distributor was keyed in here.

    Article 2 Thoughts from the Editor page 4
    1. Here is where the editor of the newsletter writes about anything he or she wants.
    2. In The example I used, the focus was on the accomplishments of all departments during the month of November.
      Side News- page 4
      1. I used this section of the page to explain a little about our gift baskets
      2. A general description was keyed in.
      3. Three package images wee displayed.
      4. A Title was added to each picture so that when the user hovers over the image a description of the basket would be provided.

      Day 10:

      Debug and Post Page to Server


      1. You will want to spell check all 4 pages.
      2. Check your Grammar.
      3. Check over Capitalization.
      4. Make sure all links work
      5. Check size of images. Are they two big or too small? Are they clear?
      6. Look over headlines 1 2 and 3
      7. Is there any need for in-line tags?
      8. Look at your cascading style sheet. Are any changes needed
      9. Look over tables and table data cells. Any changes in cellspacing or cellpadding?
      10. Are table borders appropriate? and the right size?
      11. Are all colors to your liking?
      12. Make sure that all four pages are linked to the cascading style sheet file