Directory for Mobile Web Page Plan
Getting images and copying files
Understanding the layout
Explaining Layout tags/Testing Layout
Making changes in CSS3 code
Adding HTML5 code for pizza parlor
Testing HTML5 code, making javascript file
Understanding Media Queries
Adding code to create media queries
Testing media query, change screen sizes
Testing the application on your phone

Getting Needed Files and Graphics for the Project

Day 1

Graphics needed for project

File name is cheese2.jpg File name is pizza.jpg File name is pizza9.jpg

File name is sausage.jpg File name is pizza6.jpg File name is pizza2.jpg

File name is pizza8.jpg File name is pizza11.jpg File name is Cook2.jpg

File name is sideorder.jpg File name is sideorder2.jpg File name is sideorder4.jpg

File name is bigCookie.jpg File name is brownies.jpg File name is coffeCake.jpg

File name is cinnamonBuns.jpg

Right-Click each image.
Select Save image As from list
Keep the file name the same, delete the parentheses and number inside before saving the file.
If you pass your mouse over each image before saving, you will see what the file names should be.
Make sure that the images are stored in the same folder as your flexible box model. Getting the html 5 file for the flexible box model
The first file needed is flexible box model template.html.
The second file is called FBM.css

HTML5 code for the flexible box model template Code for FBM.css cascading style sheet

<!DOC TYPE html>
<html lang="en">
<Head>
<Meta char set="utf-8"/>
<Title> Flexible Box Model</Title>
<!--
<Link Rel="StyleSheet" href="FBM.css">
-->

</head>
<body>
	<div id="big_wrapper">
<Header id="top_header">
<br>
<br>
<br>
<br>
<br>
<H1>Welcome</H1>
</Header>
<Nav id="top_menu">

<li>Home
<li>About
<li>Our Products
<li>Contact us

</Nav>
	<div id="new_div">
	
<Section id="main_section">
	<Article>
		<Header>
			<h1>Title of Article 1</h1>
			<h2>Subtitle of Article 1</h2>
		</Header>
<P>This is the beginning of the article</p>

<Footer>
			<p>Written by </p>
		</Footer>
</Article>






<Article>
		<Header>
			<h1>Title of Article 2</h1>
			<h2>Subtitle of Article 2</h2>
		</Header>
<P>This is the beginning of the second article</p>

		<Footer>
			<p>Written by </p>
		</Footer>
</Article>
</Section>






<Aside id="side_news">
	<header>
<H3>Headline of Side News</h3>
</header>

</p>
</p>
<P>This is the beginning of the side news article</p>
<footer>
written by Jerry
</footer>
</Aside>


</div>

<Footer id="the_footer">
			
</Footer>
</form>
</div>
</Body>
</html>

#big_wrapper{
		max-width:1000px;
		margin:20px, 0px;
		border:1px solid orange;
		display:flexbox;
		
	
	
		
		
		background:#ffffff;
	}
	
	body{
	width:100%;
	border:1px solid blueviolet;
	
	display:flexbox;
	
	
		}
	
	#top_header{
		background:#ececea;
		border:3px solid black;
		padding:40px;
		}
	#top_menu{
		border:1px solid red;
		background:#ececea;
		color:black;
	
	}	
	
	#top_menu li{
		display:inline-block;
		list-style:none;
		padding:5px;
		font:bold 14px tahoma;
		
	
	}
#new_div{
    border:5px solid blue; 
	
	
	display:flex;
	
	
	
	
	}	

#main_section{
	
	border:3px solid black;
	
	
	
	
	
	
		margin: 5px;
	padding:10px;
	background:#4682b4;
}	
#side_news{
	border:3px solid red;
	
   //width:320px; set width if you want this box fixed not flexible
	
	
	margin:0px;
	padding:40px;
	background:#ececea;


}
#the_footer{
	text-align:left;
	padding:20px;
	border-top:solid green;
}

	em	{font-weight:  bold;
		color: navy
		}
		
	h1{ 
	font-family : tahoma,  helvetica,  sans-serif 
	}
	
	h2{
		font:bold 18px Times New Roman;
		color:#ff0000;
	
	}
	h3{
	
		font:Italic 14 px Comic Sans;
		color:#006400;
	
	
	}
	
	p{
	font-size: 12 pt;
		font-family : arial , sans-serif }
		
		
	p.special    
	{
		font-family: tahoma;
		font-size:14pt;
		color:  #a9a9a9;
		font-weight:bold;
	}
	
	p.large
	{
		font-family:Verdana, Arial, Helvetica,sans-serif;
		font-size:18;
		font-weight:bold;
		color:#ff00ff;
	}

Getting the HTML5 File

Highlight all of the text in the first scroll box above- the one on the left.

Hold down the CRL KEY and then press C to put the file on the clipboard.

Open Notepad++

Select New File

Paste the file into Notepad++

Save the file where your store your documents with a .html extension so that the browser recognizes it as a web page format.

A good name might be Pizza.html

Getting the Cascading Style Sheet File

Highlight all of the text in the second scroll box above- the one on the right.

Hold down the CRL KEY and then press C to put the file on the clipboard.

Open Notepad++

Select New File

Paste the file into Notepad++

Call your file FBM.css

You must keep the same file name if you want it to be linked to the html5 file.

What does our web page look like?

Using Notepad++ open the flexible box model template
Click on Run and launch in Chrome, Internet Explorer of FireFox
Your screen should look like this
As you can see, no formatting is being applied.
That is because, the cascading style sheet file has not yet been linked.
Find the lines in the html5 file - flexible box model template.html near the top of the text, that refer to linking the file to FBM.css.
Do you see the  symbols. These comment out the link to the file.
Remove these symbols , save the file and launch it in a browser.
The html page after applying the formatting from the FBM.css file appears below.

Understanding the layout style

Day 2

Let's examine the layout of this flexible box model.
The code is in the scrollable boxes just under the images of pizza, drinks, side orders and desserts.
Remember the scroll box on the left shows the coding for the hTML5 file
The scroll box on the right is the code for the style sheet file.
This is only one example of a flexible box model and the different boxes can be arranged in a number of ways.
There is an small orange border around the whole application. This is called the #big_wrapper
The #body is a surrounded by a blue violet border.The body is the central area in the graphic.
The #top_header has a black border and is located on the top of the page. It is means for company name, logo. Currently it has the word "Welcome" inside of it. It's color is gray.
The #top_menu is a long narrow gray box with the navigational words listed: home, about, our products and contact us. It is the way we will navigate the site.
The #top_menu li is part of the top_menu box. It is used to display our navigational words as an in line list.
The #new_div is a major break in the page. It separates the top half from the bottom half of the page, It is outlined in a blue border.
The #main_section is blue and has a 3 pixel black border around it.
#side_news is the column on the right. Its background color is gray.
#the_footer is meant for copyright and contact information. It is has a top, green border .

Seeing What the flexible model does.

Drag the screen to s smaller size and see what happens.
Each flexible box should change in size and push its contents down.
Boxes that are not flexible do not flex. Header. Menu and footer do not flex.
Below is an example

