IIT Lab 05 - Basic HTML and CSS

Setting up the web development environment

For this and all our future web labs, we need to setupupa suitable web development environment (framework) which can host and run our web files. For this purpose, we will be using an open source web development environment called XAMPP. Follow the instruction below to download and setup XAMPP in your device. This is an essential step before you can start this week’slab.

1.    Open theApache Friendswebsite and download 7.2.31 version of XAMPP for Windows.

2.    Click OK button in the next prompt.

3.    Choose following components to be installed. While you can install other components, those will not be essential to your labs.

4.    Set following installation path in the next screen.

5.    Keep clicking Next until installation starts. Wait for installation to complete.

6.    Click the Allow access button to allow the app through your firewall (if applicable).

7.    Click Finish to open XAMPP Control panel.

8.    Start Apache and MySQL services from the next screen.

9.    If you have issues starting any of the services, refer to the Troubleshooting XAMPP issues.pdf document in Moodle.

10. XAMPP installation and setup is not completed.

11.  Download IITLab5.zip file from Moodle. Unzip the file and copy it to C:\xampp\htdocs location in your computer.

Setting up text editor (Notepad++)

In addition to setting up a web development environment (XAMPP), we also need a suitable text editor to edit your script. files. While the default Notepad application is good enough for this job, it is highly recommended to install and use a more advanced text editor. For this and all future labs, we will be using Notepad++ application as our default script editing tool.

1.    Navigate tohttps://notepad-plus-plus.org/downloads/and download the latest version of Notepad++ to your device.

2.    Click on the downloaded installation file and install Notepad++ application.

Viewing your web page

1.    Open a web browser (it is highly recommended to use Google Chrome for this Lab)  and navigate to

http://localhost/IITLab5/

2.   You should be presented with the following screen.

If you do not get the screen above, it means either your XAMPP services haven’t been started or you haven’t copied IITLab5 folder to the right location.

3.    Opening up the page1.html should give you the following screen output.

4.    Go to the C:\xampp\htdocs\IITLab5 folder in your device and open page1.html and mystyle.css in Notepad++ by right clicking the files and selecting Edit with Notepad++.

5.    In a new browser tab, open http://www.w3schools.com/cssref/. This will give you a list of CSS properties you can use. Spend few minutes exploring the content before starting on your lab tasks.

Task 1

Using CSS make the heading appear in the middle of the page.

This can be done by adding text-align: center; to the header section (in mystyle.css).

Remember each time you change a CSS or HTML file that you need to reload the page you can do this by pressing F5 in the browser or clicking the reload button.

Task 2

Change the background-color of the main div to be white. Change the background-color of the body to be #cccccc.

Task 3

At the bottom of the HTML page (under the text but still inside the main div)  after the last

Create an unordered list (dot points) that looks like this:

•    Apple

•    Orange

•    Mango

You need to use one

