CS202 — Midterm Summary (Lectures 1–22)

📘 Lecture 1 — Fundamentals of Front End Development

📖 Overview: This lecture introduces the concept of front-end development, defines the core languages (HTML, CSS, JavaScript) and the role of a front-end developer. It then explains the structure and components of a URL (Uniform Resource Locator), including encoding, and concludes with the basics of the HTTP protocol, including GET/POST methods and HTTPS.

🗂️ Topics Covered

The lecture begins by defining front-end development and its three core languages. It then transitions to a detailed breakdown of URLs, covering their structure (protocol, resource location, resource name) and dynamic URLs with parameters. The topic of URL encoding is explained, followed by an introduction to HTTP, its role as a request-response protocol, and the key differences between GET and POST requests, culminating with a definition of HTTPS.

📝 Lecture Summary

Front End Development

Front-end development, also known as client-side development, is the practice of producing HTML, CSS, and JavaScript for a website or web application so that a user can see and interact with them directly. These "front end languages" live in your browser. Front end web development is NOT design. The front end developer stands between the designer on one end and the back end developer on the other. As a Front end developer you have to: make sure the content is presented as desired, and all user interactions are handled.

URL: Uniform Resource Locator

URL stands for Uniform Resource Locator. It is the global address of documents and other resources on the World Wide Web. A URL is one type of Uniform Resource Identifier (URI), which is the generic term for all types of names and addresses that refer to objects on the World Wide Web. The term "Web address" is a synonym for a URL that uses the HTTP or HTTPS protocol. Examples include: http://mydomain.com, http://mydomain.com/myresource.html, https://mydomain.com/resource2.html, and ftp://mydomain.com/resource3.html.

Parts of a URL http://mydomain.com/myresource.html The first part of the URL is called a protocol identifier and it indicates what protocol to use (http). The second part is called a resource location name and it specifies the IP address or the domain name where the resource is located (mydomain.com). The third part is optional; it’s the resource name, typically a file name on server (myresource.html).

Dynamic URL A dynamic URL is the address of a dynamic Web page. Dynamic URLs often contain the characters like: ?, &, %, +, =, $, cgi-bin. Example: http://mydomain.com/myres.php?fname=Asim. There is a fourth optional part for dynamic URLs that contains the parameters sent to the dynamic page, in key=value pair (e.g., ?fname=Asim&job=Software%20Engineer).

URL Encoding URLs can only be sent over the Internet using the ASCII character-set. Since URLs often contain characters outside the ASCII set, the URL has to be converted into a valid ASCII format. URL encoding replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits. URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign or with %20.

🔑 Definition — Uniform Resource Locator (URL): The global address of documents and other resources on the World Wide Web. 📐 Formula (Parts of a URL): [protocol identifier]://[resource location name]/[resource name] → Specifies the protocol, server location, and file path. 📌 Example: In http://mydomain.com/myresource.html, http is the protocol identifier, mydomain.com is the resource location name, and myresource.html is the resource name.

🔑 Definition — Dynamic URL: The address of a dynamic Web page that often contains parameters with characters like ?, &, %, +, =, $. 📐 Formula (Dynamic URL): [protocol]://[domain]/[file]?[key1]=[value1]&[key2]=[value2] → A URL that sends data to the server via key-value pairs. 📌 Example: http://mydomain.com/myres.php?fname=Asim&job=Software%20Engineer sends parameters fname=Asim and job=Software%20Engineer to the script myres.php.

💡 Why this matters: URL encoding ensures that special characters and spaces can be transmitted reliably over the internet, which is essential for form submissions and dynamic web page addresses.

HTTP Basics

HTTP stands for Hypertext Transfer Protocol. It’s an application level protocol, works as a request-response protocol between a client and server over the web. HTTP is the foundation of data communication for the World Wide Web. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text.

HTTP Requests Two commonly used methods for a request-response between a client and server are: GET and POST.

