Scribd
Upload
10 views16 pages

Web Programming Basics and Website Creation

WEB PROGRAMMING material

Uploaded by

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

Web Programming Basics and Website Creation

WEB PROGRAMMING material

Uploaded by

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

WEB PROGRAMMING that a web application needs to

function.
[Link] to Web Programming:
 Full-Stack Development:
Introduction: Web programming, also known as web
development, involves the creation and maintenance This refers to the ability to work on both the front-end
of websites and web applications that are accessible and back-end aspects of web development, providing
over the internet or an intranet. It encompasses the a comprehensive skill set for building complete web
entire process of building a functional and interactive solutions.
online presence, from designing the visual layout to
implementing server-side logic and managing  Web Technologies and Protocols:
databases. Understanding how the internet works, including
Key aspects of web programming include: concepts like HTTP (Hypertext Transfer Protocol), URLs
(Uniform Resource Locators), and the client-server
 Front-End Development: model, is fundamental to web programming.

This focuses on the client-side of a website, meaning In essence, web programming combines various
what users see and interact with in their web browser. technologies and programming languages to create
the interactive and dynamic online experiences that
 HTML (HyperText Markup users encounter daily.
Language): Provides the fundamental
structure and content of a web page. 2. How to Create a web site?

 CSS (Cascading Style Sheets): Controls To create a website, first define its purpose and
the visual presentation and layout of register a domain name (your website's
the HTML elements, including colors, address). Then, choose a website builder (like Wix or
fonts, spacing, and responsiveness for Squarespace), select a web hosting plan, and pick a
different screen sizes. website template. Customize the template with your
content, add essential pages like "Home" and
 JavaScript: Adds interactivity and
"Contact," optimize for search engines (SEO), and
dynamic behavior to web pages,
finally, test and launch your website
enabling features like animations,
form validation, and real-time Here are the steps to create a website:
updates.
1. Define Your Website's Purpose:
 Back-End Development:
Determine the goals of your website, such as selling
This deals with the server-side logic and database products, showcasing a portfolio, or providing
interactions that power a website or web application. information.

 Server-Side Programming 2. Register a Domain Name:


Languages: Languages like Python
(with frameworks like Django or Choose and register a unique and memorable domain
Flask), PHP, Ruby (with Ruby on Rails), name (e.g., [Link]).
Java (with Spring), and [Link]
3. Choose a Website Platform:
(JavaScript runtime) are used to
handle requests from the client,  Website Builders: Platforms like Wix,
process data, interact with databases, Squarespace, and GoDaddy offer user-
and generate dynamic content. friendly drag-and-drop editors and
templates, making them ideal for
 Databases: Systems like MySQL,
beginners.
PostgreSQL, MongoDB, or Oracle are
used to store and manage the data
 Content Management (e.g., <p>...</p>), to define an element like a
Systems (CMS): WordPress is a paragraph, but some, known as void or self-closing
powerful and flexible option for tags (e.g., <img> or <br>), do not require a closing
managing your website's content. tag. Essential tags for a basic HTML document
include <!DOCTYPE html>, <html>, <head>,
 Custom Code: For more advanced and <body>
control, you can code a website from
scratch using languages like HTML and 4. HTML Elements?
CSS.
An HTML element is a fundamental building block of
4. Secure Web Hosting: an HTML document, defining the structure and
content of a web page. It typically consists of a start
Select a reliable web hosting plan to store your
tag, content, and an end tag.
website's files and make it accessible online.
Structure of an HTML Element:
5. Select and Customize a Template:
Code: <tagname attribute="value">Content goes
Choose a pre-designed template that matches your
here</tagname>
brand and then personalize it with your own text,
images, and branding.  Start Tag:

6. Plan Your Site Structure and Content: <tagname> marks the beginning of the element. It can
include attributes that provide additional information
Outline the essential pages (e.g., Home, About,
about the element.
Contact) and create engaging, high-quality content for
them.  Attributes:

7. Add Functionality: attribute="value" are name-value pairs within the


start tag that modify the element's behavior or
Enhance your site with features like eCommerce tools,
appearance.
contact forms, or booking systems as needed.
 Content:
8. Optimize for Search Engines (SEO):
This is the information displayed or processed within
Use SEO best practices to improve your website's
the element, which can be text, other HTML elements,
visibility in search engine results.
or a combination.
9. Test and Launch:
 End Tag:
Before going live, thoroughly test your website for
</tagname> marks the end of the element.
errors, usability issues, and ensure all features are
working correctly. Types of HTML Elements:

10. Promote and Maintain:  Normal Elements:

Share your website, use marketing tools to attract These elements have both a start tag and an end tag,
visitors, and keep your site updated and monitored to enclosing content. Examples include <p> for
grow your audience. paragraphs, <h1> for headings, <a> for links,
and <div> for divisions.
3. HTML Tags?
 Void Elements (Self-Closing Elements):
