Scribd
Upload
47 views19 pages

IT 123 (Week 02 & 03)

The document provides an outline for a course on web development in weeks 2 and 3. It covers the following key topics: - HTML elements and their purpose including headings, paragraphs, bold, italics, and line breaks. - HTML attributes like ID, title, class, and style that define element characteristics. - Formatting techniques such as centering content, preserving formatting, and using non-breaking spaces. - Empty elements like line breaks and horizontal rules. The learning objectives are to understand how to add markup to text using structural elements. Students are instructed to read each chapter and complete exercises every Monday.

Uploaded by

Louie Jay Flores Candame
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
47 views19 pages

IT 123 (Week 02 & 03)

The document provides an outline for a course on web development in weeks 2 and 3. It covers the following key topics: - HTML elements and their purpose including headings, paragraphs, bold, italics, and line breaks. - HTML attributes like ID, title, class, and style that define element characteristics. - Formatting techniques such as centering content, preserving formatting, and using non-breaking spaces. - Empty elements like line breaks and horizontal rules. The learning objectives are to understand how to add markup to text using structural elements. Students are instructed to read each chapter and complete exercises every Monday.

Uploaded by

Louie Jay Flores Candame
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

National Highway, Crossing Rubber, Tupi, South Cotabato

COLLEGE OF INFORMATION AND COMMUNICATION TECHNOLOGY

___________________________________________________

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 1 of 19
LEARNING MODULE
FOR
IT 123: WEB DEVELOPMENT 1

_____________________________________________________

WEEK 2 & 3

COURSE OUTLINE

COURSE CODE : IT 123


TITLE : Web Development 1
TARGET POPULATION : All BS Information Technology Students
INSTRUCTOR : MS. JESIERYN M. OLANGCA

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 2 of 19
Content:

HTML Elements

HTML Attributes

HTML Formatting

Objectives:

General Objective

To understand how to add markup to the text that appears on your pages. You will learn about
Structural markup: the elements that you can use to describe both headings and paragraphs.

Instruction to the Learner

Each chapter in this module contains a major lesson involving the basics of Web page coding and
HTML editing tool. The units are characterized by continuity, and are arranged in such a manner that the
present unit is related to the next unit. For this reason, you are advised to read this module. After each
unit, there are exercises to be given. Submission of task given will be every Monday during your
scheduled class hour.

HTML Elements

HTML elements are written with a start tag, with an end tag, with the content in between:
<tagname>content</tagname>

Start tag Element content End tag


<h1> My first Heading </h1>
<p> My first paragraph </p>
<br>

Other Key Elements:


Element Meaning Purpose
<b> Bold Highlight important information
Similarly to bold, to highlight key
<strong> Strong
text
<i> Italic To denote text
<em> Emphasized Text Usually used as image captions
Highlight the background of the
<mark> Marked Text
text
<small> Small Text To shrink the text
<strike> Striked Out Text To place a horizontal line
IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 3 of 19
<u> Underlined text Used for links or text highlights
Displayed with an underline to
<ins> Inserted text
show an inserted text
<sub> Subscript text Typographical stylistic choice
Another typographical
<sup> Superscript text
presentation style
These tags must be opened and closed around the text in question.

Note:
Don’t forget the end tag.
Some HTML elements will display correctly, even if you forget the end tag:
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

Centering content
You can use <center> tag to put any content in the center of the page or any table cell.
For example:
<!DOCTYPE html>
<html>

<head>
<title>Centering Content Example</title>
</head>
<body>

<p>This text is not in the center.</p>


<center>
<p>This text is in the center.</p>
</center>

</body>
</html>

Output:

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 4 of 19
Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In
these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the
source document. For example:

<!DOCTYPE html>
<html>

<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
Function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>

Output:

Nonbreaking Spaces
Suppose you want to use the phrase “12 Angry Men.” Here, you would not want a browser to split the
“12, Angry” and “Men” across two lines.
In cases, where you do not want the client browser to break text, you should use a nonbreaking space
entry &nbsp; instead of a normal space.

Example
<!DOCTYPE html>
<html>

<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>

<p>An example of this technique appears in the movie “12&nbsp;Angry&nbsp;Men.”</p>

</body>
</html>

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 5 of 19
Output:

Empty HTML Elements

HTML elements with no content are called empty elements. Empty elements can be “closed” in
the opening tag like this: <br> <br />. HTML does not require empty elements to be closed. But if you
want stricter validation, or you need to make your document readable by XML parsers, you should close
all HTML elements. The following are empty elements:

<br> or <br />


The browser will automatically show each new paragraph or heading on a new line. But if you
wanted to add a line break inside the middle of a paragraph you can use this line break tag <br> or
<br />.

For example:

Output:
<!DOCTYPE html>
<html>
<body>

<p>The Earth <br> gets one hundred tons heavier everyday <br> due to falling
space dust.</p>

