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

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

Document Structure

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.

Head, Body, Title and Meta Elements The head element contains the head section which is enclosed within and 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 and tags is called the title of the web page.

The meta element describes the characteristics of a web page such as character encoding. The meta tag is a standalone tag 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 The body element contains the body section enclosed in and Let’s have a look at sample page MyFirstHTML.htmlMyFirstHTML.html

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.htmlMyHeaderHTML.html

Paragraph elements are used to group sentences and sections of text together. Text that is contained within and 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 Let us look at use of paragraph elements MyParaExample.html MyParaExample.html

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:

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 and tags. Each list item begins with and ends with tag. Ordered lists An ordered list displays a numbering or lettering system to itemize the information in the list. Each list is within and tags Each item in the list is within and tags. Ex: MyLists.htmlMyLists.html

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 tag and ends with a tag. The div tag can contain other block display elements such as, and other elements. Let’s see an example: MyDiv.htmlMyDiv.html

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 and 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.htmlMyRef.html Absolute HyperlinkRelative Hyperlink Indicates the absolute location of a resource on the web. Generally used to link resources on other websites. The hyperlink location is relative to the page currently being displayed.

References 1.Fluency5 + HTML 5, Pearson ISBN: W3 Schools: