This document provides an overview of HTML and web page design. It defines HTML and tags, and explains how they are used to structure and format text on web pages. The document also lists common HTML tags and their functions, such as tags for headings, links, images, and the basic page structure. Instructions are provided on how to open HTML files in Notepad and display them in a web browser.
Mail Merge is a software toolkit that is used to produced multiple documents with a given template, editing the basic information that is supplied by a structured data set.
Mail Merge is a software toolkit that is used to produced multiple documents with a given template, editing the basic information that is supplied by a structured data set.
Nature and purposes of of online platforms and applicationswylljie
This kind of slide will show you the nature and purposes of of online platforms and applications which will guide you to know and discover things from the said topic.
This is a powerpoint presentation that discusses about one of the applied subjects in the k-12 curriculum of the Senior High School: Empowerment Technologies. On this powerpoint presentation, it discusses about the definition and elements of Microsoft Word.
Feel free to share to every aspiring ICT SHS teacher that is starting out. Just please do not take the copyright credit. The content is taken from Rex and Abiva Empowerment Technologies books.
Nature and purposes of of online platforms and applicationswylljie
This kind of slide will show you the nature and purposes of of online platforms and applications which will guide you to know and discover things from the said topic.
This is a powerpoint presentation that discusses about one of the applied subjects in the k-12 curriculum of the Senior High School: Empowerment Technologies. On this powerpoint presentation, it discusses about the definition and elements of Microsoft Word.
Feel free to share to every aspiring ICT SHS teacher that is starting out. Just please do not take the copyright credit. The content is taken from Rex and Abiva Empowerment Technologies books.
Aquaponic applications for the small farm are becoming all the rage, but how can it truly produce profitably? You need a complete system that supplies it's own feed that is mercury free, soy free, GMO free.
2 Big Mistakes Professionals make using Excel data in PowerPointDave Paradi
When professionals present financial or operational data from Excel, they often make these two mistakes when they move that data into PowerPoint. Learn what you need to do in order to avoid these mistakes.
AIESEC Ottawa Global Leader RecruitmentAIESEC Ottawa
Been wanting to join our team here at AIESEC Ottawa?
Recruitment will be starting very soon, so keep your eyes open, your social media updated, and our page refreshed!
Finance, Human Resources, International Experience Consulting, Marketing, Business Relations...
We have something for you.
Join the world's largest student-run NPO!
Web designing and publishing computer studies theory lessonMukalele Rogers
This presentation covers NCDC TOPIC 9: WEB DESIGNING AND PUBLISHING
Definition of terminologies used in web designing
Explain features of a web authoring software
Features of a website
Importance and limitations of a website
Qualities of a good website
P840/1 UNEB Past Paper Questions on Web Designing.
Answers and Examination answering techniques
This PPT contains data about Full Form Of Html, History Of HTML, Characteristics Of HTML, How Create & View A HTML Document & Commonly Used Web Browsers.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
This is a presentation by Dada Robert in a Your Skill Boost masterclass organised by the Excellence Foundation for South Sudan (EFSS) on Saturday, the 25th and Sunday, the 26th of May 2024.
He discussed the concept of quality improvement, emphasizing its applicability to various aspects of life, including personal, project, and program improvements. He defined quality as doing the right thing at the right time in the right way to achieve the best possible results and discussed the concept of the "gap" between what we know and what we do, and how this gap represents the areas we need to improve. He explained the scientific approach to quality improvement, which involves systematic performance analysis, testing and learning, and implementing change ideas. He also highlighted the importance of client focus and a team approach to quality improvement.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
1. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 1
WEB PAGE
DESIGNING
(using HTML)
MODULE
2. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 2
Module
e
STARTING WITH HTML
After reading this module, the students should be able to:
a.) Define HTML
b.) Understand the common internet domains
c.) Determine the requirements in creating a Web page using the
HTML
d.) Identify the elements of the Web page
e.) Know how to save the html file using notepad
In 1990, Tim Berners-Lee invented the HTML. HTML stands for HyperText Markup
Language. This is the Languange used to create and link Web pages together. It is the
“mother tongue” of your website. An HTML document consists of only text – the main
text of the document and special instructions called tags. A Web page is designed by
using tags. Tags are the basic coding units in the HTML system. They are key words
or phrases that are enclosed by angle brackets <>. Tags describe how graphics and
text are to be displayed. They are also used to create links between documents. HTML
is run by a Web browser like Internet Explorer, Mozilla Firefox and Google Chrome.
These are the tools that can be displayed and run HTML documents and their links.
1
3. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 3
WEB PAGE
HTML Code
4. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 4
DEFINITION OF TERMS
WWW - World Wide Web
HTML - HyperText Markup Language.
URL - Uniform Resource Locator.
Web Page - is the lingua franca of the web. A group of electronic files stored on
computers all over the world containing a vast of information.
Website - a site or location on the world wide web. It may consists of one or more
pages that related to a common theme, such as a person, business, organization, or
any other subject.
Web Browser - is the software that you need in order to find, retrieve, view, and send
information on the internet. Examples are google chrome, mozilla firefox, internet
explorer, and opera mini, etc.
Download - to transfer a file from another system to your own computer system via a
modem over telephone or cable lines.
Upload – to transfer a file from your computer system to another system.
FAQ – Frequently Asked Question
Firewall – software that limits certain kinds of access to a computer from a network or
other outside source.
GIF – Graphical User Interface, consist of 256 colors.
JPEG – Joint Photographic Expert Group, consist of 16.7 million colors.
PNG – Portable Network Graphics
Home Page – is the navigation center for the website.
Modem – Modulator Demodulator, used between a computer and a phone or cable to
transmit signal to and from the internet in a form of computer’s digital to an analog
signal and vice versa.
5. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 5
TCP/IP – Transmission Control Protocol/Internet Protocol
Chat – a form of a real time communication where participants type what they want to
say and repeated on the screen of the other participants.
COMMON INTERNET DOMAINS
DOMAIN WHEN IS IT USED? AN EXAMPLE
.com
.edu
- Companies that are
trying to make money
- High school, colleges &
Universities
- General Motors
– GM.com
- UST – UST.edu
.gov
.org
- Government,or
government-related
entities
- Special (usually non-
profit) organizations
- The White House –
Whitehouse.gov
- Consortium.org
.net
.xx
- Internet service
provider
- Country code
INQ7.net
- Philippines - .ph
- Canada- .ca
- Australia- .au
- France- .fr
6. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 6
REQUIREMENTS IN CREATING A WEB PAGE USING THE HTML
1. Editor – using the Notepad (source code) in text and extension name - .html or .htm.
2. Browser – usually internet explorer as it is designed by microsoft.
3. Program in HTML (syntax)
Syntax:
<Html>
<Head>
<Title></Title>
<Body></Body>
</Html>
7. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 7
ELEMENTS OF A WEB PAGE
BASIC CODES
OR TAGS
AND ITS MEANING
<HTML></html>
<HEAD>
HEADING
</HEAD>
<TITLE>
- a guide to browser
- a larger font size text, usually bold or italic in style, showing
the different sections of a page
- close tag for the head
- displays the browser’s title bar. It is the name assigned to
the page if you add it to the browser’s list of favorites
- close tag for the title
- contains your documents or info.
- closing the body tag
- Inline images that display lines across the page to separate
different sections
- Graphics, icons, bullets, line photos, or pictures that are not
part of the HTML file.
- a type of inline image that defines hotspots. These are
areas that activate functions when selected.
- The text that makes up the main content of the Web page.
It has many formats. It can be in paragraph form or bulleted
list.
</TITLE>
<BODY>
</BODY>
<HR>
HORIZONTAL
RULE
IMAGE
IMAGEMAP
NORMAL TEXT
<BG>
BACKGROUND
- The wallpaper of the Web page. It can be a solid color, a
picture or a graphic, or a default standard with white or
gray background.
8. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 8
ANIMATED
IMAGES
- inline images that include motion and animation. These
images are more attractive to the user.
- Text, phrases, or graphics that help the user to navigate
more on the Web page. By clicking the links, the browser
goes to a location in a file or to request a file from the
server.
- means break or line space
- a blank line is inserted between text
- preformatted
- text
LINKS
<BODY>
</BODY>
<BR> BREAK
<P>
PARAGRAPH
<pre></pre>
<font></font>
Title
Links Image/Animated
Heading
Horizontal Rule
Normal Text
Image
Body
Imagemap
Background
9. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 9
STARTING NOTEPAD
Notepad has different parts, namely, the main menu bar, the scroll bars, and the text
are. The main menu bar displays all the commands in the program. The scroll bar is
used to display different portions of the text file in the window. There are two kinds of
scroll bars: the vertical and the horizontal scroll bars. The text area is the place where
you input the text.
TO SAVE THE HTML FILE USING NOTEPAD
1. From the Menu bar, click the File menu and then click Save or Save As. The Save
As dialog box displays and changes the Save-in box to the target folder or drive.
2. Type the filename inside the Filename box below. (Remember to use an .HTML
extension for the file name.)
3. Then click the Save button.
10. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 10
TO DISPLAY THE HTML FILE TO THE BROWSER
1. Click the Start button, then Program.
2. Look for the default browser, then double click.
11. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 11
Modul
e
HTML TAGS
After reading this module, the students should be able to:
a.) Define tags
b.) Apply the rules in using tags
c.) Enumerate the main types of tags
d.) Identify the Tags and their functions
e.) Know the heading tags for formatting texts
f.) Understand the formatting in text tags
g.) Know how to create a list
TAGS are sets of instructions that tell the browsers what layout of text to use, what
graphics to be displayed, and where or what links are needed.
RULES IN USING TAGS
1. Each tag must be enclosed in <brackets>.
2. You can use small or capital letters.
3. Most tags come in pairs: the starting tag and the ending tag.
Example:
<HTML> (starting tag)
</HTML> (ending tag)
4. The browser ignores spaces around the tags. To read the codes easily, it is
advisable to put spaces around the tags.
2
12. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 12
MAIN TYPES OF TAGS
TYPES
TAGS MEANING
1.
Document
Structure
<HTML>
<HEAD>
<TITLE> BOOK</TITLE>
</HEAD>
<BODY>
BOOK CRAFT
</BODY>
</HTML>
Lets you set
up the basic
structure of
your Web
pages.
O
U
T
P
U
T
2.
Formatting
<HTML>
<HEAD>
<TITLE> BOOK</TITLE>
</HEAD>
<BODY>
<H1>BOOK CRAFT</H1>
<H3>PUBLISHING</H3>
</BODY>
</HTML>
Lets you
change the
appearance
of the text.
13. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 13
O
U
T
P
U
T
3. Links
<HTML>
<HEAD>
<TITLE> BOOK</TITLE>
</HEAD>
<BODY>
<H1>BOOK CRAFT</H1>
<H3>PUBLISHING</H3>
<AHREF=“C:publication.htm”>journals</A>
</BODY>
</HTML>
Allows
readers to
choose
highlighted
text or an
image from
your Web
pages to go
to other Web
pages.
O
U
T
P
U
T
4. Image
<HTML>
<HEAD>
<TITLE> BOOK</TITLE>
</HEAD>
<BODY>
<IMGSRC=“C:imageBookcraft.gif”ALIGN=“left”>
<H1>BOOK CRAFT</H1>
<H3>PUBLISHING</H3>
</BODY>
</HTML>
Allows you to
add images
to your web
pages
14. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 14
O
U
T
P
U
T
TAGS AND THEIR FUNCTIONS
COMMAND FUNCTION
<HTML></HTML>
The beginning and the end of the
HTML document.
<HEAD></HEAD>
Used for header information. It is the
beginning and the end of the section
of the document.
<TITLE></TITLE>
Indicates the beginning and the end
of the title. The title is not displayed in
the body of the Web page but on the
title bar of the browser.
<BODY></BODY>
Indicates the beginning and the end
of the contents of the body of the
Web page.
15. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 15
HEADING TAGS FOR FORMATTING TEXT
<H*> AND </H*>
This indicates the beginning and the end of the heading section. “H” represents the
heading and “*” represents the size. <H1> is the largest and <H6> is the smallest.
Heading separates text and introduces new topics on the Web page. It varies in
sizes. Text formatted with heading appears differently in the Web browsers if different
points are used.
<H1>Heading 1</H1>- 24 point in size
<H2>Heading 2</H2>- 18 point in size
<H3>Heading 3</H3> - 14 point in size
<H4>Heading 4</H4>- 12 point in size
<H5>Heading 5</H5> - 10 point in size
<H6>Heading 6 </H6>- 7 point in size
Syntax Output
16. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 16
FORMATTING TEXT TAGS
The Text formatting feature is a powerful tool for organizing the content of your Web
pages and for easier navigation.
The HTML tags <BR> and <P> are used to format the text. They control the space
between the lines of text and point where lines break on the screen.
COMMAND FUNCTION
<P> - Indicates the beginning of the paragraph and
inserts a blank line before and above the paragraph.
It does not need a closing tag.
- Inserts a horizontal line
- Breaks a line text and marks the start of a new line.
It does not need a closing tag.
<HR>
<BR>
SyntaxOutput
17. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 17
CREATING LIST
THREE BASIC TYPES OF LISTS:
1. Unordered List
2. Ordered List
3. Definition List
UNORDERED LIST ORDERED LIST
• Bullet characters appear in
place of the number next to the
item
• Sequential numbers appear
• An ideal format for steps,
rankings, and other sets of
information for which order is
stressed
• Works well for listing of items
equally important and order does
not matter
UNORDERED LIST
TAG NAME FUNCTION SYNTAX
Unordered List
tags
List Item tag
- Also known as
unnumbered list or
bulleted list, formats
information as bullet
points. This tag creates
an unordered or
bulleted list.
- Denotes an item on
the list
<UL
TYPE=“disc/square/circle”compact>
list items content </UL>
<LI> list item
18. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 18
To use Unordered List tags
Syntax Output
ORDERED LIST
TAG NAME FUNCTION SYNTAX
Ordered List tag
List Item tag
Creates an ordered or
numbered list
Denotes an item on the
list
<OL
TYPE=“1/A/a/I/”START=“start
value”compact> list item
content </OL>
<LI> list item content </LI>
19. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 19
To use Ordered List tags
Syntax Output
DEFINITIONLIST
TAG NAME FUNCTION SYNTAX
Definition List tag
Definition Term tag
Term’s Definition tag
Denotes a definition list
Contains a term to be
defined in the definition list
Contains a term’s definition
<DL> terms and definition
content </DL>
<DT> terms being defined
content</DT>
<DD> term definition
content </DD>
20. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 20
To use Definition List tags
Syntax
Output
21. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 21
Modul
e TEXT FORMATTING
After reading this module, the students should be able to:
a.) Define text formatting
b.) Enumerate the types of text formatting
c.) Identify the text formatting and their functions
d.) Know the importance of text formatting
Text formatting is a styling or changing the appearance of a text. It includes change in
colors, size, font, and alignment.
TYPES OF TEXT FORMATTING
1. Text-Level Formatting – is a formatting for a text or group of text.
Tag Name Syntax Function
1. Bold face <b> text </b> Contains text in boldface image.
2. Italics <i> text </i>
Contains text which you want to be
italic in format.
3. Strikethrough <s> text </s> Contains the text to be marked
4. Typewriter <tt> text </tt>
Contains the text to be rendered in
a fixed-width font or some kind of
typewriter font.
5. Underline <u> text </u>
Contains text to be rendered with
an underline.
6. Font Tag
<font color=”#” size=”#”
face=”font face”>
Contains the text properties to be
modified.
3
22. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 22
SyntaxOutput
1. Text-Level Formatting – is a formatting for a text or group of text.
Tag Name Syntax Function
1. Emphasize <em> text </em>
Contains the text to be emphasized. It is
typically rendered in italics.
2. Superscript <sup> text </sup>
Contains the text to be rendered as a
superscript to the text that precedes it.
3. Subscript <sub> text </sub>
Contains the text to be rendered as a
subscript to the text that precedes it.
4. Strong <strong> text </strong>
Contains the text to be strongly
emphasized. It is typically rendered in
boldface.
5. Big <big> text </big>
Contains text to be rendered in a font
size bigger than the default size.
6. Small <small> text </small>
Contains text to be rendered in a font
size smaller than the default size.
23. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 23
SyntaxOutput
2. Paragraph Formatting – is a formatting that controls the paragraph.
Tag Name Syntax Function
1. Line Break <br>
This tag inserts a line break
in a document.
2. Horizontal Rule
<hr align=”center”
color=”blue” size=”30”>
Places a horizontal line in
the page.
3. Center <center>paragraph</center>
Centers all text and other
page components it
contains.
4. Pre-formatted Text <pre>paragraph</pre>
This tag is rendered in a
fixed width font.
5. Division Alignment
<div align=”left/right/center/
justify”>paragraph</div>
Defines the sections or
divisions of a document
that require special
alignment.
6. Heading Levels
<hn align=”left/right/center/
justify”>paragraph</hn>
Establishes the hierarchy of
document heading levels
and is rendered in boldface.
7. Paragraph
<p align=”left/right/center/
justify”>paragraph</p>
Denotes a paragraph
24. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 24
Syntax
Output
IMPORTANCE OF TEXT FORMATTING
1. It makes your Web page appealing to the audience.
2. It allows you to emphasize a certain word or text and idea on your Web page.
3. It allows you to sort or organize the content of your Web page.
25. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 25
Modul
e
INSERTING IMAGES IN A WEB PAGE
After reading this module, the students should be able to:
a.) Define file format and images
b.) Analyze the standard format of image tag
c.) Apply the steps in inserting images in a Web page
d.) Know the advantages of adding image in a Web page
e.) Perform the rules for inserting background image
f.) Discuss the steps in creating a marquee
g.) Enumerate the reasons why image, background and marquee are
in important in creating a Web page
File format is the structure of how information is stored in a computer file.
Imagessuch as pictures, graphics, or illustrations often taken from sensible objects and
use to illustrate subject.
STANDARD FORMAT OF IMAGE TAG
The basic format of IMG:
Attribute
<IMG SRC=”luneta.jpg”>
Image Tag Image File
4
26. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 26
IMG stands for “image”. It tells to the browser that an image will go here on the page.
SRC stands for “source”. It tells the browser where to go to find the image.
The commonly used image file formats are: .gif and .jpeg.
STEPSIN ADDING IMAGES IN WEB PAGE
1. Place the cursor where you want to insert the image.
2. Type <IMG SRC=”ImageName.jpg/gif/png width=”#’ height=”#”>
STEPSIN ALIGNING AN IMAGE TO THE CENTER
1. Type <CENTER> before the image you want to center align.
2. Type </CENTER> after the image you want to center align
Syntax Output
27. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 27
ALIGNING IMAGE
The placement of the image on the page can be controlled by using the Image Align
tag. Here are the different attributes of alignments.
Attribute Function
left or right Aligns to the side and wraps the text above, around, and below it.
top Aligns with the tallest item available.
text top Aligns with the tallest text character available
middle Aligns the baseline of the current line with the middle of the image.
absmiddle Aligns the middle of the current line with the middle of the image.
baseline Aligns the bottom of the image with the baseline of the current
line.bottom
absbottom Aligns the bottom of the image with the bottom of the current line.
ADDING BORDER TO THE IMAGE
You set the <IMG> tags BORDER attribute to the width of the border in pixels.
Borders may be set from 0 to 10. If you set it to 0, you will not see any border.
Syntax Output
28. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 28
ADVANTAGES OF ADDING IMAGES IN A WEB PAGE
1. It provides content that is not available via text, such as scanned picture.
2. It adds color, humor and excitement to the Web page.
3. It attracts Netizens to visit your Website.
4. It attracts buyers to purchase your products.
CREATING BACKGROUND
Background is what underneath another object.
1. Image
2. Color
29. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 29
Change in Color
Syntax Output
Image Form
SyntaxOutput
RULES FOR INSERTING BACKGROUND IMAGE
1. The image and the Web page should be saved on the same folder.
2. The syntax and the file location of the picture should be typed correctly.
MARQUEE
Marquee is a small section of the browser window that displays text rolls across the
screen.
30. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 30
Syntax
Output
MARQUEE ATTRIBUTES
Marquee Tag Attribute
1. Direction “left”, “right”, “up”, or “down”
2. Bgcolor “color” or “hexadecimal value”
3. Scrolldelay “number”
4. Height “number”
5. Behavior “scroll”, “slide”, “alternate”
6. Width “number”
7. Loop “number” or “infinite”
32. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 32
Reasons why image,background and marqueeare importantin
creating a Web page
1. It grabs and keeps the attention of the viewer.
2. It creates an overall impact to the design of your Web page.
3. It adds more meaning to your content.
33. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 33
Modul
e
CREATING A HYPERLINK
After reading this module, the students should be able to:
a.) Define hyperlink
b.) Apply the steps in changing the color of a hyperlink text.
c.) Know the syntax increating a hyperlink on the Web page.
d.) Perform the steps in removing the underline of the hyperlink text.
e.) Discuss how to link image on the Web page.
f.) Enumerate the advantages and disadvantages of Hyperlink on the
Web page.
A hyperlink or link is a word, group of words, or image that you can click on to jump to
another document. It is used to connect Web pages of different Web sites or Web
servers anywhere in the world. The World Wide Web is composed of millions of linked
Web pages. Hotspots are used to create a link. A hotspot is an area of a text or an
image that notifies the visitor that there is a link on the text or image.
Syntax Output
5
35. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 35
CHANGING THE COLOR OF THE HYPERLINK TEXT
There are different colors used in a link to indicate that it is a normal, visited, or an
active link.
Attribute Function
Link
Link color is the color without a mouse over it or before visited.
The default color is usually blue.
Vlink
Visited link controls the color of a link that has been clicked or
visited. The default color is usually green or red.
Alink
Active link controls the color of a link on which a mouse has been
pressed but not clicked. The default color is usually green or red.
Syntax
Output
36. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 36
REMOVING THE UNDERLINE OF THE HYPERLINK TEXT
Syntax
Output
37. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 37
IMAGE LINK
The image link is used as the linking tool in connecting to another Web page or Web
site.
Syntax
Output
38. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 38
ADVANTAGES OF HYPERLINK ON THE WEB PAGE
1. It connects Web pages or Web sites which content are related to each other.
2. It identifies the rank of the Web site basically for business Web sites.
3. Without hyperlink there is no WWW because World Wide Web is a connection of
interlinked hypertext document.
DISADVANTAGES OF HYPERLINK ON THE WEB PAGE
1. Some hyperlinks are dangerous because it hides malicious content.
2. Some hyperlinks are also use for cybercrime. Once you click the hyperlink, it
contained malwares/viruses and it can hack your email account.
3. Some hyperlinks are destructive. Once you click it, the virus will automatically
installed on your computer and attacked your softwares.
39. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 39
Modul
e
ADDING FORMS ON THE WEB PAGE
After reading this module, the students should be able to:
a.) Define Web forms
b.) Apply the steps in creating a form tag.
c.) Know the uses of two special buttons in form tag.
d.) Enumerate the Web form elements.
e.) Perform the steps in creating a password tag.
f.) Discuss the steps in creating check boxes.
g.) Determine the steps in adding radio buttons.
h.) State the purpose of html Web forms.
Adding Web forms to your Web pages, allows you to communicate through your Web
site. Web form allows the user to enter information and provides predefined choices
from which the user can select. It is made up of spaces where you can enter text
information. A Web form is instantly submitted and most of the time they are also
immediately responded to. Most forms include fields: text boxes or pull-down menus
that allow user to input. The label explains what information is needed by an adjacent
field.
CREATING FORM TAG
Creating form is easy. It can also appear anywhere on a Web page. The form tag has
two attributes, ACTION and METHOD. They define how a particular form will behave,
determine where the information entered by the user will go, and how it will be sent
there.
6
40. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 40
Attribute Syntax Function
Form Tag
<Form Action=”url”></Form>
Describes what URL the information will
be sent to. It tells the address where
you will send this paper form. If an
ACTION is committed, the URL of the
page containing the form is used by
default.
<Form
Method=”post”></Form>
Sends the form entry results as a
document
<Form Method=”get”></Form>
Submits the results as a part of the URL
header instead.
TWO SPECIAL BUTTONS
1. Submit button – gathers all information entered in the form when it is clicked.
2. Reset Button– clears the form and returns all the settings to their original default
values.
Syntax Output
41. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 41
WEB FORM ELEMENTS
Attribute Syntax Function
1. Input Text
Tag
<input type=”text” value=”text”>
It is where all fields within a
form are specified. There is
no need to put a closing
INPUT tag.
2. Text
Attribute
<input text name=”Full Name”
size=”40”>
text is the default, with SIZE
used to specify size of the
box that is created or how
many characters wide the
text area will be. The
default size is 20 characters.
Attribute Syntax Function
42. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 42
3. Text Area
<textarea row=”#” cols=”#” text
here! </textarea>
allows you to produce a box
that can contain several
lines of text. The TEXT
AREA tag requires a unique
name, specified with
NAME=. You can specify
the size of you text box by
using the ROWS and COLS
attributes. You have to put
a closing tag for TEXT
AREA.
4. Select <Select>
<option> text 1 </option>
<option> text 2 </option>
<option> text 3 </option>
</Select>
to create a list field in which
some choices are hidden.
5. Option
The method to be used in
order to limit your user’s
choices.
Syntax Output
43. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 43
CREATING A PASSWORD TAG
Several Web sites would require the user to input a password to be able to access any
of the Web pages.
The MAXLENGTH attribute specifies the maximum number of characters a user may
enter into the field. If a MAXLENGTH is used, which is longer than the size of the text
field, then the text field will scroll to allow the user to enter more data. If MAXLENGTH
is not included in the code, the user may type any amount of text. But in most
PASSWORD fields, you will notice that there is limitation on the number of characters
that you can type.
Syntax
45. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 45
CREATING CHECK BOXES
Check boxes allow users to make multiple selections from a list. They display an array
of choices that are all visible at once, and from which users may select any, all, or none.
Syntax
Output
46. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 46
ADDING RADIO BUTTONS
To create a set of options that a user can see all at once, and from which a user can
make only one selection, you can use radio buttons.
RADIO buttons are small white circles, each shown next to the label. They are similar to
check boxes. In a RADIO button, the user is only allowed to make a single choice from
the list by clicking a circle.
Syntax Output
PURPOSE OF HTML WEB FORMS
1. It allows the users to communicate with you through your Web site.
2. It helps you to monitor who visited your Web site and get feedback from them.
3. It is used to promote some advertisements, announcements, or events.
47. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 47
Modul
e
FORMATTING TABLES
After reading this module, the students should be able to:
a.) Define table
b.) Enumerate the table and border attributes.
c.) Determine the proper way of coding the table elements.
d.) Apply the spanning table column and row.
e.) Perform the cell padding and cell space adjusting.
f.) Dicuss working with width and height.
g.) Set the border color and background color for table row.
A table is useful to summarize data from a database search or a set of choices. With
HTML tables, it’s not just text that can be placed inside but as well as pictures, links,
and even video and sounds.
TABLE ATTRIBUTES
Tag Name Syntax Function
Table Tag <table></table> Creates a basic table
Table Row tag <tr></tr> Contains several cells
Table Data tag <td></td> Creates individual cells
To display a border for table, use the BORDER attribute.
Attribute Syntax Function
BORDER=0 <table border=”0”></table> Borders are invisible
BORDER=1 <table border=”1”></table> Borders are visible
BORDER=N
<table border=”2”></table>
If you increase the value
greater than 1, it will
7
48. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 48
make the border thicker.
PROPER WAY OF CODING THE TABLE ELEMENTS:
Syntax
Output
SPANNING TABLE COLUMNAND ROW
<table>
<tr>
<td></td>
</tr>
</table>
49. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 49
A table heading oftentimes occupy more space than the rest. Spanning columns and
rows enables you to create interesting grids and to manage areas of space within a
table more completely.
Attribute Function
COLSPAN To span a column
ROWSPAN To span a row
Syntax
Output
USING CELLPADDING
50. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 50
Cellpadding sets the amount of space (both horizontal and vertical) between the cell
wall and the contents. The default value of Cellpadding is 1. The text inside the box will
look much better if you move it away from the border lines. It will look less crowded.
Syntax
Output
ADJUSTING CELL SPACE
51. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 51
Cellspacing allows you to increase or decrease the amount of space between the cells
of the tables.
Syntax
Output
WORKING WITH WIDTH AND HEIGHT
52. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 52
Table width and height allows you to control the width and height of the table.
Syntax
Output
SETTING BORDERCOLOR AND BACKGROUND COLORFOR TABLE
ROW
53. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 53
Modul
e
These attributes sets the colors of the borders and the background for a table row.
Syntax
Output
8
54. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 54
CREATING FRAMES
After reading this module, the students should be able to:
a.) Define frames
b.) Enumerate the attributes of frame tag.
c.) Apply the steps in setting frameset column.
d.) Know how to specify rows
e.) Perform the attributes in formatting frames.
Frames divide the browser window into parts, each of which appears as a separate
HTML document. Frames work very much like Tables. They are used to divide the
screen into two or more Web pages, and simultaneously display their contents in a
single browser window. Frames are used to assist in the navigation of many pages
over a large number of topics.
Tag Name Syntax Function
Frameset <frameset></frameset>
Marks frameset contents
and describes their layout.
ATTRIBUTES OF A FRAME TAG
Tag Name Syntax Function
Rows Frameset rows=”50%,*”
Defines number and sizes
of horizontal frames to
create
Cols Frameset cols=”70%,*”
Defines number and sizes
of vertical frames to create
Frameborder Frame border=”1”
Turns border between
frames on and off
The Frameset tag tells the browser to get more files to be placed on the page. The
browser places all the files on one page.
Syntax
55. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 55
Output
SETTING FRAMESET COLUMN
The value of this attribute defines the column width of each column (horizontal) within
the frameset. Each column width must be defined in terms of pixels (fixed), percentage
of browser window (variables), or as a relative value of space remaining (variable) using
the “*” symbol.
Tag Name Syntax Function
Frame tag <Frame>
Specifies a frame source
file and name
Noframe tag <Noframes></Noframes> Defines alternate page
56. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 56
content for browsers
without frames
Below are the attributes of a Frame tag.
Attribute Function
SRC
Defines location and filename for frame
contents.
NAME
Defines frame name for reference by
hyperlinks.
Syntax
Output
57. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 57
SPECIFYING ROWS
The frameset row attributes specifies the row height of each row (vertical) within the
frameset. It is measured in terms of pixels (fixed) percentage of the area of the browser
window (variable), or as a relative value of space remaining (variable) using the “*”
symbol.
SYNTAX OUTPUT
Syntax Output
58. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 58
FORMATTING FRAME
Below are the attributes of the Frameset tag.
Attribute Function
Frameborder
Determines frames with or without
borders: 0 or No – off borders, 1 or Yes
enables border.
Border
Specifies the space between frames in
the latest browsers.
Framespacing Specifies the space between frames in
59. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 59
the older browsers.
Border Color
Customizes color of lines separating
frames.
Below are the attributes of the Frame tag.
Attribute Function
Marginheight
Specifies space between frame contents
and top and bottom borders.
Marginwidth
Specifies space between frame contents
and left and right borders.
Noresize
Stops users from changing a frame’s
dimensions.
Scrolling
Controls the appearance of the frames:
“YES” includes scrollbars and “NO”
prevents the scroll bar to appear.
Syntax
60. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 60
OUTPUT
DepEd - Manila
61. Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 61
MANILA SCIENCE HIGH SCHOOL
Taft Ave., cor. P. Faura St., Ermita, Manila
Module 1- Starting with HTML
Pre-assessment
A.
B.
C.
D.
Practical Exercise
Module Test