Scribd Logo
Upload

Welcome to Scribd!

  • 105 views

    CS1701 Lab Sheet Week02

    Uploaded by

    Parth Shah
    The document provides instructions for a group project involving designing a basic web page using HTML. It includes exercises to: 1) Familiarize oneself with the gedit text editor and basic HTML tags. 2) Create, save, and view a simple HTML file locally using gedit. 3) Add images, hyperlinks, and lists to the web page, along with explanatory text.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    CS1701 Lab Sheet Week02

    Uploaded by

    Parth Shah
    105 views4 pages
    The document provides instructions for a group project involving designing a basic web page using HTML. It includes exercises to: 1) Familiarize oneself with the gedit text editor and basic HTML tags. 2) Create, save, and view a simple HTML file locally using gedit. 3) Add images, hyperlinks, and lists to the web page, along with explanatory text.

    Original Description:

    Lab code java

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides instructions for a group project involving designing a basic web page using HTML. It includes exercises to: 1) Familiarize oneself with the gedit text editor and basic HTML tags. 2) Create, save, and view a simple HTML file locally using gedit. 3) Add images, hyperlinks, and lists to the web page, along with explanatory text.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    105 views4 pages

    CS1701 Lab Sheet Week02

    Uploaded by

    Parth Shah
    The document provides instructions for a group project involving designing a basic web page using HTML. It includes exercises to: 1) Familiarize oneself with the gedit text editor and basic HTML tags. 2) Create, save, and view a simple HTML file locally using gedit. 3) Add images, hyperlinks, and lists to the web page, along with explanatory text.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 4

    CS1701 Level 1 Group Project: Lab Sheet for Week 2

    D ESIGN T ASK 1: W EB P AGE D ESIGN

    The task is about introducing the basic concepts of software development process and use of simple software development tools
    through the use of html. We know that some of you have already done programming in html. If so, then focus less on the
    explanatory text and instead focus on the numbered exercises in the document. In these exercises we will NOT use a server to
    display web pages directly; instead, we will in limit ourselves to hosting pages locally. This is an introductory lab only and in the
    next few weeks, we will be building on these concepts that will be important basis for Assignment 1 (CS1809) of your group project.

    1. Start by familiarising yourself with the gedit editor


    This is a free, open source text editor, which you will find useful for writing html. See http://projects.gnome.org/gedit/ for some
    background information and main concepts. HTML stands for HyperText Markup Language and is designed to enable you to write
    web pages. It is very simple, consistent and platform independent language. It is also very widespread and hence extremely
    important. Exact figures are hard to determine but it is estimated that the Indexed Web contains at least 4.77 billion pages
    (http://www.worldwidewebsize.com/ retrieved on Wednesday, 26 August, 2015). Below you can a part of the source HTML, an
    example of a web page taken from http://www.rio2016.com/en/the-games/olympic.

    1
    If you are unfamiliar with html, start with the tutorial at http://htmldog.com/guides/html/beginner/ or at
    http://www.w3schools.com/html/html_intro.asp. (Notice that html comprises tags that are denoted by <…>. These tags are
    instructions to a web browser as to how render (display) a page of html. Usually there is an open tag <tag> with a matching close
    tag </tag>.)
    There are three parts to an html page.
    1. document type
    2. head section
    3. body section
    Below is an example of a simple html page.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>CS1701 Group Project Test HTML Page</title>
    </head>
    <body>
    <h1> CS1701 Group Project </h1>
    <p> This is the html page for my group project. </p>
    </body>
    </html>

    Strictly speaking, the doctype part is not an HTML tag but simply a directive to the web browser about what version of the markup
    language the rest of the page is written in.

    2. Use gedit to create, save and view html files


    Create a new empty file in gedit, and then enter the code above (Hint: it will be quicker to copy and paste than to type in the
    whole text) and save the file as “Test1.html”. This is a simple html page. Note that in the gedit, tags like <html> and <body>
    are highlighted in green. Other parts may be pink or purple. What do you think this signifies? Open this page in the web browser
    Firefox (File>Open File …). Make sure you use v3.5 or later as there are differences between browsers so for this module we
    standardise on this version.

    EXERCISES
    Find out as much as you can about the “software” and add some text to the file you created describing what the
    software is. You may use any source you like, e.g., Wikipedia.
    Add a definition of the term “software development” to your web page. This may be rather confusing as there are
    many new concepts that you may not have heard before. Also add a paragraph to explain the different approaches
    of software development that exist.
    What makes good software design? Add a few sentences of text to you web page to summarise what this. Add an
    explanation of what you understand by the term ‘bug’ and why it is called a ‘bug’.

    3. Adding Images
    You can include images e.g. jpg or gif files within a web page. Below is an example fragment of html to display the image contained
    in the file “MyPic.jpg”. The alt instruction is what to display if for some reason the file cannot be found and height and width
    arguments instruct the browser as to what size the image should be rendered.
    <img src="MyPic.jpg" alt="This is a picture" height="406" width="560"/>

    In this example we use relative file addressing, i.e. the address is relative to wherever the html file is located so here the image
    must be in the same directory. Sometimes we wish to use absolute addresses so the complete address must be given (including
    the protocol) e.g. https://upload.wikimedia.org/wikipedia/commons/4/43/IKBrunelChains.jpg (a picture of Isambard Kingdom
    Brunel on Wikipedia web page https://en.wikipedia.org/wiki/Isambard_Kingdom_Brunel )
    Tutorial Link: http://www.w3schools.com/html/html_images.asp

    2
    EXERCISES
    Add a photo of the following people to your web pages: Charles Babbage, Ada Lovelace and Alan Turing and add
    some explanatory text to describe who each of them are. You can find images of these influential people quite easily.
    Add a graphic illustrating the ‘waterfall software lifecycle’ and ‘prototyping’ model. Do you understand what the
    figures show?

    4. Adding hyperlinks
    There are two types of hyperlink: internal hyperlinks (linking to an anchor within your page) and external hyperlinks linking the
    page created by you to some external page e.g. www.brunel.ac.uk. For the internal link you will also need to provide the
    destination point known as an anchor (i.e. where you want to jump to).
    <a name="MyAnchor">MyAnchor</a>

    The external hyperlink is created using the same tag but with an href command and the name of the destination or anchor prefaced
    by a hash.
    <a href="#MyAnchor">Go to MyAnchor</a>

    Note, that you may not see the effect of the internal jump if your page is smaller than the window. Remedy this problem by adding
    sufficient <br> tags.
    An external hyperlink is created using the same tag but with a url (e.g. http:// …) instead of an anchor name.
    <a href="http://www.google.co.uk">Go to google</a>

    Tutorial Link: http://www.w3schools.com/html/html_links.asp

    Add a link anywhere in your web page to ‘user interfaces’ and ‘usability’. Do you follow the explanations?
    Understanding usability concepts and how to create a good user interface design will be very useful in all of your
    assignments.

    5. Adding lists
    HTML provides for various types of list. The most common are unordered lists and ordered lists
    <ul>
    <li>Unordered list</li>
    </ul>
    <ol>
    <li>An ordered list</li>
    /ol>

    Experiment with how these are rendered by Firefox. What happens if you nest (embed) one list within another? Tutorial Link:
    http://www.w3schools.com/html/html_lists.asp

    Add an ordered ‘list’ of steps (as above) that you would take in order to find out which of three numbers was the
    greatest, without seeing those numbers. We will call the three numbers x, y and z.
    The Java code for this can be found on the CS1701 resources page under the folder ‘code examples’. By all means run the code,
    but we do not expect you quite yet to understand how the code works. If you have time, have a think about how you would sort
    10 numbers randomly jumbled. See an original bubble sort (!!) using people for how:
    http://www.youtube.com/watch?v=lyZQPjUT5B4
    The Java code for this can be found on the CS1701 resources page under ‘code examples’. By all means run the code, but we do
    not expect you quite yet to understand how the code works.
    Add a similar list as above which will determine if a number is a prime number. See
    http://www.mathsisfun.com/definitions/prime-number.html if you are not sure.
    The Java code for this can be found on the CS1701 resources page under ‘code examples’. By all means run the code, but we do
    not expect you quite yet to understand how the code works.

    3
    6. Adding a page title and headings
    It’s good practice to give your page a title. This can help search engines such as google more effectively index your page. It’s also
    easier for users of your web page. In the html example for part (b) we see:
    <title>CS1701 Group Project Test HTML Page</title>

    In addition you can add headings of varying size from:


    <h1>This is a big heading</h1>
    <h6>This is a very small heading</h6>

    Sometimes it’s also effective to break up the page using a horizontal rule <HR>. Look up how to control the width and length.
    www.w3schools.com/tags/tag_hr.asp .
    Arrange the material you have added to the web pages from Exercises 1-8 so that it all has a neat heading and all
    material on the web pages have consistent look and is well organised.

    You might also like