Html

HTMLDepartment of Library

&

Information Science

Osmania University-HYDERABAD

Vahideh Z. Gavgani

04/07/23 VAHIDEH Z G 2

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

04/07/23 VAHIDEH Z G 10

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.

04/07/23 VAHIDEH Z G 11

HTML

• HTML, an initialism of HyperText Markup Language, 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.

04/07/23 VAHIDEH Z G 12

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.

04/07/23 VAHIDEH Z G 13

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

04/07/23 VAHIDEH Z G 14

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.

http://en.wikipedia.org/wiki/International_Organization_for_Standardization

http://en.wikipedia.org/wiki/International_Electrotechnical_Commission

04/07/23 VAHIDEH Z G 15

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.

ElementsCharacter-Based

Data TypesCharacter Entity

Content Atribution

04/07/23 VAHIDEH Z G 16

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

04/07/23 VAHIDEH Z G 17

t = my homepage

16

04/07/23 VAHIDEH Z G 18

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-2120-21

04/07/23 VAHIDEH Z G 19

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-2322-23

04/07/23 VAHIDEH Z G 20

Elements;Title and heading. notepad

04/07/23 VAHIDEH Z G 21

Elements;Title and heading. html

18 18

04/07/23 VAHIDEH Z G 22

Element: Presentation:Bold and Italic

04/07/23 VAHIDEH Z G 23

Element: Presentation:Bold and Italichtml

19 19

04/07/23 VAHIDEH Z G 24

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.

04/07/23 VAHIDEH Z G 25

Element-hypertextin one line

04/07/23 VAHIDEH Z G 26

Element-hypertext beaked to 2 lines

04/07/23 VAHIDEH Z G 27

Attributeid

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

04/07/23 VAHIDEH Z G 28

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.

04/07/23 VAHIDEH Z G 29

Element: Attribute, Content

Element

Attribute

Content

04/07/23 VAHIDEH Z G 30

Attribute -content, A apples box

BOX

A

Attribution

A White box= (attribute) = “A”Including some apples = (Content )= “apples”

content

04/07/23 VAHIDEH Z G 31

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

04/07/23 VAHIDEH Z G 32

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.

04/07/23 VAHIDEH Z G 33

• <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

04/07/23 VAHIDEH Z G 34

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

04/07/23 VAHIDEH Z G 35

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">

04/07/23 VAHIDEH Z G 36

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.

04/07/23 VAHIDEH Z G 37

Attaching Image script

04/07/23 VAHIDEH Z G 38

Html format n image

04/07/23 VAHIDEH Z G 39

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:

04/07/23 VAHIDEH Z G 40

Syntax, example

04/07/23 VAHIDEH Z G 41

Display background image

04/07/23 VAHIDEH Z G 42

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

04/07/23 VAHIDEH Z G 43

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

04/07/23 VAHIDEH Z G 44

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

04/07/23 VAHIDEH Z G 45

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.

04/07/23 VAHIDEH Z G 46

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.

04/07/23 VAHIDEH Z G 47

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>

04/07/23 VAHIDEH Z G 48

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>

04/07/23 VAHIDEH Z G 49

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>

04/07/23 VAHIDEH Z G 50

Inline style syntax

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

04/07/23 VAHIDEH Z G 51

Inline style, header

04/07/23 VAHIDEH Z G 52

What is CSS?

• 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

04/07/23 VAHIDEH Z G 53

Conclusion

• Markup language

• HTML

• Tag

• Style sheets

• CSS

04/07/23 VAHIDEH Z G 54

What is an HTML File?

• HTML stands for Hyper Text Markup Language

• 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

04/07/23 VAHIDEH Z G 55

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

04/07/23 VAHIDEH Z G 56

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

04/07/23 VAHIDEH Z G 57

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.

04/07/23 VAHIDEH Z G 58

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.

http://en.wikipedia.org/wiki/World_Wide_Web_Consortium

http://en.wikipedia.org/wiki/Internet_Engineering_Task_Force

04/07/23 VAHIDEH Z G 59

Quirk mode: box mode bug

04/07/23 VAHIDEH Z G 60

BIBLIOGRAPHY

• Learning HTML: http://www.w3schools.com/html/html_intro.asp

• (CERN) European Organization for Nuclear Research

http://www.w3schools.com/html/html_intro.asp

Technology

Html