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:
1. Static Websites:
- Simple
websites where the content doesn’t change frequently (e.g., a personal
resume page or a basic company website).
2.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:
1. <!DOCTYPE html>: Declares the document type and version of
HTML.
2. <html>: The root element that contains all other elements.
3. <head>: Contains meta-information about the document, like
the title and character encoding.
4. <title>: Sets the title of the webpage (displayed in the
browser tab).
5. <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:
·
A text editor is a tool where you write your HTML code. It
highlights the syntax, making it easier to read and write code.
·
Recommended Text Editors:
1. Visual Studio Code (VS
Code): A
free, powerful, and widely used text editor with many features like syntax
highlighting, extensions, and integrated terminal.
2. Sublime Text: A fast and
lightweight text editor, good for beginners and professionals.
3. Notepad++: A simple text
editor with essential features, ideal for beginners.
2. Web Browser:
·
A web browser is needed to view and test your HTML files. It
renders the HTML code into a visual webpage.
·
Popular Web Browsers:
1. Google
Chrome
2. Mozilla
Firefox
3. 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:
1. HTML is the foundational language of
web development, responsible for structuring and defining the content on a
webpage.
2. Web development involves both
front-end and back-end development, with HTML being a key part of front-end
development.
3. Setting up a development environment
is the first step in starting your web development journey.
4. By completing the practical exercise, you’ve created your first HTML file and viewed it in a web browser.