Web Design 1 Final Exam Study Guide Semester

Web Design 1 – Final Exam Study Guide ~ 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.

History of HTML 1991 HTML first published 1995 HTML 2. 0 1997 HTML 3. 2 1999 HTML 4. 01 2000 XHTML 1. 0 2002 2009 XHTML 2. 0 2012 HTML 5 2014 HTML 5. 1 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 HTML 5 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. HTML 5. 1 is currently under development and expected to be finalized in late 2016.

Goals of HTML 5 • Support all existing web pages. With HTML 5, 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.

HTML 5 - Looser Syntax Rules • In an effort to make HTML 5 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.

HTML 5 DOCTYPE In HTML 5, 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.

Basic HTML 5 coding <!DOCTYPE html> <head> <title>My Page</title> </head> <body> <div id=“contact”> <h 1>Contact</h 1> </div> </body> </html> Be familiar with the order of tags when creating an HTML document.

Semantics Explained • The 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 HTML 5 better define and organize web documents.

Semantic Elements in Site Layout • There is no "right way" to create a website layout in HTML 5. 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 HTML 5 but only when they are being used solely for styling purposes or when there is no better choice among the semantic elements.

New Semantic Elements in HTML 5 1. The use of semantics in HTML 5 provide meaning for elements. 2. In the context of HTML, the names of semantic elements describe their actual purposes. <article> <aside> <audio> <canvas> <datalist> <figure> <figcaption> <footer> (not to be confused with “foot”) <header> (not to be confused with “head”) <hgroup> <mark> <nav> <progress> <section> <source> <svg> <time> <video>

