Scribd
Upload
15 views2 pages

Key HTML Elements for Web Presentations

The document outlines the structure and key elements of an HTML webpage, including the use of <html>, <head>, <title>, and <body> tags. It describes how to organize content using headings, paragraphs, and input elements like <textarea> and <button> for user interaction. The overall flow emphasizes creating a simple presentation format where users can input their thoughts and trigger actions through buttons.

Uploaded by

hk08942
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views2 pages

Key HTML Elements for Web Presentations

The document outlines the structure and key elements of an HTML webpage, including the use of <html>, <head>, <title>, and <body> tags. It describes how to organize content using headings, paragraphs, and input elements like <textarea> and <button> for user interaction. The overall flow emphasizes creating a simple presentation format where users can input their thoughts and trigger actions through buttons.

Uploaded by

hk08942
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Use of every key element, tag, or attribute:

HTML Document Structure:


<html> … </html>
Root element of the webpage.
Everything in the page must go inside <html>.
<head> … </head>
Contains information about the page not shown directly on the screen.
Metadata, title, and scripts go here.
<title> … </title>
Sets the title of the browser tab.
Example: <title>Dreams and Reality - Presentation</title>.
<body> … </body>
Contains all visible content of the page: text, headings, buttons, text boxes, etc.

Headings
<h1> … </h1>
Main title of the page.
Example: <h1>Dreams and Reality</h1>.
<h2> … </h2>
Subheadings for different sections of your presentation.
Example: <h2>Introduction</h2>.

Paragraphs and Text


<p> … </p>
Paragraphs of text.
Used for regular content like explanations, reflections, references.
<br>
Line break. Moves content to a new line without starting a new paragraph.
<hr>
Horizontal line. Used to separate sections visually.
<b> … </b>
Makes text bold.
Example: <b>Thank you for reading.</b>.

Input Elements
<textarea> … </textarea>
Multi-line text box where users can write notes.
Attributes:
id: Unique name for identifying this element in JavaScript.
Example: id='dreamNote'.
rows and columns: Set the height and width of the box.
placeholder: Gray text that shows what to write when empty.
<button> … </button>
Clickable button to perform actions.
Attribute onclick:
Calls a JavaScript function when clicked.
Example: onclick='saveNote("dream")' → runs the saveNote function with the argument
'dream'.

IDs and Attributes


id
Uniquely identifies an element in the page.
Useful for JavaScript to target the exact element to read or write data.
rows and cols (textarea)
Define the size of the text box.
placeholder (textarea)
Shows instructional text inside the box before the user writes anything.

Overall Flow of the Program


<h1> and <h2> organize content like a slide presentation.
<p> and <br> display the content in readable paragraphs.
<textarea> lets users write their dream or reality.
<button> triggers actions (like save or clear) through JavaScript.
<b> highlights important text like a thank-you note.
Summary:
This program is a simple HTML presentation where:
The content is displayed with headings and paragraphs.
Users can write their own dream and reality in text boxes.
Buttons are meant to save or clear those notes.

You might also like