Web Designing Workshop

IEEE
Jay Kanakiya
Objective
• Student has got to be able to code a simple
website and upload it to http://neocities.org
What you can do with html,css,js
•
•
•
•
•
•

Web apps
Chrome Extensions
Chrome Apps
iOS & Android [ PhoneGap ]
FireFox OS...
Hello World
• Open a new File in Sublime Text .Copy Below
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
...
History
• The founder of HTML was Tim Berners-Lee
• Html => Hyper text Markup Language
• The HTML 2.0 specification is dat...
3 Things inside Webpage
• Html => Markup
• Css => Styling
• Javascript => Dynamism
SIMPLE SYNTAX
<tag attribute='value'>content</tag>
HTML
•
•
•
•

<b>BOLD</b>
<i>italic</i>
<u>Underlined</u>
<i><u>italic and underlined</u></i>
• Head | Tag that surrounds important content
that is invisible to the user, but is important to
the browser. Elements wit...
Most Common Tags
• <h1> <h2> <h3> <h4> <h5> => Headings
• <p>This is a paragraph. This is a paragraph.
This is a paragraph...
•
•
•
•
•

<a href=“http://facebook.com”>FB</a>
<table>
<tr><td></td></tr>
</table>
<img>
Attributes
•
•
•
•

<div class=“vit ieee”></div>
<p id=“information”></p>
<img src=“” />
<a href=“”>
Forms
• <input type=“text | email | button | password
|search | url | date ”>
• <textarea></textarea>
• <input type="radio...
Task 1
• Make this page
• file:///H:/workshopieee/examples/beginner.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<tr><td></td...
DIV element
• Stands for division.
• Most Commonly Used.
• A block level container (or 'division' of the
web page) for con...
Embeddable Content
• <video src="kitties.mp4" width="300"
height="200" loop muted autoplay
controls></video>
• <audio src=...
Task 1
• Create a simple webpage just using html
• file:///H:/workshopieee/examples/beginner.html
CSS
•
•
•
•
•

Cascading StyleSheets
3 way to style an element
<div style=“color:red”></div>
<style> div { color : red} </...
Syntax
Selector {
property1 : value1;
property2 : value2 ;
}
P{
Color : red ;
Height : 4px;
}
Selectors
•
•
•
•
•
•
•
•
•

[element]
Basic Selector
#
ID
.
Class
*
ALL
>
direct child
[space]
Any child inside
:hover
Ho...
Basic Props
• Length and percentages
•
•
•
•

px : pixels
Em : current font-size
Pt : printed media
% : percentages

• hei...
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...
Fonts
• font-family: "Times New Roman“;
• Font-size : 16px;
• Font-weight : bold ;
• Font-style : italic ;
Text-align, let...
The Box Model

file:///H:/workshop-ieee/examples/boxmodel.html
POSITIONING
•
•
•
•

Static
Fixed
Relative
Absolute

file:///H:/workshop-ieee/examples/position.html
Floats

file:///H:/workshop-ieee/examples/float.html
Clear
• Why use a Grid System ?
The Bootstrap Grid Framework
• file:///H:/workshop-ieee/examples/grid.html
Boostrap Grid System
Chrome Devtools
http://getbootstrap.com/
Task 2
• Make your Profile page and attach it to gallery
page .
• file:///H:/workshopieee/examples/profile.html
• file:///...
Upcoming SlideShare
Loading in …5
×

Web designing workshop

224 views
165 views

Published on

html and css workshop

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
224
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web designing workshop

  1. 1. Web Designing Workshop IEEE Jay Kanakiya
  2. 2. Objective • Student has got to be able to code a simple website and upload it to http://neocities.org
  3. 3. What you can do with html,css,js • • • • • • Web apps Chrome Extensions Chrome Apps iOS & Android [ PhoneGap ] FireFox OS Windows 8
  4. 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. 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. 6. 3 Things inside Webpage • Html => Markup • Css => Styling • Javascript => Dynamism
  7. 7. SIMPLE SYNTAX <tag attribute='value'>content</tag>
  8. 8. HTML • • • • <b>BOLD</b> <i>italic</i> <u>Underlined</u> <i><u>italic and underlined</u></i>
  9. 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. 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. 11. • • • • • <a href=“http://facebook.com”>FB</a> <table> <tr><td></td></tr> </table> <img>
  12. 12. Attributes • • • • <div class=“vit ieee”></div> <p id=“information”></p> <img src=“” /> <a href=“”>
  13. 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. 14. Task 1 • Make this page • file:///H:/workshopieee/examples/beginner.html
  15. 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. 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. 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. 18. Task 1 • Create a simple webpage just using html • file:///H:/workshopieee/examples/beginner.html
  19. 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. 20. Syntax Selector { property1 : value1; property2 : value2 ; } P{ Color : red ; Height : 4px; }
  21. 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. 22. Basic Props • Length and percentages • • • • px : pixels Em : current font-size Pt : printed media % : percentages • height , width , Fonts , margin , padding
  23. 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. 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. 25. The Box Model file:///H:/workshop-ieee/examples/boxmodel.html
  26. 26. POSITIONING • • • • Static Fixed Relative Absolute file:///H:/workshop-ieee/examples/position.html
  27. 27. Floats file:///H:/workshop-ieee/examples/float.html
  28. 28. Clear
  29. 29. • Why use a Grid System ? The Bootstrap Grid Framework • file:///H:/workshop-ieee/examples/grid.html
  30. 30. Boostrap Grid System
  31. 31. Chrome Devtools
  32. 32. http://getbootstrap.com/
  33. 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

×