Transcript Web Design PPT - Montville.net

Mrs. Rossi
 Setup Web
design in Google Classroom.
The code is 8mjwai.
 Setup
drive
•
•
•
•
•
•
the following folders in your student
Internet Unit
HTML Unit
CSS Unit
Dreamweaver
Project
Images

DoNow: Take handout from front of classroom. Sign into
computers – Open Google Classroom Go to Google
Classroom classroom.google.com and sign in with your
student gmail and password. Sign in as a student. Add
using + sign Web Design Period 5 class code is
8mjwai


Lesson: How does the Internet Work?
Exercise: Following the video –
https://www.youtube.com/watch?v=scWj1BMRHUA Start
your definitions assignment
 DoNow:
Take handout from front on
classroom.
• Human Bingo Rules
 Get to know one another – we will be working in
groups!!!
 Cannot use same person for multiple squares
 Yell BINGO when you have 5 across
 DoNow:
With your table partner, Write
down your 5 favorite websites. Why are
they your favorite?
 Lesson:
 Activity:
How the Internet Works
Work on your Internet Diagram
 ISP
(Internet Service Provider) – business
that allows customers computers to
access the Internet. Examples include
Verizon, Comcast, AT&T
 Modem – Cable Modem,
Telephone modem
 Fiber
Optic Cable
 Domain Name Server
(DNS) - Internet's equivalent of a phone
book. They maintain a directory of domain
names and translate them to Internet
Protocol (IP) addresses. This is necessary
because, although domain names are
easy for people to remember, computers
or machines, access websites based on IP
addresses.
 POP(Point
of Presence) - refers to an
access point, location or facility that
connects to and helps other devices
establish a connection with the Internet.
 NAP
(Network Access Points) – a public
network exchange facility where
Internet service providers (ISPs)
connected with one another in peering
arrangements
 DoNOW:
Name an example of an ISP, and a
domain name.
 Lesson:
 Activity:
History of the Internet
Google Classroom – timeline of
the history of the internet
 1969
– Arpanet was the first real network
to run on packet switching technology
 1971 – Electronic mail (email) is
introduced by Ray Tomlinson
 1974 – Transmission control
Protocol/Internet Protocol (TCP/IP)
handshake between computers is
designed
 1977 – The first PC modem was
introduced
 1989
– AOL is launched
 1993 – Mosiac the first web browser
introduced
 1994- Netscape Navigator (web browser
introduced) Widely used
 1998 – Google Arrives – pioneers
ranking system
 2004 – Facebook introduced
 2005 – Youtube lauches



DoNow: Log into computer and google classroom.
Identify Internet history after 2006. What were some
websites launched or advances in technology? If you
are not sure use your search engine! You may have
included them in your timeline. 3 main events required
– you have 5 minutes
Lesson: What is a URL and what are the parts?
Activity: Google Classroom Name 3 websites for each
of the following Domain name Extensions. (.com, .edu,
.gov, .org, .info) Label the parts of each URL. You may
have to choose a link from the website
 Test
scheduled for Sept. 21
 https://www.youtube.com/results?search
_query=thriller+video
 HTTPS
– Protocol (s means secure)
 WWW – World Wide Web
 Youtube- domain name
 .com – Domain name extension
 results?search_query=thriller+video
 Directory path and file
Extension
Decription
Example
.com
Commercial or forprofit
www.dell.com
.edu
Educational site
www.harvard.edu
.gov
US Government
www.firstgov.gob
.org
Professional or non
profit
www.redcross.org
.mil
Military Site
www.army.mil
.net
Network site
http://eelink.net
.biz
Commercial business
www.dgmi.biz
.info
Information site
www.eclipses.info
 DoNow:
Take handout from the front.
Finish activity on URL’s and Domain Name
Extensions.
 Lesson:
 Activity:
