Assignment 4

docx

School

Northeastern University *

*We aren’t endorsed by this school

Course

2010

Subject

Computer Science

Date

Apr 3, 2024

Type

docx

Pages

Uploaded by DukeElectron13719

Assignment 4 Title HTML (Hypertext Markup Language) Purpose In this assignment you will explore how to create structured web pages using HTML. SLO/EO: 2a Instructions There are four steps to creating and hosting HTML pages. ● Use a programming editor to create HTML pages. ● Use FileZilla SFTP client to upload HTML pages to your web server. ● Load your pages in a browser to check for correctness. ● Validate your pages with the HTML5 validator. In addition to your textbook, the following internet sources are a great resource. W 3 Schools Mozilla Developer Network W 3 Resource Assignment Details 1. Setup the assignment folders on your server. Create folders on your server inside the /var/www/html/CS2010 folder for each assignment. Create folders “assignment4”, “assignment5”, “assignment6” up to “assignment13”. Also create a “final_project” folder. Make note of the case. Linux filesystems are case-sensitive, so case matters. All the folder names should be in lowercase. 2. Modify the “index.html” file in CS2010 that we created in a previous assignment so that it points to the new assignment folders. The page should look like the one below with an unordered list of hyperlinks to each folder.

Use “h1” for the title and replace “My Name” with your own. See document structure below for information that also applies to this “index.html” page. The HTML5 and CSS3 validator badges and links should be in the “footer” of every page that you write. Copy this code to the footer to get the badges/links to the validators so that you can click the images to easily validate your pages once they are uploaded to the web server. <p> <a href="javascript:void(location.href='https://html5.validator.nu/? doc='+encodeURIComponent(location.href))"> <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg " width="50" height="50" alt="Valid HTML 5" /></a> <a href="javascript:void(location.href='http://jigsaw.w3.org/css-validator/validator? uri='+encodeURIComponent(location.href))"> <img src= https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg width="50" height="50" alt="Valid CSS 3" /></a> </p> 3. In your “assignment4” directory you will create an “index.html” file for this assignment and three other HTML files: “car1.html”, “car2.html” and “car3.html. You will also create an images folder where you will store the “cars_banner.png” and “Porsche911.jpg” files that will be supplied to you along with two other car images that you will find on your own.

4. Below is an outline of what the document structure should be for each of the “car” HTML pages. Even the “index.html” page should follow this structure but with different content in the “main” element and no “nav” element in the “header”. • DOCTYPE • html • head ◦ title ◦ meta • body ◦ header ▪ div ▪ img ▪ h1 ▪ nav ▪ a ▪ a ▪ a

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

▪ a ◦ main ▪ h1 ▪ aside ▪ figure ▪ img ▪ figcaption ▪ details ▪ summary ▪ dl ▪ dt - dd ▪ dt - dd ▪ dt - dd ▪ p ▪ p ◦ footer ▪ p - Source and copyright ▪ p - HTML5 and CSS3 badges 5. Here is what the assignment index page should look like.

Note that the “My Cars” title is an “h1” element. Each car should be a hyperlink element that links to the appropriate cars HTML page using relative URLs. Inside the hyperlink element will be a figure element with an image and a figure caption element. For the car images set the width to 200 and the height to 100. The banner image at the top should be set to 800 x 200. On all “img” elements be sure to have an “alt” attribute. Don’t forget the HTML5 validator icon and graphic in the header.

5. Here is what the Porsche 911 page should look like. The other two cars pages that you create with your own cars (or cars you would like to own) should look similar.

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

Note that “HTML” element should always have a “lang” attribute set to “en” for English. The “meta” element should have a “charset” attribute of “UTF-8”. The nav section in the header

should have links to the assignment4 index page (Home), the Porsche 911 (car1.html) and to the two car pages you create (car2.html and car3.html). The car image should be in a “figure" element with a figure caption. Both the “figure” of the car and the details element that follows it should be inside an “aside” element. The “details” element should have a “summary” text “Overview” and a definition list that has three items and the appropriate values: Manufacturer, Production and Assembly. There should be at a minimum of two paragraphs. This first should contain historical information about the car model and the car model name should have “strong” inline element applied to it. The second should describe your car and any other information about what you think about the car. Finish up with a “footer” element that contains a paragraph containing the source of your information with a link and the copyright. The copyright line should have the “em” inline element applied to it. Use the appropriate HTML entity © for the copyright symbol. Don’t forget the HTML5 validator and use it once you upload your files to check for errors. You should eliminate all errors before you submit your solution for grading. Submit: Once you have completed your assignment, make sure that all your latest files are uploaded to your server so that I can check them. You must also submit your assignment files to the assignment submission link so that your time of completion can be recorded in the Canvas system. You must combine all your files into a compressed ZIP archive to submit them. Most operating systems let you right-click on the assignment folder and then choose “Compress” from the popup menu. For this assignment compress and submit the “assignment4” folder. Lastly in the comments section of your upload type the URL to your server in case you shut it down and were assigned a different DNS name from last time.

Related Documents

Eclipsing binary simulator.docx

hw06.pdf

Unit 2 assignment (1).pdf

CS2010 Assignment Summary OL.docx

Part - 2 Walkthrough.txt

LAB 7-OPS.docx

race.py

brooklyn.py

OPS102 - Week 1 - Lab - OS Exploration.docx

OPS102 - Week 3 - Lab.docx

1306 Chapter 6 Review.docx

Assignment 5.docx

Recommended textbooks for you

Programming with Microsoft Visual Basic 2017

Computer Science

ISBN:9781337102124

Author:Diane Zak

Publisher:Cengage Learning

COMPREHENSIVE MICROSOFT OFFICE 365 EXCE

Computer Science

ISBN:9780357392676

Author:FREUND, Steven

Publisher:CENGAGE L

New Perspectives on HTML5, CSS3, and JavaScript

Computer Science

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Cengage Learning

Microsoft Windows 10 Comprehensive 2019

Computer Science

ISBN:9780357392607

Author:FREUND

Publisher:Cengage

Np Ms Office 365/Excel 2016 I Ntermed

Computer Science

ISBN:9781337508841

Author:Carey

Publisher:Cengage

Fundamentals of Information Systems

Computer Science

ISBN:9781305082168

Author:Ralph Stair, George Reynolds

Publisher:Cengage Learning

SEE MORE TEXTBOOKS

Recommended textbooks for you

Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Microsoft Windows 10 Comprehensive 2019
Computer Science
ISBN:9780357392607
Author:FREUND
Publisher:Cengage
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
Fundamentals of Information Systems
Computer Science
ISBN:9781305082168
Author:Ralph Stair, George Reynolds
Publisher:Cengage Learning