Introduction to Web Programming

  • 1,629 views
Uploaded on

A short introduction to web technologies and building web sites

A short introduction to web technologies and building web sites

More 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
1,629
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
109
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 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