tags-elements
starting-ending
opening-closing concept
head section
body section
………..listen to the tutorial
texts-images-sounds
http://www.youtube-nocookie.com/v/v4oN4DuR7YU?version=3&hl=en_US
http://www.youtube-nocookie.com/v/Wz2klMXDqF4?hl=en_US&version=3
uowm ftp server //
1.8 HTML vs XHTML
non-normative.
text/html
MIME type, then it will be processed as an HTML document by Web browsers. This specification defines the latest HTML syntax, known simply as “HTML”.application/xhtml+xml
, then it is treated as an XML document by Web browsers, to be parsed by an XML processor. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent a document labeled as XML from being rendered fully, whereas they would be ignored in the HTML syntax. This specification defines the latest XHTML syntax, known simply as “XHTML”.noscript
feature can be represented using the HTML syntax, but cannot be represented with the DOM or in the XHTML syntax. Comments that contain the string “-->
” can only be represented in the DOM, not in the HTML and XHTML syntaxes.αρχικό παράδειγμα γραφής dom html
A document with a short head
...
An application with a long head
http://support.js
...
ex
|
The theory of mass culture-or mass audience culture, commercial culture, “popular”
culture, the culture industry, as it is variously known-has always tended to define its object
against so-called high culture without reflecting on the objective status of this opposition.
As so often, positions in this field reduce themselves to two mirror-images, and are
essentially staged in terms of value. Thus the familiar motif of elitism argues for the priority
of mass culture on the grounds of the sheer numbers of people exposed to it; the pursuit of
high or hermetic culture is then stigmatized as a status hobby of small groups of
intellectuals. As its anti-intellectual thrust suggests, this essentially negative position has
little theoretical content but clearly responds to a deeply rooted conviction in American
radicalism and articulates a widely based sense that high culture is an establishment
phenomenon, irredeemably tainted by its association with institutions, in particular with
the university. The value invoked is therefore a social one: it would be preferable to deal
with tv programs, The Godfather, orJaws, rather than with Wallace Stevens or HenryJames,
because the former clearly speak a cultural language meaningful to far wider strata of the
population than what is socially represented by intellectuals. Radicals are however also
intellectuals, so that this position has suspicious overtones of the guilt trip; meanwhile it
overlooks the anti-social and critical, negative (although generally not revolutionary)
stance of much of the most important forms of modem art; finally, it offers no method for
reading even those cultural objects it valorizes and has had little of interest to say about
their content
**html
Presentation related attributes
background
(Deprecated. use CSS instead.) andbgcolor
(Deprecated. use CSS instead.) attributes forbody
(required element according to the W3C.) element.align
(Deprecated. use CSS instead.) attribute ondiv
,form
, paragraph (p
) and heading (h1
…h6
) elementsalign
(Deprecated. use CSS instead.),noshade
(Deprecated. use CSS instead.),size
(Deprecated. use CSS instead.) andwidth
(Deprecated. use CSS instead.) attributes onhr
elementalign
(Deprecated. use CSS instead.),border
,vspace
andhspace
attributes onimg
andobject
(caution: theobject
element is only supported in Internet Explorer (from the major browsers)) elementsalign
(Deprecated. use CSS instead.) attribute onlegend
andcaption
elementsalign
(Deprecated. use CSS instead.) andbgcolor
(Deprecated. use CSS instead.) ontable
elementnowrap
(Obsolete),bgcolor
(Deprecated. use CSS instead.),width
,height
ontd
andth
elementsbgcolor
(Deprecated. use CSS instead.) attribute ontr
elementclear
(Obsolete) attribute onbr
elementcompact
attribute ondl
,dir
andmenu
elementstype
(Deprecated. use CSS instead.),compact
(Deprecated. use CSS instead.) andstart
(Deprecated. use CSS instead.) attributes onol
andul
elementstype
andvalue
attributes onli
elementwidth
attribute onpre
element
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like ), within the web page content. HTML tags most commonly come in pairs like
and
, although some tags, known as empty elements, are unpaired, for example . The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.
Sample page
Sample page
This is a simple sample.
- The exact list of which features a user agents supports.
- The maximum allowed stack depth for recursion in script.
- Features that describe the user’s environment, like Media Queries and the
Screen
object. [MQ] [CSSOMVIEW] - The user’s time zone.
1.11 A quick introduction to HTML
Sample page
Sample page
This is a simple sample.
“, and an end tag, such as “
“. This is very wrong!
This is correct.
a
element and itshref
attribute:simple
=
” character. The attribute value can remainunquoted if it doesn’t contain space characters or any of "
'
`
=
<
or >
. Otherwise, it has to be quoted using either single or double quotes. The value, along with the “=
” character, can be omitted altogether if the value is the empty string.DocumentType
node, Element
nodes, Text
nodes, Comment
nodes, and in some cases ProcessingInstruction
nodes.- DOCTYPE:
html
html
html
element, which is the element always found at the root of HTML documents. It contains two elements,head
and body
, as well as a Text
node between them.Text
nodes in the DOM tree than one would initially expect, because the source contains a number of spaces (represented here by “␣”) and line breaks (“⏎”) that all end up as Text
nodes in the DOM. However, for historical reasons not all of the spaces and line breaks in the original markup appear in the DOM. In particular, all the whitespace before head
start tag ends up being dropped silently, and all the whitespace after the body
end tag ends up placed at the end of the body
.head
element contains a title
element, which itself contains a Text
node with the text “Sample page”. Similarly, the body
element contains an h1
element, a p
element, and a comment.script
element or using event handler content attributes. For example, here is a form with a script that sets the value of the form’s output
element to say “Hello World”:<form name="main">
Result: <output name="result">
<script>
document.forms.main.elements.result.value = 'Hello World';
a
element in the tree above) can have its “href
” attribute changed in several ways:var a = document.links[0]; // obtain the first link in the document
a.href = 'sample.html'; // change the destination URL of the link
a.protocol = 'https'; // change just the scheme part of the URL
a.setAttribute('href', 'http://example.com/'); // change the content attribute directly
Sample styled page
body { background: navy; color: yellow; }
Sample styled page
This page is just a demo.
1.11.1 Writing secure applications with HTML
- Not validating user input
- Cross-site scripting (XSS)
- SQL injection
-
When accepting untrusted input, e.g. user-generated content such as text comments, values in URL parameters, messages from third-party sites, etc, it is imperative that the data be validated before use, and properly escaped when displayed. Failing to do this can allow a hostile user to perform a variety of attacks, ranging from the potentially benign, such as providing bogus user information like a negative age, to the serious, such as running scripts every time a user looks at a page that includes the information, potentially propagating the attack in the process, to the catastrophic, such as deleting all data in the server.When writing filters to validate user input, it is imperative that filters always be whitelist-based, allowing known-safe constructs and disallowing all other input. Blacklist-based filters that disallow known-bad inputs and allow everything else are not secure, as not everything that is bad is yet known (for example, because it might be invented in the future).For example, suppose a page looked at its URL’s query string to determine what to display, and the site then redirected the user to that page to display a message, as in:If the message was just displayed to the user without escaping, a hostile attacker could then craft a URL that contained a script element:
http://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E
If the attacker then convinced a victim user to visit this page, a script of the attacker’s choosing would run on the page. Such a script could do any number of hostile actions, limited only by what the site offers: if the site is an e-commerce shop, for instance, such a script could cause the user to unknowingly make arbitrarily many unwanted purchases.This is called a cross-site scripting attack.There are many constructs that can be used to try to trick a site into executing code. Here are some that authors are encouraged to consider when writing whitelist filters:- When allowing harmless-seeming elements like
img
, it is important to whitelist any provided attributes as well. If one allowed all attributes then an attacker could, for instance, use theonload
attribute to run arbitrary script. - When allowing URLs to be provided (e.g. for links), the scheme of each URL also needs to be explicitly whitelisted, as there are many schemes that can be abused. The most prominent example is “
javascript:
“, but user agents can implement (and indeed, have historically implemented) others. - Allowing a
base
element to be inserted means anyscript
elements in the page with relative links can be hijacked, and similarly that any form submissions can get redirected to a hostile site.
- When allowing harmless-seeming elements like
- Cross-site request forgery (CSRF)
-
If a site allows a user to make form submissions with user-specific side-effects, for example posting messages on a forum under the user’s name, making purchases, or applying for a passport, it is important to verify that the request was made by the user intentionally, rather than by another site tricking the user into making the request unknowingly.This problem exists because HTML forms can be submitted to other origins.Sites can prevent such attacks by populating forms with user-specific hidden tokens, or by checking
Origin
headers on all requests. - Clickjacking
-
A page that provides users with an interface to perform actions that the user might not wish to perform needs to be designed so as to avoid the possibility that users can be tricked into activating the interface.One way that a user could be so tricked is if a hostile site places the victim site in a small
iframe
and then convinces the user to click, for instance by having the user play a reaction game. Once the user is playing the game, the hostile site can quickly position the iframe under the mouse cursor just as the user is about to click, thus tricking the user into clicking the victim site’s interface.
1.11.2 Common pitfalls to avoid when using the scripting APIs
img
elements and the load
event. The event could fire as soon as the element has been parsed, especially if the image has already been cached (which is common).
var img = new Image();
img.src = 'games.png';
img.alt = 'Games';
img.onload = gamesLogoHasLoaded;
// img.addEventListener('load', gamesLogoHasLoaded, false); // would work also
img
element and then in a separate script added the event listeners, there’s a chance that theload
event would be fired in between, leading it to be missed:
<!-- the 'load' event might fire here while the parser is taking a
break, in which case you will not see it! -->
var img = document.getElementById('games');
img.onload = gamesLogoHasLoaded; // might never fire!
1.12 Conformance requirements for authors
1.12.1 Presentational markup
- The use of presentational elements leads to poorer accessibility
-
While it is possible to use presentational markup in a way that provides users of assistive technologies (ATs) with an acceptable experience (e.g. using ARIA), doing so is significantly more difficult than doing so when using semantically-appropriate markup. Furthermore, even using such techniques doesn’t help make pages accessible for non-AT non-graphical users, such as users of text-mode browsers.Using media-independent markup, on the other hand, provides an easy way for documents to be authored in such a way that they work for more users (e.g. text browsers).
- Higher cost of maintenance
-
It is significantly easier to maintain a site written in such a way that the markup is style-independent. For example, changing the color of a site that uses
throughout requires changes across the entire site, whereas a similar change to a site based on CSS can be done by changing a single file.
- Larger document sizes
-
Presentational markup tends to be much more redundant, and thus results in larger document sizes.
style
attribute and the style
element. Use of the style
attribute is somewhat discouraged in production environments, but it can be useful for rapid prototyping (where its rules can be directly moved into a separate style sheet later) and for providing specific styles in unusual cases where a separate style sheet would be inconvenient. Similarly, thestyle
element can be useful in syndication or for page-specific styles, but in general an external style sheet is likely to be more convenient when the styles apply to multiple pages.b
, i
, hr
, s
, small
, and u
.1.12.2 Syntax errors
- Unintuitive error-handling behavior
-
Certain invalid syntax constructs, when parsed, result in DOM trees that are highly unintuitive.For example, the following markup fragment results in a DOM with an
hr
element that is an earlier sibling of the correspondingtable
element:
...- Errors with optional error recovery
To allow user agents to be used in controlled environments without having to implement the more bizarre and convoluted error handling rules, user agents are permitted to fail whenever encountering a parse error.- Errors where the error-handling behavior is not compatible with streaming user agents
Some error-handling behavior, such as the behavior for the
... example mentioned above, are incompatible with streaming user agents (user agents that process HTML files in one pass, without storing state). To avoid interoperability problems with such user agents, any syntax resulting in such behavior is considered invalid.
- Errors that can result in infoset coercion
When a user agent based on XML is connected to an HTML parser, it is possible that certain invariants that XML enforces, such as comments never containing two consecutive hyphens, will be violated by an HTML file. Handling this can require that the parser coerce the HTML DOM into an XML-compatible infoset. Most syntax constructs that require such handling are considered invalid.- Errors that result in disproportionally poor performance
Certain syntax constructs can result in disproportionally poor performance. To discourage the use of such constructs, they are typically made non-conforming.For example, the following markup results in poor performance, since all the unclosedi
elements have to be reconstructed in each paragraph, resulting in progressively more elements in each paragraph:He dreamt.
He dreamt that he ate breakfast.
Then lunch.
And finally dinner.
The resulting DOM for this fragment would be:- Errors involving fragile syntax constructs
There are syntax constructs that, for historical reasons, are relatively fragile. To help reduce the number of users who accidentally run into such problems, they are made non-conforming.For example, the parsing of certain named character references in attributes happens even with the closing semicolon being omitted. It is safe to include an ampersand followed by letters that do not form a named character reference, but if the letters are changed to a string that does form a named character reference, they will be interpreted as that character instead.In this fragment, the attribute’s value is “?bill&ted
“:Bill and Ted
In the following fragment, however, the attribute’s value is actually “?art©
“, not the intended “?art©
“, because even without the final semicolon, “©
” is handled the same as “©
” and thus gets interpreted as “©
“:Art and Copy
To avoid this problem, all named character references are required to end with a semicolon, and uses of named character references without a semicolon are flagged as errors.Thus, the correct way to express the above cases is as follows:Bill and Ted
Art and Copy <!-- the & has to be escaped, since © is a named character reference -->
- Errors involving known interoperability problems in legacy user agents
Certain syntax constructs are known to cause especially subtle or serious problems in legacy user agents, and are therefore marked as non-conforming to help authors avoid them.For example, this is why the U+0060 GRAVE ACCENT character (`) is not allowed in unquoted attributes. In certain legacy user agents, it is sometimes treated as a quote character.Another example of this is the DOCTYPE, which is required to trigger no-quirks mode, because the behavior of legacy user agents in quirks mode is often largely undocumented.- Errors that risk exposing authors to security attacks
Certain restrictions exist purely to avoid known security problems.For example, the restriction on using UTF-7 exists purely to avoid authors falling prey to a known cross-site-scripting attack using UTF-7.- Cases where the author’s intent is unclear
Markup where the author’s intent is very unclear is often made non-conforming. Correcting these errors early makes later maintenance easier.- Cases that are likely to be typos
When a user makes a simple typo, it is helpful if the error can be caught early, as this can save the author a lot of debugging time. This specification therefore usually considers it an error to use element names, attribute names, and so forth, that do not match the names defined in this specification.For example, if the author typedinstead of
- Errors that could interfere with new syntax in the future
In order to allow the language syntax to be extended in the future, certain otherwise harmless features are disallowed.For example, “attributes” in end tags are ignored currently, but they are invalid, in case a future change to the language makes use of that syntax feature without conflicting with already-deployed (and valid!) content.Some authors find it helpful to be in the practice of always quoting all attributes and always including all optional tags, preferring the consistency derived from such custom over the minor benefits of terseness afforded by making use of the flexibility of the HTML syntax. To aid such authors, conformance checkers can provide modes of operation wherein such conventions are enforced.1.12.3 Restrictions on content models and on attribute values
This section is non-normative.Beyond the syntax of the language, this specification also places restrictions on how elements and attributes can be specified. These restrictions are present for similar reasons:- Errors involving content with dubious semantics
-
To avoid misuse of elements with defined meanings, content models are defined that restrict how elements can be nested when such nestings would be of dubious value.
- Errors that involve a conflict in expressed semantics
-
Similarly, to draw the author’s attention to mistakes in the use of elements, clear contradictions in the semantics expressed are also considered conformance errors.In the fragments below, for example, the semantics are nonsensical: a separator cannot simultaneously be a cell, nor can a radio button be a progress bar.
- Cases where the default styles are likely to lead to confusion
-
Certain elements have default styles or behaviors that make certain combinations likely to lead to confusion. Where these have equivalent alternatives without this problem, the confusing combinations are disallowed.For example,
div
elements are rendered as block boxes, andspan
elements as inline boxes. Putting a block box in an inline box is unnecessarily confusing; since either nesting justdiv
elements, or nesting justspan
elements, or nestingspan
elements insidediv
elements all serve the same purpose as nesting adiv
element in aspan
element, but only the latter involves a block box in an inline box, the latter combination is disallowed.Another example would be the way interactive content cannot be nested. For example, abutton
element cannot contain atextarea
element. This is because the default behavior of such nesting interactive elements would be highly confusing to users. Instead of nesting these elements, they can be placed side by side. - Errors that indicate a likely misunderstanding of the specification
-
Sometimes, something is disallowed because allowing it would likely cause author confusion.For example, setting the
disabled
attribute to the value “false
” is disallowed, because despite the appearance of meaning that the element is enabled, it in fact means that the element is disabled (what matters for implementations is the presence of the attribute, not its value). - Errors involving limits that have been imposed merely to simplify the language
-
Some conformance errors simplify the language that authors need to learn.For example, the
area
element’sshape
attribute, despite accepting bothcirc
andcircle
values in practice as synonyms, disallows the use of thecirc
value, so as to simplify tutorials and other learning aids. There would be no benefit to allowing both, but it would cause extra confusion when teaching the language. - Errors that involve peculiarities of the parser
-
Certain elements are parsed in somewhat eccentric ways (typically for historical reasons), and their content model restrictions are intended to avoid exposing the author to these issues.For example, a
form
element isn’t allowed inside phrasing content, because when parsed as HTML, aform
element’s start tag will imply ap
element’s end tag. Thus, the following markup results in two paragraphs, not one:Welcome. Name:
It is parsed exactly like the following:Welcome.
Name: - Errors that would likely result in scripts failing in hard-to-debug ways
-
Some errors are intended to help prevent script problems that would be hard to debug.This is why, for instance, it is non-conforming to have two
id
attributes with the same value. Duplicate IDs lead to the wrong element being selected, with sometimes disastrous effects whose cause is hard to determine. - Errors that waste authoring time
-
Some constructs are disallowed because historically they have been the cause of a lot of wasted authoring time, and by encouraging authors to avoid making them, authors can save time in future efforts.For example, a
script
element’ssrc
attribute causes the element’s contents to be ignored. However, this isn’t obvious, especially if the element’s contents appear to be executable script — which can lead to authors spending a lot of time trying to debug the inline script without realizing that it is not executing. To reduce this problem, this specification makes it non-conforming to have executable script in ascript
element when thesrc
attribute is present. This means that authors who are validating their documents are less likely to waste time with this kind of mistake. - Errors that involve areas that affect authors migrating to and from XHTML
-
Some authors like to write files that can be interpreted as both XML and HTML with similar results. Though this practice is discouraged in general due to the myriad of subtle complications involved (especially when involving scripting, styling, or any kind of automated serialization), this specification has a few restrictions intended to at least somewhat mitigate the difficulties. This makes it easier for authors to use this as a transitionary step when migrating between HTML and XHTML.For example, there are somewhat complicated rules surrounding the
lang
andxml:lang
attributes intended to keep the two synchronized.Another example would be the restrictions on the values ofxmlns
attributes in the HTML serialization, which are intended to ensure that elements in conforming documents end up in the same namespaces whether processed as HTML or XML. - Errors that involve areas reserved for future expansion
-
As with the restrictions on the syntax intended to allow for new syntax in future revisions of the language, some restrictions on the content models of elements and values of attributes are intended to allow for future expansion of the HTML vocabulary.For example, limiting the values of the
target
attribute that start with an U+005F LOW LINE character (_) to only specific predefined values allows new predefined values to be introduced at a future time without conflicting with author-defined values. - Errors that indicate a mis-use of other specifications
-
Certain restrictions are intended to support the restrictions made by other specifications.For example, requiring that attributes that take media queries use only valid media queries reinforces the importance of following the conformance rules of that specification.
1.13 Suggested reading
This section is non-normative.The following documents might be of interest to readers of this specification.- Character Model for the World Wide Web 1.0: Fundamentals [CHARMOD]
-
This Architectural Specification provides authors of specifications, software developers, and content developers with a common reference for interoperable text manipulation on the World Wide Web, building on the Universal Character Set, defined jointly by the Unicode Standard and ISO/IEC 10646. Topics addressed include use of the terms ‘character’, ‘encoding’ and ‘string’, a reference processing model, choice and identification of character encodings, character escaping, and string indexing.
- Unicode Security Considerations [UTR36]
-
Because Unicode contains such a large number of characters and incorporates the varied writing systems of the world, incorrect usage can expose programs or systems to possible security attacks. This is especially important as more and more products are internationalized. This document describes some of the security considerations that programmers, system analysts, standards developers, and users should take into account, and provides specific recommendations to reduce the risk of problems.
- Web Content Accessibility Guidelines (WCAG) 2.0 [WCAG]
-
Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.
- Authoring Tool Accessibility Guidelines (ATAG) 2.0 [ATAG]
-
This specification provides guidelines for designing Web content authoring tools that are more accessible for people with disabilities. An authoring tool that conforms to these guidelines will promote accessibility by providing an accessible user interface to authors with disabilities as well as by enabling, supporting, and promoting the production of accessible Web content by all authors.
- User Agent Accessibility Guidelines (UAAG) 2.0 [UAAG]
-
This document provides guidelines for designing user agents that lower barriers to Web accessibility for people with disabilities. User agents include browsers and other types of software that retrieve and render Web content. A user agent that conforms to these guidelines will promote accessibility through its own user interface and through other internal facilities, including its ability to communicate with other technologies (especially assistive technologies). Furthermore, all users, not just users with disabilities, should find conforming user agents to be more usable.
4.2.3 The
base
element
Thebase
element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the defaultbrowsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.Categories:- Metadata content.
- Contexts in which this element can be used:
- In a
head
element containing no otherbase
elements. - Content model:
- Empty.
- Tag omission in text/html:
- No end tag.
- Content attributes:
- Global attributes
href
— Document base URLtarget
— Default browsing context for hyperlink navigation and form submission- DOM interface:
-
interface HTMLBaseElement : HTMLElement {
attribute DOMString href;
attribute DOMString target;
};
There must be no more than onebase
element per document.Thehref
content attribute, if specified, must contain a valid URL potentially surrounded by spaces.Abase
element, if it has anhref
attribute, must come before any other elements in the tree that have attributes defined as taking URLs, except thehtml
element (itsmanifest
attribute isn’t affected bybase
elements).Thetarget
attribute, if specified, must contain a valid browsing context name or keyword, which specifies which browsing context is to be used as the default when hyperlinks and forms in theDocument
cause navigation.Abase
element, if it has atarget
attribute, must come before any elements in the tree that represent hyperlinks.Thehref
IDL attribute, on getting, must return the result of running the following algorithm:-
If the
base
element has nohref
content attribute, then return the document base URL and abort these steps. -
Let fallback base url be the
Document
‘s fallback base URL. -
If the previous step was successful, return the resulting absolute URL and abort these steps.
-
Otherwise, return the empty string.
Thetarget
IDL attribute must reflect the content attribute of the same name.In this example, abase
element is used to set the document base URL:
This is an example for the <base> element
Visit the archives.
The link in the above example would be a link to “http://www.example.com/news/archives.html
“.Δεν επιτρέπεται σχολιασμός στο b&h-pro-webd-tables-html-consuming-consumed-archive/ from simple html and js to dhtml , to html 5 and js sem 5-6Δεν υπάρχουν Σχόλια
No comments yet.
RSS feed for comments on this post.
Sorry, the comment form is closed at this time.
Powered by WordPress