html

Hyper Text Markup

Language

02/05/2023HYPER TEXT MARKUP LANGUAGE 2

ABOUT HTML

• HTML or HyperText Markup Language is the standard markup language used to create Web Pages.

• HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>.

• The first tag in a pair is the start tag, and the second tag is the end tag.


HISTORY OF HTML

• In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990. The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguide, an in-house Standard Generalized Markup Language (SGML)-based documentation format at CERN. Eleven of these elements still exist in HTML 4.


HOW TO CREATE AN HTML DOCUMENT?• Open Notepad by clicking START > ALL PROGRAMS > ACCESSORIES > NOTEPAD.

• The Notepad window will appear. Type the HTML coding in.

• Click on FILE > SAVE menu option. The SAVE AS dialog box will appear. Save the file with all necessary details. Write the name of our file by putting extension ‘.html’ or ‘.htm’.

• Click on SAVE Button.


HTML TAGS• HTML is written in the form of HTML elements consisting of tags enclosed

in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags). Initially these are mainly of two types:

1. Container Elements

2. Empty Elements


TYPES OF TAGS1. Heading Tag - Used to define different heading levels from <h1> to <h6>.

2. Paragraph Tag - Used to display text in form of paragraph.

3. Center Tag - Used to center the text.

4. BR (Break) Tag - Used to break line and displays text from next line.


CHANGING APPEARANCE OF TEXT• Font style Tags - Used to change appearance of text.

1. Bold - Used to emphasize the text.

2. Italic - Marks the text in italic style.

3. Underline - Underlines the text.


CHANGING FONT, SIZE, TEXT COLOUR ,BACKGROUND AND MARGINS1. Font - To change typeface or name of the font.

2. Font Size - Used to change size of the font.

3. Font Color - Changes the colour of the text.

4. Background Color - Changes background colour.

5. Top margins - Used to set top margin of the web page.

6. Left margins - Used to set left margin of the web page.


ORDERED AND UNORDERED LIST• ORDERED LIST <OL> - Used to display items in a specific order.

• UNORDERED LIST <UL> - Used when items not to displayed in any order.

• LIST ITEM <LI> - Can display the listed items in an Ordered or Unordered list.


CREATING A TABLE• Tables arrange data in rows and columns and provide an

attractive way to represent information. Here is an example of table:

• <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>


ATTRIBUTES OF TABLE TAGS• Border Tag - Draws a table around the table.

• Bordercolor Tag - Used to set colour of the table.

• Bgcolor - Used to specify the background colour of the table.

• Align - Used to specify the alignment of the table.

• Cell padding - Sets the margin within a cell.

• Cell spacing - Used to set minimum distance between two adjacent cells.

• Height and Width - By default the size of the table is as large as the data that is entered.


ATTRIBUTES OF THE <TR><TD>AND <TH> TAGS• BORDER COLOR AND BG COLOR

We can set the border colour and back ground colour for the cells by using the border colour and BG colour attributes of <TR> or <TD> tags. We can give different colours to every cell in the same row by specifying different colours or a hexadecimal values, using <TD> or <TH> tags.


LINKING THE WEB PAGESHTML Links - Hyperlinks

• HTML links are hyperlinks.

• A hyperlink is an element, a text, or an image that you can click on, and jump to another document.

HTML Links - Syntax

• In HTML, links are defined with the <a> tag:

Link Syntax:

• <a href="url">link text</a>

Example:

• <a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>


INSERTING IMAGES• In HTML, images are defined with the <img> tag.

• The <img> tag is empty, it contains attributes only, and does not have a closing tag.

• The src attribute defines the url (web address) of the image:

<img src="url" alt="some_text">

Example

How to insert an image:

• <img src="smiley.gif" alt="Smiley face" height="42" width="42">


THANK YOU……

Himanshu Verma

html

Software