Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML...
48
Lecture 3 Creating a Web Page with HTML
-
Upload
poppy-pitts -
Category
Documents
-
view
217 -
download
3
Transcript of Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML...
Lecture 3Creating a Web Page with HTML
ObjectivesHypertext Document in WWW p1.4-1.5The HTML language p.1.8-1.10
Definition Web browsers and HTML Versions of HTML Tools for creating HTML documents HTML syntax Examples of HTML tags Basic tags
Objectives (con’t)Creating: p.1.11-1.34
• Headings• Paragraphs • Lists• Character tags• Special characters• Horizontal lines• Graphic images
Exercises
Hypertext Document in WWW
A hypertext document is an electronic file that contains elements that a user can select, usually by clicking a mouse, to open another document.
Liner VS. hypertext document
Hypertext Markup Language (HTML)Definition: Language used to create and
format Web pages, using a set of special codes, called tags
HTML doesn’t describe how text looksHTML uses a code that describes the
function the text has
Web browser & HTML
A Web browser interprets the codes to determine a document’s appearance
Different browsers might display a document differently
Why different browsers display a web document differently ?Portability
different computer platforms different types of fonts supported e.g. Arial, Gothic different I/O devices:
• chunky teletypes• high-end workstations• non visual media such are speech and Braille
Advantage: frees web page authors worrying about compatibility on different computers and operating systems
Why different browsers display a web document differently ? (con’t)
Speed exact specification on how to display
each character dramatically increase• file size
• the time to transfer
Versions of HTMLHTML has a grammar or set of rules called
syntaxThe specifications or standards have been
developed by a consortium of web authors, software companies and interested users (World Wide Web Consortium W3C)
Extensions are supported by some browsers to add new possibilities to HTML
Versions of HTML (con’t)
5 versions of HTML [ref.]
HTML 0.0
HTML 1.0
HTML 2.0
HTML 3.2
HTML 4.01
HTML 4.01 Adds support for style sheets, new features to tables and forms ...
Tools for Creating HTML Documents
HTML documents: text filesTools:
Text editor e.g. MS note pad HTML convertor e.g. MS Word HTML editor Other design tools: MS FrontPage,
Macromedia Dreamweaver
HTML syntax2 elements:
Document content• Parts that the user sees
Tags• HTML codes that indicate the docume
nt content
HTML syntax (con’t)<Tag Name Properties> Document Content </Tag
name>e.g. <H1 ALIGN=CENTER>Mary Taylor<H1>A tag contains
brackets (< >) that enclose the tag name properties (optional)
• additional information that defines the tag’s appearance
Document content: parts the user sees
HTML syntax: Two-side tags
Two-sided tags require both opening and closing tags
e.g.
<H1 ALIGN=CENTRE> Mary Taylor </H1>• opening tag: tells the browser to turn on the
feature and apply it to the document content that follows
• closing tag: turns off the feature
HTML syntax: One-sided tagsrequire only the opening tag e.g. <LI>, <IMG>
<OL><LI>Graduated May, 1996. M.A. International <LI>Grade Point Average: 3.5 overall, 3.9 in major</OL>
<IMG SRC= “Taylor.gif”>
HTML syntax characteristicsTags are NOT case sensitive
H1=h1
HTML ignores extra blank space, blank lines or tabs
HTML syntax characteristics (con’t) The following HTML statements are the
same: <H1>To be or not to be. That is the question.</H1> <H1>To be or not to be. That is the
question.</H1> <H1>To be or not to be. That is the question.</H1>
Examples of HTML tags
Examples of HTML tags (con’t)
Basic Tags (example)
Displayed at the title line
<Head>: surround information about the Web page
<Body>: surround the part that appears in the browser
Example Result: Basic Tags
Creating Headings
6 levels<Hy properties>Heading text</Hy>
where y is a heading numbered 1- 6
Example: Headings
Example: Creating headings
Example Result: Headings in the browser
Creating a paragraphSyntax:
<P>text</P>
Example: paragraph text (no <P> tag)
Example Result: Text Not separated into paragraphs
Example: <P> tag for paragraphs
<P>Satellite Technician (Front Range Media Inc. 1993-1994): Monitored satellite uplink/downlink procedures to assure quality video transmissions. Aided technicians with transmission problem. Associated in the assembly and maintenance of uplink facility.</P>
<P>Technical Assistant(Mountain View Bank 1992-1993):Managed data cessing system. Handled user requests anf\d discussed programming option Managed delivery service</P>
<P>Salesperson(Computer Visions 1991): Sales and customer support in computers and electronics. Managed commercial accounts in Mountain View and Crabtree locations.</P>
Example result: paragraphs with <P> tag
Creating lists: Ordered listList in numeric orderExample:
<OL><LI>Graduated May, 1996. M.A. International Telecommunications<LI>Grade Point Average: 3.5 overall, 3.9 in major<LI>Dean’s List: September 1994-May 1996<LI>Member, Phi Alpha Omega Honor Society </OL>
Result:
1. Graduated May, 1996. M.A. International Telecommunications
2. Grade Point Average: 3.5 overall, 3.9 in major
3. Dean’s List: September 1994-May 1996
4. Member, Phi Alpha Omega Honor Society
Creating list: Unordered listList in which list items have no particular order.Example:
<UL><LI>Graduated May, 1996. M.A. International Telecommunications<LI>Grade Point Average: 3.5 overall, 3.9 in major<LI>Dean’s List: September 1994-May 1996<LI>Member, Phi Alpha Omega Honor Society</UL>
Result: Graduated May, 1996. M.A. International Telecommunications Grade Point Average: 3.5 overall, 3.9 in major Dean’s List: September 1994-May 1996 Member, Phi Alpha Omega Honor Society
Character tagsDefinitions:Character tag: A tag that is applied to an
individual characterLogical tag: Indicates how you want to use
text, not necessarily how want it displayedPhysical tag: Indicates exactly how
characters are to be formatted
Common Logical tagsIt indicates how you want it displayed.
Example: Logical tags
Common Physical tags
Example: Physical Character tags
Example: Applying character tags
Example result: Applying character tags
Special characters
Example: Special characters<H5 ALIGN=CENTER>11 Kemper Ave. &#
183 Lake View, CO 80517 · (303 555-1012</H5>
Result:
Horizontal lines <HR ALIGN=CENTER SIZE=12 WIDTH=100%> <HR ALIGN=CENTER SIZE=6 WIDTH=50%> <HR ALIGN=CENTER SIZE=3 WIDTH =25%> <HR ALIGN=CENTER SIZE=1 WIDTH=10%>
Example: Horizontal lineAfter the end of Mary’s address line, press
Entertype <HR>Result:
Inserting a graphic
Two types Inline image External image
Inline imageappears directly on the Web pageloaded when the page is loaded2 types supported by all browsers:
GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group)
Syntax:
<IMG SRC= “filename”> e.g. <IMG SRC=“Taylor.gif”>
External imageNot displayed with the Web pageBrowser must have a file viewer e.g. Shockwave
