WEB TECHNOLOGIES – HTML AND CSS
Fundamentals of Web Pages, HTML Structure and CSS Styling
1. Introduction to Web Technologies
Web Technologies are the tools, languages, protocols, and standards used to create and deliver
websites and web applications. A web page is typically displayed through a browser and may
contain text, images, links, forms, multimedia, and interactive elements.
The World Wide Web is based on communication between clients and servers. A browser acts as
a client and requests resources from a web server. The server responds with documents and other
resources that the browser interprets and displays.
HTML and CSS form two fundamental technologies of the web. HTML provides the structure and
meaning of content, while CSS controls presentation, layout, appearance, and responsive
behavior.
2. World Wide Web and Web Browsers
The World Wide Web is a system of interconnected resources accessed over the Internet using
web protocols. Users access web resources through browsers such as Chrome, Firefox, Edge, or
other modern browsers.
A browser interprets HTML documents and applies CSS rules to determine how content should be
presented. It can also execute client-side scripts and communicate with web servers.
Understanding the browser's role is important because web development involves creating
documents that different browsers can interpret consistently. Web standards help developers
create accessible and interoperable websites.
3. Client-Server Architecture
Web applications commonly use a client-server architecture. The client is usually a browser
running on a user's device, while the server stores resources and processes requests.
When a user enters a URL or selects a link, the browser sends a request to the appropriate server.
The server may return an HTML document, CSS stylesheet, image, JavaScript file, or other
resource.
Modern web applications can involve multiple servers and services, but the basic idea remains the
same: clients request resources or services and servers respond with the required information.
4. HTML: HyperText Markup Language
HTML stands for HyperText Markup Language. It is the standard markup language used to
structure content on web pages. HTML is not primarily a programming language; it uses elements
and attributes to describe the meaning and organization of content.
HTML documents can contain headings, paragraphs, lists, links, images, tables, forms, multimedia,
and semantic sections. Browsers parse HTML and construct a document structure that can be
displayed to users.
A well-structured HTML document improves accessibility, maintainability, search-engine
understanding, and compatibility with different devices and browsers.
5. Basic Structure of an HTML Document
A typical HTML document contains a document type declaration and an html element with head
and body sections. The head contains information about the document, such as its title, metadata,
linked stylesheets, and other resources.
The body contains the visible page content, including headings, paragraphs, images, links, lists,
tables, forms, and other elements.
A basic document structure helps browsers interpret the page correctly. Developers should use
valid and meaningful HTML rather than relying on visual formatting alone.
6. HTML Elements and Tags
HTML uses elements to represent different types of content. Elements are commonly written using
opening and closing tags, although some elements are void elements and do not require a closing
tag.
Examples include heading elements, paragraph elements, links, images, lists, and forms. The
element name communicates the role of the content.
Using the correct element for the intended purpose is an important principle of semantic HTML. For
example, headings should represent headings rather than being used simply because they
produce a particular visual size.
7. HTML Attributes
Attributes provide additional information about HTML elements. They are generally written inside
the opening tag and consist of a name and value.
For example, an anchor element uses the href attribute to specify a destination, while an image
element commonly uses src to specify the image resource and alt to provide alternative text.
Attributes allow developers to configure elements, identify them, connect them to styles or scripts,
and provide accessibility-related information. Attribute values should be written carefully and
should follow the requirements of the relevant HTML specification.
8. Headings and Paragraphs
HTML provides heading elements for organizing document content. Headings range from the
highest-level heading to lower-level headings and should reflect the logical hierarchy of the page.
Paragraph elements are used for blocks of ordinary text. Developers should avoid using repeated
line breaks or decorative elements to imitate document structure.
Proper heading hierarchy makes content easier to understand for users and assistive technologies.
It also improves the organization of long web pages and helps search engines interpret page
structure.
9. Links and Navigation
Hyperlinks are one of the defining features of the Web. The anchor element is used to create links
to other pages, documents, sections, or resources.
A link normally includes a destination specified by the href attribute. Links can point to another
website, another page within the same site, a particular section of a document, or other supported
resources.
Navigation should be designed clearly so users can understand where each link leads. Meaningful
link text is preferable to vague labels because it provides better context for users and accessibility
tools.
10. Images and Multimedia
Images can be included in HTML using the image element. Important attributes include the source
of the image and alternative text. Alternative text is particularly important because it provides a
textual description when an image cannot be viewed or when a user relies on assistive technology.
Modern HTML also supports audio and video elements. These allow multimedia content to be
integrated into web pages without relying entirely on external plugins.
Images and multimedia should be optimized for performance and presented in ways that remain
usable across different screen sizes and connection speeds.
11. HTML Lists
HTML provides ordered and unordered lists for presenting collections of related items. Ordered
lists are appropriate when sequence matters, while unordered lists are useful when order is not
important.
List items are represented using the appropriate list-item element. Lists can also be nested to
represent hierarchical information.
Lists are useful for navigation menus, instructions, features, outlines, and many other types of
content. Using list elements instead of manually inserting symbols or spacing produces more
meaningful and accessible documents.
12. HTML Tables
Tables are designed to represent structured tabular data arranged in rows and columns. A table
can contain headers, data cells, rows, captions, and sections.
Tables should be used for genuine tabular information rather than page layout. Appropriate header
elements and associations improve accessibility and make complex data easier to understand.
HTML tables are especially useful for presenting schedules, marks, product specifications, financial
information, and other datasets where relationships between rows and columns are important.
13. HTML Forms
Forms allow users to enter and submit information. Common form controls include text fields,
password fields, email fields, number inputs, checkboxes, radio buttons, selection controls, text
areas, and buttons.
A form can specify how and where its data should be submitted. Labels should be associated with
form controls so that users can understand what information is required.
Form design should consider usability, accessibility, validation, security, and error handling. Client-
side validation can improve user experience, but server-side validation remains necessary for
reliable applications.
14. Semantic HTML
Semantic HTML uses elements that describe the meaning or role of content. Examples include
header, navigation, main content, section, article, aside, and footer elements.
Semantic markup makes documents easier for developers and assistive technologies to
understand. It also creates a clearer structural foundation for CSS and JavaScript.
Instead of using generic containers for every part of a page, developers should choose semantic
elements where appropriate. This improves maintainability and contributes to accessible web
development.
15. Introduction to CSS
CSS stands for Cascading Style Sheets. It is used to control the presentation of HTML documents.
CSS can define colors, fonts, spacing, borders, dimensions, positioning, layouts, animations, and
responsive behavior.
Separating content from presentation is one of the major advantages of CSS. HTML can describe
the structure of a document while CSS defines how that structure should appear.
A single stylesheet can be applied to many pages, allowing a consistent visual design and making
site-wide changes easier to manage.
16. Ways to Apply CSS
CSS can be applied to HTML in several ways. Inline CSS is written directly within an HTML
element. Internal CSS is placed within a style element in the document head. External CSS is
stored in a separate stylesheet and linked to the HTML document.
External stylesheets are generally preferred for larger websites because they encourage
separation of concerns and allow styles to be reused across multiple pages.
Choosing an appropriate method depends on the project requirements, but maintainable
applications generally favor organized external stylesheets or well-structured component-level
styling systems.
17. CSS Selectors
CSS selectors determine which HTML elements a rule applies to. Common selectors include
element selectors, class selectors, ID selectors, attribute selectors, and combinations of selectors.
A class selector can be reused across multiple elements, while an ID is intended to identify a
particular element within a document. More advanced selectors can target elements based on
relationships, states, or attributes.
Understanding selectors is essential because selector choice determines the scope of a style rule.
Poorly designed selectors can make styles difficult to maintain or override.
18. CSS Properties and Values
CSS rules consist of properties and values. A property identifies the aspect of presentation being
changed, while the value specifies how it should be configured.
Examples include properties for color, background, font, width, height, margin, padding, border,
display, and position. Different properties accept different types of values, including keywords,
numbers, percentages, lengths, and color values.
Developers should choose values appropriate to the design and should consider relative units
where responsive behavior is required.
19. CSS Box Model
The CSS box model describes how an element occupies space. It consists of content, padding,
border, and margin.
Content is the actual material inside the element. Padding creates space between the content and
the border. The border surrounds the padding and content, while margin creates space outside the
border.
Understanding the box model is essential for controlling dimensions and spacing. The box-sizing
property can also influence how declared width and height are calculated.
20. Colors, Fonts and Text Styling
CSS provides extensive control over typography and visual presentation. Developers can define
font families, font sizes, weights, styles, line heights, letter spacing, text alignment, and other
properties.
Colors can be specified using named values, hexadecimal notation, RGB-based formats, and other
supported representations. Background colors and images can also be controlled with CSS.
Typography should be selected with readability and accessibility in mind. Sufficient contrast,
appropriate font sizes, and comfortable line spacing contribute to a better user experience.
21. CSS Display and Positioning
The display property determines how an element participates in layout. Common values include
block, inline, inline-block, flex, and grid.
CSS positioning provides mechanisms for controlling where elements appear. Relative, absolute,
fixed, and sticky positioning can be used for different layout requirements.
Developers should understand normal document flow before relying heavily on positioning. Modern
layouts are generally better handled using Flexbox and Grid rather than extensive manual
positioning.
22. Flexbox
CSS Flexible Box Layout, commonly called Flexbox, is designed for arranging elements along one
dimension. It can distribute available space and align items efficiently.
Flexbox provides properties for direction, wrapping, alignment, justification, ordering, and flexible
sizing. It is particularly useful for navigation bars, toolbars, cards, form layouts, and other row- or
column-based interfaces.
Flexbox simplifies many layouts that previously required complicated combinations of floats, tables,
or positioning.
23. CSS Grid
CSS Grid Layout provides a powerful system for arranging content in two dimensions. Developers
can define rows and columns and place elements within a structured grid.
Grid is useful for page layouts, dashboards, galleries, card collections, and interfaces requiring
precise relationships between rows and columns.
Flexbox and Grid are complementary technologies. Flexbox is often useful for one-dimensional
alignment, while Grid is especially suitable for two-dimensional layouts.
24. Responsive Web Design
Responsive Web Design is an approach in which a website adapts to different screen sizes and
device characteristics. A responsive page should remain usable on desktop computers, tablets,
and smartphones.
CSS media queries allow styles to change based on conditions such as viewport width. Flexible
units, responsive images, Flexbox, Grid, and mobile-friendly navigation are commonly used to
create responsive interfaces.
Responsive design is important because users access websites through a wide range of devices.
A page designed only for one fixed screen size can become difficult to read or operate on other
devices.
25. CSS Cascade, Specificity and Inheritance
The word cascade in CSS refers to the process by which competing style rules are resolved. When
multiple rules apply to the same element, factors such as origin, importance, specificity, and source
order influence the final result.
Specificity determines how strongly a selector targets an element. Inheritance allows certain
properties to be passed from parent elements to descendants.
Understanding the cascade helps developers diagnose unexpected styling behavior. Instead of
relying heavily on !important, developers should generally use clear selectors and a predictable
stylesheet structure.
26. CSS Pseudo-classes and Pseudo-elements
Pseudo-classes represent special states or conditions of elements. Examples include hover, focus,
active, checked, and first-child-related states.
Pseudo-elements allow developers to style particular parts of an element or generate
presentational content. Common examples include before, after, first-letter, and first-line.
These features make it possible to create interactive visual effects and refined designs without
adding unnecessary HTML elements.
27. Web Accessibility
Accessibility means designing websites so that people with different abilities can use them
effectively. HTML and CSS both contribute to accessible web experiences.
Semantic HTML, meaningful headings, alternative text, labels, keyboard-friendly controls, visible
focus indicators, appropriate color contrast, and responsive layouts all support accessibility.
Developers should avoid using color as the only way to communicate information and should
ensure that interactive elements remain usable without relying exclusively on a mouse.
28. HTML and CSS Best Practices
Good web development practices include using semantic HTML, separating content from
presentation, maintaining consistent naming conventions, organizing styles logically, and avoiding
unnecessary duplication.
Developers should validate markup, keep CSS maintainable, optimize images and other
resources, and test pages across different screen sizes and browsers.
Readable code is particularly important for educational and professional projects because web
pages are frequently maintained and extended by people other than their original authors.
29. HTML and CSS Performance
Web performance affects how quickly users can access and interact with a page. Large images,
excessive stylesheets, unnecessary resources, and inefficient page structures can increase
loading time.
Developers can improve performance by compressing images, using appropriate image formats,
minimizing unnecessary resources, caching static files, and avoiding excessive CSS complexity.
Performance should be considered alongside usability and visual quality. A visually attractive page
is less effective if users must wait too long for it to become usable.
30. Applications of HTML and CSS
HTML and CSS are used to create websites, institutional portals, blogs, documentation sites,
dashboards, landing pages, e-commerce interfaces, online forms, educational platforms, and many
other web-based interfaces.
HTML provides the content structure while CSS creates the visual presentation. JavaScript and
server-side technologies can later add interaction, dynamic behavior, authentication, database
connectivity, and other application features.
Together, HTML and CSS provide the fundamental presentation layer for a large portion of the
modern Web.
31. Conclusion
HTML and CSS are foundational technologies for web development. HTML provides semantic
structure and organizes content, while CSS controls visual appearance, layout, responsiveness,
and presentation.
A strong understanding of elements, attributes, links, forms, tables, semantic structure, selectors,
the box model, Flexbox, Grid, responsive design, accessibility, and the CSS cascade gives
students a solid foundation for further study.
Once these fundamentals are understood, learners can progress to JavaScript, server-side
programming, databases, APIs, frameworks, and complete web application development. The
principles of clean structure, separation of concerns, accessibility, and responsive design remain
valuable throughout a web developer's career.
Educational material – Web Technologies: HTML and CSS