HYPERTEXT MARKUP LANGUAGE (HTML) HTML is a language that is used to describe the structure of a web page. A Web page has some common attributes like a heading, paragraph text, list bullets, images, footers and a lot more. A Web page can have a specific style of using these attributes. In a web page, the text can be marked as header, paragraph, list bullets, or footer by using tags. Tags are used to mark a block of text in an HTML page. All HTML files have an extension of .html or .htm. What is HYPER TEXT? Hyper Text is a type of test, which is not linear. It has some extra features as compared with the normal text. It has the property of linking with the one page to other page. This type of page can be associated with the sounds, videos, animation etc. A user can create his / her own web page with this type of text.

How to View HTML Source? Have you ever seen a Web page and wondered "How do they do that?" To find out, simply click on the VIEW option in your browsers toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the actual HTML of the page.

HTML ELEMENTS: There are various HTML elements that can be used to construct an HTML page. A HTML tag comprises a left angular bracket or a less than symbol (<) followed by the name of the tag and closed by a right angular bracket or a greater than symbol (>). HTML elements are categorized as: Container elements: - A container element must have a starting and an ending tag. The end tag is identical to the start tag except that it has a slash that precedes the text within angular brackets. The document text is placed between the start and the end tags. For example: <TITLE> INSTITUTE OF ENGINEERING & MANAGEMENT , is a container element. Empty elements: - An empty element has only one tag. It does not contain any text. For example: -
is an empty element, used to insert a line break in the document. DOCUMENT STRUCTURE ELEMENTS: There are three HTML elements that form the basic document structure of a web page. These are: HTML element HEAD element BODY element HTML element: - The first document structure element in every HTML document is the HTML tag. This tag indicates that the content of a file is in HTML. This tag is mandatory. The text and all other elements of HTML are placed within the HTML tags and . HTML is a container element, and hence has an opening and closing tag. HEAD element: - The title of any document tells us about the contents of the document. We can provide a title to our HTML page by using the HEAD tag. The HEAD tag specifies that the contents between the opening and the closing tags of these elements are a prologue to the rest of the document. This tag can contain a number of other tags. The TITLE tag, placed within the HEAD tag, enables us to provide a title for an HTML page.

<TITLE> INSTITUTE OF ENGINEERING & MANAGEMENT

Here we can see that the title of this web page is: “INSTITUE OF ENGINEERING & MANAGEMENT.” BODY element: - Other than the HTML and the HEAD tags, all other tags and the entire text of the HTML page is placed within the BODY tag. This tag, as the name specifies, forms the body of an HTML page.

Basic HTML Tags

Tag

to

---

Description Defines an HTML document Defines the document's body Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

EXAMPLES: 1. DEFINES AN HTML DOCUMENT: The content of the body element is displayed in your browser. Output

2. DEFINES PARAGRAPH: a.

This is a

This is a

This is a

Paragraph Output

B.

paragraph.

paragraph.

paragraph.

elements are defined by the p tag.

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

Output

3. INSERT LINE BREAK:

To break
lines
in a
paragraph,
use the br tag.

Output

4. DEFINES HEADER1 TO HEADER6:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.

Output

5. DEFINES ALLIGNMENT: - (CENTER ALLIGNMENT)

IEM

Output

5.1. DEFINES ALLIGNMENT: - (LEFT ALLIGNMENT)

IEM

Output

5.2. DEFINES ALLIGNMENT: - (RIGHT ALLIGNMENT)

IEM

Output

HORIZONTAL RULE ELEMENT

Attribute

Description

SIZE

The SIZE attribute determines the thickness of the horizontal rule. The value is given as a pixel value. For Example:

---

will display a rule or line with a thickness of 3 pixels. The default horizontal rule is always as wide as the page. With the WIDTH attribute, the user can set an exact width in pixels or a relative width as a percentage of the document width. For Example:

---

will display the horizontal rule or line with a width that is 50% of the page width. If the horizontal rule or line size is not equal to the width of the page, then the alignment of the rule or line can be set. It can be left, right or center. If a solid bar is required, the NOSHADE attribute specifies that the horizontal rule should not be shaded at all. The COLOR attribute is used to specify the color of the horizontal rule. It can be set in the following way:

---

WIDTH

ALIGN

NOSHADE

COLOR

6. DEFINES HORIZONTAL RULE OR LINE:

The hr tag defines a horizontal rule:

---

This is a paragraph

---

This is a paragraph

---

This is a paragraph

Output

6.1. DEFINES HORIZONTAL RULE OR LINE: - (SIZE, WIDTH, ALIGN, NOSHADE, COLOR) I LOVE MY INDIA

---

Output: -

7. DEFINES BACKGROUND COLOUR:

Look: Colored Background!

Output

8. SCROLLING A TEXT: (Uni directional) <MARQUEE> INSTITUTE OF ENGINEERING & MANAGEMENT Output

8.1 SCROLLING A TEXT: (In Both Directions) <MARQUEE BEHAVIOUR=ALTERNATE> INSTITUTE OF ENGINEERING & MANAGEMENT Output: -

FONT ELEMENT

Attribute

Description

SIZE

The Size attribute is represented as . The valid value ranges from 1 – 7 and default size is 3.

COLOR

The COLOR attribute changes the color of the text that will appear on the screen. The color can be set by giving the value as #rrggbb, a hexadecimal color value, or it can be set by giving the name of the color supported by the browser.

FACE

