Group Project

DFT40163
WEB DESIGN
TECHNOLOGY
PN. SHU HAILA BINTI MOHD
YUSOF
Our Team
KITTEEYA VIRAKUN
10DDT22F2016 BAHWANI A/P PALANISAMY
10DDT22F2O26
APATSARA CHULAKIT KHUESHALL A/L SRI
10DDT22F2018 SHANKAR LINGAM
10DT22F1501
PROJECT PRESENTATION 1
Describes Web development and

technologies:
provide an overview of your web
application and its purpose.
Web development refers to the process of creating websites or web
applications that run on web browsers. It involves several technologies,
languages, and frameworks to build and maintain websites.
Example Web Application:
Name: TaskMaster
Purpose: TaskMaster is a web-based task management application
designed to help individuals and teams organize, track, and prioritize
their tasks and projects effectively. The application provides features
such as task creation, assignment, due date tracking, progress
monitoring, and collaboration tools to streamline project management
and boost productivity.
List and explain the key features of
your web application
1.
User Authentication: Secure user registration and login
system.
Task Management: Create, edit, delete tasks with details
like title, description, due date, and priority.
Task Assignment: Assign tasks to team members and track their
2.
progress.
Collaboration: Share tasks and communicate with team members
through comments and notifications.
Reporting: Generate reports on task completion, team performance,
and project status.
What software tools did you use to develop
your web application, and why did you
choose them? Notepad++ Features:
1. Syntax Highlighting: Notepad++ supports syntax
highlighting for various programming languages,
Notepad++ is a popular code editor that making it easier to read and write code.
many developers use for web development, 2. Code Folding: It allows you to collapse and expand
sections of code, making it easier to navigate
especially when they want a lightweight, fast,
through large files.
and straightforward tool for editing code. 3. Search and Replace: Notepad++ provides powerful
search and replace functionality with support for
regular expressions, making it easier to find and
modify text within your code.
4. Multi-view and Multi-document: You can open multiple files in

different tabs and view them side by side, facilitating
multitasking and comparing code.
5.Extensions and Plugins: Notepad++ supports plugins that
extend its functionality, allowing you to customize the editor
according to your needs.
Why Developers Might
Choose Notepad++
Result 1 Result 2
1. Lightweight: Notepad++ is a
lightweight editor that launches 1. Portability: Notepad++ is available as a
quickly and consumes minimal system portable application, allowing you to run it
resources, making it suitable for both from a USB drive or any other external
storage device without installation.
small and large projects.
2. Free and Open Source: Notepad++ is free to
2. User-friendly Interface: It has a clean
use and open-source, which means
and intuitive interface with
developers can modify and distribute it
customizable themes and settings,
under the terms of the GPL license.
making it easy for developers to focus
on coding.
Accessibility
Features
Websites are designed to provide information, facilitate
communication, and offer services to users. The features and
elements of a website play a crucial role in shaping the overall user
experience (UX) and determining the success of the website.
-Responsive Design
-Navigation Menus
-Search Functionality
-Page Load Speed
-Quality Content
-Visual Design and Layout
-Interactive Elements
-Security Features
-Accessibility Features
Constructs web page using
HTML:
Describe <head>
The <head> section in an HTML document contains meta-

information and other elements that provide essential
information about the web page but are not displayed
directly on the web page itself. The <head> section plays a
crucial role in defining the page's structure, appearance,
behavior, and accessibility.
text formatting
1. Typography:
Font Styles: Choose readable and web-safe fonts that complement the overall design and theme of your website.
Font Size: Optimize font sizes to ensure readability on various devices and screen sizes.
Line Spacing: Proper line spacing (line height) improves readability by preventing text from appearing too cramped or too
spread out.
2. Headings and Subheadings:
Hierarchy: Use a clear and consistent heading hierarchy (H1, H2, H3, etc.) to structure content and guide users through the
information hierarchy. This helps users quickly scan and understand the content.
Style: Customize heading styles with appropriate font sizes, weights, and colors to differentiate them from the body text
3. Text Colors and Contrast:
Color Contrast: Ensure sufficient color contrast between text and background to improve readability, especially for users with
visual impairments. Use tools like color contrast checkers to test and ensure compliance with accessibility standards.
4. Text Alignment and Spacing:
Alignment: Use consistent text alignment (left, center, right, justified) throughout the website to maintain visual harmony and
readability.
Spacing: Use proper spacing between paragraphs, lines, and letters to enhance readability and improve the visual flow of
content.
text attributes
In HTML documents, various text attributes and elements are used to style and format text content to enhance
readability and visual appeal. Below are some commonly used text attributes and elements that can be utilized
in HTML documents to format and style text
1. Text Formatting Elements: and :
Purpose: Bold text
Example: This text is bold or This text is bold and 
:Purpose: Italicize text
Example: This text is italic or This text is italic:
Purpose: Underline text
Example: This text is underlined<s>:
Purpose: Strikethrough text
Example: <s>This text is strikethrough</s>
2. Text Alignment: and <div> with text-align CSS property:
Purpose: Set text alignment
Example: Center-aligned text
3. Font Size and Color: with font-size and color CSS properties:
Purpose: Set font size and color for specific text spans
Example: Large red text
Identifies Cascading Style
Sheets:
CSS
CSS (Cascading Style Sheets) plays a fundamental role in both

website and print layout design by providing a flexible and
powerful way to control the visual appearance and layout of
web pages and printed documents. CSS enables designers and
developers to separate the structure (HTML) from the
presentation (CSS), allowing for more efficient and consistent
styling across different pages and platforms.
Identify the basics
of stylesheets
Basics of Stylesheets:
1. Selectors: CSS selectors are used to target and style specific HTML elements on a
web page.
2. Properties: CSS properties define the style attributes of targeted elements, such
as color, font size, margin, padding, etc.
3. Values: CSS values are assigned to properties to specify the style details, such as
color: blue;, font-size: 16px;, margin-top: 20px;, etc.
4. Declaration Blocks: CSS declarations are grouped together in declaration blocks
{}, which contain one or more property-value pairs separated by semicolons.
Forms of Selectors
Element Selectors:
Syntax: element { property: value; }
Example: p { color: blue; } - Targets all elements and sets their text
color to blue.
1. Class Selectors:
Syntax: .class-name { property: value; }
Example: .highlight { background-color: yellow; } - Targets all elements
with class="highlight" and sets their background color to yellow.
2. ID Selectors:
Syntax: #id-name { property: value; }
Example: #header { font-size: 24px; } - Targets the element with
id="header" and sets its font size to 24 pixels.
apply multiple rules to
a particular element
In CSS, you can apply multiple rules

to a particular element by defining
multiple property-value pairs within
a single declaration block {} for a
specific selector. Each property-
value pair is separated by a
semicolon ;.
Conclusion
CSS (Cascading Style Sheets) can be specified in various ways to style

web pages, providing flexibility and control over the appearance and
layout of web content.
EXAMPLE : Inline Styles,Internal Styles (Embedded Styles),
External Styles (Linked Stylesheets),Embedded Styles (Using <style> Tag)

Group Project

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Group Project

Uploaded by

Copyright:

Available Formats

DFT40163

Describes Web development and

Task Assignment: Assign tasks to team members and track their

4. Multi-view and Multi-document: You can open multiple files in

The <head> section in an HTML document contains meta-

CSS (Cascading Style Sheets) plays a fundamental role in both

In CSS, you can apply multiple rules

CSS (Cascading Style Sheets) can be specified in various ways to style

You might also like