UNIT-2 (Web Design)
Topic-1: Key Issues in Website Design
Key issues in website design encompass various aspects that can impact user
experience, performance, and overall effectiveness. These issues include:
● Slow Loading Speed: Websites that take a long time to load can lead to high
bounce rates and negatively affect user satisfaction and search engine
rankings.
● Poor Navigation and User Experience (UX): A confusing or illogical
navigation structure makes it difficult for users to find information, leading to
frustration and a poor user experience.
● Lack of Mobile Optimization/Responsiveness: With a significant portion of
internet traffic coming from mobile devices, websites not optimized for
various screen sizes and devices provide a suboptimal experience.
● Browser Compatibility Issues: Websites may not display or function
correctly across different web browsers, leading to inconsistencies and a
broken experience for some users.
● Security Vulnerabilities: Inadequate security measures can leave a website
susceptible to cyberattacks, data breaches, and other threats, compromising
user data and trust.
● Inconsistent Design and Branding: A lack of visual consistency in terms of
colors, fonts, and layout can make a website appear unprofessional and detract
from brand identity.
● Accessibility Issues: Websites that are not designed with accessibility in
mind can exclude users with disabilities, making it difficult or impossible for
them to access content and features.
● Outdated or Irrelevant Content: Content that is not regularly updated or is
irrelevant to the target audience can diminish a website's value and
engagement.
● Broken Links and Functionality: Broken internal or external links, as well
as non-functional features, can lead to a frustrating user experience and
negatively impact SEO.
● Lack of Clear Calls to Action (CTAs): Without clear and strategically
placed CTAs, users may not know what actions to take, hindering conversion
goals.
Topic-2: Introduction to HTML
a) HTML stands for HyperText Markup Language. It is not a programming
language, but a markup language used to create the structure and content of a
webpage.
b) Learning HTML is the first and most critical skill for anyone interested in
making a career in web development or Designing.
❖ Build Websites: It is the fundamental building block of all websites. You
can't build a house without a foundation; similarly, you can't build a website
without HTML.
❖ Launch a Web Development or Design Career: A deep understanding of
HTML is essential for roles such as Front-End Developer, Web Designer,
Full-Stack Developer, and even Email Developer.
❖ To Understand Other Languages: Knowing HTML makes it significantly
easier to learn its companion technologies: CSS (for styling) and JavaScript
(for functionality).
Elements of Basic HTML Structure:
● <!DOCTYPE html> : This declaration defines that the document is an
HTML5 document. It must always be the very first line of your code.
● <html>...</html> : This is the root element of the page. All other elements
are nested inside it.
● <head>...</head> : The <head> section contains meta-information that isn't
displayed directly on the page, like the page title or links to CSS stylesheets.
● <title>...</title> : The <title> tag sets the title of the webpage. This is what
you see in the browser tab and what search engines use as the main title in
search results.
● <body>...</body> : The <body> tag contains all the visible content of your
webpage—headings, paragraphs, images, links, etc.
What is an HTML Element?
An HTML element is a basic building block to create a webpage, and It is created
by a start tag, content, and end tag. In an HTML element, the content is placed
between a start and end tag.
The basic syntax of an HTML element is : <tag_name>content</tag_name>
Example: <h1>It is top-level heading</h1>
Essential HTML Elements Tags:
HTML tags are the fundamental elements of HTML used for defining the structure
of the document.
Various tags that are used in HTML are mentioned below:
● Headings Tag:<h1> to <h6>: HTML provides six levels of headings. <h1>
is the most important (the main title of your content), while <h6> is the least.
● Paragraphs Tag:<p>: The <p> tag defines a paragraph of text. Browsers
automatically add space before and after each paragraph.
● Anchor Tag:<a>: This tag creates a hyperlink. The "href" attribute specifies
the URL to which the link points.
● Comments:<!-- ... -->: You can add comments to your code to leave notes
for yourself or others. The browser ignores comments.
● Line Break Tag: <br>: The <br> tag is used to insert a line break in the text.
It forces the content after it to appear on the next line. This tag is used
whenever you want the text to break into a new line without starting a new
paragraph.
● Center Tag:<center>: The <center> tag, previously used to align content to
the center of a web page, is deprecated in HTML5.
● Listing Tag: The <ul> and <ol> tags create the unordered and ordered
listings, and to display list items, the <li> tag is used.
● Preserve Formatting Tag:<pre>: The <pre> tag is used to preserve the
formatting. Whenever you want to display content on the webpage exactly in
the same format as it was written in the HTML document, you can use the
<pre> tag. It preserves the formatting of source code, including line breaks
and indentation.
● Horizonal Rule Tag:<hr>: The <hr> tag is used to insert a horizontal line
across the page.
HTML Tags Vs. Elements Vs. Attributes
● HTML tags are the keywords that can be used for a specific purpose to
display and format the content on the webpage.
● HTML elements are the basic building blocks that are made with the help of
tags and content. An HTML element is created with a start tag, a content, and
an end tag.
● HTML attributes provide additional information about HTML elements; in
order to define or change their behavior. Attributes are used with an opening
tag.
HTML Example:
<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Topic-3: Introduction to SGML
● SGML stands for Standard generalized markup language.
● It is used for marking up files and has the gain of now no longer depending
on a particular application.
● It is basically derived from GML (Generalized Markup Language), which
allows users to work on standardized formatting styles for electronic
documents.
● SGML is the simplest medium to produce files that can be read by people and
exchanged between machines and applications in a straightforward manner.
● It is easy to understand by humans as well as the machine.
Note:
❖ HTML (HyperText Markup Language) is an application of SGML.
❖ XML (Extensible Markup Language) is a simplified subset of SGML.
Key Features of SGML:
● Meta-language → Used to define other markup languages.
● Separation of structure and presentation → SGML focuses on what the
content is, not how it looks.
● DTD (Document Type Definition) → Defines the grammar (rules) of a
markup language, i.e., what tags are allowed and how they can be nested.
● Extensibility → You can create your own tags and rules for specialized
domains.
● Standardized → Ensures documents are readable across different systems.
Applications of SGML:
● Technical manuals (e.g., aerospace, defense).
● Legal & government documentation.
● Publishing industry (books, journals).
● Basis for HTML and XML, which are widely used today.
Topic-4: Document Type Definition (DTD)
A Document Type Definition (DTD) is a set of rules that defines the structure,
elements, and attributes of an SGML, XML, or HTML document. It acts like a
"blueprint" or grammar for the document, ensuring that the data follows a consistent
and valid structure.
Key Points about DTD:
a)Purpose:
● Defines what elements, attributes, entities, and notations are allowed.
● Ensures that documents are well-formed and valid.
b)Types of DTD:
● Internal DTD: Defined inside the XML/HTML document itself.
● External DTD: Defined in a separate file and linked to the document.
c)Placement:DTD is declared at the top of a document using the <!DOCTYPE>
declaration.
Components/Elements of DTD:
● ELEMENT declaration: Defines structure.
● ATTRIBUTE declaration: Defines attributes allowed in elements.
● ENTITY declaration: Defines reusable entities.
● NOTATION declaration – defines data formats not handled by XML
● PCDATA & CDATA – define text handling inside elements
Topic-5: Attributes of DTD
● Attributes are used to define extra information about XML elements.
● They are declared inside the DTD using the <!ATTLIST> declaration.
Here’s a breakdown of attributes in DTD:
[Link]: <!ATTLIST element-name attribute-name attribute-type attribute-value>
2. Attribute Types:
● CDATA → Character data (string).
● ID → Unique identifier for the element.
● IDREF → Refers to an ID of another element.
● ENTITY → Refers to an external entity.
● NMTOKEN → A valid XML name token (single word).
● Enumeration → Defines a list of acceptable values.
[Link] Value Defaults:
● #REQUIRED → Attribute must be provided.
● #IMPLIED → Optional attribute.
● #FIXED "value" → Attribute always has this fixed value.
● "value" → Default value if not provided.
Topic-6: Outline of a HTML Document
1. <!DOCTYPE html> – Declares the document type (HTML5).
2. <html> – Root element of the HTML page.
3. <head> – Contains metadata (not displayed directly).
● <meta>: character set, viewport settings.
● <title>: page title (appears in browser tab).
● Links to CSS, JavaScript, icons, etc.
4. <body> – Contains all visible content.
● <header> – Top section, often with logo and nav.
● <nav> – Menu/navigation links.
● <main> – Central content of the page.
● <section> – Thematic grouping of content.
● <article> – Independent, self-contained content.
● <aside> – Side notes, ads, extra info.
● <footer> – Bottom section with site info.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<!-- External CSS, JS, meta info go here -->
</head>
<body>
<!-- Visible content goes here -->
<header>
<!-- Website header (logo, navigation, etc.) -->
</header>
<nav>
<!-- Navigation links -->
</nav>
<main>
<!-- Main content of the page -->
<section>
<!-- A section of content -->
</section>
<article>
<!-- Self-contained content like an article or blog post -->
</article>
<aside>
<!-- Sidebar content, ads, related links -->
</aside>
</main>
<footer>
<!-- Footer information (contact, copyright) -->
</footer>
</body>
</html>
Topic-7: Head Section
● HTML head elements define metadata like the title, character set, links to
external stylesheets, and other details.
● This information does not display on the webpage but is helpful for the search
engines and browsers.
● The head elements are placed inside the <head> tag.
The following are the commonly used head elements:
● <title> Element
● <meta> Element
● <base> Element
● <link> Element
● <style> Element
● <script> Element
● prologue
1.<title> Element: The HTML <title> tag is used for specifying the title of the
HTML document. The title must describe the content of the web page, and its format
should be text only. It appears in the title bar of the browser's tab.
2.<meta> Element: The HTML <meta> tag is used to provide metadata about an
HTML document. The metadata is nothing but additional information about the web
page, including page expiry, page author, list of keywords, page description, and so
forth.
3.<base> Element: The HTML <base> tag is used for specifying the base URL for
all relative URLs in a page, which means all the other URLs will be concatenated
into the base URL while locating the given item.
4.<link> Element: In HTML, the <link> tag is used to specify relationships between
the current webpage and another external resource. The source of external resources
is placed inside the “href” attribute. The other attributes of the tag are rel, type, and
media. Its most common use is to embed stylesheets into the HTML document.
5.<style> Element: The HTML <style> tag is used to specify styles either for the
whole HTML document or for a particular element.
6.<script> Element: The HTML <script> tag is used to include either an external
script file or to define an internal script for the HTML document. The script is an
executable code that performs some action.
[Link]: the term "prologue" most commonly refers to the initial, non-visible
declarations and metadata at the very beginning of an HTML document, before the
main content of the webpage.
Topic-8: Body Section
● The HTML body section is the main part of any webpage, representing the
main content area visible to the user.
● It is essential for defining the structure, layout and content displayed in a
browser including text, images, links and tables.
● All the interactive and visual elements of the webpage are placed within the
<body> tag making it a container for the page core content.
Syntax:
<body>
..
..
</body>
The following are the commonly used body elements:
● Headers/Headings
● Paragraph
● Text formatting
● Linking/Links
● Embedding images
● Lists
● Tables
● Frames
● Characters
1. HTML Headings: This defines the hierarchy (levels) and structure of content on
a webpage. They create a visual hierarchy, with the highest-level heading, which is
h1, indicating the most important content or the main heading, and lower-level
headings like h2, h3, h4, etc. for subtopics.
2. HTML Paragraph: HTML paragraphs are block-level elements that are used to
structure and format text content on a webpage. A paragraph is basically a collection
of words and punctuation together. It allows us to organize and present textual
information in a coherent and readable manner. The HTML <p> tag is used to create
a paragraph element.
3. HTML Links: HTML links are words or buttons having a link to another page
that takes the user to that linked page when clicked.
4. Embedding images: HTML images provide visual content for web pages,
enhancing user experiences and conveying information. They can be photographs,
graphics, icons, or illustrations.
5. Lists: Images can also be used as links in HTML, which means by clicking the
images we can navigate to other web pages or resources. HTML images are very
useful in creating websites like photo galleries, portfolios, online stores, and so on.
6. Tables: An HTML table is used to display data in rows and columns, like a
spreadsheet.
7. Frames: Frames is a way to divide a browser window into multiple sections, each
section displaying a separate HTML document.
8. Characters: HTML characters (also called HTML Entities) are special codes
used to display reserved characters, symbols, or characters that cannot be typed
directly on the keyboard.
Topic-9: Introduction to XHTML
i)XHTML stands for Extensible HyperText Markup Language.
ii)It is a web coding language that combines the flexibility of HTML with the
strictness of XML.
● HTML (HyperText Markup Language) → designed for displaying web
pages.
● XML (Extensible Markup Language) → designed for storing and
transporting data with strict rules.
iii)XHTML was created to make web pages more consistent, cleaner, and easily
readable by different devices (like browsers, mobile phones, screen readers, etc.).
Key Features of XHTML
[Link] on XML: follows stricter rules than HTML.
[Link]-formed code required: all tags must be properly nested and closed.
[Link] sensitivity: all tags must be written in lowercase.
[Link] rules:
● Attribute values must be enclosed in quotes.
● All attributes must be explicitly defined.
[Link] type declaration: (<!DOCTYPE>) is mandatory.
Example of XHTML Code:
Why XHTML is Important?
● Provides clean and consistent code.
● Ensures better compatibility across browsers and devices.
● It was a major step in transitioning the web towards modern HTML5.
Topic-10: Introduction to XML
● XML stands for “Extensible Markup Language”.
● It is a markup language like HTML, but it is designed to store and transport
data, not to display it.
● XML focuses on what data is (structure & meaning), while HTML focuses on
how data looks (presentation).
Key Features of XML:
● Extensible: You can create your own tags (unlike HTML where tags are
predefined).
● Structured & Hierarchical: Data is stored in a tree-like structure.
● Self-descriptive: Tags describe the data.
● Platform-independent: Works across systems and applications.
● Supports Data Sharing: Often used in web services, APIs, configuration
files, etc.
Basic Syntax Rules:
● XML documents must have a root element (one single parent).
● Tags must be properly nested.
● All tags must be closed.
● XML is case-sensitive.
● Attribute values must be in quotes.
Applications of XML:
● Web Development: Data exchange between server and client.
● Configuration Files: e.g., [Link] in .NET, [Link] in Maven.
● APIs and Web Services: SOAP uses XML.
● Document Formats: Microsoft Office (DOCX, XLSX, PPTX) internally use
XML.
● Data Storage & Transport: Light weight and structured way to store info.
Example of an XML Document:
Topic-11: Structuring Data
An XML document consists of:
Key Rules for Structuring Data in XML:
• One root element (e.g., <library>).
• Case-sensitive ( <Book> ≠ <book> ).
• Proper nesting (no overlapping tags).
• Attributes vs. Elements:
• Use elements for main data.
• Use attributes for metadata.
Example:
Topic-12: XML Schema Document
• An XML Schema Document (XSD) defines the structure and rules of an XML
document.
• It is written in XML itself.
• It specifies elements, attributes, data types, and relationships.
• It helps ensure that XML documents are valid (not just well-formed).
Think of it as a blueprint for XML files.
Why Use XML Schema (XSD)?
• Defines the allowed elements and attributes.
• Specifies data types (string, integer, date, boolean, etc.).
• Enforces constraints (min/max length, required/optional elements, value
ranges).
• Supports namespaces for combining multiple vocabularies.
• More powerful and expressive than DTD (Document Type Definition).
Key Components of XSD:
• Simple Types: string, integer, date, boolean, etc.
• Complex Types: elements containing child elements or attributes.
• Attributes: additional information for elements.
• Restrictions: min/max values, length, patterns.
• Namespaces: for modular and reusable schemas.
Summary:
• XSD = Rules for XML documents.
• Defines structure, types, and constraints.
• Ensures XML validity.
Topic-13: Document Object Model
The Document Object Model (DOM) is a programming interface for web
documents. It represents the structure of an HTML or XML document as a tree of
objects.
• Each element (like <p>, <div>, <img>, etc.) is treated as a node in this tree.
• The DOM allows programming languages (mainly JavaScript) to access,
modify, add, or delete content, structure, and style dynamically.
Importance of Document Object Model:
• It connects web pages (HTML, CSS, XML) with programming languages
(JavaScript, Python, etc.).
• Enables Dynamic Web Pages: Websites are not static; they change based on
user interaction (e.g., updating a shopping cart, loading comments without
refreshing).
• Used in AJAX, Single Page Applications (SPA), and modern frameworks like
React, Angular, Vue.
DOM Structure:
Think of a web page as a tree structure:
• Document: The root of the DOM.
• Element Nodes: <html>, <body>, <p> etc.
• Text Nodes: The actual text inside elements.
• Attributes: Properties like id, class, src.
Advantages:
• Platform and language independent.
• Allows interactive, dynamic, and responsive web applications.
• Supports real-time content updates without page reload.
The DOM is the backbone of web interactivity. It bridges the gap between static web
content (HTML/XML) and dynamic scripts (JavaScript), making the modern
internet interactive.
Topic-14: Security and Management Issues for creating a website
When creating a website, you need to think about security (protecting data, users,
and the site itself) and management (ensuring smooth operations, updates, and
scalability). Here’s a breakdown:
Security Issues
[Link] Protection & Privacy
• Use HTTPS (SSL/TLS) to encrypt traffic.
• Follow data protection laws (GDPR, HIPAA, etc.).
• Store sensitive data (like passwords) securely (hash + salt).
[Link] & Authorization
• Strong password policies.
• Two-Factor Authentication (2FA).
• Role-based access control for admins and users.
[Link] Application Vulnerabilities
• Prevent SQL Injection (use parameterized queries).
• Protect against Cross-Site Scripting (XSS) and Cross-Site Request Forgery
(CSRF).
• Validate all user input to stop malicious uploads or commands.
[Link] & Hosting Security
• Keep software, plugins, and CMS updated.
• Regular security patches.
• Firewalls, intrusion detection, and DDoS protection.
[Link] & Recovery
• Automated backups of files and databases.
• Disaster recovery plan in case of hacking or crashes.
[Link] Safety
• Protect against phishing links on your platform.
• Secure payment gateways (PCI DSS compliance).
Management Issues
[Link] Management
• Use a reliable CMS (WordPress, Drupal, Joomla, or custom).
• Version control for code and content.
[Link] & Scalability
• Optimize site speed (CDN, caching, image compression).
• Plan for scaling as traffic grows (cloud hosting, load balancing).
[Link] Management
• Define user roles (admin, editor, customer, etc.).
• Track activity logs for accountability.
[Link]
• Regular updates (security patches, bug fixes).
• Monitoring uptime and performance.
[Link] & Compliance
• Cookie and privacy policies.
• Accessibility standards (WCAG compliance).
• Proper terms of service and disclaimers.
[Link] & Resource Management
• Budget for hosting, domains, security certificates, and development.
• Assign responsibilities (developer, admin, content team).