Code for Flexible Model Template File

Explaining the code in the layout tags

Day 3

Let us examine the html5 code in this flexible box model template
The first line <!DOC TYPE html> identifies this file as HTML5 as opposed to earlier versions
The next tag sets the language to English
The < Meta char set="utf-8"/> tells the browser which character set to use.
The title is next. Note beginning and ending title tags. Titles are used by search engines to find your site.
The big_wrapper, body, top_header, top_menu, top_menu li, main_section, side_news, the_footer are all sectioning elements that tell the browser how to layout the page.
These actual sections appear in the html part of the document.
If you scroll down through the code above to the <body> tag you will see these sections listed below,
Other tag format headlines, special paragraph styles.
A very important line links the html sheet to a cascading style sheet file <Link Rel="StyleSheet" href="FBM.css"> The Style Sheet file is listed above and below. It is called FBM.css The instructions in this file, tell the html page how to look in terms of color, fonts, margins, borders, images, size of box - fixed or flexible.
HTML5 code for the flexible box model template Code for FBM.css cascading style sheet

<!DOC TYPE html>
<html lang="en">
<Head>
<Meta char set="utf-8"/>
<Title> Flexible Box Model</Title>

<Link Rel="StyleSheet" href="FBM.css">


</head>
<body>
	<div id="big_wrapper">
<Header id="top_header">
<br>
<br>
<br>
<br>
<br>
<H1>Welcome</H1>
</Header>
<Nav id="top_menu">

<li>Home
<li>About
<li>Our Products
<li>Contact us

</Nav>
	<div id="new_div">
	
<Section id="main_section">
	<Article>
		<Header>
			<h1>Title of Article 1</h1>
			<h2>Subtitle of Article 1</h2>
		</Header>
<P>This is the beginning of the article</p>

<Footer>
			<p>Written by </p>
		</Footer>
</Article>






<Article>
		<Header>
			<h1>Title of Article 2</h1>
			<h2>Subtitle of Article 2</h2>
		</Header>
<P>This is the beginning of the second article</p>

		<Footer>
			<p>Written by </p>
		</Footer>
</Article>
</Section>






<Aside id="side_news">
	<header>
<H3>Headline of Side News</h3>
</header>

</p>
</p>
<P>This is the beginning of the side news article</p>
<footer>
written by Jerry
</footer>
</Aside>


</div>

<Footer id="the_footer">
			
</Footer>
</form>
</div>
</Body>
</html>

#big_wrapper{
		max-width:1000px;
		margin:20px, 0px;
		border:1px solid orange;
		display:flexbox;
		
	
	
		
		
		background:#ffffff;
	}
	
	body{
	width:100%;
	border:1px solid blueviolet;
	
	display:flexbox;
	
	
		}
	
	#top_header{
		background:#ececea;
		border:3px solid black;
		padding:40px;
		}
	#top_menu{
		border:1px solid red;
		background:#ececea;
		color:black;
	
	}	
	
	#top_menu li{
		display:inline-block;
		list-style:none;
		padding:5px;
		font:bold 14px tahoma;
		
	
	}
#new_div{
    border:5px solid blue; 
	
	
	display:flex;
	
	
	
	
	}	

#main_section{
	
	border:3px solid black;
	
	
	
	
	
	
		margin: 5px;
	padding:10px;
	background:#4682b4;
}	
#side_news{
	border:3px solid red;
	
   //width:320px; set width if you want this box fixed not flexible
	
	
	margin:0px;
	padding:40px;
	background:#ececea;


}
#the_footer{
	text-align:left;
	padding:20px;
	border-top:solid green;
}

	em	{font-weight:  bold;
		color: navy
		}
		
	h1{ 
	font-family : tahoma,  helvetica,  sans-serif 
	}
	
	h2{
		font:bold 18px Times New Roman;
		color:#ff0000;
	
	}
	h3{
	
		font:Italic 14 px Comic Sans;
		color:#006400;
	
	
	}
	
	p{
	font-size: 12 pt;
		font-family : arial , sans-serif }
		
		
	p.special    
	{
		font-family: tahoma;
		font-size:14pt;
		color:  #a9a9a9;
		font-weight:bold;
	}
	
	p.large
	{
		font-family:Verdana, Arial, Helvetica,sans-serif;
		font-size:18;
		font-weight:bold;
		color:#ff00ff;
	}

Let us examine the structure of a style sheet tag in the FMB.css file.
- #big_wrapper is the name of our first section. It represents a large box the encircles the entire web page.
- The curly braces encompass the properties.
- The left one { begins the list of properties.
- The right one } end the list of properties.
- Be extremely careful when using them. It is easy to forget one or end up with too many.
- When making a style sheet , I type the first brace and then immediately type the second brace. Then backup a space and press enter a number times to leave room for the formatting descriptors.
- Next you set the properties for this sectioning element in terms of pixels width, margins, borders.
- The line that states display:flexbox; indicates that this layout flexes and is not static.
- The body is also a flexbox with a blue violet border around it.
- The #top_header is a light gray with a black background. Currently the word Welcome is in the box. It will be used for our company name and logo and other images.
- The top_menu is the area where our navigational text goes to get to other pages - links to other parts of our web page. It is also gray in color. black text with a red border.
- The #top_menu li contains the formatting codes for our navigational system. It is laid out as a inline-block, with 14 pt Tahoma font for the text. The list style is none. This refers to bulleted or numbered items in a list. We do not want them here. The padding refers to the spaces between the words - Home-about, etc.
- The #new_div is a major formatting code, which divides the top half from the bottom half of our page. It is a flexible element
- The #main_section is blue with a black border and contains two articles, their headings, subheadings and footers.
- The #side_news is gray with a red border.
- The #footer has a top border which is green. If there were in here, it would be left aligned.
- The other formatting codes as you can see form the coding above, deal with headlines, special paragraph formatting, emphasising text.

Making changes in CSS3 code - file FBM.css

Day 4

We are going to change background images, add the company name to the top header, background color of top_menu, change the font of menu list items, change background color of main_section, use the paragraph p.special class to emphasize text.

Let's make some changes in the styling code of our page so we can better understand how it works.
Remember to save the file after making changes. Then test by clicking on the HTML file name, RUN and then launch in the browser of your choice.
Do not run the CSS3 file. You want the html5 file. No harm will come, however, I have made that mistake many times.
To make changes in the background images in the header, follow these steps.
- You can use the graphics that I have provided for you or choose your own.
- If you choose your own, select a graphic you want to use. Remember that this is a pizza place.
- Save it in your work folder.
- It will probably need to be resized.
- Microsoft's Paint program which is in the accessory group that goes with Windows. works well for this. You may, however, use any program you wish to resize the image.
- In Paint, here are the steps.
  1. All Programs
  2. Accessories
  3. Paint
  4. When paint loads, Open File
  5. File Name
  6. Enter name of picture file you want to resize.
  7. Open
  8. Resize icon - click.
  9. Click Radio Button to change to pixels.
  10. Uncheck maintain aspect ratio box.
  11. Use 100 pixels for horizontal and 117 for vertical size.
  12. Click OK
  13. File - Save As .jpg
  14. Select work folder.
  15. Click Save.

