Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Skillshare HTML/CSS Unit 1

508cdde667137534cd7154a447e38e51?s=47 Nicolae Rusan
March 09, 2013
63

Skillshare HTML/CSS Unit 1

508cdde667137534cd7154a447e38e51?s=128

Nicolae Rusan

March 09, 2013
Tweet

Transcript

  1. Intro to HTML 5 and CSS Build Your First Fully

    Working Website Unit 1: Introduction + Basic HTML
  2. My First Website Learn by Doing. Choose a project you

    want to work on. Personal Website, website for a group you’re part of that needs help?
  3. Nice to Meet You! Nicolae Rusan Director of Product Design

    @ Cofounder @ I Design + Code Websites. Program Manager @
  4. Overview of the Course Who this is for: No prior

    knowledge needed What you’ll BUILD during this course: Project 1: Sample Restaurant Site Project 2: Your Site – Live on the World Wide Web
  5. Overview of the Course Unit 1: - History and technology

    behind the Internet and WWW - Intro to HTML Unit 2 CSS – Visually Styling Your Website Photoshop Basics Project Milestone: Build Sample Site
  6. Overview of the Course Unit 1: - History and technology

    behind the Internet and WWW - Intro to HTML Unit 2 More HTML CSS Basics – Visually Styling Your Website Unit 3 More Advanced CSS Domain Names + Hosting
  7. Logistics Videos + Resources Available online. Additional Materials. Office Hours

    Thursdays @ 7PM – 9PM (Google Hangout link to come)
  8. Unit 1.2 How the Internet and World Wide Web Actually

    Work
  9. •  History of the Internet, and the World Wide Web

    •  Introduction to the Concept of HTML How the Internet + WWW Actually Work
  10. History Time The Internet != The World Wide Web

  11. History Time The Internet != The World Wide Web The

    Internet = PHYSICAL cables, connecting computes to each other in a network.
  12. 1969 US Military ARPANET – Physical Connections

  13. 1969 US Military ARPANET – Physical Connections Not direct connections

    – sometime may need to leapfrog
  14. Making Information from Electricity •  Cables just carry electricity. • 

    Like a switch, can alternate high level or low level of voltage – high represents a 1 and low represents a 0. –  Therefore can send a digital signal – a stream of 1s and 0s
  15. Making Information from Electricity •  Need to have an agreement

    on how to interpret the 1s and 0s •  Protocol. A contract for how to send and decode messages. –  communications protocol
  16. 1960s •  ARPANET •  TCP/IP. Internet Protocol Suite.

  17. TCP/IP + Packet Switching •  Messages get broken up into

    packets (smaller pieces of the message) PACKETS Message Packet Header 1 of 3 2 of 3 3 of 3
  18. Advantage of Packet Switching A E B C D When

    message is all one piece, Have to send it down a single pipe.
  19. Advantage of Packet Switching A E B C D Breaking

    message up lets us utilize the network’s full channel capacity. Send pieces (packets) of the message
  20. Talking to a Specific Computer IP Address e.g. 24.193.229.180 Unique

    identifier of a particular machine. Hello, my name is 192.168.1.255
  21. Who Answers the Call? Server - A server is a

    program (software) that listens for connections, and data being sent, and knows how to handle (and potentially respond) to that data. Server listening for incoming connections, and messages Popular Server Software: Apache (by far most popular) nginx Microsoft Internet Server
  22. Servers as Hardware The word “server” can also refer to

    computers specifically designed to run server programs and be on 24/7 Data Centers, or “Server Farms” Sites aren’t usually served from home computers. They usually are served from Data Centers, or “Server Farms” that are large buildings filled with special hardware servers designed to always serve sites. Google’s Data Center. Those are all computers running servers
  23. Hey, What’s Your Number Again? (Call me maybe). 1983 Domain

    Name System 1960s •  ARPANET •  TCP/IP. Internet Protocol Suite.
  24. Domain Name Servers Domain Name Server 192.322.332.43 (1) What does

    foobar.com translate to? (map of URLs to IPs)
  25. Domain Name Servers (1) What does foobar.com translate to? (2)

    foobar.com maps to 192.322.332.43 Domain Name Server 192.322.332.43
  26. Domain Name Servers (1) What does foobar.com translate to? (2)

    foobar.com maps to 192.322.332.43 Domain Name Server 192.322.332.43 (3) Talk to 192.322.332.43
  27. ICANN Since 1998, the DNS system has been managed by:

    Internet Corporation for Assigned Names and Numbers
  28. The World Wide Web 1983 Domain Name System 1960s • 

    ARPANET •  TCP/IP. Internet Protocol Suite. 1989 – Modern Day The World Wide Web
  29. Before The World Wide Web •  Email – Since 1965 • 

    Usenet (via the SMTP + FTP protocol) – Text files people posted, and could then download to their own computers. – Discussion groups, and newsgroups. Largely via email. •  Gopher – - organize files and information.
  30. The World Wide Web SIR Tim Berner’s Lee -  Invented

    the World Wide Web -  Got Knighted for it. < - Tech Rockstar.
  31. The World Wide Web Few Ideas that were crucial to

    it. Hypertext (HTML documents) -  Text that links to other text that can be immediately accessed -  E.g. this is a link that goes somewhere else -  HTML – Hypertext Markup Language HTTP Protocol - How do you respond to the request for an HTML document Tim Berner’s Lee is a gangster. -  Wrote the first HTTP server, the first web browser, and the first web pages.
  32. HTTP Protocol Briefly Client Server HTTP Request HTTP Response Every

    HTTP Request and Response has an HTTP Header that has information about the type of Request/Response.
  33. HTTP Protocol Briefly Response Header: HTTP/1.1 200 OK Date: Mon,

    23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Etag: "3f80f-1b6-3e1cb03b" Accept-Ranges: none Content-Length: 438 Connection: close - HTML CONTENT - GET a Resource from a machine: Get /aboutus.htmls HTTP/1.1 Host: www.sailthru.com/aboutus.html
  34. What is the Browser getting anyways? - CURL Example What

    is a browser? A program that knows how to interpret HTML, which is called compiling HTML (and CSS), in order to show us the right pixels on the screen!
  35. Browsers are Complex •  How do we decide how to

    interpret HTML into it’s visual form? – Different Screen Sizes, Different Resolutions, Different Devices! – W3C – World Wide Web Consortium sets the standards!
  36. History of the Web Browser •  1990 – Tim Berner’s

    Lee –  WorldWideWeb Browser •  1993 - Marc Andreesen – Mosaic –  Netscape •  1995 Microsoft Internet Explorer •  1998 Netscape launches Mozilla foundation •  2003 Apple Safari •  2008 Google Chrome •  (December 2011 – Chrome the most popular browser!)
  37. Browsers Interpret HTML Differently -  Need to test on different

    browsers -  This is where it gets a bit tougher to make things look consistent across devices + browsers.
  38. 1.2 Summary •  Internet is a Physical Infrastructure, dating back

    to the 1960s, that connects computers together with cables that carry electricity. •  World Wide Web is a software that introduced the idea of HTML webpages (linked documents), and the HTTP protocol for requesting and responding to requests for webpages •  Servers are programs that listen for connections and handle requests, often running on machines specifically designed for that purpose. •  Browsers know how to turn HTML into a visual representation
  39. Unit 1.3 Introduction to HTML

  40. 1.3 Introduction to HTML -  What is HTML? -  Preview

    of the site we’re building: Alcove - Introduction to Tags -  Structure of an HTML document -  Doctype, HTML tags, Head Tags, Body Tags -  “Hello World” – creating and viewing our first Web Page -  Viewing source code in browsers -  Document Object Model
  41. What is HTML? Hyper Text Markup Language -  contains the

    content of a web page, and additional identifying information about what that content is.
  42. HTML Tags An HTML document utilizes ‘tags’ to identify different

    types of content: <tag> content inside the tag </tag> Collection of tags that have certain meanings. They describe the content within them: <h1>This is a heading</h1> <p>This is a paragraph</p> Opening Tag Closing Tag
  43. HTML Tags An HTML document utilizes ‘tags’ to identify different

    types of content: <tag> content inside the tag </tag> Collection of tags that have certain meanings. They describe the content within them: <h1>This is a heading</h1> <p>This is a paragraph</p> Opening Tag Closing Tag
  44. Tags add meaning to the content <p> EVERYTHING IN HERE

    IS A PARAGRAPH </p>
  45. Tags add meaning to the content This is just text

    There is no information about it. <p> But put some tags, and you have some info. For example this is a paragraph. </p>
  46. Tags can be nested <p> This is a paragraph. <h1>

    This is a heading inside of a paragraph </h1> </p>
  47. Tags can be nested <p> This is a paragraph. <h1>

    This is a heading inside of a paragraph </h1> <h1> And this is another heading inside of the same paragraph </h1> </p>
  48. Tags can be nested <p> This is a paragraph. <h1>

    This is a heading inside of a paragraph </h1> <h1> And this is another heading inside of the same paragraph </h1> </p> This is like a tree Of elements: p h1 h1 The paragraph contains two headings and some text. The headings are children of the paragraph. This is a heading inside a paragraph This is a another heading inside a paragraph This is a paragraph
  49. Learning Tags Over the next few lectures we will just

    learn different types of tags with different meanings, and how to use them. <p> Paragraphs <h1> Headings <div>,<span> Section/Division <ul>,<ol> Lists <a> Links <img> Images <table> Tables ….. And many more.
  50. What We’re Going to Build

  51. But first… Hello World <!DOCTYPE html > <HTML> <HEAD> <TITLE>My

    first HTML document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML>
  52. Simple HTML Document <!DOCTYPE html> <HTML> <HEAD> <TITLE>My first HTML

    document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML> Doc Type The doctype identifies the file as an html file
  53. Simple HTML Document <!DOCTYPE html> <HTML> <HEAD> <TITLE>My first HTML

    document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML> HTML Tags Everything within the HTML tags is your HTML
  54. Simple HTML Document <!DOCTYPE html> <HTML> <HEAD> <TITLE>My first HTML

    document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML> Head Content Everything inside of the head tags describes information about the content of the web page (it doesn’t appear on the page). It is meta information. e.g. The title is what we see appear as the title on the tab/window, and the title of the page in Google Search results.
  55. Simple HTML Document <!DOCTYPE html> <HTML> <HEAD> <TITLE>My first HTML

    document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML> Body Content This is the content of the page. This is what we see in the main browser window!
  56. Simple HTML Document <!DOCTYPE html> <HTML> <HEAD> <TITLE>My first HTML

    document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML> Body Content Head Content HTML Tags Doc Type
  57. Every HTML Page Needs: •  DocType •  HTML Tags • 

    Head Section •  Body Section
  58. Creating an HTML Document An HTML Document is just a

    file that has a .html extension and has the sections we talked about in the last slide: Doctype, HTML tags, Head and body
  59. Indentation + Spacing Indentation and Spacing don’t matter! They are

    used only to improve READABILITY. Make the code easier to read – make it easy to see what is nested inside of what.
  60. Document Object Model html head body title p Hello world

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> My first HTML document </TITLE> </HEAD> <BODY> <P>Hello world!</P> <P>Hear me roar <h1>ROAR</h1> </P> </BODY> </HTML> My first HTML document Hear me roar p h1 ROAR
  61. Document Object Model html head body title p Hello world

    My first HTML document Hear me roar p h1 ROAR This tree of nested HTML elements, or tags, Is called the Document Object Model.
  62. 1.3 Recap Introduction to HTML -  What is HTML? - 

    Hypertext Markup Language - Tags provide meaning to the content -  Structure of an HTML document -  Doctype, HTML tags, Head Tags, Body Tags -  “Hello World” – creating and viewing our first Web Page -  Viewing source code in browsers -  Document Object Model
  63. Unit 1.5 Different Types of Text

  64. 1.5 Different Types of Text Paragraph tag Heading Tags Ordered

    and Unordered Lists Div , Span , BR HTML 5: Header, Footer, Nav
  65. Paragraph Tags Denote a paragraph of text. <p> Everything within

    here is a paragraph </p>
  66. Paragraph Tags Paragraphs in the Alcove project

  67. Heading Tags Denote a heading <h1> A main heading on

    the page </h1>
  68. Heading Tags Denote a heading <h1> A main heading on

    the page </h1> <h2> A secondary heading on the page </h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> From h1-h6, decreasing importance of heading.
  69. Heading Tags

  70. Heading Tags

  71. Lists Unordered Lists <ul> <li>This is an item</li> <li>This is

    a second item</li> <li>This is a third item. But the list is not numbered</li> </ul> e.g. •  This is an item •  This is a second item •  And a third item. But the list is not numbered.
  72. Lists Ordered Lists <ol> <li>This is an item</li> <li>This is

    a second item</li> <li>This is a third item. And the list is numbered</li> </ol> e.g. 1.  This is an item 2.  This is a second item 3.  And a third item. But the list is not numbered.
  73. Div The mother of all tags – the one you’ll

    use the most: Defines a block of content/section within a document. Very general, primarily used to group things together you want to style in some way. <div> This is some content that should be grouped together. </div>
  74. Span Used to group inline elements together (particularly for visual

    styling). Not a block of content. <span></span> <p> This is a paragraph with one portion of it here <span>that is in a span</span> because we want to make it bold or italic later. </p>
  75. Div vs Span <div></div> <span></span> Line break before and after

    the content No line break. This is some text that is all in a paragraph except this is in a div so it occurs on it’s own line unlike a span This is some text that is all in a paragraph except this is in a span so it occurs inline with the paragraph unlike a span
  76. Break Tag Add a newline to the document: <br/> Note:

    No closing tag. Self-closing tag – not all tags have content between them (i.e. they don’t have a matching closing tag). You shouldn’t add newlines to do spacing. Visual styling should be left for CSS.
  77. HTML 5 Tags HTML 5 introduced new tags for us

    to use when grouping elements for items that are common on most webpages: headers, footers, and navigation. <header> </header> <footer></footer> <nav></nav> Add more semantic meaning than just div. Perfectly fine to use just div though.
  78. HTML 5 Tags HTML 5 introduced new tags for us

    to use when grouping elements for items that are common on most webpages: headers, footers, and navigation. <header> </header> <footer></footer> <nav></nav> Add more semantic meaning than just div. Perfectly fine to use just div though.
  79. Header, Footer, and Nav Tags <header></header> Defines a header for

    a document or section. <footer></footer> Defines a footer for a document or section. <nav></nav> Defines navigation links.
  80. 1.5 Recap Different Types of Text Paragraph tag Heading Tags

    Ordered and Unordered Lists Div , Span , BR HTML 5: Header, Footer, Nav
  81. Unit 1.6 Images

  82. 1.6 Images Introduction to Tag Attributes Image Tag Paths: -

    Relative and Absolute Different Types of Images: - jpg/jpeg - png - gif
  83. Two Types of Tags (1)  Tags w/ matching starting and

    closing tags – enclose content within them e.g. Learned Paragraphs <p>some content</p> Heading <h1>some content</h1> Divs <div>some content</div> … etc. Coming Up Links <a>some content</a> And more..
  84. Two Types of Tags (2) Self-closing tags – don’t have

    matching ending and starting tag. Do not enclose content. e.g. Learned: Break Tag <br/> Coming Up: Img <img /> Input <input /> And more..
  85. Tag Attributes Tag Attributes provide additional information about the tag.

    e.g. <img src=‘http://useframe.com/shopify_logo.png’ width=’200px’ height=’55px’ /> SRC attribute specifies the location! where the image lives! Width attribute specifies how wide the browser should show the image! Height specifies how tall the browser should show the image!
  86. Tag Attributes Tag Attributes provide additional information about the tag.

    e.g. <img src=‘http://useframe.com/shopify_logo.png’ width=’200px’ height=’55px’ /> SRC attribute specifies the location! where the image lives! Width attribute specifies how wide the browser should show the image! Height specifies how tall the browser should show the image!
  87. Tag Attributes Set of attribute_name = ‘value’ pairs For tags

    that have matching opening/closing tags define the attributes on the opening tag. <tag attribute_name=“value”> </tag> Tags that don’t have matching closing tags. •  <tag attribute_name=‘value’ /> Can use either single or double quotes to enclose the value.
  88. Image Tag <img src=“images/breakfast.png” /> Attributes: src Required. Path to

    the image file. width Recommended Width of the image height Recommended Height of the image. alt Recommended Text that displays for screen readers, or if the image can’t load.
  89. Image Tag Alcove Example <img src=“images/home_banner.png” height=’111px’ width=‘28px’ alt=‘Breakfast Food

    Samples’/>
  90. Relative Paths Relative to the current document: <img src=“images/home_banner.png” />

    “..” means one folder up <img src=“../images/home_banner.png” />
  91. Absolute Paths Full path to the image. e.g. http://useframe.com/assets/shopify_logo.png <img

    src=“http://useframe.com/assets/ shopify_logo.png” />
  92. Different Types of Images Use jpeg/jpg for high resolution, large

    images. Use PNG for everything else. GIF for animated images. Set the width and height explicitly - Otherwise the image will make the pa!ge content reflow after it loads (browser has no way to know how big it is unless you tell it).
  93. Tips for Images Set the width and height explicitly - 

    Otherwise the image will make the page content reflow after it loads (browser has no way to know how big it is unless you tell it). Include Alt tags for usability purposes.
  94. 1.6 Recap Images Introduction to Tag Attributes Image Tag Paths:

    - Relative and Absolute Different Types of Images: - jpg/jpeg - png - gif
  95. Unit 1.7 Links

  96. 1.7 Links Anchor Tag <a href=‘’> </a> Relative vs. Absolute

    Path Links Anatomy of a basic site. Linking to content in the same page. Attributes, opening links in new tabs
  97. Anchor (A) Tag •  The magical tag! •  How you

    make links. •  Link to another page. <a href=‘http://www.google.com’>Google</a> Makes: Google
  98. Anchor Tag – Absolute vs. Relative Paths Relative Path: <a

    href=‘menu.html’>Menu Page in same folder</ a> Absolute Path <a href=‘http://www.useframe.com’>Frame</a>
  99. Alcove: Setting up and linking our pages /images index.html (root

    page) menu.html apply.html contact.html
  100. Anchor (A) Tag - Attributes <a href=‘http://www.google.com’ target=‘_blank’>Google</a> Attribute Function

    Values href where it links to Absolute, or relative path. Required target Optionally open in new tab _blank (open in new tab) optional
  101. Linking Within Same Document Linking within the same page: Identify

    a section with an id attribute: <div id=‘second_section’></div> Then, make the href of the anchor tag be the id of the section prepended with #. <a href=‘#second_section’> </a>
  102. 1.7 Recap Links Anchor Tag <a href=‘’> </a> Relative vs.

    Absolute Path Links Anatomy of a basic site. Linking to content in the same page. Attributes, opening links in new tabs
  103. Unit 1.8 HTML Comments

  104. HTML Comments <!–- An HTML comment --> •  Leave comments

    for other developers and for yourself. •  Helps readability potentially. •  Doesn’t appear in the rendered version of the page in •  the browser •  Appears in the view source.
  105. Unit 1.9 Getting Your Site Live on the World Wide

    Web
  106. 1.9 Getting Your Site Live on the World Wide Web

    •  Buying a domain name, and choosing a host •  Different types of domain names and costs •  WHOIS and private registration •  Uploading via FTP •  Root page: index.html
  107. Domain Names and Hosts Domain Name The actual URL you’ll

    be using on the web Register the name, and point it to your host’s servers Hosting Company Where you will upload the files of your site to, and point the domain name to load from. e.g. www.yourdomainname.com Local Computer Hosting Company /images /css index.html menu.html apply.html contact.html
  108. Domain Names and Hosts e.g. www.yourdomainname.com Local Computer Hosting Company’s

    Servers /images /css index.html menu.html apply.html contact.html /images /css index.html menu.html apply.html contact.html (1) Upload files to hosting company’s server via FTP (2) Change DNS records to point domain name to the hosting company’s servers
  109. How Much You Should Spend Many hosting companies include a

    free domain name, when you signup for a monthly hosting plan Prices: Domain Name: ~ $10/year Hosting Plan: ~ $5/month (includes free domain name)
  110. Hosting and Domain Name Providers Hosting Provider Website Bluehost www.bluehost.com

    GoDaddy www.godaddy.com Dreamhost www.dreamhost.com Mediatemple mediatemple.net/ iPages ipage.com 1and1.com www.1and1.com What you get – a place to easily serve static files from, a database
  111. Hosting and Domain Name Providers Hosting Provider Website Bluehost www.bluehost.com

    GoDaddy www.godaddy.com Dreamhost www.dreamhost.com Mediatemple mediatemple.net/ iPages ipage.com 1and1.com www.1and1.com What you get – a place to easily serve static files from, a database
  112. Things to Know index.html is the main file that gets

    shown as the homepage (i.e. their servers are usually set to route / to your index.html page.) Good organization for your files: /css (all css files go in here) /images (all image files go in here) index.html other.html favicon.ico
  113. Things to Know WHOIS is a listing of who has

    registered specific domain names. You can stay unlisted by paying an additional annual fee to the Domain Name Registrars.
  114. Uploading Your Files - FTP FTP – File Transfer Protocol

    Unlike HTTP, it’s a protocol made specifically for transferring files. Download Filezilla FTP client: http://filezilla-project.org/