(Section 1 Section 3 Section 4 Section 5)
Basic
Structure of an HTML Document:
HTML comments
HTML Comments look
like <!-- Comment --> and the browser ignores them; you can
just put them there for yourself or for others who might look at your HTML
document!
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8"
/>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Structure of HTML
Document</title>
</head>
<body>
<!-- Main content of
website -->
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
Every HTML document follows a fundamental structure to organize its content:
<!DOCTYPE html>:
This declaration defines the document type and version of HTML being used, typically HTML5 for
modern web pages.
<html>:
The root element that encloses all other HTML content on the
page. It often includes a lang attribute to specify the
document's language (e.g., <html lang="en">).
<head>:
<meta charset="UTF-8">: Specifies
the character encoding for the document (UTF-8 supports most characters from
all languages).
<meta name="viewport"
content="width=device-width, initial-scale=1.0">: Controls
the layout on mobile devices by setting the viewport width and scaling.
Contains metadata about the HTML document, such as the page
title, character set, links to external style sheets (CSS) Cascading Style
Sheets, and scripts (JavaScript). This content is not directly displayed
on the web page.
(Metadata is data
that describes other data, providing context and details that make information
easier to understand, find, use, and manage.
Examples include a book's title and author, a
photo's creation date and location, or the file type and size of a document.)
<title>: Sets
the title that appears in the browser's title bar or tab.
<meta>: Provides
various metadata like character set encoding (charset="UTF-8") or
viewport settings for responsive design, or descriptions for search engines..
<link>: Links external resources like stylesheets (<link
rel="stylesheet" href="style.css">) or favicons.
<style>: Embeds internal
CSS styles directly within the HTML document.
<script>: Embeds
or links external JavaScript files for interactive functionality..
<body>:
Contains the visible content of the HTML document, including
text, images, links, forms, and other elements that users interact with.
Web design principles
What are Principles of
Design?
The principles of design are basic rules that help make designs look good and work well.
They guide how to arrange elements in a
design to make it visually appealing and effective.
These rules include balance,
contrast, emphasis, movement, pattern, rhythm, and unity. By using these principles, designers can create more attractive and
effective designs.
Here are the main principles of design:
Balance: Distributing elements evenly to
create a sense of stability.
Contrast: Using differences in color, shape, or
size to make elements stand out.
Emphasis: Highlighting
the most important parts of a design.
Movement: Guiding the viewer's eye
through the design in a specific way.
Pattern: Repeating elements to create a sense
of order and consistency.
Rhythm: Creating a sense of movement by
repeating elements at regular intervals.
Unity: Making sure all parts of the design work together as a whole.
Web design principles, while not exclusive to HTML, are
fundamental concepts that guide the creation
of effective and user-friendly websites, many of which are implemented and
structured using HTML. These
principles aim to enhance usability, accessibility, and visual appeal.
Some more web design principles and how they relate to HTML:
Simplicity:
A clean and uncluttered
design improves usability. In HTML, this means avoiding excessive
elements, complex nesting, and ensuring clear content organization using
semantic tags like <header>, <nav>, <main>, <footer>, <article>,
and <section>. (uncluttered
- not having or impeded by too many objects)
Consistency:
Maintaining a uniform look and feel across all pages builds
trust and predictability. () HTML
elements, combined with CSS, should consistently apply styles for headings, paragraphs, buttons, and navigation
elements.
Visual Hierarchy:
Guiding the user's eye to important information through
visual cues. HTML structure, along with CSS, can achieve this through
varying heading sizes
(<h1> to <h6>), bolding, color, and strategic placement
of elements.
Navigation:
Providing clear and intuitive
(understand, know) ways for users to move around the site. HTML's <a> tags create hyperlinks,
and the <nav> element
explicitly defines navigation sections, often containing lists
(<ul>, <li>) for menu items.
Responsiveness and Mobile Friendliness:
Ensuring the website adapts to different screen sizes and
devices. While primarily achieved with CSS media queries, a well-structured HTML document with a
responsive viewport meta tag is crucial for this to function
correctly.
Readability and Typography: ()
Making content easy to read and understand. HTML
provides elements for text formatting, and developers use CSS to control font families, sizes, line heights,
and colors for optimal readability.
Fast Load Times:
Optimizing for speed to prevent user frustration. HTML
structure, image optimization (using <img> with loading="lazy" and
appropriate src and srcset), and efficient use of external
resources (CSS, JavaScript) contribute to faster loading. Faster page
loading times, which is a critical design principle for user experience.
Accessibility:
Designing for all users, including those with
disabilities. HTML elements like alt attributes for images, semantic tags, proper heading
structure, and ARIA attributes are vital for creating accessible web content.
User-Centric Design:
Prioritizing the needs and experience of the user. This overarching principle influences all design decisions, from content
organization in HTML to interactive elements.
HTML
Sample Programs
Program to
print head tag and body tag
<html>
<head>
Content in the head
tag.
</head>
<body>
Content in the body
tag.
</body>
</html>
Output
Content in
the head tag. Content in the body tag.
Program to print Hello World
<!DOCTYPE html>
<html>
<head>
<title>My
web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This
is my first web page.</p>
<p>It
contains a
<strong>main heading</strong> and <em> paragraph </em>.
</p>
</body>
</html>
Output
Program to print heading and paragraph
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output
My First Heading
My first paragraph.
No comments:
Post a Comment