Changing the background Image

Locate the #top_header section in your CSS3 code again
The background color is #d3d3d3 which is a light gray. Currently there is no background image.
The background color of the big_wrapper is a pumpkin color or dark gold.
Locate the #top_header section in your css3 file.
Replace the this section with the following code.

#top_header{
		background:#d3d3d3;
		border:3px solid black;
		padding:30px;
		background: url(Cook3.jpg) 15px 15px no-repeat,
					url(pizza5b.jpg) 250px 45px no-repeat, 
					url(drink2b.jpg) 350px 45px no-repeat,
					url(sideOrder4b.jpg) 450px 45px no-repeat,
					url(bigCookie.jpg) 550px 45px no-repeat;
					
		
		}

Use Save As to save the css3 file under a different name. Call the fileUpperCrustFull.css
We need to change the link now in our HTML file. <Link Rel= "StyleSheet" href="UpperCrustFull.css">
Save your html file.
Now run and launch your Pizza.html file in your browser.
How did it look?
Was it the image in the correct position? The first number for each image, is the horizontal position of the image, the second number is the vertical position in pixels.
The no-repeat tells the browser not to repeat the picture a bunch of times.
When using a background image tag, the background color is pre-empted and will not show, but the big_wrapper color is still there.
As you can see, you may use multiple images in your background. Just remember to space them out.
Remember if you want multiple background images the first ones are followed by a comma instead of a semicolon, which is reserved for the last image.
These images that appear above have already been resized and as you can guess; show the company logo, picture of a pizza, drinks, side orders and a big cookie.
You will also note, that the word "Welcome" is also in the top header. You should change it to the name of your company, which is Upper Crust Pizzeria. Remember this text is in your html5 file.
Here is what your Pizza.html file should look like after it is linked to your UpperCrustFull.css file.

Changing the background color of the #top_menu

Locate the #top_menu section in your cascading style sheet file UpperCrustFull.css.
Currently the background color is #eceacea which is a very light gray. Replace it with #de553c; which is a reddish orange color.
Save file
Launch html file in browser.
The box that surround the menu choice of Home, About, Our Products and Contact Us should be reddish orange.

Changing the font in the #top_menu li

Locate the section #top_menu li in your CSS3 code.
Currently the font is bold 14px tahoma;
Change this to bold 18px Verdana
Save and Test
The padding represents the space between the words. Experiment with padding number of pixels to get correct spacing of menu items.

Changing the background color of the #main_section.

Change the color of the main section to #87CEFA which is light sky blue.

Using a special paragraph tag to emphasize text in your documents.

Find the section of styling code that says p.special in your style sheet file.
As you can see the font family is tahoma, font-size is 14px, the color of the text is #a9a9a9 and it is bold.
Change the font name to Helvetica, size 16px and #ff6347 which is tomato.
Save file
Now in the HTML code locate <Article>. it is just beneath the <section id="main_section">
We want to apply this special paragraph style to the sentence that says This is the beginning of the article.
Key in <p class="special"> in front of the sentence. Put the ending tag on the end of the sentence, </p>
Change the sentence to say Our pizzas are the best in town.
Save it and test it.
Experiment with different colors fonts and styles until you are comfortable with this concept.
Notice that there is also a paragraph style called p.large
You can easily create these classes for your own sites. Just follow the procedures outlined above.
Remember you need to work in the CSS file to define the formatting and the html file as to where you want it placed.
Come up with a pleasing color scheme. You can change background colors and borders.

Adding HTML code to make page a pizza parlor

Day 5

CGI Script for Form Mail

The next line that needs to be added is one that calls a CGI script on the server.
You will need to contact the folks that host your site for this script.
For now insert my script into the HTML code just after the beginning body tag.
<Form name="Form" action http://www.janetbelch.com/cgi-pub/formmail/method=post>
This script sends me an email with the results of the customer's order.
You can also use the MailTo tag. See other web tutorials on this site for the code.
Do not try to test this yet as there is more coding to be done later.

Now we need to make changes to our navigational menu.
We are not going to make them operational, but we need to change the appearance of our mobile application.
Look through your html code section for the <Nav id = "top_menu">
In the listing of menu options replace About with Job Opportunities
The Home choice remains unchanged
Replace Our Products with About our Company
Create a menu item for Locations
Save file and run Pizza.html.

Organization of the page

This mobile application page is organized in the following way
- The top header contains the logo, company name and pictures of some of our products.
- There is a top menu where our navigation links are placed
- The main section contains two articles and a side news. All are flexible boxes
- The first <Article> is reserved for the most popular pizza offered by Upper Crust
- The second <Article>: is for Speciality pizzas.
- The #side_news is reserved for drinks, side orders and desserts.
- The footer is where we will put customer and delivery information.
You will place your HTML code in each of these areas.

Headlines for Article 1

Locate <h1>Title of Article 1
Replace the headline text with "Most Popular Pizzas"
Replace <h2>Subtitle of Article 1 with "Small is $10.95, Medium is 12.95 and Large is $14.95"
Save and test

Table with images and pizza choices

Article 1: Most popular pizzas

Now we are going to put into the HTML section a way for our customers to order on line our pizzas
We will present the data in a tabular form.
Our first most popular pizza is just cheese.
First we create a table with cell spacing 3 cellpadding of 3 and a border of one pixel with the following code.
<Table cellspacing=3 cellpadding=3 border=1>
Next, we create a heading for our table
The single table data cell <td> contains the <img src> tag for the picture its height and width and a title that appears when the user passes the cursor over the picture. a <br> makes a break before the radio buttons which are used to select the size of the pizza desired.
When the table data is completed it is followed by an ending table data tag, <TD> a </TR> and and ending table tag <Table>.
The input type button line of code,makes a button on your screen and the word "Buy" appears in it
When the user clicks on it calls a javaScript function in our javascript file called Checkout3.js
The code in the javaScript code calculates the cost of the order.
We will look at that file a little later.
Copy the information below for Thin Crust Pizzas and paste it into the HTML file, just after the ending <p class="special"> tag for article 1
Save and test html file.
<Table cellspacing=3 cellpadding=3 border=1> <TR><Th colspan=2><h2>Our Thin Crust Pizzas</h2></Th></TR> <td><img src="cheese2.jpg" height=120 width=120 Title="Our special cheese pizza" ><br> <input type="radio" name="sizeCheese" value="smallCheese">Sm<br> <input type="radio" name="sizeCheese" value="mediumCheese">Med<br> <input type="radio" name="sizeCheese" value="largeCheese">Lg<br> <h2>Cheese Pizza</h2> <input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)"> </td> <td><img src="pizza.jpg" height=120 width=120 Title="The best pepperoni pizza you have ever tasted."><br> <input type="radio" name="sizePepperoni" value="smallPepperini">Sm<br> <input type="radio" name="sizePepperoni" value="mediumPepperoni">Med<br> <input type="radio" name="sizePepperoni" value="largePepperoni">Lg<br> <h2>Pepperoni Pizza</h2> <input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)"> </td> </tr> </table>
This is what your html file should look like after this change.

