Download Writing Your Own Web Page with HTML

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

Cascading Style Sheets wikipedia , lookup

URL redirection wikipedia , lookup

Transcript
Writing Your Own Web Page with
HTML
World Wide Web
Provides multimedia communication over
the Internet
 Terminology:
 URL, HYPERTEXT, HOMEPAGE, SERVER,
ISP, LINK, WEBSITE
 HTML is the language of the ‘Web

HTML History
Different versions, each improving on the
last
 HTML2, HTML3, HTML4 and now HTML
5 is being worked on as a “draft”
 Outlined and controlled by the World
Wide Web Consortium (W3C) let by
Timothy Berners-Lee

◦ Berners-Lee developed the idea of HTML

Anyone can participate in development of
the WWW
Preparing a Web Site

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
Organization of a website
• Hierarchical
– Home page provides general overview, defines main links for the pages
further down in the hierarchy
– Pages contain more specific information
– Links to move up or down
– Readers can easily know their position in the structure
• Linear (sequential)
– Home page is the title or introduction
– Links move from one page to another, typically forward and backward
– Very rigid
– Limits your readers’ freedom to explore
• Combination of Linear and Hierarchical
– Links to move up or down, forward or backward
– Readers lose their mental positioning when crossing hierarchical
boundaries by moving forward or backward
• Web organization
– Little or no overall structure
HyperText Markup Language
(HTML)

HyperText
◦ Active text
◦ Link
◦ Clicking causes an action

Markup Language
◦ Tags indicate formatting and document
structure
◦ Source code is processed by a program that
understands the tags and formats the page (a
web browser)
Programming in HTML

Type tags into a text file (Notepad)
◦ HTML editor
◦ HTML code must be saved with .html extension
Authoring Software
WYSIWYG
 Create web page visually
 HTML code is generated automatically

 See image on next slide
Process: Preparing a Web Page
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
You can nest tags
 Tags cannot overlap

(<i><b>WordUp!</i></b>
is bad form, not guaranteed to work)
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
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>
HTML – Basic Tags
Add content between <BODY> …
</BODY>
 Text Structure Tags

◦
◦
◦
◦
Headings
Paragraphs
Lists
Images
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

HTML – Creating and Testing
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

HTML – Creating and Testing
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

HTML – Creating and Testing
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
HTML Text Tags – Heading Tags
<H1> … </H1> Largest heading
 <H2> … </H2>
 <H3> … </H3>
 <H4> … </H4>
 <H5> … </H5>
 <H6> … </H6> Smallest heading
<H1>Theatre Schedule</H1>

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 a lot of fun!</P>
HTML Text Tags - Break
<BR>
 Forces a new line

<P>Learning HTML is a lot of <BR>fun!</P>
Displays as:
Learning HTML is a lot of
fun!
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

HTML Formatting Tags
Make page more attractive
 Make page more functional
 Style Tags

◦ Logical
◦ Physical
HTML Formatting Tags – Logical
Style Tags
Browser dependent
 Emphasis Tag

◦ <EM> … </EM>
◦ Usually displays italics

Strong emphasis Tag
◦ <STRONG> … <STRONG>
◦ Usually displays boldface
HTML Formatting Tags – Physical
Style Tags
Tell browser how to display the text
 Italics
 <I> … </I>
 Boldface
 <B> … </B>
 Center
 <CENTER> … </CENTER>

Images
Use images that are appropriate and
attractive
 Use sparingly since they effect download
time

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

Image File Formats


Acceptable image formats vary by browser
Generally acceptable formats are
◦ GIF
 Graphics Interchange Format
 Used for graphics like clipart
◦ 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:
◦
◦
◦
◦
SRC
ALT
HEIGHT
WIDTH
<IMG SRC=“hello.jpg”>
<IMG SRC=“hello.jpg ALT=“Hello!”
WIDTH=“50%”>
HTML – Link Tag (HREF)

Link to
◦ Other sites
◦ Between
your own pages
◦ To e-mail
<A HREF=”name”>hypertext</A>
<A HREF=”http://www.kodak.com”>Kodak</A>
<A HREF=”johnpage.html”>John’s Page</A>
<A
HREF=”mailto:[email protected]”>John’s
mail</A>
Changing Font

<FONT>…</FONT>
◦ Attributes
 SIZE=“…” (font size, 1 through 7)
 COLOR=“…” (font colour)
 FACE=“…” (font type)

<FONT SIZE=“3” COLOR=“#FF9933”
FACE=“tahoma”> …</FONT>
HTML Tags – Background Colour
and 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=”abcpict.jpg”>
CSS – Cascading Style Sheets
Introduced in HTML 4.01
 Current versions of HTML want to
separate content from presentation
(format or appearance.. its “look”)
 The HTML tags like <P> and <BR> are
used for basic formatting
 Text and background colour, dropcaps,
placement on the page and other
complex formatting features would can be
controlled by CSS

Style Sheet in HTML 4

Style sheets add more design control and separate this
design from HTML itself
◦
◦
◦
◦

External style sheets apply the same style rules to all pages
Embedded style sheet apply style rules to a single page
Inline styles apply style rules to page elements
Cascading Style Sheet (CSS) refers to the capability for style
information from more than one source to be combined
Example of style sheet code
◦ BODY { background-color: #CCFFCC;
font-family: Arial, Helvetica, sans-serif;
color: #330066 }
◦ A:link { color: #330066 }
◦ A:visited { color: #660000 }
◦ A:hover { color: #FFCC00 }
◦ A:active { color: #FF0000 }
Multimedia – Adding Sound and
Video

External Multimedia
◦ Any media file that cannot be automatically loaded by a

Web browser
◦ Helper applications (or viewers) handle different external
media files that are not directly supported by your
browser

Sound File Extensions:
◦
◦
◦
◦
.au (fully cross-platform)
.aiff (Macintosh)
.wav (Windows)
MPEG Audio .mp2, .mp3 (cross-platform)
< A HREF=“anthem.au”><IMG SRC=“flag.gif”></A>
Multimedia – Adding Sound and
Video

Video Files Extensions
◦ MPEG .mpeg, .mpg
◦ .mov
◦ .avi
< A HREF=“dumbo3.mov”>hypertext</A>

Inline Multimedia
◦ Inline video
<IMG DYNSRC=“rainstorm.avi”
SRC=rainstorm.gif”>
◦ Inline sounds
<BGSOUND SRC=“trumpet.au”>