html for beginners
DESCRIPTION
Html for beginners. A basic information of html for beginners. A more depth coverage of html and css will be covered in the future presentations. visit my sites http://technoexplore.blogspot.com and http://hotjobstuff.blogspot.com for some other important presentations.TRANSCRIPT
04/12/23 http://technoexplore.blogspot.com 1
HTML
By K.S.Pani Raj,
Software Engineer.
04/12/23 http://technoexplore.blogspot.com 2
Content
• Markup language
• TTML (HyperText Markup Language)• History
• Version
• HTML markup » Elements
» attributes and content
» Structural
04/12/23 http://technoexplore.blogspot.com 3
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)
•
04/12/23 http://technoexplore.blogspot.com 4
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
04/12/23 http://technoexplore.blogspot.com 5
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.
•
04/12/23 http://technoexplore.blogspot.com 6
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.
04/12/23 http://technoexplore.blogspot.com 7
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.
04/12/23 http://technoexplore.blogspot.com 8
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
04/12/23 http://technoexplore.blogspot.com 9
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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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.
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 17
t = my homepage
16
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 20
Elements;Title and heading. notepad
04/12/23 http://technoexplore.blogspot.com 21
Elements;Title and heading. html
18 18
04/12/23 http://technoexplore.blogspot.com 22
Element: Presentation:Bold and Italic
04/12/23 http://technoexplore.blogspot.com 23
Element: Presentation:Bold and Italichtml
19 19
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 25
Element-hypertextin one line
04/12/23 http://technoexplore.blogspot.com 26
Element-hypertext beaked to 2 lines
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 29
Element: Attribute, Content
Element
Attribute
Content
04/12/23 http://technoexplore.blogspot.com 30
Attribute -content, A apples box
BOX
A
Attribution
A White box= (attribute) = “A”Including some apples = (Content )= “apples”
content
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 37
Attaching Image script
04/12/23 http://technoexplore.blogspot.com 38
Html format n image
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 40
Syntax, example
04/12/23 http://technoexplore.blogspot.com 41
Display background image
04/12/23 http://technoexplore.blogspot.com 42
A syntax for Hyperlink, color, font, image on the page
04/12/23 http://technoexplore.blogspot.com 43
Display of Hyperlink, color, font, image on the page
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 50
Inline style syntax
This example demonstrates how to format an HTML document with style information added to the <head> section.
04/12/23 http://technoexplore.blogspot.com 51
Inline style, header
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 53
Conclusion
• Markup language
• HTML
• Tag
• Style sheets
• CSS
04/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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/12/23 http://technoexplore.blogspot.com 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.
04/12/23 http://technoexplore.blogspot.com 59
Quirk mode: box mode bug
04/12/23 http://technoexplore.blogspot.com 60
BIBLIOGRAPHY
• Learning HTML: http://www.w3schools.com/html/html_intro.asp
• (CERN) European Organization for Nuclear Research