Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    Practice-2 INSTRUCTIONS

    Uploaded by

    Chue Sandi Woon Sett
    The document provides instructions for a practice exercise to create 3 HTML pages (Home.html, Menu.html, Contact.html) and link them together. It explains how to add images and background colors to the pages. Specific instructions are given to add elements like headings, lists, addresses and social media icons to each page. Sample links and image sizes are provided for elements to include. The goal is to design the 3 basic pages and link them together using the given guidelines.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Practice-2 INSTRUCTIONS

    Uploaded by

    Chue Sandi Woon Sett
    7 views2 pages
    The document provides instructions for a practice exercise to create 3 HTML pages (Home.html, Menu.html, Contact.html) and link them together. It explains how to add images and background colors to the pages. Specific instructions are given to add elements like headings, lists, addresses and social media icons to each page. Sample links and image sizes are provided for elements to include. The goal is to design the 3 basic pages and link them together using the given guidelines.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides instructions for a practice exercise to create 3 HTML pages (Home.html, Menu.html, Contact.html) and link them together. It explains how to add images and background colors to the pages. Specific instructions are given to add elements like headings, lists, addresses and social media icons to each page. Sample links and image sizes are provided for elements to include. The goal is to design the 3 basic pages and link them together using the given guidelines.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views2 pages

    Practice-2 INSTRUCTIONS

    Uploaded by

    Chue Sandi Woon Sett
    The document provides instructions for a practice exercise to create 3 HTML pages (Home.html, Menu.html, Contact.html) and link them together. It explains how to add images and background colors to the pages. Specific instructions are given to add elements like headings, lists, addresses and social media icons to each page. Sample links and image sizes are provided for elements to include. The goal is to design the 3 basic pages and link them together using the given guidelines.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 2

    PRACTICE EXERCISE-2

    HTML
    This is the instruction for Practice-2. PLEASE READ IT CAREFULLY.

    1) You need to create 3 Pages: Home.html, Menu.html, and Contact.html and need to make the link
    between the files using: <a href="---"></a>

    (ie When "Home" is clicked, it should go to "home.html", and the same applied to "Menu"
    and "Contact")
    For backgtround color you can add an attribute called "bgcolor" in body tag --> <body bgcolor="pink">

    2) In "Home.html":

    a) You will notice that I have added a picture. You could do this by adding the following HTML code:
    <img src="
    https://mars-metcdn-com.global.ssl.fastly.net/content/uploads/sites/80/2016/06/29214710/coffee-header.jpg "
    width="100%" height="auto">

    EXPLAINATION:
    It means that it take <img> element and link the address of that photo using src and change the width and
    height of the picture.
    Here the link address of photo is:
    https://mars-metcdn-com.global.ssl.fastly.net/content/uploads/sites/80/2016/06/29214710/coffee-header.jpg

    width=100% means, it take up width of whole page, and height=auto means, it change according to the size
    of width.

    3) In "Menu.html":

    a) You need to write with ONLY ONE ordered list with 3 unordered list contained inside it.
    (See the sample output PDF)

    b) To insert the picture, you could do it as in No: 2 (a)


    The link for the pictures are:
    (Pic-1)
    https://dressings-sauces.org/wp-content/uploads/2018/10/AdobeStock_62817330.jpeg
    (Pic-2)

    https://skinnyms.com/wp-content/uploads/2020/11/This-Vegan-Mushroom-Wellington-Will-Be-the-Star-of-Y
    our-Holiday-Dinner-Side-Recipe-7-e1604418169321.jpg
    (Pic-3)
    https://appliance.recipes/wp-content/uploads/2022/03/Lemon-Sorbet-image.png

    The width and height of all 3 photos are 300px and 200px respectively.
    4) In "Contact.html":

    a) For the address, we need to write the HTML code like this:
    <address>12 Sea View, Newquay, Cornwall, UK</address>
    By doing so, it indicates that the following sentence is an address.

    b) For linking the absolute hyperlink to the sentence “Find us on Google Maps”, use the following
    link to hyperlink that sentence:

    https://www.google.com/maps/place/Ocean+View,+Newquay,+UK/@50.411424,-5.1053713,17z/dat
    a=!3m1!4b1!4m5!3m4!1s0x486b0fdb452069a5:0xc5f89e35a8699f0f!8m2!3d50.411424!4d-5.10318
    26

    c) To insert the picture, you could do it as in No: 2 (a)


    The link for the pictures are:

    For the icon:


    Facebook:
    https://spng.pinpng.com/pngs/s/302-3025198_facebook-logo-png-facebook-icon-black-circle-transp
    arent.png

    Gmail:
    https://png.pngitem.com/pimgs/s/685-6853201_logo-computer-gmail-email-icons-free-png-hq.pn

    Twitter:
    https://www.kindpng.com/picc/m/10-107998_twitter-icon-logo-png-transparent-png-format-twitter.p
    ng

    YouTube:
    https://www.pngitem.com/pimgs/m/527-5275181_image-transparent-background-circle-youtube-log
    o-hd-png.png

    The width and height of all 4 icons are 50px and 50px respectively.

    ------------------------------------------------ ALL THE BEST -------------------------------------------------------

    You might also like