Study Guide Review
Study Guide Completion and
Vocabulary Practice Station
Keep eyes on own paper
When Finished - work on another
subjects homework/classwork. No
computer/cell phone usage!
Hand in to appropriate
bin when completed
 DoNOW:
Log in to the computer and google
Classroom. Follow the link
https://en.wikipedia.org/wiki/List_of_Intern
et_entrepreneurs Which entrepreneur
would most interest you in the list? Do you
share the same passions?
 What
it takes to be an Internet Entrepreneur
 Activity:
Google Classroom Innovative
entrepreneur assignment. Presentations
start on Tuesday.
 DoNOW:
Ensure that your presentation is
handed in on Google Classroom
 Presentation Review
• Speak clearly and loudly
• Look at your audience when you are speaking
• Have FUN!
 Be
a good audience member (no use of
computers or cell phones). Please turn your
monitors off when we begin.
DO NOT LOG IN TO YOUR
COMPUTERS. WE WILL BE STARTING
PRESENTATIONS IMMEDIATELY.
 DoNOW:
 AT
THE END OF THE PRESENTATIONS
YOU WILL BE ASKED TO WRITE DOWN
THE MOST INFORMATIVE AND
CREATIVE PRESENTATION
 DoNOW:
Pair up with the person behind
you. What is the difference between a
web page and web site? What are the
types of web sites? Clue - Rutgers is a
______ site
 Lesson: Elements of a Web Page
 Activity:
Elements Web site browser.
Montville and another site of your
choosing.
 Commercial Sites
• E-commerce
 Educational Sites
• Schools and University
 Portal Sites
• Provide general news and business info ex:
Excite.com
 Informational Sites
• Provide people with useful info ex: News sites,
government site, public interest
 Personal Sites
• Share news with family and friends
• Share interest and hobbies

Common Web Page elements include:
•
•
•
•



Text
Graphics
Multimedia
Hyperlinks
Text consists of words, letters, numbers, and
other symbols
Graphics include drawings, charts, diagrams,
paintings, photographs, and navigational
buttons
Multimedia refers to the integration of elements
such as graphics, text.
 Hyperlink
allows you to move from one
online page to another.
 Three types of links
• Internal links take you to another page on the
same web site.
• External links take you to a page on a different
Web site.
• Intrapage links move you to a different spot on
the same page.
 Open
your Web Browser
 Open Montville.net
 Snip the web page (I will show you how to
do this)
 Paste in PowerPoint or Slides
 Add labels to screen – Use Vocabulary
Graphics, Hyperlinks, Text, Multimedia.
Identify what type of hyperlinks.
Graphic
Hyperlink (external)
Text
 DoNOW:
Login to computers and google
classroom. List 5 common web site
elements in your notebook. Ensure that
website elements is handed in by end of
day.
 Lesson:
 Activity:
Web Site Development Process
Google Classroom – determine
purpose and goals
 Five
basic steps
• Determine the purpose and goals of the website
• Design and develop the web site
• Evaluate and test the Web Site
• Implement the Web Site
• Maintain the Web Site
 We
will focus on Step 1
 Determine
Purpose and Goals
• What is the site’s purpose? Your site’s purpose may
be to educate visitors, or it may be to sell a product.
• What are the site’s goals? What impact do you want
your site to have on visitors? You may want your site
to increase sales of your products, or to teach the
viewer how to throw a curve ball.
• What tools do you need to reach your goals? For
example, if you want to use video to teach people
how to throw a curve ball, you will need special
hardware and software to create and edit the video
 What
is your primary audience? Who
will visit the side? Will it be students,
retired people, homeowners?
 What kinds of hardware and software are
the site’s visitors likely to be using? You
should think about the capabilities of the
typical visitor’s computer system as you
create your site.
 DoNOW:
Login to computer and open
Google Classroom. Ensure that you have
submitted Goal and Purpose. Remember
to receive a 100% you must provide
examples and screen shots
 Lesson: Design Process
 Activity: Map out the design process of 3
