Comprehensive Study Guide for Web Design 1 Final Exam

Slide Note

This study guide covers essential topics such as HTML, CSS, history of HTML, goals of HTML5, HTML5 syntax rules, HTML5 DOCTYPE, and basic HTML5 coding. It explains the evolution of HTML standards, the purposes of HTML5, and provides practical examples for better understanding.

wake_est Follow

Uploaded on Nov 18, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

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 HTML first published 1991 HTML 2.0 1995 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. HTML 3.2 1997 HTML 4.01 1999 XHTML 2.0 had very strict standards but was abandoned in 2009 in favor of HTML5. XHTML 1.0 2000 HTML5 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. 2002 - 2009 XHTML 2.0 HTML5 2012 HTML5.1 is currently under development and expected to be finalized in late 2016. HTML5.1 2014

Goals of HTML5 Support 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.

HTML5 - Looser Syntax Rules In 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.

HTML5 DOCTYPE In 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.

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.

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 HTML5 better define and organize web documents.

Semantic Elements in Site Layout There 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.

New Semantic Elements in HTML5 1. The use of semantics in HTML5 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"> <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; }

The HTML5 <header> Element HTML5 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.

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>

The Footer Section in XHTML In 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; }

The HTML5 <footer> Element HTML5 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.

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

The HTML5 <nav> Element HTML5 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; ... }

The <article> Element 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. 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.

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

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 HTML5 The <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.

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: <h2 style="color:red;">CAUTION: Icy Road Conditions</h2> <h2>Please Slow Down!</h2> 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. 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"> h2 {color:red;} </style> </head> <body> <h2>CAUTION: Icy Road Conditions</h2> <h2>Please Slow Down!</h2> </body> 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.

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): h2 {color:red;} example.html 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> 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> ... <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.

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 Customer Service Technical Support Content Updates STEP 2: Specification Information Architecture User Experience Planning Functionality Usability Testing, Ease of Operation STEP 7: Launch and Site Promotion Migration and Deployment Online Marketing Print Marketing Publicity Offsite Search Engine Optimization (SEO) STEP 3: Wireframes and Design Wireframing Interactive Design Application Modeling and Prototyping STEP 4: Content Production Marketing Strategy Copywriting Storyboarding STEP 6: Testing User Acceptance Testing Quality Assurance Copyediting 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.

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