This document provides an introduction and overview of a lecture on web design. It outlines the grading system, topics to be covered including HTML, CSS, JavaScript, and web technologies. It also defines key concepts like the internet versus the web, web browsers, URLs, frontend versus backend design, and the basic steps for page production. Validation and responsive design are also introduced.

1. Introduction to
Web Design
Lecture 1
Eng:Hajer qaseem 2023 -2024

2. Outlines
 Grading System
 Course Resources
 Topics schedule
 Introduction

3. Grading System
 Lab Works 10%
 Mid Exams %
20
 Final Project 10%
 Final Exam 60%

4. Course Resources
 J. N. Robbins, (2018), “Learning Web Design - A Beginner’s Guide to HTML, CSS,
JavaScript, and Web Graphics”, 5th Edition, O’Reilly.
 Paul J. Deitel, Harvey M. Deitel, and Abbey Deitel, (2011), “Internet and World Wide
Web -How To Program”, 5th Edition, Prentice Hall.

5. Topics schedule
 Introduction (1 week)
 HTML (3 week)
 CSS (4 week)
 JavaScript & jQuery (3 week)

6. The internet versus the web
 The "Web," short for "World Wide Web" (which gives us the acronym www), is the
name for one of the ways that the internet lets people browse documents connected by
hypertext links.
 The principle of the Web is based on using hyperlinks to navigate between documents
(called web pages) with a program called a browser.
 A web page is a simple text file written in a markup language (called HTML) that
encodes the layout of the document, graphical elements, and links to other documents,
all with the help of tags.

7. Introduction to Web...
 The web uses the HTTP (hypertext transfer protocol) protocol to link documents
hosted on a web servers, as opposed to the client represented by the browser.
 On the internet, documents are identified with a unique address, called a URL (unified
resource locator), which can be used to locate any resource on the internet, no matter
which server may be hosting it.
 A website is a group of HTML files (web pages) that are stored on a web server which
is permanently connected to the internet.

8. Internet vs Web

9. Client server

10. Web Browsers
 A web browser (commonly referred to as a browser) is
a software application for retrieving, presenting, and traversing
information resources on the World Wide Web.
 An information resource is identified by a Uniform Resource
Identifier (URI/URL) and may be a web page, image, video or
other piece of content.
 Hyperlinks present in resources enable users easily to navigate
their browsers to related resources.

11. Web Page Addresses (URLs)
 Every page and resource on the Web has its own special address called a URL, which
stands for Uniform Resource Locator.
 A complete URL is generally made up of three components: the protocol, the site
name, and the absolute path to the document or resource, as shown below:

12. Design Web document
 Authoring/markup:
Authoring is the term used for the process of preparing content for delivery on the Web, or more
specifically, marking up the content with HTML tags that describe its content and function.
 Styling:
In web design, the appearance of the page in the browser is controlled by style rules written in
CSS (Cascading Style Sheets).
 JavaScript: is the language that makes elements on web pages do things.
- There are other web-related programming languages as well, including PHP, Ruby, Python,
and ASP.NET, that run on the server and process data and information before it is sent to the
user’s browser.

13. Frontend vs Backend Design
 Fronted design: “Frontend” refers to any aspect of the design process that appears in
or relates directly to the browser. This course focuses primarily on frontend web
design.
 The following tasks are commonly considered to be frontend tasks:
• Graphic design and image production
• Interface design
• Information design as it pertains to the user’s experience of the site
• HTML document and style sheet development
• JavaScript

14. Frontend vs Backend Design
 Backend design: refers to the programs and scripts that work on the server behind
the scenes to make web pages dynamic and interactive.
 The following tasks take place on the backend:
• Information design as it pertains to how the information is organized on the server
• Forms processing
• Database programming
• Content management systems
• Other server-side web applications using PHP, JSP, Ruby, ASP.NET, Java, and other
programming languages

15. Web-related technologies
 Hypertext Markup Language (HTML)
 Cascading Style Sheets (CSS)
 JavaScript and DOM scripting
 Server-side programming and database management (it
will be covered in the next semester)

16. The basic steps for page production
 Step 1: Start with content. We’ll write up raw text content and see what browsers do with it.
 Step 2: Give the document structure. You’ll learn about HTML element syntax and the
elements that give a document its structure.
 Step 3: Identify text elements. You’ll describe the content using the appropriate text
elements and learn about the proper way to use HTML.
 Step 4: Add an image. By adding an image to the page, you’ll learn about attributes and
empty elements.
 Step 5: Change the page appearance with a style sheet. This exercise gives you a taste of
formatting content with Cascading Style Sheets.

17. Validating Your Web Content
 In brief, validation is the process of testing your pages with a special application that
searches for errors and makes sure your pages follow the strict XHTML standard.
- To validate a page, follow this URL: http://validator.w3.org/

18. Site performance & Responsive web design
 Website performance measures the responsiveness of your website and how quickly it
loads, offering up insights to help you optimize your site to ensure it’s as fast and user-
friendly as possible.
- To check the performance of your site, follow this URL: https://pagespeed.web.dev/
 Responsive Web design is the approach that suggests that design and development should
respond to the user's behavior and environment based on screen size, platform and
orientation.

19. HTML editors
 Notepad++(Text editor)
 TextPad (Windows only). TextPad is a simple and
inexpensive plain-text code editor for Windows.
 Sublime Text (Window, Mac, Linux)
 ……………………..