Applying CSS Theme

Outcomes

The intent of this assignment is to build toward mastery of using CSS. Skills learned in this assignment will be built upon in subsequent activities. Upon successful completion of this assignment the student will:

• Understand the syntax of CSS definitions
• Ba able to apply CSS to style HTML elements
• Be able to understand the structure of CSS selectors, properties, and values
• Create styles embedded, inline, and external stylesheets to control page or site styles
• Understand how styles interact
• Demonstrate use of box and text styling

Content Requirements

This assignment is based upon Assignment HTML. You will be using the 6 pages created in the previous assignment to apply your styles. There is no need to update page content or structure. You will be applying style to the existing content and structure.

Functional Requirements

You must submit valid and semantically appropriate HTML5 controlled by at least 2 external stylesheets.

You must use at least 2 external CSS stylesheets.

For the dummy links, make the destination URL "#".

Each of your pages must be consistent with one another. There should be:

• a consistent layout look and feel between pages
• a rest stylesheet
• external stylesheet
• a set of rules for each semantic element of the page and all associated elements within that section. For example, all property types within the < main> will have a unique styling from other properties in the < header> or < footer> and so on. So the properties for < p> elements within the < main> would differ from the < p> properties within the < Footer> and so forth.
• Horizontal navigation menu with links between all pages (using an unordered list) - Nee Navigation requirements below

CSS Requirements

• Create at least 3 class selectors
• 2 ID selectors
• Make use of the following pseudo-class selectors: a:link, a:visited. :hover, :active
• Apply a style to the < body> adjusting the width, max-width, and margin properties. You may include this sample rule:

body { width: 100%; max-width: 960px; margin: 0 auto; } (done)

• The menu that allows on to navigate between all the site's pages
• Apply text styling for each semantic structural element (main, article, aside, header, footer)
• Create 3 unique rules for each < ul> and < ol> adjusting at least 5 properties within each rule (navigation ol style can be considered 1 style rule for ol).
• Adjust the box style model for at least 5 elements not including semantic structural elements (main, article, aside, header, footer)
• Properties on all pages must adjust Fonts, Text, Color and Background, borders, spacing, layout, list, and effects
• Define a style for links on page including :active, :hover, :visited psuedo-classes and elements (must differ from nav links)
• Create a rule for headings h1 and h2 at least (adjusting at least 5 properties for each)
• Create 2 unique embedded styles for the contact page (your selection of element and properties, hint: this will work well for a class or ID selector)

Navigation requirements:

• Apply to the < nav> element and all associated elements within the < nav>
• Horizontal navigation
• Must have unique style states set for hover and active links
• Apply a background color
• Hint: as you have 6 required pages (meaning 6 entries on the menu) if your < nav> width is set to 100% each menu block item should have a width value of 16.6%.
• Example: Styled horizontal nav. Note this nav image does not have functioning pseudo-classes or elements as required by this project, color of your choice for your nav style rules is your own. However links should not appear in default style (blue/purple with underline) in the final submission.

This activity does not specify any color or font type for the styles on the site or pages, but please keep in mind that the content must be readable and viewable, so be cognizant of your selection of color schemes and fonts. Assignments that are not readily readable or that are set to only black and white (default/inherited) will receive a maximum grade of 50% in the meantime explore and have fun with the creation of the styles for your site.

Starter Code

contact.html

< !DOCTYPE HTML>
< html>

< head>
< !--
Assignment by < Name>, < Date>, < Semester>
-->
< title>Contact Me< /title>
< meta name="description" content="website description" />
< meta name="keywords" content="website keywords, website keywords" />
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< /head>

