Your SlideShare is downloading. ×
0
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
Introduction to Web Programming
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

Introduction to Web Programming

1,858

Published on

A short introduction to web technologies and building web sites

A short introduction to web technologies and building web sites

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

No Downloads
Views
Total Views
1,858
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
119
Comments
0
Likes
2
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 Programming Intro Ynon PerekSaturday, December 15, 12
  • 2. Whoami Ynon Perek http://ynonperek.com ynon@ynonperek.comSaturday, December 15, 12
  • 3. Agenda The Web Architecture Hello HTML Hello CSS Hello JavaScriptSaturday, December 15, 12
  • 4. The Web Architecture Client Side Server Side GET data Here It IsSaturday, December 15, 12
  • 5. Server Side Server side creates the data and returns it to the client All server-side languages return the same result: HTML There are many languages...Saturday, December 15, 12
  • 6. Client Side Client side takes the data and renders it on screen Provides a UX around the data Can send data back to the server Browsers: IE, Chrome, Firefox, SafariSaturday, December 15, 12
  • 7. The Data Data is in a format called HTML (Hyper Text Markup Language) Invented by Tim Berners-LeeSaturday, December 15, 12
  • 8. The Data <html> A browser renders <body> HTML document on   <h1>Hello World</h1>   <p>All your base are belong screen to us</p> </body> HTML is a tag-based </html> languageSaturday, December 15, 12
  • 9. The Data Tag-based means you need to use the same opening and closing tag <div>How Do You Annoy A Web Developer ?</span>Saturday, December 15, 12
  • 10. Available Tags Tags (or markup) define the role of their content Headers: h1, h2, h3, h4, h5, h6 Block Sections: div Inline Sections: spanSaturday, December 15, 12
  • 11. Container (Block) Demo Inline vs. Block One Two Three (inline)Saturday, December 15, 12
  • 12. Adding Links Use <a> tag to create a link <a> is an inline element Example: <a href=”http://google.com”>Go To Google</a>Saturday, December 15, 12
  • 13. Adding Images Use <img> tag to create an image <img> is an inline-block element: It flows it text, but has height and width like a block alt attribute tells google what’s in the photo Example: <img src=”http://fc02.deviantart.net/fs21/f/2007/306/ d/6/Chibi_turtle_by_blackcattlc.jpg” alt=”Cool Turtle”>Saturday, December 15, 12
  • 14. Adding Text Use <p> tag to wrap text paragraphs <p> is a block-level element Adds a newlineSaturday, December 15, 12
  • 15. Clickable Images Wrap in <img> in an <a> tag to get an image that is also a link Demo: images, links and text paragraphsSaturday, December 15, 12
  • 16. Lists HTML has two types of lists: ordered lists marked <ol> and unordered lists marked <ul> Inside a list block, use <li> to denote items <ul>, <ol> and <li> are all block elementsSaturday, December 15, 12
  • 17. Lab Create an HTML document for your resume Use correct headers Add an imageSaturday, December 15, 12
  • 18. Pages With Style Introducing CSSSaturday, December 15, 12
  • 19. Cascading Style Sheets Apply styling rules to elements Choose an element with a selector Specify rules using propertiesSaturday, December 15, 12
  • 20. Let’s Start With The Basics Select all h1 elements Write text in red h1 { color: red; }Saturday, December 15, 12
  • 21. Let’s Start With The Basics More CSS styling properties: background-color, color font-weight, font-size, font-family, font-style, text- decoration text-align, line-height outlineSaturday, December 15, 12
  • 22. Let’s Start With The Basics Use #id to find a specific HTML element h2#main { color: red; } And in HTML: <h2 id=‘main’>Red</h2>Saturday, December 15, 12
  • 23. Let’s Start With The Basics Use .class to find a set of HTML elements h2.uppercase { text-transform: uppercase; } And in HTML: <h2 class=‘uppercase’>Red</h2>Saturday, December 15, 12
  • 24. Block Level Properties Only block (or inline-block) elements have size width and height are only applicable to block elementsSaturday, December 15, 12
  • 25. Lab Using the docs: https:// developer.mozilla.org/ en-US/docs/CSS Style this HTML: http://pastebin.com/ Wm2s8EnHSaturday, December 15, 12
  • 26. Thank You Photos From: http://www.flickr.com/photos/ pedrosimoes7/5158386021/ http://123rf.comSaturday, December 15, 12

×