Standard Generalized Markup Language
Download
Report
Transcript Standard Generalized Markup Language
HTML:
Basics of HyperText Markup Language
InfoTech Seminar
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>
InfoTech Seminar
2
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
Flexibility in defining meaning
Does not specify how the content is to be displayed
Appearance is often handled by a separate mechanism (e.g., CSS)
Can define one’s own set of tags
Ideal for storing metadata and database information
Examples
XML, SGML
3
InfoTech Seminar
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
Designed to enable sharing of machine-readable documents
HTML - HyperText Markup Language
SGML Resource (http://www.w3.org/MarkUp/SGML/)
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
Emphasize simplicity, generality, and usability over the Internet
XML FAQ: http://xml.silmaril.ie/
An abbreviated version of SGML (more restrictive)
Easy to define your own document types and tags
XML-based Internet Applications/Languages
RSS, Soap, XHTML
4
InfoTech Seminar
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, current standard, December 1997
HTML 5.0 – published as a working draft, 2008
5
InfoTech Seminar
HTML: Overview
What is it?
A way of describing how text and images should be displayed by Web browsers
HTML Components
Good guide: http://www.jmarshall.com/easy/html/
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
Element
Element
<tag attr=“value”>text</tag>
To divide the document into logical units or indicate the semantics of a piece of text
e.g., <head>, <body>, <h1>
Physical
Element
Semantic/Logical
HTML Document
To format the display of information
e.g., <b>, <font>, <i>
Hyperlink
To link to other items
e.g., <a>, <img>
6
InfoTech Seminar
HTML: Syntax
Tag starts with <, ends with >
Tags are not case sensitive
e.g., <p>, <br>
Anchor tag is used to “link” documents
e.g., <h1>This is a heading</h1>
There are some that don’t need an end tag
e.g., <html> same as <HTML>
Most tags enclose the marked up text
e.g., <html>
<a href="http://kiyang.kmu.ac.kr/">Kiduk Yang’s Home Page</a>
Blank lines and spaces ignored when interpreting HTML
document
InfoTech Seminar
7
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>
InfoTech Seminar
8
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>
InfoTech Seminar
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”>
9
HTML: Linking Documents
Linking to another document
<a href=“URL to page”>Anchor Text</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)
e.g., <a href="http://kiyang.kmu.ac.kr/">Kiduk Yang’s Home Page</a>
<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
InfoTech Seminar
10
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>
11
InfoTech Seminar
HTML: Absolute vs. Relative URLs
Absolute URL
Contains the entire path to the document
<a href=“http://widit.knu.ac.kr/~kiyang/teaching/IT/w16/schedule.htm”> or
<a href=“/~kiyang/teaching/IT/w16/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)
InfoTech Seminar
12
Creating/Editing HTML
Options for editing HTML documents
Text Editors
HTML Editors
Save as or Export to HTML document (e.g., MS Word)
WYSIWYG Editors
Like text editors, edit source codes but with the aid of tag tools (e.g., HomeSite)
Word Processors
Edit the HTML source code directly (e.g., Notepad, Pico)
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
InfoTech Seminar
13
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
Display
Display
upload
Publish
InfoTech Seminar
14
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
Web Server
/home/
/var/www/
No
Yes
/home/USERID/
Yes
/home/USERID/public_html/
InfoTech Seminar
15
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.
InfoTech Seminar
16
Web Design 101
Put navigation links on every page
Use descriptive links (i.e., anchor text)
Use thumbnail images that will enlarge when clicked
Practice user-centered design
Use relative URLs if possible
Consider the page load speed
Tell people where they are going!
Make the website portable
No more than 3 clicks to useful information
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
InfoTech Seminar
17