Notes Factory

P7XCKD

1) Define Internet browser? Give 2 examples

An Internet browser, often referred to as a web browser, is a software application that allows
users to access and navigate the World Wide Web. It interprets and displays web content,
including text, images, videos, and other multimedia, by rendering HTML and other web
languages.

Two examples of internet browsers are:

1. Google Chrome
2. Microsoft Edge

2) parts of web address

1. **Protocol (Scheme)**: Specifies the rules for communication. For example, "https://" is a
secure protocol, while "http://" is not.

2. **Domain Name (Host)**: The human-readable address where the web resource is
located. For instance, "www.example.com" is the domain name.

3. **Directory (Path)**: Indicates the location on the web server where the resource is found,
like "/path/to/resource/".

4. **File Name**: The name of the web page or resource, such as "page.html".

Example: In the URL "https://www.example.com/path/to/resource/page.html":

- "https" is the protocol.
- "www.example.com" is the domain name.
- "/path/to/resource/" is the directory.
- "page.html" is the file name.

3) Define ISP? Give 2 examples.

ISP stands for "Internet Service Provider." It is a company that offers internet access and
related services to individuals and businesses. ISPs connect users to the internet and
provide various plans and technologies for internet connectivity.

Two examples of ISPs are:

1. Comcast
2. AT&T Internet
 4) State the function of following server
a) chat server b) Fax server c) application server d) FTP server

a) **Chat Server**: Facilitates real-time text or multimedia communication between users

over the internet, enabling chat and instant messaging services.

b) **Fax Server**: Handles the sending and receiving of fax documents over a computer
network, converting digital documents to fax format for electronic transmission.

c) **Application Server**: Hosts and manages software applications, providing the

infrastructure for these applications to run efficiently, process requests, and manage data.

d) **FTP Server**: Designed for file transfer, it allows users to upload, download, or manage
files on a server over a network using the File Transfer Protocol (FTP).

5) Explain Client/Server Architecture with diagram(if for 6 marks-advantages and

disadvantages also)

**Client-Server Model**

The client-server architecture involves a client computer sending data requests to a server
over the internet. The server processes these requests and sends the requested data
packets back to the client.

**How It Works:**

- **Client**: In the digital world, a client is a computer or device that uses services from
servers. It can receive information and access specific services.

- **Servers**: Servers are remote computers that provide information and access to
services. They serve data and services to clients.

**Advantages of Client-Server Model:**

- Centralized data storage.

- Cost-efficient with lower maintenance and data recovery.
- Scalability for clients and servers can be adjusted separately.

**Disadvantages of Client-Server Model:**

- Clients can be exposed to viruses, Trojans, and worms if present on the server.
- Servers are vulnerable to Denial of Service (DOS) attacks.
- Data packets can be spoofed or altered during transmission.
- Phishing, capturing login credentials, and MITM attacks are common security risks.
 6) State principle of website design
(No need to explain each term but still just read it)

1. **Website Purpose**: Design with the user's needs and website's goals in mind.

2. **Simplicity**: Keep the design clean and uncluttered, focusing on essential elements.

3. **Navigation**: Use clear menus and labels for easy user guidance.

4. **F-Shaped Pattern Reading**: Structure content to align with how users typically read
web pages, in an "F" shape.

5. **Visual Hierarchy**: Create a clear visual structure using fonts, colors, and layout to
highlight important content.

6. **Content**: Ensure readable text by selecting suitable fonts and text sizes for different
screens.

7. **Grid-Based Layout**: Use a grid system for consistency and alignment of design
elements.

8. **Load Time**: Optimize images and media for quick page loading, enhancing user
experience.

9. **Mobile-Friendly**: Prioritize designs that work well on mobile devices, considering

various screen sizes.

10. **Accessibility**: Design with inclusivity in mind, following accessibility guidelines to cater
to all users.

7) rules for website designing (total 10)

1. **Simplicity**: Keep it simple and uncluttered.

2. **First Impressions**: Create a positive, professional impact.
3. **Intuitive Navigation**: Ensure easy user guidance.
4. **Consistency**: Maintain a uniform design.
5. **Color Selection**: Choose colors carefully for harmony.
6. **Responsiveness**: Design for all screen sizes.
7. **Cross-Browser Compatibility**: Support multiple web browsers.
8. **Error Checking**: Regularly test for issues.
9. **Clean Code**: Write efficient, custom code.
10. **Quality Content**: Prioritize engaging, informative content.

8) Distinguish between client side scripting and server side scripting on any 2/3
parameters
(No need to write 4th point but still i have provided extra part just read them and you
can rephrase that in your own words)

Certainly, here's the reformatted information with an added example:

1. **Execution Location**:
- Client-Side: Runs in your web browser.
- Server-Side: Runs on the web server.

2. **Visibility of Code**:
- Client-Side: Code is viewable by users.
- Server-Side: Code is hidden on the server.

3. **Responsiveness**:
- Client-Side: Immediate, but limited to the user's device.
- Server-Side: May involve server tasks and be slightly slower for users.

4. **Example**:
- Suppose you're creating a form validation feature:
- Client-Side: JavaScript can instantly check if a user entered a valid email address in
their browser.
- Server-Side: PHP can validate the email address on the server before storing it in a
database. This process might take a bit more time due to the server interaction.

9) Describe website designing planning process

1. **Research and Goals**:

- Set objectives and understand the audience and competition.
- Research trends in web design and technology.

2. **Planning**:
- Develop a content strategy, create a sitemap, and create wireframes.
- Plan the website's structure and navigation.

3. **Layout Design**:
- Choose visuals, ensure responsiveness, and focus on UX.
- Create a visual style guide for consistency.

4. **Content Creation**:
- Develop and optimize content with SEO in mind.
- Develop engaging multimedia content, such as videos and infographics.
5. **Coding**:
- Write and implement code, ensuring accessibility.
- Implement interactive features and dynamic functionality.

6. **Testing and Launch**:

- Thoroughly test, deploy, and monitor post-launch.
- Set up web analytics for ongoing performance tracking.

7. **Maintenance**:
- Continuously evaluate feedback and update the site as needed.
- Regularly back up and secure the website against potential threats.

10) working of web browser with diagram

Certainly, here's the information reorganized according to your provided sequence:

1. **User Requests Domain to DNS Server**:

- The user requests a domain and sends it to a DNS server.

2. **DNS Server Responds with IP of Web Server**:

- The DNS server responds with the IP address of the web server associated with the
requested domain.

3. **Web Server Responds with Data File to User**:

- The web server sends an HTTP response with data files to the user.

4. **User Makes HTTP Request to IP to Web Server**:

- The user, having received the web server's response, may make HTTP requests to the IP
address of the web server for additional data or resources.

This sequence illustrates the flow of actions when a user interacts with web servers and
DNS servers.

Chapter 2)
Define block level element? Give two example

->
A block level element always starts on a new line and takes up the full width available (
stretches out to the left and right as far as it can).

Block elements appear on the screen as if they have a line break before and after them.
For example:

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>,
and <address>
elements are all block level elements.
(Don't Write all examples)
( also explain each example with code content and it's output)

<p> tag is a block level element

for example:

<!DOCTYPE html>
<html>
<body>
this is a sentence
<p> This is a paragraph which appears below sentence </p>

(Draw the output on ur OWN)

(similarly, do for other tag as well according to marks 4 marks = 2 example, 6 marks = 3
examples , 8 marks = 4 examples)

Define inline element? Give two example

->
An inline element does not start on a new line and it only takes up as much width as
necessary.

It can appear within sentences and do not have to appear on a new line of their own.

The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>,
<code>, <cite>
above elements are all inline elements

( refer block level tag question and do same for inline elements as well)

Distinguish between relative URL and Absolute URL with example

->

Write Syntax and function for the following tags with example
1)strike 2) sup 3) sub 4)mark 5)<b>6)<em>7)<i>8)<small>9)<strong>10)<ins>11)<del>
(This one is horrible)
->
( DRAW OUTPUT FOR EACH EXAMPLE U GIVE)

1. `<strike>`:
- **Syntax**: `<strike>Text to strike through</strike>`
- **Function**: The `<strike>` tag is used to render text with a strikethrough effect.
- **Example**: `<strike>This text is struck through.</strike>`

2. `<sup>`:
- **Syntax**: `<sup>Superscript text</sup>`
- **Function**: The `<sup>` tag is used to create superscript text, often used for footnotes
or mathematical exponents.
- **Example**: `E=mc<sup>2</sup>`

3. `<sub>`:
- **Syntax**: `<sub>Subscript text</sub>`
- **Function**: The `<sub>` tag is used to create subscript text, often used in chemical
formulas and mathematical expressions.
- **Example**: `H<sub>2</sub>O`

4. `<mark>`:
- **Syntax**: `<mark>Highlighted text</mark>`
- **Function**: The `<mark>` tag is used to highlight or mark specific text within a
paragraph or document.
- **Example**: `This is <mark>important</mark> information.`

5. `<b>`:
- **Syntax**: `<b>Bold text</b>`
- **Function**: The `<b>` tag is used to make text bold without indicating any specific
semantic meaning.
- **Example**: `<b>This text is bold.</b>`

