On-the-fly Validation of XML Markup Languages using off-the-shelf Tools
Markup Languages Controlling the Display Of Web Content.
-
date post
20-Dec-2015 -
Category
Documents
-
view
216 -
download
0
Transcript of Markup Languages Controlling the Display Of Web Content.
![Page 1: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/1.jpg)
Markup Languages
Controlling the Display
Of Web Content
![Page 2: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/2.jpg)
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.
![Page 3: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/3.jpg)
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
![Page 4: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/4.jpg)
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
![Page 5: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/5.jpg)
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
![Page 6: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/6.jpg)
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
![Page 7: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/7.jpg)
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
![Page 8: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/8.jpg)
Well-Formed XMLhas a root elementuses correct casecloses all elementshas elements nested properlyencloses all attributes in double quotes
![Page 9: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/9.jpg)
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
![Page 10: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/10.jpg)
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 />
![Page 11: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/11.jpg)
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
![Page 12: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/12.jpg)
AttributesAttributes have the form
Attrname="value"
The value must have double quotes around it
Attributes may be required or optional
![Page 13: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/13.jpg)
Who uses XML?Ant build files are XML filesMac OS X preference files use XML
![Page 14: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/14.jpg)
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
![Page 15: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/15.jpg)
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).
![Page 16: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/16.jpg)
Top-level elements Elementshtmlhead
Contains elements describing document
bodyCan contain only block-level elements
![Page 17: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/17.jpg)
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
![Page 18: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/18.jpg)
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
![Page 19: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/19.jpg)
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
![Page 20: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/20.jpg)
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<!-- … ->
![Page 21: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/21.jpg)
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>
![Page 22: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/22.jpg)
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
![Page 23: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/23.jpg)
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 24: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/24.jpg)
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
![Page 25: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/25.jpg)
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
![Page 26: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/26.jpg)
Sample Table
<table>
<tr><th></th><th></th>…</tr>
<tr><td></td><td></td>…</tr>
<tr><td></td><td></td>…</tr>
</table>
![Page 27: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/27.jpg)
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
![Page 28: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/28.jpg)
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
![Page 29: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/29.jpg)
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>
![Page 30: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/30.jpg)
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
![Page 31: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/31.jpg)
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
![Page 32: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/32.jpg)
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
![Page 33: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/33.jpg)
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)
![Page 34: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/34.jpg)
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
![Page 35: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/35.jpg)
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
![Page 36: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/36.jpg)
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; … "
![Page 37: Markup Languages Controlling the Display Of Web Content.](https://reader030.fdocuments.us/reader030/viewer/2022032800/56649d415503460f94a1c78f/html5/thumbnails/37.jpg)
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/