![HyperText Markup Language
Akshaya Ganesan
Assistant Professor[off-campus] Gr-II](https://image.slidesharecdn.com/ls2-230122054901-bea5341e/85/LS2-1_V1_HTML-pptx-1-320.jpg)
More Related Content
Similar to LS2.1_V1_HTML.pptx
Similar to LS2.1_V1_HTML.pptx (20)
Recently uploaded
Recently uploaded (20)
LS2.1_V1_HTML.pptx
- 1. HyperText Markup Language Akshaya Ganesan Assistant Professor[off-campus] Gr-II
- 2. In this Segment • Introduction to HTML • HTML Document Structure • Basic Tags
- 3. Hypertext Markup Language • HTML is the standard markup language for creating web pages • HTML describes the structure of a web page using markups. • HTML specifications have been maintained by the World Wide Web Consortium (W3C) • HTML elements are the building blocks of HTML pages • HTML elements are represented by tags. • Web Browsers renders the HTML document and displays the content
- 4. Structure of HTML <html> <head> <title>Page Title</title> </head> <body> <h1>This is heading</h1> <p>this is paragraph</p> </body> </html>
- 5. Creating HTML documents • Text editors (e.g. Notepad, Emacs, Crimson Editor) • Source code editors (e.g. Notepad++, WebTide) • Authoring tools (e.g. Microsoft Expression Web, Adobe Dreamwaver, KompoZer) • HTML files have .html extension • Elements are defined by tags (markers) • Tag format: • Opening tag: <name> • Closing tag: </name> • E.g. <p> Hello </p> • Not all tags have content • E.g. <hr>
- 6. Creating HTML documents • The container and its content together are called an element • Elements can be nested. • Attributes are name value pairs which specify additional information about elements • E.g. <img src = “c10.jpg” /> • Comment form: <!-- … --> • Browsers ignore comments, unrecognizable tags, line breaks, multiple spaces, and tabs
- 7. <!DOCTYPE> Declaration • A line containing HTML version information. • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" > • <!DOCTYPE html> for HTML5 • Represents the document types and helps the web browsers to display web pages correctly • It must appear only once at the top of the document
- 8. Headings Element • HTML provides six heading elements (h1 through h6) for specifying the relative importance of information. • Heading element h1 (line 12) is a larger font than the other five. • Each successive heading element (h2, h3, etc.) is typically rendered in a progressively smaller font. • <h1>Level 1 Heading</h1> • <h2>Level 2 heading</h2> • <h3>Level 3 heading</h3> • <h4>Level 4 heading</h4> • <h5>Level 5 heading</h5> • <h6>Level 6 heading</h6>
- 9. Links • One of the most important HTML5 features is the hyperlink • It references to other resources (documents, images, etc.,). • When a user clicks a hyperlink, the browser tries to execute an action associated with it. • Web browsers underline text hyperlinks and color their text blue. • <a href = "http://www.facebook.com">Facebook</a> • Links are created using the a (anchor) element. • Attribute href (hypertext reference) specifies a resource’s location. • Hyperlinking to an E-Mail Address • Anchors can link to e-mail addresses using a mailto: URL. • Most browsers launch the user’s default e-mail program • <a href = "mailto:emailAddress">…</a>.
- 10. Images • img element is used include an image in the document. T • File’s location is specified with the src (source) attribute. • If image is located in the same directory as the HTML document image’s file name is required. • Image is stored relative to the location of the document. • Optional attributes width and height specify the image’s dimensions. • If these attributes are omitted, the browser uses the image’s actual width and height. • Images are measured in pixels. • If a browser cannot render an image, the browser displays the alt attribute’s value. • <img src=“BITS.jpg" alt=“BITS-pilani.com" width="104" height="142"> • Using images as hyperlinks – <a href = "links.html"> – <img src = "buttons/links.jpg" width = "65" – height = "50" alt = "Links"> – </a>
- 11. Lists • HTML provides simple and effective ways to specify lists in documents. • Types of Lists: unordered, ordered, and definition lists. • Unordered List • The <ul> tag creates an unordered list. • Each item in a list is specified with an <li> tag • Any tags can appear in a list item, including nested lists. • When displayed, each list item is implicitly preceded by a bullet. <ul> <li> Books </li> <li> Eraser </li> <li> Pencil </li> </ul>
- 12. Ordered List • Ordered lists are lists in which the order of items is important. • An ordered list is created with the tag<ol>. • Ordered list are preceded by sequential values instead of bullets. • The default sequential values are Arabic numerals, beginning with 1. <ol> <li> Rich </li> <li> high RPM </li> <li> BOTH </li> </ol>
- 13. Definition List • Definition List <dl>...</dl>, Definition Term <dt>...</dt> and Definition Detail <dd>...</dd> • Function: <dl>...</dl> tag contains a Definition List. Each of <dt>...</dt> and <dd>...</dd> pair contains a Definition Term and the Definition Detail, as follow: • <dl> • <dt>term-1</dt> • <dd>definition-for-term-1</dd> • <dt>term-2</dt> • <dd>definition-for-term-2</dd> • ...... • </dl>
- 14. Special Characters • Certain characters or symbols may be difficult to embed directly into an HTML document. • Some keyboards do not provide these symbols (such as ©) • Presence in the markup may cause syntax errors • Example: <p>if x < 10 then increment x by 1</p> • HTML provides character entity references for representing special characters • <p>if x < 10 then increment x by 1</p>
- 15. Internal Linking • Internal linking is useful for long documents that contain many sections. • internal linking—a mechanism that enables the user to jump between locations in the same document. • <h1 id = "baskets"> Baskets </h1> • <a href = "#baskets"> Baskets </a> • The link to an id must be preceded by a pound sign (#) • Since target is in the same document,
- 16. Other Basic Tags • Line breaks: <br> • Horizontal rules: <hr> • Blockquotes: <blockquote> – To set a block of text off from the normal flow and appearance of text • Boldface: <b> • Italics: <i> • Smaller: <small> • The emphasis tag, <em>, specifies that its textual content is special • The strong tag, <strong> is like the emphasis tag. • The code tag, <code>, is used to specify a monospace font, usually for program code. • Subscript and superscript characters can be specified by the <sub> and <sup> tags, respectively.
- 17. Summary • HTML Basic Tags
- 18. Thank you
Editor's Notes
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page
- a declarative header section contains meta information, scripts , stylesheets <head> tag The <title>tag is used to give the document a title normally displayed in the browser’s window title bar The body contains the content
- The opening tag and its closing tag together specify a container for the content they enclose
- If a tag has attributes, they appear between its name and the right bracket of the opening tag
- Include the demo
- (li is an acronym for list item).
- Demo of Lists