1 / 15

Basics of HTML

Basics of HTML. Shashanka Rao. Learning Objectives. 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters. 4. Lists 5. Div tag 6. Anchor Elements. HTML Overview.

todd
Download Presentation

Basics of HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basics of HTML Shashanka Rao

  2. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters. 4. Lists 5. Div tag 6. Anchor Elements

  3. HTML Overview • Markup language consists of a set of directions that tell the browser how to display and manage a web document. • HTML is a set of markup symbols or codes placed in a file that is intended for display on a web page. • HTML permits platform-independent display of information across a network

  4. Each individual markup code is referred to as an element or tag. • Tags are enclosed in angle brackets, < and > symbols • Most tags come in opening and closing pair. For Ex: <title> </title> • There are a few self contained tags that do not have matching end tags. For Ex: <br> • Most tags can be modified with attributes that further describe their purpose.

  5. Document Structure

  6. Document Type Definition • Multiple types oh HTML and XHTML exists, W3C recommends identifying the type of markup language used in the web page document with a Document Type Definition(DTD) • The DTD identifies the version of HTML in your document. • The DTD statement, known as “doctype” statement is placed at top of web page document.

  7. Head, Body, Title and Meta Elements • The head element contains the head section which is enclosed within <head> and </head> tags • The head section consists of a minimum of two other sections- title and meta • The first element in the head section is the title element which configures the text that will appear on the title bar of the browser. • The text between <title> and </title> tags is called the title of the web page.

  8. The meta element describes the characteristics of a web page such as character encoding. The meta tag is a standalone tag <meta> • Character encoding is an internal representation of letters, numbers and symbols in a file such as web page or a file that is stored on a computer that may be transmitted over the internet. The commonly used character encoding is utf-8 which is form of unicode. • Ex: HTML meta tag <meta charset=“utf-8”> • The body element contains the body section enclosed in <body> and </body> • Let’s have a look at sample page MyFirstHTML.html

  9. Heading, Paragraph Elements and Special Characters • Heading elements are organized in 6 levels: h1 through h6 • The text contained within the header element is displayed as “block” of text by the browser with empty white space above and below. • The text size of h1 is largest and it is smallest for h6 • Let us look at an example MyHeaderHTML.html

  10. Paragraph elements are used to group sentences and sections of text together. • Text that is contained within <p> and </p> displays as a block with empty white space above and below it. • The web page by default is left aligned. The attribute “align” can be used to modify the alignment. • The line break element causes the browser to move to next line before displaying the element. It s a stand alone element denoted by <br> • Let us look at use of paragraph elements MyParaExample.html

  11. In order to use special characters such as quotation marks, greater than or less than symbols in your web page document, you need to use special characters or entity characters. • Common special characters are:

  12. Lists- Unordered and ordered lists Unordered Lists • An unordered lists displays a bullet, or list marker before each entry in the list. • Each unordered list is within <ul> and </ul> tags. • Each list item begins with <li> and ends with </li> tag. Ordered lists • An ordered list displays a numbering or lettering system to itemize the information in the list. • Each list is within <ol> and </ol> tags • Each item in the list is within <li> and </li> tags. Ex: MyLists.html

  13. Div tag • A div element configures a structural block area or “division” on a web page, with empty white space above and below. • The div elements begins with a <div> tag and ends with a </div> tag. • The div tag can contain other block display elements such as <p>,<ul> and other <div> elements. • Let’s see an example: MyDiv.html

  14. Anchor Elements • Anchor elements are used to specify a hyperlink , referred to as link to another web page or file which needs to be displayed. • The text between <a> and </a> tags can be clicked to perform hyperlink. • The “href” attribute is used to configure hyperlink reference which identifies name and location of the file. Ex: MyRef.html

  15. References • Fluency5 + HTML 5 , Pearson ISBN:1-256-78416-8 • W3 Schools: http://www.w3schools.com/html/default.asp

More Related