HTML tags are keywords enclosed in angle brackets
(<>) that provide instructions to web browsers on how These elements do not contain any content and
to structure and display content on a web page. Most therefore do not require an end tag. They are typically
tags form pairs, an opening tag and a closing tag used for embedding external resources or for specific
formatting. Examples include <img> for Modern web browsers like Chrome, Firefox, and Edge
images, <br> for line breaks, and <hr> for horizontal include built-in developer tools that allow for live
rules. editing and previewing of CSS. You can inspect
elements, modify their styles directly within the
Examples of Common HTML Elements: browser's interface, and instantly see the changes
 Structural Elements: reflected on the page. This is particularly useful for
quick adjustments and experimentation.
 <html>: The root element of an HTML
page.  Code Editors with Live Preview Extensions:
 <head>: Contains metadata about the
document. Integrated Development Environments (IDEs) and
 <body>: Contains the visible content code editors like Visual Studio Code offer extensions
of the web page. that provide live preview functionality. For example,
 <div>: A generic container for flow the "Live Preview" or "Live Server" extensions in VS
content. Code create a local server that automatically reloads
 <span>: An inline container for
the browser whenever changes are saved to your
phrasing content.
 Text Content Elements: HTML, CSS, or JavaScript files.

 <p>: Defines a paragraph.  Online Code Editors/Playgrounds:


 <h1> to <h6>: Define headings of
Platforms like CodePen, JSFiddle, and W3Schools Tryit
different levels.
 <strong>: Emphasizes text with strong Editor provide online environments where you can
importance. write HTML, CSS, and JavaScript and see the live
 <em>: Emphasizes text with output in a split-screen view. These are excellent for
emphasis. sharing code snippets, testing ideas, and learning.
 Link and Image Elements:
 Visual Web Design Tools:
 <a>: Defines a hyperlink.
 <img>: Embeds an image. Tools like Webflow offer a visual interface for
 List Elements: designing websites while simultaneously generating
the underlying CSS. They often include a "CSS
 <ul>: Defines an unordered list.
preview" feature that displays the CSS code being
 <ol>: Defines an ordered list.
 <li>: Defines a list item. generated as you make visual changes, allowing you to
 Form Elements: understand the code behind your design choices.

 <form>: Defines an HTML form.  Print CSS Preview:


 <input>: Defines an input field.
 <button>: Defines a clickable button. Specific features within browser developer tools allow
you to preview how your stylesheets will render when
printed. This is crucial for ensuring that your
webpages are presented correctly in physical
5. CSS Preview?
printouts.
CSS preview refers to the ability to visualize the effects
6. History of HTML?
of CSS code in real-time or near real-time, allowing
developers to see how styles will render on a webpage HTML (HyperText Markup Language) was invented by
without needing to constantly save files and refresh a Sir Tim Berners-Lee in 1991 at CERN to facilitate
browser. This functionality significantly speeds up the information sharing among scientists, evolving from a
development process and aids in debugging. simple set of tags to standardized versions like HTML
2.0 (1995), HTML 4.01 (1999), and the modern,
There are several ways to achieve CSS preview:
interactive HTML5 (officially released in 2014). Key
 Browser Developer Tools: developments include the introduction of forms and
tables in HTML 2.0, the incorporation of Cascading
Style Sheets (CSS) and multimedia support in HTML XHTML, a stricter version of HTML that aligned with
4.0, and the extensive features and simplicity of XML rules, was introduced by the World Wide Web
HTML5, which is now the standard for web Consortium (W3C).
development.
 2004:

The Web Hypertext Application Technology Working


Group (WHATWG) formed, pushing for a more
powerful HTML that could simplify and improve web
development, leading to the creation of HTML5.

The Modern Era

 2014: HTML5 was officially released as a W3C


Recommendation. It was designed to simplify
the language and provide robust support for
multimedia and interactivity, becoming the
Early Days & The Invention current standard for modern web
development.
 1991:

Sir Tim Berners-Lee created HTML along 7. Difference between HTML and HTML5?
with HTTP and the first web browser (WorldWideWeb)
HTML HTML5
at CERN. His goal was to create a simple way for It didn't support audio It supports audio and
scientists to share and link research documents across and video without the use video controls with the
the internet. of flash player support. use of <audio> and
<video> tags.
 1993: It uses cookies to store It uses SQL databases
temporary data. and application cache
The first version of HTML, HTML 1.0, was released to store offline data.
with a basic set of 18 tags for creating simple web Does not allow JavaScript Allows JavaScript to
pages. to run in the browser. run in the background.
This is possible due to
Standardization and Evolution JS Web worker API in
HTML5.
 1995: Vector graphics are Vector graphics are
possible in HTML with the additionally an integral
HTML 2.0 was published as a standard (RFC 1866). It
help of various part of HTML5 like SVG
added more advanced features like tables and forms technologies such as and Canvas.
for user input. VML, Silver-light, Flash,
etc.
 1997: It does not allow drag and
It allows drag and drop
drop effects. effects.
HTML 3.2 brought advancements such as frames and Not possible to draw HTML5 allows to draw
early support for style sheets and client-side scripting shapes like circle,
shapes like circle,
with JavaScript. rectangle, triangle [Link], triangle etc.
It works with all old It supported by all new
 1999: browsers. browser like Firefox,