< body>
< main>
< header>
< div id="logo">
< div id="logo_text">
< !-- class="logo_colour", allows you to change the colour of the text -->
< h1>< a href="lectures/lecture1.html">HTML5< span class="logo_colour"> Assignment< /span>< /a>< /h1>
< h2>Simple HTML5 Website< /h2>
< /div>
< /div>
< nav>
< ul id="menu">
< !-- these are the list of html pages I have in my project -->
< li>< a href="lectures/lecture1.html">Lecture 1< /a>< /li>
< li>< a href="lectures/lecture2.html">Lecture 2< /a>< /li>
< li>< a href="lectures/lecture3.html">Lecture 3< /a>< /li>
< li>< a href="lectures/lecture4.html">Lecture 4< /a>< /li>
< li>< a href="valid.html">Validator< /a>< /li>
< li class="selected">< a href="contact.html">Contact Me< /a>< /li>
< /ul>
< /nav>
< /header>
< div id="site_content">
< figure>
< img src="images/contact.png" alt="Contact Me picture" title="Contact Me">
< figcaption>< a href="http://clipart-library.com/contact-cliparts.html">Source< /a>< /figcaption>
< /figure>
< article>
< h1>Contact Me< /h1>
< p>Below are the details if you would like to contact me< /p>
< p>Name: < /p>
< p>Adress: < /p>
< p>Phone: < /p>
< p>E-Mail: < /p>
< /article>
< /div>
< div id="footer">
Created by Suman< /a>
< /div>
< /main>
< /body>
< /html>

lecture1.html

< !DOCTYPE HTML>
< html>

< head>
< !--
Assignment by < Name>, < Date>, < Semester>
-->
< title>Lecture 1< /title>
< meta name="description" content="website description" />
< meta name="keywords" content="website keywords, website keywords" />
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< /head>

< body>
< main>
< header>
< div id="logo">
< div id="logo_text">
< h1>< a href="lecture1.html">HTML5< span class="logo_colour"> Assignment< /span>< /a>< /h1>
< h2>Simple HTML5 Website< /h2>
< /div>
< /div>
< nav>
< ul id="menu">
< !-- these are the list of html pages I have in my project -->
< li class="selected">< a href="lecture1.html">Lecture 1< /a>< /li>
< li>< a href="lecture2.html">Lecture 2< /a>< /li>
< li>< a href="lecture3.html">Lecture 3< /a>< /li>
< li>< a href="lecture4.html">Lecture 4< /a>< /li>
< li>< a href="../valid.html">Validator< /a>< /li>
< li>< a href="../contact.html">Contact Me< /a>< /li>
< /ul>
< /nav>
< /header>
< div id="site_content">
< article>
< h1>Objective< /h1>
< p>The objective of the course is to learn Web Development.< /p>
< p>Web development is a term that encompasses multiple interrelated perspectives which include - graphic designing, database management, web security just to name a few. A web developer should have a foundational understanding of all aspectsm even if they only posses expertise in a handful of areas.< /p>
< h1>Textbook< /h1>
< p>We are using the textbook Fundamentals of Web Development (Ed. 2) by Randy Connolly and Ricardo Hoar for this course.< /p>
< h1>World Wide Web (WWW)< /h1>
< p>The World Wide Web (WWW or simply the Web) is certainly what most people think of when they see the word “Internet”. But the WWW is only a subset of the Internet. This invention is usually attributed to the British Tim Berners-Lee (now Sir Tim Berners-Lee), who, along with the Belgian Robert Cailliau, published a proposal in 1990 for a hypertext system while both were working at CERN in Switzerland. Shortly thereafter Berners-Lee developed the main features of the web.< /p>
< p>This web incorporated the following essential elements that are still the core features of the web today:
< ul>
< li>A Uniform Resource Locator (URL) to uniquely identify a resource on the WWW< /li>
< li>The Hypertext Transfer Protocol (HTTP) to describe how requests and responses operate< /li>
< li>Hypertext Markup Language (HTML) to publish documents.< /li>
< /ul>
< /p>
< /article>
< figure>
< img src="../images/image1.png" alt="WWW in a picture" title="Lecture 1">
< figcaption>< a href="https://pearson.com.au/products/A-C-Connolly-Hoar/Fundamentals-of-Web-Development/9780134481265?R=9780134481265">Source< /a>< /figcaption>
< /figure>
< /div>
< div id="footer">
Created by Suman< /a>
< /div>
< /main>
< /body>
< /html>

lecture2.html

< !DOCTYPE HTML>
< html>

< head>
< !--
Assignment by < Name>, < Date>, < Semester>
-->
< title>Lecture 2< /title>
< meta name="description" content="website description" />
< meta name="keywords" content="website keywords, website keywords" />
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< /head>

