Assignment Of Class 1
Introduction to HTML and Web Development
Assignment 1: Research and Report
Objective:
Understand the role
of different technologies in web development.
Task:
- Research
and write a short report (300-500 words) on the differences between
front-end and back-end development.
- Include
the following:
- A
brief explanation of what front-end and back-end development are.
- The
key technologies used in each.
- Examples
of tasks handled by front-end developers versus back-end developers.
- How
front-end and back-end developers work together to create a complete web
application.
Submission:
Submit your report as
a PDF or Word document.
Answer:
|
Front-End
and Back-End Development: A
Comparative Overview Web development is generally
divided into two major areas: front-end and back-end development. Each plays
a crucial role in creating a functional, user-friendly web application, but
they focus on different aspects of the development process. What is
Front-End Development? Front-end development, also
known as client-side development, is concerned with everything the user
experiences directly in their web browser. This includes the visual aspects
of a website, such as layout, design, and interactivity. Front-end developers
work to ensure that users can interact with a website seamlessly, regardless
of the device or browser they use. Key Technologies in Front-End Development:HTML (HyperText Markup
Language): The backbone of web content, defining the structure of web pages. CSS (Cascading Style Sheets):
Used for styling and designing the HTML structure, including colors, fonts,
and layouts. JavaScript: A scripting
language that adds interactivity to web pages, enabling dynamic content like
sliders, form validations, and animated graphics. Frameworks/Libraries: Popular
tools like React.js, Angular, and Vue.js are used to simplify and streamline
the development process. Examples of Front-End Tasks:
What is
Back-End Development? Back-end development, also
known as server-side development, deals with the server, database, and
application logic that power the front end. While users don’t directly
interact with the back end, it is critical for processing user requests,
handling data, and ensuring that the front end functions as intended. Key Technologies in Back-End Development:Server-Side Languages:
Languages like PHP, Python, Ruby, Java, and Node.js are used to write the
logic that handles requests, processes data, and sends responses. Databases: Tools like MySQL,
MongoDB, and PostgreSQL are used to store and manage data. APIs (Application Programming
Interfaces): These allow the front end to communicate with the back end,
enabling functionalities like user authentication and data retrieval. Frameworks: Frameworks such as
Express.js (for Node.js), Django (for Python), and Laravel (for PHP) provide
tools and libraries to simplify back-end development. Examples of
Back-End Tasks:
Collaboration Between Front-End
and Back-End Developers: To create a complete web
application, front-end and back-end developers must work closely together.
The front end interacts with the user, while the back end processes the data
and ensures that everything functions correctly. For instance, when a user
fills out a form on the front end, the back end validates the data, saves it
to a database, and may return a response indicating success or failure. Effective communication
between the two teams ensures that the final product is both functional and
user-friendly. Often, they will collaborate on defining the structure of the
data, the endpoints for APIs, and the way data is presented to the user. |
Assignment
2:
Setting
Up Your Development Environment
Objective: Set up the necessary tools for web
development.
Task:
- Install
a text editor (e.g., Visual Studio Code, Sublime Text, or Notepad++) on
your computer.
- Install
a web browser if not already installed (e.g., Google Chrome, Mozilla
Firefox).
- Take
a screenshot of your text editor with the basic HTML code written in it
(from the lecture) and another screenshot of the webpage displayed in your
browser.
Submission: Submit the screenshots in a single PDF file or as individual image
files.
Answer:
1. Install a Text Editor:Install a Text Editor To
begin web development, you need a text editor where you can write your
code. Here are some popular options
to choose from: 1. Visual
Studio Code (VS Code): A widely used, free text editor that supports various
programming languages and offers many extensions to enhance your coding
experience. 2.Sublime
Text: Known for its speed and simplicity, Sublime Text is a lightweight
editor with powerful features like syntax highlighting and multiple
selections. 3.Notepad++:
A free and straightforward text editor with features like tabbed editing,
making it a good option for writing code. Download and install one of
these text editors on your computer from their official websites. 2. Install a Web Browser :Install a Web Browser To
view and test your web pages, you need a modern web browser. If you don’t
have one installed, you can download one of the following: 1. Google
Chrome: A popular browser known for its speed and built-in developer tools,
which are useful for debugging and inspecting web pages.
2.Mozilla
Firefox: Another excellent choice for web development, offering strong
support for web standards and development tools. Ensure that the browser is up
to date for the best experience. Write Basic HTML Code After
installing the text editor, open it and write a basic HTML code
snippet. Example : <!DOCTYPE
html> <html
lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My First Webpage</title> </head> <body>
<h1>Welcome to My Webpage</h1>
<p>This is my first HTML page.</p> </body> </html> This code creates a basic
webpage with a heading and a paragraph. Preview the Webpage in Your
Browser Save your HTML file with a .html extension (e.g., index.html). Then,
open this file in your chosen web browser to view the webpage. Take Screenshots Screenshot 1: Capture a
screenshot of the text editor showing the HTML code. Screenshot 2: Capture a
screenshot of the webpage as it appears in your browser. Submission: Submit your screenshots using
one of the following methods: Combine both screenshots into a
single PDF file. Submit the screenshots as
individual image files (e.g., PNG, JPEG). Ensure that both the code in
the text editor and the webpage in the browser are clearly visible in your
screenshots. This will demonstrate that you have successfully set up your
development environment and can create and view basic web pages. |
Assignment
3:
Create
a Simple HTML Document
Objective: Practice writing and saving an HTML file.
Task:
- Create
a new HTML file using the structure learned in class.
- Requirements:
- The
document should include:
- A
title of your choice.
- A
heading (<h1>) that introduces yourself.
- A
paragraph (<p>) describing why you are interested in learning web
development.
- An
image (<img>) of your favorite hobby or interest (use a URL for
the image source).
- A
hyperlink (<a>) to a website that you visit frequently.
- Save
the file as my_first_webpage.html.
- Open
the file in your web browser to ensure it displays correctly.
Submission: Submit the HTML file (my_first_webpage.html).
Answer:
|
Create a new HTML file that
follows the basic structure you’ve learned in class. The goal is to get
hands-on experience with writing HTML and to create a simple webpage. Requirements: Your HTML document should
include the following elements: Title: Add a title to your webpage
that appears in the browser tab. You can choose any title that reflects the
content of your page. Heading (<h1>): Use an <h1> tag to
create a main heading that introduces yourself. For example, “Hello, I’m
[Your Name].” Paragraph (<p>): Write a short paragraph using a
<p> tag. In this paragraph, describe why you are interested in learning
web development. For example, “I’m interested in web development because it
allows me to create interactive and visually appealing websites.” Image (<img>): Include an image that
represents your favorite hobby or interest. Use the <img> tag to insert
the image and provide the image URL in the src attribute. You can also add an
alt attribute to describe the image, which is good practice for accessibility. For example: <img
src="https://example.com/my-hobby.jpg" alt="A picture of my
favorite hobby"> Hyperlink (<a>): Add a hyperlink using the
<a> tag that links to a website you frequently visit. Provide the URL
in the href attribute and include the text that will be displayed as the
link. For example: <a
href="https://www.example.com">Visit my favorite
website</a> Sample HTML
Code: Total
Code: <!DOCTYPE
html> <html
lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My First Webpage</title> </head> <body>
<h1>Hello, I’m [Your Name]</h1>
<p>I’m interested in web development because it allows me to create
interactive and visually appealing websites.</p>
<img src="https://example.com/my-hobby.jpg" alt="A picture
of my favorite hobby">
<p>Check out this website I visit frequently: <a
href="https://www.example.com">Visit my favorite
website</a></p> </body> </html> Saving and Viewing: Save the File: Save the file with the name my_first_webpage.html. Open in Web Browser: Open the saved HTML file in
your web browser to ensure it displays correctly. Check that all elements
(title, heading, paragraph, image, and link) appear as expected. Submission: Submit the
my_first_webpage.html file as your assignment. Ensure the file is correctly
formatted and all the required elements are included. This will demonstrate
your ability to create a basic HTML document and structure content
appropriately. |
Assignment
4:
Identify
HTML Elements
Objective:
Identify and
understand basic HTML elements.
Task:
- Visit
a simple webpage (e.g., your favorite blog, news site, or personal
website).
- Identify
the following HTML elements on the page:
- Headings
(<h1>, <h2>, etc.)
- Paragraphs
(<p>)
- Images
(<img>)
- Hyperlinks
(<a>)
- Write
down the HTML tags you would expect to find in the source code for these
elements.
Submission: Submit a document listing the identified HTML elements with a
brief description of their role on the page.
|
To complete this assignment,
you will visit a simple webpage—such as a favorite blog, news site, or
personal website—and identify the key HTML elements used in its structure.
Specifically, you will look for headings, paragraphs, images, and hyperlinks.
Then, you will describe the role of each element on the page and list the
HTML tags you expect to find in the source code. Identified HTML Elements: Headings (<h1>, <h2>, etc.) Description: Headings are used
to organize content and provide a clear structure to the webpage. They range
from <h1> (the most important heading) to <h6> (the least
important). On most webpages, the <h1> tag is used for the main title
or headline, while <h2>, <h3>, etc., are used for subheadings and
sections within the content. Expected HTML Tags: <h1>: This tag is
typically used for the main title or the name of the website. <h2>: Used for major
section titles or article headings. <h3>, <h4>, etc.:
These are used for subheadings within sections. Paragraphs (<p>): Description: Paragraphs
are used to structure text content on a webpage. The <p> tag wraps
blocks of text into a readable format, making it easier for users to consume
the information presented. Expected HTML Tags: <p>: This tag is used to
wrap and format individual paragraphs of text on the webpage. Images (<img>): Description: Images add
visual content to a webpage, enhancing the user experience and supporting the
textual content. The <img> tag is used to embed images within the HTML
document. It includes attributes like src for the image source URL and alt for
alternative text (used for accessibility). Expected HTML Tags: <img>: This tag is used
to display images on the webpage. For example: <img
src="https://example.com/image.jpg" alt="Description of the
image"> Hyperlinks (<a>): Description: Hyperlinks allow
users to navigate between different pages or sections within a webpage. The
<a> tag is used to create links, with the href attribute specifying the
destination URL. Links can be used to navigate to other pages, external
websites, or different parts of the same page. Expected HTML Tags: <a>: This tag is used to
create hyperlinks. For example: <a
href="https://www.example.com">Visit Example</a> Submission: Submit a document that lists
the identified HTML elements along with a brief description of their roles on
the webpage. The document should include: A description of each element
(headings, paragraphs, images, and hyperlinks). The HTML tags you expect to find
in the source code for each element. This assignment will help you
gain a deeper understanding of how HTML elements are used to structure and
present content on the web. |
Assignment
5:
Quiz
on Web Development Basics
Objective: Test your
understanding of the concepts covered in the lecture.
Task:
- Complete
a short quiz on the following topics:
- The
role of HTML in web development.
- The
difference between front-end and back-end development.
- The
purpose of basic HTML tags (e.g., <html>, <head>,
<title>, <body>).
Quiz
Format: Multiple-choice questions or short answer questions.
Submission: Complete the quiz in class or online, as instructed by your
teacher.
|
Task: You will complete a quiz that
covers the foundational concepts of web development. The quiz is designed to
assess your knowledge of HTML and the roles of front-end and back-end
development. Here’s a breakdown of what you can expect: Quiz Topics: The Role of HTML in Web Development:What to Know: HTML (Hypertext
Markup Language) is the standard language used to create and structure
content on the web. It provides the basic framework for webpages, allowing
developers to define headings, paragraphs, images, links, and other elements
that make up the content of a website. The Difference Between Front-End and Back-End Development:What to Know: Front-End Development: Involves
everything that users see and interact with on a webpage. It includes HTML,
CSS (for styling), and JavaScript (for interactivity). Front-end developers
focus on the user experience and the visual aspects of a website. Back-End Development: Deals
with the server-side of a web application. It involves managing databases,
server logic, and application functionality that users do not see. Back-end
developers work with server-side languages like PHP, Python, Ruby, and
frameworks like Node.js. The Purpose of Basic HTML Tags: What to Know: <html> Tag: The root
element of an HTML document. It wraps all the content of the page. <head> Tag: Contains
meta-information about the document, such as its title and links to
stylesheets. <title> Tag: Sets the
title of the webpage, which appears in the browser tab. <body> Tag: Contains the
actual content of the webpage, such as text, images, and links. Quiz Format: Multiple-Choice Questions: You
may be asked to select the correct answer from a list of options. For
example: What does HTML stand for? Which of the following is a
front-end technology? Short Answer Questions: You may
be required to write brief answers to questions. For example: Explain the difference between
the <head> and <body> tags. Describe the role of a back-end
developer. Submission: In-Class or Online: Depending
on your teacher's instructions, you will either complete the quiz during
class time or online through a specified platform. Make sure to review the key
concepts and tags discussed in the lecture before taking the quiz. This will
help ensure that you are well-prepared to demonstrate your understanding of
web development basics. |