Lecture Notes Of Class 1
Introduction to HTML and
Web Development
Objective:
- Understand the role of HTML in web development
and gain an overview of web technologies.
- Set up a development environment and create a
basic HTML file.
Outcome:
- Students will be able to explain HTML's role,
distinguish between front-end and back-end development, and set up their
environment to create and save HTML files.
1. Introduction to Web Development
What is Web Development?
- Web development is the process of creating
websites and web applications that people can access over the internet. It
involves coding, designing, and managing the content of a website.
Key Components of Web Development:
- Front-End Development:
- This is the part of the website that users
interact with directly. It includes everything you see on a webpage, like
text, images, buttons, and forms.
- Technologies used:
- HTML (HyperText Markup
Language): The
basic building block of a webpage. It defines the structure and content.
- CSS (Cascading Style
Sheets): Used
to style the HTML content—like colors, fonts, and layout.
- JavaScript: Adds interactivity to the webpage, such as
animations, pop-up messages, and form validations.
- Back-End Development:
- This is the part of the website that users
don’t see. It involves managing the server, databases, and application
logic.
- Technologies used:
- Server-Side Languages: Such as PHP, Python, and Node.js, which
handle tasks like processing form submissions, interacting with
databases, and managing user sessions.
- Databases: Store
data like user information, product catalogs, and blog posts. Examples
include MySQL, MongoDB, and PostgreSQL.
- APIs (Application
Programming Interfaces): Allow the front-end
and back-end to communicate, enabling features like displaying user
profiles or product lists.
Types of Websites:
- Static Websites:
- Simple websites where the content doesn’t
change frequently (e.g., a personal resume page or a basic company
website).
- Dynamic Websites:
- Websites where the content is generated
dynamically based on user interaction or data from a database (e.g.,
social media platforms, online stores).
2. Role of HTML in Web Development
What is HTML?
- HTML stands for HyperText Markup Language. It
is the standard language used to create web pages. HTML is used to
structure the content on the web page, like headings, paragraphs, links,
and images.
Why is HTML Important?
- Structure: HTML organizes content into a hierarchy using
elements and tags. For example, headings are created with <h1> to
<h6> tags, and paragraphs are created with the <p> tag.
- Semantics: HTML provides meaning to the content. For
instance, <h1> indicates the most important heading, while <p>
indicates a paragraph of text. This helps search engines and screen
readers understand the content better.
- Accessibility: HTML ensures that web content is accessible to
everyone, including people with disabilities. For example, using the
<alt> attribute in the <img> tag provides a text description
for images, which is helpful for visually impaired users.
Basic HTML Structure:
- Every HTML document has a basic structure,
which includes:
- <!DOCTYPE html>: Declares the document
type and version of HTML.
- <html>: The root element that contains
all other elements.
- <head>: Contains meta-information about
the document, like the title and character encoding.
- <title>: Sets the title of the webpage
(displayed in the browser tab).
- <body>: Contains the content that
appears on the webpage, such as text, images, and links.
3. Setting Up a Development Environment
Why Do We Need a Development Environment?
- A development environment is where you write
and test your code. Having a proper setup helps you efficiently create,
edit, and debug your HTML files.
Tools You Need:
1.
Text Editor:
o
A text editor is a tool where you write
your HTML code. It highlights the syntax, making it easier to read and write
code.
o
Recommended Text Editors:
§ Visual Studio Code (VS Code): A free,
powerful, and widely used text editor with many features like syntax
highlighting, extensions, and integrated terminal.
§ Sublime Text: A fast and lightweight text
editor, good for beginners and professionals.
§ Notepad++: A simple text editor with
essential features, ideal for beginners.
2.
Web Browser:
o
A web browser is needed to view and
test your HTML files. It renders the HTML code into a visual webpage.
o
Popular Web Browsers:
§ Google Chrome
§ Mozilla Firefox
§ Microsoft Edge
Creating and Saving Your First HTML File:
- Step-by-Step Guide:
1.
Open your text editor (e.g., Visual Studio Code).
2.
Write the following basic HTML code:
|
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>Welcome to My First Web
Page</h1> <p>This is a simple HTML
document.</p> </body> </html> |
3.
Save the file with a .html extension (e.g., index.html).
4.
Open the file in your web browser (by double-clicking the file or dragging it into an open browser
window).
5.
Observe the output: You should see a webpage with a heading that says "Welcome to
My First Web Page" and a paragraph that says "This is a simple HTML
document."
4. Overview of Web Technologies
Front-End vs. Back-End:
- Front-End (Client-Side):
- This part of web development involves
everything that the user interacts with directly on their browser. The
main technologies are:
- HTML: For structuring
content.
- CSS: For styling content.
- JavaScript: For
making the webpage interactive.
- Back-End (Server-Side):
- This part of web development involves the
server, databases, and application logic that power the website. The main
technologies include:
- Server-Side Languages: Such
as PHP, Python, and Node.js.
- Databases: Like MySQL, MongoDB,
and PostgreSQL.
- APIs: For communication
between the front-end and back-end.
The Full Stack Developer:
- A Full Stack Developer is
someone who is skilled in both front-end and back-end technologies. They
can handle the entire web development process, from designing the user
interface to managing the server and database.
5. Practical Exercise
Objective:
Set up your development environment and create your first HTML file.
Steps:
1.
Install a text editor (if not already installed). Recommended: Visual Studio Code.
2.
Create a new file in your text editor and write the basic HTML code provided
earlier.
3.
Save the file as index.html.
4.
Open the file in a web browser and verify that the webpage displays correctly.
Summary:
- HTML is the foundational language of web
development, responsible for structuring and defining the content on a
webpage.
- Web development involves both front-end and
back-end development, with HTML being a key part of front-end development.
- Setting up a development environment is the
first step in starting your web development journey.
- By completing the practical exercise, you’ve
created your first HTML file and viewed it in a web browser.