Html for Beginners

HTML By K.S.Pani Raj, Software Engineer.

Content
Markup language
TTML (HyperText Markup Language)
History
Version
HTML markup
Elements
attributes and content
Structural

Descriptive Cataloging
The following is a part of cataloging card, description cataloging .
Gavgani, Vahideh Z.
Ayande ye tabagebandi Vahideh Z. Gavgani .- Tabraiz : Daneshgah e Oloom Pezeshki Tabriz , 2004 .
Ix,250p .-( Daneshgah e Oloom Pezeshki Tabriz : 1567 ; library science : 9 )

Conventional language
What is the benefit or advantage of Punctuation in the cataloging rule?
Can you easily transfer the books ID in the following format?

Title,
Author,
Author’s first name.
Authors last name.
Place of publication,
Publisher,
Pagination,
Publisher’s serial
Subject’s serial

Citation style
McColl A. , Smith, H. , White, P. , & Field J . ( 1998 ). General practitioners' perceptions of the route to evidence based medicine A : questionnaire survey. Acta Canadian Scandinavia , 316 , 361 - 365.

Tag
Tag or label In the www, is alternative or locator for punctuations in cataloging rule. In other word, the indicators to make the structure of the file understandable to machine/system are often called tags.
There are various languages in the WWW that all follows tags but a little differences there are from one to the other. One of those languages is HTML which enjoys Markup language.

Markup language: definitions
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.

Markup language: definitions…2
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

Example of Markup Language
HTML (Hyper Text Markup Language),
XML(extensible markup language) ,
SGML (Standard General Markup Language) and
RDF (Resource Description Framework) are markup languages.
Widely used markup languages include SGML (Standard General Markup Language) and HTML (Hypertext Markup Language

History of 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
H T M L , an initialism of H yper T ext M arkup L anguage , is the predominant markup language for web pages.
It provides a means to describe the structure of text-based information in a document — by identifing certain text as headings , paragraphs, lists , and so on
and to supplement that text with interactive forms , embedded images , and other objects.
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.

History of HTML 1980s
In 1980, Tim Berners-Lee, an independent contractor at CERN, proposed and prototyped ENQUIRE, a hypertext system for CERN researchers to use to share documents.
In 1989, Berners-Lee and CERN data systems engineer Robert Cailliau each submitted separate proposals for an Internet-based hypertext system providing similar functionality.
The following year, they collaborated on a joint proposal, the WorldWideWeb (W3) project, which was accepted by CERN.

History of HTML 1990s
1991 :The first publicly available description of HTML was a document called HTML Tags , first mentioned on the Internet by Berners-Lee in late 1991. It describes 22 elements comprising the initial, relatively simple design of HTML. Thirteen of these elements still exist in HTML 4.
Berners-Lee considered HTML to be, at the time, an application of SGML, but it was not formally defined as such until the mid-1993 publication, by the IETF
The draft expired after six months,
1994, Similarly, Dave Raggett's competing Internet-Draft, "HTML+ ", from late 1993.
in early 1994, the IETF created an HTML Working Group,
in 1995 IETF completed "HTML 2.0". HTML 2.0 included ideas from the HTML and HTML+ drafts.
Notice: There was no "HTML 1.0"; the 2.0 designation was intended to distinguish the new edition from previous drafts

History of HTML 2001
In 2000, HTML also became an international standard ( ISO / IEC 15445:2000). The last HTML specification published by the W3C is the HTML 4.01 Recommendation, published in late 1999. Its issues and errors were last acknowledged by errata published in 2001.

Component of HTML markup
HTML markup consists of several key components, including elements (and their attributes ), character-based data types , and character references and entity references .
Elements Character-Based Data Types Character Entity Content Atribution

Elements
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>
<t=“title">my homepage</t> ).
Note: Some elements, such as <br> , do not have any content and do not need a closing label.
click

t = my homepage 16

Structural
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).
20-21

Presentational
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> ,
click
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.
22-23

Elements; Title and heading. notepad

Elements; Title and heading. html 18

Element: Presentation:Bold and Italic

Element: Presentation:Bold and Italic html 19

Elements: hypertext
Hypertext markup 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 so for example the HTML code,
<a href="http://www.vgavgani.blogspot.com/">myblog</a> , will render the word “MyBlog" as a hyperlink.

Element-hypertext in one line

Element-hypertext beaked to 2 lines

Attribute id
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 personel code for staffs working in Arts college, students’ rule nomber for students
This can be used by stylesheets 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.