Headlines for Article 2

Locate <h1>Title of Article 2 in your Pizza.html file
Replace the headline text with "Speciality Pizzas"
Replace <h2>Subtitle of Article 2 with "Small is $16.95, Medium is $17.75 and Large is $18.95"
Delete the line that states is the beginning of the second article.
Save and test

Copy the information below for Thick Crust Pizzas and paste it into your HTML file, just after the previous table for thin crust pizzas.
Save and test

<tr><th colspan=2><h2>Our Thick Crust Pizzas</h2>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
</td></tr>

<td><img src="pizza9.jpg" height=120 width=120 Title="Made with only the top-quality sausage, seasoned to perfection."><br>
<input type="radio" name="sizeThickCheese" value="smallThickCheese">Sm<br>
<input type="radio" name="sizeThickCheese"  value="mediumThickCheese">Med<br>
<input type="radio" name="sizeThickCheese"  value="largeThickCheese">Lg<br>
<h2>Cheese Pizza<br>Thick Crust</h2>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">

</td>



<td><img src="sausage.jpg" height=120 width=120 Title="Made with only the top-quality sausage, seasoned to perfection."><br>
<input type="radio" name="sizeThickSausage" value="smallThickSausage">Sm<br>
<input type="radio" name="sizeThickSausage"  value="mediumThickSausage">Med<br>
<input type="radio" name="sizeThickSausage"  value="largeThickSausage">Lg<br>
<h2>Sausage Pizza<br>Thick Crust</h2>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
</td>


</tr>

</tr>

</table>

Table with images and pizza choices

Article 2: Speciality Pizzas


<Table cellspacing=3 cellpadding=9 border=1>
<TR><Th colspan=2><h2>Our Thick Crust Pizzas</h2></Th></TR>
<td><img src="pizza6.jpg" height=120 width=120 Title="Extra Cheese and Black Olives"><br>

<input type="radio" name="sizeCheeseOlives" value="smallCheeseOlives">Sm<br>
<input type="radio" name="sizeCheeseOlives" value="mediumCheeseOlives">Med<br>
<input type="radio" name="sizeCheeseOlives" value="largeCheeseOlives">Lg<br>
<h2>Extra Cheese<br>& Black Olives</h2>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
</td>

<td><img src="pizza2.jpg" height=120 width=120 Title="Pepperoni & Onions"><br>
<input type="radio" name="sizePepperoniOnions" value="smallPepperoniOnions">Sm<br>
<input type="radio" name="sizePepperoniOnions" value="mediumPepperoniOnions">Med<br>
<input type="radio" name="sizePepperoniOnions" value="largePepperoniOnions">Lg<br>
<h2>Pepperoni<br>&Onion</h2>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
</td>
</tr>
</table>
<Table cellspacing=3 cellpadding=5 border=1>
<TR><Th colspan=2><h2>Our Deep Dish Pizzas</h2></Th></TR>

<td><img src="pizza8.jpg" height=120 width=120 Title="Mushroom & Bacon"><br>
<input type="radio" name="sizeMushroomBacon" value="smallMushroomBacon">Sm<br>
<input type="radio" name="sizeMushroomBacon" value="mediumMushroomBacon">Med<br>
<input type="radio" name="sizeMushroomBacon" value="largeMushroomBacon">Lg<br>
<h2>Mushroom &<br> Bacon</h2>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
</td>

<td><img src="pizza11.jpg" height=120 width=120 Title="Veggie"><br>
<input type="radio" name="sizeVeggie" value="smallVeggie">Sm<br>
<input type="radio" name="sizeVeggie" value="mediumVeggie">Med<br>
<input type="radio" name="sizeVeggie" value="largeVeggie">Lg<br>
<h2>Vegetarian<br>Pizza</h2>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
</td>
</tr>
</table>

Repeat the copy and paste procedure for speciality pizzas that go into article 2 section.

Drinks

Replace Headline of Side News with <h1>Drink Specials</h1>
Delete <P>This is the beginning of the side news article<p>
Copy and paste the information about drinks right after </header>
12 ounce drink is $1.00 22 ounce drink is $1.25 32 oz drink is $2.00 <br> Cola <br> <input type="radio" name="drinkSizeCola" value="cola12oz">12oz <input type="radio" name="drinkSizeCola" value="cola22oz">22oz <input type="radio" name="drinkSizeCola" value="cola32oz">32oz <br> <input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)"> <br> Iced Tea <br> <input type="radio" name="drinkSizeIcedTea" value="IcedTea12oz">12oz <input type="radio" name="drinkSizeIcedTea" value="IcedTea22oz>22oz <input type="radio" name="drinkSizeIcedTea" value="IcedTea32oz">32oz <br> <input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
Within a group of radio buttons, only one can be selected.
The radio buttons are used for the customer to select the size of cola drink they want.

Side Orders

Copy and paste the information about side orders just under the section on drinks.


<h1>Side Orders</h1>
<!-- French Fries-->
<img src="sideorder.jpg" height=100 width=100 border=1 Title="Small Fries $.99, Medium Fries $1.99, Large Fries $2.50">
<br>
Fries

<br><input type="radio" name="friesSize" value="smallFries">Sm
<br><input type="radio" name="friesSize" value="mediumFries">Med
<br><input type="radio" name="friesSize" value="largeFries">Lg
<br>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
<!-- onion rings-->
<br><br>
<img src="sideorder2.jpg" height=100 width=100 border=1 Title="Small Onion Rings $.99, Medium Onion Rings $1.99, Large Onion Ring $2.50">
<br>
Onion Rings
<br>
<input type="radio" name="ringsSize" value="smallRings">Sm
<br><input type="radio" name="ringsSize" value="mediumRings">Med
<br><input type="radio" name="ringsSize" value="largeRings">Lg
<br>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
<!-- Garlic Bread -->
<br><br>
<img src="sideorder4.jpg" height=100 width=100 border=1 Title="Small Garlic Bread $.99, Medium Garlic Bread $1.99, Large Garlic Bread $2.50">
<br>
Garlic Bread
<br>
<input type="radio" name="breadSize" value="smallBread">Sm
<br><input type="radio" name="breadSize" value="mediumBread">Med
<br><input type="radio" name="breadSize" value="largeBread">Lg

<br>
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
<br>

Save file and see how page should look after adding the drinks and side orders.

Desserts

<h1>Desserts</h1>
<img src="bigCookie.jpg" height=100 width=100 border=1 Title="Our big chocolate cookie feeds four for only $2.95">
<input type ="checkbox" name="cookie">Cookie
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
<br>
<br>
<img src="brownies.jpg" height=100 width=100 border=1 Title="Our brownies are only $3.95 with your order">
<input type ="checkbox" name="brownie">Brownie
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">

