Skip to main content

HTML WORK1

 

Task 1 - Create your Web Page content

Create a file and save it as tutorial1.html.

  1. Your Web Page should follow the following specifications.
    • Ensure you include all the HTM tags on every web page must have:

<!doctype html>
<html lang="en"></html>
<head></head
<meta charset="UTF-8">
<title></title>
<body></body>

    • 'Tutorial 1' for the title.
    • 'Tutorial 1 (your name)' using a <h1> heading element.
    • A quick presentation of yourself (5 lines - e.g., your course, hobbies, etc) using 2 different formatting tags. Use paragraph elements to separate these lines.
    • A ruler acting as a separator.
    • Under the ruler:
      • Your email address inside an address element
      • The last modified date (just add today’s date).
  1. View your web page in a browser. Find your file - double-clicking this file or dragging it into a web browser should open it for viewing.
  2. Keep both your text editor and browser open. You can then make changes in the text editor and refresh the browser window to see those changes.
  3. When you are happy with your results check if your markup is syntactically valid using the Validator at:

https://validator.w3.org/

    • Use the ‘Validate by File Upload’ or ‘Validate by Direct Input’.

Task 2 - CSS

  1. Add an embedded stylesheet to the HTML document.
  2. Add the following style to the body selector:
    font-family: Helvetica, Verdana, sans-serif;
  3. Apply the following rule to the <h1> element. Replace the color blue with a hex color value of your choice.
    background-color: blue;
  4. Set the font size for the page to "20px", and the font size for <h1> to "2.5em".
  5. Center align the text in the <h1> element.
  6. Change the text colour of all the <p> and <address> elements to blue or a hex color value of your choice. Use one definition to apply this style to both elements.
  7. Define an id that applies text-transform (capitalize, uppercase or lowercase) and then apply to one of the paragraph elements.
  8. Define a class that applies a font color of your choice to two parts of your web page. You can use a span element if you want to target inline text within a paragraph element.

Task 3 - Complete the Tutorial 1 Test on Blackboard

  • Go to Assessment -> Tutorial Tests -> Tutorial 1 Test and complete the test. You can have up to five attempts to get the maximum score of 2 marks




Code -
<!doctype html>

<html lang="en">


<head>

<meta charset="UTF-8">
<title>
Tutorial 1
</title>
</head>

<body>

<h1>Sajith Nirmana</h1>

<style>
body {font-family: Helvetica, Verdana, sans-serif; font-size : 20px;}
h1 {background-color: #0000ff; font-size : 2.5em; text-align : center;}
p,Address{color : blue;}
#age {text-transform:uppercase;}
span.b {color:#ff0000;}
span.c {color:#ff0000;}

</style>

<p>My name is <i>Sajith Nirmana.</i></p>
<span class="c">
I'm from<b> Matara</b>.
</span>
<p id="age">I'm <b>22</b> years old.</p>
<span class="b">
My Study SE in <b>IIT</b>
</span>
<p>My hobbies are playing cricket,guitar,Computer games <b><i>etc</i></b></p>

<hr>
<Address>

<b>Email :<a href="sajith.2019048@iit.ac.lk ">sajith.2019048@iit.ac.lk </a> <br> Modified Date: 27/01/2021</b>

</Address>


</body>

</html>

Comments

Post a Comment

Popular posts from this blog

E- waste

  1.   What is Electronic Waste? o    Electronic Waste or E-Waste describes discarded electrical or electronic devices. In other words, used electronics that are destined for re-use, re-scale, salvage, recycling, or disposal are also considered e-waste. o    Informal processing of e-waste in developing countries can lead to adverse human health effects and environmental pollution.         2. Sources of Electronic Waste. o    Equipment or devices used for communication like phones, landline phones, fax, etc. o    Electronic devices used for entertainment like TV, DVD & CD players. o    Household equipment’s like a vacuum cleaner, microwave ovens, washing machines, air conditioners, etc. o    Waste generated from the products used for data processing such as computers, computer devices like monitor, speakers, keyboards, printers, etc. o    Audio, visual components suc...
Post a Comment
Read more

HTML WORK 4

  Create a file and save it as  tutorial1.html . Your Web Page should follow the following specifications. Ensure you include all the HTM tags every web page must have: <!doctype html> <html lang="en"></html> <head></head <meta charset="UTF-8"> <title></title> <body></body> 'Tutorial 1' for the title. 'Tutorial 1 (your name)' using a <h1> heading element. A quick presentation of yourself (5 lines - e.g., your course, hobbies, etc) using 2 different formatting tags. Use paragraph elements to separate these lines. A ruler acting as a separator. Under the ruler: Your email address inside an address element The last modified date (just add today’s date). View your web page in a browser. Find your file - double-clicking this file or dragging it into a web browser should open it for viewing. Keep both your tex...
Post a Comment
Read more

HTML Work 2

  Task 1 - Create your Web Page content Create a file and save it as  tutorial2.html Your Web Page should follow the following specifications. Part 1 Tutorial 2 for the title. Pool Schedule (your name) as the page heading The schedule is shown below in an HTML table. The first row of the table should contain the prices shown using a list. You may need to use an HTML entity  &#163;  to display the '£' sign correctly. HTML character entities are used to display reserved characters. Demonstrate the use of both rowspan and colspan in the table. A ruler acting as a separator. Your email address inside an address element. The last modified date (just add today's date (hardcoded)). See the following image for an example of the layout. Remember, you can check if your markup is syntactically valid using the Validator at  https://validator.w3.org/ Use the ‘Validate by File Upload’ ...
Post a Comment
Read more