CityStaffordshireU 2008-09 CE00371-1

3 previous | toc | next

Markup Language

Publishing
- writing,typing, printing, WWW (e-publishing)
- markup to improve readability( space, capital letter, T_ex)
- what you see is what you get (WISWIG), but you don,t know how you get that (bydkhgt)
- Markup can be used to define internal structure of text
- SGML, HTML, XHTML, and XML
- W3C world Wide Web Consortium
HyperText Markup Language
- Syntax and Meaning
- HTML 4.01 Specification
- mark-up commands (tags) describing content and structure of Web documents, Internationalization of HTML uses Unicode as default character set
- Syntax of HTML tags
 <tag-name optional-modifiers>
 e.g. <HR align=center width="33%">
 The HR ��horizontal rule�� tag, which draws a line across a page, can take several possible modifiers such as WIDTH and ALIGN. The WIDTH here is specified as 33% of the available space. It could also be given as a fixed number of pixels. The value for ALIGN could be CENTER, LEFT, or RIGHT. The default for WIDTH and ALIGN is 100% and LEFT respectively.
 Many tags require matching closing tags </tag-name>
 For example, the ��preformatted text�� tag <PRE> and the matching closing tag </PRE>. The <PRE> tag tells a Web browser to display everything between the <PRE> and the </PRE> just as it is formatted in the original HTML source code.
how to create a HTML file
- use an authoring programs e.g. MicroSoft FrontPage, Adobe Illustrator; and Netscape Composer;
- or type the tags and contents using any text editor
The standard structure, Basic HTML Attributes and Tags
```
<HTML> 
	<HEAD> 
		<TITLE>page-title</TITLE> 
	</HEAD> 
	<BODY> 
		page-contents 
	</BODY> 
</HTML> 
```
- a number of modifiers can be used in <BODY> tag. e.g., the following tag and attributes specify a page with a black background, white text, blue links, red active links, and gray visited links:
 
 <BODY bgcolor=black text=white link=blue alink=red vlink=gray>
Links: the basic hypertext construct
- a source and a destination anchor
 e.g. the following HTML excerpt contains two links, one whose destination anchor is an HTML document named "chapter2.html" and the other whose destination anchor (can be a video clip, a sound bite, a program, an HTML document, and an element within an HTML document, etc.) is a GIF image in the file "forest.gif":
```
<BODY>
...some text... 
You'll find a lot more in <A href="chapter2.html">chapter two</A>. 
See also this <A href="../images/forest.gif">map of the forest.</A> 
</BODY> 
```
- the href attribute in each source anchor specifies the address of the destination anchor with a URI
- When the name or id attributes of the A element are set, the element defines an anchor that may be the destination of other links. e.g.
```
	<A name="dep">Deprecated Features</A> 
	<A HREF="#dep">Deprecated Features 

	defines an internal link to other part of this file
```
Appearance
- use and for bold, for italic, for underlined, <TT> for typewriter style text. Most browsers support for subscripted text and for superscripted text. e.g., "x2 will give: x².
- The tag. e.g. For big blue text, type:
 big blue text
List
- Unordered <UL> <LI> ... </UL>
- Ordered <OL> <LI> ... </OL>
- Definations use the DL, DT, and DD elements
Special Attributes and Tags
- "Content-Type" header field of the HTTP protocol
- The <meta> tag. For example, to specify that the character encoding of the current document is ��Big5��, a document should include the following declaration as early as possible in the <head> element
 <META http-equiv="Content-Type" content="text/html; charset=Big5">
- A list of Registered charset values can be downloaded from
 ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets
Character references
- Numeric character references: code position in decimal "&#D;" or hexadecimal "&#xH�� e.g. Â§
- Character entity references uses symbolic names instead of code position e.g.
 "<" represents the < sign
 ">" represents the > sign
 "&" represents the & sign
 "" " represents the " mark
Sample.HTML file
Deprecated Features
- World Wide Web Consortium will eventually phase out many of HTML's presentation elements and attributes e.g. <BODY bgcolor=black text=white link=blue alink=red vlink=gray>
- using inline style sheets, the same effect could be accomplished
```
	<STYLE type="text/css">
	BODY { background: black; color: white} 
	A:link { color: blue }
	A:visited { color: gray }
	A:active { color: red }
	</STYLE> 
```
- NewSample.HTML file
- or external (linked) style sheets for better maintainability
 <LINK rel="stylesheet" type="text/css" href=��samplestyle.css">
- ExtSample.HTML file
HTML Primer

3 previous | toc | next