On this page I will talk about the Labs I did in my program at Vanier college.
Lab 1
For the first lab I used the basic html element for creating a text website of two pages for a Resort with one image by page.
- I used description list element <dl> </dl> for one page and unordered list with ordered list for the other page.
- I also used the navigation element <nav> </nav> to be able to move between the two pages.
- I also used the image element <img> for the pictures.
You can find the pdf there: Lab1.pdf
Click on the thumbnail below to view the corresponding page.
Lab 2
For the second lab, using the first lab as a base, I needed to add an external css to add colors, a viewport and margin to center the page.
Also removed the navigation as per the pdf.
- I applied the colors with the CSS selector, to select the corresponding element and the attribute color.
- I also applied the meta viewport to both pages.
- I also applied the width of the body element <body> </body> to 85% and the CSS margin-left and margin-right to auto to have the body element centered.
You can find the pdf there: Lab2.pdf
Click on the thumbnail below to view the corresponding page.
Lab 3
For the third lab, using the second lab as a base, I needed to add image map with multiples links and add background image.
I also added back to navigation for the home page as per the pdf.
- I added backgound image to both pages.
- I also added a image to the top right of the pages.
- I also applied a image map element <map> </map> to the top right image with link for the two clickable area by image.
- The home page one is halfen in two.
- While the trails page one is about the toad or the forest that are clickable.
I have been having trouble for background image especially the trails page.
You can find the pdf there: Lab_3.pdf
Click on the thumbnail below to view the corresponding page.
Lab 4
For the fourth lab, using the third lab as a base, I needed to add a table.
I also removed the backgound image as per the pdf.
- I used the table element <table> </table> to create the table.
- I also used the table row element <td> </table> for creating every row.
- I also used the rowspan attribute to merge multiple rows together.
- I also used the colspan attribute to merge multiple row together.
- I also used the span element <span> </span> with a class attribute to assign the respective background colors with CSS.
You can find the pdf there: Lab_4.pdf
Click on the thumbnail below to view the corresponding page.
Lab 5
For the fitfh lab, using the fourth lab as a base, I needed to add an audio and a video.
I also needed to change the layout of the homepage to flex and the trails page to gridbox.
And also to make it responsive for small screen (one column) and big screen (two column)s.
- I used the audio element <audio> </audio> to create the audio player.
- I also used the video element <video> </video> to create the video player.
- I also created a smaller size video for smaller screen (no need to play 4k video on smartphone).
- I also used the media query CSS selector @media to adapt depending on the screen size.
You can find the pdf there: Lab_5.pdf
You can also find the CSS there: myCSS.css
Click on the thumbnail below to view the corresponding page.
Lab 6
For the sixth lab, using the fifth lab as a base, I needed to add a form.
- I used the form element <form> </form> to create the create the form.
- I also used the label element <label> </label> to label every input and select the input if user click on the label.
- I also used the input element <input> </input> to create every input.
- I used the text attribute for standard input.
- I also used the email attribute for the email input to have the browser check if it's a valid email or not.
- I also used the date attribute for the date inputs to have a date picker.
- I also used the textarea element <textarea> </textarea> to create an area where the user can write a long and multiple line text.
- I also used the button element <button> </button> to create an button.
- Since the submit doesn't anything yet, I used the javascript function alert() to show a message to the user.
You can find the pdf there: Lab_6.pdf
You can also find the CSS there: myCSS.css
Click on the thumbnail below to view the corresponding page.
