Web Design Fundamentals HNDIT1022

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What are the three main parts of a URL?

Path, Server, File Size

Protocol, File Type, Host

Domain, Resource, Extension

Protocol, Domain, Path (correct)

Which statement best describes HTTP?

A secure way to transfer files over the web.

The set of rules for transferring multimedia files on the Web. (correct)

A complex communication protocol for web services.

A standard protocol maintained solely by the IETF.

What does HTTPS ensure when transferring data?

A standard document format for all resources.

Fast data transfer speeds.

Encrypted data for secure transmission. (correct)

Compatibility across all browsers.

What organization is primarily responsible for maintaining web standards like HTML?

World Wide Web Consortium Signup and view all the answers

Which of the following is NOT a characteristic of a web page?

Can only be accessed on desktop computers. Signup and view all the answers

Which of the following is NOT mentioned as a method to distribute content?

Mass emailing to customers Signup and view all the answers

What type of content is considered effective for boosting website traffic?

Video content Signup and view all the answers

Which of the following is a requirement for web publishing?

A web server Signup and view all the answers

Which option is NOT listed as an example of content types to add to a website?

Online reviews Signup and view all the answers

What is one method to publish a website mentioned in the content?

Getting hosting and a domain name Signup and view all the answers

What is the primary focus of the HNDIT1022 module?

Fundamentals of web development using HTML, CSS, and JavaScript Signup and view all the answers

Which of the following programming languages is NOT a focus of the HNDIT1022 module?

PHP Signup and view all the answers

What percentage of the assessment is allocated to the continuous assessment component?

40% Signup and view all the answers

Which tool is introduced for web design in the HNDIT1022 module?

Dreamweaver Signup and view all the answers

Which of the following is a learning outcome of the module?

Developing interactive visually appealing client-side programs Signup and view all the answers

What does the syllabus cover regarding Cascading Style Sheets?

Understanding CSS Box Model and Positioning Signup and view all the answers

Which statement correctly describes the course structure?

Students are expected to devote a total of 13 notional hours per week Signup and view all the answers

What is one significant topic included in the syllabus?

Working with web-based forms Signup and view all the answers

What is the primary port used by FTP for communication?

21 Signup and view all the answers

Which of the following is NOT an action that a client can perform using FTP?

Encrypt files Signup and view all the answers

Which client is NOT listed as an example of a visual FTP client?

Command Prompt Signup and view all the answers

What year was the first web page created?

1991 Signup and view all the answers

What must a user have to make changes to files on an FTP server?

Proper authorization Signup and view all the answers

Which protocol is primarily used for transferring files to a web server?

FTP Signup and view all the answers

Which of the following describes content distribution?

Promoting content in various formats across multiple channels Signup and view all the answers

What could be considered a potential benefit of proper content distribution?

More social shares Signup and view all the answers

What does HTML stand for?

Hypertext Markup Language Signup and view all the answers

Which method of connecting to FTP servers is considered the most widely used?

Visual clients Signup and view all the answers

What is the primary function of the World Wide Web?

To interlink hypertext documents and resources Signup and view all the answers

Which of the following best describes SGML?

A markup language that defines metadata using tags Signup and view all the answers

Content distribution can be categorized into how many distinct types?

Three Signup and view all the answers

What enables the creation of hyperlinks on web pages?

HTML syntax Signup and view all the answers

Who invented the World Wide Web?

Tim Berners-Lee Signup and view all the answers

Which of the following components is not a part of the World Wide Web?

Physical hardware components Signup and view all the answers

What is a primary difference between modern and older web browsers?

Modern browsers can decode modern HTML coding more effectively. Signup and view all the answers

Which type of web hosting is generally considered suitable for beginners?

Shared Hosting Signup and view all the answers

What should you consider when selecting a web hosting provider?

The provider's refund policy and guarantees. Signup and view all the answers

Why is FTP considered an important protocol?

It enables precise and controlled file transfers. Signup and view all the answers

Which type of web hosting provides the most control over server configuration?

Virtual Private Server (VPS) Signup and view all the answers

What benefit does shared hosting typically offer to users?

Cost-effectiveness for small to medium websites. Signup and view all the answers

What is one of the first steps in selecting a web hosting plan?

Understanding what your website needs. Signup and view all the answers

What does FTP stand for?

File Transfer Protocol Signup and view all the answers

Study Notes

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)

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

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.