Week 6 Flashcards
1
Q
What is important to provide when creating a website?
A
Offer something valuable: provide useful or interesting content.
2
Q
What types of distractions should be avoided on a website?
A
No blinking or animated GIFs.
Avoid autoloading sound.
Minimize scrolling and eliminate popups.
3
Q
When using background images, what must you consider?
A
Use background images only if you know what you’re doing.
Ensure they don’t interfere with readability.
4
Q
Why is website organization important, and what should you focus on?
A
A well-thought-out organization ensures easy navigation.
Minimize clicking—no more than 3 clicks to reach any page.
5
Q
What should every page on a website include for easy navigation?
A
A home page link.
A menu located in the same place on every page.
6
Q
How can you optimize website performance when using images or multimedia?
A
Compress images.
Prevent multimedia files from slowing down the site.
7
Q
What are the guidelines for text and page width?
A
Text lines: no more than 600 pixels wide.
Page width: about 900–1000 pixels (no horizontal scrolling).
8
Q
What design choices make a website user-friendly and easy to read?
A
Use contrasting colors or simple backgrounds for text readability.
Make text large enough to read.
Use ALL CAPS sparingly and limit exclamation points.
9
Q
What should you never do with text and links?
A
Never underline text that isn’t a link.
Spell check to avoid errors.
Never use more than one exclamation mark
10
Q
How can you ensure navigation is not confusing?
A
Place menus in the same location on all pages.
Avoid inconsistent navigation.
11
Q
How can you ensure website links are effective?
A
Test all links.
Remove dead links to avoid frustration.
12
Q
What are key principles for consistent design across a website?
A
Maintain consistency in:
Colors
Menu placement
Layout
Fonts
Buttons
13
Q
What is important when updating a website?
A
Include a “Last Modified” date.
Update “What’s New” sections frequently to stay current.
14
Q
How can you ensure your website has good layout and balance?
A
Use white space.
Ensure clean alignment and balanced design.
15
Q
What ethical considerations must you follow for website content?
A
Do not steal content.
16
Q
How can you improve user navigation and user experience?
A
Apply the 3-click rule and plan logical user flow.
Always consider how users will interact with and navigate your site.
17
Q
What should you aim for to create an attractive and functional website design?
A
Consistency in design elements (colors, layout, fonts).
Balance clean alignment with effective white space.
Ensure that users can easily navigate and access content without confusion.
18
Q
How can you plan layout for website?
A
By drawing pictures of the layout
19
Q
What is something to be aware of when putting the menu bar on the side?
A
Shouldn’t have to scroll down to see all buttons
20
Q
What is a website?
A
A collection of related webpages stored in a folder. The folder may or may not contain subfolders
21
Q
What subfolder should the website folder contain and what does that folder hold?
A
Images subfolder that holds the image files (.jpg, .gif, etc) that will be displayed on the page
*Isn’t required but organized because you can tell where issues are coming from w images
22
Q
What types of files are webpages made of and what extensions do those files have?
A
Each webpage is normally an html file, a file that has the extension .html or .htm
23
Q
What is a .html or .htm extension file?
A
- Very basic page, just has clickable links, images, sometimes forms
- The .html file is just a file with html codes that is displayed in a browser to make it look pretty for the client (Chrome, IE, Safari, Firefox)
- CS1033 just covers .html & .htm pages
24
Q
What is another type of extension that can be used for webpages?
A
php → extra stuff that is brought in also from the server, allows for use of data in a database on the server, more complex form manipulation
25
Where is each .html file stored?
In the folder (the Website)
26
What should the home page, "the starting page" file name be?
index.html
27
If you have an index.html file in your directory what do you see?
Wouldn't be able to see the actual folders, just the index.html file
28
What happens if you don't have index.html in your are?
Just shows you list of folders/files in your area
29
Why should you only use lowercase letters for folder names?
Easier to type in properly, less room for errors
index.html MUST be in lowercase for it to be valid
30
What is the folder structure for a simple site?
- Decide on the pages you will need
- Create a top level folder. Use lowercase letters
- Give the home page the name index.html
◦ Must be all lowercase!
◦ Index.html is invalid
- Give the other pages appropriate lowercase names (no spaces in the file names) with the .html extension
- Create a subfolder called images (lowercase) and put all your images in that folder
31
What is an example of folder structure for a website about polar bears?
Main folder: H:\polarbears
images folders
diet.html
factsandstats.html
habitat.html
index.html
slideshow.html
32
Assume the domain name for this site is: ArcticAnimals.org What would the link for the website be, how would you get to the website and the habitat page?
Website: http://www.arcticanimals.org/
To get to the polar bear website:
http://www.arcticanimals.org/polarbears
OR
http://www.arcticanimals.org/polarbears/index.html
(because even if you forget to type in index.html it would automatically take you to the starting page)
To get to the habitat page you would type:
http://www.arcticanimals.org/polarbears/habitat.html
33
How are websites structured when they have many submenus and have lots of webpages?
In this case we need a more complicated folder structure
◦ BUT it is NOT really that much more
complicated, just one main folder with subfolders that contain “sub websites”
◦ Each sub website is a sub folder that contains it’s own index.html and images subfolder
34
What is an example of subfolders?
Western website menu has people and has sub menu under people which includes: faculty, grad students, post docs, etc
35
How were webpages made when html was first introduced?
Using notepad
36
Can you guess some of the tags you think we would need to create a useful and readable webpage
Hyperlink-->way to go from one research paper to another
For aesthetic:
headings, bold, underline, italics, lists, tables, images (initially only text based)
37
Why do we put alt tags on our images?
Text shown in browser when image can't be shown
38
What are the 4 types of HTML tags?
1. Section tags
2. Formatting tags
3. Link tags
4. Placeholder tags (standalone or unpaired tags)
39
What are examples of section tags?
, , , …
40
What are examples of formatting tags?
,
- , ,
,
,
42
What are examples of placeholder tags (standalone or unpaired tags)?
,
43
What are the steps to making a website the old fashioned way?
Open Notepad
Save your file as myfirstpage.html
Type in some tags
Save the file again
Close the file
Double click on it, it should now open in Chrome
In Chrome, from the menu select View>Source
Edit the tags some more and save the file
Go back to Chrome and hit the refresh button
44
It is way to hard to remember all the
tags, so what types of programs come to the rescue?
WYSIWYG programs to the rescue!
◦ Eg. Adobe Dreamweaver or html5-editor.net
45
What does html stand for?
Hypertext markup language
46
What do WYSIWYG programs do?
They creates the tags for us so that we don’t have to remember the syntax for each tag!
47
Why is the title one of the most important areas?
Because it's what Google uses for its keyword searches
48
When you build a site and complete it, where do you move it to ?
A web server
49
What is a web server?
The computer that runs software
which holds the webpages and serves up (delivers) webpage to the client. This computer must be connected to the Internet. The software delivering the webpages is also called a web server
50
What is the software we use to move
the webpages we have built on to the web server?
WinSCP FileZilla, or Cyberduck, take the website folder you've created and drags it up to a machine that has a web server running on it
51
What is the name of the web server
machine at Western?
panther.uwo.ca creating a public_html folder
also have other one called cs1033.gaul.csd.uwo.ca
52
Besides putting pages on a webserver, what must the client have?
A web browser
53
Once you have moved your website onto the web server how MUST you test your website by?
Opening it in a Web Browser
54
What is a web browser?
Software/program that displays
formatted webpages to the client.
55
What is the input we give a web browser?
A .html file which is really just a bunch of tags
56
What is the output from the web browser program?
A beautiful webpage
57
Can you name 3 web browser programs?
Chrome, Safari, IE (Internet Explorer), Firefox
58
Does anyone know how you look at the html that was used to create the page currently displayed in the browser?
If you right-click on page and press "view page source", it shows you all the tags used to create webpage
59
What are the steps for inputting and outputting to create a website?
1. Tags stored on the webserver (the SERVER)
2. Tags inputted to a Web Browser
3. Website it outputted from a web broswer
60
In the 1980s what did Tim Berners Lee propose?
A way of sharing research papers using the Internet and hypertext
(immediate links to other documents)
Universal format that would work on Mac, Windows, Linux, everyone could use, don't open each one (paper) separately
61
IMPORTANT: When did Berners Lee set the specifications for the HTML
language and wrote a browser to read HTML files and output linkable papers?
In 1990
62
What did Tim Berners Lee propose when setting the specifications and writing the browser?
He proposed html tags
- Ex: , , , ,
- ,
63
IMPORTANT: Most tags come in pairs, what are they and give and example.
Opening tag and a closing tag,
Ex: This is the title of the webpage
64
What did html files (webpages) used to be made from?
With simple text editors like Notepad
65
What type of scientist was Tim Berners Lee?
Physicist
66
What are Tim Berners Lee's 4 big accomplishments?
1. Created the first web browser
2. Created URL layout
3. Came up with the World Wide Web and the concept of hyperlinks among pages
4. Created HTML tags (they have changed a bit over time but he came up with the initial ones)
67
What does the WYSIWYG program do as you type on the text editor side?
Generates tags for you
68
What does does the WYSIWYG program not generate?
69
What does WYSIWYG stand for?
What you see is what you get
70
What are some tips for using a WYSIWYG program?
- Doesn't format like a printable document, based on variations in screen resolution and size (will look different to everybody)
- Want to have consistent look but it won't be precise
- Create a one page layout, save it, and use it as a template for others
- Organize images by creating an "images" folder them all there before adding them to the webpage
- Test your webpage in multiple browsers to ensure compatibility.
- Use lowercase, space-free names for all folders and files to avoid issues.
71
Why are page titles very important?
- When you print a webpage, the title appear at the top of the printed paper
- Search engine looks at page title
- Displayed in list returned by Google
72
What is a page title?
What shows up at the top of the tab bar
73
Do you have to set titles for your pages.
You should always set a title on all your pages
74
How should you format your page titles?
- Start with the current page, then the pipe | then the site name
Ex:
Work Experience | Laura K. Reid Online Resume
Natural Sciences | Western Buildings
75
Where must you set the page title in?
In Notepad
76
What are real world examples of the differences between HTML vs. CSS vs. JavaScript?
1. Author writes the book – CREATES THE CONTENT OF BOOK
2. Author sends book to publisher to make it look nice – SET THE LOOK AND FEEL OF BOOK
3. Publisher decides to create an audio or an online book and then they need to allow readers to jump to chapters – SET UP THE BEHAVIOUR
77
What 3 things do we always break things into?
1. Create content
2. Set look
3. Set behaviour
78
What are the 3 parts to building a web page?
1. Content → create an HTML file (.html)
2. Looks → create a CSS file (.css) (or sometimes add CSS to the .html file)
3. Behaviour → create a JavaScript file (.js)
79
What are the different header formats?
H1, H2, H3, H4, H5, H6
- H1 is the largest
- All are bolded
- All force a blank line after them
80
If you decide to use a background image, what should you make sure of?
Tt is not too busy and the image file size is small.
81
Don’t forget about your links colours either! Try to pick colours that...?
Work with your site palette
82
What should you add your images with/through?
Via html5-editor
83
Why should you ALWAYS set the alternative text?
- Meet Barriers Free Access Requirements
- Shows when page is loading
- Shows up when using a text browser
- Might be used as keywords in searches
84
What happens when you set the title attribute?
Shows when mouse hovers over an image
85
What types of common universal formats should you use for your graphics and why?
Use formats such as jpg, gif and png files that will work in any browser
86
In what programs should you resize and compress images and when should you do it?
Resize and compress the image as much as possible in Affinity (or other graphics package like Photoshop) BEFORE putting the image file into your images folder.
87
Any resizing you do within html5-editor OR with css will not affect the _______
Download speed
88
What is link type 1?
Links to other pages within your site:
Ex: Link from index.html to contactinfo.html. Link from contactinfo.html back to index.html
89
What is link type 2?
Link to a different website
Ex: Link from index.html to http://www.utoronto.ca
- Should open in new window or tab
- Make sure you have http:// in front!
90
What is link type 3?
Link to an email address
Ex: Link to homerjsimpson@yahoo.com
Type mailto:homerjsimpson@yahoo.com into box
- Clicking on the link brings up default emailer like Outlook
91
What is link type 4?
Link on a image
On the whole image:
Link to http://www.canada.gc.ca
http://cs1033.gaul.csd.uwo.ca/~lreid2/examplesforta/assign3/student1/contactinfo.html (click on banner)
92
What is link type 5?
Link to particular spot within a page. The spot is called the bookmark or the named anchor. Find the spot you want to jump to, put your cursor there and then select Insert> Anchor. Give the spot a name you make up, for example: middleofpage
93
How should names of anchors be formatted?
Cannot have spaces or special characters in it.
94
Where should anchors be placed?
Go to where you want the link and add a link with # in front of it and the name of the anchor:
95
Where can anchors link to?
Link to any spot within the current page OR you can link to the middle of another page, for example:
http://en.wikipedia.org/wiki/Jpg#Sample_photographs
96
What should you use to make Back to Top buttons or jump form a list to another area of the page?
Use named anchors
You can do this also to jump to an anchor on a DIFFERENT one of your pages
97
What are HTML tables made up of?
Of rows and columns
98
What are cells? And what kind of data can cells hold?
Place where a row meets a column is called a cell. A cell can hold any kind of data: links, text, images, etc…
99
What is a table inside another table called?
Called a nested table
100
In CS1033 how did we make simple clean layouts for each of our pages?
By using tables
101
What can tables be expressed in terms of?
- Percentage %
- Pixels
102
How are tables expressed in terms of percentages?
- % of the browser, not the entire screen
103
How are tables expressed in terms of pixels?
Resolution affects the way a page is displayed. In general, most people do NOT have their resolution below 1024 by 768. Thus if we make our table 1000 pixels wide EVERYONE should be able to view it.
104
Why should we not make tables wider than 1000 pixels?
If we make our table 1200 pixels wide, some people (the ones whose resolution is still 1024 by 768) will have to scroll horizontally.
105
What are some hints for using tables to organize your overall appearance?
- Set border to 0
- Give some cell padding, so the text doesn’t go flush to the end of the cell
- Use the alignment buttons to make everything look clean. Do NOT centre paragraphs of text.
- Use pixels to set up your table initially, no wider than1000 pixels
- Merge/join and split cells to help you define your areas
106
How can you use Google Fonts for cool fonts?
- Click on
- The Font you like/choose
- Then + Select this style button
- Then Embed tab
- Then select and copy the NOTE: the will look like similar to this:
107
Where do you paste the code you get from a Google Font?
Then paste the code you just copied into Notepad below the tag but above the tag.
Save your file
108
When using Google Fonts what do you need to use?
A
109
What is the problem with using internal CSS style rules?
That you have to remember to add CSS style rules to EVERY file (.html)
110
How are external css style rules used?
We can put all our rules in a separate .css file
We link each page (.html file) to that .css file
Then we just change the rule in .css file and it will take affect on ALL the pages!
111
What are the benefits to using an external style file?
And we can easily swap for a different .css page to get a different look!
