CMP 331: Introduction to Web Design
• Overview, Tools, and Techniques
• Presenter by: [Umar Ahmed Sani]
• Date: [12/12/2024]
Course Overview
• Course Description:
• - Introduction to the internet and web servers
• - Authoring tools and HTML basics
• - Multimedia, interactivity, and advanced web
technologies
• - Credit Units: 2
• - Target Audience: 300-level students
Learning Objectives
• By the end of this course, students will be able to:
• - Understand the fundamentals of the web
environment and technologies.
• - Create web pages using HTML, CSS, and
JavaScript.
• - Incorporate multimedia and interactivity into
web designs.
• - Explore advanced technologies like DHTML,
XML, and WML for web development.
Introduction to the Internet
• - The Internet is a global network connecting millions
of private, public, academic, business, and
government networks.
• - It enables the sharing of information and
communication via websites, email, and other
protocols.
• - Key Features:
• - Interconnectivity
• - Scalability
• - Accessibility
Web Servers
• - A web server is software/hardware that stores,
processes, and delivers web pages to users.
• - Common web servers:
• - Apache: Open-source and widely used.
• - Nginx: Known for high performance and
scalability.
• - Role of Web Servers:
• - Host web content.
• - Manage HTTP requests and responses.
Understanding the Web Environment
• - The web environment is the platform for
developing and accessing websites.
• - It includes:
• - Browsers (e.g., Chrome, Safari)
• - Web Servers (e.g., Apache)
• - Development Tools (e.g., VS Code)
• - Protocols like HTTP and HTTPS enable
communication between clients and servers.
Introduction to HTML
• - HTML stands for HyperText Markup Language.
• - It is the standard language used to create and structure web pages.
• - Example:
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• <h1>Welcome!</h1>
• </body>
• </html>
HTML Tags and Elements
• - Tags are the building blocks of HTML, used to
define elements.
• - Common Tags:
• - <html>: Defines the document as an HTML
file.
• - <head>: Contains metadata and links to
resources.
• - <body>: Contains the visible content.
• - <p>: Defines paragraphs.
Formatting Text in HTML
• - Formatting tags are used to style text:
• - <b>: Bold text
• - <i>: Italic text
• - <u>: Underlined text
• - Example:
• <p>This is <b>bold</b>, <i>italic</i>, and
<u>underlined</u> text.</p>
Creating Links in HTML
• - Links are created using the <a> tag.
• - Attributes:
• - href: Specifies the URL.
• - target: Specifies where to open the link.
• - Example:
• <a href="https://example.com"
target="_blank">Visit Example</a>
Adding Images to Web Pages
• - Images are added using the <img> tag.
• - Common Attributes:
• - src: Specifies the image file location.
• - alt: Provides alternative text.
• - Example:
• <img src="image.jpg" alt="Sample Image"
width="300" height="200">
Tables in HTML
• - Tables are used to display data in a tabular format.
• - Tags:
• - <table>: Defines the table.
• - <tr>: Defines table rows.
• - <td>: Defines table cells.
• - <th>: Defines table headers.
• - Example:
• <table>
• <tr>
• <th>Name</th>
• <th>Age</th>
• </tr>
• <tr>
• <td>John</td>
• <td>30</td>
• </tr>
• </table>
Forms in HTML
• - Forms collect user input.
• - Elements:
• - <form>: Defines the form.
• - <input>: Defines input fields.
• - <button>: Defines a clickable button.
• - <select> and <option>: Create dropdown menus.
• - Example:
• <form>
• <label for="name">Name:</label>
• <input type="text" id="name" name="name">
• <button type="submit">Submit</button>
• </form>
Introduction to CSS
• - CSS stands for Cascading Style Sheets.
• - It is used to style and layout web pages.
• - Types of CSS:
• - Inline: Directly within an HTML tag.
• - Internal: Inside a <style> tag in the <head>.
• - External: Linked CSS file.
• - Example:
• body {
• background-color: lightblue;
• }
Multimedia in Web Design
• - Multimedia includes images, videos, and audio
files.
• - Tags:
• - <audio>: Embeds audio content.
• - <video>: Embeds video content.
• - Example:
• <audio controls>
• <source src="audio.mp3" type="audio/mpeg">
• </audio>
Introduction to JavaScript
• - JavaScript is a programming language used to
add interactivity to web pages.
• - It can manipulate HTML and CSS dynamically.
• - Example:
• <script>
• document.getElementById('demo').innerHTML
= 'Hello, World!';
• </script>
Dynamic HTML (DHTML)
• - Combines HTML, CSS, and JavaScript to
create dynamic content.
• - Example: Dropdown menus, animations, and
more interactive web pages.
Introduction to XML
• - XML stands for Extensible Markup Language.
• - It is used to structure and store data.
• - Example:
• <note>
• <to>Tove</to>
• <from>Jani</from>
• </note>
Wireless Application Protocol (WAP)
• - WAP enables mobile devices to access web
content.
• - WML (Wireless Markup Language) is used to
design WAP pages.
Conclusion
• - Web design requires mastering HTML, CSS,
and JavaScript.
• - Incorporating multimedia enhances user
experience.
• - Explore advanced topics like XML and DHTML
for robust designs.
