Scribd
Upload
9 views12 pages

Session 1 Introduction To The Web HTML Basics

This document outlines the first session of an 8-week course on Web Development Essentials, covering the basics of how the web works, HTML structure, and creating a simple webpage. It introduces key web technologies such as HTML, CSS, and JavaScript, and provides a hands-on activity for students to create their first HTML page. The session concludes with a summary of the topics covered and an invitation for questions.

Uploaded by

thihaaung.tt1660
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views12 pages

Session 1 Introduction To The Web HTML Basics

This document outlines the first session of an 8-week course on Web Development Essentials, covering the basics of how the web works, HTML structure, and creating a simple webpage. It introduces key web technologies such as HTML, CSS, and JavaScript, and provides a hands-on activity for students to create their first HTML page. The session concludes with a summary of the topics covered and an invitation for questions.

Uploaded by

thihaaung.tt1660
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Introduction to the Web &

HTML Basics
Web Development Essentials - Session 1
Course Overview
Welcome to Web Development Essentials

● Course duration: 8 weeks


● Topics: HTML, CSS, JavaScript basics
● Focus: Building the foundations of web development

Learning Outcomes for Today's Session

● Understand how the web works


● Learn the basics of HTML and its structure
● Create your first webpage
How the Web Works
Client-Server Model

● Client: Your web browser (e.g., Chrome, Firefox)


● Server: Stores and serves websites (e.g., Google servers)
● Request/Response: Client sends a request, server sends back a response (HTML, CSS, JS)

Web Protocols

● HTTP/HTTPS: How data is transferred across the web


● URL: The address for a webpage
Introduction to Web Technologies
HTML (HyperText Markup Language)

● The structure and content of web pages

CSS (Cascading Style Sheets)

● Styling and layout of web pages

JavaScript

● Adding interactivity to web pages


Development Environment Setup
Tools You’ll Need:

● Code Editor: VS Code (recommended)


● Browser: Chrome, Firefox, etc.
● Developer Tools: Inspecting elements, console for JavaScript

Installing VS Code (Quick Walkthrough)


What is HTML?
Definition: HTML is the standard markup language for creating web pages.
HTML Elements: Tags that define the structure and content (e.g., <h1>, <p>, <a>)
Anatomy of an HTML Element:

● <tagname> Content </tagname>


● Example: <p>Hello World!</p>
Basic Structure of an HTML Document
● The Basic Skeleton:
● Doctype: Defines the document type
● HTML Tag: Wraps the entire content
● Head: Contains metadata (e.g., title, links)
● Body: Contains the visible content
Common HTML Tags
Headings: <h1> to <h6> (Defines titles and subtitles)
Paragraph: <p> (Defines blocks of text)
Links: <a href="url"> (Hyperlinks)
Images: <img src="url" alt="description">
Lists:

● Ordered list: <ol>


● Unordered list: <ul>
Creating Your First Webpage
Live Demo:

● Open VS Code
● Create a simple HTML file (index.html)
● Add basic structure
● Save and open in browser to view your first webpage
● Sample HTML:
Hands-On Activity
Goal: Create a basic HTML page with a heading, and paragraph.

● Adding heading <h1> and paragraph <p>


● Save and view it in your browser

Share Your Work: Show your code to the instructor if you need help!
Summary
What We Learned Today:

● The basics of how the web works


● HTML structure and elements
● Created our first webpage
Questions?
Q&A Session

● Any questions before we wrap up?

Thank You & See You in the Next Class!

You might also like