Semester - Review
Final Exam Topics HTML CSS Design Project Planning Internet Underpinnings
HTML Review Topics Required Tags: <html>, <head>, <title>, <body> Tag, Attribute, Value Headings: <h1> to <h6> tags Paragraphs & Breaks: <p> and <br /> Hyperlinks & Anchors:<a> - href and name attributes Images:<img> - src, alt, width, and height attributes Lists: <ul>, <ol>, <li> Tables: <table>, <tr>, <th>, <td>
CSS Review Topics <link> tag CSS Rules Selectors CSS Layout Property and Value pairs Selectors CSS Layout CSS Box Model
Design Topics Color Schemes Usability Accessibility
Project Planning Topics Project Charter Wireframe Storyboard
Internet Underpinnings https://www.youtube.com/watch?v=7_LPdttKXPc IP Address Protocols HTTP SMTP Packets DNS
HTML
Review Process Create sample HTML code that demonstrates your area. Use all tags and attributes on Review screen. Be prepared to discuss your area on what each of the tags/attribute is for.
Required: <html>, <head>, <title>, <body> Tag Description <html> Tells the browser that this is an HTML document. <head> Contains information about the page. <title> The title of the page. <body> Contains the content that is rendered. <html> <head> <title>My Title</title> </head> <body> </body> </html>
The forward slash indicates that the tag is closed Tag, Attribute, Value The forward slash indicates that the tag is closed <hr /> <h1>Heading 1</h1> <body bgcolor=“#000000”> Opening tag Tag content Closing tag Opening tag Attribute Attribute value
Headings The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading
Paragraphs and Breaks <p> … </p> creates a block or paragraph of text. <br/> creates a new line. It is an opening and closing element in one, as designated by the slash at the end.
Hyperlinks and Anchors Example: <a href="Charles.html">Charles Dickens</a> href possible values An absolute URL - points to another web site Example: href="http://www.example.com/default.htm" A relative URL - points to a file within a web site Example: href="default.htm" An anchor URL - points to an anchor within a page Example: href="#top" Anchor Example: <a name="Early">Early years</a> <a href="#Early">Early Life</a> Like a bookmark in word
Images - <img> tag Attribute Description src Specifies the location of the image file. Has two formats: An absolute URL that points to another web site Example: href="http://www.example.com/pic.jpg” A relative URL that points to a file within a web site Example: href="default.htm") alt Provides text if the image won’t load, is displayed in some browsers when you hover over the image, and helps the vision impaired to know what the image is about. width Sets the width of the image. height Sets the height of the image.
Lists: <ul>, <ol>, <li> Tag Description <ul> Unordered or bulleted list. <ol> Ordered or numbered list. <li> List item
Tables Tag Description <table>…</table> begins and ends a table <tr>….</tr> defines a table row <th>…</th> defines table heading <td>…</td> defines table data
CSS
External Styles Define external style sheet in the <head> tag Exercise Open a new file in Notepad++ Select Language -> C ->CSS Type a CSS rule for the <p> tag that does the following: Sets the color Sets the font-family (i.e. verdana) Save as mystyles.css where favorites.html is Open favorites.html, add the <link> tag to the page to point to mystyles.css
CSS – Rules CSS Rule Syntax has 3 parts: Selector Property Value
Categories of Selectors Example Description HTML tag P{ color:red; } Styles can be applied to each HTML tag ID #foo{ Allows you to give a unique ID to any single element on the page Class .bar { color:blue; Classes are a way to group some elements and give a style to only that group Pseudo-class a:link{ color:#FF0000; CSS pseudo-classes are used to add special effects to some selectors Combinations of the above h1.bar { bgcolor:yellow;
Property Names Property Example Description color color:red; sets text color background-color background-color:#0000FF; sets background color background-image background-image:url('paper.gif'); sets the background image background-repeat background-repeat:repeat-x; sets how the background image repeats text-align text-align:right; sets horizontal alignment of text and other tags within the tag; can also use center, left vertical-align vertical-align:top; sets vertical alignment of text and other tags within the tag. can also use middle, bottom text-decoration text-decoration:none; decoration values: none, overline, line-through, underline, blink font-family font-family:"Goudy", "Garamond", serif; sets font names, chosen in order if they exist on the computer. use serif or sans-serif as generic font names font-style font-style:italic; italic text. Can also have value:normal; font-size font-size:20px; sets font size font-weight font-weight:bold; sets bold font. Can also have value:normal; list-style-type list-style-type:circle; sets bullet type for lists on <ul> and <ol> tag. border border: 1px solid black; sets a 1 pixel wide black solid border. Use on <table>, <td>, <th> border-collapse border-collapse:collapse; removes space between td borders. Use on <table> width width:30px; height:50px; sets width or height of the tag. Can also use %, width:50%; padding padding:15px; sets extra white space padding in td tags in tables Float float:left; (must be combined with width) sets a div to allow content to flow to the right of it
Inline vs Block Tags Block Elements Inline Elements Have line break before and after Contain inline elements and other block elements Examples: <div> <p> <h1> ~ <h6> <ul>, <ol> <li> <table> <tr>, <td>, <th> Have no line break before and after Contain text and other inline elements Examples: <span> <a> <br /> Example of Block tags: Example of Inline tags:
Let's look at Amazon.com as an example CSS Layout CSS Layout is about using DIVs to define boxes on a page to act as a page template, and hold specific pieces of content that may change across pages. div block div block Steps: Set width and height of each block Set a property for side by side Fill each with what you want Let's look at Amazon.com as an example
Separate and distinct HTML sections in a web page Makes it possible to apply styles to related HTML elements on a page at once
CSS Box Model
Border Properties border-color Color to fill border #EDEDED Property Description Example Values border Specify thickness, style, color in order 10px solid #FF0000 border-color Color to fill border #EDEDED border-width Width of border on all 4 sides 10px border-style Style of border on all 4 sides none, hidden, dotted, dashed, double, groove, insert, outset, ridge, solid Combined styles for width, style, color in that order border-top, border-bottom, border-left, border-right Style for one side of the borders
Padding/Margin Properties Property Description Example Values padding Padding for all 4 sides: One value for all 4 sides In clock-wise order: Top Right Bottom Left 5px 2px 3px 3px 2px (T R B L ) padding-top, padding-right, padding-bottom, padding-left Padding for one side of the box 10px margin Margin for all 4 sides: margin-top, margin-right, margin-bottom, margin-left Margin for one side of the box Property Description Example Values float Set a block to one side of the page The floating block must have a width left, right, none clear Turns off float effects left, right, both, none display How an HTML element should be display. {display:none} hides the element and does not take up any space. inline, block, none visibility Show or hide an element. {visibility:hidden} hides the element but still takes up the same space. visible, hidden
Centering using margin:auto Set margin: auto Set a specific width.
Project Planning
Planning Process Interview the customer Create a Project Charter Determine their needs Create a Project Charter Write down what you thought the customer wanted Review the Project Charter with Customer and Refine requirements as necessary Create a set of options for the customer (Wireframes) Avoids surprises at the end Provides a checkpoint that the project is on the right track Gives the customer concrete examples Acquire needed resources Create a work breakdown structure Build the Project
Design
Usability What is it? What is good usability? What is bad usability? A measure of effectiveness. It describes how effective the site is in helping us accomplish tasks What is good usability? Users can achieve the goals set out for the page Loads quickly What is bad usability? Difficult to use Takes too long to load How to assess Testing with real users, including relatives Use a web accessibility evaluation tool Examples http://themagicofbaltimore.blogspot.co.uk/ http://www.roverp6cars.com/ http://www.headhunterhairstyling.com/HowDoIGetThere.html
Accessibility Ensuring the web page can be accessed and used by people with diverse abilities. For example, Vision Impaired Using alternative text for pictures Use High-Contrast Fonts http://www.hknc.org/
Internet Underpinnings
What is the Internet? A global collection of network-connected computers and/or sub-networks