Your SlideShare is downloading. ×
0
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Web Development using HTML & CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Development using HTML & CSS

9,334

Published on

A simple presentation for anyone who wish to get started with the basics of Web Development using HTML & CSS.

A simple presentation for anyone who wish to get started with the basics of Web Development using HTML & CSS.

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,334
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web Development
  • 2. A web page, broken down Web Browser Content/Data Client/Server Logic Styling Rules Website
  • 3. A web page, broken down Web Browser IE/FF/Opera/Chrome HTML PHP/ASP/ JavaScript CSS Website
  • 4. What is HTML <ul><li>HTML = H yper T ext M arkup L anguage </li></ul><ul><li>A markup language designed for the creation of web pages and other information viewable in a browser. </li></ul><ul><li>The basic language used to write web pages. </li></ul><ul><li>File extension: .htm, .html </li></ul>
  • 5. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> My first web page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Hello everyone </h1> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>The basic Tags
  • 6. <ul><li>A tag is : Non-hierarchical keyword or term assigned to a piece of information </li></ul><ul><li>Document Tags :- The tags that are required for every HTML page we create. </li></ul><ul><li>Tag usually goes with pair: an open tag (<b>) and an end tag (</b>) </li></ul><ul><li>< > - Opening Tag </li></ul><ul><li></ > - Closing Tag </li></ul>HTML Tags
  • 7. <ul><li>The element content is everything between the start and the end tag ( <p>Hello</p> ) </li></ul><ul><li>Some HTML elements have empty content( <br /> ) </li></ul><ul><li>Most HTML elements can have attributes </li></ul><ul><li>Its not case sensitive - <p> means the same as <P> </li></ul>HTML Syntax
  • 8. <ul><li>Open a text editor ( e.g. Notepad ) </li></ul><ul><li>Create your HTML document </li></ul><ul><ul><li>Head - not displayed with body </li></ul></ul><ul><ul><li>Body </li></ul></ul><ul><li>Save the HTML (extension of .htm or .html) </li></ul><ul><li>Display your HTML document in WWW browser window. </li></ul><ul><li>Check your work and modify as necessary. </li></ul><ul><li>Upload it on the Web. </li></ul>Steps for creating a HTML file
  • 9. Working it out…
  • 10. HTML <body> Tag <ul><li>The body element defines the document's body and contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. </li></ul>
  • 11. HTML <body> Tag (contd..) output
  • 12. HTML <body> Tag (contd..) <ul><li>Attributes </li></ul><ul><ul><li>bgcolor - Specifies a background-color for a HTML page. </li></ul></ul><ul><ul><li><body bgcolor=&quot;#000000&quot;> </li></ul></ul><ul><ul><li><body bgcolor=&quot;rgb(0,0,0)&quot;> </li></ul></ul><ul><ul><li><body bgcolor=&quot;black&quot;> </li></ul></ul><ul><ul><li>background - Specifies a background-image for a </li></ul></ul><ul><ul><li>HTML page. </li></ul></ul><ul><li><body background=&quot;clouds.gif&quot;> </li></ul><ul><li><body background=&quot;http://www.abc.com/clouds.gif&quot;> </li></ul>
  • 13. HTML <img> Tag <ul><li>The <img> tag embeds an image in an HTML page. </li></ul><ul><li>The <img> tag has attributes: src , alt, height, width. </li></ul>output HTML code <img src=&quot;sachin.jpg&quot; alt=&quot;sachin&quot; height = &quot;200&quot; width= &quot;200“>
  • 14. HTML <p> Tag <ul><li>The <p> tag defines a paragraph. </li></ul>
  • 15. HTML <li> Tag <ul><li>The <li> tag defines a list item. </li></ul>
  • 16. HTML <a> Tag - Anchor <ul><li>The <a> tag defines an anchor. </li></ul><ul><li>Attribute for <A ...> HREF = &quot;URL&quot; </li></ul><ul><li>HREF indicates the URL being linked to. </li></ul><ul><li>A Hypertext link </li></ul><ul><ul><li>< a href=“http://www.google.com ”>Google</a> </li></ul></ul><ul><ul><li>Output: Google </li></ul></ul><ul><li>A Email link </li></ul><ul><ul><li><a href=“mailto:sandeep@gmail.com”>Email me</a> </li></ul></ul><ul><ul><li>Output: Email me </li></ul></ul>
  • 17. HTML <pre> Tag <ul><li>The <pre> tag defines preformatted text. </li></ul><ul><li>Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks . </li></ul>
  • 18. HTML <font> Tag <ul><li>The <font> tag specifies the font face, font size, and font color of text. </li></ul>
  • 19. HTML <table> Tag <ul><li>The <table> tag defines an HTML table. </li></ul><ul><li>A simple HTML table consists of the table element and one or more tr, th, and td elements. </li></ul><ul><li>Attribute Values </li></ul>Specifies the alignment of a table align Specifies the space between cells cellspacing Specifies the space between the cell wall and the cell content cellpadding Specifies the width of a table width Specifies the width of the borders around a table border Description Value
  • 20. HTML <table> example
  • 21. HTML <form> Tag <ul><li>A form is an area that can contain form elements . </li></ul><ul><li>Commonly used form elements includes: </li></ul><ul><ul><li>Text fields </li></ul></ul><ul><ul><li>Radio buttons </li></ul></ul><ul><ul><li>Checkboxes </li></ul></ul><ul><ul><li>List Boxes </li></ul></ul><ul><ul><li>Submit buttons </li></ul></ul>
  • 22. HTML <input> Tag <ul><li>Attribute Values </li></ul>Defines a one-line input field that a user can enter text into. Default width is 20 characters text Defines a submit button. A submit button sends form data to a server submit Defines a reset button. A reset button resets all form fields to their initial values reset Defines a radio button radio Defines a password field. The characters in this field are masked password Defines a checkbox checkbox Defines a clickable button button Description Value
  • 23. HTML <input> Tag <ul><li>Text Input Fields . </li></ul><ul><ul><li>Used when you want the user to type letters, number, etc. </li></ul></ul>
  • 24. HTML <input> Tag contd… <ul><li>Submit and Reset button . </li></ul>
  • 25. HTML <input> Tag contd… <ul><li>Checkboxes and Radio Button . </li></ul>
  • 26. HTML <select> Tag <ul><li>The <select> tag is used to create a select list (drop-down list) </li></ul>
  • 27. HTML <marquee> Tag Hi there! Are you guys having fun learning HTML .
  • 28. HTML Header Tags <ul><li><h1> defines the largest heading and <h6> defines the smallest heading. </li></ul>
  • 29.  
  • 30. What is CSS <ul><li>CSS = C ascading S tyle S heets </li></ul><ul><li>CSS is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document. </li></ul>
  • 31. <ul><li>Selector  Property Value   </li></ul><ul><li>p { color: red ; } </li></ul><ul><li>The property is followed by a colon (:) and the value is followed by a semicolon(;) </li></ul>A Style
  • 32. Applying CSS <ul><li>There are three ways to apply CSS to HTML. </li></ul><ul><li>Inline </li></ul><ul><ul><li>Affects only the element applied to. </li></ul></ul><ul><li>Internal or Embedded </li></ul><ul><ul><li>Affects only the elements in a single file. </li></ul></ul><ul><li>External </li></ul><ul><ul><li>Linked to an unlimited number of files. </li></ul></ul>
  • 33. Applying CSS (Inline) <p style=&quot;color: red&quot;>Hello Pailan !!</p>
  • 34. Applying CSS (Internal) <style type=&quot;text/css&quot;> body { font-family: Tahoma, Arial, sans-serif; ... } </style>
  • 35. Applying CSS (External) <link rel= &quot; stylesheet &quot; type= &quot; text/css &quot; href= &quot; web.css &quot; />
  • 36. Inline Style Sheets <ul><li>Inline styles are applied straight into the HTML tags using the style attribute. </li></ul>
  • 37. Internal Style Sheets <ul><li>Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. </li></ul>
  • 38. External Style Sheets <ul><li>Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. </li></ul>
  • 39. CSS class example
  • 40.  
  • 41. What is JavaScript ? <ul><li>A scripting language that works with HTML to enhance web pages and make them more interactive. </li></ul><ul><li>Runs in a Web browser (client-side). </li></ul><ul><li>Embedded in HTML files and can manipulate the HTML itself. </li></ul>
  • 42. Why use JavaScript ? <ul><li>To add dynamic function to your HTML. </li></ul><ul><ul><li>JavaScript does things that HTML can’t—like logic. </li></ul></ul><ul><ul><li>You can change HTML on the fly. </li></ul></ul><ul><ul><li>JavaScript can validate the data the user enters into the form, before it is sent to your Web Application. </li></ul></ul>
  • 43. Add JavaScript to HTML <ul><li>In the HTML page itself: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><script language=“javascript”> </li></ul></ul><ul><ul><li>// JavaScript code </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><li>As a file, linked from the HTML Page </li></ul><ul><li><head> </li></ul><ul><li><script language=“javascript” src=“ script.js ”> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  • 44. JavaScript examples
  • 45. JavaScript examples <ul><li>Image Zoom </li></ul><ul><li>Image Menu </li></ul><ul><li>Shutter Menu </li></ul><ul><li>Tabs </li></ul><ul><li>Contact Form Validation </li></ul>
  • 46. Questions ?
  • 47. Thank You ! SANDEEP BAJORIA Email : [email_address] O: (033) 6522 9071 M : 98309 36993 http://www.brainwarebaguiati.blogspot.com

×