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>
Mo:9377097697
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
[Link]
2. Sublime
3. Notepad++
4. Atom
5. Vim
Mo:9377097697
Creative Design & Multimedia Institute
Basic HTML
Formatting Tag List
<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
<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
<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
Mo:9377097697
Creative Design & Multimedia Institute
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
<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.
Mo:9377097697
Creative Design & Multimedia Institute
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.
<blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from
another source.
Browsers usually indent <blockquote> elements
Output:
Mo:9377097697
Creative Design & Multimedia Institute
<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>
[Link]<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>
Mo:9377097697
Creative Design & Multimedia Institute
<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
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.
Mo:9377097697
Creative Design & Multimedia Institute
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="[Link] accesskey="s">Creative</a><br>
Definition
1. The accesskey attribute specifies a shortcut key to activate/focus an
element.
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>
Mo:9377097697
Creative Design & Multimedia Institute
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>
Mo:9377097697
Creative Design & Multimedia Institute
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
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.
Mo:9377097697
Creative Design & Multimedia Institute
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.
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.
Mo:9377097697
Creative Design & Multimedia Institute
The autofocus Attribute
The input autofocus attribute specifies that an input field should
automatically get focus when the page loads.
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
Mo:9377097697
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>
Mo:9377097697
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="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
</video>
Attributes
Attribute Description
Autoplay Specifies that the video will start playing as soon as it
is ready
Controls Specifies that video controls should be displayed (such
as a play/pause button etc).
Height Sets the height of the video player
Loop Specifies that the video will start over again, every
time it is finished
Muted Specifies that the audio output of the video should be
muted
Poster Specifies an image to be shown while the video is
downloading, or until the user hits the play button
Preload if and how the author thinks the video should be
loaded when the page loads
Src the URL of the video file
Width Sets the width of the video player
CSS (Cascading Style Sheets)
Mo:9377097697
Creative Design & Multimedia Institute
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
Mo:9377097697
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
[Link]
2. CLASS
3. #ID
4. @MEDIA
Mo:9377097697
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;
Mo:9377097697
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
Mo:9377097697
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)
Mo:9377097697
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 Alignment
The text-align property is used to set the horizontal alignment of a
text.
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
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;
Mo:9377097697
Creative Design & Multimedia Institute
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:
[Link] {
vertical-align: top;
}
color is most often
Valid color name like =”Red”
HEX value like = “#ff0000”
RGB value like = rgb(0,0,0)
Opacity
opacity property specifies the opacity/transparency of an element. It
can take a value from 0.0 - 1.0. The lower value, the more
transparent:
Example : opacity : 0.5;
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example
above, use RGBA color values. The following example sets the opacity for
the background color and not the text:
Example: background: rgba(0, 128, 0, 0.3)
display Property
Mo:9377097697
Creative Design & Multimedia Institute
display: none;
display: inline;
display: block;
display: inline-block
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;
text-shadow: 2px 2px 5px red;
Responsive Font Size
The text size can be set with a vw unit, which means the "viewport
width".
Mo:9377097697
Creative Design & Multimedia Institute
font-size:10vw
CSS Attribute Selectors
It is possible to style HTML elements that have specific attributes or
attribute values.
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified
attribute.
The following example selects all <a> elements with a target attribute:
Example:
a[target] {
background-color: yellow;
}
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified
attribute and value.
The following example selects all <a> elements with a target="_blank"
attribute:
Mo:9377097697
Creative Design & Multimedia Institute
Example :
CSS
a[target=_blank] {
background-color: yellow;
HTML
<a href="[Link] ">[Link]</a>
<a href=" [Link] target="_blank">[Link]</a>
<a href=" [Link] target="_self">[Link]</a>
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use
Google Fonts.
Font Awesome Icons
Child Selector (>)
The child selector selects all elements that are the children of a specified
element.
Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after
another specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
The following example selects the first <anytag> element that are placed
immediately after <div> elements:
Example:
Mo:9377097697
Creative Design & Multimedia Institute
div + p {
background-color: yellow;
}
General Sibling Selector (~)
The general sibling selector selects all elements that are siblings of a
specified element.
Example :
div ~ p {
background-color: yellow;
}
The following example selects all <p> elements that are siblings of <div>
elements:
Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the
first line of a text.
Example:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Mo:9377097697
Creative Design & Multimedia Institute
Note: The ::first-line pseudo-element can only be applied to block-level
elements.
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.
The following example formats the first letter of the text in all <p> elements:
Example:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Note: The ::first-letter pseudo-element can only be applied to block-
level elements.
Multiple Pseudo-elements
In the following example, the first letter of a paragraph will be red, in an xx-
large font size. The rest of the first line will be blue, and in small-caps. The
rest of the paragraph will be the default font size and color:
Example:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the
content of an element.
Example:
Mo:9377097697
Creative Design & Multimedia Institute
h1::before {
content: url([Link]);
}
The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the
content of an element.
Example:
h1::after {
content: url([Link]);
}
The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is
selected by a user.
The following CSS properties can be applied
to ::selection: color, background, cursor, and outline.
Example:
::selection {
color: red;
background: yellow;
}
CSS Text Spacing
Example :
text-indent: 50px;
letter-spacing: 3px;
line-height: 0.8;
word-spacing: 10px;
Mo:9377097697
Creative Design & Multimedia Institute
flex Property
Example:
parent:
display: flex;
child:
flex:1
Output:
Flex, flex-wrap
Example:
parent:
display: flex;
flex-wrap: wrap
child:
flex: 50%;
Output
column-count Property
column-count:5
column-gap: 0px;
Mo:9377097697
Creative Design & Multimedia Institute
column-rule: 10px solid red; // for border color
column-rule-style: outset;
column-rule-width: 5px;
cursor Property
cursor: alias;
.all-scroll {cursor: all-scroll
cursor: auto
cursor: cell
cursor: context-menu
cursor: col-resize
cursor: copy
cursor: crosshair
cursor: default
cursor: e-resize
cursor: ew-resize
cursor: grab
cursor: grabbing
cursor: help
cursor: move
cursor: n-resize
cursor: ne-resize
cursor: nesw-resize
cursor: ns-resize
cursor: nw-resize
cursor: nwse-resize
cursor: no-drop
cursor: none
cursor: not-allowed
cursor: pointer
cursor: progress
Mo:9377097697
Creative Design & Multimedia Institute
cursor: row-resize
cursor: s-resize
cursor: se-resize
cursor: sw-resize
cursor: text
cursor: w-resize
cursor: wait
cursor: zoom-in
cursor: zoom-out
empty-cells Property
empty-cells: hide;
filter Property
filter: grayscale(100%);
filter: none | blur() | brightness() | contrast() | drop-shadow() |
grayscale() | hue-rotate() | invert() | opacity() | saturate() |
sepia() | url();
Example :
img {
filter: grayscale(100%);
}
Off Line Online Font Attechment
font Property
font-family: "Times New Roman", Times, serif;
Mo:9377097697
Creative Design & Multimedia Institute
font-size: 15px;
font-style: oblique;
font-variant: small-caps;
font-variant-caps: petite-caps;
font-weight: bold;
CSS Grid Layout Module
The CSS Grid Layout Module offers a grid-based layout system, with rows
and columns, making it easier to design web pages without having to use
floats and positioning.
grid Property
display: grid;
grid: 150px / auto auto auto;
grid-gap: 10px;
display: inline-grid;
grid-column-gap: 50px;
grid-template-columns: auto auto auto;
grid-row-gap: 50px;
grid-gap: 50px 100px;
grid-template-rows: 80px 200px 150px;
Example:
Mo:9377097697
Creative Design & Multimedia Institute
CSS Navigation Bar
A navigation bar is a section of a graphical user interface intended to aid visitors in
accessing information. Navigation bars are implemented in file browsers, web
browsers and as a design element of some web sites.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:
CSS Dropdowns
Create a dropdown box that appears when the user moves the mouse
over an element.
CSS Image Gallery
CSS can be used to create an image gallery.
Image Sprites
Instead of using Multi Images separate images, we use this single image
Mo:9377097697
Creative Design & Multimedia Institute
CSS Counters
CSS counters are "variables" maintained by CSS whose values can be
incremented by CSS rules (to track how many times they are used). Counters let
you adjust the appearance of content based on its placement in the document.
Automatic Numbering With Counters
work with CSS counters we will use the following properties:
counter-reset - Creates or resets a counter
counter-increment - Increments a counter value
content - Inserts generated content
Example :
body {
counter-reset: section;
p::before{
counter-increment: section;
content: "Section " counter(section) ":" ;
//background-color: red;
Mo:9377097697
Creative Design & Multimedia Institute
CSS ANIMATION KEY FRAME
Example :
.class{
position: relative;
animation: abc 5s infinite;
}
@keyframes abc {
from {left: 0px;}
to {left: 200px;}
}
animation-delay Property
The animation-delay value is defined in seconds (s) or milliseconds (ms).
Example : div {
width: 50px;
height: 50px;
background: red;
position: relative;
animation: abc 5s infinite;
animation-delay: 2s;
}
@keyframes abc {
from {left: 0px;}
Mo:9377097697
Creative Design & Multimedia Institute
to {left: 300px;}
}
animation-direction Property
Mo:9377097697
