Continuation of notes…..
Web programming refers to the writing, markup and coding involved in Web development,
which includes Web content, Web client and server scripting and network security.
Web authoring is the practice of creating web documents using modern web authoring
software and tools.
Web Server: A web server is used to host an e-commerce website. All the Html, JavaScript,
PHP files, databases, media files that make up the entire website are stored on this server.
Web authoring tools is used to create the front end of an e-commerce website. They range from
basic HTML text editors (like Notepad++) to more complex graphic authoring tools and CMS
(content management system) with built-in frameworks and debugging tools.
List of website authoring tools include - Word Processors, HTML Editors, Plain Text Editors,
Photoshop, Dreamweaver, Firefox developer. Word processors like Microsoft Word,
WordPerfect or OpenOffice Writer are some of the most popular web authoring tools available.
When teaching web design using HTML, it's important to cover foundational topics that give
learners the knowledge and skills to create well-structured, functional, and aesthetically pleasing
websites. Here are the key points to focus on:
Case Study:
You are asked by a women SACCO to prepare their website. What information do you need
from your client? How you will help them share the details with you?
To build a website for a women's SACCO (Savings and Credit Cooperative Organization), it
is essential to gather specific information from the client to ensure the website meets their goals,
aligns with their branding, and serves their members effectively. Here’s a breakdown of the
information I would need and how I can help them share the details efficiently:
1. Organization Overview
Objective: Understand the SACCO’s mission, vision, and core values.
Details Required:
o Mission and vision statements.
o Goals of the SACCO.
o History or background of the organization.
o Key services offered (e.g., loans, savings plans, investment options).
o Member eligibility criteria.
o Contact details and location(s).
options
o Provide a questionnaire or a document template for them to fill out basic organizational
details.
1
o Offer to conduct a brief interview with key personnel for clarification and deeper
insights.
2. Target Audience
Objective: Understand the primary audience the website will serve.
Details Required:
o Who are the SACCO's members? (e.g., women from a particular region, age group,
profession).
o What challenges do these members face, and how does the SACCO help solve them?
o What content or services will members be looking for on the website?
o Discuss and map out user personas and possible journeys for different types of users
(e.g., existing members vs. potential new members).
3. Website Goals and Features
Objective: Define the purpose of the website and the features needed.
Details Required:
o What are the key objectives of the website (e.g., provide information, enable online
membership sign-up, allow online loan applications)?
o Do they need an online portal for members to log in and view their accounts?
o Any plans for a blog or news section to communicate updates?
o Integration of forms (e.g., loan applications, membership applications).
o Should there be a payment integration for fees or deposits?
options
o Offer a checklist or features guide to help them understand the potential website
functionalities.
o Suggest examples of similar SACCO websites or other financial websites for
inspiration.
4. Branding and Design Preferences
Objective: Align the website design with the SACCO’s brand identity.
Details Required:
o Logo (in high resolution).
o Preferred color schemes.
o Fonts, if they have specific branding guidelines.
o Photography or visual elements to be used (e.g., images of members, activities, or
products).
o Tone and style of communication (formal, casual, women-focused, empowering).
options
o Provide visual examples of different website designs.
o Send a branding worksheet to gather preferences regarding colors, style, and tone.
o If they don't have
1. HTML Basics and Structure
2
Document Structure: Introduce the basic structure of an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
HTML Tags: Teach the use of essential tags such as:
o <html>, <head>, <title>, <body>
o Basic text formatting tags like <h1>, <p>, <strong>, and <em>.
Attributes: Explain how to use attributes to modify HTML tags (e.g., class, id, src, href,
etc.).
2. Text and Typography
Headings: Usage of <h1> through <h6> for content hierarchy.
Paragraphs and Line Breaks: Using <p> for paragraphs and <br> for line breaks.
Text Formatting: Tags like <strong>, <em>, <u>, and <small> to format text.
Lists:
o Ordered lists: <ol>
o Unordered lists: <ul>
o Definition lists: <dl>, <dt>, <dd>
3. Links and Navigation
Hyperlinks: Using the <a> tag to create links to other pages, sections within the page, or
external websites.
Navigation Menus: Use of <nav> for grouping navigation links and explain how to create
horizontal/vertical navigation bars.
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
</ul>
</nav>
4. Images and Media
Adding Images: Using the <img> tag and its key attributes (src, alt, width, height).
<img src="[Link]" alt="Description of the image" />
Audio and Video: Basic usage of the <audio> and <video> tags.
5. Forms and Input
Form Elements: Teach how to create forms with:
3
o <form>, <input>, <textarea>, <button>, <select>, <option>.
o Form attributes like method, action, placeholder, and required.
<form action="[Link]" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your
name" required />
<input type="submit" value="Submit">
</form>
6. Tables
Creating tables with:
o <table>, <tr> (table row), <th> (table header), <td> (table data), and <caption>.
o Attributes like colspan and rowspan for merging cells.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>
7. Semantic HTML
Importance of semantic HTML for better accessibility and SEO.
Use of semantic elements:
o <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>,
<figure>, <figcaption>.
Explain the difference between block-level and inline elements.
8. Layout and Containers
Div and Spans: Explain how <div> and <span> are used as containers to structure content.
o <div>: For block-level container.
o <span>: For inline container.
CSS Integration: Show how containers are styled using classes and IDs for layouts.
<div class="container">
<h1>Title</h1>
<p>Paragraph inside a container.</p>
</div>
9. Accessibility
Emphasize accessibility through:
o Alt Text: Ensuring all images have descriptive alt text.
o Labels: Using <label> for form inputs.
4
o Aria attributes: Introduce the concept of ARIA for more advanced accessibility
needs.
10. CSS Basics (For Styling)
CSS Syntax: Briefly explain how CSS can be used to style HTML elements.
o Inline CSS: Using the style attribute in HTML tags.
o Internal CSS: Within the <style> tag in the <head>.
o External CSS: Linking to an external stylesheet.
Basic CSS Properties:
o Color, background, margin, padding, width, height, font styling, etc.
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
}
</style>
11. Responsive Design
Meta Viewport Tag: Explain the importance of the viewport meta tag for responsiveness.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Flexbox and Grid Layouts: Brief introduction to modern layout techniques with Flexbox and
CSS Grid for responsive web design.
12. Basic SEO (Search Engine Optimization)
Meta Tags: Introduction to <meta> tags for search engine optimization.
o <meta name="description" content="Description of the
webpage">
o Proper use of headings, titles, and alt text to improve SEO ranking.
13. Best Practices
Indentation and Clean Code: Importance of writing clean, readable, and well-indented code.
Comments: Using comments in HTML (<!-- comment -->) for code organization and
clarity.
14. Basic Debugging and Validation
HTML Validation: Show how to validate HTML using tools like the W3C Markup Validation
Service to ensure clean, error-free code.
Browser Developer Tools: Introduce browser dev tools for debugging HTML structure and
layout.
A marquee is an HTML element that allows text or images to scroll across a webpage. It was commonly
used in early web design to create scrolling, bouncing, or sliding content, but it has since been deprecated
in modern web standards. The <marquee> tag is still supported by some browsers, but it's not
5
recommended because it is outdated and not part of the official HTML5 specification. Instead, you should
use CSS animations to achieve similar effects.
Syntax of the <marquee> Element
The basic syntax of a marquee is as follows:
<marquee>Scrolling text or content goes here.</marquee>
Common Attributes of <marquee>
direction: Controls the direction in which the content moves.
o Values: left (default), right, up, down
o Example:
<marquee direction="right">Scrolling to the right</marquee>
behavior: Defines the type of movement.
Values: scroll (default, moves continuously), slide (moves in, then stops), alternate
(bounces back and forth)
<marquee behavior="alternate">Bouncing text</marquee>
scrollamount: Controls the speed of scrolling (higher number means faster scrolling).
<marquee scrollamount="10">Scrolling fast</marquee>
scrolldelay: Defines the delay between each scroll movement in milliseconds.
<marquee scrolldelay="100">Slow scrolling</marquee>
loop: Specifies the number of times the marquee will scroll (the default is infinite).
<marquee loop="3">This will scroll 3 times</marquee>
bgcolor: Adds a background color to the marquee area.
<marquee bgcolor="yellow">Scrolling with background
color</marquee>
Example of a Basic Marquee:
<marquee behavior="scroll" direction="left" scrollamount="5">
This is scrolling text from left to right.
</marquee>
Why the <marquee> Element is Deprecated
The <marquee> tag is considered outdated for several reasons:
1. Not Accessible: It can negatively impact accessibility, as the constant movement can be
distracting to users with visual or cognitive impairments.
2. Poor User Experience: Scrolling or bouncing text can be annoying for users, especially if it's
overused.
3. Deprecated in HTML5: Modern web standards no longer include the marquee element, and it's
not supported in some modern browsers.
6
7