• GET - Requests data from a specified resource, has limited length, and can be cached by the client.
• POST - Submits data to be processed to a specified resource, has no data limit, and is never cached.

HTTPS Hypertext Transfer Protocol Secure, or HTTP over SSL. It’s a secure version of HTTP. All the communications between client and server are encrypted and authenticated.

🔑 Definition — Hypertext Transfer Protocol (HTTP): An application-level protocol that works as a request-response protocol between a client and server over the web. 📌 Example: When you type a URL in your browser, the browser sends an HTTP GET request to the server to fetch the webpage.

🔑 Definition — Hypertext Transfer Protocol Secure (HTTPS): A secure version of HTTP where all communications between client and server are encrypted and authenticated using SSL.

⭐ Key Takeaways

Front-end development involves producing HTML, CSS, and JavaScript that run in the browser, and it is distinct from design. A URL (Uniform Resource Locator) is a specific type of URI with key parts: protocol identifier, resource location name, and optional resource name; dynamic URLs additionally contain parameters for passing data. URL encoding is critical for transmitting non-ASCII characters and spaces over the internet using % followed by two hexadecimal digits. HTTP is the request-response protocol underlying web communication, using GET (for requesting data, limited, cached) and POST (for submitting data, unlimited, not cached) as its primary methods. Finally, HTTPS provides a secure, encrypted version of HTTP for safe data transmission.

🧠 Quick Revision Questions

1. What are the three core languages of front-end development, and where do they execute?
2. List the three main parts of a basic URL and the fourth optional part found in dynamic URLs.
3. Why is URL encoding necessary, and how is a space typically encoded?
4. Compare and contrast the HTTP GET and POST methods in terms of their purpose, data limit, and caching behavior.
5. What does HTTPS stand for, and what is the primary security feature it provides?

📘 Lecture 4 — Web Server, Services and Agents

📖 Overview: This lecture covers the fundamental concepts of web servers, application servers, web services, and user agents that form the backbone of web communication. It then transitions into practical web development topics including domain names, hosting, FTP, and comprehensive HTML fundamentals from basic structure through advanced elements like tables, forms, and layouts.

🗂️ Topics Covered

The lecture begins with defining web server as a program using HTTP to serve web pages, application server as a software framework for web applications, web services as client-server applications communicating via HTTP and XML, and web/user agents as software applications for users to communicate with web servers. It then covers domain names (including TLD, second-level domains, and subdomains), hosting services, and FTP protocol. The remainder of the lecture provides an extensive introduction to HTML including document structure, headings, paragraphs, elements and attributes, styling and formatting, quotations, computer code, comments, links, images, tables, lists, blocks, layout, iframes, forms, and colors.

📝 Lecture Summary

Web Server

A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that form Web pages to users, in response to their requests, by HTTP clients. Dedicated computers and appliances may be referred to as Web servers as well.

Application Server

An application server is a software framework that provides both facilities to create web applications and a server environment to run them. It acts as a set of components accessible to the developer through an API defined by the platform itself.

Web Services

Web services are client and server applications that communicate over the World Wide Web (WWW) using HyperText Transfer Protocol (HTTP). Typically Web Service resides on a Web Server and use XML to communicate messages.

Web Agents / User Agents

These are the Software applications that are used by users to communicate to a Web server to retrieve resources or receive data. Web Browser is a typical example of Web/User Agent application.

🔑 Definition — Web Server: A program that uses HTTP to serve files forming Web pages to users in response to their requests by HTTP clients. 🔑 Definition — Application Server: A software framework providing facilities to create web applications and a server environment to run them. 🔑 Definition — Web Services: Client and server applications communicating over WWW using HTTP and XML to exchange messages. 🔑 Definition — User Agent: Software applications used by users to communicate with a web server to retrieve resources or receive data.

Domain

