Scribd
Upload
9 views35 pages

HTML Theory-1

The document provides an overview of HTML, including its definition, structure, and essential elements for creating web pages. It explains various HTML tags, attributes, and multimedia integration, alongside an introduction to CSS for styling web content. Additionally, it covers HTML editors and basic formatting tags, emphasizing the importance of proper syntax and document structure.

Uploaded by

ezinearticles111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views35 pages

HTML Theory-1

The document provides an overview of HTML, including its definition, structure, and essential elements for creating web pages. It explains various HTML tags, attributes, and multimedia integration, alongside an introduction to CSS for styling web content. Additionally, it covers HTML editors and basic formatting tags, emphasizing the importance of proper syntax and document structure.

Uploaded by

ezinearticles111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

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
1.Notepad
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>
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>

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="https://www.cdmi.in" 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="movie.ogg" 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
1.TAG
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:
img.top {
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="https://www.cdmi.in ">w3schools.com</a>

<a href=" https://www.cdmi.in" target="_blank">disney.com</a>

<a href=" https://www.cdmi.in" target="_self">wikipedia.org</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(smiley.gif);
}

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(smiley.gif);
}

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

You might also like