Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

EPPD1063: HTML Programming Language

Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 28

EPPD1063

HTML
Programming Language
HTML
Programming
Language
1. Introduction
2. HTML Editor
3. Web Page Development
1) Introduction
HTML
HyperText Markup Language
is the major language of the Internet's World
Wide Web
ability to bring together text, pictures,
sounds, and links
HTML Version 4.0 - plus some additional
features that have been widely and
consistently implemented in browsers
<html> <head>
<link rel="stylesheet"
href="style.css"
type="text/css">
<title>
</title></head>
<body><h3>
</h3><br>
<hr><table>
<tr><th>
</th></tr><td>
</td> </table>
<form>...
</body>
Hypertext
Active text
Link
Clicking causes an action
Markup Language
Tags indicate formatting and
document structure
Source is processed by a program
that understands the tags and
formats the page
Introduction
2) HTML Editor
HTML documents are plain-text (also known as
ASCII) files that can be created using any text
editor.
Popular editor
Netscape Composer
Microsoft Frontpage
Microsoft Visual InterDev
HomeSite
HotDog
Web Publisher
Dreamweaver
Other notepad, word.

3) Web Page
Development
Preparing a web page
Writing vehicle
Programming in HTML
Authoring software
Browser
Test the code locally
Test the code on the server
Server
Test links to other sites
Store your published site
Web Page
Development
HTML document - tags
HTML is composed of tags
Tags - tells browser how to display the information
provided
HTML tags are always enclosed in angle-brackets ( <
> ) and are case-insensitive
<tag> ... </tag>
e.g., <H1> and </H1>
Generally used in pairs
Open tag
Closing tag same tag with / in front
Web Page
Development
<HTML> </HTML>
Beginning and end of every HTML document
<HEAD> </HEAD>
Contains information about the document
including the title that is to appear in the title bar
<BODY> </BODY>
All content for the page is placed between these
tags
<!-- -->
Comment tags
Web Page
Development
HTML document basic tags
<HTML>
<HEAD>
</HEAD>

<BODY>
</BODY>
</HTML>

If you view this from the browser, you will see a
blank page
Web Page
Development
Each document consists of head and
body text.
The head contains the title, and the body
contains the actual text that is made up of
paragraphs, lists, and other elements.
Web Page
Development -
example
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML. This is the first
paragraph. While short it is still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
Web Page
Development
HTML document heading
HTML has six levels of headings, numbered
1 through 6, with 1 being the largest
Headings are typically displayed in larger
and/or bolder fonts than normal body text
The syntax of the heading element is:
<Hy>Text of heading </Hy>
where y is a number between 1 and 6
specifying the level of the heading
Web Page
Development
HTML document heading tags

<H1> </H1> Largest heading
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6> Smallest heading
Web Page
Development
HTML document - body
Background color / graphics
Attributes of <BODY>
BGCOLOR=code
Specify color for background of the screen
BACKGROUND=path/file
Tiles the graphic in the file to fit the screen

<BODY BGCOLOR=green>
<BODY BGCOLOR=#00FF00>
<BODY BACKGROUND=flower.jpg>
Web Page
Development
HTML Document list
- HTML supports unnumbered,
numbered, and definition lists

Unnumbered Lists
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
Output
- apples
- bananas
- grapefruit

Numbered List
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
Output
1. oranges
2. peaches
3. grapes

Find - Definition List & Nested List

Web Page
Development
Web Page
Development
HTML Document text formatted
<BR> - tag break same as enter/return
<B></B> - bold text
<I> </I> - italic text
<U></U> - underline
<PRE></PRE> - generate text in a fixed-
width font
<BLOCKQUOTE></BLOCKQUOTE>
- tag to include lengthy quotations in a
separate block on the screen
Web Page
Development
HTML Document linking
Hyperlink - browser highlights the identified text or
image with color and/or underlines to indicate that
it is a hypertext link
Relative linking - the path to the linked file relative
to the location of the current file.
<A HREF=page1.html> Click Page 1 </A>
Absolute linking - linking to documents that are not
directly related
<A
HREF=http://www.fsktm.upm.edu.my>FSKT
M</A>
Web Page
Development
HTML Document mailto
send electronic mail to a specific person or
mail alias by including the mailto attribute in
a hyperlink

<A href=mailto:masura@ftsm.ukm.my> Mail to Madam
Masura</A>
Web Page
Development
HTML Document line break tag

<BR>
Line Break --- Forces a new line

<br>Learning HTML<br>is<BR>fun!</P>
Web Page
Development
HTML Document image
Format such as *.gif, *.jpeg, *.jpg, *.xbm,
*png.
<IMG SRC=picture1.gif >
<IMG SRC=picture1.gif HEIGHT=100
WIDTH=65>
<A HREF=page1.html"><IMG
SRC=picture1.gif"></A>
Web Page
Development
GIF
Graphics Interchange Format
Use for graphics
JPG
Joint Photographic Experts Group
Use for photographs
PNG
Portable Network Graphics
Expected to replace GIF
Web Page
Development
Tables
<TABLE> ... </TABLE>
- define table in HTML
<TR> ... </TR>
- specifies a table row within a table
<TH> ... </TH>
- defines a table header cell
<TD> ... </TD>
-defines a table data cell
<TABLE BORDER>
<TR>
<TD>Country</TD>
<TD>Capital</TD>
</TR>
<TR>
<TD>Malaysia</TD>
<TD>Kuala Lumpur</TD>
</TR>
<TR>
<TD>China</TD>
<TD>Beijing</TD>
</TR>
</TABLE>
Table example

Output:
Country Capital
Malaysia Kuala Lumpur
China Beijing
Web Page
Development
Web Page
Development
Tables more properties
BORDER = X
- add borders to the table
WIDTH=x, HEIGHT=x,
- control the size of the table
ALIGN=left or center or right
- align a table/data to the left,center or right
CELLSPACING-the width of the spacing between
cell and along edges of cells.
CELLPADDING-amount of space inserted btw cell
content and the inner edge of a cell
Web Page
Development
Themes
Unified set of design elements and color
schemes that you can apply to a page to give
it a consistent and attractive appearance
Background
Fonts
Banners
Bullets
Link buttons
Web Page
Development
Using a theme is a quick and easy way to
make sure your Web pages are visually
consistent and appealing.
Microsoft FrontPage includes many complete
themes that you can use right away.
You can also change those themes or create
new ones
Web Page
Development
Themes e.g.

You might also like