tag and multiple
• tags, one for each item.    NOTE: that
  tags can ONLY contain
  • tags and no other tags.

    
    

    Task 4

    Using only CSS, make the list from task 3 use squares instead of circles. This should apply to all

    tags. Hint: investigate the list-style-type property.

    
    

    You will need to add a new CSS definition for the UL tag to the CSS file.

    Task 5

    You notice that the text is too close to the edge of the div.

    Add a padding to the main div. A padding of 10px should be enough.

    
    

    
    

    Task 6

    Go to the C:\xampp\htdocs\IITLab5 folder and create a new folder inside the IITLab5 directory called images. Copy the apple.jpg file to the images directory.

    Task 7

    Now in the HTML file, add the apple’s image to the page INSIDE the first paragraph after the text but just before the closing P tag.

    Remember that animage tag looks like

    "PUT THE URL HERE" alt = "IMAGE DESCRIPTION HERE" /> Use a relative URL to address the image.

    Do not use absolute windows file paths e.g., C:\xampp\... as it will cause issues when you later move your web folder to a different location

    The ALT tag specifies the alternate text for the image the ALT text should describe what the picture is. If the image is just for decoration, you should leave the alt text empty.

    Reload the page, you should now have a large apple in the middle.

    Task 8

    You notice that the apple image is ridiculously large, also the file size is 200KB.

    Remember that people who browse your website may have slow internet connections or be on a mobile device so having 200KB may cause the page to load slowly.

    It is possible to resize the image in HTML with the width and height attributes (or in CSS) but that does not change the fact the image is 200KB.

    The best course of action in this particular case is to make the imagefile smaller. There area number of ways togo about doing that, the simplest is to resize the image to be smaller.

    In windows, open the images directory and right click apple.jpg and click Edit. That should bring up MS Paint. Select resize.

    We want the image to be around 200px wide.

    Now that you have a smaller image click File > Save As and save the file as: apple-small.jpg  make sure to save it in the images directory.

    
    

    You should now have two images of the apple. One big and one small.

    Notice the file size of the smaller image is much smaller than the original.

    Now go back to the HTML file and change the URL to reference the smaller image.

    Task 9

    Make the imagesit on the left side of the page and have the text flow around it.

    The best way to do this is to make a new CSS class called imageLeft in your CSS file. Remember that in CSS, a class definition starts with a dot.

    Hint investigate CSS float.

    You then need to assign the imageLeft class to your tag.

    Task 10

    Some users might want to look at the high-resolution image of the apple.

    We can make the small image link to the big image using a hyperlink. So that if you click the image it takes you to the larger version of the picture.

    Hyperlinks are made using the tag, the href attribute to the URL togo to when clicked. In this case, we want to surround the tag with an tag.

    "BIG APPLE URL HERE"> PUT IMG TAG IN HERE

    Task 11

    Using HTML make the following text appear at the end of the page (but still inside the main div)

    I just used an tag inside an tag.

    The trick to the question is escaping the angle brackets using HTML Entities. Refer to your lecture notes or use google to look for a solution.

    Your text should also be in italics. Your text does not have to be centred.

    Task 12

    Copy the orange.jpg file to the images directory.

    Remember the list from Task 3?

    Make the word "Orange" a hyperlink to the orange picture.

    Task 13

    There are many online html validation testers that will check if your HTML code is correct Open https://html5.validator.nu/ or https://validator.w3.org/

    Paste the URL of your HTML file into the validator and click validate/check. If your code has any errors, fix them, and try again until you get no errors.

    Task 14

    You want to add more pages to your website.

    But before you can do that, there needs to be away for users to navigate between the pages. Most websites use a navigation bar to achieve this.

    Navigation bars are generally at the top of the page but can also be on the side.

    Create a new div in the HTML file, just after the header div but before the main div. Give this divan ID of'navbar'

    Inside that div create an unordered list like so:

    
    

    "navbar">

    
    

    
    

    • "page1.html">Page 1
    • "page2.php">Page 2

    
    

    
    

    
    

    Do not worry about where the links goto at this point, we can fix them later. Then using CSS make the navbar div have a green background.

    You navbar should look something like this:

    Task 15

    You can make the links sit side by side by setting the display to inline on the

    tags

    
    

    but make sure that only applies to the

    tags inside the navbar div. Take a look at your lecture notes on Moodle for an example of this.

    
    

    Your navbar should now look like this:

    Task 16

    Make the tags in the navbar 6em wide and have a background color red.

    NOTE: because tags are inline elements by default you cannot assign them a height or width. To do so you must first set their display to inline-block.

    Then set the text-align to center.   Your navbar should now look like this:

    Task 17

    Using CSS make the links taller, 2emtall.

    The obvious solution is to set a height but that causes the text to not be in the middle.

    There area number of methods to combat this.

    The simplest is to just set the line-height for the tags in the navbar. Set the line-height to 2em

    Task 18

    Using CSS make the tags change background colour to white when the mouse is hovered over them. But make sure that only applies to the tags in the navbar.

    This might be useful: http://www.w3schools.com/css/css_link.asp

    Task 19

    Run your code though the validator (refer Task 13) again and check if it is still valid. Fix your script if required.

    Task 20

    Your lab is now complete. Zip the IITLab5 folder and uploaded the zipped file to Moodle.