- HTML Elements, Tags, and Basic Structure of an E-Commerce Website
Every E-Commerce website consists of structured content, including product listings, user accounts, shopping carts, and payment options.
Example: Structure of an E-Commerce Website
• Homepage: Contains banners, featured products, and navigation menus.
• Product Pages: Displays product descriptions, prices, and customer reviews.
• Cart Page: Shows selected items before checkout.
• Checkout Page: Allows users to enter shipping and payment details.
• Contact Page: Provides customer support and inquiry options.
For example, an Amazon product page has:
• A heading with the product name.
• Paragraphs describing the product.
• Images showing product views.
• Buttons for “Add to Cart” and “Buy Now.”
2. Basic and Advanced Text Formatting in E-Commerce
Text formatting enhances readability and user experience.
Example: Text Formatting on an E-Commerce Website
• Bold (<b>) → Used for important information like “Limited Stock!”
• Italic (<i>) → Used for styling, e.g., “Best-selling product of 2024.”
• Underlined (<u>) → Used for hyperlinks like “View our return policy.”
• Highlighted (<mark>) → “50% OFF!” to grab attention.
• Superscript (<sup>) → “Price: $19.99*” with a note for terms.
3. Multimedia Components in E-Commerce
Multimedia elements make online shopping engaging.
Example: Multimedia on an E-Commerce Website
• Product Images: Show multiple views of a product (e.g., shoes from different angles).
• Videos: Demonstrate product use, such as a Nike shoe demo video.
• Audio Descriptions: Helpful for visually impaired users (e.g., spoken product descriptions).
On a Flipkart product page, users can see:
• High-resolution images of a mobile phone.
• A video review explaining the features.
4. Designing a Webpage for E-Commerce
A well-designed webpage enhances user experience and sales.
Example: Layout of an E-Commerce Website
• Header: Company logo, search bar, and login/signup buttons.
• Navigation Menu: Categories like “Electronics,” “Clothing,” “Home & Kitchen.”
• Main Section: Featured products, bestsellers, and discounts.
• Sidebar: Filters like price range, brand, and customer ratings.
• Footer: Links to policies, contact information, and social media.
A website like Myntra ensures a clean and structured layout for easy shopping.
5. Lists in E-Commerce
Lists help organise products, features, and benefits.
Example: Lists on an E-Commerce Website
• Unordered Lists (<ul>) for displaying product features:
• Water-resistant
• 5-year warranty
• Fast charging
• Ordered Lists (<ol>) for purchase steps:
1. Select the product.
2. Add to cart.
3. Enter shipping details.
4. Make payment.
5. Receive order confirmation.
A Samsung product page may show:
• A bullet list of camera specifications.
• A numbered list of how to set up the phone.
6. Tables in E-Commerce
Tables compare product specifications.
Example: Tables on an E-Commerce Website
A website like Amazon provides such tables to help customers compare options easily.
7. Hyperlinks in E-Commerce
Hyperlinks allow users to navigate between pages.
Example: Hyperlinks on an E-Commerce Website
• Product Links: Clicking on a product image or title takes users to the product page.
• Category Links: “Shop by Brand” → Clicking “Nike” shows all Nike products.
• Footer Links: “Return Policy,” “FAQ,” “Customer Support.”
On a Flipkart homepage, clicking “Mobiles” leads to a list of smartphones available.
8. Working with Frames in E-Commerce
Frames help display multiple sections on the same page.
Example: Frames on an E-Commerce Website
• Left Frame: Product categories (Electronics, Clothing, Accessories).
• Right Frame: Product listings based on category selection.
• Bottom Frame: Customer reviews and FAQs.
While frames are not widely used today, an Iframe may be used for live chat support embedded on the website.
9. Forms and Controls in E-Commerce
Forms allow customers to enter details for orders and payments.
Example: Forms on an E-Commerce Website
• Signup Form: Name, email, password.
• Search Box: Users enter product names to find items.
• Checkout Form: Shipping address, payment method, promo codes.
• Feedback Form: Customers leave reviews and ratings.
On an Amazon checkout page, a form collects:
• Billing address
• Payment details (Credit/Debit Card, UPI, PayPal)
• Order notes
