CREATIVE DESIGN & MULTIMEDIA INSTITUTE
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Creative</h1>
<p>My first Practicle</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Demo...</tagname>
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML Editors
1.Notepad
2. Sublime
3. Notepad++
4. Atom
5. Vim
Use Lowercase Element Names
HTML allows mixing uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:
Mixing uppercase and lowercase names looks bad
Developers normally use lowercase names
Lowercase looks cleaner
Lowercase is easier to write
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
<title></title> Defines a title for the document
<body></body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the
content
<!--……..--> Defines a comment
Basic HTML
Formatting Tag List
<abbr title="World ">WHO</abbr> Defines an abbreviation or an
was founded in 1948. acronym
<b> Defines bold text
<center> Defines centered text
<del> Defines text that has been deleted
from a document
<em> Defines emphasized text
<font> Defines font, color, and size for text
<i> Defines a part of text in an alternate
voice or mood
<mark> Defines marked/highlighted text
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
<s> Defines text that is no longer correct
<small> Defines smaller text
<strike> Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<u> Defines some text that is
unarticulated and styled differently
from normal text
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing
tag:
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Images
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
<img src="pic_trulli.jpg" alt="Demo" width="100px" height="100px"
title="demo" border="5px">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to
slow connection, or an error in the src attribute, or if the user uses a screen
reader.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
Example:
<pre>
Creative
Design &
Multimedia
Institute
</pre>
HTML Quotation and Citation Elements
In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>
and <bdo> HTML elements.
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
<blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from
another source.
Browsers usually indent <blockquote> elements
Output:
<q> for Short Quotations
The HTML <q> tag defines a short quotation.
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>
<abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".
Example
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> was founded
in 1948.</p>
<address> for Contact Information
The HTML <address> tag defines the contact information for the
author/owner of a document or an article.
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem,
a song, a movie, a painting, a sculpture, etc.).
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
Example:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comments
<!-- Write your comments here -->
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
NOTE
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
An active link is underlined and red
HTML Images
he HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
The src Attribute
Note: When a web page loads; it is the browser, at that moment, that gets
the image from a web server and inserts it into the page. Therefore, make
sure that the image actually stays in the same spot in relation to the web
page, otherwise your visitors will get a broken link icon. The broken link icon
and the alt text are shown if the browser cannot find the image.
HTML accesskey Attribute
Example:
<a href="https://www.cdmi.in" accesskey="s">Creative</a><br>
Definition
1. The accesskey attribute specifies a shortcut key to activate/focus an
element.
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
2. The access attribute value must be a single character (a letter or a digit).
HTML <ol> Tag
Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Definition
The <ol> tag defines an ordered list. An ordered list can be numerical
or alphabetical.
Attributes
HTML <ul> Tag
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Attributes
HTML Input
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
HTML Input Attributes
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
The value Attribute
The input value attribute specifies an initial value for an input field:
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
The disabled Attribute
The input disabled attribute specifies that an input field should be
disabled.
The size Attribute
The input size attribute specifies the visible width, in characters, of an
input field.
The maxlength Attribute
The input maxlength attribute specifies the maximum number of
characters allowed in an input field.
The min and max Attributes
The input min and max attributes specify the minimum and maximum
values for an input field.
NOTE : The min and max attributes work with the following input types:
number, range, date, datetime-local, month, time and week.
The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more
than one value in an input field.
The multiple attribute works with the following input types: email, and file.
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
The placeholder Attribute
The input placeholder attribute specifies short a hint that describes the
expected value of an input field (a sample value or a short description of the
expected format).
The required Attribute
The input required attribute specifies that an input field must be filled out
before submitting the form.
The step Attribute
The input step attribute specifies the legal number intervals for an input
field.
The autofocus Attribute
The input autofocus attribute specifies that an input field should
automatically get focus when the page loads.
Using Emojis in HTML
Emojis look like images, or icons, but they are not.
They are letters (characters) from the UTF-8 (Unicode) character set.
😄 is 128516
😍 is 128525
💗 is 128151
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
HTML Canvas Graphics
What is HTML Canvas?
The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript.
The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
Example:
<canvas width="200" height="100" style="border:1px solid red;">
HTML SVG Graphics
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic
images.
Exmaple:
<svg width="100" height="100">
<circle cx="50" cy="50" fill="yellow" r="40" stroke-
width="4" stroke="green" />
</svg>
NOTE: Code explanation: The cx and cy attributes define the x and y coordinates of the
center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) The
r attribute defines the radius of the circle.
SVG Rectangle
<svg width="400" height="100">
<rect width="400" height="100" style="fill:red; stroke-width:10;
stroke:rgb(0,78,255)" />
</svg>
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
HTML Multimedia
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you
can hear or see, like images, music, sound, videos, records, films,
animations, and more.
HTML Video
The HTML <video> element is used to show a video on a web page.
Example :
<video width="520" height="240"
poster="https://i.ytimg.com/vi/d1FZGpv2-Q4/maxresdefault.jpg"
controls>
<source src="ghungharu.mp4" type="video/mp4" width="100%">
Your browser does not support the video tag.
</video>
Definition and Usage
The poster attribute specifies an image to be shown while the video is
downloading, or until the user hits the play button. If this is not included, the
first frame of the video will be used instead.
HTML Semantic Elements
A semantic element clearly describes its meaning to both the browser and
the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing
about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header, and
footer.
In HTML there are some semantic elements that can be used to
define different parts of a web page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML <header> Element
The <header> element represents a container for introductory content or a
set of navigational links.
A <header> element typically contains:
logo or icon
authorship information
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
HTML <footer> Element
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
HTML <aside> Element
The <aside> element defines some content aside from the content it is placed
in (like a sidebar).
The <aside> content should be indirectly related to the surrounding content.
HTML5 <article> Tag
Definition
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Potential sources for the <article> element:
Forum post
Blog post
News story
HTML5 <aside> Tag
Definition
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be indirectly related to the surrounding content.
Tip: The <aside> content is often placed as a sidebar in a document.
Example:
Bbc news
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
CSS (Cascading Style Sheets)
What Is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web
pages all at once
External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
CSS Syntax
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
How To Add CSS
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
CSS METHORD
1.TAG
2. CLASS
3. #ID
4. @MEDIA
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
CSS Backgrounds
background-color: green;
background: rgba(0, 128, 0, 0.3)
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
Tip: To repeat an image vertically, set background-repeat: repeat-y;
background-repeat: no-repeat; for no image reapeat .
background-position: right top; for background position
background-attachment: fixed; for image fix
background-attachment: scroll; when you scroll image scroll
background-size: auto;
CSS background - Shorthand property
background: #ffffff url("img_tree.png") no-repeat right top;
CSS border Property
border: 5px solid red;
border-bottom: 5px solid red;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 50px 20px;
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Border style Property
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
Margin - Individual Sides
margin-top
margin-right
margin-bottom
margin-left
CSS Padding
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
Padding - Individual Sides
padding-top
padding-right
padding-bottom
padding-left
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to
make the element "stand out".
CSS Outline Style
The outline-style property specifies the style of the outline, and can have one
of the following values:
dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline
CSS Outline Width
thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
CSS Outline Offset
The outline-offset property adds space between an outline and the
edge/border of an element. The space between an element and its outline is
transparent.
Example :
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Text Direction
The direction and unicode-bidi properties can be used to change the text
direction of an element:
Example:
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
This example demonstrates how to set the vertical alignment of an image in
a text:
Example:
img.top {
vertical-align: top;
}
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Text Decoration
The text-decoration property is used to set or remove decorations from
text.
The value text-decoration: none; is often used to remove underlines from
links:
Example:
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word:
Example :
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
CSS Text Spacing
Example :
text-indent: 50px;
letter-spacing: 3px;
line-height: 0.8;
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
word-spacing: 10px;
text-shadow: 2px 2px 5px red;
CSS Font Families
font-family: "Times";
font-style: italic;
font-size: 40px;
font-variant: small-caps, normal, small-caps, all-small-caps,
petite-caps, all-petite-caps, unicase;
font-weight: bold;
CSS column-count Property
column-count: 3;
column-gap: 40px;
column-rule: 4px double #ff00ff;
column-rule-style: solid; //dotted
column-rule-color: #ff0000;
column-rule-width: 10px;
columns: 100px 8;
CSS cursor Property
cursor:alias;
cursor:all-scroll;
cursor:auto;
cursor:cell;
cursor:col-resize;
cursor:copy;
CSS direction Property
direction: rtl;
SHAILESH OSLANIYA : 93770 97697
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
CSS display Property
display: none;
display: inline;
display: block;
display: inline-block;
SHAILESH OSLANIYA : 93770 97697
