Lab 6. HTML Tags Examples - PART I

CMPE109- Fundamentals of Computing Lab6 2019-2020 FALL
CMPE109 - LAB 6
HTML Tags & Exercises- Part-I
Content of the tutorial adopted from: https://www.htmldog.com/guides/html/beginner/
1. Getting Started:
1. Notepad is a common text editor on Windows-based computers. Open a Notepad

document (namesurname.txt) and type this in to your text editor:
This is my first web page
2. Change the extension of the document to html. (namesurname.html)
Be careful! After changing the extension, the icon will be changed like shown (an explorer or
chrome icon). If the icon is still Wordpad, then you should do the following:
Open a folder- Choose View Tab- Click Options- Change folder and search options
Folder Options- Choose View - Remove the tick for “Hide the extension for the known file types”
After making this setting, you will observe that your file is now: namesurname.html.txt
Then, delete .txt extension.
1
2. HTML Tags
The basic structure of an HTML document includes tags, which surround content and apply meaning to
it.
<!DOCTYPE html>
<html>
<body>
</body>
</html>
The first line on the top, <!DOCTYPE html>, is a document type declaration is used to inform a website
visitor's browser that the document being rendered is an HTML document.
To get back to the point, <html> is the opening tag that kicks things off and tells the browser that
everything between that and the </html> closing tag is an HTML document.
The stuff between <body> and </body> is the main content of the document that will appear in the
browser window.
3. Page Titles
To add a title to your page, change your code so that it looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
</body>
</html>
• The head element (that which starts with the <head> opening tag and ends with the </head>
closing tag) appears before the body element (starting with <body> and ending with </body>)
and contains information about the page.
• The information in the head element does not appear in the browser window.
2
4. Paragraph
The tag is used for paragraphs.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
This is my first web page
How exciting
</body>
</html>
If tag is used, the two lines will now appear on two lines because the browser recognizes them as
separate paragraphs.
5. Line breaks: The line-break tag can also be used to separate lines like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
This is my first web page 
How exciting
</body>
</html>
Note: There’s no content involved in breaking lines so there is no closing tag for .
6. Headings
The defined headings are h1, h2, h3, h4, h5 and h6.
h1 being the almighty emperor of headings.
h6 being the lowest pleb.
3
Example: Write the following code.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is my first web page </h1>
</body>
</html>
7. Changing Font (Font color, Italic, Bold)
You can emphasize text in a paragraph using em (emphasis) and strong (strong importance).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Yes, that really is exciting. Warning:level of excitement increasing!

</body>
</html>
You can use and tags for italic and bold.
• Making a word Italic: CMPE109
• Making a word Bold: CMPE109
• Changing Font color: Warning
4
<html>
<head>
</head>
<body>
Sports I like:
Tennis
Basketball
</body>
</html>
Note: Instead of writing a color like “red”, “blue”, etc. you can use the HTML Color Codes (hexadecimal
color codes). Check the website below. Use color picker menu to select a color.
https://htmlcolorcodes.com/
Change the font color of the previous example and observe the changes:
Sports I like:
5
8. Alignment of a text
The align attribute specifies the alignment of the text within a paragraph.
A right - aligned paragraph:
This is a right-aligned text in a paragraph.
A centered paragraph:
This is a centered text in a paragraph.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
This is a paragraph.
This is a centered text in a paragraph.
This is a right-aligned text in a paragraph.
</body>
</html>
References:
1. HTML Dog: https://www.htmldog.com/guides/html/beginner/

2. W3Schools: http://www.w3schools.com

Lab 6. HTML Tags Examples - PART I

Uploaded by

Copyright:

Available Formats

Lab 6. HTML Tags Examples - PART I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 6. HTML Tags Examples - PART I

Uploaded by

Copyright:

Available Formats

CMPE109- Fundamentals of Computing Lab6 2019-2020 FALL

HTML Tags & Exercises- Part-I

Content of the tutorial adopted from: https://www.htmldog.com/guides/html/beginner/

1. Notepad is a common text editor on Windows-based computers. Open a Notepad

This is my first web page

2. Change the extension of the document to html. (namesurname.html)

The <p> tag is used for paragraphs.

h1 being the almighty emperor of headings.

h6 being the lowest pleb.

Example: Write the following code.

7. Changing Font (Font color, Italic, Bold)

• Making a word Italic: <i>CMPE109</i>

• Making a word Bold: <b> CMPE109</b>

• Changing Font color: <font color="red">Warning</font>

Example: Write the following code.

<p><b><font color="#3A55B4">Sports I like:</font></b>

A right - aligned paragraph:

<p align="right">This is a right-aligned text in a paragraph.</p>

<p align="center">This is a centered text in a paragraph.</p>

Example: Write the following code.

1. HTML Dog: https://www.htmldog.com/guides/html/beginner/

You might also like