Transcript to Overview powerpoint

• Markup language is a way of depicting/representing the
logical structure or semantics of a document on computer.
It provides instructions to computers on how to handle or
display the contents of the file.
• A markup language provides a way to combine a text and
extra information about it.
• The extra information, including structure, layout, or
other information, is expressed using markup, which is
typically intermingled with the primary text.
 A language that has codes for indicating layout and styling
(such as boldface, italics, paragraphs, placement of
graphics, etc.) within a text file.
 Markup language is a set of codes or tags that surrounds
content and tells a person or program what that content is
(its structure) and/or what it should look like (its format).
 Markup tags have a distinct syntax that sets them apart
from the content that they surround.
 A notation for identifying the components of a document
to enable each component to be appropriately formatted,
displayed, or used.
 A set of symbols and rules for their use when doing a
markup of a document
 HTML (Hyper Text Markup Language)
 XML(extensible markup language)
 SGML (Standard General Markup Language)
 RDF (Resource Description Framework) are markup
languages.
 Widely used markup languages include SGML
(Standard General Markup Language) and HTML
(Hypertext Markup Language
 Originally markup was used in the publishing industry in the
communication of printed work between authors, editors, and
printers.
 The term markup is derived from the traditional publishing
practice of "marking up" a manuscript, that is, adding
symbolic printer's instructions in the margins of a paper
manuscript.
 For centuries, this task was done by proofreaders who marked
up text to indicate what typeface, style, and size should be
applied to each part, and then handed off the manuscript to
someone else for the tedious task of typesetting by hand.
 HTML, an initialism of HyperText Markup Language and
the predominant markup language for web pages.
 It provides a means to describe the structure of text-based
information in a document — by identifyng certain text as
headings, paragraphs, lists, and so on.
 HTML is written in the form of labels (known as tags)
surrounded by angle brackets like: < >
 HTML can also describe, to some degree, the appearance
and semantics of a document, and can include embedded
scripting language code which can affect the behavior of web
browsers and other HTML processors.
 Elements are the basic structure for HTML markup.
 Elements have two basic properties: attributes and content.
 Each attribute and each element's content has certain restrictions that
must be followed for an HTML document to be considered valid.
 An element usually has a start label e.g.: <label> and an end label
e.g. </label>.
 The element's attributes are contained in the start label and content is
located between the labels (e.g.
<label attribute="value">Content</label>
 Note: Some elements, such as <br>, do not have any content and do
not need a closing label.
 Markup describes the purpose of text.
 For example, <h2>vahideh</h2> establishes
"
vahideh " as a second-level heading, which would be
rendered in a browser in a manner similar to the "HTML
markup" title at the start of this section.
 Structural markup does not denote any specific rendering, but
most web browsers have standardized on how elements should
be formatted. Text may be further styled with Cascading Style
Sheets (CSS).
 Presentational markup describes the appearance of the text,
regardless of its function.
 For example <b>boldface</b> indicates that visual output
devices should render "boldface" in bold text, but gives no
indication what devices which are unable to do this (such as
aural devices that read the text aloud) should do.
 In the case of both <b>bold</b> and <i>italic</i>
there are elements which usually have an equivalent visual
rendering but are more semantic in nature, namely
<strong>strong emphasis</strong> and
<em>emphasis</em> respectively.
 Links parts of the document to other documents.
 HTML requires the use of an anchor element to create a
hyperlink in the flow of text: <a>my blog</a>.
 However, the href attribute must also be set to a valid
URL
 For example the HTML code
<a href="http://www.vgavgani.blogspot.co
m/">myblog</a>, will render the word “MyBlog" as a
hyperlink.
 The attributes of an element are name-value pairs, separated by
"=", and written within the start label of an element, after the
element's name.
 The value may be enclosed in single or double quotes, although
values consisting of certain characters can be left unquoted in
HTML (but not XHTML). Leaving attribute values unquoted is
considered unsafe.
 Most elements take any of several common attributes: id,
class, style and title.
 Most also take language-related attributes: lang and dir.
 The id attribute provides a document-wide unique identifier for
an element.
 For example “personnel code” indicates staff working at the Arts
college, while “student code” classifies students as such.
 This can be used by style sheets to provide presentational
properties, by browsers to focus attention on the specific element
or by scripts to alter the contents or presentation of an element.
 The class attribute provides a way of classifying similar elements
for presentation purposes. For example, an article written by X may
use the designation class=“literature" to indicate that all
elements with this class value are all subordinate to the main text of
the document (or documents). This will include journal articles, peer
reviewed articles, research articles, review articles.
 Such notation classes of elements might be gathered together and
presented as footnotes on a page, rather than appearing in the
place where they appear in the source HTML.
Element
Attribute
Content
 style is a Non-Attribute element can be used to presentational
properties for a particular element.
 The title is used to attach sub-textual explanation to an
element. In most browsers this title attribute is displayed in
the Browser frame.
 The generic inline span element can be used to demonstrate
these various non-attributes.
 The URL points to the location where the image is
stored.
 An image named "boat.gif" located in the directory
"images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.
 The browser puts the image where the image tag
occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first
paragraph, then the image, and then the second
paragraph.
• Remember that both gif and jpg files can be used as
HTML backgrounds.
• If the image is smaller than the page, the image will
repeat itself.
• You should identify the direction / location that image
has been located there
• A syntax example:
 With HTML 4.0 all formatting can be moved out of
the HTML document and into a separate style
sheet.
 When a browser reads a style sheet, it will format
the document according to it.
 There are three ways of inserting a style sheet:
1. External
2. Internal
3. Inline
 HTML tags were originally designed to define the content
of a document. They were supposed to say "This is a
header", "This is a paragraph", "This is a table", by using
tags like <h1>, <p>, <table>, and so on. The layout of
the document was supposed to be taken care of by the
browser, without using any formatting tags.
 To solve this problem, the World Wide Web Consortium
(W3C) created STYLES in addition to HTML 4.0.
 All major browsers support Cascading Style Sheets.
 Style Sheets Can Save a Lot of Work
 Styles sheets define HOW HTML elements are to be displayed, just like the
font tag and the color attribute in HTML 3.2.
 Styles are normally saved in external .CSS files.
 External style sheets enable you to change the appearance and layout of
all the pages in your Web, just by editing one single CSS document!
 As a Web developer you can define a style for each HTML element and
apply it to as many Web pages as you want. To make a global change,
simply change the style, and all elements in the Web are updated
automatically.
• Separation of style and content improvements in web design has
many benefits, but has only become practical in recent years due to
web browsers' CSS implementations.
• An external style sheet is ideal when the style is applied to many
pages.
• With an external style sheet, you can change the look of an entire
Web site by changing one file. Each page must link to the style sheet
using the <link> tag. The <link> tag goes inside the head section.
• For example:
<head>
<link rel="stylesheet" type="text/css“
href="mystyle.css">
</head>
• An internal style sheet should be used when a single
document has a unique style. You define internal
styles in the head section with the <style> tag. Syntax
example:
<head>
<style type="text/css">
body {background-color: red} p {margin-left: 20px}
</style>
</head>
 An inline style should be used when a unique style is to
be applied to a single occurrence of an element.
 To use inline styles you use the style attribute in the
relevant tag.
 The style attribute can contain any CSS property.
 The example shows how to change the color and the
left margin of a paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph </p>
This example demonstrates how to format an HTML document with style
information added to the <head> section.
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles are normally stored in Style Sheets
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save you a lot of work
 External Style Sheets are stored in CSS files
 Multiple style definitions will cascade into one