A domain name is a unique name for your web site. Examples include Google.com, Microsoft.com, TechnologyWisdom.com, Facebook.com. It is that part of the Uniform Resource Locator (URL) that tells a domain name server using the domain name system (DNS) where to forward a request for a Web page. The domain name is mapped to an IP address (which represents a physical point on the Internet).

Parts of Domain Name

Examples: www.google.com.pk, facebook.com, validate.ecp.gov

TLD: Top Level Domain — The last part of a domain name (e.g., .com, .pk, .gov)

Second Level Domain — Must be unique on the Internet and registered with one of the ICANN-accredited registrars for specific TLD.

Third Level Domain – Sub Domain — A subdivision of a domain (e.g., www, validate)

🔑 Definition — Domain Name: A unique name for a web site that maps to an IP address via DNS. 🔑 Definition — Top Level Domain (TLD): The highest level in the hierarchical Domain Name System, typically the last part of a domain name. 🔑 Definition — Second Level Domain: The part of the domain name that must be unique and registered with ICANN-accredited registrars.

Hosting

An Internet hosting service is a service that runs Internet servers, allowing organizations and individuals to serve content on the Internet. 💡 Why this matters: Hosting makes your website accessible to users worldwide.

FTP

The File Transfer Protocol (FTP) is a standard network protocol used to transfer computer files from one host to another host over a TCP-based network, such as the Internet. FTP is simple and secure. File is split into small data packets. Client sends a packet to destination after opening an authenticated connection. FTP server checks the packet; if data is correct, it sends request for next packet, until the file is completely received.

FTP Client is typically software that allows us to communicate with a server to transfer files using FTP protocol.

🔑 Definition — FTP (File Transfer Protocol): A standard network protocol used to transfer computer files from one host to another over a TCP-based network.

HTML: Hyper Text Markup Language

HTML stands for Hyper Text Markup Language. It is the standard markup language used to create web pages. Along with CSS and JavaScript, HTML is a cornerstone technology used to create web pages, as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages.

🔑 Definition — HTML: Hyper Text Markup Language, the standard markup language for creating web pages.

HTML Basics

All HTML documents must start with a type declaration: <!DOCTYPE html>

The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

HTML Headings are defined with the <h1> to <h6> tags.

HTML Paragraphs are defined with the <p> tag: <p>My Paragraph.</p>

HTML Images are defined with the <img> tag. The source file (src), alternative text (alt), and size (width and height) are provided as attributes: <img src="image.jpg" alt="Alternate text" width="104" height="142">

📐 HTML Document Structure: <!DOCTYPE html> → <html> → <head> + <body> → content 📌 Example: A basic HTML document:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Dummy Text.</p>
</body>
</html>

HTML Elements

HTML elements are written with a start tag, with an end tag, with the content in between: <tagname>content</tagname>. The HTML element is everything from the start tag to the end tag.

Nested HTML Elements: HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

🔑 Definition — HTML Element: Everything from the start tag to the end tag, including content. 🔑 Definition — Empty HTML Elements: Elements with no content, like <br> for line break.

HTML Attributes

• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"

Key attributes include:

• lang attribute: Declares document language in <html> tag (important for accessibility and search engines)
• title attribute: Provides additional information about an element
• href attribute: Specifies link address in <a> tag
• src, width, height attributes: For images in <img> tag
• alt attribute: Specifies alternative text when element cannot be displayed

🔑 Definition — HTML Attribute: Additional information about an element, always specified in the start tag as name/value pairs.

HTML Headings and Paragraphs

Headings are defined with <h1> to <h6> tags. <h1> defines the most important heading, <h6> defines the least important heading. Use HTML headings for headings only — not for making text BIG or bold. Search engines use headings to index structure and content.

HTML Horizontal Rules: The <hr> tag creates a horizontal line to separate content.

The HTML <head> Element: Contains Meta data (not displayed). Placed between <html> and <body> tags.

The HTML <title> Element: Defines the HTML document's title (displayed in browser tab).

