Introduction to Web Technology
35 likes11,776 views
The document is an introductory resource on the internet and web technologies, created by Rob Bertholf, an experienced web developer and educator. It covers fundamental concepts such as the internet, World Wide Web, web browsers, HTML, protocols, and content management systems, aiming to provide a foundational understanding of web development. Additionally, it touches on best practices in e-commerce, web accessibility, and the future of the web, including trends like Web 3.0 and the Internet of Things.
![internet
[in-ter-net]
noun
1. The Internet is a global system of
interconnected computer networks that use
the standard Internet protocol suite (TCP/IP)
to link several billion devices worldwide.](https://image.slidesharecdn.com/rob1-1introtowebtechnology-150114212748-conversion-gate02/85/Introduction-to-Web-Technology-12-320.jpg)
![protocol
[proh-tuh-kawl, -kol, -kohl]
noun
1. set of rules that allow two electronic items to
connect to and exchange information with
one another.](https://image.slidesharecdn.com/rob1-1introtowebtechnology-150114212748-conversion-gate02/85/Introduction-to-Web-Technology-23-320.jpg)
![WordPress
[Word Press]
noun
1. an online, open source website creation
tool written in PHP. But in non-geek speak,
it's probably the easiest and most powerful
blogging and website content management
system (or CMS) in existence today.](https://image.slidesharecdn.com/rob1-1introtowebtechnology-150114212748-conversion-gate02/85/Introduction-to-Web-Technology-71-320.jpg)
![<script type="text/javascript">
//<![CDATA[
$(function() {
$('#divone').tipsy({fade: true, gravity: 'n'});
});
//]]>
</script>](https://image.slidesharecdn.com/rob1-1introtowebtechnology-150114212748-conversion-gate02/85/Introduction-to-Web-Technology-149-320.jpg)
Introduction to Web Technology
- 1. Intro to the Web __
- 5. @Rob’s Geek Cred @Rob WordPress Plugin Developer <> #IRC Operator @Zeppo Former Board of Directors Information Management Staff Sergeant US Air Force Software as a Service Architect / Growth Hacker CC Creative Commons Contributor Wikipedia Editor PATENT APPLICATION #US20060294199 Systems & Methods for a Standard Web Platform
- 6. Google Search Engine Optimization Expert @Rob Bertholf | Search Engine Optimization Expert rob.bertholf.com Hi, I’m @Rob on Twitter. California guy living in Honolulu, Hawaii the last 10 years. I teach at University of Hawaii’s PNM program and I am passionate about Development, Social Marketing Strategy, Web Analytics & Conversion optimization. Search engine optimization - Wikipedia en.wikipedia.org/wiki/Search_engine_optimization About 22,500,000 Results Top Ranked
- 7. Pacific New Media @pacificnewmedia Follow @PacificNewMedia Excited to speak at #Clarity15 on #SEO #KPI’s & Reporting! Rob Bertholf @Rob Follow @Rob Excited to speak at #UHPNM on Intro to the #Internet!
- 8. Introductions :) HELLOyour name is 1) Name 2) Industry 3) Takeaway
- 9. Intro to the Web __
- 10. @Rob Bertholf
- 11. ● ● ● ●
- 12. internet [in-ter-net] noun 1. The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to link several billion devices worldwide.
- 14. Server
- 15. Server
- 18. web /web/ noun 1. an information system on the Internet that allows documents to be connected to other documents by hypertext links, enabling the user to search for information by moving from one document to another.
- 19. Web Browser http://domain.com/myfile.html Hello World! Internet http://domain.com/myfile.html Web Server Browser
- 20. Hypertext Transfer ProtocolWeb Browser http://domain.com/myfile.html Hello World! Internet http://domain.com/myfile.html Web Server → domain.com → myfile.html Browser
- 21. Secure Hypertext Transfer ProtocolWeb Browser https://domain.com/myfile.html Hello World! Internet https://domain.com/myfile.html Web Server Browser
- 22. Secure Hypertext Transfer ProtocolWeb Browser https://domain.com/myfile.html Hello World! Internet https://domain.com/myfile.html Web Server Browser
- 23. protocol [proh-tuh-kawl, -kol, -kohl] noun 1. set of rules that allow two electronic items to connect to and exchange information with one another.
- 26. Transmission Control Protocol (TCP) Internet Protocol (IP) Internet
- 27. Hypertext Transfer ProtocolWeb Browser http://domain.com/myfile.html Hello World! Internet http://domain.com/myfile.html Web Server → domain.com → myfile.html Browser
- 28. File Transfer Protocol Internet ftp://domain.com Web/File Server myfile.html FTP Program FTP Request ftp://domain.com domain.com myfile.html C:MyWebsite myfile.html
- 30. ● ● ●
- 31. Internet Protocol (IP) address noun 1. a unique string of numbers separated by periods that identifies each computer using the Internet Protocol to communicate over a network.
- 32. 1212 Nuuanu Ave Honolulu, HI 96817
- 33. 128.1.0.1
- 34. 128.1.0.1
- 35. Chrome http://128.1.0.1 “Visit us on the web at 127.0.0.1”
- 36. Chrome http://Company.com “Visit us on the web at Company.com”
- 37. ● ●
- 38. Domain Name noun 1. A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet.
- 41. Domain Name System noun 1. DNS is an abbreviation for Domain Name System, a system for naming computers and network services that is organized into a hierarchy of domains. DNS naming is used in TCP/IP networks, such as the Internet, to locate computers and services through user-friendly names.
- 43. Name Server Web Server http://domain.com http://128.1.0.1
- 45. @Rob Bertholf
- 46. Web Browser noun 1. A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web.
- 48. Requests a FileWeb Browser http://domain.com/myfile.html Hello World! Internet http://domain.com/myfile.html Web Server → domain.com → myfile.html Browser
- 49. My Page - Browser myfile.html Hello World! mypage.html <html> <head> <title>My Page</title> </head> <body> <h1>Hello World</h1> </body> </html>
- 50. view-source:cat.html Cat Page - Chrome <html> <head> <title>Cat Page</title> </head> <body> <h1>Meow.</h1> <img src=”cat.jpg” /> </body> Cat Page - Chrome cat.html Meow. cat.jpg
- 51. Hypertext Markup Language noun 1. HTML stands for Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
- 52. <html> <head> <title>My Page</title> </head> <body> <h1>Hello World</h1> </body> </html> myfile.html
- 53. Cat Page - Chrome cat.html Meow.
- 55. Hyperlink noun 1. A link from a hypertext file or document to another location or file, typically activated by clicking on a highlighted word or image on the screen.
- 56. cat.html My Page - Browser mypage.html Hello World! Click Here for Cats! Meow. Cats - Browser cat.jpg Hyperlink
- 59. @Rob Bertholf
- 60. ● ●
- 61. mypage.html cat.html cat.jpg How to publish a website?
- 64. World Wide Web Web Server Chrome http://www.domain.com Hello World!
- 66. File Transfer Protocol noun 1. A standard network protocol used to transfer computer files between a client and server on a computer network. FTP is built on a client-server model architecture and uses separate control and data connections between the client and the server.
- 67. File Transfer Protocol Internet ftp://domain.com Web/File Server myfile.html FTP Program FTP Request ftp://domain.com domain.com myfile.html C:MyWebsite myfile.html
- 68. Internet ftp://domain.com/myfile.html Web/File Server FTP Program FTP Software ftp://domain.com domain.com myfile.html C:MyWebsite myfile.html
- 69. Content Management System /cms/ noun 1. a web application designed to make it easy for non-technical users to add, edit and manage a website. Not only do content management systems help website users with content editing, they also take care of a lot of "behind the scenes" work.
- 70. WYSIWYG Editor What you see is what you get Edit Page - Chrome Edit Page - Chrome Cat Page Title Publish TextVisual Cat Page Title Publish TextVisual <h1>Meow.</h1> <img src=”cat.jpg” /> Meow. B i u
- 71. WordPress [Word Press] noun 1. an online, open source website creation tool written in PHP. But in non-geek speak, it's probably the easiest and most powerful blogging and website content management system (or CMS) in existence today.
- 72. ● ●
- 75. @Rob Bertholf
- 76. ● ● ●
- 77. ● ● ●
- 78. @Rob Bertholf
- 81. @Rob Bertholf
- 82. SPECIAL OFFER
- 83. ● ○ ○ ○ ○
- 84. View DemoDirection-aware hover effect
- 85. View DemoProduct Info Reveals
- 88. ● ● ●
- 90. ● ●
- 93. ● ●
- 96. ● ●
- 98. @User123: I bought this product name and it was great! Brand Position Statement
- 101. http://catsworld.com Meow. Desktop Cats World Online Home About Contact http://catsworld.com Meow. Mobile Device Cats World Online
- 102. @Rob Bertholf
- 104. ● ● ● ●
- 106. ● ○ ○ ○ ○ ○
- 107. @Rob Bertholf
- 108. Web Accessibility __
- 109. ● ● ● ●
- 111. ● ●
- 112. ● ●
- 113. ● ●
- 114. ● ● ●
- 115. ● ●
- 121. ● ●
- 122. ● ● ● ●
- 124. <title>This is the Title</title> This is the Title - Chrome Browser some.url <!DOCTYPE> <html> <head> This is the Header
- 125. ● ○ ○ ● ○ ○
- 126. ● ○ ○ ●
- 127. <img src="image.png" alt="text goes here">
- 128. ● ○ ○
- 129. <h1>This is my heading</h1>
- 130. ● ● ●
- 131. ● ○ ■ ■ ○ ■ ■ ■ ○
- 132. Some people cannot read text if there is not sufficient contrast between the text and background, for example, light gray text on a light background.
- 133. Some people cannot read text if there is not sufficient contrast between the text and background, for example, light gray text on a light background. For others, bright colors (high luminance) are not readable; they need low luminance. Some people cannot read text if there is not sufficient contrast between the text and background, for example, light gray text on a light background. For others, bright colors (high luminance) are not readable; they need low luminance.
- 134. AA
- 135. ● ● ●
- 136. ● ●
- 137. tab
- 138. ● ● ● ●
- 139. ● ● ●
- 141. ● ● ○ ○ Email Address Question above an option group? Yes No
- 142. ● ● ●
- 147. Replace & with & Replace " with " Replace < with < Replace > with >
- 149. <script type="text/javascript"> //<![CDATA[ $(function() { $('#divone').tipsy({fade: true, gravity: 'n'}); }); //]]> </script>
- 151. <A HREF="#" onClick="doSomething();">Text</A> <a href="#" onclick="doSomething();">Text</a>
- 154. ● ● ● ● ● ●
- 155. ● ●
- 156. @Rob Bertholf
- 158. @Rob Bertholf
- 161. ● ○ ■ ○ ○ ● ○
- 165. ● ○ ○ ● ○ ○ ○ ● ○ ○
- 168. ● ● ●
- 172. Buy for $88
- 175. :) Nice Prompt
- 176. :( Design Style Changes :) Several Payment Options :) Secure Checkout :) Clear Order Summary
- 177. ? Lots of Shipping Options :) Clear Order Summary :( Return to site/add more items?
- 178. :) Lots of Payment Options
- 179. :) Saved Information for Fast Checkout :) Auto Subscribe to newsletter
- 181. ● ● ● ●
- 182. ●
- 184. ●
- 186. Simple Navigation
- 188. Understanding of Audience & Use of Lifestyle Imagery
- 189. @Rob Bertholf
- 190. Future of the Web __
- 191. @Rob Bertholf
- 193. Web 1.0 Article Person Song Book Portal
- 195. Web 2.0 Article Person Song Book Collaborate Connect & Share Review Discuss Collaboration
- 197. Web 3.0 Article Person Song Book written by is loved by references inspired by isreading discussed in Context
- 198. Trust Crypto URI / IRI XML Data Interchange:RDF Rules: RIF RDF-S Unifying Logic Ontology: OWLQuery: SPARQL Proof Unicode
- 200. Web 4.0 Internet of Things (IoT)
- 202. @Rob Bertholf
- 203. Images __
- 204. ● ● ● ● ●
- 207. Raster Vector
- 209. BMP JPEG GIF PNG TIFF SVG Google Chrome Yes Yes Yes Yes No Partial Internet Explorer Yes Yes Yes Yes Yes Partial Mozilla Firefox Yes Yes Yes Yes No Partial Safari Yes Yes Yes Yes Yes Partial
- 210. ● ● ● ●
- 211. ● ● ● ● ● ●
- 212. ● ● ● ● ● ● ● ● .JPG & .JPEG are the same
- 213. ● ● ● ● ● ●
- 218. Images
- 219. Google Search Console - Browser https://www.google.com/webmasters/tools/ Google Search Console Search Analytics
- 228. CC
- 231. ● ● ● ●
- 232. IMG_2348.JPG
- 235. <img src="image.png" alt="text goes here" />
- 236. ● ○ ○
- 237. ● ● ● ●
- 244. Image Title Lorem ipsum dolar set. Creative Commons Attribution Image Title - Browser http://www.example.com/gallery/image-slug/
- 245. ● ● ● ●
- 248. ● ● ● ● ●
- 258. Recap __
- 259. @Rob Bertholf