Html

of 60 /60
HTML Department of Library & Information Science Osmania University-HYDERABAD Vahideh Z. Gavgani
  • date post

    10-Sep-2014
  • Category

    Technology

  • view

    20
  • download

    1

Embed Size (px)

description

This is a presentation on HTML from a series of works on the concept of library automation, a training course for Library and Information Science students

Transcript of Html

  • HTMLDepartment of Library & Information ScienceOsmania University-HYDERABADVahideh Z. Gavgani

    VAHIDEH Z G

  • Content Markup language TTML (HyperText Markup Language)HistoryVersionHTML markup Elements attributes and content Structural

    VAHIDEH Z G

  • Descriptive CatalogingThe 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)

    VAHIDEH Z G

  • Conventional languageWhat is the benefit or advantage of Punctuation in the cataloging rule?Can you easily transfer the books ID in the following format?Title,Author,Authors first name.Authors last name.Place of publication,Publisher,Pagination,Publishers serialSubjects serial

    VAHIDEH Z G

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

    VAHIDEH Z G

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

    VAHIDEH Z G

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

    VAHIDEH Z G

  • Markup language:definitions2A 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

    VAHIDEH Z G

  • Example of Markup LanguageHTML (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

    VAHIDEH Z G

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

    VAHIDEH Z G

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

    VAHIDEH Z G

  • History of HTML 1980sIn 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.

    VAHIDEH Z G

  • History of HTML 1990s1991 :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

    VAHIDEH Z G

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

    VAHIDEH Z G

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

    VAHIDEH Z G

  • 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.: and an end label e.g. . The element's attributes are contained in the start label and content is located between the labels (e.g.Content
  • t = my homepage16

    VAHIDEH Z G

  • Structural markup describes the purpose of text. For example, vahideh 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

    VAHIDEH Z G

  • PresentationalPresentational markup describes the appearance of the text, regardless of its function. For example boldface 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 bold and italic, clickthere are elements which usually have an equivalent visual rendering but are more semantic in nature, namely strong emphasis and emphasis respectively. 22-23

    VAHIDEH Z G

  • Elements;Title and heading. notepad

    VAHIDEH Z G

  • Elements;Title and heading. html18

    VAHIDEH Z G

  • Element: Presentation:Bold and Italic

    VAHIDEH Z G

  • Element: Presentation:Bold and Italichtml19

    VAHIDEH Z G

  • Elements: hypertextHypertext 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: my blog. However, the href attribute must also be set to a valid URL so for example the HTML code, myblog, will render the word MyBlog" as a hyperlink.

    VAHIDEH Z G

  • Element-hypertextin one line

    VAHIDEH Z G

  • Element-hypertext beaked to 2 lines

    VAHIDEH Z G

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

    VAHIDEH Z G

  • Attribute ,classThe 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.

    VAHIDEH Z G

  • Element: Attribute, Content Element

    Attribute

    Content

    VAHIDEH Z G

  • Attribute -content, A apples boxBOXAAttribution A White box= (attribute) = AIncluding some apples = (Content )= applescontent

    VAHIDEH Z G

  • Attribute -content, MLIS studentsMLIS students= (attribute)= aStudents who have joined to MLIS 2008 II semester = (Content )= each student from 126

    VAHIDEH Z G

  • Attributal elements: Style; Title, SpanThe 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.

    VAHIDEH Z G

  • Span, styleHTML The preceding displays as HTML (pointing the cursor at the abbreviation should display the title text in most browsers).

    VAHIDEH Z G

  • 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 "
  • Image TagIn HTML, images are defined with the tag. The tagis 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:

    VAHIDEH Z G

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

    VAHIDEH Z G

  • Attaching Image script

    VAHIDEH Z G

  • Html format n image

    VAHIDEH Z G

  • Background imageRemember 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 thereA syntax example:

    VAHIDEH Z G

  • Syntax, example

    VAHIDEH Z G

  • Display background image

    VAHIDEH Z G

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

    VAHIDEH Z G

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

    VAHIDEH Z G

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

    VAHIDEH Z G

  • Why Style sheets; features and advantages..1HTML 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 , , , 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 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.

    VAHIDEH Z G

  • Why Style sheets; features and advantages2Style Sheets Can Save a Lot of WorkStyles 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.

    VAHIDEH Z G

  • External Style SheetSeparation 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 tag. The tag goes inside the head section.for example:

  • Internal Style SheetAn internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the tag. Syntax example:

    body {background-color: red} p {margin-left: 20px}

    VAHIDEH Z G

  • Inline StylesAn 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: This is a paragraph

    VAHIDEH Z G

  • Inline style syntaxThis example demonstrates how to format an HTML document with style information added to the section.

    VAHIDEH Z G

  • Inline style, header

    VAHIDEH Z G

  • 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

    VAHIDEH Z G

  • Conclusion Markup languageHTMLTagStyle sheetsCSS

    VAHIDEH Z G

  • 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

    VAHIDEH Z G

  • Elements/Features of a htmlEach HTML element has an element name (body, h1, p, br) The start tag is the name surrounded by angle brackets: The end tag is a slash and the name surrounded by angle brackets 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

    VAHIDEH Z G

  • Tags & Descriptions Tag : Description:Defines an HTML documentDefines the document's body to Defines header 1 to header 6Defines a paragraphInserts a single line breakDefines a horizontal ruleDefines a comment

    VAHIDEH Z G

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

    VAHIDEH Z G

  • Quirks modeQuirks 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 modeOne 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.

    VAHIDEH Z G

  • Quirk mode: box mode bug

    VAHIDEH Z G

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

    VAHIDEH Z G