websites using smart art. Map out on
paper first
 Rough
sketch
Welcome
to our site
Products
Ordering
information
Contact Us
FAQ
Press
Releases
Draw a rough sketch for 2 websites – use Smart Art (I will demo)
 DoNOW:
Login to computer and google
classroom. Pick up your rough drafts on
side table. Open your design process
document. Continue to sketch your
design process on either paper or the
computer. Remember to be neat. You
have 15 minutes to complete 2 websites
so work diligently.
 Lesson: Beginning HTML
 Activity: Our first website!!!
 HTML
stands for the code used to create
web pages.
 HTML tag consists of text that appears
between two angle brackets <>. This text
shows the web browser how to display a
page’s content
• Starting tag – Opening tag
• Ending tag – Closing tag
Beginning  These tags sets tell a browser where formatting should
start and end
tag
<P>It is very important to carefully proofread your
code</P>
Ending Tag
 Nested Tags
– refers to the order in HTML
tags appear. A nested tag is a tag
enclosed inside another set of tags. Tags
should close in reverse order of how they
were opened, so the last tag you open
Closing
will be the first tag to be closed
Paragragh
Bold
bold
 <HTML><P><STRONG>VERY</STRONG
></P></HTML>
Closing P tag
Closing HTML tag
 Empty Tags
A tag that requires only an
opening tag is an empty tag. Some
examples are <BR> (break) <HR>
horizontal line and IMG (image)
• No closing tags required for above
 Tags
are not case sensitive. You can write
<br> or <BR>
 DoNOW:
Login to computer and google
classroom. Start a tag notebook. It can
be in your paper notebook or virtual.
Add the tags we have learned so far:
<HTML>, <HEAD>, <TITLE>. What did
we call our first document? What was the
extention?
 Lesson: body section and <h> and <p>
tags
 Activity: First webpage
 DoNOW:
Login to computers and google
classroom. Open Notepad and minimize.
What code do you write on every HTML
document? Write the answer in your
notebook.
 Lesson: Notepad & Beginning Tags
 Activity:
First webpage activity. If finished
draw a picture in paint and save to your web
design folder. We will use it in future
classes
 Open
notepad
 On the first line type <html>
 File Save AS
 <html>
- starts every html document
 <head> - Document head
 <title> - document title – heading on
website
 <body> - document body – most coding
in body section.
<h1> - Contains description of what the page is
about
 <h2> - Defines a section of the page
 <h3> - Defines sub section
 <h4> - Defines sub sub section
 <p> - paragraph – Only use to denote a
paragraph of text.
 <BR> - line break
 <HR> - horizontal line
 <img src =“images/skunk.jpg” alt=“A family of
skunks” title=“The skunk has a pungent smell”
width=“600” height=“450” />

Can you write the code so your website
looks like the handout?
Of course you can! Give it a try. Don’t forget to
close you tags.
 DoNOW:
Login to computer and google
classroom. List in your notebook the tags
we learned on Tuesday.
 Lesson:
 Activity:
Line spacing
Construct a website that gives me
the following information: Name, age,
hobbies, favorite food. Must have at least 2
<h> and 3<p> and 1 line break and 1
horizontal line. If you finish early start
Coding Notebook.
 DoNOW:
Login to computer and google
classroom. Open new notepad
document. Save as list.html (make sure
to select all files).
 Lesson: List items (<ul> or <ol>)
 Activity:
Add to your last assignment to
incorporate 2 ordered list – 1 Ordered
and 1 Unordered. If finished make 3
pictures in Paint
 Ordered
List -displays items that must
appear in a particular sequence, such as
the steps required to complete a task.
<ol>
 Unordered List – contains items that can
appear in any order. Use the tags <ul> to
create unordered list
 Both
use <LI> to define list
I have learned all these things:
 I can operate my computers hardware
 I can use HTML to create simple websites
 I can insert different sized headings
 I can have a title display for my website