</body>
</html>

Output:

<hr> or <hr />


To create a break between themes – such as a change of topic in a book or a new scene in a play
– you can add a horizontal rule between sections using the <hr> or <hr /> tag. For example:

<!DOCTYPE html>
IT<html>
123: Web Development 1
<body>
SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.
<p>Venus id the only planet
Page 6 of 19that rotates clockwise.</p>
<hr>
<p>Jupiter is bigger than all the other planets combined.</p>

</body>
</html>
Output:

HTML Attributes
An attribute is used to define the characteristics of an HTML element and is placed inside the element’s
opening tag. All attributes are made up of two parts: a name and a value:
 The name is the property you want to set. For example, the paragraph <p> element in the
example carries attribute whose name is align, which you can use to indicate the alignment of
paragraph on the page.
 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center and
right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align=”left”>This is left aligned</p>
<p align=”center”>This is center aligned</p>
<p align=”right”>This is right aligned</p>
</body>
</html>

Output

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 7 of 19
Core Attributes
The four core attributes that can be used on the majority of HTL elements (although not all) are:
 ID
 Title
 Class
 Style

The Id Attribute
The Id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.
There are two primary reasons that you might want to use an id attribute on an element:
 If an element carries an id attribute as a unique identifier, it is possible to identify just that
element and its content.
 If you have two elements of the same name within a Web page (or style sheet), you can use the
id attribute to distinguish between elements that have the same name.

Example
<!DOCTYPE html>
<html>

<head>
<title>ID Attribute</title>
</head>
<body>

<p id=”html”>This line explains what is HTML</p>


<p id=”css”>This line explains what is Cascading Style Sheet</p>

</body>
</html>

Output

The Title Attribute


The title attribute gives a suggested title for the element. It is often displayed as tooltip when cursor
comes over the element or while the element is loading.

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 8 of 19
Example
<!DOCTYPE html>
<html>
Output
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title=”Hello HTML!”>Title Heading Tag Example</h3>
</body>
</html>
Now try to bring your cursor over “Title Heading Tag Example” and you will see that whatever title you
use in the code is coming out as a tooltip of the cursor.

The Class Attribute


The class attribute is used to associate an element with a style sheet, and specifies the class of element.
The value of the attribute may also be a space-separated list of class names. For example:
Class=”className1 className2 className3”

The Style Attribute


The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element. The HTML
style attribute has the following syntax:
style=”property:value;”
The property is a CSS property. The value is a CSS value.

HTML Background Color


The background-color property defines the background color for an HTML element:

This example sets the background for a page to lightblue:


<!DOCTYPE html>
<html>

<head>
<title>The style attribute</title>
</head>
<body style=”background-color:ligthblue;”>

<h1>This is heading</h1>
<p>This is paragraph</p>

</body>
</html>

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 9 of 19
Output

HTML Text Color


The color property defines the text color for an HTML element:

Example
<!DOCTYPE html>
<html>

<head>
<title>the Style attribute</title>
</head>
<body>

<h1 style=”color:blue;”>This is heading</h1>


<p style=”color:red;”>This is paragraph</p>

</body>
</html>

Output

HTML Fonts
The font-family property defines the font to be used for an HTML element:

Example
<!DOCTYPE html>
<html>

<head>
<title>the Style attribute</title>
</head>
<body>

<h1 style=”font-family:verdana;”>This is heading</h1>


IT<p
123: Web Development 1
style=”font-family:courier;”>This is paragraph</p>

</body>EAST ASIAN INSTITUTE OF TECHNOLOGY, INC .


SOUTH
</html>
Page 10 of 19
Output

HTML Text Size


The font-size property defines the text size for an HTML element:

Example
<!DOCTYPE html>
<html>

<head>
<title>the Style attribute</title>
</head>
<body>

<h1 style=”font-size:300%;”>This is heading</h1>


<p style=”font-size:160%;”>This is paragraph</p>

</body>
</html>

Output

HTML Text Alignment


The text-align property defines the horizontal text alignment for an HTML element:

Example
<!DOCTYPE html>
<html>
<head>
<title>the Style attribute</title>
</head>
<body>
<h1 style=”text-align:center;”>This is heading</h1>
<p>This is paragraph</p>
IT</body>
123: Web Development 1
</html>

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 11 of 19
Output

Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all) XHTML
elements.
 dir
 lang
 xml:lang

The dir Attribute


The dir attribute allows you to indicate to the browser about the direction in which the text should flow.
The dir attribute can take one to two values, as you can see in the table that follows:

Value Meaning
ltr Left to right(the default value)
rtl Right to left(for languages such as Hebrew or Arabic that are read right to left)

Example
<!DOCTYPE html>
<html dir=”rtl”>
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>

