Scribd
Upload
16 views27 pages

HTML Theory

The document provides an overview of HTML, including its definition, structure, and essential elements for creating web pages. It covers various HTML tags, attributes, and examples, explaining their functions and usage in web development. Additionally, it introduces multimedia elements, semantic HTML, and the importance of using proper formatting and lowercase in HTML coding.

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
16 views27 pages

HTML Theory

The document provides an overview of HTML, including its definition, structure, and essential elements for creating web pages. It covers various HTML tags, attributes, and examples, explaining their functions and usage in web development. Additionally, it introduces multimedia elements, semantic HTML, and the importance of using proper formatting and lowercase in HTML coding.

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/ 27

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

You might also like