COMP 2511 HTML CSS Outcomes The intent of this assignment is to build towards a mastery of using HTML and CSS Skills learned in this assignment are subject to examination Upon successful completion of this assignment the student will Understand the syntax of HTML markup Be able to describe and apply semantic tags to create structural meaning Be able to build a consistent navigation structure over multiple pages Be able to understand and use appropriate HTML attributes and tags Use absolute and relative links correctly Include at least one image in the webpage and addressing its accessibility appropriately Use CSS selectors Apply CSS stylesheets to achieve consistent appearance of the elements as directed Submission All assignment files must be included in a Git project to share with your instructor, by the due date No changes must be made to the project after the deadline The contribution of each team member must be visible in your Git history Your project must be private You must give your instructor permission to access your project (Read or Collaborator access) Grading Your assignment will be graded based on the overall quality of the pages, consistency between pages, as well as completion of the requirements on a per page basis Content Requirements In this assignment, you will be developing a Website The content of your Website can be about one the following social challenges Importance of extracurricular activities for students A Website that helps undergraduate students learn about social challenges that you consider important The content of your website should be unique from other groups and your website should not copy paste content from an existing web page on the Internet, try to be creative and generate your own content You may read some references to learn more about the topic, before writing your own content When needed, use proper citation In assignment 1, you are requested to create the content of your Website, using HTML and style it through the application of CSS stylesheets In the following assignments, you will improve the layout and responsiveness of your Website Structural Requirements 1 You must submit valid https validator w3 org and semantically appropriate HTML5 code (use of semantic tags like header nav etc ) 2 You must create at least 3 web pages that will define your Website The pages must be named properly in their filenames and page titles 3 Each of your pages must be consistent with one another There should be a a consistent look and feel between pages b navigation menu with links from to all 3 other pages 4 Your Website must include A logo for your company (this doesnt have to be professional and avoid using copyrighted content from found on the Internet) Appropriate content on every page Appropriate META tags must be provided for each page Ensure a unique and descriptive tag for each page 5 Use the following elements in your Website a At least, one photo enclosed in a with a (not the logo) All images must be stored in a local directory called images You must define alt attributes for all pictures for accessibility (Note that you may leave the value of alt attribute empty for decorative images ) b At least one HTML comment This can be anywhere in the page c One External link to another Website that opens in a new tab d At least one link to another place on the same page e A table with a merged (spanned) cell 6 Semantic markup a Use tag and define a consistent menu on each page b Use , , , and tags to properly define the structure of your pages 7 A form design for contacting you that has a A mandatory input box for the subject Include a max length for user input b A mandatory textarea for entering the body of the inquiry c A mandatory input box to get users email address Include a place holder to show the valid format and a pattern to validate the input d An optional box to get users telephone number Must include a place holder to show the valid format and a pattern to validate the input e Radio buttons with at least 2 different options f Checkboxes with at least 2 different options to select g A reset button that clears all form inputs h An input element that accepts date input i A submit button that submits the form to an email address 8 Valid HTML5 markup Your site should validate without error (warnings are ok) 9 Submit your own raw HTML code evidence of automatically generated HTML code will result in a 0 10 Do not add any internal embedded CSS, JavaScript, or other advanced components to the site CSS Requirements 1 Navigation menu In every page, the menu item of the current page must be styled differently (e g special color to indicate the user is at this menu items page) 2 Use the first letter pseudo element selector to style a first letter of (at least) one of your paragraphs differently 3 Use a pseudo class selector of your choice in one of your pages 4 Use a contextual selector of your choice in one of your pages 5 Use an attribute selector of your choice in one of your pages 6 Style your table using CSS properties to have striped table format (i e , style even and odd rows with different colors You should not use inline styling for this 7 Float an image to the right side of a paragraph of your choice in your Website 8 Uses consistent design for the header and footer area in all pages The whole website should have a professional look and design 9 Use external CSS files to style your Website Include all your CSS files inside a folder called style and include them in the section of your HTML files 10 All pages must use consistent font, margin, padding These must be defined using a general CSS file shared by all pages Page specific styles should be defined in separate CSS files Note that you can include multiple CSS files for your HTML files Note If a specific requirement is not given for a part of your Website, you are welcome to use CSS properties to create a design of your choice

Question

COMP 2511  HTML   CSS Outcomes The intent of this assignment is to build towards a mastery of using HTML and CSS  Skills learned in this assignment are subject to examination  Upon successful completion of this assignment the student will  Understand the syntax of HTML markup  Be able to describe and apply semantic tags to create structural meaning  Be able to build a consistent navigation structure over multiple pages  Be able to understand and use appropriate HTML attributes and tags  Use absolute and relative links correctly  Include at least one image in the webpage and addressing its accessibility appropriately  Use CSS selectors  Apply CSS stylesheets to achieve consistent appearance of the elements as directed  Submission All assignment files must be included in a Git project to share with your instructor, by the due date  No changes must be made to the project after the deadline  The contribution of each team member must be visible in your Git history  Your project must be private  You must give your instructor permission to access your project (Read or Collaborator access)  Grading Your assignment will be graded based on the overall quality of the pages, consistency between pages, as well as completion of the requirements on a per page basis  Content Requirements In this assignment, you will be developing a Website  The content of your Website can be about one the following social challenges  Importance of extracurricular activities for students  A Website that helps undergraduate students learn about social challenges that you consider important  The content of your website should be unique from other groups and your website should not copy paste content from an existing web page on the Internet, try to be creative and generate your own content  You may read some references to learn more about the topic, before writing your own content  When needed, use proper citation  In assignment 1, you are requested to create the content of your Website, using HTML and style it through the application of CSS stylesheets  In the following assignments, you will improve the layout and responsiveness of your Website  Structural Requirements 1  You must submit valid https   validator w3 org  and semantically appropriate HTML5 code (use of semantic tags like header nav etc )  2  You must create at least 3 web pages that will define your Website  The pages must be named properly in their filenames and page titles  3  Each of your pages must be consistent with one another  There should be  a  a consistent look and feel between pages b  navigation menu with links from to all 3 other pages 4  Your Website must include  A logo for your company  (this doesnt have to be professional and avoid using copyrighted content from found on the Internet) Appropriate content on every page  Appropriate META tags must be provided for each page  Ensure a unique and descriptive tag for each page  5  Use the following elements in your Website  a  At least, one photo enclosed in a with a (not the logo)  All images must be stored in a local directory called images  You must define  alt  attributes for all pictures for accessibility  (Note that you may leave the value of alt attribute empty for decorative images ) b  At least one HTML comment  This can be anywhere in the page  c  One External link to another Website that opens in a new tab d  At least one link to another place on the same page  e  A table with a merged (spanned) cell  6  Semantic markup  a  Use tag and define a consistent  menu  on each page  b  Use , , , and tags to properly define the structure of your pages  7  A form design for contacting you that has  a  A mandatory input box for the subject  Include a max length for user input  b  A mandatory textarea for entering the body of the inquiry  c  A mandatory input box to get users email address  Include a place holder to show the valid format and a pattern to validate the input  d  An optional box to get users telephone number  Must include a place holder to show the valid format and a pattern to validate the input  e  Radio buttons with at least 2 different options  f  Checkboxes with at least 2 different options to select  g  A reset button that clears all form inputs h  An input element that accepts date input  i  A submit button that submits the form to an email address  8  Valid HTML5 markup  Your site should validate without error (warnings are ok)  9  Submit your own raw HTML code evidence of automatically generated HTML code will result in a 0  10  Do not add any internal embedded CSS, JavaScript, or other advanced components to the site  CSS Requirements 1  Navigation menu  In every page, the menu item of the current page must be styled differently  (e g  special color to indicate the user is at this menu items page) 2  Use the first letter pseudo element selector to style a first letter of (at least) one of your paragraphs differently  3  Use a pseudo class selector of your choice in one of your pages  4  Use a contextual selector of your choice in one of your pages  5  Use an attribute selector of your choice in one of your pages  6  Style your table using CSS properties to have striped table format (i e , style even and odd rows with different colors  You should not use inline styling for this  7  Float an image to the right side of a paragraph of your choice in your Website  8  Uses consistent design for the header and footer area in all pages  The whole website should have a professional look and design  9  Use external CSS files to style your Website  Include all your CSS files inside a folder called style and include them in the section of your HTML files  10  All pages must use consistent font, margin, padding  These must be defined using a general CSS file shared by all pages  Page specific styles should be defined in separate CSS files  Note that you can include multiple CSS files for your HTML files  Note  If a specific requirement is not given for a part of your Website, you are welcome to use CSS properties to create a design of your choice

Accepted Answer

The Answer is in the image, click to view ...

Question

COMP 2511: HTML & CSS Outcomes The intent of this assignment is to build towards a mastery of using HTML and CSS. Skills learned in