Web Technology Essentials
Welcome to this presentation on fundamental web technologies. We'll
explore how to integrate multimedia, create interactive forms, design
web pages, and understand the role of CSS.
NAME: AAKASH KUMAR PATHAK
ROLL NO: 2425001
SUBJECT: WEB TECHNOLOGY
by Akkii pathak
Embedding Multimedia: Images, Audio, and Video
HTML provides intuitive tags for embedding various media
types directly into your web pages, enriching the user
experience.
Images: Use the <img> tag with a src attribute for the file
path. Add alt for accessibility.
Audio: The <audio> tag allows embedding sound files.
Include controls for a play bar.
Video: Embed videos with the <video> tag, similar to
audio. Specify width, height, and controls.
Navigating the Web: Links
and Maps
Hyperlinks (<a> Tag)
The backbone of the web, hyperlinks connect pages. Use the
href attribute to specify the destination URL, whether internal or
external.
Map Links (Embedded Iframes)
Integrate interactive maps from services like Google Maps using
an <iframe>. This brings dynamic location data directly to your
site.
Crafting User Input: The Bio-Data Form
HTML forms are crucial for collecting user data. A bio-data
form demonstrates the versatility of input types.
Text fields: For names, addresses (text, email).
Radio buttons: For single choice options (gender).
Checkboxes: For multiple selections (hobbies).
Dropdowns: For selecting from a list (<select>).
Date pickers: For birth dates (date).
Textareas: For longer input (address).
Structuring with Frames and Framesets (Legacy)
Historically, <frameset> and <frame> tags were used to
divide a browser window into multiple, independently
loadable regions.
Frameset: Defines the layout of the frames
(rows/columns).
Frame: Specifies the content of each individual pane.
Note: Framesets are largely deprecated in modern web
development due to accessibility and usability issues,
superseded by CSS-based layouts and JavaScript.
Styling the Web: An Introduction to CSS
Cascading Style Sheets (CSS) is the language for describing the presentation of a document written in HTML. It controls
colors, fonts, layout, and more.
Why CSS? Basic Syntax
Separates content from presentation, making web design Comprises selectors (target HTML elements), properties
more efficient, maintainable, and responsive. (what to change), and values (how to change it).
Types of CSS Implementation
Inline CSS Internal CSS External CSS
Applied directly to an HTML element Defined within the <style> tag in the Linked from an external .css file using
using the style attribute. Best for <head> section of an HTML the <link> tag in the <head>.
single, unique styling needs. document. Ideal for single-page Recommended for site-wide styling.
styling.
Designing a Multi-Page Home Page
A well-structured home page acts as a central hub, linking to key sections of a website, providing a clear user journey.
Home Page
1
About Us
2
Services
Products
3 Contact
Blog
Key Takeaways & Next Steps
We've covered essential aspects of web development, from multimedia
integration to styling with CSS.
Foundational Tags
Master the <img>, <audio>, <video>, and <a> tags for rich content
and navigation.
Form Versatility
Utilize diverse <input> types to create comprehensive and user-
friendly data collection forms.
CSS Power
Embrace external CSS for efficient, scalable, and maintainable
web page styling.