<br>
<br>
<img src="coffeCake.jpg" height=100 width=100 border=1 Title="Our coffee cake is delicious and it is only $3.95 with your order">
<input type ="checkbox" name="coffeeCake">Coffee Cake
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
<br>
<br>

<img src="cinnamonBuns.jpg" height=100 width=100 border=1 Title="Our cinnamon buns make a great dessert for only $3.95 with your order">
<input type ="checkbox" name="cinnamonBuns">Cinnamon Buns
<input type="button" name="orderNow" value="Buy" onClick="tallyOrder(form)">
<br>
<br>

Copy and paste the information about desserts just under the table of side orders.

Testing HTML code, Making a javaScript File to tally order.

Day 6

There a few more things to add to the html code and then we want to do some testing and editing.
Decide what you want to do about the "Written by" text in the footer of both article 1 and article 2 and side news.
You may want to say that the pizzas were created by our pizza chef, Antonio or just delete the text.
You could put , "Your satisfaction is guaranteed or your money back."
You can't go wrong with our most popular pizzas.
Look again at the colors used for both text, fonts and backgrounds.
We now need to have a place to get customer information so we know where to delivery the pizza.
We will put this information in the bottom footer of the page.
Here is the text that needs to be pasted into in the <Footer id="the _footer";> section.

The Legend tag is a caption for the section: Delivery Information
The next four sections of code are almost identical
The create a label for last name, first name street address and city.
Next they create a text input field and assign a variable name to each.
Place holders print text in the input fields telling the user what information should be entered.
A new feature of HTML5 is the required attribute. When used in form processing, it tells the user that data must be entered in that field. It cannot be left blank.
In prior versions of HTML, javaScript functions were necessary to catch these errors of omission.

<br>

<Input type="submit"  value="Submit Order"> 
<Input type="reset" name ="ResetButton" Value="Reset">
<input type=hidden value=jerry@janetbelch.com name= recipient>

The next piece of code that you need to deal with is the way the form information: name address city, state and food ordered appears below.
Paste it in right before the ending form tag in your html file.
The next line creates an input type called submit with a value of "Submit Order". - Submit Order is the text inside the button.
When pressed the order is processed.
The next line is designed to clear the user's data from the form.
You can, of course, just hit the reload button on the browser to clear all data.
The next line would be given to you by the person who hosts your web site.
It involves a way to trigger and email the information that was submitted.
If you just leave this code alone and do not change it, it will display what was ordered and then send me the information.
You can also purchase shopping cart code to facilitate this function.

