HTML Introduction
- 1. Based on w3 schools HTML, DHTML UNIT II INT355 – Internet and Web Technology
- 2. HTML HTML – Hyper Text Markup Language A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. Markup languages For the processing, definition and presentation of text. Specifies code for formatting, both the layout and style
- 3. HTML Code used to specify format are called tags. Tags – describe content HTML document contains – tags and plain text HTML documents – Web pages
- 4. HTML Example <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 5. HTML Example The Doctype defines the ‘doctype’ Webpage defined between <html></html> Visible content between <body></body> HTML tags normally come pairs: start tag, end tag <tagname> content </tagname> Content with tagname – HTML Element
- 7. <DOCTYPE> A normal doctype consists of the following parts, in exactly the following order: Any case-insensitive match for the string "<!DOCTYPE" One or more space characters Any case-insensitive match for the string "HTML" Optionally, one or more space characters A ">" character Example: <!DOCTYPE html>
- 8. <DOCTYPE> A deprecated doctype consists of the following parts, in exactly the following order: Any case-insensitive match for the string "<!DOCTYPE" One or more space characters Any case-insensitive match for the string "HTML" One or more space characters Any case-insensitive match for the string "PUBLIC" One or more space characters A quote mark (public ID), consisting of either a """ character or a "'" character A permitted public ID A matching quote mark (public ID), identical to the quote mark (public ID) used earlier (either a """ character or a "'" character) Conditionally, depending on whether it is part of a permitted-public-ID-system-ID-combination, the following parts, in exactly the following order: One or more space characters. A quote mark (system ID), consisting of either a """ character or a "'" character A permitted system ID A matching quote mark (system ID), identical to the quote mark (system ID) used earlier (either a """ character or a "'" character) Optionally, one or more space characters. A ">" character Example: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 9. <DOCTYPE>
- 10. HTML Structure
- 11. HTML Elements
- 12. Empty HTML Elements HTML elements with no content are called empty elements. Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
- 13. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
- 14. Attributes example <a href="http://www.w3schools.com">This is a link</a> Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson'
- 15. HEAD Element The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
- 16. Title Element The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML documents. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results
- 17. Example <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
- 18. Base Element The <base> tag specifies the base URL/target for all relative URLs in a page: Example <head> <base href="http://www.w3schools.com/images/" target="_blank"> </head>
- 19. Meta Element Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta> tags always go inside the <head> element.
- 20. Example Define keywords for search engines: Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS"> Define the author of a page: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <meta name="author" content="Hege Refsnes"> Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">
- 21. Script Element The <script> tag is used to define a client-side script, such as a JavaScript.
- 22. HTML Entities Some characters are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code. A character entity looks like this: &entity_name; OR &#entity_number;
Editor's Notes
- #3: An annotation is metadata (e.g. a comment, explanation, presentational markup) attached to text, image, or other data.Metadata is "data about data".