Semester 2 HTML and CSS HTML and CSS are a collection of web standards HTML and CSS are a set of best practices for building websites DO NOT PRINT History of HTML HTML first published ID: 1031222
Download Presentation The PPT/PDF document "Web Design 1 – Final Exam Study Guide" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
1. Web Design 1 – Final Exam Study Guide~ Semester 2 ~
2. HTML and CSSHTML and CSS are a collection of web standards.HTML and CSS are a set of best practices for building websites.DO NOTPRINT
3. History of HTMLHTML firstpublished199120122002 -20092000HTML 2.0HTML 3.2HTML 4.01XHTML 1.0XHTML 2.0HTML5199519971999HTML5 is much more tolerant and can handle markup from all the prior versions. A working draft was released in 2012 and it is scheduled to be finalized by the end of 2014.After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.XHTML 2.0 had very strict standards but was abandoned in 2009 in favor of HTML5.2014HTML5.1HTML5.1 is currently under development and expected to be finalized in late 2016.DO NOTPRINT
4. Goals of HTML5Support all existing web pages. With HTML5, there is no requirement to go back and revise older websites.Reduce the need for external plugins and scripts to show website content.Improve the semantic definition (i.e. meaning and purpose) of page elements.Make the rendering of web content universal and independent of the device being used.Handle web document errors in a better and more consistent fashion.DO NOTPRINT
5. HTML5 - Looser Syntax RulesIn an effort to make HTML5 accommodate older web pages, numerous things that would be invalid in XHTML are now permitted as valid.To web designers accustomed to writing strict code in XHTML, these looser rules might appear sloppy or unprofessional.These relaxed rules are not suggestions or guidelines for modern web programmers. Rather, they were put in place to be more accepting of older websites.DO NOTPRINT
6. HTML5 DOCTYPEIn HTML5, there is just one possible DOCTYPE declaration and it is simpler:<!DOCTYPE html>Just 15 characters!The DOCTYPE tells the browser which type and version of document to expect. DO NOTPRINT
7. Basic HTML5 coding<!DOCTYPE html><html> <head> <title>My Page</title> </head> <body> <div id=“contact”> <h1>Contact</h1> </div> </body></html>Be familiar with the order of tags when creating an HTML document.DO NOTPRINT
8. Semantics ExplainedThe textbook definition of "semantics" is the study of the relationship between words and their meanings.In the context of HTML, a semantic element is one whose name describes its actual purpose.The new semantic elements in HTML5 better define and organize web documents.DO NOTPRINT
9. Semantic Elements in Site LayoutThere is no "right way" to create a website layout in HTML5. The best approach is to use the semantic elements, within their intended purposes, in the way that presents our page content most effectively to our audience. We can still use <div> elements in HTML5 but only when they are being used solely for styling purposes or when there is no better choice among the semantic elements.DO NOTPRINT
10. New Semantic Elements in HTML5<figcaption><footer> (not to be confused with “foot”)<header> (not to be confused with “head”)<hgroup><mark><nav><progress><section><source><svg><time><video><article><aside><audio><canvas><datalist><figure>The use of semantics in HTML5 provide meaning for elements.In the context of HTML, the names of semantic elements describe their actual purposes.DO NOTPRINT
11. The Header Section in XHTMLRemember how a typical XHTML web page defined the header section? <div class="header"> <h1>My Super Cool Website</h1></div>And here's the CSS styling to define the height, width, and background color of the header section, as well as the text color and size of the <h1> heading: .header { height: 100px; width: 800px; background-color: #0033FF;}.header h1 { text-size: 24px; color: #CCCCCC;}DO NOTPRINT
12. The HTML5 <header> ElementHTML5 now gives us a new semantic element for the header section:<header> <h1>My Super Cool Website</h1></header>In the CSS style sheet, adding styling to the header section is done using the element itself, rather than via a <div> class. Notice there is no preceding dot:header { height: 100px; width: 800px; background-color: #0033FF;}header h1 { text-size: 24px; color: #CCCCCC;}The HTML5 page still looks identical to the XHTML page.DO NOTPRINT
13. Improving Code using the <header> element<div class=“header”> <h1>A to Z Music Group</h1></div>The above code can be improved by using the <header> element:<header><h1>A to Z Music </h1></header>DO NOTPRINT
14. The Footer Section in XHTMLIn XHTML, defining the footer section was done in a similar fashion:<div class="footer"> <p>© 2013 SuperCool LLC</p></div>Here is the corresponding CSS styling to the footer section and text:.footer { height: 40px; width: 800px; background-color: #0033FF;}.footer p { text-size: 16px; color: #CCCCCC; text-align: center;}DO NOTPRINT
15. The HTML5 <footer> ElementHTML5 now provides us with a dedicated <footer> element:<footer> <p>© 2013 SuperCool LLC</p></footer>The CSS styling remains the same, but we are now styling the element directly, rather than a class:footer { height: 40px; width: 800px; background-color: #0033FF;}footer p { text-size: 16px; color: #CCCCCC; text-align: center;}Again, the two pages (XHTML and HTML5) look the same when rendered by a browser.DO NOTPRINT
16. Navigation in XHTMLIn XHTML, defining the navigation menu followed a similar path:<div class="nav"> <div class="navlink"> <a href="index.html">Home</a> </div> <div class="navlink"> <a href="page2.html">Page 2</a> ...</div>The CSS styled the <nav> class:.nav { border: 1px solid black; width: 798px; height: 35px;...}.navlink { width: 199px;...}DO NOTPRINT
17. The HTML5 <nav> ElementHTML5 now provides us with the semantic <nav> element:<nav> <div class="navlink"> <a href="index.html">Home</a> </div> <div class="navlink"> <a href="page2.html">Page 2</a> ...</nav>The CSS now styles the <nav> element:nav { border: 1px solid black; width: 798px; height: 35px;...}.navlink { width: 199px;...}DO NOTPRINT
18. The <article> ElementThe official specification for <article> states that it is “a self-contained composition in a page that is independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any independent item of content.”The key concept in the above definition is that it is self-contained. The <article> element was designed for content that can be extracted from its containing page and still retain its full value.In HTML5, there can be multiple <article> elements on a web page. In fact, this is fairly common. For example, a typical blog has several different blog posts visible on the home page, with the most recent post at the top.DO NOTPRINT
19. The <aside> ElementThe official specification for <aside> is “a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”It goes on to state that <aside> “can be used for effects like sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.”DO NOTPRINT
20. The <mark> elementThe official specification for <mark> is that it "indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author, but which is now under previously unexpected scrutiny."The definition goes on to say that <mark> "indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity."A familiar example is when a user performs a keyword search and the results page has the searched term highlighted. Another might be highlighting a portion of an original text that has taken on new importance.DO NOTPRINT
21. The <img> ElementTo place an image on our web page, we use the self-closing <img> element:<img src="double-rainbow.jpg" alt="Double Rainbow Photo" />The src attribute ("source") is required and supplies the name and location of the image file we wish to display. The value of the src attribute MUST BE IN QUOTES!The alt attribute ("alternative text") is required and determines what text will display on the web page if the image file is not available. The value of the alt attribute MUST BE IN QUOTES!DO NOTPRINT
22. Using <strong> in HTML5The <strong> element indicates semantic importance. It draws the reader's attention to an important portion of text.The existence of <strong> does not change the overall meaning of the sentence, however.<p>Warning: Ice is not safe to walk on.</p><p><strong>Warning:</strong> Ice is not safe to walk on.</p><p>The meeting is at 5:00pm on Saturday.</p><p>The meeting is at <strong>5:00pm on Saturday</strong>.</p>Warning: Ice is not safe to walk on.Warning: Ice is not safe to walk on.The meeting is at 5:00pm on Saturday.The meeting is at 5:00pm on Saturday.The <strong> element is a simple way for us to draw attention to something important on our page. Notice that if we do not bold the text, the meaning of the sentence remains the same.DO NOTPRINT
23. Three Ways to Use CSSInline Style - CSS code is placed directly into an XHTML element within the <body> section of a web page.Internal Style Sheet - CSS code is placed into a separate, dedicated area within the <head> section of a web page.External Style Sheet - CSS code is placed into a separate computer file and then linked to a web page.We can add CSS code in any combination of three different ways:Let's take a look now at examples of each of these methods.DO NOTPRINT
24. Inline StyleTo define an inline CSS style, we simply add the style attribute to an XHTML element with the CSS declaration as the attribute value:An inline style declaration is highly specific and formats just one element on the page. No other elements, including other <h2> elements on the page, will be affected by this CSS style.<h2 style="color:red;">CAUTION: Icy Road Conditions</h2><h2>Please Slow Down!</h2>Since inline styles have limited scope and do not separate content from presentation, their use is generally discouraged. We won't be using inline styles much in this class.DO NOTPRINT
25. Internal Style SheetTo use an internal CSS style sheet, we add a <style> section within the <head> of the page. All our CSS declarations go within this section:Styles declared in the internal style sheet affect all matching elements on the page. In this example, all <h2> page elements are displayed in the color red.Since formatting declarations are entirely in the <head> section, away from the actual page content, internal CSS style sheets do a much better job than inline styles at separating content from presentation.<head> ... <style type="text/css"> h2 {color:red;} </style></head><body> <h2>CAUTION: Icy Road Conditions</h2> <h2>Please Slow Down!</h2></body>DO NOTPRINT
26. External Style SheetTo use an external CSS style sheet, we create a new file (with a .css extension) and write our style declarations into this file. We then add a <link> element into our HTML file, right after the opening <head> tag:h2 {color:red;}style.css (separate file):<head> <link rel="stylesheet" type="text/css" href="style.css" /> ...</head><body> <h2>CAUTION: Icy Road Conditions</h2> <h2>Please Slow Down!</h2></body>example.html file:The <link> element instructs the browser to load the external file specified by the href attribute and to apply the CSS style declarations contained there.DO NOTPRINT
27. Syntax of Classes and IDsCSS style declarations for classes and IDs may be placed in internal and/or external style sheets. Here we're using an internal style sheet:<style type="text/css"> #headline { text-align: center; } .summary { font-style: italic; }</style>...<h1 id="headline">Big News!</h1><p class="summary">This is the text of the story summary. It should be shown in italics.</p><p>This is the main story text. It has no special styling yet.</p> Styling declarations for IDs begin with the pound sign and for classes with a period. DO NOTPRINT
28. Example Site Layouts – Identify the PartsDO NOTPRINT
29. Color wheelsAnalogous colors are adjacent to each other on the color wheel.Complementary colors are opposite each other on the color wheel.29DO NOTPRINT
30. Design elementsDesign elements are the building blocks of graphics.LineColor Shape Texture 30DO NOTPRINT
31. Color definitionsHue is another word for color.Chroma is the intensity or purity of color.Tint is a color mixed with white.Tone is a color mixed with gray.Shade is a color mixed with black.31DO NOTPRINT
32. Color in designUse color to label or show hierarchy.Use color to represent or imitate reality.Use color to unify, separate, or emphasize.Use color to decorate.Use color consistently.32DO NOTPRINT
33. Web Design Life CycleSTEP 1: AnalysisBusiness Needs AnalysisProject ObjectivesTimeline, Deliverables, MilestonesSTEP 2: SpecificationInformation ArchitectureUser Experience PlanningFunctionalityUsability Testing, Ease of OperationSTEP 3: Wireframes and DesignWireframingInteractive DesignApplication Modeling and PrototypingSTEP 4: Content ProductionMarketing StrategyCopywritingStoryboardingSTEP 5: Development and CodingCodingStandards ComplianceDatabase DevelopmentSTEP 6: TestingUser Acceptance TestingQuality AssuranceCopyeditingSTEP 7: Launch and Site PromotionMigration and DeploymentOnline MarketingPrint MarketingPublicityOffsite Search Engine Optimization (SEO)STEP 8: Maintenance and SupportCustomer ServiceTechnical SupportContent UpdatesDO NOTPRINT
34. Design principlesDesign principles are ways in which elements are used together.Movement Balance Emphasis Unity 34DO NOTPRINT
35. MovementMovement is the use of lines, color, and repetition to create the illusion of motion.35DO NOTPRINT
36. BalanceBalance is the act of comparing or estimating two things, one against the other, and the contrast between elements such as:Empty space (white space) and filled spaceText and imagesColor and no colors and different colorsTextures against flat colors36DO NOTPRINT
37. Symmetrical or formal balanceYou can usually identify at least one of three lines of symmetry.HorizontalVerticalDiagonal37DO NOTPRINT
38. Balance in compositionThere are three different types of balance when using color, shape, and position:SymmetryAsymmetryRadial symmetry38DO NOTPRINT
39. EmphasisEmphasis:To express with particular stress or force.39DO NOTPRINT
40. UnityUnity:The correct balance of composition or color that produces a harmonious effect.40DO NOTPRINT