What Is HTML

What Are HTML & CSS?
HTML, HyperText Markup Language, gives content structure and

meaning by defining that content as, for example, headings,
paragraphs, or images. CSS, or Cascading Style Sheets, is a
presentation language created to style the appearance of content
using, for example, fonts or colors.
As a rule, HTML will always represent content, and CSS will always
represent the appearance of that content.
Elements
Elements are designators that define the structure and content of

objects within a page.
1 <a>
2
Tags
The use of less-than and greater-than angle brackets surrounding an

element creates what is known as a tag. Tags most commonly occur in
pairs of opening and closing tags.
So, anchor tags will look a bit like this:
1 <a>...</a>
2
Attributes
Attributes are properties used to provide additional information about

an element.
The most common attributes include the

an element; the
the
src
the
href
classattribute,
id
attribute, which identifies
which classifies an element;
attribute, which specifies a source for embeddable content; and

attribute, which provides a hyperlink reference to a linked
resource.
1 <a href="http://shayhowe.com/">Shay Howe</a>
2
Understanding Common CSS Terms

Selectors
A selectordesignates exactly which element or elements within our

HTML to target and apply styles (such as color, size, and position) to.
Selectors generally target an attribute value, such as
an
id
or
class
value, or target the type of element, such as
1 p { ... }
2
Properties
1p {
2 color: ...;
3 font-size: ...;
4}
5
Values
1p {
2 color: orange;
3 font-size: 16px;
<h1>
or
<p>.
4}
Fig 1
CSS syntax outline including a selector, properties, and values

Working with Selectors
Well start with the most common selectors: type, class,

and ID selectors.
Type Selectors
Type selectors target elements by their element type. For example,

should we wish to target all division elements,
type selector of
div.
<div>,
we would use a
The following code shows a type selector for
division elements as well as the corresponding HTML it selects.

CSS
1 div { ... }
2
HTML
1 <div>...</div>
2 <div>...</div>
3
Class Selectors
We can classify similar elements in html , then class selector should be used !
CSS
1 .awesome { ... }
2
HTML
1 <div class="awesome">...</div>
2 <p class="awesome">...</p>
3
ID Selectors
ID selectors are even more precise than class selectors, as they target
only one unique element at a time.
Regardless of which type of element they appear on,
id
attribute values
can only be used once per page. If used they should be reserved for
significant elements.
Within CSS, ID selectors are denoted by a leading hash sign, #,
followed by the
id
attribute value.
CSS
1 #shayhowe { ... }
2
HTML
1 <div id="shayhowe">...</div>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
The <!DOCTYPE> declaration is NOT case sensitive.

HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational
or deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and
deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational
or deprecated elements (like font). Framesets are not allowed. The markup must also be
written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and
deprecated elements (like font). Framesets are not allowed. The markup must also be
written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to
provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Meta tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Description" CONTENT="Author: A.N. Author,
Illustrator: P. Picture, Category: Books, Price:
9.24, Length:
784 pages">
<meta name="google-site-verification"
content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34="/>
<title>Example Books - high-quality used books for
children</title>
<meta name="robots" content="noindex,nofollow">
Google understands the following meta tags (and related items):
<meta name="description"
content="A description of the
page" />
This tag provides a short

description of the page. In some
situations this description is used
as a part of the snippet shown in
the search results. More
information
<title>The Title of the

Page</title>
While technically not a meta tag,

this tag is often used together with
the "description". The contents of
this tag are generally shown as the
title in search results (and of
course in the user's browser). More
information
<meta name="robots"
content="..., ..." />
<meta name="googlebot"
content="..., ..." />
These meta tags can control the

behavior of search engine crawling
and indexing. The robots meta tag
applies to all search engines, while
the "googlebot" meta tag is

specific to Google. The default
values are "index, follow" (the
same as "all") and do not need to
be specified. We understand the
following values (when specifying
multiple values, separate them
with a comma):
<meta name="google"
content="nositelinkssearchbox"
/>
noindex: prevents the page

from being indexed
nofollow: prevents the
Googlebot from following links
from this page
nosnippet: prevents a
snippet from being shown in
the search results
noodp: prevents the
alternative description from
the ODP/DMOZ from being
used
noarchive: prevents Google
from showing the Cached link
for a page.
unavailable_after:[date]: lets
you specify the exact time and
date you want to stop crawling
and indexing of this page
noimageindex: lets you
specify that you do not want
your page to appear as the
referring page for an image
that appears in Google search
results.
none: is equivalent
to noindex, nofollow.
When users search for your site,

Google Search results sometimes
display a search box specific to
your site, along with other direct
links to your site. This meta tag
tells Google not to show the
sitelinks search box.
<meta name="google"
content="notranslate" />
<meta name="google-siteverification" content="..." />
You can use this tag on the toplevel page of your site to verify
ownership for Webmaster Tools.
Please note that while the values
of the "name" and "content"
attributes must match exactly
what is provided to you (including
upper and lower case), it doesn't
matter if you change the tag from
XHTML to HTML or if the format of
the tag matches the format of your
page.
<meta http-equiv="Content-Type"
content="...; charset=..." />
<meta charset="..." >
This defines the page's content

type and character set. Make sure
that you surround the value of the
content attribute with quotes otherwise the charset attribute
may be interpreted incorrectly. We
recommend using Unicode/UTF-8
where possible. More information
<meta http-equiv="refresh"
content="...;url=..." />
Self-Closing Elements
<br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
Identifying Divisions & Spans
Divisions, or
<div>s,
and
<span>s
are HTML elements that act as
containers solely for styling purposes. As generic containers, they do

not come with any overarching meaning or semantic value.
A <div> is a block-level element that is commonly used to identify
large groupings of content, and which helps to build a web pages
layout and design. A <span>, on the other hand, is an inline-level
element commonly used to identify smaller groupings of text within a
block-level element.

What Is HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

What Is HTML

Caricato da

Copyright:

Formati disponibili

What Are HTML & CSS?

HTML, HyperText Markup Language, gives content structure and

Elements are designators that define the structure and content of

The use of less-than and greater-than angle brackets surrounding an

Attributes are properties used to provide additional information about

The most common attributes include the

attribute, which identifies

which classifies an element;

attribute, which specifies a source for embeddable content; and

Understanding Common CSS Terms

A selectordesignates exactly which element or elements within our

value, or target the type of element, such as

CSS syntax outline including a selector, properties, and values

Well start with the most common selectors: type, class,

Type selectors target elements by their element type. For example,

The following code shows a type selector for

division elements as well as the corresponding HTML it selects.

The <!DOCTYPE> declaration is NOT case sensitive.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

This tag provides a short

<title>The Title of the

While technically not a meta tag,

These meta tags can control the

the "googlebot" meta tag is

noindex: prevents the page

When users search for your site,

<meta name="google-siteverification" content="..." />

This defines the page's content

Identifying Divisions & Spans

are HTML elements that act as

containers solely for styling purposes. As generic containers, they do

Potrebbero piacerti anche