Basic Web Development - 11/12/11

701 views

Published on

The slides from the Basic Web Development class taught on November 12, 2011.

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

  • Be the first to like this

No Downloads
Views
Total views
701
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basic Web Development - 11/12/11

  1. 1. Basic WebDevelopment Presented By Matt Torbin & Tom Howell v
  2. 2. Why the heck are we?• We are Matt Torbin and Tom Howell• Professional web developer / programmer with a combined 18 years of experience• We have worked for Philly.com, Anthropologie.com, George’s Music, K’nex, Poptent.net.• We truly enjoy helping others learn and discover technology (hence why we’re here) The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  3. 3. What is the scheduleule for today?➡ 10:00 - 10:30 --- Greeting➡ 10:30 - 11:00 --- Introduction➡ 11:00 - 11:30 --- FTP/Hosting/etc➡ 11:30 - 12:15 --- HTML➡ 12:15 - 12:45 --- Lunch➡ 12:45 - 1:15 --- LAB TIME➡ 1:15 - 2:00 --- CSS➡ 2:00 - 2:45 --- LAB TIME➡ 2:45 - 3:30 --- Javascript Intro➡ 3:30 - 4:00 --- Whats Next The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  4. 4. Why are YOU here today?• Your employer has tasked you with updating the company blog, Facebook page or web site.• You have a product you want to sell or a message you want to communicate.• You dont want to be left behind!• You have dreams of conquering the world through your unstoppable and highly addictive web site that you’re going to build right after this class is done. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  5. 5. What topics will be covered today?• Introduction to FTP, web hosting and MORE!• Basic HTML4/5, written by hand!• Basic CSS2/3, written by hand!• Introduction to Javascript, written by hand!• This is a HANDS ON COURSE so it’s best that you partner up if you need to. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  6. 6. What will we be building today?The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  7. 7. Why the emphasis on hand-written code?• WYSIWYG code editors make general assumptions about what you intended to write which is not always accurate or best.• To truly understand what you are building, you need to learn the fundamental components.• Once you know how to code by hand, there are no limits to what you can build! The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  8. 8. What software do you need?• A simple text editor or code editor such as Notepad, Textpad or Wrangler to write your code. Some can be found for FREE.• A web browser such as Firefox, Chrome or Safari to test your code (Note: I didnt mention Internet Explorer on purpose). Most are FREE.• (optional) An image editor such as Gimp, Acorn or Photoshop to edit images which will be used on the web site. A few can be found for FREE. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  9. 9. What can you expect from today?• A solid introduction to the basic technologies that are critical to every web site ever built, EVER.• A sense of freedom knowing you are no longer limited by the constraints of WYSIWYG editors like Dreamweaver and Frontpage.• An enjoyable experience that will keep you entertained and learning for the next few hours. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  10. 10. What you should NOT expect from today• This is just an introduction. There is SO much more to learn than just what you see today.• Solid web development comes from both technical knowledge as well as years of experience. We can’t teach you the latter.• No, I will not perform a Vulcan mind meld. There is no easy way to learn this stuff but it can be fun if you let it.• WE DO NOT KNOW EVERYTHING. The key to web development is not knowing everything, but knowing where to find everything.• I won’t help you conquer the world (but Tom might if you ask nicely). The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  11. 11. Web Hostin g, FTP an d YOU! and Takin g Your Ideas ld e m to the Wor Publishing thThe Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  12. 12. What is FTP and how do you use it?• Stands for File Transfer Protocol• Process by which files are transferred to a web host.• In order for people to view your web site, their web browser must be able to download the necessary web site files from a publicly available location. FTP is the process by which you get those files to that location. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  13. 13. FileZilla Explained (Part 1)The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  14. 14. FileZilla Explained (Part 2)The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  15. 15. HTML The Ins, Outs, Ups and Downs of the World’s Most Popular Markup LanguageThe Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  16. 16. What is this HTML thing anyways?• Pronounced H-T-M-L• Stands for HyperText Markup Language• Current stable version is 4; upcoming version is 5 (due 2012?)• Most widely used web markup language for web page creation.• If you learn nothing else today, LEARN SOME HTML! The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  17. 17. How is HTML Written?• HTML is a "tag-based" language.• Some tags require an open and close tag (such as <html></html>) while others only require a single tag (such as <img/>).• HTML tags are used to "mark up" content. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  18. 18. A Typical HTML Page<!DOCTYPE html><html> <head> <title>My First Web Page</title> </head> <body> This is my first web page! </body></html> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  19. 19. THANK YOU W3SCHOOLS.COM!!• A lot of the code samples and verbiage comes from W3Schools.com• BEST SITE EVER for learning HTML and CSS.• PLEASE, PLEASE, PLEASE do not be afraid to look up questions that you may have. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  20. 20. Types of HTML Tags• Structural Tags: <html></html>, <head></head>, <body></body>• Formatting Tags: <style></style>, <i></i>, <h1></h1>• Organizational Tags: <table></table>, <div></div>, <ol></ol>• Element Tags: <img/>, <hr/>, <iframe></iframe>, <embed></embed> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  21. 21. <!DOCTYPE> TagDEFINITION/USAGE:The <!DOCTYPE> declaration must be the very first thing in yourHTML5 document. This declaration is an instruction to the web browserabout what version of HTML the page is written in.EXAMPLE<!DOCTYPE html><html> <head> <title>My First Web Page</title> </head> <body> This is my first web page! </body></html> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  22. 22. <HTML> TagDEFINITION/USAGE:The <html> tag tells the browser that this is an HTML document. Thehtml element is the outermost element in HTML documents. The htmlelement is also known as the root element.EXAMPLE<!DOCTYPE html><html> <head> <title>My First Web Page</title> </head> <body> This is my first web page! </body></html> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  23. 23. <HEAD> TagDEFINITION/USAGE:The head element is a container for all the head elements. Elements inside<head> can include scripts, instruct the browser where to find stylesheets, provide meta information, and more.EXAMPLE<!DOCTYPE html><html> <head> <title>My First Web Page</title> </head> <body> This is my first web page! </body></html> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  24. 24. <TITLE> TagDEFINITION/USAGE:The <title> tag defines the title of the document. The title element isrequired in all HTML documents.EXAMPLE<!DOCTYPE html><html> <head> <title>My First Web Page</title> </head> <body> This is my first web page! </body></html> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  25. 25. <BODY> TagDEFINITION/USAGE:The <body> tag defines the documents body. The <body> elementcontains all the contents of an HTML document, such as text, hyperlinks,images, tables, lists, etc.EXAMPLE<!DOCTYPE html><html> <head> <title>My First Web Page</title> </head> <body> This is my first web page! </body></html> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  26. 26. <P> TagDEFINITION/USAGE:The <p> tag defines a paragraph.EXAMPLE<p> This is content intended for a paragraph. This content has a some padding added to it.</p> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  27. 27. <TABLE> TagDEFINITION/USAGE:An HTML table consists of the <table> element and one or more <tr>,<th>, and <td> elements.EXAMPLE<table> <tr> <td>cell one</td> <td>cell two</td> <td>cell three</td> <tr></table> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  28. 28. <TR> TagDEFINITION/USAGE:The <tr> tag defines a row in an HTML table.EXAMPLE<table> <tr> <td>cell one</td> <td>cell two</td> <td>cell three</td> <tr></table> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  29. 29. <TD> TagDEFINITION/USAGE:The <td> tag defines a standard cell in an HTML table.EXAMPLE<table> <tr> <td>cell one</td> <td>cell two</td> <td>cell three</td> <tr></table> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  30. 30. <THEAD> TagDEFINITION/USAGE:The <thead> tag is used to group header content in an HTML table.EXAMPLE<table> <thead> <tr> <td>column header 1</td> <td>column header 2</td> <td>column header 3</td> </tr> </thead>.. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  31. 31. <TBODY> TagDEFINITION/USAGE:The <tbody> tag is used to group the body content in an HTML table.EXAMPLE<table> <tbody> <tr> <td>data column 1</td> <td>data column 2</td> <td>data column 3</td> </tr> </tbody>.. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  32. 32. <TFOOT> TagDEFINITION/USAGE:The <tfoot> tag is used to group footer content in an HTML table.Note: <tfoot> must appear before <tbody> within a table, so that abrowser can render the foot before receiving all the rows of data.EXAMPLE.. <tfoot> <tr> <td>column footer 1</td> <td>column footer 2</td> <td>column footer 3</td> </tr> </tfoot>. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  33. 33. <DIV> TagDEFINITION/USAGE:The <div> tag defines a division or a section in an HTML document. The<div> tag is often used to group block-elements to format them withstyles.EXAMPLE<div> <p>Here is some content for a paragraph</p> <a href=”www.google.com”>here is a link to google</a></div> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  34. 34. <OL> TagDEFINITION/USAGE:The <ol> tag defines an ordered list, which is made up of a orderedsystem using numbers or letters. Use the <li> tag to define list items.EXAMPLE<ol> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ol> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  35. 35. <UL> TagDEFINITION/USAGE:The <ul> tag defines an unordered list, which is made up of a unorderedsystem using bullets. Use the <li> tag to define list items.EXAMPLE<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  36. 36. <LI> TagDEFINITION/USAGE:The <li> tag defines a list item.EXAMPLE<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  37. 37. <A> TagDEFINITION/USAGE:The <a> tag defines a hyperlink, which is used to link from one page toanother. The most important attribute of the <a> element is the hrefattribute, which indicates the link’s destination.EXAMPLE<a href=”http://www.google.com”> this is a link to google</a> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  38. 38. <IMG> TagDEFINITION/USAGE:The <img> tag defines an image in an HTML page. The <img> tag has tworequired attributes: src and alt.EXAMPLE<img src=”http://www.doctorbin.com/images/picture.jpg” alt=”my picture”/> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  39. 39. <H1> to <H6> TagsDEFINITION/USAGE:The <h1> to <h6> tags are used to define HTML headings. <h1> definesthe most important heading. <h6> defines the least important heading.EXAMPLE<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  40. 40. <NAV> TagDEFINITION/USAGE:The <nav> tag defines a section of navigation links. The <nav> element isintended only for major block of navigation links.EXAMPLE<nav> <a href="/html/">HTML</a> | <a href="/html5/">HTML5</a> | <a href="/css/">CSS</a> | <a href="/css3/">CSS3</a> | <a href="/js/">JavaScript</a></nav> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  41. 41. <HEADER> TagDEFINITION/USAGE:The <header> tag specifies an introduction, or a group of navigationelements for the document. Note: This is NOT the same as the <head>tag and does not serve the same purpose.EXAMPLE<header> <h1>Welcome to my homepage</h1> <p>My name is Matt Torbin</p></header> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  42. 42. <FOOTER> TagDEFINITION/USAGE:The <footer> tag defines the footer of a section or document. Typicallycontains the name of the author, the date the document was written and/or contact information.EXAMPLE<footer> This document was written in 2009.</footer> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  43. 43. Time To Make Some Magic! We are going to start by building the HTML structure of our web page. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  44. 44. CSSAdding Polish andStyle to Your Content The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  45. 45. What is this CSS thing anyways?• Pronounced C-S-S• Stands for Cascading Style Sheets• Recently published recommendations for CSS3• Allows creative departments to define the look and feel of the content by giving the programmers a "definition" file. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  46. 46. How is CSS Written?• CSS can be written "inline" (included in the HTML) or called from an external file.• CSS consists of "declarations" which define styles based on the ID attribute of an HTML tag, the tag type or a particular sequence of tags that occur.• CSS can affect a tag uniquely or all tags of a particular sequence or type. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  47. 47. Typical CSS Declarationsbody{ background-color:#ffffff; color:#000000; margin:0px; padding:1px 4px;}h1,h2,h3{font-size:14px;font-weight:bold;}#primary_logo{ width:200px; height:100px;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  48. 48. The difference between IDs and Classes• ID’s must be unique to an HTML page (i.e. only one #header per page)• ID’s are written with a pound sign (#)• Classes can be used many times per page• Classes are written with a period (.)• Generic html tags are written as is (i.e. html, head, p, img)• Think of #’s like a prince’s crown; there must be unique per kingdom. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  49. 49. WIDTH DeclarationDEFINITION/USAGE:The width property sets the width of an element.EXAMPLEp.ex{ height:100px; width:100px;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  50. 50. HEIGHT DeclarationDEFINITION/USAGE:The height property sets the height of an element.EXAMPLEp.ex{ height:100px; width:100px;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  51. 51. MARGIN DeclarationDEFINITION/USAGE:The margin clears an area around an element (outside the border). Thetop, right, bottom, and left margin can be changed independently usingseparate properties.EXAMPLEmargin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  52. 52. PADDING DeclarationDEFINITION/USAGE:The padding clears an area around the content (inside the border) of anelement. The top, right, bottom, and left padding can be changedindependently using separate properties.EXAMPLEpadding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px; The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  53. 53. BORDER DeclarationDEFINITION/USAGE:The border-width property is used to set the width of the border. Thewidth is set in pixels, or by using one of the three pre-defined values: thin,medium, or thick.EXAMPLEp.one{border-style:solid;border-width:5px;}p.two{border:1px solid #000000;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  54. 54. FLOAT DeclarationDEFINITION/USAGE:Elements are floated horizontally, this means that an element can only befloated left or right, not up or down. A floated element will move as farto the left or right as it can.EXAMPLEimg{float:right;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  55. 55. TEXT-ALIGN DeclarationDEFINITION/USAGE:The text-align property specifies the horizontal alignment of text in anelement.EXAMPLEh1 {text-align:center}h2 {text-align:left}h3 {text-align:right} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  56. 56. FONT-FAMILY DeclarationDEFINITION/USAGE:The font-family property specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If thebrowser does not support the first font, it tries the next font.EXAMPLEp{font-family:"Times New Roman",Georgia,Serif;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  57. 57. :HOVER DeclarationDEFINITION/USAGE:The :hover selector is used to select elements when you mouse overthem.EXAMPLEa:hover{background-color:yellow;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  58. 58. BORDER-RADIUS DeclarationDEFINITION/USAGE:The border-radius property is a shorthand property for setting the fourborder-*-radius properties.EXAMPLEdiv{border:2px solid;border-radius:25px;} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  59. 59. OPACITY DeclarationDEFINITION/USAGE:Creating transparent images with CSS is easy.EXAMPLEimg{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  60. 60. TRANSITIONS DeclarationDEFINITION/USAGE:CSS3 transitions are effects that let an element gradually change from onestyle to another.EXAMPLEdiv{transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari and Chrome */-o-transition: width 2s; /* Opera */} The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  61. 61. Time To Make Some Magic! Now let’s add some CSS to our HTML that we wrote earlier. The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  62. 62. Javascript Bringing Power and Logic To Your Web PagesThe Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  63. 63. What is this Javascript thing anyways?• Javascript was developed by Netscape and Mozilla, but is now owned by Oracle.• Considered to be one of the most widely used “client side” scripting languages in the world.• Frameworks have now been developed to give even more power to Javascript (i.e. jQuery, Prototype) The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  64. 64. Typical Javscript Code<script>var instructor = "Matt Torbin";informStudents();function informStudents(){ if(instructor == "Matt Torbin"){ document.write(instructor + " is teaching this class."); } else{ document.write("Where is Matt??"); }}</script> The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  65. 65. To Infinity and BEYOND! The Next Step in Web Development (and yes, I did just quote Buzz Lightyear) The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org
  66. 66. Thank YouMatt Torbinemail: mtorbin@gmail.comurl: www.doctorbin.comaim: m4cpr0gr4mm3rtwitter: www.twitter.com/#!/doctorbinlinkedin: www.linkedin.com/in/mtorbinTom Howellemail: thomashowell328@gmail.comurl: www.thomashowell.orgaim: remembersennatwitter: www.twitter.com/#!/thomashowell The Hacktory • 1524 Brandywine Street, Philadelphia PA 19130 • contact@thehacktory.org

×