Homework answers / question archive / ADMN 410 Spring 2021 HTML Project – CREATE A WEBSITE “The Sustainable Development Goals are the blueprint to achieve a better and more sustainable future for all

ADMN 410 Spring 2021 HTML Project – CREATE A WEBSITE “The Sustainable Development Goals are the blueprint to achieve a better and more sustainable future for all

Computer Science

Share With

ADMN 410 Spring 2021 HTML Project – CREATE A WEBSITE “The Sustainable Development Goals are the blueprint to achieve a better and more sustainable future for all. They address the global challenges we face, including poverty, inequality, climate change, environmental degradation, peace and justice. Learn more and take action.” - www.un.org/sustainabledevelopment/sustainable-development-goals OVERVIEW Your project is to build a website for a fictional business, with a connection to the Sustainable Development Goals. The focus of your fictional business does not need to be the Sustainable Development Goals, but instead threaded to it. For example, your business uses recyclable materials, supports local farmers, avoids wasting water, helps educate children in your community, etc. Your website will be four linked web pages named: • • • • • index.html (this will be your home page) the_team.html excel_access.html contact_us.html You will also have one external style sheet named style.css that all the html web pages will link to. Use the file you worked on in the previous weeks’ videos, complete.html, (with modifications) as the starting point for creating the home page. To do this you will open complete.html and save as index.html. This is where you start. Finish your home page, personalize the style sheet, and then use the home page as a starting point for the other three web pages. (When index.html is finished, save a copy as the_team.html, a copy as excel_access.html, and a copy as contact_us.html.) Your website can be for any type of business; however, it may not be related to alcohol or illegal activities. If there is any question as to whether your fictional business is appropriate, please speak to the instructor. Note: Acceptable Use for Information Technology Resources. Your website must include all the web pages and the specifications for each web page. Page 1 of 5 This document lists the requirements for each of the web pages and the style sheet. As long as you include the elements as described, you may add additional elements or improvements as you see fit. Use the website w3schools.com to help with tags, attributes and properties. All pages must be written to the HTML5 standard. To test the links between web pages you will locate all your project web pages, style sheet and images in a new folder on your computer. Once you have completed all the web pages, you must compress that folder with all of the necessary files, then submit it as an attachment to the HTML Project Assignment in Canvas to successfully complete your project. Before compressing the folder be sure to test all links to make sure they display appropriately. PROJECT WEB PAGE SPECIFICATIONS 1. index.html (your home page, MUST name this page index.html) a. Include an appropriate title. b. Use div tags with the class attribute to create the main “container” division for nesting the layout sections identified in Figure 1. Refer to complete.html. c. Include the company name in the HEADER layout section using an image (banner) generated at canva.com. Use the leaderboard size (728 x 90 pixels) or a custom size if you want to adjust the height. Custom would be 728 wide by up to 200 high. d. Have navigation to the other three pages in your website in the NAVIGATION layout section. e. Include in the ARTICLE layout section: 1. A slogan at the top of the section using heading tags. 2. At least two relevant images. You must make the images different sizes using the height or width attribute. 3. A paragraph on the history of your company – a brief description of the company’s background, such as when it was founded, by whom, products/services sold in early days, growth, etc. 4. A paragraph on your company goals – could be profit, sustainability, social responsibility, etc. 5. A brief paragraph with details on the services or products your company offers. Include at least three services or products your business provides using a LIST (the html LIST element). 6. Include links to two websites related to your business. Include a sentence or two describing why these websites are significant. f. Include in the ASIDE layout section: 1. A quote from a satisfied customer or some other small piece of info related to your business (could be special event, promotion details, etc.) 2. Embed a Tweet, YouTube video (adjust width to approx. 225), Instagram post or other social media content related to your business. NOTE: If you add too much content to the ASIDE section and extend it vertically beyond the content in the ARTICLE layout section you will cause a problem with the background colors for the sections. Do not let the content in ASIDE extend vertically beyond the content in ARTICLE. g. Add some brief related text in the FOOTER layout area. Page 2 of 5 h. Add a horizontal line (called a horizontal rule) somewhere on the page in one of the layout areas. (You are expected to look this up in w3Schools.com and insert it using what you know about HTML.) i. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup. **Content added to a section must not extend out of that section. 2. style.css This will be the ONE external style sheet for all your webpages. You will personalize the style.css example we used in the videos. The file can be found in Canvas/Modules/HTML. a. Use a background-image property and value in the body selector. b. Add a background-color property and value for the container selector. Use a hexadecimal code. Also add a different background-color property and value for the ARTICLE layout section. Optional: add a background-color for the NAV and/or FOOTER layout sections. c. Use at least two different style fonts in your style sheet. Use the font-family property in a layout section, see “web safe fonts” on w3Schools.com. The different font styles must appear on your home page. (Optional: If you choose to use a Google font, you must include the associated tag in the of each html document in which you want to use that font. You must also specify the Google font using font-family in the style.css file. Details on this process: https://bit.ly/2E0gDsD. d. Use at least two different text colors in your style sheet (other than the color changes in the navigation NAV) using the color property and a hexadecimal code. These different text colors must appear on your home page. e. Use at least two different font sizes in your style sheet using the font-size property. These different font sizes must appear on your home page. You can change other properties and add properties as you see fit. Additional Style Requirement – We studied the meaning of Cascading Style Sheets (CSS). You are required to correctly use the style attribute in the index.html file for at least one of the individual elements on that page. 3. the_team.html a. Appropriate title, header (use an image created at canva.com, must differ from the one for the other pages), and footer (include some content related to this page in the footer). b. Navigation to the rest of the site. Items c., d., and e. belong in the ARTICLE layout area: c. At least two images representing you, the CEO of your company. d. A paragraph describing your experience/achievements/awards. If you have a resume, you can use the details from the resume such as where you went to school, job experience, courses you’ve taken, career interests, etc. e. A paragraph describing your management team or employees. Include a table element using appropriate table tags to show the names and titles of at least three of your employees as well as the years they have worked at your company. Each row ( ) should represent a single employee and there should be three for each employee; one for their name, title and years at your company. You also need to include table headings for the table (see w3schools.com). Page 3 of 5 f. In the ASIDE layout area embed a Google Map. It can show the location of your business or some other location of significance to your company. Also include a sentence or two describing the map. g. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup. 4. excel_access.html a. Appropriate title, header (use an image created at canva.com, must differ from the one for the other pages), and footer (include some content related to this page in the footer). b. Navigation to the rest of the site. Items c. and d. belong in the ARTICLE layout area: c. Describe how and why your company uses Excel and Access in the management and operation of your business. Be specific to your business. You will be graded on the content. Suggestion: Consider how we have used Excel and Access, and the features we used. Do not vaguely state that you will use Excel or Access to “keep track of” anything, or that you will use Excel for “scheduling”…you will not receive credit. Do not copy and paste content from a Google search…I will recognize it easily. d. At least two related images. e. A value in the ASIDE layout area related to this page. It can be text or embedded social media content. f. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup. 5. contact_us.html a. Appropriate title, header (use an image created at canva.com, must differ from the one for the other pages), and footer (include some content related to this page in the footer). b. Navigation to the rest of the site. c. Use your Google account to create a form that allows users to send inquiries directly to your company via your website. The form should collect and send the following information: contact information, and at least three other questions that you would like to know about potential customers. The questions should be specific to your business. You can include “help text” that provides greater clarity on what data is required in each field on the form. Embed the form into the ARTICLE section of your contact_us.html webpage. The embedded form should not have any scroll bars, you may need to adjust the iframe’s height attribute. d. A value in the ASIDE layout area related to this page. It can be text or embedded social media content. e. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup. Before submitting your HTML Project use the HTML validator to help you check your markup for missing tags or misplaced elements. Details on how to use the validator will be discussed in a video and posted in Canvas/Modules/HTML/ “HTML Markup Validator Slides”. Note that an error message from the validator means that the validator believes there is a problem in the area it identified, since it doesn't know your intent it may not know exactly where the error is. Also note that the frameborder attribute in an iframe element will not validate (in the embedded Google iframe or other embedded content iframe), that is OK. If your embedded content generates errors that do not affect what you see on the page, Do NOT attempt to fix the errors. Page 4 of 5 TROUBLESHOOTING HTML If you write some markup that does not seem to work you likely have a simple problem. Try the following: 1. You may have forgotten to save your change or refresh the browser. To ensure you are viewing your latest modifications, save your file then refresh the browser. 2. Check the syntax of your tags carefully. HTML is a forgiving language, which means something will usually show up in the browser but may not be what you expect. It is best to make a SINGLE change in the markup then immediately view the change in the browser. The most common mistake is forgetting to close a tag. Also note that there should be a single space between multiple attributes in an HTML tag. 3. Always check to make sure that you used the extension “.html” to save your pages. If you have accidentally saved your .html files as something like .html.txt, simply right click the file, select rename, delete the .txt extension, click enter. 4. Although your computer is not case sensitive EVERY web server is. That means that any links between web pages must have matching capitalization. is NOT the same as . In this case the link will work on your computer, but it will not work if you published it to a web server. You are expected to follow the rules about capitalization in this project. 5. A web server will not accept file names with spaces. “the_team.html” will work, but “the team.html” will not. The names of your files may not have spaces in them. SUBMISSION INSTRUCTIONS When you have finished your web pages you will submit your project by compressing the folder containing all of the web page files, the style sheet, and any related files (including images) and submitting the compressed folder to the HTML Project assignment in Canvas. To compress: Right-click the folder, select “Send to” then “Compressed (zipped) folder”. IMPORTANT NOTE ON COMPRESSED FOLDER: Once a folder has been compressed (zipped), the files must be extracted to be viewed properly. I will extract the files before I view them. If you check the files in the compressed folder, and they do not "work", it is because the folder is compressed. If everything worked before you compressed the folder, it will work when I extract the files from the folder...but it will not show up properly from the compressed folder. Your project will be graded based on: • • • Functionality: All pages are included; links, images and navigation work. All opening and closing tags are included. Markup will be validated to the HTML5 standard to check for errors. File names and href value attributes must have matching cases (as required for published web pages.) Content: Whether or not the content on each page makes sense and is included. All elements specified in the “PROJECT WEB PAGE SPECIFICATIONS” must be included. There needs to be a connection point to the Sustainable Development Goals. Professionalism: It is a corporate website, not a personal website. Text must be grammatically correct with no spelling errors. Page 5 of 5 HTML and CSS declaration Cascading Style Sheet (style.css) with property definitions h1 { color:blue; } Selector { property: value; } div.container { width:85%; The width of this (division) will be 85% of the browser window, all other sections are nested in this one. border:10px solid gray; A border for the . Defines 3 values for the property. Values aren’t separated by commas. line-height:150%; All lines will have a height that is 150% of the default value. margin-right:auto; Splits the available margin equally, resulting in a centered element. Means this , which contains all of the other sections, will be centered in the browser window. margin-left:auto; margin-top:25px; background-color:#C2E0FF; Sets the background color for this element (div) and all elements within this div, unless } specifically noted in the element header,footer { clear:both; no floating elements are allowed on either the left or the right side of the element. text-align:center; centers the text in these two selectors (header and footer) } header img the following declaration applies to all tags in the header element { width:100%; The width of the header element will be 100% of it’s containing element (which is div.container) vertical-align:middle; Fixes a spacing problem I had with the header } footer { padding:10px; padding goes around the element (top, right, bottom, left), same color as the element. px=pixel } nav { width:100%; } The width of the nav (navigation) element will be 100% of it’s containing element (which is header) nav ul the following declaration applies to all tags in the nav element { margin:0; Removes any default values the browser has for margin and padding padding:0; list-style-type:none; Removes bullets from default setting for list items } nav ul li { display:inline-block; sets our navigation items horizontally margin:0; Removes any default values the browser has for margin padding:6px 0; Top and bottom padding is 6px, right and left padding is 0px } nav a “Within the nav element, all anchor elements ( contain hyperlinks) will have the following property values” { display:block; Makes the whole link area clickable (not just the text), and allows us to specify the width width: 190px; The width of each clickable area font-weight:bold; Used to show bold text color:black; text color padding: 6px; Spaces the hyperlinks out text-decoration:none; Removes the underline that appears under hyperlinks by default outline:0; Removes the outline that appears around hyperlinks by default } nav li:hover defines the properties to apply when the mouse hovers over the tags { background-color:lightblue; } nav a:hover defines the properties to apply when the mouse hovers over the tags { color:black; } article { float:left; Float makes block elements slide next to each other rather than start a new line** width:70%; The article element will have a width that is 70% of it’s containing element which is the div.container*** padding:1% 3%; The padding will be 1% on the top and bottom and 3% on the left and right of the article element.*** } article figure For all figure elements these properties will apply. Images are nested in figure tags so we can include captions { float:left; ** border:2px solid black; margin-left:5px; margin-right:20px; text-align:center; } article table For all table elements in the article elements these properties will apply. { margin:0; Removes any default margin value and splits the available margin equally, margin-right:auto; resulting in a table centered within its container, which is the article element margin-left:auto; border:1px solid gray; There are 3 values for this property, NOT separated by commas. The border is around the outside } of the table. article td For the “cells” in a table there will be spacing added by the padding and borders arount each cell { padding:3px 12px; border:1px solid gray; } aside { width:22%; float:left; padding:1%; } *** ** *** ** A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. ***Horizontal width of the article element and the aside element - The article element width is 70% of the size of the containing element which is container div plus 6% for the padding (3% on BOTH right and left sides of the article), plus the aside element width of 22% plus 2% for the padding (1% on BOTH right and left sides of the aside. 70%+3%+3%+22%+1%+1%=100%. The width and padding of these two elements must add up to 100%, if it’s any more, the content of the aside element will be pushed below not to the right of the article element. HTML Project Troubleshooting Tips and Image Suggestions: If you are validating your html markup and receiving errors: • Fix one error at a time – If you fix one error sometimes subsequent errors are fixed. Fix an error, then revalidate to see if other errors were fixed. Only use html5 markup – Use w3schools.com as a resource to check to see if tags or attributes you add are html5 compliant. • ie.: The tag has been deprecated (phased out) and is not supported by the html5 standard. Do not use it. • To center text use text-align:center; in the selector for the element in the style sheet that contains the text you want to center. • To center (horizontally) an element use margin-right:auto; margin-left:auto; in the selector for the element you want to center. Will work on most block elements such as , , • The tag has also been deprecated. Do not use it. Must only have one space between attributes in html markup – Having more than one space will show as an error in the validator. Check for missing >, = or " • • • • Do not use Microsoft Word to write any markup AT ALL. If you used MS Word to write markup then any quotes are probably “curly” quotes. Curly quotes do not work for markup. Quotes used for html markup must be straight quotes. If you copied markup from somewhere and pasted it into your Sublime file then you probably have curly quotes that will not work. From Sublime you will need to replace the quotes. This is the difference: Curly quotes – “ “ Straight quotes – " " Troubleshooting IMAGES • • • • • Each set of tags can have multiple tags, but each set of tags can only have ONE set of tags. ROTATION ISSUES: If an image looks fine until you add it to the web page, at which time it is rotated in a way that you had not intended (can happen with an image that you have taken yourself), you will need to edit the image in the Paint application (on your PC) or iPhoto (on your Mac). Open Paint or iPhoto, open the image from the application, use “Rotate” to rotate what you see to the appropriate position and save the file. Images in the article section are not required to be nested in figure tags. We do it because we can make the images look better (via the style sheet which has a selector for article figure) and so you have the option to add a caption below the image. You will have an image nested in the tags which is the banner from canva.com. Do not nest it in figure tags. If you do, the figure tags will bring their own default margin values that we have not accounted for in the style sheet. It will add extra spacing between the banner and the “container” that will not look good. A couple scenarios I always get questions about are shown below: If your images do not look the way you want them to: If you do not like that leaving a caption out creates a blank “space” between the img and the border (like this): Remove the tags and leave the tags for that image only. Add this attribute to that img tag in the HTML document: style="vertical-align:bottom;" OR a different option is to remove that single image’s figure and figcaption tags in the html document, which means the figure styles that are set in the style sheet (basically the float, margin and border) will not be applied to the image. You will probably have to add this attribute to that image’s img tag in the HTML document: style="float:left;" or if you want it to float right add: style="float:right;" ******** If you do not like that the caption extends beyond the image and the border leaves empty space around the image (like this): Want to change this to this? Add this property and values to the declaration for article figure selector in the style sheet. display: table; width: 1px; OR you can make the font size smaller in the declaration for article figure selector in the style sheet using the font-size property.