The Header Section in XHTML Remember how a typical XHTML web page defined the header section? <div class="header"> <h 1>My Super Cool Website</h 1> </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 <h 1> heading: . header { height: 100 px; width: 800 px; background-color: #0033 FF; }. header h 1 { text-size: 24 px; color: #CCCCCC; }

The HTML 5 <header> Element HTML 5 now gives us a new semantic element for the header section: <header> <h 1>My Super Cool Website</h 1> </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: 100 px; width: 800 px; background-color: #0033 FF; } header h 1 { text-size: 24 px; color: #CCCCCC; } The HTML 5 page still looks identical to the XHTML page.

Improving Code using the <header> element <div class=“header”> <h 1>A to Z Music Group</h 1> </div> The above code can be improved by using the <header> element: <header> <h 1>A to Z Music </h 1> </header>

The Footer Section in XHTML In XHTML, defining the footer section was done in a similar fashion: <div class="footer"> <p>© 2013 Super. Cool LLC</p> </div> Here is the corresponding CSS styling to the footer section and text: . footer { height: 40 px; width: 800 px; background-color: #0033 FF; }. footer p { text-size: 16 px; color: #CCCCCC; text-align: center; }

The HTML 5 <footer> Element HTML 5 now provides us with a dedicated <footer> element: <footer> <p>© 2013 Super. Cool LLC</p> </footer> The CSS styling remains the same, but we are now styling the element directly, rather than a class: footer { height: 40 px; width: 800 px; background-color: #0033 FF; } footer p { text-size: 16 px; color: #CCCCCC; text-align: center; } Again, the two pages (XHTML and HTML 5) look the same when rendered by a browser.

Navigation in XHTML In 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="page 2. html">Page 2</a>. . . </div> The CSS styled the <nav> class: . nav { border: 1 px solid black; width: 798 px; height: 35 px; . . . }. navlink { width: 199 px; . . . }

The HTML 5 <nav> Element HTML 5 now provides us with the semantic <nav> element: <nav> <div class="navlink"> <a href="index. html">Home</a> </div> <div class="navlink"> <a href="page 2. html">Page 2</a>. . . </nav> The CSS now styles the <nav> element: nav { border: 1 px solid black; width: 798 px; height: 35 px; . . . }. navlink { width: 199 px; . . . }

The <article> Element n The 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. ” n 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. n In HTML 5, 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.

The <aside> Element n The 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. ” n 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. ”

The <mark> element n The 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. " n 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. " n 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.

The <img> Element To 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!

Using <strong> in HTML 5 n The <strong> element indicates semantic importance. It draws the reader's attention to an important portion of text. n 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: 00 pm on Saturday. </p> <p>The meeting is at <strong>5: 00 pm on Saturday</strong>. </p> Warning: Ice is not safe The meeting is at 5: 00 pm to to on on walk 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.

Three Ways to Use CSS We can add CSS code in any combination of three different ways: 1. Inline Style - CSS code is placed directly into an XHTML element within the <body> section of a web page. 2. Internal Style Sheet - CSS code is placed into a separate, dedicated area within the <head> section of a web page. 3. External Style Sheet - CSS code is placed into a separate computer file and then linked to a web page. Let's take a look now at examples of each of these methods.

Inline Style To define an inline CSS style, we simply add the style attribute to an XHTML element with the CSS declaration as the attribute value: <h 2 style="color: red; ">CAUTION: Icy Road Conditions</h 2> <h 2>Please Slow Down!</h 2> An inline style declaration is highly specific and formats just one element on the page. No other elements, including other <h 2> elements on the page, will be affected by this CSS style. 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.

Internal Style Sheet To 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: <head>. . . <style type="text/css"> h 2 {color: red; } </style> </head> <body> <h 2>CAUTION: Icy Road Conditions</h 2> <h 2>Please Slow Down!</h 2> </body> Styles declared in the internal style sheet affect all matching elements on the page. In this example, all <h 2> 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.

External Style Sheet To 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: style. css (separate file): h 2 {color: red; } example. html file: <head> <link rel="stylesheet" type="text/css" href="style. css" />. . . </head> <body> <h 2>CAUTION: Icy Road Conditions</h 2> <h 2>Please Slow Down!</h 2> </body> 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.

Syntax of Classes and IDs CSS 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>. . . <h 1 id="headline">Big News!</h 1> <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.

Example Site Layouts – Identify the Parts

Color wheels • Analogous colors are adjacent to each other on the color wheel. • Complementary colors are opposite each other on the color wheel. 29

Design elements • Design elements are the building blocks of graphics. • • Line Color Shape Texture 30

Color definitions • Hue 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. 31

Color in design • • • Use 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. 32

Web Design Life Cycle STEP 1: Analysis • • • Business Needs Analysis Project Objectives Timeline, Deliverables, Milestones STEP 8: Maintenance and Support • • • STEP 2: Specification Customer Service Technical Support Content Updates • • • STEP 7: Launch and Site Promotion • • • Information Architecture User Experience Planning Functionality Usability Testing, Ease of Operation STEP 3: Wireframes and Design Migration and Deployment Online Marketing Print Marketing Publicity Offsite Search Engine Optimization (SEO) • • • Wireframing Interactive Design Application Modeling and Prototyping STEP 4: Content Production • • • STEP 6: Testing • • • User Acceptance Testing Quality Assurance Copyediting Marketing Strategy Copywriting Storyboarding STEP 5: Development and Coding • • • Coding Standards Compliance Database Development

Design principles • Design principles are ways in which elements are used together. • • Movement Balance Emphasis Unity 34

Movement • Movement is the use of lines, color, and repetition to create the illusion of motion. 35

Balance • Balance 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 space Text and images Color and no colors and different colors Textures against flat colors 36

Symmetrical or formal balance • You can usually identify at least one of three lines of symmetry. • Horizontal • Vertical • Diagonal 37

Balance in composition • There are three different types of balance when using color, shape, and position: • Symmetry • Asymmetry • Radial symmetry 38

Emphasis • Emphasis: To express with particular stress or force. 39

Unity • Unity: The correct balance of composition or color that produces a harmonious effect. 40