Javascript file called Checkout.js
var smallCheese; var mediumCheese; var largeCheese; var smallPepperoni; var mediumPepperoni; var largePepperoni; var smallThickCheese; var mediumThickCheese; var largeThickCheese; var smallThickSausage; var mediumThickSausage; var largeThickSausage; var smallCheeseOlive; var mediumCheeseOlive; var largeCheeseOlive; var smallPepperoniOnions; var mediumPerreroniOnions; var largePepperoniOnions; var smallMushroomBacon; var mediumMushroomBacon; var largeMushroomBacon; var cola120z; var cola22oz; var cola32oz; var IcedTea12oz; var IcedTea22oz; var IcedTea32oz; var smallFries; var mediumFries; var largeFries; var smallRings; var mediumRings; var largeRings; var smallBread; var mediumBread; var largeBread; var coookie; var browine; var cinnamonBuns; var total = 0; var total1 = 0; var total2 = 0 ; var total3 = 0; var total4 = 0 ; var total5 = 0; var total6 = 0; var total7 = 0; var total8 = 0; var total9 = 0; var total10 = 0; var total11 = 0; var total12 = 0; var total13 = 0; var total14 = 0; var total15 = 0; var total16 = 0; var total17 = 0; function tallyOrder(orderForm) { // cheese total 1 if(document.form.sizeCheese[0].checked == true) { total1=10.95; } if(document.form.sizeCheese[1].checked == true) { total1=12.95; } if(document.form.sizeCheese[2].checked == true) { total1=14.95 } // popular pepperoni - total2 if(document.form.sizePepperoni[0].checked == true) { total2=10.95 } if(document.form.sizePepperoni[1].checked == true) { total2=12.95 } if(document.form.sizePepperoni[2].checked == true) { total2=14.95 } //cheese thick crust total3 if(document.form.sizeThickCheese[0].checked == true) { total3=10.95 //alert("Total for this order is " + total3) } else{ total3=0; } if(document.form.sizeThickCheese[1].checked == true) { total3=12.95 //alert("Total for this order is " + total3) } if(document.form.sizeThickCheese[2].checked == true) { total3=14.95 //alert("Total for this order is " + total3) } //sausage thick crust - total 4 if(document.form.sizeThickSausage[0].checked == true) { total4=10.95 //alert("Total for this order is " + total4) } if(document.form.sizeThickSausage[1].checked == true) { total4=12.95 //alert("Total for this order is " + total4) } if(document.form.sizeThickSausage[2].checked == true) { total4=14.95 //alert("Total for this order is " + total4) } // cheese Olives - total 5 if(document.form.sizeCheeseOlives[0].checked == true) { total5=16.95 //alert("Total for this order is " + total5) } if(document.form.sizeCheeseOlives[1].checked == true) { total5=17.95 //alert("Total for this order is " + total5) } if(document.form.sizeCheeseOlives[2].checked == true) { total5=18.95 //alert("Total for this order is " + total5) } // PepperoniOnions - total 6 if(document.form.sizePepperoniOnions[0].checked == true) { total6=16.95 //alert("Total for this order is " + total6) } if(document.form.sizePepperoniOnions[1].checked == true) { total6=17.95 //alert("Total for this order is " + total6) } if(document.form.sizePepperoniOnions[2].checked == true) { total6=18.95 //alert("Total for this order is " + total6) } // MushroomBacon - total 7 if(document.form.sizeMushroomBacon[0].checked == true) { total7=16.95 //alert("Total for this order is " + total7) } if(document.form.sizeMushroomBacon[1].checked == true) { total7=17.95 //alert("Total for this order is " + total7) } if(document.form.sizeMushroomBacon[2].checked == true) { total7=18.95 //alert("Total for this order is " + total7) } //Veggie total 8 if(document.form.sizeVeggie[0].checked == true) { total8=16.95 //alert("Total for this order is " + total8) } if(document.form.sizeVeggie[1].checked == true) { total8=17.95 //alert("Total for this order is " + total8) } if(document.form.sizeVeggie[2].checked == true) { total8=18.95 //alert("Total for this order is " + total8) } //cola - total 9 if(document.form.drinkSizeCola[0].checked == true) { total9=1.00 //alert("Total for this order is " + total9) } if(document.form.drinkSizeCola[1].checked == true) { total9=1.25 //alert("Total for this order is " + total9) } if(document.form.drinkSizeCola[2].checked == true) { total9=2.00 //alert("Total for this order is " + total9) } //iced tea total 10 if(document.form.drinkSizeIcedTea[0].checked == true) { total10=1.00 //alert("Total for this order is " + total10) } if(document.form.drinkSizeIcedTea[1].checked == true) { total10=1.25 //alert("Total for this order is " + total10) } if(document.form.drinkSizeIcedTea[2].checked == true) { total10=2.00 //alert("Total for this order is " + total10) } // friesSize - total 11 if(document.form.friesSize[0].checked == true) { total11=.99 //alert("Total for this order is " + total11) } if(document.form.friesSize[1].checked == true) { total11=1.99 //alert("Total for this order is " + total11) } if(document.form.friesSize[2].checked == true) { total11=2.50 //alert("Total for this order is " + total11) } //ringSize - total 12 if(document.form.ringsSize[0].checked == true) { total12=.99 //alert("Total for this order is " + total12) } if(document.form.ringsSize[1].checked == true) { total12=1.99 //alert("Total for this order is " + total12) } if(document.form.ringsSize[2].checked == true) { total12=2.50 //alert("Total for this order is " + total12) } //breadSize - total 13 if(document.form.breadSize[0].checked == true) { total13=.99 //alert("Total for this order is " + total13) } if(document.form.breadSize[1].checked == true) { total13=1.99 //alert("Total for this order is " + total13) } if(document.form.breadSize[2].checked == true) { total13=2.50 //alert("Total for this order is " + total13) } //cookie total 14 if(document.form.cookie.checked == true) { total14=2.95 //alert("Total for this order is " + total14) } // brownie - total 15 if(document.form.brownie.checked == true) { total15=3.95 //alert("Total for this order is " + total15) } // coffeCake - total 16 if(document.form.coffeeCake.checked == true) { total16=3.95 //alert("Total for this order is " + total16) } //cinnamonBuns total 17 if(document.form.cinnamonBuns.checked == true) { total17=3.95 //alert("Total for this order is " + total17) } total = total1 + total2 + total3 + total4 + total5 + total6 + total7 + total8 + total9 + total10 + total11+ total12 + total13 + total14 + total15+ total16 + total17 var total = (total).toFixed(2); document.form.total.value = total; }
1. You first need to link your html file to the javaScript file.
2. Here is the code to do it. <script type="text/javascript" src="Checkout.js"></script>
3. It belongs between the head tags.
4. You need to get a copy of this file for yourself.
  - Highlight or select the text in the scroll box above.
  - PRess CTRL C to put in on the clipboard.
  - Open a new Notepad++ file
  - Press CTRL V to paste the information.
  - Save the file as Checkout.js in your working folder along with html, css and images.
5. Let's examine the javaScript file above.
6. First all the variables are declared. They are declared at the top of the file so that they are considered global variables
7. The numeric variables like total1, total2, total are set to zero and are available to all javascript functions in the file.
8. The only function in this file is called tallyOrder(orderForm)
9. This function is called each time the user clicks the Buy button next to each product.
10. The comment tags / /are used for the programmer to make notes to themselves. In this case I wanted to keep track of what product and what total would be assigned to it.
11. The If statement checks to see which button was checked next to each product.
12. The number in the [] indicate which radio button of the three was pushed.
13. The number 0 is the first one, 1 is the second button and 2 is the third.
14. If the statement is true, then a total is assigned - the price that we sell the item for.
15. For example if radio button sizeCheese[0] has been clicked, the customer wants this item and 10.95, the cost of a small cheese pizza is assigned to total1.
16. After testing each product,I commented out the alert statements as they were no longer needed.
17. Curly braces {} surround each function and also surround the if statement and its procedures.
18. Be careful with these. If you click on one of these curly braces in Notepad++, the corresponding brace is highlighted.
19. If your javaScript does not work, press CTRL, SHIFT and the letter J after launching it in a browser.
20. Notepad++ will point out the errors , the line number and which file, HTML or CSS.
21. The variable total is composed of all 17 product totals. If the item was not clicked, that total is not included,
22. At the end of the code for each of the 17 items, a formula is created to total up the order.
23. The next line rounds off the total to two decimal places.
24. The next line returns the total back to the total box on the html form so that it can be submitted with the rest of the information on the order form.
With the information contained in the <input type=hidden value=jerry@janetbelch.com name= recipient> the following form is displayed on the user's screen, and its contents are sent to an email address defined on the server's cgi form mail script.

Understanding Media Queries

Day 7

Media queries are used to change the layout of your web page based on the size of the device or screen width you are using.
It is especially helpful to convert a regular web page designed for a desktop or laptop so that it can be seen using a phone or tablet.
The code is added in the CSS3 section and works with the flexible box model layout.
You do not have to recode an application specifically for a phone or a tablet by using the media query feature in HTML5 and CSS3.
Suppose you have a smartphone that is 320 pixels wide and 480 high and want to access a web site or application.
When a user clicks on the site, the site's media query detects the devices' capabilities.
If your css style sheet contains specific styles for different devices with a 320 by 480 screen size, then the code inside the curly braces will be executed.
You can look at both height and width, although the width is the critical one as the information can scroll down and height is not that important.
Check out the link listed below for more information on devices and their widths.
Mobil Device Widths
The code you put between the braces can be designed to make the font and text smaller, resize the images, reshape all of the layout tags like big-Wrapper, Top_menu, body etc.
You can even design an application for portrait or landscape mode so that when the user rotates the phone a different media query is called.
Here is a helpful link when looking at sizes of devices and screens.
How to target desktop, tablet and mobile using media queries
We are going to use four media queries. One for a desktop/laptop screen, one for a tablets and one for 480 pixel and one for 320 pixels. We are only concerned with the width of the screens.
Some devices when rotated, toggle back and forth between portrait and landscape mode.

Media Queries we will work with.

@media only screen and (min-width: 992px)
{
This query is for desktop and laptop computers
}

@media only screen and (min-width: 768px) and (max-width:991px)
{
This the query is for tablets.
}

@media only screen and (min-width: 480px) and (max-width:767px)
{
This query is for smart phones with a minimum width of 480 pixels
}

@media only screen and (min-width:320px) and (max-width:479px)
{
This query is for a smartphone with a small screen with a minimum width of 320 pixels.
}

The code we use inside the curly braces can change the image size to make it smaller
We will change the size, font, style and color for headline 2.
We will change font, size color and style for paragraphs.
We will make changes to all layout tags.
- big_wrapper
- top_header - we only want our logo and not the other pictures for some sized screens.
- Top_menu - we will change the layout to block instead of an in line arrangement to reduce the width of our page.
- The body tag will have changes made to it.
- The main_section will be modified for certain sized screens
- When initially coding a web page for your company, keep in mind that many people might want to access it using smaller mobile devices.
- Be thinking about the original code and the size of things like columns.
- Some authors suggest that you build the small model first and then use different css files for different sized larger screens.
- To see how the screen is affected by a smaller size, you can drag the screen smaller and when it reaches the width set in pixels in the media query, you will see the screen, text, picture, colors and fonts change.
- In the next section, you will add codes after the media queries line to change the way a users screen will look at diffeent widths.

Adding Code for Media Queries

Day 8

Desktop and Laptop Query

@media only screen and (min-width: 992px)
{

#big_wrapper{
		max-width:992px;
		margin:20px, 0px;
		border:6px dotted orange;
		display:flexbox;
		
	
	
		
		
		background:#cc6600;
	}
	header,section, footer, aside, nav, article, hgroup {
	display:block;
}
	body{
	width:100%;
	border:1px solid blueviolet;
	
	display:flexbox;
	
	
		}
	
	#top_header{
		background:#d3d3d3;
		border:3px solid black;
		padding:40px;
		background: url(Cook3.jpg) 15px 15px no-repeat,
					url(pizza5b.jpg) 250px 45px no-repeat, 
					url(drink2b.jpg) 350px 45px no-repeat,
					url(sideOrder4b.jpg) 450px 45px no-repeat,
					url(bigCookie.jpg) 550px 45px no-repeat;
					
		
		}
	#top_menu{
		border:1px solid red;
		background:#de553c;
		color:black;
	
	}	
	
	#top_menu li{
		display:inline-block;
		list-style:none;
		padding:20px;
		font:bold 18px Verdana;
	
	}