< body>
< main>
< header>
< div id="logo">
< div id="logo_text">
< h1>< a href="lecture1.html">HTML5< span class="logo_colour"> Assignment< /span>< /a>< /h1>
< h2>Simple HTML5 Website< /h2>
< /div>
< /div>
< nav>
< ul id="menu">
< !-- these are the list of html pages I have in my project -->
< li>< a href="lecture1.html">Lecture 1< /a>< /li>
< li class="selected">< a href="lecture2.html">Lecture 2< /a>< /li>
< li>< a href="lecture3.html">Lecture 3< /a>< /li>
< li>< a href="lecture4.html">Lecture 4< /a>< /li>
< li>< a href="../valid.html">Validator< /a>< /li>
< li>< a href="../contact.html">Contact Me< /a>< /li>
< /ul>
< /nav>
< /header>
< div id="site_content">
< article>
< h1>DNS< /h1>
< p>As elegant as IP addresses may be, human beings do not enjoy having to recall long strings of numbers. One can imagine how unpleasant the Internet would be if you had to remember IP addresses instead of domains. Rather than google.com, you’d have to type 173.194.33.32. If you had to type in 69.171.237.24 to visit Facebook, it is quite likely that social networking would be a less popular pastime.< /p>
< p>As the number of computers on the Internet grew, this hosts file had to be replaced with a better, more scalable, and distributed system. This system is called the Domain Name System (DNS).< /p>
< h1>URL< /h1>
< p>In order to allow clients to request particular resources from the server, a naming mechanism is required so that the client knows how to ask the server for the file. For the web that naming mechanism is the Uniform Resource Locator (URL). The first part of the URL is the protocol that we are using. Many of those protocols can appear in a URL, and define what application protocols to use. Requesting ftp://example.com/abc.txt sends out an FTP request on port 21, while http://example.com/abc.txt would transmit on port 80.< /p>
< /article>
< figure>
< img src="../images/image2.png" alt="DNS routing illustration" title="Lecture 2">
< figcaption>< a href="https://pearson.com.au/products/A-C-Connolly-Hoar/Fundamentals-of-Web-Development/9780134481265?R=9780134481265">Source< /a>< /figcaption>
< /figure>
< /div>
< div id="footer">
Created by Suman< /a>
< /div>
< /main>
< /body>
< /html>

lecture3.html

< !DOCTYPE HTML>
< html>

< head>
< !--
Assignment by < Name>, < Date>, < Semester>
-->
< title>Lecture 3< /title>
< meta name="description" content="website description" />
< meta name="keywords" content="website keywords, website keywords" />
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< /head>

< body>
< main>
< header>
< div id="logo">
< div id="logo_text">
< h1>< a href="lecture1.html">HTML5< span class="logo_colour"> Assignment< /span>< /a>< /h1>
< h2>Simple HTML5 Website< /h2>
< /div>
< /div>
< nav>
< ul id="menu">
< !-- these are the list of html pages I have in my project -->
< li>< a href="lecture1.html">Lecture 1< /a>< /li>
< li>< a href="lectures/lecture2.html">Lecture 2< /a>< /li>
< li class="selected">< a href="lecture3.html">Lecture 3< /a>< /li>
< li>< a href="lecture4.html">Lecture 4< /a>< /li>
< li>< a href="../valid.html">Validator< /a>< /li>
< li>< a href="../contact.html">Contact Me< /a>< /li>
< /ul>
< /nav>
< /header>
< div id="site_content">
< article>
< h1>What is HTML?< /h1>
< p>HTML is defined as a markup language.< /p>
< p>A markup language is simply a way of annotating a document in such a way as to make the annotations distinct from the text being annotated. At its simplest, markup is a way to indicate information about the content that is distinct from the content. This “information about content” in HTML is implemented via tags.< /p>
< h1>Aims of HTML< /h1>
< p>There are three main aims to HTML5:
< ol>
< li>Specify unambiguously how browsers should deal with invalid markup.< /li>
< li>Provide an open, nonproprietary programming framework (via JavaScript) for creating rich web applications.< /li>
< li>Be backwards compatible with the existing web.< /li>
< /ol>
< /p>
< /article>
< figure>
< img src="../images/image3.png" alt="HTML5 support in browsers" title="Lecture 3">
< figcaption>< a href="https://pearson.com.au/products/A-C-Connolly-Hoar/Fundamentals-of-Web-Development/9780134481265?R=9780134481265">Source< /a>< /figcaption>
< /figure>
< /div>
< div id="footer">
Created by Suman< /a>
< /div>
< /main>
< /body>
< /html>