I will be an expert in these things:
1. I will learn how to insert images
2. I will learn how to insert a hyperlink
3. I will learn how to use Dreamweaver
Unordered List Example
<UL>
<LI>I can operate my computer’s hardware. </LI>
<LI>I can operate my computer’s hardware. </LI>
</UL>
Ordered List Example
<OL>
<LI>I love to wakeboard. </LI>
<LI>I love to waterski. </LI>
</OL>
 DoNOW:
Login to computer and Google
Classroom. What is the best way to find
coding errors? What will happen if your
code has errors? **Dreamweaver
Assessment**
 Lesson: Debugging your code & <IMG>
Tag
 Activity:
Debugging activities
 Images
should be
• Be relevant
• Convey Information
• Convey the right mood
• Be instantly recognizable
• Fit the color palette
**Remember that all images are subject to
copyright and you can get into trouble for simply
taking photographs from another site**
 Images
should be stored in an images
folder
 If you have a big website, you should
have sub folders such as products,
interface and news
 Name
your images intelligently so you
can find them easily
 <img
src =“images/skunk.jpg” alt=“A
family of skunks” title=“The skunk has a
pungent smell” width=“600”
height=“450” />
 Scr
– this tells the browser where it can
find the image file
 Alt – This provides a text description of
the image which describes the image if
you cannot see it
 Title
– to provide additional information
about the image. Most browsers will
display the content of this attribute in a
tooltip
 Height – This specifies the height of the
image in pixels
 Width – This specifies the width of the
image in pixels
 Before
a paragraph <img src=….
 Inside
the start of a paragragh <p> <img
src=…
 In
the middle of a paragraph <p> this is
where you would write text and then
insert a picture <img src=….
 .jpeg
– use this format when you have
many different colors in a picture
 .gif
or .png – use this format when saving
images with few colors or large areas of
the same color.
Web Design Class is #1
I have learned the following tags:
1. < p >
2. < h1 >
3. < img >
I have also learned :
 Design process
 Elements of a web page
 Famous Internet Entrepreneurs
I can put an image in the middle of a sentence like this
<img> and I can also put a break in the page right
here. I can also add a horizontal line like below.
Add more images and make it POP!
 DoNOW:
Login to the computer and
Google Classroom. Open up your
assignment from yesterday and minimize
it. What is the code for the tag image?
 Lesson: Review image
 Activity:
Finish yesterdays assignment
and begin student choice assignment.
 **Test:
Tuesday, October 25th**
 Construct
a website for a non profit
company like animal shelter or homeless
shelter. Have at least 2 pictures, 1
horizontal line, headings, ordered list and
unordered list, text and a title.
 Construct a website of your favorite sports
team. Have at least 2 pictures, 1 horizontal
line, headings, ordered list and unordered
list, text and a title.
Make it POP!
 For
Fun
 DoNOW:
Login to computers & Google
Classroom. What are the four elements of
a webpage? What are the 5 Types of
Websites ie personal?
 Lesson: Review – Kahoot
 Activity:
Review Sheet – Q&A – Finish
Student Choice & Challenge Website.
 TEST TOMORROW! Bring other
homework/study materials for other
classes for when you finish
 DoNOW:
Login to computer. Turn you
monitors off
 Take
 No
a pencil/pen out.
talking during the duration of the test
 Turn
in first part and I will supply you
with second part.
 DoNOW:
Print out your html and preview
from the quiz yesterday to HP 416 printer.
It is giving me a hard time printing your
work. Thank you. Put your name on it.
<a
href=“http://www.youtube.com”>YOUTUBE</a>
 The
text between the opening <a> tag and
closing </a> is known as link text.
 Explain to users where they will be taken if they
click on the links
 YOUTUBE is the text they will see. It will be a
