2

Internet is a hot topic today. It has opened new ways of opportunities for education and helped increase productivity, as well efficiency in areas like fashion, publicity, marketing, healthcare, banking, governance, and manufacturing all over the world. 3

4 As IT Professionals we have to deal with the whole range of Web Technologies starting from the Internet, i.e. to HTML, Advanced HTML, CSS, Java Script, VB Script, XML, COM, JSP, ASP, PHP etc. The purpose of the course is to introduce with some of these technologies and to teach that ‘How a Web Page is created?’. After the creation of Web Page we have to upload this Web Page on the Internet known as Hosting of Website.

Computer

6 Editor Program (for input)

7 Browser (for Output)

8 Hosting Program

9 Free Space through ISP or other Domain Names.

10

Static, Advanced, and Dynamic 12

13 Background Headings Horizontal Rows Alignments (left, right, center, justify) Paragraphs Text Formatting (color, size, and type) Images Hyperlinks

14 Tables Option Values Radio Buttons Check Box Input Box Text Area Buttons (Submit, Reset, Login, etc.)

15 Dynamic Animations Flash Videos

Index Here type your information or document that you want to look on the Web page.

HTML CODEOUTPUT This is first line. This is second line. This is first line. This is second line.

HTML CODEOUTPUT This is first para. This is second para. This is first para. This is second para.

HTML CODEOUTPUT This is first para. This is second para. This is central para. This para is highly justified. This is first para. This is second para. This is central para. This is highly justified para.

Hyper Text Markup Language

 Hyper Text Markup Language Hyper Text Markup Language

 Hyper Text Markup Language Hyper Text Markup Language

 This is the background color of the WEB PAGE….

 We are able to type upon this picture.

Note: “jpg” in the above code is a format type of image it can be change with the formats of picture as PNG, GIF also.. Note: For getting the path of any image you need to Right Click on that picture and click on Properties option after this you have to copy its Location…

To set an image in center of the page

To set an image in right of the page

To set an image in Left of the page By default a picture comes automatically in Left side of a page…

To set the height of the image… To set the width of the image…

To set the height and with also of the image…

 Hyper Text Markup Language BEFORE : Hyper Text Markup Language AFTER: Hyper Text Markup Language

  As: Hyper Text Markup Language. Hyper Text Markup Language Note: Here default colour of the text is BLUE as we had done before.

 This is in Arial Font This is in Arial Font.

 This is in size 10 Before: This is in normal form. After: This is in size 10.

All the attributes had used in a tag like this….

is used to draw a simple line. is used to draw a solid line.

  Where as will show a complete line-  We can use all the attributes of tag as-

 There are 6 Levels of headings by default- HTML HTML HTML HTML HTML HTML HTML

IN H 2 O ‘2’ IS IN SUBSCRIPT FORM, WE SHALL USE TAG  We shall write H 2 O like this: IN A 2 ‘2’ IS IN SUPERSCRIPT FORM, WE WILL USE TAG.  We shall write A 2 like this: H 2 O A 2

ORDERED LIST It shows an order of sequence. Order List may be in following kinds- 1, 2, 3, 4, 5, ………… A, B, C, D, E, ………. a, b, c, d, e, ……….. I, II, III, IV, V, ………. i, ii, iii, iv, v, ……….. UNORDERED LIST It does not show any order of sequence. Order List may be in following kinds- Disc ( ) Circle ( ) Square( ) There is two types of lists in HTML:

HTML CODE <<ol>Four Directions: <<li>EAST</li> <<li>WEST</li> <<NORTH</li> <<li>SOUTH</li> <</ol> OUTPUT Four Directions: 1. EAST 2. WEST 3. NORTH 4. SOUTH

<<OL TYPE=“A”> <LI>EAST</LI> <LI>WEST</LI> <LI>NORTH</LI> <LI>SOUTH</LI> </OL> A.EAST B.WEST C.NORTH D.SOUTH NOTE: You can change the List Type ‘A’ in ‘I’ for Capital Roman numbers, ‘i’ for smallcaps roman numbers and ‘a’ for smallcaps english alphabets also but by default it creats the list in regular Numerals…

INPUT CODE (HTML)  Four Directions:  EAST  WEST  NORTH  SOUTH  <<OL start=“11”>Four Directions: <<li>EAST</li> <<li>WEST</li> <<li>NORTH</li> <<li>SOUTH</li> <</OL> OUTPUT Four Directions: 11. EAST 12. WEST 13. NORTH 14. SOUTH Four Directions: 11. EAST 12. WEST 13. NORTH 14. SOUTH

Unordered List HTML CODE OUTPUT EAST WEST NORTH SOUTH EAST WEST NORTH SOUTH

Unordered List with ‘TYPE’ attribute… HTML CODE OUTPUT EAST WEST NORTH SOUTH o EAST o WEST o NORTH o SOUTH

<html> <head><title>Nested List</title> <head> <body> <ol>Tags <li>Physical Tags</li> <ul><li>Bold</li> <li>Italic</li></ul> <li>Logical Tag</li> <ul><li>Emphasis</li> <li>Strong</li></ul> </ol> </body> </html> 1. Physical Tag Bold Italic 2. Logical Tag Emphasis Strong

Input Output Noun A noun is the name of a person, things or a place. Pronoun Pronoun are the words that are used in place of nouns to avoid the repetition of nouns. <body> <dl> <dt>Noun <dd>A noun is the name of a person, things or a place. <dt>Pronoun <dd>Pronoun are the words that are used in place of nouns to avoid the repetition of nouns. </dl> Noun A noun is the name of a person, things or a place. Pronoun Pronoun are the words that are used in place of nouns to avoid the repetition of nouns. Noun A noun is the name of a person, things or a place. Pronoun Pronoun are the words that are used in place of nouns to avoid the repetition of nouns.

CODEs in HTML Name Class OUTPUT Name Class

HTML CODE Name Class Address Aditya 10 Sikandrabad OUTPUT NameClassAddress Aditya10Sikandrabad

HTML CODE Name Class Address Aditya 10 Sikandrabad OUTPUT NameClassAddress Aditya10Sikandrabad

Name Class Address Aditya 10 Sikandrabad Akash 10 Khurja Ajay 10 Ghaziabad

Output of Table NameClassAddress Aditya10Sikandrabad Akash10Khurja Ajay10Ghaziabad

Name Class Aditya 10 NameClass Aditya10

Name Class Aditya 10 NameClass Aditya10

My Table Name Class Aditya 10 NameClass Aditya10

My Table Name Class Aditya 10 NameClass Aditya10

  I carry 2 Columns  1 2  3 4  I carry 2 Columns HTML CODEOUTPUT

  I carry 2 Rows 1 2  3 4  HTML CODEOUTPUT I Carry 2 Rows 12 34