The HTML <meta> Element: Can define character set and other information about the document.

HTML Display: You cannot be sure how HTML will be displayed. The browser removes extra spaces and extra lines.

HTML Line Breaks: The <br> element defines a line break without starting a new paragraph.

📌 Example of Heading Structure:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Less important heading</h3>

HTML Styling and Formatting

Every HTML element has a default style (background color white, text color black). Changing default style can be done with the style attribute.

The HTML style attribute syntax: style="property:value"

Style properties include:

• color: Defines text color
• font-family: Defines font
• font-size: Defines text size
• text-align: Defines horizontal text alignment

HTML Formatting Elements include:

• <b> - Bold text
• <strong> - Important text (semantic)
• <i> - Italic text
• <em> - Emphasized text (semantic)
• <mark> - Marked/highlighted text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

📌 Example of Styling:

<body style="background-color:lightgrey">
<h1 style="color:blue; font-family:verdana; text-align:center">Centered Heading</h1>
<p style="color:red; font-size:160%">This is a paragraph.</p>
</body>

HTML Quotations

• <q> - Short quotation (browsers insert quotation marks)
• <blockquote> - Long quotation (browsers indent the element)
• <abbr> - Abbreviation/acronym
• <address> - Contact information (usually displayed in italic)
• <cite> - Title of a work (usually displayed in italic)
• <bdo> - Bi-Directional Override (for right-to-left text)

📌 Example of Quotations:

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
</blockquote>
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
USA
</address>

HTML Computer Code

For displaying computer code, special elements provide fixed letter size and spacing:

• <kbd> - Keyboard input
• <samp> - Computer output
• <code> - Programming code
• <var> - Mathematical variable

📌 Example of Computer Code:

<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
<code>var person = { firstName:"John", lastName:"Doe", age:50 }</code>

HTML Comments

Comment syntax: <!-- Write your comments here -->

Comments are not displayed by the browser but help document HTML. They are also great for debugging by commenting out lines of code.

Conditional Comments: <!--[if IE 8]> ... <![endif]-->

HTML Links

HTML links are hyperlinks defined with <a> tag. The href attribute specifies the destination address. The link text is the visible part.

