Introduction to Web Designing and HTML
Fundamentals
This document provides an introduction to web designing, highlighting the key differences
between web applications and desktop applications. It then delves into the fundamentals of
HTML, covering its structure, elements, attributes, and common components like headings,
paragraphs, images, tables, lists, blocks, and symbols. Furthermore, it explores embedding
multimedia and creating HTML forms. This document is intended as a student's guide to
understanding the basics of web development.
Introduction to Web Designing
Web designing encompasses a wide range of skills and disciplines in the production and
maintenance of websites. It's not just about making a website look pretty; it's about creating a
functional, user-friendly, and accessible online experience. Key aspects of web designing
include:
• User Interface (UI) Design: Focuses on the visual layout and interactive elements of a
website.
• User Experience (UX) Design: Focuses on the overall experience a user has while
interacting with a website, ensuring it's intuitive and enjoyable.
• Web Content Strategy: Planning, creating, and managing the content on a website.
• Search Engine Optimization (SEO): Optimizing a website to rank higher in search
engine results.
• Web Accessibility: Designing websites that are usable by people with disabilities.
Web Applications vs. Desktop Applications
A crucial distinction in software development is between web applications and desktop
applications. Here's a breakdown of their key differences:
| Feature | Web Application | Desktop Application
|
| ----------------- | ------------------------------------------------ |
------------------------------------------------- |
| Execution | Runs within a web browser. | Runs directly on the operating
system. |
| Installation | No installation required (accessed via URL). | Requires installation on the
user's computer. |
| Platform | Cross-platform (works on any OS with a browser). | Platform-specific
(designed for a particular OS). |
| Updates | Updates are deployed on the server-side. | Updates require users to
download and install. |
| Accessibility | Accessible from anywhere with an internet connection. | Accessible only on
the computer it's installed on. |
| Resources | Relies on server resources for processing. | Utilizes the computer's
resources for processing. |
| Security | Vulnerable to web-based attacks (e.g., XSS, SQL injection). | Vulnerable to
malware and OS-level exploits. |
| Examples | Gmail, Facebook, Google Docs. | Microsoft Word, Adobe
Photoshop. |
In essence, web applications are accessed through a web browser and rely on a server for
processing, while desktop applications are installed directly on a computer and utilize its
resources.
Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for creating web
pages. It provides the structure and content of a webpage, defining elements like headings,
paragraphs, images, and links. Browsers interpret HTML code to display the content to users.
HTML Structure
Every HTML document follows a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• <!DOCTYPE html>: Declares the document type as HTML5.
• <html>: The root element of an HTML page.
• <head>: Contains meta-information about the HTML document, such as the title,
character set, and links to stylesheets.
• <title>: Specifies a title for the HTML page (which is shown in the browser's title bar or
tab).
• <body>: Contains the visible page content.
HTML Elements
HTML elements are the building blocks of HTML pages. They are defined by a start tag, some
content, and an end tag.
• Start Tag: The opening tag (e.g., <h1>).
• Content: The text or other elements between the start and end tags.
• End Tag: The closing tag (e.g., </h1>).
Some elements, like <br> (line break) and <img> (image), are self-closing and don't have an
end tag.
HTML Attributes
Attributes provide additional information about HTML elements. They are specified in the
start tag and usually consist of a name-value pair.
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="An example image">
• href attribute in the <a> (anchor) tag specifies the URL of the link.
• src attribute in the <img> tag specifies the source of the image.
• alt attribute in the <img> tag provides alternative text for the image if it cannot be
displayed.
Headings
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important
heading, and <h6> defines the least important heading.
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
Paragraphs
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Images
HTML images are defined with the <img> tag. The src attribute specifies the path to the
image, and the alt attribute provides alternative text.
<img src="image.jpg" alt="Description of the image" width="500" height="300">
Tables
HTML tables are defined with the <table> tag. Table rows are defined with the <tr> tag, table
headers with the <th> tag, and table data cells with the <td> tag.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Lists
HTML supports ordered (numbered) and unordered (bulleted) lists.
• Unordered Lists (<ul>):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
• Ordered Lists (<ol>):
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Blocks
HTML block-level elements always start on a new line and take up the full width available.
Examples include <div>, <p>, <h1>-<h6>, <ul>, <ol>, and <table>.
The <div> element is a generic container for flow content and is often used for grouping
elements for styling purposes.
<div>
<p>This is a paragraph inside a div.</p>
<h2>This is a heading inside a div.</h2>
</div>
Symbols
HTML provides support for displaying various symbols using character entities or numeric
character references.
• Character Entities: Use predefined names (e.g., for a non-breaking space,
© for the copyright symbol).
• Numeric Character References: Use the Unicode number of the character (e.g., ©
for the copyright symbol).
<p>Copyright © 2023</p>
<p>A B</p>
Embedding Multimedia
HTML allows embedding multimedia content like audio and video using the <audio> and
<video> tags.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute adds playback controls to the media player. The <source> tag specifies
different media files for different browsers.
HTML Forms
HTML forms are used to collect user input. They are defined with the <form> tag.
<form action="/submit" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</
