Web Technology
1. Introduction to Web Technology:
- Web Technology refers to the tools and techniques used to create and
manage web pages and websites.
- It involves client-side and server-side technologies.
2. *Client-Side Technologies:
- Technologies that run on the user’s browser (e.g., HTML, CSS, JavaScript).
- These are responsible for front-end development (what users see and
interact with).
3. Server-Side Technologies
- These run on the server (e.g., PHP, [Link], [Link]).
- Responsible for back-end development (data processing, authentication).
4. Web Browser
- A software application used to access information on the World Wide Web.
- Popular browsers: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge
5. Web Server
- A server that hosts websites and responds to requests from browsers.
- Popular web servers: Apache, Nginx, IIS
6. HTTP (HyperText Transfer Protocol)
- A protocol used for transferring web pages between a client and server.
- Works on a request-response model.
7. URL (Uniform Resource Locator)
- The address used to access resources on the web.
- Example: `[Link]
8. Domain Name System (DNS)
- Converts domain names (like `[Link]`) into IP addresses.
- Helps browsers locate web servers.
Web Designing Using HTML
1. Introduction to HTML
- HTML (HyperText Markup Language) is the standard language for creating
web pages.
- HTML uses tags to structure content on the web.
2. Basic HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. HTML Tags
- Headings `<h1>` to `<h6>` for different heading levels.
- Paragraphs`<p>` defines paragraphs.
- Links `<a href="URL">Link Text</a>` creates hyperlinks.
- Images `<img src="image_url" alt="description">` embeds an image.
- Lists
- Ordered list `<ol> <li>Item</li> </ol>`
- Unordered list `<ul> <li>Item</li> </ul>`
4. Attributes in HTML
- HTML tags can have attributes that provide additional information.
- Example: `<img src="[Link]" alt="Picture">`
- `src` is the attribute specifying the image source.
- `alt` is the alternative text if the image cannot be displayed.
5. Forms in HTML
- Used to collect user input.
- Example of a simple form:
```html
<form action="submit_form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Submit">
</form>
6. Tables in HTML
- Tables are used to display data in rows and columns.
- Example:
html
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>
7. CSS (Cascading Style Sheets)
- Used to style HTML elements (colors, fonts, layouts).
- Can be included inline internal,or externa
- Example of an external stylesheet:
html
<link rel="stylesheet" type="text/css" href="[Link]"
8. HTML5 Features
- New elements like `<header>`, `<footer>`, `<article>`, `<section>`.
- **Multimedia support**: `<audio>`, `<video>` tags.
- Form enhancements: New input types like `email`, `date`, `range`.
9. Responsive Web Design
- Ensures websites are accessible and look good on all devices (desktops,
tablets, phones).
- Achieved through media queries and flexible layouts in CSS.
10. JavaScript Integration:
- JavaScript adds interactivity to web pages.
- Example of simple JavaScript integration:
```html
<script>
function showMessage() {
alert("Hello, World!");
}
</script>
<button onclick="showMessage()">Click Me</button>
Key Concepts in Web Designing
1. Usability
- The ease with which users can navigate and interact with a website.
- Ensures intuitive interfaces.
2. Accessibility
- Ensuring websites are usable by people with disabilities.
- Includes providing alt text for images, keyboard navigation, etc.
3. SEO (Search Engine Optimization)
- Techniques to make a website rank higher in search engines.
- Focus on meta tags, headings, and keyword usage.
4. Web Hosting:
- The service of storing websites on a server, making them accessible on the
internet.
- Common hosting types: Shared Hosting, VPS, Dedicated Hosting, Cloud
Hosting.
These are the key notes for your lessons on Web Technology and Web
Designing using [Link] me know if you'd like more details on any specific
topic!
