Scribd
Upload
23 views20 pages

CMP331 Detailed Introduction To Web Design

CMP 331 is an introductory course on web design aimed at 300-level students, covering the fundamentals of the internet, web servers, and web technologies including HTML, CSS, and JavaScript. Students will learn to create web pages, incorporate multimedia, and explore advanced technologies like DHTML and XML. The course emphasizes practical skills in web development and design, enhancing user experience through interactivity and multimedia.

Uploaded by

Umar Ahmed Sani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views20 pages

CMP331 Detailed Introduction To Web Design

CMP 331 is an introductory course on web design aimed at 300-level students, covering the fundamentals of the internet, web servers, and web technologies including HTML, CSS, and JavaScript. Students will learn to create web pages, incorporate multimedia, and explore advanced technologies like DHTML and XML. The course emphasizes practical skills in web development and design, enhancing user experience through interactivity and multimedia.

Uploaded by

Umar Ahmed Sani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

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.

You might also like