HTML Note

CE1353
APLIKASI kOMPUTER
Web Site Development
Objectives

Identify the hardware and software required to write, test, and execute a web page Describe how HTML tags are used to format Web pages Discuss the benefits of using Web page authoring software Describe how FrontPage can be used to write a web page.
CE1353 :: Aplikasi Komputer
Contents

World Wide Web Preparing a Web Page HTML Authoring Software FrontPage Frames
World Wide Web

Provides multimedia communication over the Internet Terminology:
HTML : HyperText Markup Language

<html> <head> HyperText <link rel="stylesheet" href="style.css" Active text type="text/css"> Link <title> Clicking causes an action </title></head> Markup Language <body><h3> Tags indicate formatting and </h3><br> document structure <hr><table> <tr><th> Source is processed by a </th></tr><td> program that understands the </td> </table> tags and formats the page <form>... </body>
CE1353 :: Aplikasi Komputer 5
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
Programming in HTML

Type tags into a text file (Notepad) HTML editor HTML code must be saved with .html extension
<head> <title>BusyBox</title> <style type="text/css"> body { background-color: #DEE2DE; color: #000000; }
:link { color: #660000 } :visited { color: #660000 } :active { color: #660000 } td.c2 {font-family: arial, helvetica, sans-serif; font-size: 80%} td.c1 {font-family: lucida, helvetica; font-size: 248%} </style> </head> <body> <basefont face="lucida, helvetica, arial" size="3"> CE1353 :: Aplikasi Komputer 7
Authoring Software

WYSIWYG (What You See Is What You Get) Create web page visually HTML code is generated automatically
Preparing a Web Page Process

Use writing vehicle to create web site Test locally using the browser Connect to Internet using your browser Test the links to other sites Publish the site to your server Test the site by accessing from the server
HTML : Basic Tags

Tag tells browser how to display the information provided Enclosed in angle brackets < > Generally used in pairs Open tag Closing tag same tag with / in front Can nest tags Tags cannot overlap
10
HTML : Document Tags
<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
11
HTML : Basic Tags
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
If you view this from the browser, you will see a blank page
HTML : Basic Tags

<TITLE> </TITLE> Causes the page title to be displayed in the title bar Place in the heading section between <HEAD> </HEAD>
13
HTML : Basic Tags

Add content between <BODY> </BODY> Text Structure Tags Headings Paragraphs Lists Images
14
HTML : Creating and Testing

Open text editor Enter basic document tags <HTML> <HEAD> </HEAD> <BODY> >/BODY> </HTML> Save as .html Do not close text editor
15

Open your browser Type file path/name as the URL or use File Open and select the file The file name should appear on the title bar The main window should be blank Do not close the browser

16

Return to the open file in the text editor Add a <TITLE> tag inside <HEAD> Save Return to the browser Click refresh or reload button Check the title bar
17
Adding content

Add one tag at a time to create content After each addition Save the file in the text editor Refresh/reload the file in the browser Verify that your entry is correct
18
HTML : Text Tags - Heading Tags

<H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Largest heading
Smallest heading
<H1>Welcome to my first web site</H1>
19
HTML : Text Tags - Paragraph Tag
<P> </P> Blank line inserted before the start of the paragraph One space between adjacent words regardless of the number of spaces in the source Extra spaces and lines are ignored <P>Learning HTML is fun!</P>
20
HTML Text TagsLine Break Tag

<BR> Line Break --- Forces a new line <br>Learning HTML<br>is<BR>fun!</P>
21
HTML List Tags

<UL> </UL> Unordered list (bulleted list) <OL> </OL> Ordered list (numbered list) Every item in a list is preceded with <LI> List contents are indented
<b>Senarai kursus yang di daftar untuk semester ini</b> <ol> <li>SAK3002 <li>SKR3000 <li>SMM3200 </ol>
HTML Formatting Tags

Make page more attractive Make page more functional Style Tags Logical Physical
23
HTML : Formatting Tags - Logical Style Tags

Browser dependent Emphasis Tag <EM> </EM> Usually displays italics Strong emphasis Tag <STRONG> <STRONG> Usually displays boldface
24
HTML : Formatting Tags - Logical Style Tags

Tell browser how to display the text Italics <I> </I> Boldface <B> </B> Center <CENTER> </CENTER>
25
HTML : Putting it Together
26
Images

Use images that are appropriate and attractive Use sparingly since they effect download time
27
Obtaining Images

Download from a site that offers free images Pay to use an image Scan an image/document that you own or have permission to use Digital camera Create original graphics using software
28
Image File Formats

Acceptable image formats vary by browser Generally acceptable formats are GIF Graphics Interchange Format Use for graphics JPG Joint Photographic Experts Group Use for photographs PNG Portable Network Graphics Expected to replace GIF
HTML Image Tag

Inline image Loaded with HTML code <IMG> Attributes: <IMG SRC=myphoto.jpg> SRC ALT <IMG SRC=myphoto.jpg HEIGHT ALIGN=right HSPACE=10> WIDTH ALIGN HSPACE VSPACE
HTML Link Tag

Link to Other sites Between your own pages To e-mail <A HREF=name>hypertext</A>
<A HREF=http://www.upm.edu.my>UPM</A> <A HREF=harithpage.html>Hariths Page</A> <A HREF=mailto:harith@upm.edu.my>Hariths email</A>
31
HTML Tags : 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>
32
Authoring Software : FrontPage

WYSIWYG Generates HTML code Benefits Non-technical users can create their own web pages Technical users can insert HTML inside the generated HTML
33
Getting Started in FrontPage

Window similar to Office 2000 Windows Process to create a web page Select the type of page you wish to create Enter content Format content Add a title Add links and graphics View
34
Navigation View

Shows structure of web site Visual clue showing how the subpages relate to the main page
35
Other Views

Folders Lists the files in detail Reports Provides information of interest to site manager Hyperlinks Graphics picture of link relationships Tasks List of items that need to be completed and who is responsible Useful for collaboration
36
Page Tabs

Normal tab Viewing the page in WYSIWYG HTML tab The HTML code for the page Add your own HTML code to this page Preview Page as it will appear viewed by a browser Switch between HTML tab and Preview tab to see the effect of changes as you make them
37
Estimated Loading Time

Listed at the bottom of the page Try to keep loading time low Can be changed to show loading time using different modem speeds
38
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
39
Themes
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.
40
Examples of Themes
41
Examples of Themes
The following example shows a plain Web page, and then shows how the same page would look with different themes applied: 1. A plain Web page. 2. The same page with three different themes applied.
42
Page Templates
A Template is a set of predesigned formats for text and graphics on which new Web pages and sites can be based. After a page or site is created using a template, you can customize it. Columns Table of contents Searches Guest book Bibliography FAQ Forms for visitors Forms for customers
43
Page Templates Examples
44
Frames

Divides the page into sections Each section displays a different web page Each section can be updated individually Frameset collection of frames displayed in a single page
45
Process

Develop each page individually Create frameset page Establish links
46

HTML Note

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Note

Diunggah oleh

Hak Cipta:

Format Tersedia

CE1353

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

World Wide Web

Provides multimedia communication over the Internet Terminology:

CE1353 :: Aplikasi Komputer

HTML : HyperText Markup Language

Preparing a Web Page

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

Preparing a Web Page Process

CE1353 :: Aplikasi Komputer

HTML : Basic Tags

CE1353 :: Aplikasi Komputer

HTML : Document Tags

CE1353 :: Aplikasi Komputer

HTML : Basic Tags

<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

HTML : Basic Tags

CE1353 :: Aplikasi Komputer

HTML : Basic Tags

CE1353 :: Aplikasi Komputer

HTML : Creating and Testing

CE1353 :: Aplikasi Komputer

HTML : Creating and Testing

CE1353 :: Aplikasi Komputer

HTML : Creating and Testing

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

HTML : Text Tags - Heading Tags

<H1>Welcome to my first web site</H1>

CE1353 :: Aplikasi Komputer

HTML : Text Tags - Paragraph Tag

CE1353 :: Aplikasi Komputer

HTML Text TagsLine Break Tag

CE1353 :: Aplikasi Komputer

HTML List Tags

HTML Formatting Tags

CE1353 :: Aplikasi Komputer

HTML : Formatting Tags - Logical Style Tags

CE1353 :: Aplikasi Komputer

HTML : Formatting Tags - Logical Style Tags

CE1353 :: Aplikasi Komputer

HTML : Putting it Together

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

Image File Formats

HTML Image Tag

HTML Link Tag

<A HREF=http://www.upm.edu.my>UPM</A> <A HREF=harithpage.html>Hariths Page</A> <A HREF=mailto:harith@upm.edu.my>Hariths email</A>

CE1353 :: Aplikasi Komputer

HTML Tags : Background Color / Graphics

CE1353 :: Aplikasi Komputer

Authoring Software : FrontPage

CE1353 :: Aplikasi Komputer

Getting Started in FrontPage

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

CE1353 :: Aplikasi Komputer

Estimated Loading Time