Mozilla, Chrome,
HTML 4.0 became an official standard, introducing Safari, etc.
support for Cascading Style Sheets (CSS) for styling <HTML>,<Body> , and These tags can be
and multimedia elements like audio and video. <Head> tags are omitted while writing
mandatory while writing HTML code.
XML and the Split a HTML code.
Older version of HTML HTML5 language is
 2000:
are less mobile-friendly. more mobile-friendly. your HTML. The validator will report any errors,
Doctype declaration is too Doctype declaration is warnings, and suggestions for improving your code's
long and complicated. quite simple and easy. compliance with web standards.
Elements like nav, header New element for web
were not present. structure like nav,  Online HTML Validators:
header, footer etc.
Character encoding is Character encoding is Numerous third-party websites offer HTML validation
long and complicated. simple and easy. services. These tools often provide similar
It is almost impossible to One can track the functionality to the W3C validator, allowing you to
get true GeoLocation of GeoLocation of a user paste your code or upload a file for analysis.
user with the help of easily by using JS
browser. GeoLocation API. 3. Integrated Development Environments (IDEs) and
It can not handle It can not handle Text Editors:
inaccurate syntax. inaccurate syntax.
Being an older version , it It is efficient, flexible  Syntax Highlighting and Linting:
is not fast , flexible , and and more fast in
efficient as compared to comparison to HTML. Many IDEs and advanced text editors (like VS Code,
HTML5. Sublime Text, Atom) offer built-in features like syntax
Attributes like charset, Attributes of charset, highlighting, which visually distinguishes different
async and ping are absent async and ping are a
parts of your HTML code, and linting, which
in HTML. part of HTML 5.
automatically identifies potential errors or style issues
as you type.
8. How to check your HTML Code?
 Extensions and Plugins:
Checking your HTML code involves verifying its
You can often enhance your editor's capabilities by
structure, syntax, and adherence to web
installing extensions or plugins specifically designed
standards. This can be done through several methods:
for HTML validation and code quality checks.
1. Viewing Page Source in a Browser:
4. Testing in Different Browsers:
 Right-click and "View Page Source" or
 Cross-Browser Compatibility: Open your
"Inspect":
HTML file in various web browsers (Chrome,
Most modern browsers allow you to right-click on any Firefox, Safari, Edge) to ensure it renders
webpage and select "View Page Source" (or similar, consistently and functions as expected across
like "Show Source Code"). This opens a new tab or different environments. This helps identify any
window displaying the raw HTML code of the page. browser-specific rendering issues or
inconsistencies.
 Developer Tools:
Case Study:
Browsers like Chrome, Firefox, and Edge offer built-in
developer tools (accessed via F12, Ctrl+Shift+I, or Create web page of your department using standard
right-click > Inspect). These tools provide a more HTML tags, HTML elements and HTML attributes.
interactive view of the HTML, allowing you to examine
individual elements, their styles, and potential errors. <!DOCTYPE html>
<html lang="en">
2. Using HTML Validators: <head>
<meta charset="UTF-8">
 W3C Markup Validation Service: <meta name="viewport" content="width=device-
width, initial-scale=1.0">
This is the official and most authoritative tool for <title>Computer Science Department</title>
validating HTML. You can access it </head>
at [Link]. It allows you to check your code <body>
<header>
by entering a URL, uploading a file, or directly pasting
<h1>Department of Computer Science</h1>
<nav> Affiliated to Andhra University<br>
<ul> Visakhapatnam, Andhra Pradesh<br>
<li><a href="#about" title="About the Email: <a
Department">About</a></li> href="[Link]
<li><a href="#faculty" title="Faculty
Members">Faculty</a></li> </address>
<li><a href="#programs" title="Academic <form action="/submit" method="post">
Programs">Programs</a></li> <label for="name">Name:</label>
<li><a href="#contact" title="Contact <input type="text" id="name" name="name"
Information">Contact</a></li> required><br><br>
</ul>
</nav> <label for="email">Email:</label>
</header> <input type="email" id="email" name="email"
required><br><br>
<section id="about">
<h2>About the Department</h2> <label for="message">Message:</label><br>
<p> <textarea id="message" name="message"
The Computer Science Department is dedicated rows="4" cols="40"></textarea><br><br>
to excellence in teaching, research, and innovation.
We offer undergraduate and postgraduate <input type="submit" value="Send">
programs that equip students with theoretical </form>
knowledge </section>
and practical skills for real-world challenges.
</p> <footer>
</section> <p>&copy; 2025 Computer Science Department,
SAMATA College</p>
<section id="faculty"> </footer>
<h2>Faculty</h2> </body>
<ul> </html>
<li><strong>Mr. T S S J HARANATH</strong> -
Assistant Professor and Head of Department</li>
<li><strong>Ms. Shirley Grace</strong> -
Assistant Professor</li>
<li><strong>Ms. Ikshita</strong> - Assistant
Professor</li>
<li><strong>Mr. P Prem
Koushik</strong> - Assistant Professor</li>
</ul>
</section>

