Get fast, custom help from our academic experts, any time of day.
Place your order now for a similar assignment and have exceptional work written by our team of experts.
Secure Original On Schedule
https://wtclass.wtamu.edu/bbcswebdav/pid-3233223-dt-content-rid-59296727_1/xid-59296727_1
Task 1
Create a new Visual Studio Code workspace by:
Opening VS Code
Open Folder > navigate to where you save documents for this class
Right click and select New > Folder > name the folder Lesson4
Select the Lesson4 folder
You will need to create an index.html file.
On the left side of the screen, click on the “New File” icon and name the file index.html.
Download the Learning Activity 4 files.zip. Unzip the files and save them to a folder designated for this class. Upload the image files to your workspace by drag and drop into the Explorer panel on the left.
In the workspace, edit index.html and type the code in Figure 2. Add the image tag of the kayak.gif to the index.html file after the words “I love to kayak”. Use the tag and specify the width and height attributes. Add an alt text of “Kayak is a boat” and a title attribute of “Kayaking rules!”. The order of the attributes does not matter. (See line 9) Notice that line 9 automatically wraps, do not add a hard line break after “Kayak is a boat”
Preview the file. Your image should be visible.
Skim this short article on when to use alt and when to use title attributes for images. http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/6930/
Task 2
Continue editing index.html and accomplish the following as seen in Figure 3. Add the mountain.jpg to just after the text “One of my goals is to climb a mountain” and before “It takes training…”
Add the waterfall.jpg image to just after the text “Along the way you may even see some waterfalls.”
Specify appropriate width, height, alt, and title tags for all images. Add alt and title attributes of your choosing.
Figure 3 Add mountain.jpg and waterfall.jpg. Ignore the strange alignment of images with the text. You’ll fix that later.
Task 3
In your workspace, click on the “New Folder” icon (next to the New File icon) and create a subfolder called “images”. Make sure images is spelled in lowercase.
Move (drag and drop) the three photos into the images folder
Do NOT move index.html. Leave index.html in the root folder
The file structure should look like Figure 4
Preview index.html in a browser. You’ll notice the images no longer display. Why? Because the source path to the images is purposefully incorrect. The images are not in the same folder as the index.html file anymore. We need to change the src attribute.
Change the src attribute to read as follows:
Make the same change to src attribute of the mountain and waterfall photos. Note: Had the images folder been called photos instead, you would have inserted “photos/” to the src attribute. The folder name must match the src path exactly.
Task 4
Modify the code so that if the user clicks the kayak.gif image the user is taken to another website http://www.cis.wtamu.edu Do this by adding an anchor tag around the existing image tag as follows. Deliverable
Please submit the Learning Activity 4 as a compressed file in WT Class.
You are graded as pass or fail. If you do not pass, that’s ok. This is a learning activity. You can keep trying until you get a perfect page.
Get fast, custom help from our academic experts, any time of day.
Secure Original On Schedule