lecture4.html

< !DOCTYPE HTML>
< html>

< head>
< !--
Assignment by < Name>, < Date>, < Semester>
-->
< title>Lecture 4< /title>
< meta name="description" content="website description" />
< meta name="keywords" content="website keywords, website keywords" />
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< /head>

< body>
< main>
< header>
< div id="logo">
< div id="logo_text">
< h1>< a href="lecture1.html">HTML5< span class="logo_colour"> Assignment< /span>< /a>< /h1>
< h2>Simple HTML5 Website< /h2>
< /div>
< /div>
< nav>
< ul id="menu">
< !-- these are the list of html pages I have in my project -->
< li>< a href="lecture1.html">Lecture 1< /a>< /li>
< li>< a href="lectures/lecture2.html">Lecture 2< /a>< /li>
< li>< a href="lecture3.html">Lecture 3< /a>< /li>
< li class="selected">< a href="lecture4.html">Lecture 4< /a>< /li>
< li>< a href="../valid.html">Validator< /a>< /li>
< li>< a href="../contact.html">Contact Me< /a>< /li>
< /ul>
< /nav>
< /header>
< div id="site_content">
< article>
< h1>Lists in HTML< /h1>
< p>HTML provides three types of lists:
< ul>
< li>Unordered lists. Collections of items in no particular order; these are by default rendered by the browser as a bulleted list. However, it is common in CSS to style unordered lists without the bullets. Unordered lists have become the conventional way to markup navigational menus.< /li>
< li>Ordered lists. Collections of items that have a set order; these are by default rendered by the browser as a numbered list.< /li>
< li>Definition lists. Collection of name and definition pairs. These tend to be used infrequently. Perhaps the most common example would be a FAQ list.< /li>
< /ul>
< /p>
< /article>
< figure>
< img src="../images/image4.png" alt="Types of lists in HTML5" title="Lecture 4">
< figcaption>< a href="https://pearson.com.au/products/A-C-Connolly-Hoar/Fundamentals-of-Web-Development/9780134481265?R=9780134481265">Source< /a>< /figcaption>
< /figure>
< /div>
< div id="footer">
Created by Suman< /a>
< /div>
< /main>
< /body>
< /html>

valid.html

< !DOCTYPE HTML>
< html>

< head>
< !--
Assignment by < Name>, < Date>, < Semester>
-->
< title>Validator< /title>
< meta name="description" content="website description" />
< meta name="keywords" content="website keywords, website keywords" />
< meta http-equiv="content-type" content="text/html; charset=UTF-8" />
< /head>

< body>
< main>
< header>
< div id="logo">
< div id="logo_text">
< !-- class="logo_colour", allows you to change the colour of the text -->
< h1>< a href="lectures/lecture1.html">HTML5< span class="logo_colour"> Assignment< /span>< /a>< /h1>
< h2>Simple HTML5 Website< /h2>
< /div>
< /div>
< nav>
< ul id="menu">
< !-- these are the list of html pages I have in my project -->
< li>< a href="lectures/lecture1.html">Lecture 1< /a>< /li>
< li>< a href="lectures/lecture2.html">Lecture 2< /a>< /li>
< li>< a href="lectures/lecture3.html">Lecture 3< /a>< /li>
< li>< a href="lectures/lecture4.html">Lecture 4< /a>< /li>
< li class="selected">< a href="valid.html">Validator< /a>< /li>
< li>< a href="contact.html">Contact Me< /a>< /li>
< /ul>
< /nav>
< /header>
< div id="site_content">
< alt src="images/valid.png" alt="Validator picture" title="
< /div>
< div id= "footer">
Created by Suman< /a>
< /div>
< /main>
< /body>
< /html>