Attribute , class
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). Which will includes journal articles, peer reviewd article, 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 Element Attribute Content

Attribute -content, A apples box BOX A Attribution A White box= (attribute) = “ A” Including some apples = (Content )= “ apples” content

Attribute -content, MLIS students MLIS students= (attribute)= “a” Students who have joined to MLIS 2008 II semester = (Content )= “ each student from 1…26” MLIS class Students: No 1…26 LIS students

Attributal elements: Style; Title, Span
The style is a Non-Attribute elements can be used to presentational properties for a particular element.
The title is used to attach subtextual explanation to an element. In most browsers this title attribute is displayed as what is often referred to as a tooltip.
The generic inline span element can be used to demonstrate these various non-attributes.

<span id='anId' class='aClass' style='color:red;' title='Hypertext Markup Language'>HTML</span> The preceding displays as HTML (pointing the cursor at the abbreviation should display the title text in most browsers).
Span, style

Character and entity references
Since the version 4.0, HTML defines a set of 252 character entity references and a set of 1,114,050 numeric character references, both of which allow individual characters to be written via simple markup, rather than literally. A literal character and its markup equivalent are considered equivalent and are rendered identically.
The ability to "escape" characters in this way allows for the characters "<" and "&" (when written as < and & , respectively) to be interpreted as character data, rather than markup. For example, a literal "<" normally indicates the start of a label, and "&" normally indicates the start of a character entity reference or numeric character reference ; writing it as "&" or "&" or "&" allows "&" to be included in the content of elements or the values of attributes.
The double-quote character, ", when used to quote an attribute value, must also be escaped as """ or """ or """ when it appears within in the attribute value itself.
15

Image Tag
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute.
Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image: <img src="url">

Image
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.

Attaching Image script

Html format n image

Background image
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:

Syntax, example

Display background image

A syntax for Hyperlink, color, font, image on the page

Display of Hyperlink, color, font, image on the page

What is style sheet
With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.
How to Use Styles
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

Why Style sheets; features and advantages..1
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.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
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.

Why Style sheets; features and advantages…2
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 .

External Style Sheet
Separation of style and content improvements in popular 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 >

Internal Style Sheet
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>

Inline Styles
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>

Inline style syntax This example demonstrates how to format an HTML document with style information added to the <head> section.

Inline style, header

What is CSS?
CSS stands for C ascading S tyle S heets
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

Conclusion
Markup language
HTML
Tag
Style sheets
CSS

What is an HTML File?
HTML stands for H yper T ext M arkup L anguage
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor

Elements/Features of a html
Each HTML element has an element name (body, h1, p, br)
The start tag is the name surrounded by angle brackets: <h1>
The end tag is a slash and the name surrounded by angle brackets </h1>
The element content occurs between the start tag and the end tag
Some HTML elements have no content
Some HTML elements have no end tag

Tags & Descriptions
Tag : Description:
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment

IETF
The Internet Engineering Task Force ( IETF ) develops and promotes Internet standards, cooperating closely with the W3C and ISO/IEC standard bodies and dealing in particular with standards of the TCP/IP and Internet protocol suite. It is an open standards organization, with no formal membership or membership requirements. All participants and leaders are volunteers, though their work is usually funded by their employers or sponsors; for instance, the current chairperson is funded by VeriSign and the U.S. government's National Security Agency.

Quirks mode
Quirks mode refers to a technique used by some web browsers for the sake of maintaining backwards compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode
One prominent difference between quirks and standards modes is the handling of the CSS Internet Explorer box model bug . Before version 6, Internet Explorer used an algorithm for determining the width of an element's box which conflicted with the algorithm detailed in the CSS specification, and due to Internet Explorer's popularity many pages were created which relied upon this incorrect algorithm.
As of version 6, Internet Explorer uses the CSS specification's algorithm when rendering in standards mode and uses the previous, non-standard algorithm when rendering in quirks mode.

Quirk mode: box mode bug

BIBLIOGRAPHY
Learning HTML: http://www.w3schools.com/html/html_intro.asp
(CERN) European Organization for Nuclear Research

http://119.111.65.78	71
http://www.technoexplore.info	17
http://www.slideshare.net	8
http://www.dbmakati.edu.ph	4
http://122.55.12.155	3
http://technoexplore.info	2
url_unknown	1

Html for Beginners

by raj sri on Apr 11, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 106

Statistics

Html for Beginners — Presentation Transcript