Post on 20-Dec-2015
transcript
Markup Languages
Controlling the Display
Of Web Content
Markup LanguagesThere are two components to any
documentWhat it says (content)How it looks
A markup language uses a special syntax to imbed information about how the content should be displayed in the file that contains the content.
HypertextThe basic idea of hypertext has been
around since 1945 when Vannever Bush suggested the usefulness of being able to automatically follow references from one document to another
Think of it as providing non-linear access to information
Hypertext Markup LanguageA markup language designed for
displaying information on the webStandard maintained by the World Wide
Web Consortium (w3c.org) Current standard is 4.01 Designed using a metalanguage called
SGMLHTML is being transitioned to XHTML
XMLExtensible Markup LanguageHTML has a limited number of element
namesAll browsers need to recognize these element
names XML allows a user to define new element
names and specify how they are used
Defining XML LanguagesUse XML Scheme language or a DTD to
specify the tags that can be used and how to use them
Use cascading style sheets or XSL to define how the elements of the language are displayed
SyntaxDocument should start with an XML declaration
<?xml version="1.0" encoding="UTF-8"?>
An XML document consists of a hierarchy of nested elements.<tag>content</tag>The root element encloses all the other elements
Regular syntax makes it easy to parse
Well-Formed XMLhas a root elementuses correct casecloses all elementshas elements nested properlyencloses all attributes in double quotes
XML Elements
<tag>content</tag>tag an element name optionally
followed by a list of attributescontent can include other elementsThe ending tag needs to have the same
name as the start tagAll elements must be closed
Elements with no contentSome elements may have only attributes
associated with them for example, an image has a source file as an
attribute and no content
In this situation, you can use the special form
<name attributes />
TagsTags are enclosed by < >Tags consist of a name followed by zero
or more attributesAttributes are separated by white spaceSome tags can appear only in certain
contexts
AttributesAttributes have the form
Attrname="value"
The value must have double quotes around it
Attributes may be required or optional
Who uses XML?Ant build files are XML filesMac OS X preference files use XML
XHTMLXHTML is very similar to HTML except the
syntax is stricterBased on XML instead of SGML A DTD (Document Type Definition) is used to
define the allowed elements which are basically the same as those used in HTML
Names of tags and attributes are all lower case in XHTML
Types of Markup ElementStructural - describes purpose (e.g.
headers and titles)Presentational - describes how it looksHypertext -links to other documents or
other parts of the document
Trend is to move presentational markup into separate document (e.g. CSS).
Top-level elements Elementshtmlhead
Contains elements describing document
bodyCan contain only block-level elements
Head Elements<title> - page title generally appears
in browser title bar<style> <link> - related documents<meta> - data about document<base> - URL<script> - language for client-side
scripting
Block-level ElementsBehave like paragraphs
Headings <h1> … <h6><p> for paragraphs<pre>, <blockquote> for pre-formatted text
and quotations <div> to create blocksLists - <ul>, <ol>, <dl> Tables and Forms <table> <form><hr> for horizontal lines
Inline ElementsBehave like words, characters, phrases
<a> for anchors<br> line break<img> for imagesEmphasis and styling <em>, <kbd>, <sup>, <sub>, …In HTML, there are tags like <font>, <b>, <i> that you should now implement in a stylesheet
Odds and EndsEntities are escape sequences for characters that are
used by HTML and some non-keyboard characters < > &
Special characters can be specified by their unicode value.© ¢
Comments are enclosed by<!-- … ->
Minimal HTML Document<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>in title bar</title></head><body>Marked-up content</body></html>
LinksThe <a> tag is used for making links,
either internally or externallyAttribute href="location" where
location can be a URL or a relative path or a name in the current document
Attribute name allows you to create label to a particular part of the document for local links
ImagesYou can link to an image file and have
that file open in the browserYou use the image tag to embed an image
into another document<img src="image"> where image is
the location of the image filejpg, gif and png formats supported
Page LayoutFor vertical layout use paragraphs,
headings and rulesIf you need horizontal as well as vertical
formatting, use tablesA table cell can hold all sorts of other
elements
Tables Use the <table> tag to create a table
Use border, cellspacing, cellpadding to control looks Use <thead>…</thead> and <tbody>…</tbody> to group rows together
<tr>…</tr> for each row <td></td> for each cell in the row
<th></th> for column and row labels (bold) colspan and rowspan allow you to make irregular tables
Sample Table
<table>
<tr><th></th><th></th>…</tr>
<tr><td></td><td></td>…</tr>
<tr><td></td><td></td>…</tr>
</table>
Forms<form> is a block-level element in the body of
your HTML pageA form element can contain text input boxes,
buttons, checkboxes, pull-down menus and images
Your document can have multiple form elements
A special button called Submit is used to send the form data to the server
Form Attributes action (required) - provides the URL of the
application that needs to get the form data A cgi program or a mailto URL
method (required) - POST or GET Other tags
enctype - encoding format for the data Accept-charset target - to send results to another window id, name, title event
Form ElementsUse the <input> tag to create controls
type="input-type" needed to specify which type of control
name attribute needed to identify the element
There are special tags for <button>, <select> and <textarea>
Input typescheckbox - for on/off optionsradio - to select from several choices
name must be the same for all buttons in grouptext - one-line text entry, you can specify maximum
lengthpassword - similar to text but the typed characters
are masked<textarea> provides multi-line text input
Input types button - to trigger an immediate action, usually some
JavaScript code specified in the event attribute
reset - clears the form submit - activates the form processing sequence image - creates a clickable image which triggers
submit action coordinates of the mouse are transmitted with the rest of the
form data
<button> tag works like button but gives you more control
Input typesfile - allows user to specify name of file to
be uploadedhidden - stores information that is
transmitted but not seen by the user <select> - pull-down menus
<option> elements define choices
FramesUse frames to display multiple pages in a single
windowUse the following DOCTYPE declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >
Replace the <body> element with a <frameset> elementrows and cols attributes control subdivisionuse a <frame> element to give source and attributes for
each frame (no content)
FramesetsEach <frameset> creates a grid
cols and rows control the number of boxes
use one <frame> element for each boxuse another <frameset> to nest another
grid into a box
framesEach <frame> needs a URL in the href attribute
links within the displayed pages can use the target attribute to cause the linked page to be displayed in a different frame
Presentation StyleStyle sheets are external specifications of
desired stylelinked to the document with a <link>
element in the <head> element
<style> element in <head> element style attribute in a particular element
style="property1=value1; property2=value2; … "
SourcesWeb Design and Programming by Paul S.
Wang and Sanda S. KatilaHTML The Definitive Guide by Chuck
Musciano and Bill KennedyWikipedia
http://en.wikipedia.org/wiki/HTMLW3C
http://www.w3.org/