html - knuwidit.knu.ac.kr/~kiyang/teaching/it/s18/lectures/6.it-html1.pdfml: physical vs. semantic...
TRANSCRIPT
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
<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
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>
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
Internet Tecnology 7
HTML: A Basic Web Page
Internet Tecnology 8
<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”>
Internet Tecnology 9
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
Internet Tecnology 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>
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/>
Internet Tecnology 12
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
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
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