Web Design Fundamentals HNDIT1022

Module Information

• Module Code: HNDIT1022
• Module Title: Web Design
• Credit: 4
• GPA/NGPA: GPA (Compulsory)
• Semester: 1 (15 Weeks)
• Lectures per week: 02
• Lab/Tutorial per week: 04
• Student Activities per week: 07
• Notional hours: 13

Module Aims

• Focuses on web fundamentals
• Develop websites using HTML, CSS, and JavaScript
• Covers current web design theory and practice

Learning Outcomes

• Design, develop, and deploy simple websites using HTML, CSS, and JavaScript
• Design and develop interactive, visually appealing client-side programs
• Describe HTML5 and web design tools

Outline of Details Syllabus

• Introduction to web design
• Understanding HTML and XHTML
• Define and plan information hierarchy
• Understanding Cascading Style Sheet
• Understanding CSS Box Model and Positioning
• Understanding dynamic web sites and introduction to photoshop
• Understanding JavaScript programming
• Working with web-based forms
• Introduction to Dream viewer
• Introduction to web servers and hosting

Assessment

• Continuous Assessment: Online quizzes, Labs, Individual Assignments, Group Assignments, Tutorials (40%)
• End of Semester Examination: Structured question paper (60%)

Prescribed Textbook and Resources

• Sam's Teach Yourself HTML, CSS, and JavaScript All in One
• Internet & World Wide Web, How to Program (5th edition)
• Dietel & Dietel
• Online materials: https://www.w3schools.com/
• https://www.tutorialspoint.com/index.htm

Week 1 Introduction to Web Design

• Subtopics:
  • History of HTML and WWW
  • Web browser compatibility
  • Selecting a web hosting provider
  • Transferring files to web server using FTP
  • Distributing web content and web publishing

Internet vs. WWW

• Internet: Vast global network of computers
• WWW: Collection of software on the Internet, connecting hypertext documents

History of World Wide Web

• Tim Berners-Lee invented the WWW at CERN in 1989
• Developed the first web server, browser, and HTML (Hypertext Markup Language)
• Released HTML and browser source code publicly in 1993

When was the first webpage created?

• Went live on August 6, 1991
• Used for sharing documents via FTP

Content

• HTML derived from SGML
• SGML is a markup language and uses DTD (Document Type Definition)

What is World Wide Web?

• Network of information resources
• Relies on three mechanisms for widest audience reach:
  • Uniform naming scheme (e.g., URIs)
  • Protocols (e.g., HTTP)
  • Hypertext (e.g., HTML)

URL

• Uniform Resource Locator
• Addresses resources on the web
• Typically consists of three parts: Protocol, Domain, and Path

Basic URL structure

• Protocol: https://
• Domain: whatis.techtarget.com
• Path: /glossaries

HTTP (HyperText Transfer Protocol)

• Set of rules for transferring multimedia files on the web
• Coordinated by W3C and IETF

HTTPS (Secure HTTP)

• Used for secure data transfer, like credit card information

Web Server-Client Diagram

• Web server receives HTTP requests
• Sends HTTP responses to client browsers in a request-response cycle

W3C (World Wide Web Consortium)

• Maintains global HTML standards, with W3C and WHATWG groups.

Webpage

• Document used in the World Wide Web
• Accessible via browsers
• Typically in HTML or XHTML format
• Uses additional resources (e.g., style sheets, images)

Website

• Collection of related webpages containing media and digital assets
• Hosted on a web server
• Accessible via a network and has a Unique Uniform Resource Locator (URL).

Web Server

• Software on a server that handles HTTP requests
• Manages access to files, folders, and resources

Web Browsers

• Software application that retrieves, presents, and navigates web resources.
• Major browsers: Internet Explorer, Firefox, Google Chrome, Apple Safari, Opera

Versions of HTML

• Chronological history of HTML versions and specifications

Browser Compatibility

• Websites must work correctly across various browsers
• Crucial for broader audience reach

Why Browser Compatibility is important

• Important for e-commerce success
• Incompatibility limits audience and traffic
• Should be considered early in development

How Browser Compatibility Works

• Different browsers may interpret HTML differently
• Modern browsers decode newer HTML better

What is web hosting?

• Provides space on a server for websites
• Different types: shared, VPS, dedicated, cloud, WordPress, managed, reseller

How to select a web hosting provider

• Careful consideration needed for appropriate site hosting company & plan
• Important to consider all necessary features

Determining the appropriate hosting service

• Knowledge of Website needs
• Confirmation of Subscription period for hosting contracts
• Checking for server reliability and uptime
• Confirmation of the host's refund policy and guarantees and understanding upgrade options.
• Verification of host's features

Hosting Services

• Web hosting options should provide choice and flexibility for website resources

Examples of Web hosting providers

• Dreamhost
• Bluehost
• Hostgator
• Network Solutions
• IONOS by 1&1
• Hostinger

FTP (File Transfer Protocol)

• Network protocol for transferring files
• Enables expansive file transfers across IP networks
• Alternative mechanisms (email, HTTP) lack FTP's control and precision.

How FTP works:

• Client-server protocol with two communication channels
• One computer acts as a server, other is a client.
• FTP server listens on port 21 for client connections
• Clients can upload, download, delete, rename, move, and copy files on server

How to transfer files to web server using FTP

• Determine how you want to connect
• Use a visual client (e.g., FileZilla, Cyberduck).

Content Distribution in websites

• Method of promoting content
• Happens across channels.

Why it is Important to Distribute your content?

• Crucial part of any digital marketing strategy
• Drives more traffic and increased social media reach.

How is content Distributed?

• Can be shared via different channels like blogs/social media/emails/e-books etc..

Content Distribution Practices Tactics

• Leverage influencers
• Use Social Media
• Convert content into different media formats
• Promote on content communities

Content Types to add to Website

• Blog posts
• Videos
• Infographics
• Case Studies
• eBooks
• Webinars
• Podcasts

Web Publishing

• Process of publishing original content on the internet
• Includes building, uploading, updating, and posting to websites.

Options to Publish Website

• Getting hosting and a domain name
• Online Tools: GitHub, Google App Engine
• Web-based IDEs (e.g., CodePen)

This quiz tests your knowledge on the fundamentals of web design as covered in module HNDIT1022. You'll explore key concepts including HTML, CSS, and JavaScript, as well as practical applications of web design tools. Prepare to demonstrate your understanding of designing and developing interactive web pages.