html - knuwidit.knu.ac.kr/~kiyang/teaching/it/s18/lectures/6.it-html1.pdfml: physical vs. semantic...

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


<doc>

<title>Do you know how lucky you are?</title>

<para>You are lucky because:

<list>

<list_item>You are healthy

<list_item>People love you

<list_item>…

</list>

</doc>

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_Standardization

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

http://www.w3.org/MarkUp/SGML/

http://xml.silmaril.ie/

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

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

http://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 2014multimedia 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., <head>, <body>, <h1>

Physical

To format the display of information

e.g., <b>, <font>, <i>

Hyperlink

To link to other items

e.g., <a>, <img>

Internet Tecnology6

HTML Document

Element

Element

Element

<tag attr=“value”>text</tag>

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

HTML: Syntax

Tag starts with <, ends with > e.g., <html>

Tags are not case sensitive e.g., <html> same as <HTML>

Most tags enclose the marked up text e.g., <h1>This is a heading</h1>

There are some that don’t need an end tag e.g., <p>, <br>

Anchor tag is used to “link” documents <a href="http://kiyang.knu.ac.kr/">Kiduk Yang’s Home Page</a>

Blank lines and spaces ignored when interpreting HTML document


HTML: A Basic Web Page


<html>

<head>

<title>This is a web page</title>

</head>

<body>

This text is displayed on the screen

</body>

</html>

HTML: Basic tags

Tags <p> - paragraph

<b> - bold

<i> - italics

<h1>, <h2>,…<h6> - headers

<a> - anchor

<img> - image

Many tags have ending tags

</b>, </a>, </i>,</h1>

Attributes Annotations to tags

Provide more detail

They can be mandatory

<a href=“file.html”>

<img src=“picture.gif>

Or optional

<body bgcolor=“red”>

<tr width=“60” align=“right”>


HTML: Linking Documents

Linking to another document <a href=“URL to page”>Anchor Text</a>

e.g., <a href="http://kiyang.knu.ac.kr/">Kiduk Yang’s Home Page</a>

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

<a name=“wk1”>Week 1</a>

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

<a href=“schedule.htm#wk1”>wk1</a>

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

<a target=“window1” href=“schedule.htm">IT Schedule</a>

Will load schedule.htm to the browser window named “window1”

If such window does not exist, it will open a new browser window named window1.

Target = “_blank” load into a new, unnamed window

Target = “_self” load in place of the current document


http://kiyang.knu.ac.kr/

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: <P>, <B>, <I> Close: </I>, </B>, </P>

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

<b><i>This text is bold and italics</b></i>

Not nested correctly and may not display correctly

Correct: <b><i>This text is bold and italics</i></b>

Internet Tecnology11

HTML: Absolute vs. Relative URLs

Absolute URL

Contains the entire path to the document

<a href=“http://widit.knu.ac.kr/~kiyang/teaching/IT/s17/schedule.htm”> or

<a href=“/~kiyang/teaching/IT/s17/schedule.htm”>

→ 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

<a href=“schedule.htm”>

→ 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

→ <base href=http://kiyang.knu.ac.kr/>


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

http://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


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.


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


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.


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