#new_div{
    border:1px solid blue; 
	
	
	display:flex;
	
	
	
	
	}	

#main_section{
	
	border:3px solid black;
	
	
	
	
	
	
		margin: 5px;
	padding:10px;
	//background:#fffdb0;
	 background:#87CEFA; 
}	
#side_news{
	//border:3px solid red;
	
   //width:320px; set width if you want this box fixed not flexible
	
	top-margin:2px;
	margin:0px;
	padding:40px;
	background:#cc6600;


}
#the_footer{
	text-align:left;
	padding:2px;
	border-top:solid green;
	background-color:f5deb3;
}


	
	em	{font-weight:  bold;
		color: navy
		}
		
	h1{ 
	font: bold 24px tahoma;
		color:black;
	}
	
	h2{
		font:bold 20px Times New Roman;
		color:black;
	
	}
	h3{
	
		font:Italic 16px Comic Sans;
		color:#006400;
	
	
	}
	h4{
	
		font:bold 12px tahoma;
		color:#006400;
	
	
	}
	
	
	
	p{
	font: bold 1px arial;
	font-size: 12px;
		 }
		
		
	p.special    
	{
		font-family: Helvetica;
		font-size:16pt;
		color:  #ff6347;
		font-weight:bold;
		
		
	}
	
	p.large
	{
		font-family:Verdana, Arial, Helvetica,sans-serif;
		font-size:28;
		font-weight:bold;
		color:#ff00ff;
	}
	
	
}

Copy these lines to your clipboard, paste them into Notepad++ and save it as queries.css
We need to link this file to our html file with the following code placed between the head tags.
<Link Rel="StyleSheet" href="queries.css">
Let us examine the meaning of them.
The first line is the one that sets the parameters for the newly styled page @media only screen and (min-width: 992px)
We are looking at setting a screen size that is at least 992 pixels wide.
Typically this is above the number of horizontal pixels for tablets and smart phones consequently, we are looking at laptops and desktop computers.
All elements that are to be affected by the media query, must be inside its own curly braces, so be careful and when making changes that all changes are inside the media queries braces.
This query is almost identical with the one used in the FBM.css file
Let's test it out.
In Notepad++, run your Pizza.html and drag the right side of the window to the left.
What if anything happened?
- Text scrolled down in our containers that are coded as flexboxes.
- Fonts colors, pictures did not change.

Tablets Media Query

@media only screen and (min-width: 768px) and (max-width:991px)
{
#big_wrapper{
		max-width:768px;
		margin:20px, 0px;
		border:6px dotted orange;
		display:flexbox;
		
	
	
		
		
		background:#cc6600;
	}

img{
					
			max-width:100%;
			height:auto;
							}
			#top_header{
				
				background: url(Cook3.jpg) 15px 15px no-repeat,
					url(pizza12.jpg) 250px 45px no-repeat, 
					url(pizza11.jpg) 350px 45px no-repeat,
					url(pizza10.jpg) 450px 45px no-repeat,
					url(pizza9.jpg) 550px 45px no-repeat;
		
				background-size:80px 80px;
			background-repeat: no-repeat;
			
		
		}

		#top_menu{
		border:1px solid red;
		background:#de553c;
		color:black;
	
	}	
	
	#top_menu li{
		display:inline-block;
		list-style:none;
		padding:5px;
		font:bold 18px Verdana;
	
	}
	#new_div{
    border:1px solid blue; 
	
	
	display:flex;
	
	
	
	
	}	

#main_section{
	
	border:3px solid black;
	
	
	
	
	
	
		margin: 5px;
	padding:10px;
	//background:#fffdb0;
	 background:#c0c0c0; // silver 
}	


#side_news{
	//border:3px solid red;
	
   //width:320px; set width if you want this box fixed not flexible
	
	top-margin:2px;
	margin:0px;
	padding:40px;
	background:#f5deb3;// wheat;


}

	#the_footer{
	text-align:left;
	padding:2px;
	border-top:solid green;
	background-color:#ff9900;// gold
}


	
	em	{font-weight:  bold;
		color: navy
		}
		
	h1{ 
	font: bold 20px tahoma;
		color:black;
	}
	
	h2{
		font:bold 18px Times New Roman;
		color:black;
	
	}
	h3{
	
		font:Italic 14px Comic Sans;
		color:#006400;
	
	
	}
	h4{
	
		font:bold 10px tahoma;
		color:#006400;
	
	
	}
	
	
	
	p{
	font: bold 1px arial;
	font-size: 12px;
		 }
		
		
	p.special    
	{
		font-family: Helvetica;
		font-size:16pt;
		color:  #ff6347;
		font-weight:bold;
		
		
	}
	
	p.large
	{
		font-family:Verdana, Arial, Helvetica,sans-serif;
		font-size:28;
		font-weight:bold;
		color:#ff00ff;
	}
	
	

}

Now let's copy the code for tablets into our queries.css file.
From the above text box, highlight and copy the code.
Paste it at the end of your queries.css file.
Save your css file as queries.css.
Now it is time to test this new query. When we drag the window to the left and the window size is greater than 768 pixels but less than 992 pixels we want this media query to execute.
Drag the window to the left and stop when you see a major change.
What changed?
The pictures in the header changed from pizza, drinks, desserts, andside orders to pictures of just pizzas.
The main_section which contains the most popular and speciality pizzas changed from a light blue to a light gray background.
The section side_news background color changed from a dark cinnamon color to a much lighter color.
I used these color and other changes so you could see how the screen size media queries can alter the look of the page on smaller devices.

480 pixel wide/ smartphones, Android phones, landscape iPhones Media Query

