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 text editor and browser open. You can
then make changes in the text editor and refresh the browser window to see
those changes.
- When you are happy with your results check if your
markup is syntactically valid using the Validator at:
- Use the ‘Validate by File Upload’ or ‘Validate by
Direct Input’.
Task 2 - CSS
- Add an embedded stylesheet to the HTML document.
- Add the following style to the body selector:
font-family: Helvetica, Verdana, sans-serif; - Apply the following rule to the <h1> element.
Replace the color blue with a hex color value of your choice.
background-color: blue; - Set the font size for the page to "20px", and
the font size for <h1> to "2.5em".
- Center align the text in the <h1> element.
- Change the text color 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.
- Define an id that applies text-transform (capitalize, uppercase or lowercase) and then apply to one of the paragraph elements.
- 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.
Answer
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial 1</title>
</head>
<style>
body{font-family: Helvetica, Verdana, sans-serif;font-size:20px;}
h1{font-size:2.5em;text-align:center;background-color: blue;}
address.b{color:brown;}
#A{text-transform:uppercase;}
.a{color:red;}
</style>
<body>
<h1>Tutorial 1(Sajith Nirmana)</h1>
<div class="a">
<p>I'm sajith form srilanaka,<span style="color:blue"><i><strong>22 years</strong></i></span> old boy.</p><p id="A">I live in <b>matara</b>,it is small city.</p>
</div>
<hr>
Email address-
<address class="b">nirmansajith@gmail.com</address>
Date-2020/05/06
</body>
</html>
Comments
Post a Comment