(Webpage Design) : Prepared By: Ms. Ella Mae S. Luyun

Introduction to
HTML
(Webpage Design)
Prepared by:
Ms. Ella Mae S. Luyun
WEB DESIGN
USING HTML
2
TOP 10 WEBSITE
1. Google.com
2. Youtube.com
3. Facebook.com
4. Baidu.com
5. Wikipedia.org
6. Twitter.com
7. Yahoo.com
8. pornhub.com
9. Instagram.com
10. xvideos.com
https://www.visualcapitalist.com June 2019
3
HTML
(Hypertext Markup Language)
HTML is the standard markup language

for Web pages. With HTML you can
create your own Website.
It is used to create pages and make
them functional.
4
Definition of terms
HTML – HyperText Markup Language
URL – Uniform Resource Locator.
HTTP – Hypertext Transfer
Protocol
W W W – World Wide Web.
5
Definition of terms
url
http://www.facebook.com
Protocol
6
Definition of terms
Browser – A software program which is
used to show web pages.
HTML Editor – A word processor that has
been specialized to make the writing of
HTML documents more effortless.
7
HTML Basic Structure
<HTML>
<head>
<Title>HOMEPAGE</TITLE>
</head>
<bOdY>
<H1> HELLO WORLD! </H1>
<H6> WELCOME TO MY HOMEPAGE</H6>
</body>
</HTML>
8
Display
9
Choosing Text Editor
 HTML Editors are excellent tools for

experienced web developers; NotePad
is the standard text editor that
comes with the microsoft windows
operating system.
10
Starting NotePad
To start NotePad in windows 10:
Click the windows button +R
Type: Notepad
Click Ok
11
Type the following codes:
<HTML>
<Title>HOMEPAGE</TITLE>
<body>
<H1> HELLO WORLD! </H1>
<H6> WELCOME TO MY HOMEPAGE</H6>
</body>
</HTML>
12
SAVING OF HTML FILE
HTML file should
always be save with
.html or .htm
The saved file will
look like this:
13
COLOR CODES
Colors are set using “RGB” color codes,
which are, represented as hexadecimal
values. Each 2-digit section of the code
represents the amount, in sequence, of red,
green or blue that forms the color. For
example, a RGB value with 00 as the first
two digits has no red in the color.
14
Main Colours
15
16 Basic Colors
16
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10.BAKER’S CHOCOLATE 10.#5C3317
11.VIOLET 11.#9F5F9F
12.BRASS 12.#B5A642
13.COPPER 13.#B87333
14.PINK 14.#FF6EC7
15.ORANGE 17 15.#FF7F00
Body Element
> The BODY element of a web page is an
important element in regards to the page’s
appearance.
> Attributes:
TEXT="#RRGGBB"
BGCOLOR=“#FF0000”
BACKGROUND=“Folder1/diyosa.jpg”
18
Body Element
<BODY BGCOLOR=“#FF0000”>
19
Body Element
<BODY BACKGROUND="BG1.JPG">
20
Font Element
> Fonts play a very important role
in making a website more user
friendly and increasing content
readability.
21
Font Attributes
> HTML <font> tag is use to add style, size,
and color to the text on your website.
SIZE=“7”
COLOR=“RED”
FACE=“ARIAL”
22
Font Attributes
Example:
<font
face="Cooper"
size="12"
color="red">
DIYOSA </font>
23
Headings, <Hx> </Hx>
> Inside the BODY element, heading
elements H1 through H6 are generally
used for major divisions of the document
Headings are permitted to appear in any
order, but you will obtain the best results
when your documents are displayed in a
browser.
24
<HTML>
Headings, <Hx> </Hx>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
Heading 3
</BODY> Heading 6
</HTML>
25
BREAK <br>
 Line breaks allow you to decide where the
text will break on a line or continue to the
end of the window.
 A <BR> is an empty Element and does not
have a closing tag.
26
BREAK <br>
<HTML>
Hello,
<BODY>
Hello, <BR> LOVE… <BR> LOVE…
GOODBYE!
</BODY> GOODBYE!
</HTML>
27
Horizontal Rule
 The <HR> element causes the
browser to display a horizontal line
(rule) in your document.
 <HR> does not use a closing tag
28
Horizontal Rule, <HR>
Attribute Description Default Value
SIZE Height of the rule in pixels 2 pixels
Width of the rule in pixels or
WIDTH percentage of screen width 100%
Aligns the line (Left, Center,
ALIGN Right) Center
Sets a color for the rule
COLOR (IE 3.0 or later)
Not set
29
Horizontal Rule <hr>
<HTML>
<BODY ALIGN="CENTER">
<FONT SIZE="7">
Hello, <HR> LOVE…
<HR COLOR="RED" WIDTH="50%">
GOODBYE!
</BODY>
</HTML>
30
Alignment
 Some elements have attributes for alignment
e.g. Headings, Paragraphs and Horizontal Rules.
 The Three alignment values are :
 LEFT <p align=“left”> </p>
 RIGHT <p align=“right”> </p>
 CENTER <center> </center>
 <p align=“center”> </p>
31
MARQUEE
> Marquee <marquee> tag is a
scrolling piece of text displayed
either horizontally across or
vertically down your webpage
depending on the settings.
32
<MARQUEE> Attributes
width
This specifies the width of the marquee. This
can be a value like 10 or 20% etc.
height
This specifies the height of the marquee.
This can be a value like 10 or 20% etc.
33
<MARQUEE> Attributes
direction
This specifies the direction in which marquee
should scroll. This can be a value like up,
down, left or right.
behavior
This specifies the type of scrolling of the
marquee. This can have a value like scroll,
slide and alternate.
34
Images
 <IMG>This element defines a graphic image on the
page.
 Alignment (ALIGN): This allows you to align the image
on your page. (Left, Center, Right)
 Width (WIDTH): is the width of the image in pixels or
percentage. (Width=60%, Width=500px)
 Height (HEIGHT): is the height of the image in pixels
or percentage. (Height=60%, Height=500px)
35
Some Examples on images
1) <IMG SRC=“jordan.gif“
2) <IMG SRC=" jordan.gif" width="60px"
height="60px">
3) < IMG SRC =" jordan.gif“ align="left">
36
Practice: Recreate the sample output
37
Practice: Recreate the Note:
sample output BACKGROUND COLOR-
PINK
WELCOME TO DIYOSA’S
HOMEPAGE – H1
“magandang regalo na
hindi mo na ibabalot”
marquee
Horizontal rule 50%
You may use available
pictures from previous
38
hands on
A picture is worth a
thousand words
A complex idea can be
conveyed with just a
single still image,
namely making it
possible to absorb large
amounts of data quickly.
39
Partner Activity #1
> Choose a partner.

> Create a simple homepage.
> The homepage must have a design that will
incorporate to your [ABM] strand.
> Homepage must possess a welcome message or
tagline that will effectively communicate a visual
message intended for a specific viewer.
40
Rubrics
Content Design Effectiveness

(50 pts) (30 pts) (20 pts)
The homepage has The homepage has The developer of the site
a well stated clear an exceptionally has made an exceptional
purpose and theme attractive and attempt to make the
that is carried out content interesting to
usable layout
through the site the people for whit is
intended
41
THANK YOU

(Webpage Design) : Prepared By: Ms. Ella Mae S. Luyun

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

(Webpage Design) : Prepared By: Ms. Ella Mae S. Luyun

Загружено:

Авторское право:

Доступные форматы

Introduction to

HTML is the standard markup language

 HTML Editors are excellent tools for

> Choose a partner.

Content Design Effectiveness

Вам также может понравиться