ITT588
HTML
HTML is not a programming language. It is called as a markup language. In HTML, we mark-up text
using appropriate tags.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>I am the BOSS!</title>
<!—This is a comment and will not appear in the browser-->
</head>
<body>BOSSKU</body>
</html>
Basic HTML
HTML Elements ->Everything from the start tag to the end tag
Example: <h1>BOSSKU</h1>
For complete HTML tags, please click here:
https://www.w3schools.com/tags/default.asp
Empty HTML Elements -> tag without element content.
Example: <p> Watch the videos below: <br>
<a href=https://youtu.be/Sg21LB1sGRU> HTML </a>
</p>
HTML Attributes -> Provide extra or additional information about HTML
elements.
Example: <a href=https://youtu.be/Sg21LB1sGRU> Click here </a>
For complete HTML Attributes, please click here:
https://www.w3schools.com/tags/ref_attributes.asp
Screenshot the result of activity 1 until 5, compile them in one file and
reply to my post at Teams.
Activity 1
Let’s start with a basic structure.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
</html>
Open your text editor, type the above script and save it as html document
(e.g.: act1.html) and open it with your browser. What do you see?
NJ
ITT588
Nothing right? Why?
Answer: Using that script, we have not told the browser to display any
output. We only told the browser that we have a html document.
Activity 2
Validation
Even we have created the html document, but we do not validate the document
yet. We should validate the HTML document with W3C’s online HTML validation
tool.
How to validate?
1. Go to this website: http://validator.w3.org/
2. Click on Validate by Direct Input tab.
3. Paste your script.
4. Click on button check.
5. Identify the warnings.
Activity 3
Fix the warnings
1. Add language at html element.
2. Add meta tag
3. Add title.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TESTING</title>
</head>
</html>
Now, there is no warning anymore.
NJ
ITT588
Activity 4
Adding comment
<!DOCTYPE html>
<!-- declaring the document type-->
<html lang="en">
<!-- opening html tag-->
<head>
<!-- opening head tag -->
<meta charset="utf-8">
<!-- declaring the character set -->
<title>TESTING</title>
<!-- title tag -->
</head>
<!-- close head tag -->
<body>
<!-- open body tag -->
<!-- put content here -->
</body>
<!-- close body tag -->
</html>
<!-- close html tag -->
Activity 5
Adding content
<!DOCTYPE html>
<!-- declaring the document type-->
<html lang="en">
<!-- opening html tag-->
<head>
<!-- opening head tag -->
<meta charset="utf-8">
<!-- declaring the character set -->
<title>Learn HTML</title>
<!-- title tag -->
</head>
<!-- close head tag -->
<body>
<!-- open body tag -->
<!-- put content here -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<div>This is division area</div>
<hr>
Horizontal rule above me
<ol>
<li>a part of order list</li>
NJ
ITT588
<li>li is stand for list item</li>
<li>add your list</li>
</ol>
<ul>
<li>unordered list</li>
<li>check on it</li>
<li>still a list item</li>
</ul>
</body>
<!-- close body tag -->
</html>
<!-- close html tag -->
Save to html document file.
Validate it.
Activity 6
Create your simple Resume using HTML.
Please include the details below:-
1. Personal Information (photo, name, phone number, email, address, etc.)
2. Academic Background (SPM, foundation or diploma, degree)
3. Working Experiences (position, duration, and organization)
4. Skills (computer skills, communication skills, adobe photoshop or else)
Note: upload your simple resume to your w3school page and share the link by
replying my post at Microsoft Teams.
*Please use your creativity.
NJ
