1 / 61

WEB DESIGNING

WEB DESIGNING. The Concept of Creating Web Pages for Website. BY: ANOOP KUMAR TIWARI. Have a Glance on WEB DESIGNING in Our Views. COURSE INTRODUCTION.

juan
Download Presentation

WEB DESIGNING

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. WEB DESIGNING The Concept of Creating Web Pages for Website BY: ANOOP KUMAR TIWARI anoop.help4ever@gmail.com

  2. Have a Glance onWEB DESIGNINGin Our Views anoop.help4ever@gmail.com

  3. COURSE INTRODUCTION Internet is a hot topic today. It hasopened 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.help4ever@gmail.com

  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. anoop.help4ever@gmail.com

  5. Requirements • Computer anoop.help4ever@gmail.com

  6. Editor Program (for input) anoop.help4ever@gmail.com

  7. Browser (for Output) anoop.help4ever@gmail.com

  8. Hosting Program anoop.help4ever@gmail.com

  9. Free Space through ISP or other Domain Names. anoop.help4ever@gmail.com

  10. Language and styles for Web page 1.Markup Langauges- a) HTML (Hyper text Markup Language) b) DHTML (Dynamic HTML) c) Advanced HTML d) XML (eXtensive Markup Language)2.CSS (Cascade Sheet Style) anoop.help4ever@gmail.com

  11. 3.Scripting Language- a) Java Script b) VB Script 4. Advanced Technologies- a) Java b) .Net c) PHP d) ASP e) JSP anoop.help4ever@gmail.com

  12. Types of Web Pages • Static, • Advanced, and • Dynamic anoop.help4ever@gmail.com

  13. Static Page Contents Background Headings Horizontal Rows Alignments (left, right, center, justify) Paragraphs Text Formatting (color, size, and type) Images Hyperlinks anoop.help4ever@gmail.com

  14. Advanced Page Contents Tables Option Values Radio Buttons Check Box Input Box Text Area Buttons (Submit, Reset, Login , etc.) anoop.help4ever@gmail.com

  15. Dynamic Page Contents Dynamic Animations Flash Videos anoop.help4ever@gmail.com

  16. HyperText Markup Language (STATIC) By: Mr. Anoop Kumar Tiwari

  17. Structure of HTML- <html> <head><title>Index</title></head> <body> Here type your information or document that you want to look on the Web page. </body> </html>

  18. To Break a line… <BR> Tag HTML CODE OUTPUT This is first line. <br> This issecond line. This is first line. This is second line.

  19. To create a new Paragraph… <P> Tag HTML CODE OUTPUT This is first para. <P> This issecond para. This is first para. This is second para.

  20. To align a Paragraph… <P align=“_”> Tag HTML CODE OUTPUT <p align=“left”>This is first para. <P align=“right”> This issecond para.</p><p align=“center”> This is central para.</p> <p align=“justify”>This para is highly justified.</p> This is first para. This is second para. This is central para. This is highly justified para.

  21. Use of Bold (<B>) Tag. <b> Hyper Text Markup Language </b> Hyper Text Markup Language

  22. Use of Italic (<I>) Tag. • <i> Hyper Text Markup Language </i> Hyper Text Markup Language

  23. Use of Underline (<U>) Tag. • <u> Hyper Text Markup Language </u> Hyper Text Markup Language

  24. To give background colour • <Body bgcolor=“red”> This is the background color of the WEB PAGE….

  25. To add a picture in the background of the Web Page. • <body background=“C:\Documents and Settings\Documents\My Pictures\Sunset.jpg”> We are able to type upon this picture.

  26. Use a PICTURE as a IMAGE… <imgsrc=“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..

  27. To set with Alignment to an image… To set an image in center of the page <imgsrc=“path_of_image.jpg” align=“center”>

  28. To set with Alignment to an image… To set an image in right of the page <imgsrc=“path_of_image.jpg” align=“right”>

  29. To set with Alignment to an image… To set an image in Left of the page <imgsrc=“path_of_image.jpg” align=“center”> By default a picture comes automatically in Left side of a page…

  30. To set a size to an image… To set the height of the image… <imgsrc=“path_of_image.jpg” height=“20%”> To set the width of the image… <imgsrc=“path_of_image.jpg” width=“50%”>

  31. To set a size to an image… To set the height and with also of the image… <imgsrc=“path_of_image.jpg” height=“80%” width=“50%>

  32. To give the default colour to the text in the WEB Page. • <Body text=“blue”> BEFORE : Hyper Text Markup Language AFTER: Hyper Text Markup Language Hyper Text Markup Language

  33. 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.

  34. To change the type of any FONT: • <font face=“Arial”> This is in Arial Font</font> This is in Arial Font.

  35. To change the Size of the TEXT- • <font size=“10”>This is in size 10</font> Before: This is in normal form. After: This is in size 10.

  36. 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….

  37. 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.

  38. To change the size & color of <hr>- • <hr color=“red”> • <hr size=“5”> • <hr color=red size=5>

  39. To change the width of <HR>.. • <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>

  40. We can also add Headings in Web Pages- HTML HTML HTML HTML HTML HTML • There are 6 Levels of headings by default- <h1> HTML</h1> <h2> HTML</h2><h3> HTML</h3><h4> HTML</h4> <h5> HTML</h5><h6> HTML</h6>

  41. Use of Subscript & Superscript- In H2O‘2’ is in Subscript form, we shall use <Sub> Tag InA2 ‘2’ is in Superscript form, we will use <sup> tag. We shall write A2 like this: • We shall write H2O like this: A<sup>2</sup> H<sub>2</sub>O

  42. We can create lists in HTMl- There is two types of lists in HTML: Ordered List Unordered list It does not show any order of sequence. Order List may be in following kinds- Disc ( ) Circle ( ) Square( ) • 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, ………..

  43. Ordered List HTML CODE OUTPUT Four Directions: EAST WEST NORTH SOUTH • <ol>Four Directions: • <li>EAST</li> • <li>WEST</li> • <NORTH</li> • <li>SOUTH</li> • </ol>

  44. Ordered List (Type Attribute) HTML CODE OUTPUT EAST WEST NORTH SOUTH • <OL TYPE=“A”><LI>EAST</LI><LI>WEST</LI><LI>NORTH</LI><LI>SOUTH</LI></OL> NOTE: You can change the List Type ‘A’ in ‘I’ for Capital Roman numbers, ‘i’ for smallcaps roman numbers and ‘a’ for smallcapsenglish alphabets also but by default it creats the list in regular Numerals…

  45. Ordered List (Start Attribute) INPUT CODE (HTML) OUTPUT Four Directions: 11. EAST 12. WEST 13. NORTH 14. SOUTH • <OL start=“11”>Four Directions: • <li>EAST</li> • <li>WEST</li> • <li>NORTH</li> • <li>SOUTH</li> • </OL>

  46. Unordered List HTML CODE OUTPUT • <UL> • <li>EAST</li> • <li>WEST</li> • <li>NORTH</li> • <li>SOUTH</li> • </UL> • EAST • WEST • NORTH • SOUTH

  47. Unordered List with ‘TYPE’attribute… HTML CODE OUTPUT <UL type=“circle”> <li>EAST</li> <li>WEST</li> <li>NORTH</li> <li>SOUTH</li> </UL> • EAST • WEST • NORTH • SOUTH Note: You can also insert ‘Square’ instead of ‘Circle’…

  48. Another list in the list Nested List: Coding Output <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> Physical Tag • Bold • Italic Logical Tag • Emphasis• Strong

  49. Definition List: Input Output <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.

  50. Table in HTML OUTPUT Name Class CODEs in HTML <table> <tr> <td>Name</td> <td>Class</td> </tr> <table>

More Related