Introduction to the Web and HTML
- 1. Introduction to the Web and HTML K I C K S T A R T Y O U R J O U R N E Y W I T H GDSC - Shiv Nadar University
- 2. 3rd Year Computer Science student, yes at SNU. Web Development Head at DSC. Full-Stack web developer, learning Rustlang 🦀 (just got interested in systems programming so...) Contributes to open source from time-to-time. Likes apple and its devices, wants to get a macbook. Is happy to help people starting out in the web- development world 🗺 Meet your speaker Siddharth Borderwala @sidborderwala
- 3. Timeline for the Workshop D A Y Webpages and Introduction to CSS D A Y Introduction to the Web and HTML D A Y The dark arts of CSS D A Y Introduction to Javascript D A Y Publish your Portfolio 1 2 3 4 5
- 4. Why should you attend? Learn web development from a seasoned developer. Create a portfolio you can publish and flaunt. Best 3 portfolios will get prizes worth ₹6000. Create website you can sell. Understand what kind of challenges/problems a web developer faces and solves.
- 5. Outline WHAT ARE WE GOING TO COVER TODAY Introduction to the Web. What happens when you go to a URL? Your browser and the server. What is HTML? How to create a web page? Question and Answer.
- 6. What is the Web? It is a system for exchanging resources over the Internet. These resources are located on computers across the globe and can be accessed via their URL (Universal Resource Locator). It was created by Tim-Berners Lee in 1989 as a system for transferring files.
- 7. A set of rules and procedures to follow for exchanging information over the Internet. Commonly known as HTTP. It is a text-based protocol. HTTPS (HTTP Secure) is the encrypted version of HTTP for secure transmission of data. Hyper Text Transfer Protocol
- 9. Request GET /index.html HTTP/1.1 Response HTTP/1.1 200 OK Content-type: text/html <!DOCTYPE html> <html> ... </html>
- 10. Response Handling Based on the HTTP Status Code browser renders the response on the screen. It takes the HTML and generates a Document Object Model (DOM) out of it. Loads the resources linked in the document.
- 11. Contents of a Web Page Styles of the web page Behaviour of the web page Hyper Text Markup Language Skeleton of the web page Cascading Style Sheets Javascript
- 12. HTML HYPER TEXT MARKUP LANGUAGE Define the structure of the page. Fill the contents of the page. Let's create our first web page using HTML Open codesandbox.io
- 13. Do you have any questions? What is the rel attribute on link tag? Ask away! Some questions would be -