This will produce the following output:

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 12 of 19
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this attribute was
kept in HTML only for backwards compatibility with earlier versions of HTML.

Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>

Output

The xml:lang Attribute


The xml:lang attribute is the XHMTL replacement for the lang attribute.

Generic Attributes
Here’s a table of some other attributes that are readily with many of the HTML tags.
Attribute Options Function
align Right, left, center Horizontally aligh tags
Vertically aligns tags within an HTML
valign Top, middle, bottom
element.
Numeric, hexadecimal, Places a background color behind an
bgcolor
RGB values element
Places a background image behind an
background URL
element
Names an element for use with Cascading
id User defined
Style Sheets
Classifies an element for use with
class User defined
Cascading Style Sheets
Specifies the width of tables, images, or
width Numeric value
table cells.
Specifies the height of tables, images, or
height Numeric value
table cells.
IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 13 of 19
title User defined “Pop-up” title of the elements.

HTML Formatting
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or
underlined; these are just three of the ten options available to indicate how text can appear in HTML
and XHTML.

Bold Text
Anything that appears within <b>…</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html dir=”rtl”>
<head>
<title>Bold Text Example</title>
</head>
<body>

<p>The following word uses a <b>bold</b> typeface</p>

</body>
</html>

Output

Italic text
Anything that appear within <i>…</i> element is displayed in italicized as shown below:

Example
<!DOCTYPE html>
<html dir=”rtl”>
<head>
<title>Italic Text Example</title>
</head>
<body>

<p>The following word uses a <i>italicized</i> typeface</p>

</body>
</html>

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 14 of 19
Output

Underline Text
Anything that appear within <u>…</u> element, is displayed with underline as shown below:

Example
<!DOCTYPE html>
<html dir=”rtl”>
<head>
<title>Underline Text Example</title>
</head>
<body>

<p>The following word uses a <u>underline</u> typeface</p>

</body>
</html>

Output

Strike Text
Anything that appears within <strike>…</strike> element is displayed with strikethrough, which is a thin
line through the text as shown below:

Example
<!DOCTYPE html>
<html dir=”rtl”>
<head>
<title>Strike Text Example</title>
</head>
<body>

<p>The following word uses a <strike>strikethrough</strike>


typeface</p>

</body>
</html>

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 15 of 19
Output

Superscript Text
The content of a <sup>…</sup> element is written in superscript; the font size used is the same size as
the characters surrounding it but is displayed half a character’s height above the other characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>

<p>The following word uses a <sup>superscript</sup> typeface</p>

</body>
</html>

Output

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the
characters surrounding it, but is displayed half a character's height beneath the other characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>

<p>The following word uses a <sub>subscript</sub> typeface</p>

</body>
</html>

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 16 of 19
Output

Inserted and Deleted Text


Anything that appears within <ins>…</ins> element is displayed as inserted text.
Anything that appears within <del>…</del> element is displayed ad deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

Output

Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections or
subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to indicate
that all of the elements within that <div> element relate to the footnotes. You might then attach a style
to this <div> element so that they appear using a special set of style rules.

Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id=”menu” align=”middle”>
<a href=”/index.html”>HOME</a> |
<a href=”/about/contact_us.html”>CONTACT</a> |
<a href=”/about/index.html”>ABOUT</a> |
</div>
<div id=”content” align=”left” bgcolor=”grey”>
<h5>Content Articles</h5>
<p>Actual content goes here. . . . .</p>
</div>
</body>
IT</html>
123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 17 of 19
Output

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a
part of a sentence or paragraph which you want to group together, you could use the <span> element
as follows.

Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style=”color:green”>span tag</span> and the <span
style=”color:red”>div tag</span> along with CSS</p>

<div id=”content” align=”left” bgcolor=”grey”>


<h5>Content Articles</h5>
<p>Actual content goes here. . . . .</p>
Output
</div>
</body>
</html>

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 18 of 19
Review Questions

1. Briefly describe the different empty HTML elements and their usage.
2. Can a single text link point to two different web pages?
3. How do you create a link that will connect to another web page when clicked?
4. How do you create text on a webpage that will allow you to send an email when clicked?
5. How are active links different from normal links?

Test Yourself!

1. Add a tooltip to the paragraph below with the text “My Goal”
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>W3Schools is a web developer's site.</p>
</body>
</html>

2. Change the size of the image to 250 pixels wide and 400 pixels tall. (use any photo as long as it is
not pixilated.)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="photo.jpg" width="104" height="142">
</body>
</html>

Challenge!

1. Choose a website that you would want to create (e.g Tupinians Pride website, Tourist Spots
website, Business websites, Sports website, etc.)
2. Try to use the new tags that have been discussed in this module.
3. In your notepad create a simple home page for your website containing its overview about your
website and other information that you would want to show as your first page.

After creating your home page save your html file as “index.html”.

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.


Page 19 of 19

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy