HTML and CSS Specification report for ‘A Space Future’.
Asgar Ali
Student ID: 076594
HND Software Engineering
Intro to Web Development module
13/12/2017
Table of Contents
1. INTRODUCTION 2
2. REQUIREMENTS 2
2.1 SITEMAP 2
2.2 WIREFRAME 3
3. IMPLEMENTATION 4
3.1 CONTENT 4
3.2 CSS 6
3.3 HTML 7
4. VALIDATION 7
4.1 SCREENSHOT OF THE SITES INDEX.HTML VALIDATION RESULTS. 7
4.2 RESULTS OF THE CSS VALIDATION: 8
5. EVALUATION 8
5.1 TEXT AND IMAGES 8
5.2 CONTRAST 9
5.3 WEBSITE EVALUATION 10
6. RECOMMENDATIONS 10
7. REFERENCES 11
1. Introduction
This report will discuss the development of a Website with the use of HTML5 and CSS3. This was for the Module titled ‘Introduction to Web development’ at the University of Wales, Trinity Saint David’s (UWTSD) Faculty of Applied Computing. Firstly, it will discuss user Requirements for the Site, then Implementation of the HTML and CSS, Validation of the written code and finally an evaluation of the finished website, including recommendations for improvements that could have been made. A References section will list content sources for information provided on the site. There will also be a reference for validation and accessibility result providers.
2. Requirements
A Website will be produced through hand coding using the ‘Visual Studio Code’ Editor. Its purpose will be to focus on information for visitors who are interested by reading news and stories about the latest developments in Commercial Space Exploration and Space Tourism. This is in contrast to some other popular technology sites that do not focus exclusively these two areas, so may be considered a niche site. Content will be presented in a formal format, with pictures and videos on page articles to help with conveying information. The chosen title of the Website will be: ‘A Space Future’.
The Site will be developed consisting of no less than five pages using HTML5 and CCS3 web standards.
The site will need to be visually appealing, easily navigable and readable for all visitors. A Twitter Bootstrap version 4 download file will be used, for some styling and as the Grid system for the site. Font Awesome 4.0.7 downloaded files will be used for styling certain symbols, such as on a contact form.
A final produced Website folder containing all relevant files will be zipped and uploaded to UWTSD for assessment by the Module Lecturer, Dr Kemi Ademoye. The site must demonstrate an understanding of standards, concepts and principles for implementing a Website.
2.1 Sitemap
Below is a diagram of the Site map of the Website which was done on a Samsung tablet. A Form was later added to the site for users to subscribe via email to get recent developments emailed to their inbox.
2.2 Wireframe
Below is a basic Wireframe of the home page. It illustrates the grid layout, the main design elements and content sections of the website. Again, a form is not showing on this diagram, as it was added later on.
3. Implementation
3.1 Content
Using the above Sitemap and Wireframe, the site was later implemented. It contains nine HTML pages in total.
• The top of the site consists of six pages which can be clicked on from a Bootstrap 4 navigation bar. The links are descriptive of the content on each page: ‘Home’ (this takes the user back to the index.html home page when clicked on); ‘Space tourism’; ‘Mars Colony’, ‘Moon base’, ‘The future’, and ‘Subscribe’ page. On the right-hand side of the navigation bar are Facebook and Twitter font awesome icons.
There are a further two linked pages in the footer section of the site, which are titled ‘About’ and ‘Contact us.’ The ‘about’ link leads to a fictitious descriptive page about the background of the site, such as dates and addresses.
The ‘Contact Us’ link leads to a Contact page using Font-Awesome icons and a Bootstrap form.
A ‘Subscription’ form has been used on the homepage in order for visitors to register their email address for latest news messages into their inbox.
A ‘Pink’ Text Class has been used to highlight clickable links to external Websites in articles on all pages apart from the home, contact, about and subscribe pages.
Images were carefully chosen to all be in a High Definition format to ensure they looked good on the Webpages, and be appropriate for the content. A separate images folder contains .jpg and .png files that are used on all pages on the site. Images were downloaded from: Google.com/images.
Research for site content was performed on the following Websites:
NASA [1] ; SPACEX [2]; Virgin Galactic [3]; Blue Origin [4]; Planetary resources [5]; World View [6];
Deep Space Industries [7]; The Guardian [8] ; Thoth Technology [9]; TechCrunch [10] and Time.com. [11]
Below is a Screenshot of the home page. It shows the clickable title of the page in a Jumbotron Bootstrap container. Followed by the clickable navigation bar, and two images with clickable links on the bottom.
Below is a Screenshot of the page titled ‘The future’. This includes a iframe that links to a YouTube video. The video was added to help enhance the understanding of the content of the page.
3.2 CSS
All Styles are contained within in a ‘CSS’ folder. It includes a styles.css file for the main styles for the site. It also contains a Twitter Bootstrap version 4 file - bootstrap.min.css.
A Fonts folder contains all Font Awesome styles. The navigation bar Twitter link and Facebook link was styled using Font Awesome styles.
Bootstrap Classes were used for some styling on HTLM pages. For example, Class= “btn btn-primary” was used to style links using a rectangular button (btn) with a blue background (primary).
The ‘h2: first-letter’ property-value pair was used by emphasising a ‘bold’ font-weight for the first letter of h2 headers.
Below are some descriptions of CSS Classes (.) that are in the stylesheet.
A Bootstrap Jumbotron class was used to add the background Space image and place a clickable Website title.
. navbar a: hover was used to style the white highlight effect of links in the navigation bar.
. row1 – this was used to style bootstrap rows by having automatic margins and centring text.
. border-top class was used to create a dotted underline under h2 headers using the ‘border-bottom’ CSS style.
Class ‘. click’ was used to style links under the homepage images to black on cursor hover.
Class ‘. pink’ was used to change clickable text links in articles to pink.
Below are examples of ID attributes (#) that were used:
The #copywrite ID was used to change text colour to white.
A #logo was used to style the “A SPACE FUTURE” title text to white.
3.3 HTML
The main index.html page was divided into seven sections using comment tags: Head; Jumbotron; Navbar; Main Content; Subscription form; Footer and Copywrite.
Each individual page on the site had a descriptive title tag for Search Engine Optimisation.
There were three external links on every page via link tags: CSS, Bootstrap and Font-Awesome files.
The five images on the homepage were organised into bootstrap containers and rows, as were most pages.
h1, h2, h4 were used as header sizes on most pages.
4. Validation
The sites index.html page was validated at the World Wide Web Consortium HTML Validation Website page [12] . The sites CSS was also validated [13] .No validation errors were listed for the HTML and CSS code.
4.1 Screenshot of the sites index.html validation results.
4.2 Results of the CSS validation:
Below is a screenshot of the CSS validation results.
5. Evaluation
With reference to the Web Content Accessibility Guidelines Version 2.0 (WCAG) [14], the accessibility of the Website will be discussed for people with disabilities. These will include site users with low vision or colour blindness.
5.1 Text and Images
Text alternatives for non-text content have been provide in the form of HTML ‘alt’ attributes which provide descriptions of all .jpg and .png images on every page of the site. This was to ensure that the visitor would know if an image was failing to load if browser incompatibilities occurred.
Navigation bar links appeared and operated in predictive ways to help users navigate, find content, and determine where they are on the site. A responsive Bootstrap top navigation bar has been used in order that visitors can quickly and easily get to the main content of the site, with standard text and a hover function to highlight the link in a white box when the mouse is over text.
Text content was made readable and understandable by a standard font-family of Arial, Helvetica and Sans-Serif, with font-size being set to extra-large in a ‘row1’ class. All H1 (Header one), H2 (Header two), and H4 (Header four) headings have a standard Arial font in order that they can be read easily by visitors. All content was put into Bootstrap containers classes and rows. This ensured content stretched out appropriately on different devices. The column sizes used were extra small, small, medium, large and extra-large, in order to accommodate mobile devices up to large desktops.
To check Accessibility, a Website Accessibility checker named ‘ACCHECKER’ [15] was used, which reported back thirteen error messages when the index.html page was uploaded and analysed to this site. These were all related to the navigation bar links and headers of the homepage:
Recommended replacing ‘I’ elements with’ em’ and ‘strong’ tags for the Facebook and Twitter fonts on the navigation bar of the home screen.
Several Header nesting errors were displayed. Header two were used for the navigation bar links for the individual pages. There were Header ones used after this. Here is some text from the error:
“Check 38: Header nesting - header following h2 is incorrect.
Repair: Modify the header levels so only an h3 or any header less than h3 follows h2.’’
5.2 Contrast
The background colour used was #FFFFFF (White) while text colours were all #000000 (black) and some text being #e5127d (Pink). The navigation bar colour and the footer border both used the #333 hexadecimal colour reference with all links being white.
It was felt that this was the safest and most standard way to present the information, and also allowed for easy reading of text content, while allowing images to stand out. The colour scheme also looked quite modern.
A Website Contrast check was performed at Juicystudio.com [16]. It showed the Contrast being good for the background and text colours, returning a pass level AAA and 21.00.1 Contrast Ratio.
For the navigation bar colour and footer, #navbar and #main-footer classes were set to hex colour: #333. This also returned a AAA level pass, with the Contrast Ratio being at 12.63:1
For the pink class (#e5127d hex colour), an AA rating was returned with a 4.41:1 Contrast Ratio. It suggested text being at least eighteen pixels, or fourteen pixels if Bold. The exact pixel size in paragraphs on the site was undetermined, as most content was in. row1 classes that set text size to extra-large, therefore may have been short of these recommendations.
5.3 Website evaluation
It is felt that the completed website, as a prototype, has been designed appropriately for the subject matter. Design cues were taken by looking at the structure and design of three similar popular Websites: Wired.co.uk (an online magazine that looks at the effects of emerging technologies) [17]; Futurism.com (a Website providing infographics and news on technology) [18] and Theverge.com (technology news) [19]. In particular, design of the navigation bar, font size of text, colour scheme and image arrangement were looked at.
Although content was appropriate and relevant, more information and images could have been added, if time permitted, in order to make the site more interesting for visitors.
Its general functionality and layout is quite standard, with a simple navigation bar at the top with descriptive links.
6. Recommendations
There are a number of recommended improvements to the Website that can be implemented if further developed and are listed below.
As recommended by Accessibility results, Links in the navigation bar should have headers replaced with paragraph tags, with styling done in the styles.css file as required.
Class ‘pink’ text size should be determined, and be re-sized to fall in line with in Accessibility result suggestions, if shown not to be the correct size.
Images could have been re-sized more proportionally on some html pages by using css styles. For example, the fifth standalone image on the homepage is disproportional in size to four images above it.
In hindsight, a clickable SVG Logo could have been designed and used for the site. This would could have been placed inside the Jumbotron container.
Html Breaks, Headers, Images and Paragraphs were nested inside Unordered lists on most html pages. This is considered bad practice and would have generated an error on the W3C html validation page [12]. If time permitted, these errors would have been amended using Visual Studio Code.
Coding for the Subscription form on the homepage will need to be looked at. A link to the subscripton.html page was not implemented.
A ‘. row’ and ‘. row1’ bootstrap class was implemented on the index.html home page. Perhaps having a single row class would have been a better implementation.
7. References
[1] NASA.gov, “www.nasa.gov,” [Online]. Available: https://www.nasa.gov.
[2] SpaceX, “spacex.com,” [Online]. Available: http://www.spacex.com.
[3] Virgin Galactic, “https://www.virgingalactic.com,” [Online]. Available: https://www.virgingalactic.com.
[4] Blue origin, “www.blueorigin.com,” [Online]. Available: https://www.blueorigin.com.
[5] “www.planetaryresources.com,” [Online]. Available: https://www.planetaryresources.com.
[6] “www.worldview.space/voyage/,” [Online]. Available: https://www.worldview.space/voyage/.
[7] “deepspaceindustries.com,” [Online]. Available: http://deepspaceindustries.com.
[8] the guardian, [Online]. Available: https://www.theguardian.com/science/2017/oct/19/lunar-cave-discovery-raises-hopes-for-human-colonisation-of-moon.
[9] thoth, “thothx.com,” [Online]. Available: http://thothx.com.
[10] [Online]. Available: https://techcrunch.com/2016/03/25/2020-is-set-to-be-the-biggest-year-yet-for-mars-exploration/.
[11] time.com, [Online]. Available: http://time.com/4767595/stephen-hawking-100-years-new-planet/.
[12] W3C, “validator.w3.org,” [Online]. Available: http://validator.w3c.org.
[13] W3C, “jigsaw.w3.org/css-validator,” [Online]. Available: http://www.jigsaw.w3.org/ccs-validator.com.
[14] W3C.org, “https://www.w3.org/TR/WCAG20/,” [Online]. Available: https://www.w3.org/TR/WCAG20/.
[15] ACCHECKER, “https://achecker.ca,” [Online]. Available: https://achecker.ca/checker/index.php.
[16] juicystudio.com, “Juicy Studio,” [Online]. Available: http://juicystudio.com/services/luminositycontrastratio.php.
[17] Wired Magazine, [Online]. Available: http://www.wired.co.uk/.
[18] Futurism.com, “futurism.com/,” [Online]. Available: https://futurism.com/.
[19] The Verge, “theverge.com/,” [Online]. Available: https://www.theverge.com/.