HTML:

Basics of HyperText Markup Language

Internet Tecnology 1

Markup Language (ML): What is it? Defines meaning and appearance of text

Meaning → what the text represents (e.g., title, author)

Appearance → how the text is displayed

Can consist of whatever tags and rules desired As long as it has an agreed-upon method for interpretation by the client.

Underlies all word processors, publishing software, etc.

Example

Internet Tecnology 2

Do you know how lucky you are?

You are lucky because:

You are healthy

People love you

…

ML: Physical vs. Semantic Markup Physical (descriptive)

Appearance is strictly defined

Specifies precisely how content is to be displayed

Limited flexibility

Must abide by existing tags

Examples

Many tags in HTML , WYSIWYG editor (e.g., Dreamweaver, MS Word)

Semantic (logical)

Emphasizes structure or meaning over appearance

Does not specify how the content is to be displayed Appearance is often handled by a separate mechanism (e.g., CSS)

Flexibility in defining meaning

Can define one’s own set of tags Ideal for storing metadata and database information

Examples

XML, SGML

Internet Tecnology3

ML: SGML, HTML, & XML Markup Languages

Comprised of tags and rules for their use

SGML - Standard Generalized Markup Language

An ISO-standard technology for defining generalized markup languages for documents

SGML Resource (http://www.w3.org/MarkUp/SGML/)

Designed to enable sharing of machine-readable documents

HTML - HyperText Markup Language

An application of SGML, used for a web document

More loosely defined than SGML & XML

XML - eXtensible Markup Language

A set of rules for encoding documents in machine-readable form

XML FAQ: http://xml.silmaril.ie/

Emphasize simplicity, generality, and usability over the Internet

An abbreviated version of SGML (more restrictive)

Easy to define your own document types and tags

XML-based Internet Applications/Languages

RSS, Soap, XHTML

Internet Tecnology4

http://en.wikipedia.org/wiki/International_Organization_for_Standardizationhttp://en.wikipedia.org/wiki/Markup_languagehttp://www.w3.org/MarkUp/SGML/http://xml.silmaril.ie/http://en.wikipedia.org/wiki/Rsshttp://en.wikipedia.org/wiki/SOAPhttp://en.wikipedia.org/wiki/Xhtml

HyperText Markup Language: History General Markup Language (1960’s, IBM)

GML driven by large publishing jobs

Standardized General Markup Language

ISO standard developed by ANSI (1986) Large, powerful tag set Applications in library, government, & commerce

Tim Berners-Lee borrowed from SGML to support hypertext project (1990)

Why it has worked

Instance of SGML, but fewer options to negotiate Smaller tag set nurtured authoring community relatively easy to use

HTML Standards HTML 1.0 - most basic tags (20 elements), 1991 HTML 2.0 - forms support, 1995 HTML 3.0 - vendor/browser specific tags crept in, January 1997 HTML 4.0 – frames introduced, December 1997 HTML 5.0 – published as a working draft in 2008, finalized in October 2014

multimedia support, interoperability, intended to subsume XHTML

Internet Tecnology5

HTML: Overview What is it?

A way of describing how text and images should be displayed by Web browsers

Good guide: http://www.jmarshall.com/easy/html/

HTML Components HTML document consists of elements

Elements consist of text enclosed by tags

Some elements are defined by attributes

These attributes usually have values

HTML Tag Types Semantic/Logical

To divide the document into logical units or indicate the semantics of a piece of text

e.g., , ,

Physical

To format the display of information

e.g., , ,

Hyperlink

To link to other items

e.g., ,

Internet Tecnology6

HTML Document

Element

Element

Element

text

http://www.jmarshall.com/easy/html/

HTML: Syntax

Tag starts with e.g.,

Tags are not case sensitive e.g., same as

Most tags enclose the marked up text e.g., This is a heading

There are some that don’t need an end tag e.g.,

,

Anchor tag is used to “link” documents Kiduk Yang’s Home Page

Blank lines and spaces ignored when interpreting HTML document

Internet Tecnology 7

HTML: A Basic Web Page

Internet Tecnology 8

This is a web page

This text is displayed on the screen

HTML: Basic tags

Tags

- paragraph

- bold

- italics

, ,… - headers

- anchor

- image

Many tags have ending tags

, , ,

Attributes Annotations to tags

Provide more detail

They can be mandatory

Or optional

Internet Tecnology 9

HTML: Linking Documents Linking to another document

Anchor Text

e.g., Kiduk Yang’s Home Page

Linking to a specific place in a document Use the NAME attribute of tag to designate the target location in a document

Week 1

Link to the named anchor (e.g., Week 1) with #name_attribute-value (e.g., wk1)

wk1

Opening the linked document in a specific window. Use the TARGET attribute of tag to designate the target window

HTML: Nesting Tags

Nesting Tags Placing of one set of tags inside another

When you want the effect of more than one tag

e.g., bold, italicized and centered text

Tags close in the reverse order of open sequence

Open:

, , Close: , ,

Tags can be “nested”, but there are some restrictions… Make sure tags don’t overlap!

This text is bold and italics

Not nested correctly and may not display correctly

Correct: This text is bold and italics

Internet Tecnology11

HTML: Absolute vs. Relative URLs Absolute URL

Contains the entire path to the document

or

→ Says to start from the web server root (/) and find this file (schedule.htm)

Relative URL

Contains the path to the document relative to the current place in the file structure

→ Says to look in the same directory as the current document for the file (schedule.htm)

Use BASE HREF tag (in HEAD section) to apply different server root

→

Internet Tecnology 12

http://widit.knu.ac.kr/~kiyang/teaching/IT/s17/schedule.htmhttp://kiyang.knu.ac.kr/

Creating/Editing HTML Options for editing HTML documents

Text Editors Edit the HTML source code directly (e.g., Notepad, Pico)

HTML Editors Like text editors, edit source codes but with the aid of tag tools (e.g., HomeSite)

Word Processors Save as or Export to HTML document (e.g., MS Word)

WYSIWYG Editors GUI edits generate the source code (e.g., Dreamweaver, Front Page)

So why learn HTML code? WYSIWYG (and Word Processors) adds a lot of proprietary codes

Harder to edit without the software the second time

Cannot always control the structure and layout

View Source is the best teaching tool

Internet Tecnology 13

http://en.wikipedia.org/wiki/WYSIWYG

Publishing HTML

Content Creation Mode #1 Create HTML pages on the local PC using Notepad, Dreamweaver, etc.

Upload the files to the server to be displayed on the Web

Content Creation Mode #2 Create HTML pages directly on the server using pico, vi, etc.

Internet Tecnology 14

Edit

Edit

Publish

Publish

Display

Display

upload

HTML: Web Access

Web Server Configuration

Gives access to certain directories

Designates a document root directory (where to look for files to serve)

On WIDIT, document root is /var/www

e.g., http://widit.knu.ac.kr/lis/ /var/www/lis/

Most servers designate personal web document directory

/home/USERID/public_html/ /~USERID/

e.g., http://widit.knu.ac.kr/~kiyang/index.html /home/kiyang/public_html/index.html

Internet Tecnology 15

No Yes

Web Server

/home/

/home/USERID/

/var/www/

/home/USERID/public_html/

Yes

http://widit.knu.ac.kr/lis/http://widit.kmu.ac.kr/~kiyang/index.html

Web Design 101 Consider your audience

What type of hardware & software do the intended users have? PC vs. Mac, Internet Explorer vs. Chrome

Plan the Information Architecture of your website Lay out the website architecture in your mind or on paper first.

Internet Tecnology 16

Web Design 101 Put navigation links on every page

No more than 3 clicks to useful information

Use descriptive links (i.e., anchor text)

Tell people where they are going!

Make the website portable

Use relative URLs if possible

Consider the page load speed

Use thumbnail images that will enlarge when clicked

Practice user-centered design

FAQ, Date of last update, E-mail link to the website author/administrator

Providing a sense of “place” is important

Consistent look & feel

Easy to comprehend visual layout

Implement a dynamic & interactive website (via HTML form & CGI)

Feedback mechanism

Protect information with Log-in

Automated services

Internet Tecnology 17