Notes 1
9-7-12
Notes 1
Web Basics
· Internet- hardware such as computers, cables, and telephone wires connected to create a worldwide network.
· World wide web- software that sends info that’s stored in files along the internet’s hardware.
· File- texts, graphics, video, or animation stored on computer hardware.
· Website- group of related files organized around a common topic.
· Web page- a single file within a website.
· Homepage- the main page on a website which contains general info about a site.
· Hypertext markup language- code used to create web pages.
· Commercial sites- ecommerce sites, corporate presence sites.
· Portal sites
· Info sites- news sites, government sites, public interest sites
· Educational sites- school and university sites, tutorials and distance learning, museums and other institutions
· Personal sites
Texts and Graphics
· Text- words, letter, numbers and symbols.
· Graphic- a drawing chart, diagram, painting, or photo stored digitally.
· Audio- live streamed or recorded sound.
· Video, live or recorded moving images.
· Animation- the movement of texts and graphics
· Hyperlink- way to link web pages together.
· Internal, external, and intrapage
Website development process
1. Determine purpose and goals.
2. Designing and implementing website.
3. Evaluate and test
4. Publish
5. maintain
Notes 1
Web Basics
· Internet- hardware such as computers, cables, and telephone wires connected to create a worldwide network.
· World wide web- software that sends info that’s stored in files along the internet’s hardware.
· File- texts, graphics, video, or animation stored on computer hardware.
· Website- group of related files organized around a common topic.
· Web page- a single file within a website.
· Homepage- the main page on a website which contains general info about a site.
· Hypertext markup language- code used to create web pages.
· Commercial sites- ecommerce sites, corporate presence sites.
· Portal sites
· Info sites- news sites, government sites, public interest sites
· Educational sites- school and university sites, tutorials and distance learning, museums and other institutions
· Personal sites
Texts and Graphics
· Text- words, letter, numbers and symbols.
· Graphic- a drawing chart, diagram, painting, or photo stored digitally.
· Audio- live streamed or recorded sound.
· Video, live or recorded moving images.
· Animation- the movement of texts and graphics
· Hyperlink- way to link web pages together.
· Internal, external, and intrapage
Website development process
1. Determine purpose and goals.
2. Designing and implementing website.
3. Evaluate and test
4. Publish
5. maintain
Notes 2
Web Site Development Careers
Web author: person who writes the text on a web page.
Web designer: person who develops the look and feel of a web page.
Web developer: person who uses programming skills to develop websites.
Webmaster: person who manages and maintains websites.
I would be a good web designer because I like making websites pretty.
Web author: person who writes the text on a web page.
Web designer: person who develops the look and feel of a web page.
Web developer: person who uses programming skills to develop websites.
Webmaster: person who manages and maintains websites.
I would be a good web designer because I like making websites pretty.
Notes 3
Notes 3
How the internet works
· Internet service provider- business that provides a network to customers.
· Protocol- set of rules and procedures that specify how data are formatted and transferred between computers.
· Hypertext transfer protocol (http) - used to transfer files from a web server to a web browser.
· File transfer protocol- standardized method of uploading and downloading files on the internet.
Other networks
· Intranet- wan designed to make it easy to share info within an organization.
· Extranet- network that can be accessed by an outside user.
· URL- unique address that enables a browser to locate pages on the web.
· Domain name- part of URL that id’s the entity.
· Domain name extension- part of the URL that tells users what type of organization uses the address.
· Accessibility option- feature that allows differently able individuals to access and use web pages.
· Search engine- app that locates info and stores it in the data base and then you can access it from your browser.
· Web directory- search tool that catalogs websites by topic or category.
· Keyword- important word related to the topic you’re trying to locate.
· Boolean search- type of search that combines key words to locate different pages.
Software needs
· Text editor- app used to enter and edit html code.
· Website development app- app used to create websites.
· WYSIWYG- what you see is what you get.
Hardware needs
· Web hosting service- service that sells web server space.
· External hyperlink- hyperlink that takes a user to a page on a different website.
How the internet works
· Internet service provider- business that provides a network to customers.
· Protocol- set of rules and procedures that specify how data are formatted and transferred between computers.
· Hypertext transfer protocol (http) - used to transfer files from a web server to a web browser.
· File transfer protocol- standardized method of uploading and downloading files on the internet.
Other networks
· Intranet- wan designed to make it easy to share info within an organization.
· Extranet- network that can be accessed by an outside user.
· URL- unique address that enables a browser to locate pages on the web.
· Domain name- part of URL that id’s the entity.
· Domain name extension- part of the URL that tells users what type of organization uses the address.
· Accessibility option- feature that allows differently able individuals to access and use web pages.
· Search engine- app that locates info and stores it in the data base and then you can access it from your browser.
· Web directory- search tool that catalogs websites by topic or category.
· Keyword- important word related to the topic you’re trying to locate.
· Boolean search- type of search that combines key words to locate different pages.
Software needs
· Text editor- app used to enter and edit html code.
· Website development app- app used to create websites.
· WYSIWYG- what you see is what you get.
Hardware needs
· Web hosting service- service that sells web server space.
· External hyperlink- hyperlink that takes a user to a page on a different website.
Notes 4
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
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
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
Notes 6
Notes 6
Creating website content
Waiting for the web
· Content- the text and graphics included on a web page.
· Inverted pyramid- the type of narrative structure that puts the important info at beginning.
Web page dimensions
· Pixel- single point in a graphic image
· Screen resolution- amount of pixel computer can display
Page layout guidelines
· Blank space- area on a website without any content
· Proximity- closest elements on a page
Title graphic
· Logo- symbol used to represent a business.
· Title graphic- an image that appears at the top of a web page.
Table
· Table- item consisting of rows and columns that’s used to organize content.
· Column- cells in a table arranged vertically.
· Row-cells in a table arranged horizontally.
· Cell- each individual square.
Navigation buttons
· A button that users click to locate additional info
· Hover button- changes appearance when hovered over
· Interactive button- button that changes to let users know that action has taken place
Footer info
· Footer- bottom pusher of a web page
Creating website content
Waiting for the web
· Content- the text and graphics included on a web page.
· Inverted pyramid- the type of narrative structure that puts the important info at beginning.
Web page dimensions
· Pixel- single point in a graphic image
· Screen resolution- amount of pixel computer can display
Page layout guidelines
· Blank space- area on a website without any content
· Proximity- closest elements on a page
Title graphic
· Logo- symbol used to represent a business.
· Title graphic- an image that appears at the top of a web page.
Table
· Table- item consisting of rows and columns that’s used to organize content.
· Column- cells in a table arranged vertically.
· Row-cells in a table arranged horizontally.
· Cell- each individual square.
Navigation buttons
· A button that users click to locate additional info
· Hover button- changes appearance when hovered over
· Interactive button- button that changes to let users know that action has taken place
Footer info
· Footer- bottom pusher of a web page
Notes 7
Notes 7
Principles of design
Consistency and repetition
· Consistency- logical coherence among parts using similar elements.
· Repetition- duplicating specific elements on all the sites pages
Creating web pages
· Page banner- page elements that contains graphics at the top of a page.
Color scheme guidelines
· Color scheme- a set of selected colors used consistently for a websites elements.
Web safe colors
· Web safe colors- the 216 colors that display consistently from computer to computer.
Text properties
· Typography-style arrangement and placement of text.
· Font- a family of letters, numbers, and other symbols, that share a consistent style.
· Point- traditional unit of type measurement.
· Alignment- the position of text on a page.
Formatting guidelines
· Serif- font that has an extra line or curve on the ends of certain letters or numbers.
· Sans serif- font that’s not special.
Creating subpages
· Subpage- page that is a child of another page.
Image maps
· Image map- graphic with clickable areas called hotspot.
· Hotspot- graphic link to related page.
Principles of design
Consistency and repetition
· Consistency- logical coherence among parts using similar elements.
· Repetition- duplicating specific elements on all the sites pages
Creating web pages
· Page banner- page elements that contains graphics at the top of a page.
Color scheme guidelines
· Color scheme- a set of selected colors used consistently for a websites elements.
Web safe colors
· Web safe colors- the 216 colors that display consistently from computer to computer.
Text properties
· Typography-style arrangement and placement of text.
· Font- a family of letters, numbers, and other symbols, that share a consistent style.
· Point- traditional unit of type measurement.
· Alignment- the position of text on a page.
Formatting guidelines
· Serif- font that has an extra line or curve on the ends of certain letters or numbers.
· Sans serif- font that’s not special.
Creating subpages
· Subpage- page that is a child of another page.
Image maps
· Image map- graphic with clickable areas called hotspot.
· Hotspot- graphic link to related page.
Notes 8
Notes 8
Using themes and shared borders
· Shared borders- an area that stays the same on all the pages.
Types of graphics
· Raster graphics- graphic made up of pixels.
· Paint program- type of software used to make raster graphics.
· Vector graphic- graphic composed in simple lines.
Graphic file formats
· Gif- only 256 colors can be saved.
· Jpeg- can support millions of colors.
Compression schemes
· Lose less compression- lose no data
· Loss compression- less data.
Creating graphics
· Scanner- hardware device that converts a printed image into a digital format.
· Digital camera- photographic device that saves images in digital format.
Creating graphics
· Word art- text with special formatting.
Modifying graphics
· Resizing- changing the size of an image.
· Aspect ratio- relationship between height and width of an image.
Photo gallery
· Photo gallery- collection of photographs.
· Thumbnail- smaller image that links to a larger image.
Using themes and shared borders
· Shared borders- an area that stays the same on all the pages.
Types of graphics
· Raster graphics- graphic made up of pixels.
· Paint program- type of software used to make raster graphics.
· Vector graphic- graphic composed in simple lines.
Graphic file formats
· Gif- only 256 colors can be saved.
· Jpeg- can support millions of colors.
Compression schemes
· Lose less compression- lose no data
· Loss compression- less data.
Creating graphics
· Scanner- hardware device that converts a printed image into a digital format.
· Digital camera- photographic device that saves images in digital format.
Creating graphics
· Word art- text with special formatting.
Modifying graphics
· Resizing- changing the size of an image.
· Aspect ratio- relationship between height and width of an image.
Photo gallery
· Photo gallery- collection of photographs.
· Thumbnail- smaller image that links to a larger image.