Hypertext Markup Language

  • June 2020
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Hypertext Markup Language as PDF for free.

More details

  • Words: 2,513
  • Pages: 42
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.