The FACE attribute sets the typeface of the text that will appear on the screen, provided that the type face is already installed in the user’s machine. If no match is found, the text is displayed in the default type, according to the browser preference settings.

10. DEFINES THE SIZE, COLOR AND FACE OF THE ELEMENT: INSTITUTE OF INGINEERING & MANAGEMENT Output: -

Text Formatting Tags

Tag

Description



Defines bold text



Defines big text



Defines italic text

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

11. Formatting text in an HTML document:

INSTITUTE OF ENGINEERING & MANAGEMENT

<strong>INSTITUTE OF ENGINEERING & MANAGEMENT

INSTITUTE OF ENGINEERING & MANAGEMENT

INSTITUTE OF ENGINEERING & MANAGEMENT

<small>INSTITUTE OF ENGINEERING & MANAGEMENT

INSTITUTE OF ENGINEERING & MANAGEMENT<sub>IEM

INSTITUTE OF ENGINEERING & MANAGEMENT<sup>IEM

Output: -

LIST ELEMENTS HTML supports several types of the list elements that should be included within the body element of the document. Some of the commonly used list items are: -

•

•

•

Directory List • Ordered List Unordered List • Menu List Definition List

Directory List Element: A directory list element is used to present a list of items containing up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide. A directory list begins with element immediately followed by the

element and the list item to be displayed. 12. Directory List

A_H

I_M

M_R

S_Z

OUTPUT: -

ORDERED LIST: -

The ordered list element is used to present a numbered list of items in the order of importance or sorted by sequence. An ordered list must begin with the

element followed by the
1. element. 13. Ordered Lists

   Numbered list:

   1. Apples
   2. Bananas
   3. Lemons
   4. Oranges

   Letters list:

   1. Apples
   2. Bananas
   3. Lemons
   4. Oranges

   Lowercase letters list:

   1. Apples
   2. Bananas
   3. Lemons
   4. Oranges

   Roman numbers list:

   1. Apples
   2. Bananas
   3. Lemons
   4. Oranges

   Lowercase Roman numbers list:

   1. Apples
   2. Bananas
   3. Lemons
   4. Oranges
   
   
   Output: -
   
   UNORDERED LIST ELEMENT: The unordered list element is used to present a list of items, separated by white space or marked by bullets. An unordered list starts with the
   element followed by the
   • element. 14. Unordered Lists

     Disc bullets list:

     • Apples
     • Bananas
     • Lemons
     • Oranges

     Circle bullets list:

     • Apples
     • Bananas
     • Lemons
     • Oranges

     Square bullets list:

     • Apples
     • Bananas
     • Lemons
     • Oranges
     
     
     Output: -
     
     15. Nested List
     
     

     A nested List:

     • Coffee
     • Tea
       • Black tea
       • Green tea
         • China
         • Africa
     • Milk
     Output
     
     MENU LIST ITEMS: The menu list element displays a list of line. The menu list style is more compact an unordered list. A menu list must begin element, immediately followed by the
   • 16. Menu List <MENU>
   • SAURAV GANGULY
   • SACHIN TENDULKAR
   • RAHUL DRAVID
   OUTPUT: -
   
   items, one per than the style of with a <MENU> element.
   
   DEFINITION LIST: A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the

   tag. Each definitionlist term starts with the

   tag. Each definition-list definition starts with the

   tag. 17. Definition List

   DBMS

   Database Management System

   SQL

   Structured Query Language

   IP

   Internet Protocol

   OUTPUT: -
   
   The Image Tag and the SRC Attribute The image element is used to incorporate graphics into an HTML document. It is an empty element. The image element has the following attributes: -
   
   Attributes
   
   Description
   
   SRC
   
   The SRC attribute of the element is used to specify the image to be inserted in the page. SRC is a mandatory attribute. For Example: -
   
   ALIGN
   
   ALT
   
   The ALIGN attribute is used to determine the vertical alignment of the text adjacent to the image. It can have left right or center values for aligning the image towards the left, right and center of the document respectively. The ALT attribute is used to specify an alternate text that can be displayed in place of the image. This is required, when the user needs to stop the display if the images while retrieving a document in order to make retrieval faster.
   
   BACKGROUND ATTRIBUTE The BACKGROUND attribute is specified along with the element. This attribute is used to point to an image file that will be tiled across the browser window, providing a background for the document. For Example:
   
   18. Background image

   Look: A background image!

   Both gif and jpg files can be used as HTML backgrounds.

   If the image is smaller than the page, the image will repeat itself.

   OUTPUT: -
   
   19.
   
   Aligning images
   
   

   An image in the text

   An image in the text

   An image in the text

   Note that bottom alignment is the default alignment

   An image in the text

   An image before the text

   An image after the text

   
   
   OUTPUT: -
   
   20. Let an image float to the left or right of a paragraph.

   A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.

   A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.

   OUTPUT: -
   
   21. Adjust images to different sizes.
   
   

   

   

   

   You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag.

   OUTPUT: -
   
   22. Hyperlink of an image

   You can also use an image as a link:

   
   
   OUTPUT: -
   
   Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the

   tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. 23. 1st program of table: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 24. Headings in a Table Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Related Documents Hypertext Markup Language June 2020 4 Hypertext Markup Language November 2019 21 Hypertext November 2019 14 Html (hyper Text Markup Language) June 2020 5 Markup November 2019 16 Standard Generalized Markup Language (sgml) November 2019 4 Copyright © 2024 PDFCOKE.