Web Application
Development
Presented by:
Geetika Singh
1. Web:
Refers to the World Wide Web (WWW), which is a system of interlinked hypertext documents and multimedia content accessed via the
internet. In the context of web development, "web" signifies the environment or platform where the application will be used, typically
through a web browser.
2. Application:
An application, often abbreviated as "app," is a software program or set of programs designed to perform specific tasks for the user. A web
application is a type of software that runs on a web server and can be accessed through a web browser, unlike desktop applications that
run locally on a user's computer.
3. Development:
This refers to the process of creating, designing, coding, testing, and maintaining software. In the context of web application development,
it involves building the front-end (user interface) and back-end (server-side logic and database interactions) of the web application,
ensuring it functions properly and meets user requirements.
When put together, "Web Application Development" refers to the process of creating software applications that are hosted on a web server
and accessed by users over the internet through a web browser. This process includes planning, designing the user interface, coding the
application logic, and ensuring the application is secure, scalable, and user-friendly.
• HTML (HyperText Markup Language): create and structure content on the web
pages.
• XML (eXtensible Markup Language): store and transport data. Deals with data
configuration, API.
• DHTML (Dynamic HTML): Combination of HTML, CSS and JavaScript.
• Javascript: Is a browser-based scripting language that adds interactivity to web
pages. Like form validation, animation , event handling.
• AJAX(Asynchronous JavaScript and XML): AJAX allows web pages to update parts of
the content in the background, without reloading the entire page.
• PHP(Hypertext Preprocessor): PHP is a server-side scripting language used to create
dynamic and interactive web pages.
• MySQL: Structured query language which handles data.
• CMS (Content Management System): A CMS is software that enables users to easily
create, manage, and customize website content without needing technical expertise.
HTML
• Hypertext Markup Language
• developed by Tim Berners-Lee in 1991
• HTML5 is latest version, which includes features for handling
multimedia, improved accessibility, and better support for modern
web development practices
• It is a markup language and not programming language.
• It uses tags like <h1>, <p>,<a>
HTML tags can be categorized based on their functionality and role in a web page. Here are the primary categories:
1. Structural Tags:
• - Purpose: Define the overall structure and layout of the document.
• - Examples:
• - `<html>`: Root element of the document.
• - `<head>`: Contains meta-information and links to external resources.
• - `<body>`: Contains the content of the document.
• - `<header>`, `<footer>`, `<nav>`, `<section>`, `<article>`, `<aside>`: Define different sections of a web page.
• 2. Text Formatting Tags:
• - Purpose: Apply formatting and styling to text content.
• - Examples:
• - `<h1>` to `<h6>`: Headings, with `<h1>` being the largest.
• - `<p>`: Paragraphs.
• - `<b>`, `<strong>`: Bold text.
• - `<i>`, `<em>`: Italicized text.
• - `<u>`: Underlined text.
• 3. Hyperlink and Navigation Tags:
• - Purpose: Create links and navigation elements.
• - Examples:
• - `<a>`: Anchor tag for hyperlinks.
• - `<nav>`: Navigation section.
• 4. List Tags:
• - Purpose: Create lists of items.
• - Examples:
• - `<ul>`: Unordered (bulleted) list.
• - `<ol>`: Ordered (numbered) list.
• - `<li>`: List item.
• 5. Table Tags:
• - Purpose: Create and format tables.
• - Examples:
• - `<table>`: Defines a table.
• - `<tr>`: Table row.
• - `<td>`: Table cell.
• - `<th>`: Table header cell.
• 6. Form Tags:
• - Purpose: Create forms for user input and interaction.
• - Examples:
• - `<form>`: Defines a form.
• - `<input>`: Input field.
• -`<textarea>`: Multi-line text input.
- `<select>`, `<option>`: Dropdown list.
• 7. Embedded Content Tags:
• - Purpose: Embed multimedia and other external content.
• - Examples:
• - `<img>`: Image.
• - `<audio>`: Audio content.
• - `<video>`: Video content.
• - `<iframe>`: Inline frame for embedding another document.
• 8. Metadata Tags:
• - Purpose: Provide metadata and information about the document.
• - Examples:
• - `<meta>`: Metadata information.
• - `<title>`: Title of the document.
• 9. Script and Style Tags:
• - Purpose: Include and define scripts and styles.
• - Examples:
• - `<script>`: Embeds JavaScript code.
• - `<style>`: Embeds CSS styles.
• Example Document
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <title>Sample HTML Document</title>
• <style>
• body {
• font-family: Arial, sans-serif;
• margin: 20px;
• }
• header, footer {
• background-color: #f8f8f8;
• padding: 10px;
• text-align: center;
• }
• nav ul {
• list-style-type: none;
• padding: 0;
• }
• nav ul li {
• display: inline;
• margin: 0 10px;
• }
• section {
• margin: 20px 0;
• }
• figure {
• margin: 0;
• text-align: center;
• }
• </style>
• </head>
• <body>
• <header>
• <h1>Welcome to My Website</h1>
• <nav>
• <ul>
• <li><a href="#home">Home</a></li>
• <li><a href="#about">About</a></li>
• <li><a href="#contact">Contact</a></li>
• </ul>
• </nav>
• </header>
• <section id="home">
• <h2>Home Section</h2>
• <p>This is the home section of the page. Here you can include an introduction or overview of the website.</p>
• </section>
<section id="about">
• <h2>About Section</h2>
• <p>This section provides information about the website or its author.</p>
• <figure>
• <img src="example.jpg" alt="Example Image" width="300">
• <figcaption>Example Image Caption</figcaption>
• </figure>
• </section>
• <section id="contact">
• <h2>Contact Section</h2>
• <p>Get in touch with us using the contact form below:</p>
• <form action="/submit-form" method="post">
• <label for="name">Name:</label>
• <input type="text" id="name" name="name" required><br><br>
• <label for="email">Email:</label>
• <input type="email" id="email" name="email" required><br><br>
• <label for="message">Message:</label><br>
• <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
• <button type="submit">Send</button>
• </form>
• </section>
• <footer>
• <p>© 2024 My Website. All rights reserved.</p>
• </footer>
• </body>
• </html>