6. `<em>`:
- **Syntax**: `<em>Emphasized text</em>`
- **Function**: The `<em>` tag is used to emphasize text, often displayed in italics,
indicating importance or stress.
- **Example**: `<em>This is emphasized text.</em>`
7. `<i>`:
- **Syntax**: `<i>Italic text</i>`
- **Function**: The `<i>` tag is used to render text in italics, typically for stylistic purposes
rather than indicating emphasis.
- **Example**: `<i>This text is in italics.</i>`

8. `<small>`:
- **Syntax**: `<small>Small text</small>`
- **Function**: The `<small>` tag is used to reduce the font size of text, making it smaller.
- **Example**: `<small>This text is smaller in size.</small>`

9. `<strong>`:
- **Syntax**: `<strong>Strong text</strong>`
- **Function**: The `<strong>` tag is used to indicate strongly emphasized text, often
displayed in bold.
- **Example**: `<strong>This text is strongly emphasized.</strong>`

10. `<ins>`:
- **Syntax**: `<ins>Inserted text</ins>`
- **Function**: The `<ins>` tag is used to indicate that the enclosed text has been added
or inserted into a document.
- **Example**: `<p>The <ins>new</ins> version of the software is now available.</p>`

11. `<del>`:
- **Syntax**: `<del>Deleted text</del>`
- **Function**: The `<del>` tag is used to indicate that the enclosed text has been deleted
or removed from a document.
- **Example**: `<p>The <del>old</del> version of the document is no longer
relevant.</p>`

Explain anchor tag in HTML with example

->

The anchor element is used to create hyperlinks between a source anchor and a destination
anchor.

The source is the text, image, or button that links to another

resource

The destination is the resource that the source anchor links to.

The anchor element tag is the letter “a” surrounded by angle

brackets like this: <a>.
Both the opening and closing attributes are required, and all of
the content between the tags makes up the anchor source.

example:
<a href="https://www.example.com">
Should i click or should i click not?
</a>

Nested List
->

In HTML, a nested list is a list within another list. It's used to organize and structure
information, with sub-lists placed inside items of an outer list. This helps create a sense of
categorization or grouping.

<ul>
<li>Animals
<ul>
<li>Mammals</li>
<li>Reptiles</li>
</ul>
</li>
<li>Plants
<ul>
<li>Flowers</li>
<li>Trees</li>
</ul>
</li>
</ul>

output:

Enlist any 4 image formats

->
(NO NEED TO EXPLAIN) ( BUT WRITE FULL FORM ATLEAST)

1. **JPEG (Joint Photographic Experts Group)**: Ideal for photos with good compression.
2. **PNG (Portable Network Graphics)**: Lossless quality with support for transparency.
3. **GIF (Graphics Interchange Format)**: Supports animation and small file sizes.
4. **SVG (Scalable Vector Graphics)**: Resolution-independent vector format for graphics.

Use of image as Link

->

**Explanation**:
In HTML, you can use an image as a clickable link by wrapping the `<img>` tag with an
`<a>` (anchor) tag. This allows users to click on the image to navigate to another webpage
or resource.

**Example**:
<a href="https://www.example.com">
<img src="image.jpg" alt="Click me for Example.com">
</a>

(draw output if u can)

Use of image as background (2mks)

(Probably this question won't come in exam as we haven't done this )
->
Explanation: You can use an image as a background for a webpage or a specific HTML
element directly within the HTML code by using the style attribute.

<!DOCTYPE html>
<html>
<body style="background-image: url('creep.jpg');">
<h1>welcome to Hell</h1>
</body>
</html>

(nah output is pain)

Image tag with its attribute

->

The <img> tag displays images on webpages.

- **src**: Specifies the image source URL.

- **alt**: Provides alternative text for the image (important for accessibility).
- **width**: Sets the image width in pixels.
- **height**: Sets the image height in pixels.
- **border**: Adds a border around the image.

<img src="image.jpg" alt="A beautiful landscape" width="75%">

use of hspace and vspace

- **hspace**: Adds horizontal space or margin on the left and right sides of an image.
- **vspace**: Adds vertical space or margin on the top and bottom of an image.

These attributes are used with the `<img>` tag to control the spacing around an image.

<img src="image.jpg" alt="A beautiful landscape" hspace="10" vspace="10">

(output is pain u draw i lazy)

Attribute values of align in image

- **left**: Aligns the image to the left, and text or content flows around it on the right.

- **right**: Aligns the image to the right, and text or content flows around it on the left.

- **top**: Aligns the image to the top, and text or content flows below it.

