Web Design and Development Lecture 1
Web Design and Development Lecture 1
Web Design and Development Lecture 1
development
Lecture 1
Course Instructor: Wardah Mahmood
Email Id: wardah.mahmood@riphah.edu.pk
Instructor
• Wardah Mahmood. Email Id: wardah.mahmood@riphah.edu.pk
• Lecturer, Software Engineer, Computer Scientist and Research Scholar.
• Did Both My BS (Computer Sciences) And MS (Software Engineering) From FAST
• Job Experience:
• A Permanent Lecturer At RIPHAH. (2017-Present)
• Researcher at QUEST Lab FAST NUCES Islamabad (2014-2016).
• Expert Areas:
• Web development, Software quality assurance, software engineering research.
Class room conduct
• Come to learn, not to score.
• Study to learn, not to earn.
• Treat others as you would like to be treated.
• Respect other people's property and privacy (no hitting or stealing).
• Laugh with anyone, but laugh at no one.
• Be responsible for your own learning.
• Come to class and hand in assignments on time.
• Do not disturb people who are working.
• Handheld devices are STRICTLY discouraged.
Rules and regulations
• Assignment date will NEVER be extended beyond the due date.
• Quizzes can be announced as well as unannounced. It is generally advised to be prepared for a
quiz at any moment.
• Late submissions will NOT be accepted.
• Email submissions are highly unappreciated.
• Attendance of 80% is mandatory.
• Plagiarism can lead to serious consequences.
Marks distribution
• Assignments 20%
• Quizzes 10%
• Class participation 5%
• 2 midterms 20%
• 1 project 25%
• Final exam 20%
Goal
• In the end of this course, students should be able to employ various technologies
underlying “world wide web” to develop static web sites.
Course objectives
• Recognize difference between the internet and world wide web.
• Describe purpose of various technologies and protocols underlying world wide web.
• Apply appropriate HTML tags to develop web page structure.
• Use relative paths to link various files internal to a web application.
• Recognize and describe various CSS rules.
• Apply CSS rules, tips, tricks and techniques to develop web page presentation.
• Use HTML and CSS to develop static standard compliant websites.
Course objectives
• Recognize and describe JAVASCRIPT syntax and features.
• Apply various JAVASCRIPT features to develop interactive web-based applications.
• Recognize and describe JQUERY syntax and features.
• Apply JQUERY to rapidly develop interactive web-based applications.
Grading Policy
80 – 100 A
70 – 79 B
60 – 69 C
50 – 59 D
Less Than 50 F
Regarding Assignments
• A number of assignments will be given throughout the semester, ranging from reading
assignments to programming or other practical work assignments.
• Approximately 1 per week.
• All the assignments AND the project itself will be individual.
What is Web design and
development
• A broad term for the work involved in designing and developing a web site for
the internet (world Wide web) or an intranet (a private network).
• Web design and development is the art of using various web development methodologies
and languages for the purpose of creating an appealing and operational website.
Internet
• A global computer network providing a variety of information and communication
facilities, consisting of interconnected networks using standardized communication
protocols.
• A connection of computers using the Internet Protocol (IP).
Internet
• Subnetworks can stand on their own.
• Computers can dynamically join and leave the network.
• Built on open standards; anyone can create a new internet device.
• Lack of centralized control (mostly).
• Everyone can use it with simple, commonly available software.
World wide web
• An information system on the internet which allows documents to be connected to other
documents by hypertext links, enabling the user to search for information by moving
from one document to another.
Internet Vs. World wide web
• Many people use the terms interchangeably but they are in fact very different.
• The internet is a vast international network, made up of computers and physical
connections, which allow the various subnetworks to communicate, whereas the world
wide web is the information system, a collection of softwares that spans the internet and
enables the interlinking of documents and resources.
Uniform resource allocator (url)
• An identifier for the location of a document on a web site
• A basic url:http://www.Aw-bc.Com/info/regesstepp/index.Html
protocol host path
• Upon entering this URL into the browser, it would:
• Ask the DNS server for the IP address of www.Aw-bc.Com
• Connect to that IP address at port 80
• Ask the server to GET /info/regesstepp/index.Html
• Display the resulting page on the screen
Web languages/technologies
• HyperText Markup Language (HTML): used for writing web pages
• Cascading Style Sheets (CSS): stylistic info for web pages
• PHP hypertext processor (PHP): dynamically create pages on a web server
• Javascript: interactive and programmable web pages
• Asynchronous javascript and XML (ajax): accessing data for web applications
• Extensible Markup Language (XML): metalanguage for organizing data
• Structured Query Language (SQL): interaction with databases
HTML
• Hypertext markup language, a standardized system for tagging text files to achieve font,
color, graphic, and hyperlink effects on world wide web pages.
• HTML describes the structure of a web page semantically and originally included cues for
the appearance of the document.
HTML
• Describes the content and structure of information on a web page (not the same as the
presentation/appearance on screen).
• Surrounds text content with opening and closing tags.
• Each tag’s name is called an element.
• Syntax: <element>content</element>
• Example: <p>this is a paragraph</p>
HTML basic structure
<!Doctype html>
<html>
<body>
</body>
</html>