|
|
|
|
|
|
Introductions |
|
Timetable |
|
Housekeeping |
|
Apps we’ll be using |
|
Notepad, Netscape, Explorer |
|
House Rule: |
|
“There’s no such thing as a dumb question...” |
|
|
|
|
|
|
How the Web works |
|
Overview of HTML |
|
What is HTML? |
|
Terms & Definitions |
|
Markup Tags |
|
HTML Tags |
|
Document Structure |
|
Body Text |
|
Character Styles |
|
Lists |
|
Backgrounds |
|
META Tags |
|
|
|
|
|
|
Images |
|
Image Tag |
|
Controlling Text & Images |
|
|
|
Linking |
|
Absolute and Relative URLs |
|
NAME references |
|
MAILTO Link |
|
|
|
|
|
|
The Internet is essentially made up of software. |
|
Smaller networks are linked with other networks. |
|
They are linked through a commonly accepted
protocol, called TCP/IP (telecommunications protocol/internet protocol). |
|
Packets of information are sent in and between
networks by way of a system of numeric addresses. |
|
|
|
|
|
|
|
|
|
|
Through a LAN |
|
Connect through a modem and phone line to an Internet
Service Provider |
|
Cable |
|
WAP |
|
|
|
|
|
|
|
|
Acronym |
|
Conceived in 1965 (!) by |
|
Ted Nelson |
|
A means of linking information |
|
sources in a non-linear way |
|
Introduced by Apple in 1987 |
|
Cross-platform |
|
|
|
|
|
|
|
|
It’s a markup language, NOT a programming
language |
|
A means of structuring and formatting documents |
|
However… |
|
HTML is a subset of SGML, derived from GML,
devised by IBM in the 1960’s |
|
|
|
|
|
|
|
|
|
HTML Elements |
|
…are a means of structuring information |
|
each section in a document is an element |
|
Each element contains markup tags |
|
closed/open |
|
attributes eg size/width |
|
Source code |
|
|
|
|
Syntax is the convention for writing source code |
|
You must adhere to it! Otherwise… |
|
This is what it looks like |
|
<TagName> Label </TagName> |
|
|
|
|
|
|
There are four basic or primary tags |
|
|
|
|
The COMMENT tag allows annotations to the
document |
|
It is not visible in the browser |
|
Uses special syntax: |
|
|
|
<!-- comment text --> |
|
|
|
|
|
|
|
|
|
Define structure through hierarchy |
|
Currently six levels: |
|
<H1> Largest |
|
<H2> |
|
<H3> |
|
<H4> |
|
<H5> |
|
<H6> Smallest |
|
|
|
|
|
|
|
Without formatting, standard text appears as a
single, continuous paragraph |
|
HTML ignores line <BR> and paragraph
breaks <P> |
|
you need to explicitly format these for browsers
to interpret |
|
|
|
|
|
|
|
You can center text on a page by using a tag: |
|
<CENTER> Text </CENTER> |
|
Or by using the ALIGN=CENTER attribute: |
|
<H2 ALIGN=CENTER>Text |
|
</H2 ALIGN=CENTER> |
|
<P ALIGN=CENTER>Text </P> |
|
|
|
|
|
|
|
|
|
|
|
Developed to format lengthy quoted material |
|
Indents text from both left and right margins |
|
Adds a blank line above and below quoted text |
|
|
|
<BLOCKQUOTE>”It’s the best we’ve ever
seen!”</BLOCKQUOTE> |
|
|
|
|
|
|
|
|
Tells the browser to retain character spacing |
|
Useful for quoted material, coding and so on |
|
|
|
|
|
|
|
|
Used for changing character formats within a
block of text |
|
Two types: |
|
Physical character tags |
|
Logical character tags |
|
Physical character tags are used less frequently
now, as they are interpreted differently by different browsers |
|
|
|
|
Common physical and logical tags |
|
|
|
|
|
Two types: |
|
UNORDERED |
|
ORDERED |
|
UNORDERED is a “bullet list” |
|
Opening tag is <UL> (closed) |
|
List items use <LI> tag (open) |
|
ORDERED is a numbered list |
|
Opening tag is <OL> (closed) |
|
List items use <LI> tag (open) |
|
|
|
|
|
Unordered lists |
|
Disc <LI TYPE=disc> |
|
Circle <LI TYPE=circle> |
|
Square <LI TYPE=square> |
|
Ordered lists |
|
Default (1,2,3) <LI TYPE=1> |
|
Alpha (A,B,C) <LI TYPE=A> |
|
Alpha (a,b,c) <LI TYPE=a> |
|
Roman (I,II,III) <LI TYPE=I> |
|
|
|
|
|
|
Looks like - well, a list of definitions, as in
a glossary |
|
Needs three tags |
|
Declaration of list |
|
<DL> </DL> |
|
Term to be defined |
|
<DT> |
|
Definition |
|
<DD> |
|
|
|
|
|
|
|
Lets you add horizontal lines to the page for
structure or aesthetics |
|
<HR> |
|
Can take the following attributes: |
|
Width (% or pixels) |
|
Size (0-200 pixels) |
|
Align (Left, Right - default is Center) |
|
|
|
|
|
These are symbols and special characters - eg
copyright, trademark |
|
Common ones are: |
|
Copyright © © |
|
Registered: ® ® |
|
Ampersand: & & |
|
Double quote: “ " |
|
Different O/S and browser configurations
have different special characters. |
|
|
|
|
Change the default colors of text and links by
including attributes in the <BODY> tag |
|
|
|
|
|
|
|
|
Colors are defined and written in HEXADECIMAL
notation |
|
ie six alphanumeric characters: |
|
0-9 |
|
A-F |
|
Color is determined from Red, Green, Blue (RGB)
values – you need a color table…(or maybe not) |
|
|
|
|
|
|
|
|
|
|
|
You can set the background of a page as: |
|
a solid color |
|
an image |
|
Use the <BODY> tag for both |
|
Background color |
|
in the <BODY> tag, use |
|
BGCOLOR=“#color hex value” |
|
Background image |
|
in the <BODY> tag, use BACKGROUND=“image
filename |
|
|
|
|
|
|
A META tag is used to describe information about
information about the document |
|
Often used to provide information for search
engines robots and spiders |
|
META tags are never seen |
|
They appear in the <HEAD> tag |
|
Common attributes are |
|
HTTP-EQUIV |
|
NAME |
|
CONTENTS |
|
|
|
|
|
|
Tag is usually used for automatic redirection to
another page |
|
Example: |
|
<META HTTP-EQUIV=“Refresh” CONTENT=“10; URL=
anotherpage.htm”> |
|
Punctuation is VITAL! |
|
CONTENT attribute tells the browser how many
seconds to wait before it goes to the specified URL |
|
|
|
|
|
|
META tags are usually used to provide keywords
for search engine spiders and robots. |
|
Spiders “read” META tags and use the keywords
for indexing purposes |
|
Use META tags and <TITLE> tag to provide
meaningful keywords for search engines |
|
|
|
|
<HTML> |
|
<HEAD> |
|
<TITLE>Seminar Design and Delivery,
Copywriting, Content Provision, Training, Consultancy |
|
</TITLE> |
|
<META NAME=“DESCRIPTION"
CONTENT="FeNiKs: Your gateway to intelligent training, copywriting,
content provision, editorial, and consultancy"> |
|
<META NAME=“KEYWORDS"
CONTENT="seminar, staff retention, course design, content, provider,
copy, writing, copywriting, training, trainer, editor, editorial,
communications, graphic, promotion, advertising, marketing, john blower,
website, site design, web training, recruiting, recruiters, recruitment,
consultant, consultancy, internet, architecture, writers, writer, eclectic,
fast, accurate, multi-disciplinary, business, links, resources, opinion,
writing, art, people, places, performance, futurist, futurism, fluxus,
virtual, cash, boston, san francisco, california, mill valley, england,
britain, united kingdom, london"> |
|
</HEAD> |
|
|
|
|
|
|
|
Types: |
|
GIF (Graphical Interchange Format) |
|
JPG/JPEG (Joint Photographic Experts Group) |
|
GIF format is appropriate for line-art |
|
JPG format is suitable for photographic images |
|
|
|
|
Tag is <IMG> |
|
Attributes are ALT and ALIGN |
|
|
|
|
<IMG SRC="pix/ilebanner.gif"
ALT="FeNiKs Business Communications Banner"> |
|
IMG SRC="pix/ilebanner.gif" |
|
|
|
|
|
|
<img border="0"
src="images/skyship600.jpg" align="right"
hspace="10" vspace="10" width="311"
height="214"> |
|
|
|
<img border="0"
src="images/skyship600.jpg" align=“left"
hspace="10" vspace="10" width="311"
height="214"> |
|
|
|
|
|
|
|
|
|
Links are fundamental to the Web |
|
Text and images can be used as links |
|
Three types: |
|
within the same document |
|
to a document in the same directory |
|
to an external document |
|
|
|
|
|
|
|
Anchor tag <A> defines the start and end
of a link |
|
Two attributes: |
|
HREF (“Hypertext Reference”) creates a link
to a file outside a document |
|
NAME creates a link to a location within a
document |
|
|
|
|
|
|
|
Complete URL links to a document on another
server or in another directory: |
|
<A HREF=“http://www.microsmart-usa.com”>
MicroSmart</A> |
|
Relative URL links to a document in the same
directory: |
|
<A HREF=“resume.htm”> My Resume</A> |
|
|
|
|
|
|
|
Links to a specific location within a document |
|
Examples: |
|
|
|
<A HREF=“#placetogo”>Click here</A> |
|
|
|
Back to the<A HREF=“#top”>top</A> of
the page |
|
|
|
|
|
|
|
|
FTP (File Transfer Protocol) is usually used to
download (and upload) files to and from a server |
|
You can link to an FTP server in exactly the
same way as you do to a page or other file |
|
Example: |
|
<A
HREF=“ftp://ftp.gestalt.com/downloads/fictitious.exe”> Imaginary
file</A> |
|
|
|
|
|
|
|
Invokes the user’s eMail application and inserts
your address in the FROM field |
|
Example: |
|
|
|
<a
href="mailto:john@feniks.com"> Mail</a> |
|
|
|
|
|
www.htmlworks.com |
|
www.webmonkey.com |
|
www.pageresource.com |
|
www.useit.com |
|
www.dsiegal.com |
|
www.notetab.com |
|
http://www.tucows.com/ |
|
http://vitts.tucows.com/ftp95.html |
|
|
|
Notes