WEB DESIGNING The Concept of Creating Web Pages
WEB DESIGNING The Concept of Creating Web Pages for Website BY: ANOOP KUMAR TIWARI anoop. help 4 ever@gmail. com 1
Have a Glance on WEB DESIGNING in Our Views anoop. help 4 ever@gmail. com 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. anoop. help 4 ever@gmail. com 3
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. anoop. help 4 ever@gmail. com 4
Requirements Computer anoop. help 4 ever@gmail. com 5
Editor Program (for input) anoop. help 4 ever@gmail. com 6
Browser (for Output) anoop. help 4 ever@gmail. com 7
Hosting Program anoop. help 4 ever@gmail. com 8
Free Space through ISP or other Domain Names. anoop. help 4 ever@gmail. com 9
1. Markup Langaugesa) HTML (Hyper text Markup Language) b) DHTML (Dynamic HTML) c) Advanced HTML d) XML (e. Xtensive Markup Language) 2. CSS (Cascade Sheet Style) anoop. help 4 ever@gmail. com 10
3. Scripting Languagea) Java Script b) VB Script 4. Advanced Technologiesa) Java b). Net c) PHP d) ASP e) JSP anoop. help 4 ever@gmail. com 11
Types of Web Pages Static, Advanced, and Dynamic anoop. help 4 ever@gmail. com 12
13 �Background �Headings �Horizontal Rows �Alignments (left, right, center, justify) �Paragraphs �Text Formatting (color, size, and type) �Images �Hyperlinks anoop. help 4 ever@gmail. com
14 Tables Option Values Radio Buttons Check Box Input Box Text Area Buttons (Submit, Reset, Login , etc. ) anoop. help 4 ever@gmail. com
15 �Dynamic Animations �Flash Videos anoop. help 4 ever@gmail. com
By: Mr. Anoop Kumar Tiwari
<html> <head><title>Index</title></head> <body> Here type your information or document that you want to look on the Web page. </body> </html>
To Break a line… <BR> Tag HTML CODE OUTPUT This is first line. This is second line. This is first line. This is second line.
To create a new Paragraph… <P> Tag HTML CODE This is first para. <P> This is second para. OUTPUT This is first para. This is second para.
To align a Paragraph… <P align=“_”> Tag HTML CODE <p align=“left”>This is first para. <P align=“right”> This is second para. </p> <p align=“center”> This is central para. </p> <p align=“justify”>This para is highly justified. </p> OUTPUT This is first para. This is second para. This is central para. This is highly justified
Use of Bold (<B>) Tag. <b> Hyper Text Markup Language </b> Hyper Text Markup Language
Use of Italic (<I>) Tag. �<i> Hyper Text Markup Language </i> Hyper Text Markup Language
�<u> Hyper Text Markup Language </u> Hyper Text Markup Language
To give background colour �<Body bgcolor=“red”> This is the background color of the WEB PAGE….
To add a picture in the background of the Web Page. �<body background=“C: Documents and SettingsDocumentsMy PicturesSunset. jpg”> We are able to type upon this picture.
Use a PICTURE as a IMAGE… <img src=“path_of_image. jpg”> 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… 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. .
To set with Alignment to an image… To set an image in center of the page <img src=“path_of_image. jpg” align=“center”>
To set with Alignment to an image… To set an image in right of the page <img src=“path_of_image. jpg” align=“right”>
To set with Alignment to an image… To set an image in Left of the page <img src=“path_of_image. jpg” align=“center”> By default a picture comes automatically in Left side of a page…
To set a size to an image… To set the height of the image… <img src=“path_of_image. jpg” height=“ 20%”> To set the width of the image… <img src=“path_of_image. jpg” width=“ 50%”>
To set a size to an image… To set the height and with also of the image… <img src=“path_of_image. jpg” height=“ 80%” width=“ 50%>
To give the default colour to the text in the WEB Page. �<Body text=“blue”> BEFORE : AFTER: Hyper Text Markup Language Hyper Text. Hyper Markup Language
To change the font colour�<font color=“green”> �As: Hyper Text <font color=“green”>Markup Language. Hyper Text Markup Language Note: Here default colour of the text is BLUE as we had done before.
To change the type of any FONT: �<font face=“Arial”> This is in Arial Font</font> This is in Arial Font.
<font size=“ 10”>This is in size 10</font> Before: After: This is in normal form. This is in size 10.
Can we use all the attributes in a tag? Ans: Yes. <font color=yellow face=Arial size=10> All the attributes had used in a tag like this….
To draw a line on the Web Page<hr> is used to draw a simple line. <hr noshade> is used to draw a solid line.
To change the size & color of <hr><hr color=“red”> <hr size=“ 5”> <hr color=red size=5>
Ø <hr width=“ 200”> Ø Where as <hr> will show a complete line- Ø We can use all the attributes of <hr> tag as- <hr size=10 color=red width=200 noshade>
�There are 6 Levels of headings by default- HTML <h 1> HTML</h 1> HTML <h 2> HTML</h 2> HTML <h 3> HTML</h 3> HTML <h 4> HTML</h 4> HTML <h 5> HTML</h 5> HTML <h 6> HTML</h 6>
Use of Subscript & Superscript. IN H 2 O ‘ 2’ IS IN SUBSCRIPT FORM, WE SHALL USE <SUB> TAG � We shall write H 2 O like this: H<sub>2</sub>O IN A 2 ‘ 2’ IS IN SUPERSCRIPT FORM, WE WILL USE <SUP> TAG. � We shall write A 2 like this: A<sup>2</sup>
We can create lists in HTMl- There is two types of lists in HTML: 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, III, IV, V, ………. i, iii, iv, v, ………. . UNORDERED LIST It does not show any order of sequence. Order List may be in following kinds. Disc ( ) Circle ( ) Square( )
HTML CODE OUTPUT � <ol>Four Directions: � <li>EAST</li> � <li>WEST</li> � <NORTH</li> � <li>SOUTH</li> � </ol> Four Directions: 1. EAST 2. WEST 3. NORTH 4. SOUTH
OUTPUT � <OL TYPE=“A”> <LI>EAST</LI> <LI>WEST</LI> <LI>NORTH</LI> <LI>SOUTH</LI> </OL> A. B. C. D. EAST WEST NORTH 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) OUTPUT � <OL start=“ 11”>Four Directions: � <li>EAST</li> � <li>WEST</li> � <li>NORTH</li> � <li>SOUTH</li> � </OL> Four Directions: 11. EAST 12. WEST 13. NORTH 14. SOUTH
Unordered List HTML CODE OUTPUT �<UL> �<li>EAST</li> �<li>WEST</li> �<li>NORTH</li> �<li>SOUTH</li> �</UL> • • EAST WEST NORTH SOUTH
Unordered List with ‘TYPE’ attribute… HTML CODE <UL type=“circle”> <li>EAST</li> <li>WEST</li> <li>NORTH</li> <li>SOUTH</li> </UL> OUTPUT o o EAST WEST NORTH SOUTH Note: You can also insert ‘Square’ instead of ‘Circle’…
Another list in the list Coding � <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> Output 1. Physical Tag • Bold • Italic 2. Logical Tag • Emphasis • Strong
Input Output �<body> �Noun <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> A noun is the name of a person, things or a place. �Pronoun are the words that are used in place of nouns to avoid the repetition of nouns.
CODEs in HTML <table> <tr> <table> </tr> OUTPUT <td>Name</td> <td>Class</td> Name Class
For creating a new row in the table � For creating a new cell in the row of the table � For creating a Heading in the row of the table �
Use of Border Attribute OUTPUT HTML CODE <table border=“ 1”> <tr> <th>Name</th> <th>Class</th> <th>Address</th> </tr> <table> <td>Aditya</td> <td>10</td> <td>Sikandrabad</td> Name Class Address Aditya 10 Sikandrabad
Use of Bordercolor Attribute OUTPUT HTML CODE <table bordercolor=“red”> <tr> <th>Name</th> <th>Class</th> <th>Address</th> </tr> <table> <td>Aditya</td> <td>10</td> <td>Sikandrabad</td> Name Aditya Class 10 Address Sikandrabad
Use of “WIDTH” and HEIGHT” Attribute <table height=“ 50%” width=“ 50%” border> <td> Name</td><td>Class</td><td>Address </td> </tr> <td> Aditya</td><td>10</td><td> Sikandrabad </td> </tr> <td> Akash</td><td>10</td><td> Khurja </td> </tr> <td> Ajay</td><td>10</td>Ghaziabad </td> </tr> </table>
Output of Table Name Class Address Aditya 10 Sikandrabad Akash 10 Khurja Ajay 10 Ghaziabad
Table with Two Colored Lines <table border> <tr bgcolor=“pink”> <th>Name <th>Class</th> </tr> <tr bgcolor=“silver”> <td>Aditya <td>10</td> </tr> </table> Name Aditya Class 10
Use of ‘ALIGN’ Attribute HTML Code <table border> <tr bgcolor=“pink”> <th>Name <th>Class</th> </tr> <tr bgcolor=“silver” align=“center”> <td>Aditya <td>10</td> </tr> </table> Output Name Class Aditya 10 Note: You can also use here: ‘align=“right”>’
Use of ‘CAPTION’ Attribute in Table HTML Code <table border> <caption> My Table</caption> <tr bgcolor=“pink”> <th>Name <th>Class</th> </tr> <tr bgcolor=“silver” align=“center”> <td>Aditya <td>10</td> </tr> </table> Output My Table Name Class Aditya 10 Note: You can also use here: ‘align=“right”>’
Use of ‘CAPTION’ Attribute in Table with different color… HTML Code <table border> <caption> <font color=“red”>My Table</font></caption> <tr bgcolor=“pink”> <th>Name <th>Class</th> </tr> <tr bgcolor=“silver” align=“center”> <td>Aditya <td>10</td> </tr> </table> Output My Table Name Class Aditya 10 Note: You can also use here: ‘align=“right”>’
Use of COLSPAN in a Table… HTML CODE � <table OUTPUT border=“ 1”> � <tr> <th colspan=“ 2”> I carry 2 Columns</th></tr> � <tr><td>1</td><td>2</td> </tr> � <tr><td>3</td><td>4</td> </tr> � </table> I carry 2 Columns 1 2 3 4
Use of ROWSPAN in a Table… HTML CODE � <table OUTPUT border=“ 1”> � <tr> <th rowspan=“ 2”> I carry 2 Rows</th> <td>1</td><td>2</td></tr> � <tr><td>3</td><td>4</td> </tr> � </table> I Carry 2 Rows 1 2 3 4
- Slides: 61