The document provides an overview of HTML tutorials covering the basic building blocks of HTML including tags, attributes, elements and different versions of HTML. It also discusses CSS and how it is used to describe presentation aspects like colors, layout and fonts. Key HTML tags, attributes and elements are defined along with examples of how to use them to structure a basic web page.
Why Teams call analytics are critical to your entire business
Html tutorials-infotech aus
1. HTML Tutorials
Everything HTML, CSS and JavaScript, the most
common Languages used in making web pages.
Created by
InfotechAus
2. HTML is Hypertext Markup
Language. HTML is the language
for describing the structure of
web pages.
It is provides the structure of the
page, CSS the (visual & aural)
layout, for a variety of devices.
And XHTML is a variant of HTML
that uses the Syntax of XML.
What is HTML & CSS
CSS is Cascading Style sheets
are two of the core
technologies for building web
pages,
CSS is the language for
describing the presentation of
web pages including colors,
layout and fonts. For more
details click
3. History of HTML
In 1989, Berners-Lee wrote a
memo proposing an Internet-
based hypertext system. Berners-
Lee specified HTML and wrote
the browser and server software
in late 1990.
The 1st publicly available description of
HTML was a document called "HTML
Tags", first mentioned on the Internet
by Tim Berners-Lee in late 1991. It
describes 18 elements comprising the
initial, relatively simple design of
HTML. Except for the hyperlink tag,
5. Tags, Attribute & Element of
HTML
O Tags: The basic structure of a HTML document includes tags,
which surround content & apply meaning to it.
O Change your document so that it looks like this:
<!DOCTYPE html>
<html>
<body>
Website Development Services Melbourne
</body>
</html
Try it Yourself
<!DOCTYPE html>, is a
documenttype
declaration.
<html> is the Opening Tag
</html> is the Closing Tag
<body> and </body> is
the main content of the
document that will
appear in the browser
window.
6. HTML Attributes:
All HTML elements can have attributes
Attributes provide additional information about an
element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like:
name="value"
<!DOCTYPE html>
<html lang=“en-US”>
<body>
Website Development Services Melbourne
</body>
</html
Try it Yourself
Lang Attribute:
The language of the
document can be
declared in the <html>
tag.
The language is declared
with the Lang attribute.
7. <!DOCTYPE html>
<html>
<body>
<a href="http://www.infotechaus.com.au">website
development services melbourne</a>
</body>
</html>
Try it Yourself
href Attribute:
HTML links are defined
with the <a> tag. The link
address is specified in the
href attribute:
<!DOCTYPE html>
<html>
<body>
<h2>Asha</h2>
<p title=“website development services
melbourne"></p>
InfotechAus is a web development company
</body>
</html>
Try it Yourself
Title Attribute:
Here, a title attribute is
added to the <p> element.
The value of the title
attribute will be displayed
as a tooltip when you
mouse over the paragraph:
8. <!DOCTYPE html>
<html>
<body>
<img src="http://infotechaus.com.au/images/responsive-
web-design.jpg " alt="website development services
melbourne.com" width="104" height="142">
</body>
</html>
Try it Yourself
Alt Attribute:
The alt attribute specifies an
alternative text to be used,
when an image cannot be
displayed.
The value of the attribute can
be read by screen readers. This
way, someone "listening" to
the webpage, e.g. a blind
person, can "hear" the
element.
<!DOCTYPE html>
<html>
<body>
<img src=“
http://infotechaus.com.au/images/responsive-web-
design.jpg width="104" height="142">
</body>
</html> Try it Yourself
Size Attribute:
HTML images are defined
with the <img> tag.
The filename of the source
(src), and the size of the
image (width and height)
are all provided as
attributes:
9. Attribute Description Possible Value
Id identifies a unique element.
The value of id can be used
by CSS or JavaScript to
reference that element.
Text, excluding spaces.
The value of the id attribute
must be unique.
Class Used to reference elements,
by CSS, for example. Any
number of elements can
have the same value (unlike
id).
Used to reference elements,
by CSS, for example. Any
number of elements can
have the same value (unlike
id).
Style Applies inline CSS. CSS declarations.
Dir The Direction of text in an
element
ltr (left-to-right)
rtl (right-to-left)
auto
Translate If text should be translated
when a document is
localized.
Yes
No
Accesskey Associates a keyboard
shortcut to an element.
Space-separated list of
characters.
Tabindex Explicitly specifies where an
element appears in the tab
order of the page.
Integer.
10. Another Tab & Attributes
Metadata
Head
Title
Base
Link
Meta
style
Sections
Body
Article
Section
H1-H6
Header/footer
address
Grouping
P
Pre
Blockquote
Ol,figure,hr
ul, dt, div,
Li, dl, dt dd,
Text
a,em
Strong
Data,time
Code,var,samp
Mark,ruby,rb
Rt,rp,rtc,bdi
Embedded content
img
embed
object
param
Video/audio
Source,track,map
Root Element
Html
Edits
Ins
Del
Scripts
Script/nonscript
Template
canvas
Table
Tr,td,th,caption
Table
tbody
thead
tfoot
Col/colgroup
Forms
Form,input
textarea
Select
option
Datalist
Label,fieldset