HTML Introduction (02c) Our Plan G HTML background G Unix and other - - PowerPoint PPT Presentation

▶

Feb 17, 2023 692 likes •970 views

HTML Introduction (02c) Our Plan G HTML background G Unix and other issues G Minimal HTML documents G Hyperlinks and URLs Web Concepts: Static Design your PC domain.name Client Software HTTP HTML/HTTP HTML /HTTP HTML Server Internet

SLIDE 1

HTML Introduction (02c)

SLIDE 2

Our Plan

G HTML background G Unix and other issues G Minimal HTML documents G Hyperlinks and URLs

SLIDE 3

Web Concepts: Static Design

Static pages created manually Client Software HTML Page

your PC Internet HTML/HTTP TCP/IP HTML /HTTP TCP/IP HTTP Server Software HTML, TXT , GIF, JPEG etc. domain.name

SLIDE 4

HTML Background

G derived from SGML (an ISO standard) G tailored (bastardized) for Web G stored as plain ASCII text with “markup tags” G an “open” standard G evolving into a robust "SGML application"

with special tags added for dynamic screen presentation

G a related future technology is “XML”

SLIDE 5

SGML Background

G SGML

– standard generalized markup language – superset of HTML – allows documents to describe their own “grammar” – has well defined international standard (ISO 8879) – has many industry-specific applications – very important in government publishing

SLIDE 6

SGML vs. HTML

G SGML allows documents to describe their own

grammar. It specifies the tags used in the document

and the structural relationships that those tags

represent. HTML applications predefine a small set of

tags in conformance with a fixed specification. Freezing a small set of tags allows users to leave the language specification out of the document and makes it much easier to develop documents. Unfortunately, this comes at the cost of severely limiting HTML.

G SGML has proved very costly to learn and implement

SLIDE 7

Extensible Markup Language -- XML

G XML retains the key SGML advantages of

extensibility, structure, and validation in a language that is designed to be easier to learn, use, and implement than full SGML.

G XML differs from HTML as follows:

– Information providers can define new tag and attribute names at will. – Document structures can be nested to any level of complexity. – Documents may include optional description of grammar so applications can validate structure.

SLIDE 8

Logical vs. Physical Markup

G physical

– describes fonts, spacing, layout details

G logical

– describes “structure” such as headings, paragraphs, lists, etc.

G early emphasis was on logical markup,

current pressures argue for more physical control over "look and feel"

SLIDE 9

Browser Page Resolution

G text, graphics, and multimedia objects are

stored separately and brought together by the browser

G actual look and feel of page depends upon

client browser and user settings

G thus you should design primarily for logical

presentation

SLIDE 10

Evolution of HTML

G Version 1 G version 2 G version 3.2 -- current standard G Microsoft vs. Netscape differences

– dynamic HTML – "push" strategies

SLIDE 11

Unix Issues

G mkhomepage G pico, vi G mkdir, rm, cp, ls -l (dir), G file permissions

– chmod 600 private.html – chmod 644 normal.html – chmod 755 normal.cgi – chmod 777 dangerous.html

G ftp

SLIDE 12

Other issues

G Adobe Acrobat

– renders PDF formatted files – www.adobe.com

G HTML editors

– Netscape Gold or Composer – Internet Explorer – Word 97 suite

SLIDE 13

The Minimal HTML Document

<html> <head> </head> <body> </body> </html>

SLIDE 14

The Head Part

<head>

<meta name=“author” content=“brancheau”> <script>javascript here</script> <title>shown in title bar</title> <style type="text/css">

</style>

</head>

G Note difference among tags, attributes, values

SLIDE 15

Basic Tags

G headings G paragraphs G lists G text

SLIDE 16

The Body Part

<body>

all content is “tagged” e.g. <h1>first level heading</h1> <h2>second level heading</h2> <h3>third level heading</h3> <p>paragraph text</p> <ul><li>bullet list item</li> <li>second item</li></ul> <applet>java, etc.</applet>

</body>

SLIDE 17

Creating Links and Anchors

G Set a link using the href attribute:

<A HREF="URL">text or object</A>

G Set an anchor using the name attribute:

<A NAME="top"></A>

SLIDE 18

Hyperlinking

<a href=home.html> embedded text or object to highlight </a> <a href=#anchor-name> embedded text or object to highlight </a> <a href=home.html#anchor-name> embedded text or object to highlight </a>

Hyperlink part seen by user

SLIDE 19

Anatomy of a URL

G Everything on Web addressed with standard G Universal Resource Locator (URL)

– used to address info resources on the web

Host Name (incl domain) Directory and File Name

http://www.colorado.edu/infs/jcb/home.html

Protocol File Type

SLIDE 20

Relative vs. Absolute URLs

G absolute (for Web or for server document tree)

– any fully qualified URLs (http://www.colorado.edu/jcb/home.html) – or files with leading slash (/jcb/home.html)

G relative (to currently displayed page)

– directory/file or file (jcb/home.html or home.html) – or files without leading slash (./home.html) – use ./ and ../ per normal

G pros and cons

SLIDE 21

Using URLs

G Absolute URLs

– use for all external resources (remote server) http://www.colorado.edu/infs/jcb/home.html – use for permanent internal resources /infs/jcb/home.html – for getting feedback "mailto:james.brancheau@colorado.edu"

SLIDE 22

Using URLs

G Relative URLs

– use for most internal resources jcb/home.html – use URLs in same “project” home.html

SLIDE 23

Using URLs

G within a specific page

– use for links inside a different page home.html#top – use for links inside a page #top

SLIDE 24

HTML Lists

G Unordered (bullet) list <UL>...</UL>

– use <LI> for list items

G Ordered (number) list <OL>...</<OL>

– use <LI> for list items

G Definition (indented) list <DL>…</DL>

– use <DT> for terms and <DD> for definitions

SLIDE 25

Text Formatting

G Logical styles

<STRONG>strong</STRONG> <EM>emphasize</EM>

G Physical styles

<B>bold</B> <I>italics</I> <U>underline</U>

SLIDE 26