Skillshare HTML/CSS Unit 1

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/