forbeginners.html workshop.
css
1
2
3
4
What is ‘HTML’?? {
5
6
[HTML Stands for Hyper
7 text Markup Language]
8
9 As English is a language to write a Book,
10 HTML is a language to write Web-pages.
11
12
13 } Slides By- Koushik Roy.
Asst. Prof, HU.
14
Markup Language
forbeginners.html workshop.css
1
2
Table Of ‘Contents’ {
3
4 01 HTML
5
Describes the structure of a web page
6
7
8 02 CSS
9 Describes how the html element
should be styled and displayed.
10
11
12
03 JavaScript
Is the programming language
13 of the web.
14 }
Programming Language
forbeginners.html workshop.css
1
2
3
{ [The Boiler Plate]
Boilerplate is a section of code that's repeated in multiple places
with little to no variation. Basically it’s a template.
4
<!doctype html>
5 <html lang="en">
6 <head>
<meta charset="utf-8">
7
<meta name="viewport" content="width=device-width, initial-
8 scale=1">
9 <title>Demo Page</title>
</head>
10 <body>
11 <h1>Hello, world!</h1>
</body>
12 </html>
}
13
14
Programming Language
forbeginners.html workshop.css
1
2
The <!DOCTYPE> Declaration{
3 1. The <!DOCTYPE> declaration represents the document type,
4 and helps browsers to display web pages correctly.
5 2. It must only appear once, at the top of the page (before
any HTML tags).
6
7
} 3. The <!DOCTYPE> declaration is not case sensitive.
4. The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
8
9 HTML Headings
10
HTML headings are defined with the <h1> to <h6> tags.
11
<h1> defines the most important heading. <h6> defines
12 the least important heading.
13
14 }
Programming Language
forbeginners.html workshop.css
1
2
Meta tags{
Inside the <head> tag, there is one tag that is always
3 included: <title>, but there are others that are just as
4 important: like the meta tag. This is where information
5 about the document is stored: character encoding, name
(page context), description.
6
7
}
8
9 Body
10 The HTML <body> is where we add the content which is
11 designed for viewing by human eyes.
This includes text, images, tables, forms and
12
everything else that we see on the internet each
13 day.
14 }
Programming Language
1 Meta tags explained!
2 Meta tags are HTML elements placed in the <head> section of a web
3 page that provide metadata about the document. They serve several
4 critical purposes:
•Communicate information to browsers and search engines
5 •Improve SEO (Search Engine Optimization)
6 •Control page rendering and behavior
7 •Enhance social media sharing
8 •Improve accessibility and user experience
9
Five Crucial Meta tags
10 1. Charset Meta tag <meta charset="UTF-8">
11
12 Specifies the character encoding for the HTML document.
UTF-8 is the most common and recommended encoding.
13
Ensures proper rendering of special characters, accented letters,
14 and symbols.
Prevents text from displaying as garbled or incorrect characters.
1
2 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
3
4 2. Viewport Meta Tag
5
6 • Essential for responsive web design.
• Controls how a webpage is displayed on mobile devices.
7 • width=device-width: Matches the screen width of the device
8 initial-scale=1: Sets the initial zoom level.
9 • maximum-scale=1: Prevents users from zooming (use cautiously).
10 • Ensures consistent layout across different screen sizes.
• Improves mobile user experience.
11
12
13
14
1 <meta name="description" content="Comprehensive web design tutorials and resources for beginners
and professionals">
2
3
4 3. Description Meta Tag
5
6 • Provides a summary of the webpage's content
• Displayed in search engine result pages (SERPs)
7 • Typically limited to 150-160 characters
8 • Helps improve click-through rates from search results
9 • Gives users a quick understanding of the page content
10 • Important for SEO and user engagement
11
12
13
14
<meta property="og:title" content="Web Design Tutorials">
1 <meta property="og:type" content="website">
2 <meta property="og:url" content="https://example.com/tutorials">
<meta property="og:image" content="https://example.com/preview-image.jpg">
3 <meta property="og:description" content="Learn web design from scratch">
4
4. Open Graph Meta Tags
5
6 • Control how content appears when shared on social media platforms.
7 • Specify title, type, URL, image, and description for social
8 sharing.
• Supported by platforms like Facebook, LinkedIn, Twitter.
9
• Ensures attractive and informative social media previews.
10 • Increases content visibility and click-through rates.
11
12
13
14
1
<meta name="robots" content="index, follow"><!-- Variations -->
2 <meta name="robots" content="noindex, nofollow">
3 <meta name="robots" content="index, nofollow">
4
5. Robot Meta Tag
5 • Instructs search engine crawlers how to handle the page.
6 • Common values:
7 index: Allow page to be indexed
8 noindex: Prevent page from being indexed
follow: Follow links on the page
9
nofollow: Don't follow links on the page
10 • Helps control search engine behavior.
11 • Useful for managing SEO and content visibility.
12 • Protects sensitive or duplicate content from being indexed.
13
14
forbeginners.html workshop.css
1
2
HTML Paragraphs
3 {
4 Adding text to our HTML page is simple using an element
opened with the tag <p> which creates a new paragraph. We
5
place all of our regular text inside the element <p>.
6
7
}
8
9 HTML Links
10 HTML links are defined with the <a> tag:
11 <a href="https://www.google.com">This is a link</a>
12
The link's destination is specified in
13 the href attribute.
14 }
Programming Language
forbeginners.html workshop.css
1 The A Href Attribute Example
2 {
3 The <a href> attribute refers to a destination provided by a
4 link. The a(anchor) tag is dead without the <href> attribute.
5 Sometimes in your workflow, you don’t want a live link or you
6 won’t know the link destination yet. In this case, it’s useful
7 to set the href attribute to "#" to create a dead link.
8 The href attribute can be used to link to local files or files
9 on the internet.
10 <a href="#">This is a dead link</a>
11
<a href="https://www.freecodecamp.org">This is a live link to
12 freeCodeCamp</a>
13
14 }
Programming Language
forbeginners.html workshop.css
1
2
In-page anchors
3 { It’s also possible to set an anchor to certain place
of the page. To do this you should use tag with
4 necessary attribute “href” with symbol # (sharp) and
5 key-word description of the anchor, like this:
6
7
} <a href="#top">Go to Top</a>
8
9 Image Links
10 The <a href="#"> may also be applied to images and
11 other HTML elements.
12 <a href="#"> <img style="height: 90px;"
src="https://bit.ly/fcc-relaxing-cat" alt="A cute
13 orange cat lying on its back."> </a>
14 }
Programming Language
forbeginners.html workshop.css
1 The A Target Example
2
3
{ The <a target> attribute specifies where to open the linked
document in an a (anchor) tag.
A target attribute with the value of “_blank” opens the linked
4
document in a new window or tab.
5 <a
6 href="https://www.freecodecamp.org/"target="_blank">freeCodeCamp
7 } </a>
8
9 Self
A target attribute with the value of “_self” opens the
10
linked document in the same frame as it was clicked
11 (this is the default and usually does not need to be
12 specified).
13 <a href="https://www.freecodecamp.org/"
14 } target="_self">freeCodeCamp</a>
Programming Language
When we write text in HTML, we also have a number of other elements we can use
1 to control the text or make it appear in a certain way.
2
3
4
5
6
7
8
9
10
11
12
13
14
forbeginners.html workshop.css
1
2
HTML List {
3 In web design, there are 3 different types of
4 lists which you may wish to add to your site.
5
6 1. Ordered List The first is an <ol>: which
7 contains numbering.
8 This is denoted by <ul>. This
is better known as a bullet
9 2. Unordered List point list and contains no
10 numbers.
11
Finally, you may wish to
12 3. Defination List include a definition
13 list <dl> on your page.
14 }
Programming Language
forbeginners.html workshop.css
1
2
Practical Example {
∗ <ol>
3 <ol> ∗ <li>An item </li>
4 ∗ <li>Another item </li>
∗ <li>Another goes here </li>
5 ∗ </ol>
6 ∗ <ul>
7 <ul> ∗ <li>This is </li>
8 ∗ <li>An Unordered </li>
∗ <li>List </li>
9 ∗ </ul>
10
11 ∗ <dl>
12 <dl> ∗ <dt>Item</dt>
∗ <dd>The definition goes here</dd>
13 ∗ </dl>
14 }
Programming Language
forbeginners.html workshop.css
1
2
HTML Tables
3 { Another way to keep your website looking neat and
orderly is through the use of a table.
4
5 A table is defined using the <table> element, and
6 contains a number of table cells ( <td>, for “table data”
7 ) which are organized into table rows ( <tr>). The markup
(HTML code) for a table is always based on rows, never
8
columns.
9
10 But what does table consists of??
11
When drawing a table we must open an element with
12
the <table> opening tag. Inside this tag, we structure
13 the table using the table rows, <tr>, and cells, <td>.
14 }
Programming Language
forbeginners.html workshop.css
1
2
Using Tables
3 { Table cells which act as column headers or row headers
4
should use the <th> (table header) element.Table cells
5 can be merged using
6 the colspan and rowspan attributes.Tables can be broken
7 into sections using the following elements:
<thead> — Table header
8
<tbody> — Table body
9 <tfoot> — Table footer
10 A caption can be added to a table using
11 the <caption> element.You can use <col> and <colgroup> to
define table columns for styling.
12
13
14 }
Programming Language
forbeginners.html workshop.css
1
2
Table Tags{
3
M T W T F S S <th> - Defines a header cell in a table
4
5 01 02 03 04 05 <tr> - Defines a row.
6
06 07 08 09 10 11 12 <td> - Defines a cell.
7
8 13 14 15 16 17 18 19 <caption> - Defines a caption.
9
20 21 22 23 24 25 26 <colgroup> - Specifies a group of
10 one or more columns in a table
11 27 28 29 30 for formatting
12 <tfoot> - groups footer content.
13
14 }
Programming Language
forbeginners.html workshop.css
1
2
HTML Entities {
3
4
Overview
5 HTML entities are characters that are used to replace
reserved characters in HTML or for characters that do
6
not appear on your keyboard. Some characters are
7 reserved in HTML. If you use the less than(<) or
8 greater than(>) signs in your text, the browser might
9 mix them up with tags.
10
11 What are they used for?
12 As mentioned about HTML entities are used in order
13 to replace reserved characters that are reserved by
14 } HTML.
Programming Language
Entity Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTML Forms
Basically, forms are used to collect data entered by a user, which
1 are then sent to the server for further processing. They can be used
2 for different kinds of user inputs, such as name, email etc.
3
4 Form contains control elements which are wrapped
around <form></form>tags, like input, which can have types like:
5
6 Text Search
7 Email Date
8
Password Time
9
Checkbox Hidden
10
11 Radio Week
12 Submit Color
13 Range Datalist
14
Programming Language
Code Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Programming Language
#
1
2 Other elements that form can contain:
3
textarea - is a multiline box which is most often used for
4
adding some text eg. comment. Size of textarea is defined by
5 number of rows and columns.
6
7 select - together with <option></option> tag creates drop-down
select menu.
8
9 button - The button element can be used to define a clickable
10 button.
11
12
13
14
Programming Language
Button Controls workshop.css
There are various ways in HTML to create clickable buttons. You can
1 {
also create a clickable button using <input> tag by setting its type
2 attribute to button. The type attribute can take the following values:
3
4
5
6
7
8
9
10
11
12
13
14 }
HTML
#
1 The HTML <form> tag is used to create an HTML form and it has
2 following syntax −
<form action="Script URL" method="GET|POST">
3
form elements like input, textarea etc.
4 </form>
5
6 If the form method is not defined then it will default to “GET”.
7
The form tag can also have an attribute named “target” which
8 specifies where the link will open. It can open in the browser
9 tab, a frame, or in the current window.
10
11 The action attribute defines the action to be performed when the
form is submitted. Normally, the form data is sent to a web page
12 at the Script URL when the user clicks on the submit button. If
13 the action attribute is omitted, the action is set to the current
14 page.
Programming Language
forbeginners.html workshop.css
1
2
HTML Semantics {
3 Overview
4 Semantic HTML elements clearly describe it’s meaning
in a human and machine readable way. Elements such
5
as <header>, <footer> and <article> are all considered
6 semantic because they accurately describe the purpose
7 of the element and the type of content that is inside
8 them.
9 What are they used for?
10
11 Elements such as <header>, <nav>, <section>, <article>, <aside>,
and <footer> act more or less like <div> elements. They group other
12
elements together into page sections. However where a <div> tag could
13 contain any type of information, it is easy to identify what sort of
14 } information would go in a semantic <header> region.
Programming Language
forbeginners.html workshop.css
1
2
Semantic layout {
3
4
5
6
7
8
9
10
11
12 Semantic layout & its code. Non- semantic code ex.
13
14 }
Programming Language
Benefits of Semantics ***
First, it is much easier to read. This is probably the first thing you
1 will notice when looking at the first block of code using semantic
2 elements. This is a small example, but as a programmer you can be reading
3 through hundreds or thousands of lines of code. The easier it is to read
and understand that code, the easier it makes your job.
4
5 It has greater accessibility. You are not the only one that finds semantic
6 elements easier to understand. Search engines and assistive technologies
7 (like screen readers for users with a sight impairment) are also able to
8 better understand the context and content of your website, meaning a
better experience for your users.
9
10 Overall, semantic elements also lead to more consistent code. When
11 creating a header using non-semantic elements, different programmers might
12 write this as <div class="header">, <div id="header">, <div class="head">,
or simply <div>. There are so many ways that you can create a header
13 element, and they all depend on the personal preference of the programmer.
14 By creating a standard semantic element, it makes it easier for everyone.
<section> V/S <article>
1 What’s the diff?{
2 Both these elements are used for sectioning
3 a content, and yes, they can definitely be
used interchangeably. It’s a matter of in
4
which situation. HTML4 offered only one
5 type of container element, which is <div>.
6 While this is still used in HTML5, HTML5
7 provided us with <section>and <article> in
a way to replace <div>.
8
The <section> and <article> elements are
9 conceptually similar and interchangeable.
10
11 To decide which of these you should choose,
take note of the following:
12
1. An article is intended to be
13 independently distributable or reusable.
14 } 2. A section is a thematic grouping of
content.
Programming Language
Block-level V/S Inline elements
1 What’s the diff?{
2 A block-level element always starts on a new line, and the
3 browsers automatically add some space (a margin) before and after
the element.
4 A block-level element always takes up the full width available
5 (stretches out to the left and right as far as it can).
6 Two commonly used block elements are: <p> and <div>.
7
An inline element does not start on a new line.
8
An inline element only takes up as much width as necessary.
9
10
11
12
13
14 }
HTML
HTML V/S XHTML or XML
1 What’s XHTML and what’s the diff?{
2
3
XHTML stands for
4 EXtensible HyperText Markup Language
5 XHTML is a stricter, more XML-based
6 version of HTML
7 XHTML is HTML defined as an XML
application
8 XHTML is supported by all major
9 browsers
10
11
12
13
14 }
HTML
forbeginners.html workshop.css
1
2
HTML or Web Accessibility{
3 Web accessibility ensures that websites and web applications
4 are usable by people with various disabilities, including:
1. Visual impairments
5
2. Hearing impairments
6 3. Motor disabilities
7 4. Cognitive disabilities
8 5. Neurological conditions
9
It provides the user a good way to navigate and interact with
10 your site. So make your HTML code as semantic as possible.
11 Always write HTML code with accessibility in mind!
12
13
14 }
** This is very important when designing web pages.
forbeginners.html workshop.css
1 Key HTML attributes for Accessibility:
2
3 Alt Attribute Tabindex attribute
4 Provides text descriptions for images. Enables keyboard navigation.
5 Crucial for screen reader users. Allows non-interactive elements to
receive keyboard focus.
6
Helps users who can't use a mouse.
7 Lang attribute
8
Specifies document language.
9 Helps screen readers use
10
Headings Semantic tags
correct pronunciation.
11 Search engines use the headings to Provide meaningful
12 index the structure and content of your structure
13 web pages. Help screen readers
Screen readers also use headings as a understand page layout
14
navigational tool.
** This is very important when designing web pages.
A ‘Picture’ Is {
Worth a Thousand
Words
So the CSS to the HTML
}
forbeginners.html workshop.css
1
2
3
4
5 What is CSS??{
6
7 CSS stands for Cascading Style Sheets.
CSS describes how HTML elements
8
are to be displayed on screen, paper,
9 or in other media
10 CSS saves a lot of work. It can
11 control the layout of multiple web
pages all at once.
12
External stylesheets are stored
13 with .css extensions as CSS file.
14 }
Programming Language
forbeginners.html workshop.css
1
2
Responsive Web Design{
Responsive web design is about creating web pages that look good on
3
all devices!
4 A responsive web design will automatically adjust for different
5 screen sizes and viewports.
6
7
8 Setting The Viewport:
9 To create a responsive
10 website, add the
11 viewport meta tag to
12 all your web pages.
13
14 }
Programming Language
forbeginners.html workshop.css
1
2
Responsive Images & Texts{
Responsive images are images that scale nicely to fit any browser
3
size.
4
5 Using the Max-width property instead of just the width
6 property.
7 <img src=”demo.jpeg" style="max-width:100%; height:auto;">
8
For Responsive text, size can be set with a "vw" unit, which
9
means the "viewport width".
10 That way the text size will follow the size of the browser
11 window:
12 <h1 style="font-size:10vw">Hello World</h1>
13
14 }
Programming Language
forbeginners.html workshop.css
1
2
Media Queries{
In addition to resize text and images, it is also common to use
3
media queries in responsive web pages.
4 With media queries you can define completely different styles for
5 different browser sizes.
6
Basic Syntax: Key Use Cases:
7
@media screen and (min-width: 600px) Responsive Layout Adjustment
8 and (max-width: 900px) { Different Styling for Different
9 .element { Devices
10 background-color: blue; Hide/Show Elements Conditionally
font-size: 16px; Adjust Typography and Spacing
11
}
12 } Common Media Query Breakpoints:
13 Mobile: up to 600px
14 } Tablet: 601px - 900px
Desktop: 901px and above
Programming Language
forbeginners.html workshop.css
1 CSS techniques for Web Accessibility{
2
1. Color Contrast
3
4 body { color: #333; /* Dark gray text
5 */ background-color: #fff; /* White
background */
6 }
7 /* Use tools to check contrast ratio
*/.important-text { color: #0066cc; /*
8 Ensure sufficient contrast */}
9
10 * Ensure sufficient color contrast
11 * Help users with color blindness or visual impairments
12
13
14 }
CSS Accessibility is also very important as HTML Accessibility.
forbeginners.html workshop.css
1 CSS techniques for Web Accessibility{
2
2. Focus Styles
3
4 /* Enhance keyboard focus visibility */
:focus {
5
outline: 3px solid blue;
6 outline-offset: 2px;
7 }
8
9
* Make focus states visible
10
* Help keyboard navigation users understand current focus
11 * Provide clear visual indicators
12
13
14 }
CSS Accessibility is also very important as HTML Accessibility.
forbeginners.html workshop.css
1 CSS techniques for Web Accessibility{
2
3. Text Sizing and Readability
3
4 body {
font-size: 16px; /* Minimum recommended size */
5 line-height: 1.5; /* Improve readability */
6 }
/* Allow text resizing */
7 body {
8 font-size: 100%; /* Use relative units */
}
9
10 * Use relative units
11 * Ensure text can be resized
12 * Improve readability for users with visual impairments
13
14 }
CSS Accessibility is also very important as HTML Accessibility.
forbeginners.html workshop.css
1 CSS techniques for Web Accessibility{
2
4. Hide Content Accessibly
3
4 .screen-reader-only {
position: absolute;
5
width: 1px;
6 height: 1px;
7 padding: 0;
margin: -1px;
8 overflow: hidden;
9 white-space: nowrap;
border: 0;}
10
11 * Hide content visually while keeping it available to
screen readers
12
* Provide additional context for assistive technologies
13
14 }
CSS Accessibility is also very important as HTML Accessibility.
forbeginners.html workshop.css
1 CSS techniques for Web Accessibility{
2
5. Responsive Design
3
4
@media screen and (max-width: 600px) {
5 /* Adjust layout for smaller screens */
6 .navigation {
display: flex;
7 flex-direction: column; }
8 }
9
10
11 * Ensure content is usable on different devices.
* Support users with motor impairments using various
12
devices.
13 * Provide adaptable interfaces.
14 }
CSS Accessibility is also very important as HTML Accessibility.
forbeginners.html workshop.css
1
2
3
4 Its all about
5
6
Practice. {
7
8 First do the pricing
9 panel given in Whatsapp.
10 Then try to redesign our
11 University site.
12
13
14 }
Programming Language
forbeginners.html workshop.css
1
2
Web ‘Design’
3
4
5
6
7
8
9
10
11
12
13
14
Programming Language