<section id="programs">
<h2>Programs Offered</h2>
<ol>
<li>Bachelor of Science (BSc) in Computer
Science</li>
<li>Bachelor of Computer
Application (BCA) in Computers</li>
<li>Master of Computer Science (MSc) in
Computer Science</li>
</ol>
</section>

<section id="Contact">
<h2>Contact Us</h2>
<address>
Computer Science Department<br>
SAMATA COLLEGE<br>
Multi-line It follows the <!-- Multi
syntax of a single- Line
line comment by Comment -->
adding multiple
lines in the
comment.

UNIT – II Note: The shortcut for adding the comment through


the keyboard is by typing Ctrl + / in Windows, and
Coding Standards, Block Elements: Command + / for Mac users.

Single-Line and Inline Comments


1. HTML Coding Conventions?
<html>
HTML coding conventions are a set of guidelines and
best practices for writing clean, readable, and <body>
maintainable HTML code. Adhering to these
conventions improves collaboration, reduces errors, <!--This is heading Tag-->
and enhances accessibility.
<h1>GeeksforGeeks</h1>
HTML comments are used to add notes or
explanations in the HTML code that are not displayed <!--This is single line comment-->
by the browser.
<h2>This is <!--given for--> single line
 They are useful for documenting the code, comment</h2>
making it easier to understand and maintain.
</body>
 To add a comment, use the syntax <!-- your
comment here -->. </html>

<!-- This is a comment and will not be displayed on the In this example:
webpage -->  The code uses HTML comments (<!--
<p>This is visible text.</p> comment -->) to add notes for developers,
which are not displayed on the webpage.
In this example:
 The <h1> and <h2> tags display headings,
 The text within the <!-- and --> tags will not while inline comments in <h2> do not affect
appear on the webpage. the visible text.

 These comments can include reminders, Multi-Line Comments and Hidden Code Sections
warnings, or explanations about the code,
which can be useful for anyone reading or <html>
editing the HTML document. <body>
Different Ways to Add Comments in HTML <!-- This is
 There are two main ways to write comments heading tag -->
in HTML: single-line and multi-line comments.
Both use the same basic syntax but differ in <h1>GeeksforGeeks</h1>
how they are implemented
Comments Descriptions Syntax <!-- This is
Single-line The single-line <!-- comment -
comment is given -> multi-line
inside the
( <!-- comment --> comment -->
) tag.
<h2>This is multi-line comment</h2>  <!DOCTYPE html>: Declares the
document type.
<!-- <button style="font-family: Sans-serif;">  <html>: The root element, enclosing
all page content.
Click Me  <head>: Contains metadata
(e.g., <title>, <meta>, <link>).
</button> -->  <body>: Contains the visible content
of the page.
</body>
 Content Grouping:
 <header>: Introduces a section or the
</html>
entire page.
In this example:  <nav>: Contains navigation links.
 <main>: Represents the dominant
 The code includes HTML comments (<!-- content of the <body>.
 <article>: Encloses independent, self-
comment -->) that are not displayed by
contained content (e.g., a blog post).
browsers but serve as notes for developers.
 <section>: Groups related content
within an article or document.
 The <h1> and <h2> tags define headings, with
 <aside>: Contains content indirectly
comments explaining their purpose; the
related to the main content (e.g.,
commented-out <button> element is not sidebars).
rendered on the page.  <footer>: Provides concluding
information for a section or the page.
Uses of HTML Comments  Text Semantics:
 <h1> to <h6>: Headings of varying
 Code Organization: Comments can help break importance.
up sections of code, making it easier to  <p>: Paragraphs of text.
navigate, especially in larger projects.  <ul>, <ol>, <li>: Unordered, ordered
lists, and list items.
 Collaboration: When working with others,  <strong>: Indicates strong
comments are crucial for explaining why importance.
certain HTML elements are used, or for  <em>: Indicates emphasis.
leaving instructions for team members.  <a>: Hyperlinks.
 <blockquote>: Block quotations.
 Debugging: Temporarily disabling parts of  <figure>, <figcaption>: For images,
HTML code by commenting them out is a diagrams, or other media with
captions.
common use, allowing developers to isolate
2. Descriptive Attributes:
issues. Enhance elements with attributes that provide
additional, accurate information.
 Documentation: Providing details or
 alt attribute for <img>: Provides alternative
documentation within the code for future text for images, crucial for accessibility and
reference without the need for external when images cannot load.
documentation.  title attribute: Offers advisory information for
elements.
2. HTML Elements, Should Describe  href attribute for <a>: Specifies the
web page content Accurately? destination of a link.
 aria-* attributes: Provide accessibility
the following principles and elements should be information for dynamic or complex
utilized: components.
1. Semantic HTML Elements: 3. Clear and Concise Content:
Use elements that convey the meaning and structure The actual text, images, and media within the HTML
of the content, not just its visual appearance. This elements should be well-written, informative, and
helps browsers, search engines, and assistive directly relevant to the page's purpose.
technologies understand the page's purpose.
 Document Structure:
3. Content Model Categories? Key Characteristics of Block Elements:

HTML content models categorize elements based on  Start on a New Line:


the content they are expected to contain or the
context in which they can be used. These categories By default, a block-level element always begins on a
help define the valid nesting rules for HTML elements, new line, effectively creating a "block" of content.
ensuring semantic and well-structured
 Full Width Occupancy:
documents. The primary content model categories
are: Block elements typically occupy the entire available
horizontal space of their parent container, stretching
 Metadata content:
to the left and right edges.
Elements that provide information about the
 Vertical Stacking:
document or establish relationships with other
documents. These elements are typically found in When multiple block elements are placed
the <head> section and consecutively, they stack vertically down the page.
include <base>, <link>, <meta>, <noscript>, <script>, <
style>, and <title>.  Accepts Dimensions and Margins/Padding:

 Flow content: Block elements can have their width, height, margin,
and padding properties explicitly defined and applied
This is the most encompassing category, including the through CSS.
majority of elements that can be used within
the <body> of an HTML document. It represents the Common Examples of Block Elements:
general content flow of a document, including text,
images, and various structural elements.  Structural Elements:

 Sectioning content:  <div>: A generic container for


grouping other HTML elements, often
Elements that define the structure of a document by used for layout purposes.
creating distinct sections. This category
includes <article>, <aside>, <nav>, and <section>.  <header>, <footer>, <nav>, <main>, <
section>, <article>, <aside>: Semantic
 Heading content: elements that define specific regions
or types of content within a
Elements used for defining headings within a document.
document. This category includes <h1> through <h6>.
 Text Formatting Elements:
 Phrasing content:
 <p>: Defines a paragraph of text.
Elements that define the text and its markup within a
document. This category includes elements  <h1> to <h6>: Headings of different
like <a>, <span>, <strong>, <em>, <img>, and various levels, from the largest (<h1>) to the
other inline elements. smallest (<h6>).

 Embedded content:  List Elements:

Elements that embed external resources into the  <ul>: Unordered list.
document. This category
includes <audio>, <canvas>, <embed>, <iframe>, <img  <ol>: Ordered list.
>, <math>, <object>, <svg>
 <li>: List item within an ordered or
unordered list.

 Other Elements:
4. Block Elements?
 <table>: Creates a table.
HTML block-level elements are fundamental
components that structure the content of a  <form>: Defines an HTML form for
webpage. They exhibit distinct rendering user input.
characteristics compared to inline elements.
 <hr>: Represents a thematic break from the main text, while the <q> tag is more
(horizontal rule). appropriate for shorter, inline quotations.

<!DOCTYPE html>  Using the <blockquote> tag enhances the


semantic structure of your HTML document,
<html> clearly indicating that a section of text is a
quotation.
<head>
 The <blockquote> tag also supports the Global
<title>Block Elements Example</title>
Attributes and Event Attributes in HTML.
<style>
<!DOCTYPE html>
div {
<html>
border: 1px solid blue;
<body>
margin-bottom: 10px;
<p>Here is a famous quote:</p>
padding: 5px;
<blockquote
} cite="[Link]
blockquote-tag/">
p{
"The `<blockquote>` tag in HTML is used to define
border: 1px solid green; a block of text that

margin: 5px; is a quotation from another source."

} </blockquote>

</style> </body>

</head> </html>

<body> Output:

<div> Here is a famous quote:

<h2>This is a div</h2> "The `

