Web Pages Notes Chapter ONE
Internet: hardware such as computers, cables, and telephone wires connected to create a worldwide network.
World Wide Web: software that sends info that is stored in files along the internet’s hardware.
File: text, graphics, video or info that is stored on computer hardware
Website: group of related files organized around a common topic.
Webpage: single file within a website.
Home page: the main page on a website which contains general info about the site.
Hypertext markup language: code used to create web pages.
Commercial sites:
-E commerce sites
-corporate presence sites
Portal sites: somewhere you go to find something else (Google, Bing)
informational sites:
-news sites
-government sites
-public interest sites
Educational sites:
-school and university sites
-tutorials and distance learning
-museums and other institutions
Text: words letters numbers and symbols
Graphics: drawings, charts, painting or photograph stored in a digital format
Multimedia websites;
Audio: live, streamed, or recorded sound
Video: live, streamed, or recorded moving images
Animation: the movement of text and graphics
Hyperlink: a way to link web pages/sites together
-internal, external, intrapage
Website Development
Step 1: Determining purpose and goals
Step 2: Designing and implementing a website
Step 3: Evaluate and test
Step 4: Publish
Step 5: Maintain
Web Pages Notes 2
Hardware: Physical components of the computer
Software: The set of instructions that tells the computer what to do.
Central processing units: Where the data is processed. The “Brain” of the computer.
Random access memory: Where the computer stores data that is currently processing.
Keyboard: Allows you to enter text into the computer.
Mouse: The most common pointing device to enter commands into the computer.
Monitor: The part of the computer that shows the output in a quick readable form.
Printer: A hardware device that produces the copy of output.
Basic input output system: Small program that performs startup activities.
Operating system: Software that specifies all the computer receives and processes input.
Graphical user interface: Windows
Application software: Computer programs that allow users to perform specific tasks.
Multitasking: Working with more than one application at a time.
Network: A system in which communication lines or wireless connections are used to connect computers.
Local area network: connects computers that are in the local area.
Wide area network: Connects computers over wide geographic area.
Client: individual computer design network.
Network Interface Cards: Plug cable into computer and it sends a signal from one network to another.
Modem: Hardware device that allows the computer to send and receive signals through telephone wires or cable.
Hardware: Physical components of the computer
Software: The set of instructions that tells the computer what to do.
Central processing units: Where the data is processed. The “Brain” of the computer.
Random access memory: Where the computer stores data that is currently processing.
Keyboard: Allows you to enter text into the computer.
Mouse: The most common pointing device to enter commands into the computer.
Monitor: The part of the computer that shows the output in a quick readable form.
Printer: A hardware device that produces the copy of output.
Basic input output system: Small program that performs startup activities.
Operating system: Software that specifies all the computer receives and processes input.
Graphical user interface: Windows
Application software: Computer programs that allow users to perform specific tasks.
Multitasking: Working with more than one application at a time.
Network: A system in which communication lines or wireless connections are used to connect computers.
Local area network: connects computers that are in the local area.
Wide area network: Connects computers over wide geographic area.
Client: individual computer design network.
Network Interface Cards: Plug cable into computer and it sends a signal from one network to another.
Modem: Hardware device that allows the computer to send and receive signals through telephone wires or cable.
Web Pages notes 3
Internet service provider: business that provides a network to customers
Protocol: a set-up of rules and procedures that specify how data are formatted and transferred between computers
File transfer protocol: standardized method of uploading and downloading files on the internet
Intranet: LAN or wan that is designed to make it easy to share information within an organization such as a business or school
Extranet: a type of network that can be accessed by an outside user
Uniform resource locater: Unique address that enables a browser to locate pages on the web
Domain name: part of a URL
Domain name extension: part of the URL that tells users what type of organizations uses the sites
Accessibility options: the feature that allows differently able individuals to access and use webpage
Search engine: an application that locates information and stores it in the data base that you can access from your browser
Web directory: search tool that catalogs websites by topic or category
Keyword: an important word related to the topic you are trying to locate
Boolean search: type of search that combines keywords to locate certain pages.
Text editor: App used to enter and edit an html code
Web site development app: an app used to create websites
WYSIWYG: what you see is what you get
Web posting service: weebly?
External hyperlink: a hyperlink that will take you to the next website
Internet service provider: business that provides a network to customers
Protocol: a set-up of rules and procedures that specify how data are formatted and transferred between computers
File transfer protocol: standardized method of uploading and downloading files on the internet
Intranet: LAN or wan that is designed to make it easy to share information within an organization such as a business or school
Extranet: a type of network that can be accessed by an outside user
Uniform resource locater: Unique address that enables a browser to locate pages on the web
Domain name: part of a URL
Domain name extension: part of the URL that tells users what type of organizations uses the sites
Accessibility options: the feature that allows differently able individuals to access and use webpage
Search engine: an application that locates information and stores it in the data base that you can access from your browser
Web directory: search tool that catalogs websites by topic or category
Keyword: an important word related to the topic you are trying to locate
Boolean search: type of search that combines keywords to locate certain pages.
Text editor: App used to enter and edit an html code
Web site development app: an app used to create websites
WYSIWYG: what you see is what you get
Web posting service: weebly?
External hyperlink: a hyperlink that will take you to the next website
Notes 4
Html coding
Html tags
· Hypertext markup language (html) - the code used to create web pages.
· Html tag- text contained between two angle brackets that tells a web browser how the page should be displayed.
· Starting tag- first pair of html tags also known as an opening tag.
· Ending tag- last pair of html tags, also known as closing tags.
· Nested tag- html tag that’s enclosed inside another set of tags.
· Empty tag- html tag that requires only an opening tag.
Html guidelines
· Source code- text and html commands used to create a web page.
Using notepad
· File name extension- three or four characters after a period in filing that tell the computer what kind of file its reading
Adding attributes
· Html instruction included in an html tag specifying characteristics of a web page.
Creating lists
· Ordered list- type of list that contains items that are numbered.
· Unordered list- list that appears in any order.
Inserting links using html
· Anchor tag- html tag used to create hyperlinks. Tag IDs what it’s clicked on and where it leads.
· Text link- type of link in which users click text to activate the link.
· Graphic link- type of link in which users click on the image to activate the link.
· Absolute link- contains complete URL or path of the file being linked too.
· Relative link- link to a local file such as one within the same website.
Testing a web page
· Debugging-the process of locating and correcting errors in a websites html code.
· Testing- the process of repeatedly checking the web page to make sure that element display as they were designed to.
Html coding
Html tags
· Hypertext markup language (html) - the code used to create web pages.
· Html tag- text contained between two angle brackets that tells a web browser how the page should be displayed.
· Starting tag- first pair of html tags also known as an opening tag.
· Ending tag- last pair of html tags, also known as closing tags.
· Nested tag- html tag that’s enclosed inside another set of tags.
· Empty tag- html tag that requires only an opening tag.
Html guidelines
· Source code- text and html commands used to create a web page.
Using notepad
· File name extension- three or four characters after a period in filing that tell the computer what kind of file its reading
Adding attributes
· Html instruction included in an html tag specifying characteristics of a web page.
Creating lists
· Ordered list- type of list that contains items that are numbered.
· Unordered list- list that appears in any order.
Inserting links using html
· Anchor tag- html tag used to create hyperlinks. Tag IDs what it’s clicked on and where it leads.
· Text link- type of link in which users click text to activate the link.
· Graphic link- type of link in which users click on the image to activate the link.
· Absolute link- contains complete URL or path of the file being linked too.
· Relative link- link to a local file such as one within the same website.
Testing a web page
· Debugging-the process of locating and correcting errors in a websites html code.
· Testing- the process of repeatedly checking the web page to make sure that element display as they were designed to.
Notes 5
Determining purpose and goals
· Mission statement- a statement that describes the purpose and the audience of a web site.
Determining your audience
· Target audience- the main group of people you want to visit your web site.
Writing a mission statement
· What is the purpose of a website?
· What are the sites immediate goals?
· What are the sites long term goals?
· Who is the audience and what are they looking for?
Types of navigation schemes
· Hierarchical navigation scheme- type of navigation plan in which pages are arranged in levels from top to bottom with the top level being the websites home page.
· Top level page- the highest level in a hierarchical navigation structure, usually the homepage.
· Parent child relationship- in a hierarchical navigation scheme a page that’s connected to another page on a different level; the page on the level above is the parent, the page on the level below is the child
· Linear navigation scheme- a type of navigation plan in which every page exists at the same level, each page the site is accessed from the one before it.
· Random access navigation scheme-a type of navigation plan in which a sites pages are nopt organized in any particular order.
Guide to reading
· Story board- a visual representation of a website and its pages.
Drawing a websites navigation structure
· Page name- the name that appears in the little bar when the page is displayed in the browser.
· File name- the name of a html document that makes up the web page itself.
Steps in planning a website
· The sites purpose is clearly stated
· Both immediate and long term goals are specified
· The audience is specified
· A clear and specific mission statement is written
· An appropriate navigation scheme is chosen
· A chart is created showing the navigation scheme.
· Sketches of major pages are drawn
Create a free website with
Determining purpose and goals
· Mission statement- a statement that describes the purpose and the audience of a web site.
Determining your audience
· Target audience- the main group of people you want to visit your web site.
Writing a mission statement
· What is the purpose of a website?
· What are the sites immediate goals?
· What are the sites long term goals?
· Who is the audience and what are they looking for?
Types of navigation schemes
· Hierarchical navigation scheme- type of navigation plan in which pages are arranged in levels from top to bottom with the top level being the websites home page.
· Top level page- the highest level in a hierarchical navigation structure, usually the homepage.
· Parent child relationship- in a hierarchical navigation scheme a page that’s connected to another page on a different level; the page on the level above is the parent, the page on the level below is the child
· Linear navigation scheme- a type of navigation plan in which every page exists at the same level, each page the site is accessed from the one before it.
· Random access navigation scheme-a type of navigation plan in which a sites pages are nopt organized in any particular order.
Guide to reading
· Story board- a visual representation of a website and its pages.
Drawing a websites navigation structure
· Page name- the name that appears in the little bar when the page is displayed in the browser.
· File name- the name of a html document that makes up the web page itself.
Steps in planning a website
· The sites purpose is clearly stated
· Both immediate and long term goals are specified
· The audience is specified
· A clear and specific mission statement is written
· An appropriate navigation scheme is chosen
· A chart is created showing the navigation scheme.
· Sketches of major pages are drawn
Create a free website with
Chapter 6 Notes
Chapter 6 Notes
Section 6.1
-Content: Text and graphics on a web page.
-Inverted Pyramid: Type of narrative structure that puts the most important info at the beginning.
Section 6.2
-Pixel: A single point in a graphic image.
-Screen Resolution: The amount of pixels a monitor can display.
-Safe Area: Amount of space available on every web browser and system.
-White space: An area on a web page without any content.
-Proximity: The closeness of elements on a web page.
Section 6.3
-Logo: A symbol used to represent a business or an organization.
-Title Graphic: An image that appears at the top of every page of the website.
-Table: An item used to display data and content.
-Column: Cells in a table arranged vertically.
-Row: Cells in a table that are arranged horizontally.
-Cell: Each individual square in a table.
Section 6.4
-Navigation Link: A button that takes users to other webpages.
-Hover Button: A navigation button that changes appearance when toughed by a mouse pointer.
-Active Button: A click button that is in the process of doing something.
-Interactive Button: A button that changes that lets the users know an action has taken place.
-Link Bar: A related groups of links also known as a navigation bar or table of contents.
-Footer: The bottom portion of a webpage that usually contains date info, copyright, contact info, and text links.
Chapter 6 Notes
Section 6.1
-Content: Text and graphics on a web page.
-Inverted Pyramid: Type of narrative structure that puts the most important info at the beginning.
Section 6.2
-Pixel: A single point in a graphic image.
-Screen Resolution: The amount of pixels a monitor can display.
-Safe Area: Amount of space available on every web browser and system.
-White space: An area on a web page without any content.
-Proximity: The closeness of elements on a web page.
Section 6.3
-Logo: A symbol used to represent a business or an organization.
-Title Graphic: An image that appears at the top of every page of the website.
-Table: An item used to display data and content.
-Column: Cells in a table arranged vertically.
-Row: Cells in a table that are arranged horizontally.
-Cell: Each individual square in a table.
Section 6.4
-Navigation Link: A button that takes users to other webpages.
-Hover Button: A navigation button that changes appearance when toughed by a mouse pointer.
-Active Button: A click button that is in the process of doing something.
-Interactive Button: A button that changes that lets the users know an action has taken place.
-Link Bar: A related groups of links also known as a navigation bar or table of contents.
-Footer: The bottom portion of a webpage that usually contains date info, copyright, contact info, and text links.
Chapter 7 Selecting Color and Design
7.1 Principles of Presentation Design
Consistency- Logical coherence amongst part using similar elements throughout a site.
Repetition- Duplicating specific elements on all or most of the site’s pages.
Page Banner- Text and graphics at the top of a page such as a sites logo or title graphics.
7.2 Color Scheme Guidelines
Color Scheme- A set of selected colors used consistently on a web site.
Web-Safe Color- The 216 colors that display consistently from computer to computer.
7.3 Typography and Fonts
Typography-The style, arrangement, and appearance of text.
Font- A family of letters, numbers, and symbols that share a consistent style.
Point- Traditional unit of type measurement.
Alignment- Position of text on a page such as right, left, or centered.
Serif- Font with an extra line or curve at the end of letters and numbers.
Sans Serif- Doesn’t have an extra curve or line at the end of letters and numbers.
7.4 Creating subpages
Subpage- A page that’s a child of another page.
Image Map- A graphic with clickable areas, called hot spots, that link to other pages.
Hot Spots- A graphic link to a related page or another area on the same page.
7.1 Principles of Presentation Design
Consistency- Logical coherence amongst part using similar elements throughout a site.
Repetition- Duplicating specific elements on all or most of the site’s pages.
Page Banner- Text and graphics at the top of a page such as a sites logo or title graphics.
7.2 Color Scheme Guidelines
Color Scheme- A set of selected colors used consistently on a web site.
Web-Safe Color- The 216 colors that display consistently from computer to computer.
7.3 Typography and Fonts
Typography-The style, arrangement, and appearance of text.
Font- A family of letters, numbers, and symbols that share a consistent style.
Point- Traditional unit of type measurement.
Alignment- Position of text on a page such as right, left, or centered.
Serif- Font with an extra line or curve at the end of letters and numbers.
Sans Serif- Doesn’t have an extra curve or line at the end of letters and numbers.
7.4 Creating subpages
Subpage- A page that’s a child of another page.
Image Map- A graphic with clickable areas, called hot spots, that link to other pages.
Hot Spots- A graphic link to a related page or another area on the same page.
CHAPTER 8 NOTES
Shared Border- An area that remains the same on all or some of the pages on a website
Raster graphic- Graphic made up if pixels
Paint program- software app
Vector graphic- graphic composed of simple lines defined by a map
Draw program- creates vector graphics
Graphic interchange format- graphic file with 256 possible colors
J peg- joint photographic experts group
Compression- makes a graphic smaller
Scanner-Hardware that converts a printed image to digital format
Digital Camera- camera that saves images
Word art- text objects with special formatting applied
Rsizing- changing size of image
Aspect- relationship between an image
Resampling- changinging number of pixels
Cropping- removing portions of an image
Photo gallery- collection of photographs with brief descriptions
Thumbnail- smaller version of the image you are looking for
Shared Border- An area that remains the same on all or some of the pages on a website
Raster graphic- Graphic made up if pixels
Paint program- software app
Vector graphic- graphic composed of simple lines defined by a map
Draw program- creates vector graphics
Graphic interchange format- graphic file with 256 possible colors
J peg- joint photographic experts group
Compression- makes a graphic smaller
Scanner-Hardware that converts a printed image to digital format
Digital Camera- camera that saves images
Word art- text objects with special formatting applied
Rsizing- changing size of image
Aspect- relationship between an image
Resampling- changinging number of pixels
Cropping- removing portions of an image
Photo gallery- collection of photographs with brief descriptions
Thumbnail- smaller version of the image you are looking for