@media only screen and (min-width: 480px) and (max-width:767px)
	
	{
	
		img{
					
			max-width:100%;
			height:auto;
							}
		h1{ 
			font: bold 12px tahoma;
			color:#000000;
	}					
					
							
		h2{
			font:bold 10px Times New Roman;
			color:#c13100;
		
		}
		
		h3{
			font:Italic 8px Comic Sans;
			color:#006400;
	
	
	}
			
		p{
			font: bold 8px arial;
			color:black;
			
		}
		
		#big_wrapper{
			
			width:100%;
			border:2px dotted magenta;
			
			background-color:#ff8000;
		}
		#top_header{
				
				background:url(Cook3.jpg);
				background-size:80px 80px;
			background-repeat:no-repeat;
			
		
		}
		#top_menu{
			height:auto;
			background-color:blue;
		
		
		}
		
		#top_menu li{
			width:auto;
			display:block;
			
			text-align:left;
			border-top:1px grey solid;
			border-bottom:1px grey solid;
			padding:5px;
			
		
		}
		body{
			width:100%;
			padding:5px;
			background-color:white;
				border:1px solid blueviolet;
		
		
		}

		#side_news{
			
			background-color:#ffdab9;
						
			float:none;
			//max-width:230px;
			min-width:40%;
			
}

	#new_div{
			display:block;
			background-color:orange;
		
		
		
		
		
		}
		#main_section{
			
			min-width:60%;
			
			align-items:flex-start;
			background-color:#fffdb0;
			margin:5px;	
		}
		
		article{
		
		
		margin:0px;
			
		
		
		}
		
		#side_news{
	//border:3px solid red;
	
   //width:320px; set width if you want this box fixed not flexible
	
	top-margin:2px;
	margin:0px;
	padding:40px;
	background:#f5deb3;// wheat;


}

	#the_footer{
	text-align:left;
	padding:2px;
	border-top:solid green;
	background-color:#ff9900;// gold
}


	
	em	{font-weight:  bold;
		color: navy
		}
		
	h1{ 
	font: bold 20px tahoma;
		color:black;
	}
	
	h2{
		font:bold 18px Times New Roman;
		color:black;
	
	}
	h3{
	
		font:Italic 14px Comic Sans;
		color:#006400;
	
	
	}
	h4{
	
		font:bold 10px tahoma;
		color:#006400;
	
	
	}
	
	
	
	p{
	font: bold 1px arial;
	font-size: 12px;
		 }
		
		
	p.special    
	{
		font-family: Helvetica;
		font-size:16pt;
		color:  #ff6347;
		font-weight:bold;
		
		
	}
	
	p.large
	{
		font-family:Verdana, Arial, Helvetica,sans-serif;
		font-size:28;
		font-weight:bold;
		color:#ff00ff;
	}
	

		
		
		}

We will turn our two-column page into a one column page by display:block; code under the #new_div

To shrink an image, use the code listed above for img.

Look at H1. In the beginning, full-size version, the font size is 24px.

In our newer scaled down version it is 12px. Save and check it out by dragging the right side of the window to the left.

When the window side reaches 480 pixels, the changes made inside the media query will take place.

All of the page will be formatted as one column.

Headline 2 (h2) went from 20px to 10px and we changed the color of the text.

Head line (h3) went from 16px to 8px in size but the color remained unchanged. Save and test.

The paragraph tag remained the same.

The big_wrapper, the width was set to auto instead of 768 pixels. We also gave it a background color.and reduce the top margin.

The top_header, we eliminated all but one image, our logo.

Top_menu we changed the background color to green and set the height to auto.

The major change made to the top_menu li, is that the menu or navigational items are not displayed in a straight horizontal line, but in a vertical arrangement.

We did this due to the width restrictions of a smaller window on the phone.

For the body, we removed changed the code and set the width to 50% and we set the background color to wheat.

Drag the right side of the window in Notepad++ to the left, the background of the main section turns from blue to a cream color.

The major changes in that the application turns into a single column.

The side news has turned from gray to a pinkish background with the smaller screen.

What other changes die you see?

Now let us add the code for the smaller 320 pixel screen.
It listed below. Select it all, put it on the clipboard and paste it at the end of the queries.css file.
Save the file as queries.css
@media only screen and (max-width:320px) { img{ max-width:100%; height:auto; } h1{ font: bold 12px tahoma; color:#000000; } h2{ font:bold 10px Times New Roman; color:#c13100; } h3{ font:Italic 8px Comic Sans; color:#006400; } p{ font: bold 4px Times New Roman; color:black; } #big_wrapper{ width:100%; border:2px dotted magenta; // margin-top:10px; background-color:#ff8000; } #top_header{ background:url(Cook3.jpg); background-size:80px 80px; background-repeat:no-repeat; } #top_menu{ height:auto; background-color:green; } #top_menu li{ width:auto; display:block; text-align:left; border-top:1px grey solid; border-bottom:1px grey solid; padding:5px; } body{ padding:5px; background-color:white; border:1px solid blueviolet; } #side_news{ background-color:#c0c0c0; } #new_div{ display:block; background-color:#f5f5f5; } #main_section{ background-color:#fffdb0; margin:5px; } article{ display:block; width:100%; margin:5px; } #the_footer{ text-align:left; padding:2px; border-top:solid green; background-color:#f5deb3; } }
Test it out by dragging the window to 320 pixels wide.
It is kind of tough in Notepad++ because there is no gauge to see when 320,480,768, 992 or any number is reached
That is why I picked different colors, so that you can see when the screen size arrives at different screen widths.
You will note that it is still one column instead of two and the background color of the customer information section - #the_footer is yellow.
The #top_menu is green instead of blue as it was at 480 pixels.

Testing Media Query

Day 9

Experiment with these new values inside the curly braces of the media query section, until you have it looking the way you want.
Try changing the different background colors.
The color schemes that I chose were more for identification of different sections rather than their aesthetic value.
Experiment by using different images of the food for the Upper Crust Pizzeia.
Experiment with the padding property and margins to get different effects.

Testing pizza parlor, hosted application on your phone

Day 10

Here is my version of the finished Upper Crust Pizzeria Home Page
Upper Crust Pizzeria

To view the finished copy on your phone, do the following
- Go the browser on your phone or other mobile device.
- A media query is a new category added to the CSS3 specification.
- Many browsers still use the CSS2.0 or 2.1 specification, so they will not understand the media query code.
- Make sure you use the latest browsers to test this part of the assignment. These feature only work with fully capable browsers.
- Key in the web page address http://janetbelch.com/mobile/tutorial.html. This my copy of the finished version of the assignment and is posted on our web site.
- This application is called a hosted verses a packaged app. A hosted app is run from a web site. A packaged app is usually a zipped file, packaged, uploaded to an app store like Chrome Web Store, Firefox MarketPlace and then is is downloaded to your device.
- From the navigation menu on your phone, select Testing media query
- Select Upper Crust Pizzeria home page link.
- Go though the page and make an order.
- Fill in delivery information and press submit button.

Overview of Project

Changes in how we access the Internet.

Materials Needed for the Project

Teacher Responsibility

Progress Logs