<p>This is a paragraph inside the div.</p> ` tag in HTML is used to define a block
of text that is a quotation from another source."
</div>
 The <blockquote> tag wraps the quoted text,
<p>This is another paragraph outside the div.</p> indicating that it is a block-level quotation.
</body>  The cite attribute specifies the source of the
quotation, providing a URL for reference.
</html>
Syntax:
<blockquote cite="[Link]

This is a blockquote from an external source.


5. Blockquote Element?
</blockquote>
The <blockquote> tag in HTML is used to define a
section that is quoted from another source. It is
typically displayed as an indented block to set it apart
Quoting a Paragraph
from the surrounding content.
<!DOCTYPE html>
 The <blockquote> tag should be used for
longer quotations that require separation <html lang="en">
<body> the left edge of the container, respectively,
enhancing readability.
<blockquote cite="[Link]">

GeeksforGeeks:A computer science portal for


geeks 6. Whitespace Collapsing?
</blockquote> White space collapsing in HTML refers to the
browser's default behavior of treating multiple
</body> consecutive white space characters (spaces, tabs,
</html> newlines) within the HTML source code as a single
space when rendering the page.

How it works:
Styling the <blockquote> Tag

<!DOCTYPE html>
 If you have multiple spaces between words in
<html> your HTML, the browser will render only one
space.
<head>
 If you use line breaks or tabs within a
<style> paragraph, the browser will also collapse
these into a single space.
blockquote {
 This applies to most HTML elements,
border-left: 4px solid #ccc;
including p, span, div, etc.
padding-left: 10px;

margin-left: 20px;
Example:
color: #555;
Consider the following HTML:
font-style: italic;
<p>
}
This is some
</style>
text
</head>
with extra whitespace.
<body>
</p>
<blockquote>
When rendered by a browser, it will appear as:
"The only limit to our realization of tomorrow is
Code
our doubts of today."
This is some text with extra whitespace.
</blockquote>
Why it happens:
</body>
 Readability of code:
</html>
It allows developers to format their HTML code with
 The border-left property adds a left border to
indentation and line breaks for better readability
the <blockquote>, visually distinguishing it
without affecting the visual layout of the page.
from the rest of the content.
 Performance:
 The padding-left and margin-left
properties create space between the border It reduces the size of the HTML document by
and the text, and between the blockquote and eliminating unnecessary characters, which can
improve loading times.
Preventing white space collapsing: By default, browsers render the text within a <pre> tag
using a monospaced (fixed-width) font, enhancing
While white space collapsing is the default behavior, readability for code or other structured text.
there are ways to control or prevent it:
 Ideal for Code Snippets:
 CSS white-space property:
It is commonly used to display programming code,
 white-space: pre;: Preserves all white ensuring that the code's structure and indentation are
space, including spaces and line accurately presented.
breaks, similar to how text is displayed
within a <pre> tag.  Displaying Preformatted Content:

 white-space: nowrap;: Prevents line It can also be used for other types of preformatted
breaks and collapses multiple spaces content, such as ASCII art, poetry, or any text where
into one. the visual layout is crucial and should not be altered
by the browser.
 white-space: pre-wrap;: Preserves
spaces and line breaks, but allows text <pre>
to wrap if it exceeds the container's
width. This is some preformatted text.

 white-space: pre-line;: Collapses It preserves all spaces


multiple spaces but preserves line
and line breaks.
breaks.
Indentation is also maintained.
 <pre> tag:
</pre>
The <pre> tag is specifically designed to display
preformatted text, preserving all white space and line Accessibility Considerations:
breaks within its content.
When using <pre> for visual content like ASCII art, it is
 &nbsp; entity: important to provide alternative descriptions for users
with visual impairments. This can be achieved by
The &nbsp; (non-breaking space) entity can be used to
combining <pre> with elements
insert individual non-collapsing spaces where
like <figure> and <figcaption>, and by using ARIA
needed. Each &nbsp; represents a single, visible space
attributes like role="img" and aria-label to describe
that will not be collapsed with other white space
the content.
characters.

7. What are pre Elements in HTML?


8. What are Phrasing Elements in HTML?
The HTML <pre> element, short for "preformatted
text," is a block-level element used to display text In HTML, "phrasing elements" (also known as "inline
exactly as it is written in the HTML source code. This elements" in older terminology) are elements that
means it preserves all whitespace, including spaces, define text or add structural meaning to a block of text
tabs, and line breaks, unlike other HTML elements within a larger flow of content, such as a
where multiple spaces are collapsed and line breaks paragraph. They do not typically create new lines or
are ignored by default. break the flow of the document. Instead, they are
designed to be used inline with text, providing
Key characteristics and uses of the <pre> element:
semantic meaning or applying specific formatting.
 Preserves Formatting:
Here are some common examples of phrasing
The primary function of <pre> is to maintain the exact elements in HTML:
formatting of its content, including indentation and
 <em> (Emphasis): Used to emphasize text,
line breaks.
typically rendered in italics by default.
 Fixed-width Font:
<p>You're going to wear <em>that</em> shirt?</p>
 <strong> (Strong Importance): Used to  Using a Text Editor: Open the .html file in any
indicate text with strong importance, typically text editor (e.g., Notepad, VS Code, Sublime
rendered in bold by default. Text). Locate the desired element and modify
its content, attributes, or even the tag
<p>You're going to wear <strong>that</strong> itself. Save the file and refresh the browser to
shirt?</p> see the changes.
 <mark> (Marked Text): Used to highlight or 2. Using Browser Developer Tools (Inspect Element):
mark text, typically rendered with a
background color.  Temporary Edits: Right-click on an element in
a webpage and select "Inspect" or "Inspect
<p>This is <mark>important</mark> Element." This opens the browser's developer
information.</p> tools, where you can view and modify the
HTML structure in real-time. Double-click on
 <abbr> (Abbreviation): Used to define an
text content or attributes to edit them. These
abbreviation, often with a title attribute to
changes are temporary and will be lost upon
provide the full form.
refreshing the page.
<p>The <abbr title="World Wide
3. Dynamically with JavaScript (Document Object
Web">WWW</abbr> was invented by Tim Berners-
Model - DOM):
Lee.</p>
Manipulating Content.
 <code> (Code): Used to display a fragment of
computer code. const myElement =
[Link]('myId');
<p>The `[Link]()` function is used for
debugging.</p> [Link] = 'New content for the
element'; // Changes HTML content
 <q> (Short Quote): Used for short, inline
quotations. [Link] = 'New plain text'; //
Changes only the text content
<p>As Shakespeare said, <q>To be or not to be, that
is the question.</q></p> Modifying Attributes.
 <span> (Generic Inline Container): A generic const myImage = [Link]('img');
inline container used to group and style inline
content when no other semantic element is [Link] = '[Link]'; // Changes the 'src'
appropriate. attribute

<p>This is a <span style="color: blue;">blue</span> [Link]('alt', 'A new alt text'); // Sets
word.</p> or updates an attribute

These elements, and others [Link]('title'); // Removes an


like <cite>, <dfn>, <kbd>, <samp>, <sub>, <sup>, <del> attribute
, and <ins>, provide semantic meaning and can
influence how text is presented, either through Changing Styles.
default browser styling or custom CSS. They are
const myDiv = [Link]('myDiv');
distinct from block-level elements
(like <p>, <h1>, <div>) which create distinct blocks of [Link] = 'blue';
content and typically begin on a new line.
[Link] = '20px';
9. Editing the Elements in HTML?
Adding/Removing Classes.
Editing HTML elements can be performed in several
ways, depending on whether the changes are const myButton = [Link]('.my-
intended for development purposes or for dynamic button');
manipulation within a live webpage.
[Link]('active');
1. Directly in an HTML File:
[Link]('inactive');
[Link]('highlight');  <sup>: Renders text as superscript.

Creating and Appending Elements. Character References:

const newParagraph = Character references, also known as HTML entities,


[Link]('p'); are used to display characters that are reserved in
HTML (like < or >), or characters not easily typed on a
[Link] = 'This is a new standard keyboard (like copyright symbols or special
paragraph.'; characters). They come in two main forms:
[Link](newParagraph);  Named Character References (Entity Names):
Using HTML Editors and IDEs: These use a mnemonic name preceded by an
ampersand (&) and followed by a semicolon (;).
 Specialized Software: HTML editors and
Integrated Development Environments (IDEs)  Example: &lt; for <, &gt; for >, &amp; f
offer features like syntax highlighting, or &, &copy; for ©.
autocompletion, and code validation, which
streamline the process of editing HTML  Numeric Character References:
files. Examples include Adobe Dreamweaver,
WebStorm, and Visual Studio Code with HTML These refer to a character by its Unicode code
extensions. point. They can be in decimal or hexadecimal form.

 Decimal: Preceded by &# and


followed by a semicolon (;).
TEXT ELEMENTS AND CHARACTER REFERENCES:
 Example: &#60; for <, &#169;
sup,sub, s, mark, and small elements, strong, em, b, for ©.
u, and i elements, span element, character
references, web page with character references, and  Hexadecimal: Preceded by &#x and
time elements, code-related elements, br and wbr followed by a semicolon (;).
elements.  Example: &#x3C; for <, &#xA9
HTML utilizes various elements to structure and ; for ©.
format text, and character references to display Using character references ensures that special
special characters. characters are displayed correctly in all browsers and
 Formatting Elements: regardless of the character encoding used for the
HTML document.
 <b>: Renders text in bold (without
conveying strong importance). Examples of character references

 <strong>: Renders text in bold, Character Named Numeric Description


indicating strong importance. Entity Entity
 <i>: Renders text in italics (for
alternate voice or mood).
< &lt; &#60; Less-than sign
 <em>: Renders text in italics, (reserved).
indicating emphasis.

 <mark>: Highlights or marks text.


> &gt; &#62; Greater-than
 <small>: Renders text in a smaller font sign
size. (reserved).

 <del>: Indicates deleted text.

 <ins>: Indicates inserted text. & &amp; &#38; Ampersand


(reserved).
 <sub>: Renders text as subscript.
<section id="about">
" &quot; &#34; Double
quotation <h2>About Tehri Dam</h2>
mark
<p>
(reserved).
Tehri Dam is the highest dam in India and one
of the largest water reservoirs in the world[web:8].
© &copy; &#169; Copyright
Situated at the confluence of Bhagirathi and
symbol. Bhilangna rivers, it is a major attraction for travelers
interested in awe-inspiring engineering and natural
scenic beauty[web:8].

</p>

CASE STUDY: <ul>

Create a Web Page related to famous water reservoir <li>Location: New Tehri, Uttarakhand</li>
/ famous tourist sports near by your location using
<li>Height: 260.5 meters</li>
block elements, text elements and character
references. <li>Main Purpose: Irrigation, hydroelectric
power generation, water supply</li>
<!DOCTYPE html>
</ul>
<html lang="en">
</section>
<head>
<section id="activities">
<meta charset="UTF-8">
<h2>Tourist Activities</h2>
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <p>
<title>Tehri Dam - Famous Water Reservoir & The Tehri Reservoir is famous for water sports
Tourist Spot</title> such as speed boating, water scooter rides, banana
boat rides, and water skiing[web:8].
</head>
Visitors can enjoy spectacular views of the lake
<body>
and spillways, especially during the rainy season.
<header>
</p>
<h1>Tehri Dam – Uttarakhand, India</h1>
<ol>
<nav>
<li>Boating & Water Sports</li>
<ul>
<li>Scenic Photography</li>
<li><a href="#about" title="About Tehri
<li>Guided Tours of the Dam</li>
Dam">About</a></li>
<li>Nature Walks & Picnics</li>
<li><a href="#activities" title="Tourist
Activities">Activities</a></li> </ol>
<li><a href="#contact" title="Contact <p>
Information">Contact</a></li>
Charges for water activities start from around
</ul> ₹300 per person[web:8].
</nav> </p>
</header> </section>
<section id="contact">

<h2>Contact and Location</h2>

<address>

Tehri Dam,<br>

New Tehri,<br>

Tehri Garhwal District,<br>

Uttarakhand, India<br>

Phone: +91-XXXXXXXXXX<br>

Email: damtourism@[Link]

</address>

<form action="/submit" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name"


required><br><br> This HTML page gives visitors information about the
Tehri Dam tourist spot, including details about the
<label for="email">Email:</label> location, activities, and contact info, and uses well-
<input type="email" id="email" name="email" structured tags and attributes throughout.
required><br><br>

<label for="query">Query:</label>

<textarea id="query" name="query" rows="4"


cols="40"></textarea><br><br>

<input type="submit" value="Send">

</form>

</section>

<footer>

<p>&copy; 2025 Tehri Dam Tourism Board. All


rights reserved.</p>

</footer>

</body>

</html>

Common questions

Powered by AI

Inline elements, also known as phrasing elements, are used for text or make structural changes within a block of text and do not usually create a new line or break the flow of the document. They are integrated within the text to apply specific formatting or add semantic meaning, examples include <em> for emphasis and <a> for hyperlinks. Block-level elements, however, start on a new line and consume the full width available within their parent container. They are used to structure the main content of a webpage, with elements such as <div>, <header>, and <section> creating blocks of content that organize both the layout and readability of the page .

HTML elements enhance accessibility through attributes like alt for images, providing descriptive text when images cannot load, and aria-* attributes for dynamic elements to convey roles and properties to assistive technologies. These attributes ensure that content is accessible to users with disabilities, enabling screen readers to interpret and announce content accurately. Descriptive attributes such as title provide additional context and advisory information for users when interacting with elements, helping create an inclusive web experience .

Block elements organize the layout of a simple HTML page by starting on new lines and occupying the full width available, allowing them to define the structure of a webpage effectively. Key block elements include <header> for introductory content, <nav> for navigation links, <section> for grouping related content, and <footer> for concluding information. Using these elements, you can create a clear and organized structure that enhances readability and ensures that content is easily accessible to users .

HTML content models categorize elements based on the type of content they contain or the context of their use. Primary categories include metadata content, found in the <head> section for document information; flow content, the most encompassing category found within the <body>; sectioning content, like <article> and <aside>, defining document structure; heading content, for headings like <h1> to <h6>; phrasing content, for inline elements like <a>; and embedded content, for external resources, including <audio> and <img>. These categories help ensure elements are semantically used and properly nested, creating a well-structured document .

Character references, or HTML entities, ensure special characters are displayed correctly in HTML documents across different browsers. They replace reserved HTML characters—for example, using &lt; for the less-than sign and &amp; for the ampersand. They also help include characters not easily typed from a keyboard, such as © with &copy;. These references ensure that all characters are rendered correctly regardless of the document's encoding, preventing syntax errors and ensuring consistent display .

The <pre> element is beneficial for displaying code snippets because it preserves all whitespace, including spaces, tabs, and line breaks, exactly as they appear in the HTML source code. This ensures that the structure and formatting of code are maintained for readability and accuracy. Additionally, <pre> renders text in a monospaced font by default, which is standard for displaying code and enhances its legibility. This element is invaluable for presenting programming code or other preformatted content where the visual presentation is crucial .

To build an effective website, start by choosing a reliable Content Management System (CMS), such as WordPress, or opt for custom coding for advanced control using HTML and CSS. Secure a dependable web hosting service to store your files. Select and personalize a template that aligns with your brand. Plan your site structure and develop engaging content for essential pages like Home, About, and Contact. Add necessary functionalities such as eCommerce tools or contact forms. Optimize the site for search engines (SEO) to enhance visibility. Before launching, test the website for errors and usability issues, and ensure all features function correctly. Finally, promote the site using marketing tools and maintain it with regular updates to grow the audience .

Normal HTML elements have both a start and end tag to enclose content; examples include <p> for paragraphs, <h1> for headings, and <div> for divisions. These elements define clear boundaries for content and are essential for organizing HTML documents. In contrast, void elements, also known as self-closing elements, do not contain content and thus do not have end tags. Examples include <img> for images and <br> for line breaks. While normal elements enclose content, void elements typically embed external resources or provide specific formatting without wrapping content .

HTML coding conventions are essential as they promote clean, readable, and maintainable code, which improves collaboration and reduces errors. By adhering to these guidelines, developers ensure better accessibility and consistency across a project. HTML comments, included using <!-- comment --> syntax, aid in documenting the code with explanations, making it easier to understand and maintain. These conventions help in managing complex codebases by organizing and structuring the code efficiently, thereby facilitating more effective collaboration among developers .

Cross-browser compatibility ensures that a website renders consistently and functions correctly across different web browsers like Chrome, Firefox, Safari, and Edge. This process helps identify browser-specific rendering issues or inconsistencies that could negatively impact the user experience. Ensuring compatibility across browsers is crucial for reaching a wider audience and providing a seamless and professional web experience, as different browsers may interpret HTML, CSS, and JavaScript differently .

You might also like