• Local Links: Use relative URL (without http://www)
• target="_blank": Opens linked document in new browser window/tab
• Images as Links: Wrap <img> inside <a> tag
• id attribute: Creates bookmarks inside HTML documents

Default link colors: unvisited (blue, underlined), visited (purple, underlined), active (red, underlined).

📌 Example of Links:

<a href="http://google.com">This is a Link to Google</a>
<a href="html_images.html">HTML Images</a> (local link)
<a href="http://www.google.com/" target="_blank">Visit Google!</a>
<a id="tips">Useful Tips Section</a> (bookmark)
<a href="#tips">View Tips</a> (link to bookmark)

HTML Images

Images are defined with <img> tag (empty element, attributes only). The src attribute defines the image URL. The alt attribute specifies alternate text for accessibility (used by screen readers for blind/visually impaired users).

Image Size: Use style attribute or width/height attributes (pixels or percent).

Images can be from the same folder, sub-folder, or another server.

Image Maps: Create clickable areas on an image.

Image Floating: Use style="float:left" or style="float:right" to let image float beside text.

📌 Example of Images:

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="http://www.google.com/images/srpr/logo11w.png" alt="Google">

HTML Tables

Tables are defined with <table> tag, divided into rows with <tr>, and rows into data cells with <td>. Headings use <th> tag.

Attributes: border, colspan (span columns), rowspan (span rows), caption (<caption> tag).

CSS for Tables: border-collapse, padding, border-spacing, background-color.

📌 Example of Table:

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Lists

Unordered Lists (<ul>): List items marked with bullets. Style attribute options: disc (default), circle, square, none.

Ordered Lists (<ol>): List items marked with numbers. Type attribute options: 1 (numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman numerals), i (lowercase Roman numerals).

Description Lists (<dl>): Terms with descriptions, using <dt> (term name) and <dd> (description).

Horizontal Lists: Style with CSS display:inline.

📌 Example of List:

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol type="A">
<li>First item</li>
<li>Second item</li>
</ol>

HTML Blocks

Block level elements: Start and end with new line. Examples: <h1>, <p>, <ul>, <table>, <div>.

Inline elements: Displayed without line breaks. Examples: <b>, <td>, <a>, <img>, <span>.

<div> element: Block level container for other elements. No special meaning, but used with CSS for styling blocks of content.

<span> element: Inline container for text. No automatic formatting, used with CSS for styling parts of text.

📌 Example of Blocks:

<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<h1>My <span style="color:red">Important</span> Heading</h1>

HTML Layout

HTML layout defines the basic structure of a web page using elements to arrange content.

Layout using <div> Elements: Common approach with header, nav, section, footer divs styled with CSS (float, width, background-color, clear).

Layout Using Tables: Possible because table elements can be styled with CSS, though tables were not designed for layout.

📌 Example Layout Structure:

<div id="header">
<div id="nav">
<div id="section">
<div id="footer">

HTML iFrame

The <iframe> tag specifies an inline frame to embed another document within the current HTML document.

Syntax: <iframe src="URL"></iframe>

Attributes: height, width (pixels or percent). Remove border with style="border:none".

Target for Links: Use name attribute on iframe and target attribute on link.

📌 Example of iFrame:

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.google.com" target="iframe_a">google</a></p>

HTML Forms

The <form> element collects user input. Form elements include input fields, checkboxes, radio buttons, submit buttons.

Input types: text (one-line text input), radio (select ONE option), submit (submit form).

Action Attribute: Defines action when form is submitted (server-side script).

GET vs POST: GET for passive queries (data visible in URL), POST for sensitive/updating data (data not visible, better security).

Name Attribute: Required for each input field to be submitted correctly.

Grouping: <fieldset> groups related data, <legend> defines caption.

📌 Example of Form:

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
<input type="radio" name="sex" value="male" checked>Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="submit" value="Submit">
</fieldset>
</form>

HTML Colors

Colors are displayed combining RED, GREEN, and BLUE light. Colors can be specified as:

1. Hexadecimal colors: #RRGGBB (00 to FF) — e.g., #FF0000 (red), #0000FF (blue)
2. RGB colors: rgb(red, green, blue) (0 to 255) — e.g., rgb(255,0,0) (red), rgb(0,0,255) (blue)
3. Color names: 140 standard color names supported by all major browsers

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors.

📐 Color Representation:

• Hexadecimal: #RRGGBB where RR=red, GG=green, BB=blue (00-FF)
• RGB: rgb(red, green, blue) where each value is 0-255

⭐ Key Takeaways

A student must understand the distinction between web servers (serve HTTP files), application servers (provide development framework + runtime), web services (HTTP+XML communication), and user agents (browser software). For HTML, every document must start with <!DOCTYPE html> and follow the <html>→<head>+<body> structure. Key elements include headings (<h1>-<h6>), paragraphs (<p>), links (<a> with href), images (<img> with src, alt), tables (<table>→<tr>→<td>/<th>), lists (<ul>/<ol>→<li>), blocks (<div> block, <span> inline), forms (<form>→<input> types), and styling via the style attribute. Attributes provide additional information and are always name/value pairs in the start tag, while empty elements like <br> have no closing tag.

🧠 Quick Revision Questions

1. What is the difference between a web server, an application server, and a web service?
2. What are the three parts of a domain name and what does each represent?
3. What is the correct HTML document structure starting from the DOCTYPE declaration?
4. Explain the difference between block-level elements (like <div> and <p>) and inline elements (like <span> and <a>), and provide an example of each.
5. When should you use GET versus POST method in an HTML form, and why is the name attribute important?