different color and underlined
<p>
<ul>
<li><a href=“movies.html”>MOVIES</a></li>
<li><a href=“contact.html”>Contact</a></li>
<li><a href=“Home.html”>Home</a></li>
</ul>
</p>
 Movies
 Contact
 Home
 <a
href=“mailto:[email protected]:>Ema
il Mrs Rossi</a>
 When
you click on the link the email program
will open up and you can send an email.
 <a
href=“http://www.youtube.com”
target=“_blank”>Internet Video</a>
{opens in a new window}
 Create
a website about a state you would
like to visit.
• Use all the tags that you have learned so far.
• Add a linking tag to a website about the state
• Add an email link to your email to receive more
information.
• Add an additional link to open the website in a
new window.
 DoNOW:
Login to computer and Google
Classroom. Open your State Linking
project.
 Lesson:
Review of Linking & <em>
<strong>
 Activity:
Continue on linking project &
add 4 <em> tags and 4 <strong> tags
 Syntax
- <strong>
 Example:
<p><strong>I love web design</strong>
 Syntax
- <em>
 Example:
<p>Web Design is the <em>best
</em>class.</p>
 Syntax
– table – element used to create a
table <table>
 Syntax - <tr> - indicate the start of each
row using the opening <tr> tag – tr
stands for table row
 Syntax - <td> - each cell of a table is
represented using a <td> tag
 Syntax - <th> - element is used for
heading for either a column or row

<table>
<tr>
<th></th>
<th scope=“col”>Saturday </th>
<th scope=“col”>Sunday </th>
</tr>
<tr>
<th scope=“row”>Tickets sold: </th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope=“row”>Total Sales:</th>
<td>$600 </td>
<td>$675 </td>
</tr>
</table>
Saturday
Tickets Sold
Total Sales:
120
$600
Sunday
135
$675
 DoNOW:
Login to computers. Take
handout from front. Open notepad. Save
document as form.html
 Lesson:
 Activity:
Form Tag
Hobby Website
<form> - - Form Tag
Every Form element requires an action
attribute. Its value is the URL for the page
on the server that will receive the
information
Method – forms can be sent using one of
two methods: Get or Post
EXAMPLE: <form
action=http://www.example.com/subscrib
e.php method=“get”>
 <input>
- Used to create several different
form controls
• Type=“text”
• Type=“radio”
• Type=“checkbox”
• Type=“submit”
• Type=“reset”
 <textarea>
 Copy
- Comment Area
code
 https://www.youtube.com/watch?v=iGTY
HPaGA8c
 Design
a website about a favorite hobby.
Your website should contain all the tags
we have learned so far including 3
images, 3 links and a simple form.
 The
form should ask for student first and
last name and radio button input,
checkbox input and a select.
 No
submit button required
 DoNOW:
Login to computers and google
classroom. Open your hobby activity. We
will start to format it today!!!
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
 SYNTAX:
Background color is all the
same for all elements
<style>
body {
background-color: lightblue;
}
</style>

Syntax: Background color is different for different tag elements
Examples
<html>
<head>
<style>
h1 {
background-color: green;
}
p{
background-color: yellow;
}
</style>


Text Color - used to set the color of the text.
Syntax –
<style>
body {
color: blue;
}

h1 {
color: green;
}
</style>
 DoNOW:
Login to computers and google
classroom. Please check you have
submitted the Halloween assignment and
that I have left you no comments.
Brainstorm with your tablemate about some
examples of Public Service Announcements
(PSA)
 Lesson: Storyboarding first – what will
announcement look like – add color choices
 Activity: Design a website that is a public
service announcement. Use all tags we
have learned so far. Research appropriate
content
 DoNOW:
Login to computers and google
classroom. We will continue working on
our PSA’s. This is a graded assignment
for the 2nd marking period.
 Lesson: Coding Notebook
 Activity: Design a website that is a public
service announcement. Use all tags we
have learned so far. Research
appropriate content