Your SlideShare is downloading. ×
  • Like
Web designing workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web designing workshop

  • 62 views
Published

html and css workshop

html and css workshop

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
62
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
1

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 Designing Workshop IEEE Jay Kanakiya
  • 2. Objective • Student has got to be able to code a simple website and upload it to http://neocities.org
  • 3. What you can do with html,css,js • • • • • • Web apps Chrome Extensions Chrome Apps iOS & Android [ PhoneGap ] FireFox OS Windows 8
  • 4. Hello World • Open a new File in Sublime Text .Copy Below <html> <head> </head> <body> <p>Hello World</p> </body> </html> • Save it as index.html • Open that file in Chrome Browser
  • 5. History • The founder of HTML was Tim Berners-Lee • Html => Hyper text Markup Language • The HTML 2.0 specification is dated November, 1995 • Vision of the HTML developers is that all devices must be able to reach the data on the Internet: computers with different platforms, browsers and characteristics, pocket devices, cell phones, devices for speech, and many others.
  • 6. 3 Things inside Webpage • Html => Markup • Css => Styling • Javascript => Dynamism
  • 7. SIMPLE SYNTAX <tag attribute='value'>content</tag>
  • 8. HTML • • • • <b>BOLD</b> <i>italic</i> <u>Underlined</u> <i><u>italic and underlined</u></i>
  • 9. • Head | Tag that surrounds important content that is invisible to the user, but is important to the browser. Elements within this tag contain metadata about the page and links to stylesheets, scripts, etc. • The body is the container for all of a page's content. Comes after the <head> tag, within the overall <html> tag.
  • 10. Most Common Tags • <h1> <h2> <h3> <h4> <h5> => Headings • <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> • <ol><ul> Lists • <li> List elements
  • 11. • • • • • <a href=“http://facebook.com”>FB</a> <table> <tr><td></td></tr> </table> <img>
  • 12. Attributes • • • • <div class=“vit ieee”></div> <p id=“information”></p> <img src=“” /> <a href=“”>
  • 13. Forms • <input type=“text | email | button | password |search | url | date ”> • <textarea></textarea> • <input type="radio" name="cricket" value="dhoni"> Dhoni • <input type=“checkbox” name=“none”> • <input type=“submit” name=”submit”>
  • 14. Task 1 • Make this page • file:///H:/workshopieee/examples/beginner.html
  • 15. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table> <tr><td></td> <td></td></tr> <tr><th></th> <th></th></tr> </table> <h1></h1> <h2></h2> <p></p> <ol> <li><i></i></li> <li><i></i></li> <li></li> </ol> </body> </html>
  • 16. DIV element • Stands for division. • Most Commonly Used. • A block level container (or 'division' of the web page) for content with no semantic meaning.
  • 17. Embeddable Content • <video src="kitties.mp4" width="300" height="200" loop muted autoplay controls></video> • <audio src="meow_mix.mp3" controls></audio> • <canvas id="wittykitty" width="800" height="450“></canvas> • file:///H:/workshop-ieee/tearable-cloth.html
  • 18. Task 1 • Create a simple webpage just using html • file:///H:/workshopieee/examples/beginner.html
  • 19. CSS • • • • • Cascading StyleSheets 3 way to style an element <div style=“color:red”></div> <style> div { color : red} </style> <link rel=“stylesheet” href=“style.css”></link>
  • 20. Syntax Selector { property1 : value1; property2 : value2 ; } P{ Color : red ; Height : 4px; }
  • 21. Selectors • • • • • • • • • [element] Basic Selector # ID . Class * ALL > direct child [space] Any child inside :hover Hovers #parent > .child Nesting file:///H:/workshopieee/examples/selectors.html
  • 22. Basic Props • Length and percentages • • • • px : pixels Em : current font-size Pt : printed media % : percentages • height , width , Fonts , margin , padding
  • 23. Colors • CSS brings 16,777,216 colors to your disposal. They can take the form of a name, an RGB (red/green/blue) value or a hex code. • P{ • Color : #ccc ; • Color : rgb(0,0,0) ; • Color : red ; • }
  • 24. Fonts • font-family: "Times New Roman“; • Font-size : 16px; • Font-weight : bold ; • Font-style : italic ; Text-align, letter-spacing , line-height,wordspacing , text-indent , • total : 90+ css properties
  • 25. The Box Model file:///H:/workshop-ieee/examples/boxmodel.html
  • 26. POSITIONING • • • • Static Fixed Relative Absolute file:///H:/workshop-ieee/examples/position.html
  • 27. Floats file:///H:/workshop-ieee/examples/float.html
  • 28. Clear
  • 29. • Why use a Grid System ? The Bootstrap Grid Framework • file:///H:/workshop-ieee/examples/grid.html
  • 30. Boostrap Grid System
  • 31. Chrome Devtools
  • 32. http://getbootstrap.com/
  • 33. Task 2 • Make your Profile page and attach it to gallery page . • file:///H:/workshopieee/examples/profile.html • file:///H:/workshopieee/examples/gallery.html