Hyper Text Markup Language (HTML) PDF

1 Hyper Text Markup Language (HTML) Part 1 What is HTML? HTML stands for Hyper Text Markup Language, the most widely used language on the Web to develop web pages. Tim Berners-Lee created HTML in late 1991. "HTML 2.0"...

1 Hyper Text Markup Language (HTML) Part 1 What is HTML? HTML stands for Hyper Text Markup Language, the most widely used language on the Web to develop web pages. Tim Berners-Lee created HTML in late 1991. "HTML 2.0" was the first standard HTML specification published in 1995. HTML 4.01 was a major version of HTML published in late 1999. Though the HTML 4.01 version is widely used currently, we have the HTML-5 version, which is an extension to HTML 4.01, and this version was published in 2012. Hypertext refers to how Web pages (HTML documents) are linked together. Thus, the links available on a webpage are called Hypertext. As its name suggests, HTML is a markup language , which means you use HTML to "mark up" a text document with tags that tell a web browser how to structure it for display. Originally, HTML was developed to define the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Basic HTML Document In its simplest form, following is an example of an HTML document: This is document title This is a heading Document content goes here..... HYPER TEXT MARKUP LANGUAGE (HTML) | 2 Hyper Text Markup Language (HTML) Part 1 HTML Tags As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces. Except few tags, most of the tags have their corresponding closing tags. For example, has its closing tag and tag has its closing tag tag Tag Description This tag defines the document type and HTML version. This tag encloses the complete HTML document and mainly comprises of document header which is represented by... and document body which is represented by... tags. This tag represents the document's header which can keep other HTML tags like , etc. The tag is used inside the tag to mention the document title. This tag represents the document's body which keeps other HTML tags like , , etc. This tag represents the heading. This tag represents a paragraph. HTML Document Structure A typical HTML document will have following structure: Document declaration tag Document header related tags HYPER TEXT MARKUP LANGUAGE (HTML) | 3 Hyper Text Markup Language (HTML) Part 1 Document body related tags The Declaration The declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration: There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements , , , , , and. While displaying any heading, browser adds one line before and one line after that heading. Paragraph Tag The tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening and a closing tag. Line Break Tag Whenever you use the element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use it is not valid in XHTML HYPER TEXT MARKUP LANGUAGE (HTML) | 4 Hyper Text Markup Language (HTML) Part 1 Horizontal Lines Horizontal lines are used to break up sections of a document visually. The tag creates a line from the current position in the document to the right margin and breaks the line accordingly. Preserve Formatting / Preformatted Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag. Any text between the opening tag and the closing tag will preserve the formatting of the source document. Nonbreaking Spaces In cases where you do not want the client browser to break text, you should use a nonbreaking space entity   instead of a standard space. HTML Elements A starting tag defines an HTML element. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash, as shown below with a few tags: Start Tag Content End Tag This is paragraph content. This is heading content. So here.... is an HTML element,... is another HTML element. There are some HTML elements that don't need to be closed, such as , , and elements. These are known as void elements. HTML Tag vs. Element A starting tag defines an HTML element. If the component contains other content, it ends with a closing tag. HYPER TEXT MARKUP LANGUAGE (HTML) | 5 Hyper Text Markup Language (HTML) Part 1 For example, is the starting tag of a paragraph, and is the closing tag of the same paragraph, but This paragraph is a paragraph element. HTML Attributes An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value: The name is the property you want to set. For example, the paragraph element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page. The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right. Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation. Generic Attributes Here's a table of some other attributes that are readily usable with many of the HTML tags. Attribute Options Function bgcolor numeric, hexidecimal, Places a background color behind an RGB values element background URL Places a background image behind an element id User Defined Names an element for use with Cascading Style Sheets. class User Defined Classifies an element for use with Cascading Style Sheets. HYPER TEXT MARKUP LANGUAGE (HTML) | 6 Hyper Text Markup Language (HTML) Part 1 width Numeric Value Specifies the width of tables, images, or table cells. height Numeric Value Specifies the height of tables, images, or table cells. title User Defined "Pop-up" title of the elements. HTML Formatting If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. Monospaced Font The content of a... element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths. Superscript Text The content of a... element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters. Subscript Text The content of a... element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters. Inserted Text Anything that appears within... element is displayed as inserted text. Deleted Text Anything that appears within... element, is displayed as deleted text. Larger Text HYPER TEXT MARKUP LANGUAGE (HTML) | 7 Hyper Text Markup Language (HTML) Part 1 The content of the... element is displayed one font size larger than the rest of the text surrounding Smaller Text The content of the... element is displayed one font size smaller than the rest of the text surrounding it HTML Phrase Tags The phrase tags have been designed for specific purposes, though they are displayed in a similar way as other basic tags like , , , and , you have seen in previous chapter. Emphasized Text Anything that appears within... element is displayed as emphasized text. Marked Text Anything that appears with-in... element, is displayed as marked with yellow ink. Strong Text Anything that appears within... element is displayed as important text. Text Abbreviation You can abbreviate a text by putting it inside opening and closing tags. Acronym Element The element allows you to indicate that the text between and tags is an acronym. Quoting Text When you want to quote a passage from another source, you should put it in between... tags. Text inside a element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font. Short Quotations HYPER TEXT MARKUP LANGUAGE (HTML) | 8 Hyper Text Markup Language (HTML) Part 1 The... element is used when you want to add a double quote within a sentence. HTML Comments Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability. HTML comments are placed in between tags. So any content placed with- in tags will be treated as comment and will be completely ignored by the browser. HTML Images Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. Insert Image You can insert any image in your web page by using tag. Following is the simple syntax to use this tag. The tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag. The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed. Set Image Width/Height You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size. Set Image Border By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. Set Image Alignment HYPER TEXT MARKUP LANGUAGE (HTML) | 9 Hyper Text Markup Language (HTML) Part 1 By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right. HTML Lists HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain: - An unordered list. This will list items using plain bullets. - An ordered list. This will use different schemes of numbers to list your items. - A definition list. This arranges your items in the same way as they are arranged in a dictionary. HTML Unordered Lists An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML tag. Each item in the list is marked with a bullet. The type Attribute You can use type attribute for tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options: HTML Ordered Lists This list is created by using tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with. The type Attribute You can use type attribute for tag to specify the type of numbering you like. By default, it is a number. Following are the possible options: - Default-Case Numerals. - Upper-Case Numerals. - Lower-Case Numerals. HYPER TEXT MARKUP LANGUAGE (HTML) | 10 Hyper Text Markup Language (HTML) Part 1 - Lower-Case Letters. - Upper-Case Letters. The start Attribute You can use start attribute for tag to specify the starting point of numbering you need. Following are the possible options: - Numerals starts with 4. - Numerals starts with IV. - Numerals starts with iv. - Letters starts with d. - Letters starts with D. HTML Definition Lists HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes use of following three tags. - Defines the start of the list - A term - Term definition - Defines the end of the list HTML TABLE The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the tag in which the tag is used to create table rows and tag is used to create data cells. Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 HYPER TEXT MARKUP LANGUAGE (HTML) | 11 Hyper Text Markup Language (HTML) Part 1 Table Heading Table heading can be defined using tag. This tag will be put to replace tag, which is used to represent actual data cell. Name Salary Ramesh Raman 5000 Cellpadding and Cellspacing There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell. Salary Colspan and Rowspan You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 HYPER TEXT MARKUP LANGUAGE (HTML) | 12 Hyper Text Markup Language (HTML) Part 1 Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. Table Height and Width You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area. Table Caption The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML. This is the caption row 1, column 1 row 1, columnn 2 Table Header, Body, and Footer Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table. The three elements for separating the head, body, and foot of a table are: - to create a separate table header. - to indicate the main body of the table. - to create a separate table footer. A table may contain several elements to indicate different pages or groups of data. But it is notable that and tags should appear before HYPER TEXT MARKUP LANGUAGE (HTML) | 13 Hyper Text Markup Language (HTML) Part 1 This is the head of the table This is the foot of the table Cell 1 Cell 2 HYPER TEXT MARKUP LANGUAGE (HTML) |