- **middle**: Aligns the image in the middle vertically, and text or content flows around it.

- **bottom**: Aligns the image to the bottom, and text or content flows above it.

These values control how the image is positioned within the surrounding content.

<img src="image.jpg" alt="beautiful landscape" align="right">

( outputs are pain and in this unfortunately u have to draw)

Explain <map> tag with example/Explain image mapping

->

- `<map>` tag is used for image mapping.

- It creates clickable regions (hotspots) within an image.
- Hotspots can be defined in different shapes:
- **Rectangle**: Hotspots can be rectangular in shape.
- **Circle**: Hotspots can be circular.
- **Polygon**: Hotspots can also take polygonal shapes.
- Each hotspot is associated with specific links or actions.
- When users click within these regions, they are directed to the specified link or action.
Image mapping with these shapes allows for interactive and clickable areas within an image.

( no need to write example but still am mentioning here)

<img src="image.jpg" usemap="#imagemap" alt="idk">

<map name="imagemap">
<area shape="rect" coords="50,50,200,150" href="page1.html" alt="Link to Page 1">
</map>

(I HATE OUTPUTS)

Explain body tag attributes - link, alink, vlink attributes

->
:

1. **`link` Attribute**: Controls the color of unvisited links.

Example: `<body link="blue">` sets the default color of unvisited links to blue.

2. **`alink` Attribute**: Controls the color of links when actively clicked.

Example: `<body alink="red">` makes links turn red when they are actively clicked.

3. **`vlink` Attribute**: Controls the color of visited links.

Example: `<body vlink="purple">` makes visited links appear in purple.

Linking : To document in the same folder, To document in the different folder, To

document on the web, To specific section within the document
->

1. **Same Folder**:
- `<a href="document.html">Link to Document</a>`
- Links to a document in the same folder by specifying the file name.

2. **Different Folder**:
- `<a href="folder/document.html">Link to Document</a>`
- Links to a document in a different folder by providing the folder path and file name.

3. **On the Web**:

- `<a href="https://www.example.com">Visit Example Website</a>`
- Links to a document on the web with the full URL.

4. **Specific Section**:
- To create a specific section link within the same document, you'd use an anchor tag like:
- `<a name="section1">Section 1</a>`
 - And then link to it using:
- `<a href="#section1">Link to Section 1</a>`
- This links to a specific section within the same document using an anchor's `id`.

Chapter 3

Table cell spacing, cell padding, width, align, bgcolor attributes

(Am providing information of above )

1. **Cell Spacing**: Controls the space between cells in a table.

2. **Cell Padding**: Sets the space between cell content and the cell border.
3. **Width**: Specifies the table or cell width in pixels or percentage.
4. **Align**: Determines horizontal alignment for tables or cells.
5. **Bgcolor**: Sets the background color for tables or cells.

rowspawn and colspan

- **`rowspan`**: Specifies how many rows a cell should span vertically.

- **`colspan`**: Specifies how many columns a cell should span horizontally.
- They control cell merging in HTML tables, allowing cells to cover multiple rows or columns.

nested tables

- **Nested Tables**: In HTML, nested tables are tables placed inside a tables. nested tables
are used to create complex layouts and structure content within table cells.

(write example for this to be on safe side)

<table border="1">
<tr>
<td>Main Table Cell</td>
<td>
<table border="1">
<tr>
<td>Nested Table Cell 1</td>
</tr>
<tr>
<td>Nested Table Cell 2</td>
</tr>
</table>
</td>
</tr>
</table>

mixed frames

- Mixed frames combine the use of both vertical and horizontal frames.
- They create complex layouts for displaying multiple web documents within one browser
window.
- Mixed frames offer greater control over document organization.
- Careful use is required to ensure a positive user experience.

frames and framesets with it's advantages and disadvantage

->

**Advantages of Frames and Framesets:**

- Divides a web page into sections.
- Allows simultaneous display of multiple web documents.
- Enhances site navigation and code reusability.

**Disadvantages of Frames and Framesets:**

- Accessibility issues for users.
- Bookmarking and sharing challenges.
- Code complexity and maintenance.
- Scrollbars may be required.
- Less commonly used in modern web development.

explain iframes with example

**Explanation**:
- An `<iframe>` tag is used
 to display content from another web page within your own.
- You use the `src` attribute to specify the source URL.
- The `<iframe>` can have a defined width and height.

**Example**:
Suppose you want to embed a YouTube video on your website using an iframe:

```html
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"
frameborder="0" allowfullscreen></iframe>
```

In this example, the `<iframe>` displays a YouTube video by specifying its source URL and
dimensions.

END