← Older revision
Revision as of 19:30, 26 September 2014
Line 21:
Line 21:
Most desktop applications that read and write files use specific file
Most desktop applications that read and write files use specific file
−
formats. For example, Microsoft Word uses
“
.
doc”
files and
+
formats. For example, Microsoft Word uses
"
.
doc"
files and
−
Microsoft Excel uses
“
.
xls”
. These files contain the
+
Microsoft Excel uses
"
.
xls"
. These files contain the
instructions on how to build the documents when they are opened,
instructions on how to build the documents when they are opened,
the contents of the document, and ''metadata'' about the
the contents of the document, and ''metadata'' about the
Line 50:
Line 50:
<syntaxhighlight lang="html5"><p id="example">This is a paragraph.</p></syntaxhighlight>
<syntaxhighlight lang="html5"><p id="example">This is a paragraph.</p></syntaxhighlight>
−
The <code><p></code> part is a marker, commonly called a ''tag''
)
that means
+
The <code><p></code> part is a marker, commonly called a ''tag''
,
that means
−
“what
follows should be considered as a
paragraph”
. Because it is at the start of the content it affects, it is an "opening tag". Likewise, the
+
"what
follows should be considered as a
paragraph"
. Because it is at the start of the content it affects, it is an "opening tag". Likewise, the
−
<code></p></code> tag indicates the end of the paragraph, and is thus a "closing tag"
)
. The opening
+
<code></p></code> tag indicates the end of the paragraph, and is thus a "closing tag". The opening
tag, closing tag, and everything in between is called an ''element''. Note:
tag, closing tag, and everything in between is called an ''element''. Note:
Many people use the terms "element" and "tag" interchangeably, which is incorrect.
Many people use the terms "element" and "tag" interchangeably, which is incorrect.
−
(The <code>id="example"</code> is an ''attribute'';
you
'll
learn more about
these later.)
+
(The <code>id="example"</code> is an ''attribute
-value pair
'';
we
'll
come back to
these later.)
−
In most browsers there is a
“Source”
or
“View Source”
option, commonly under
+
In most browsers there is a
"Source"
or
"View Source"
option, commonly under
−
the
“View”
menu. Try this now: go to a web site, choose this option, and spend some time looking at the HTML that makes up
the structure of
the page.
+
the
"View"
menu. Try this now: go to a web site, choose this option, and spend some time looking at the HTML that makes up the page.
== The structure of an HTML document ==
== The structure of an HTML document ==
−
A typical
example
HTML document might look like this:
+
A typical HTML document might look like this:
<syntaxhighlight lang="html5"><!DOCTYPE html>
<syntaxhighlight lang="html5"><!DOCTYPE html>
Line 75:
Line 75:
</html></syntaxhighlight>
</html></syntaxhighlight>
−
This
document might look like this when rendered in a web browser:
+
That
document might look like this when rendered in a web browser:
[[File:HTMLrender.png]]
[[File:HTMLrender.png]]
Line 84:
Line 84:
Next, you can see the opening tag of the <code><html></code> element. This
Next, you can see the opening tag of the <code><html></code> element. This
−
is a wrapper around the entire document. The closing <code><html></code> tag is the last thing in any HTML document.
+
is a wrapper around the entire document. The closing <code><
/
html></code> tag is the last thing in any HTML document.
The <code>html</code> element should always have a <code>lang</code> attribute. This specifies the primary language for the page. For example, <code>en</code> means "English", <code>fr</code> means "French". There are tools available to help you find the right language tag, such as Richard Ishida's [http://rishida.net/utils/subtags/ Language Subtag Lookup tool].
The <code>html</code> element should always have a <code>lang</code> attribute. This specifies the primary language for the page. For example, <code>en</code> means "English", <code>fr</code> means "French". There are tools available to help you find the right language tag, such as Richard Ishida's [http://rishida.net/utils/subtags/ Language Subtag Lookup tool].
Line 90:
Line 90:
wrapper that contains information about the document ("data about the data", or ''metadata''). This is described in more detail in
wrapper that contains information about the document ("data about the data", or ''metadata''). This is described in more detail in
[[html/elements/head|The HTML head element]]. Inside the <code>head</code> is the <code>[[html/elements/title|title]]</code> element,
[[html/elements/head|The HTML head element]]. Inside the <code>head</code> is the <code>[[html/elements/title|title]]</code> element,
−
which defines the
“Example page”
heading in the brower's title bar. The <code>head</code> element should always contain a
+
which defines the
"Example page"
heading in the brower's title bar. The <code>head</code> element should always contain a
<code>meta</code> element with a <code>charset</code> attribute that identifies the character encoding of the page.
<code>meta</code> element with a <code>charset</code> attribute that identifies the character encoding of the page.
(The one exception is when the page is encoded in UTF-16, but you should avoid that encoding anyway.)
(The one exception is when the page is encoded in UTF-16, but you should avoid that encoding anyway.)
Line 96:
Line 96:
After the <code>[[html/elements/head|head]]</code> element there is a <code>[[html/elements/body|body]]</code> element, which is the
After the <code>[[html/elements/head|head]]</code> element there is a <code>[[html/elements/body|body]]</code> element, which is the
−
wrapper that surrounds the actual content of the page — in this case, a level-one heading (<code>[[html/elements/hn|h1]]</code>) element, which contains the text
“Hello world”
.
+
wrapper that surrounds the actual content of the page — in this case, a level-one heading (<code>[[html/elements/hn|h1]]</code>) element, which contains the text
"Hello world"
.
−
And
that’s
our document in full.
+
And
that's
our document in full.
== The syntax of HTML elements ==
== The syntax of HTML elements ==
Line 113:
Line 113:
for example <code>img</code>.
for example <code>img</code>.
−
An element within another element is also referred to as a
“child”
element. So in the above example, <code>abbr</code> is a child of
+
An element within another element is also referred to as a
"child"
element. So in the above example, <code>abbr</code> is a child of
<code>h1</code>, which is itself a child of <code>header</code>. Conversely, the <code>header</code> element
<code>h1</code>, which is itself a child of <code>header</code>. Conversely, the <code>header</code> element
−
would be referred to as the
“parent”
of the <code>h1</code> element, which is the parent of <code>abbr</code>.
+
would be referred to as the
"parent"
of the <code>h1</code> element, which is the parent of <code>abbr</code>.
This parent/child concept is important, as it forms the basis of CSS (Cascading Stylesheet Specification) and is heavily used in JavaScript.
This parent/child concept is important, as it forms the basis of CSS (Cascading Stylesheet Specification) and is heavily used in JavaScript.
Line 161:
Line 161:
Inline elements are are contained within block
Inline elements are are contained within block
−
elements and typically surround only small parts of the
document’s
content.
+
elements and typically surround only small parts of the
document's
content.
Inline elements do not cause a new line to
Inline elements do not cause a new line to
appear in the document; rather, they
appear in the document; rather, they
Line 180:
Line 180:
For this reason they must always be coded in a special way in document content.
For this reason they must always be coded in a special way in document content.
−
One of the easiest mistakes to make in a web page is to use < and > signs in text and
having
the browser
+
One of the easiest mistakes to make in a web page is to use < and > signs in text and
have
the browser
render your content in an unexpected way. For example, if you write
render your content in an unexpected way. For example, if you write
−
"The paragraph tag (<p>) is very common", intending for it to look just like that, the browser will render it as
+
"The paragraph tag (<p>) is very common
.
", intending for it to look just like that, the browser will render it as
−
The paragraph tag (<p>) is very common</p>
+
The paragraph tag (<p>) is very common
.
</p>
This is clearly not what you wanted or expected.
This is clearly not what you wanted or expected.
−
The solution to this problem is to encode, or "escape", the two signs
,
by representing them with character references.
+
The solution to this problem is to encode, or "escape", the two signs by representing them with character references.
The character reference for less-than is "<", and the character reference for greater-than is ">".
The character reference for less-than is "<", and the character reference for greater-than is ">".
Thus, to get that line to look the way you want, you would write
Thus, to get that line to look the way you want, you would write
Line 196:
Line 196:
Character references can also be numeric. For example, you can escape an ampersand character with either
Character references can also be numeric. For example, you can escape an ampersand character with either
its shorthand word <code>&</code> or its numeric reference <code>&</code>.
its shorthand word <code>&</code> or its numeric reference <code>&</code>.
−
<!--
<!--
One of the earliest mistakes a web author can make is to use an
One of the earliest mistakes a web author can make is to use an
ampersand in a document and then have something unexpected appear.
ampersand in a document and then have something unexpected appear.
−
For example, writing
“Imperial
units measure weight in stones&
pounds”
+
For example, writing
"Imperial
units measure weight in stones&
pounds"
−
could actually end up appearing as
“…stones£s”
in some browsers.
+
could actually end up appearing as
"…stones£s"
in some browsers.
−
This is because the literal string
“
£
”
is actually a character
+
This is because the literal string
"
£
"
is actually a character
reference in HTML. A character reference is a way of including a
reference in HTML. A character reference is a way of including a
character into a document that is difficult or impossible to enter
character into a document that is difficult or impossible to enter
Line 210:
Line 209:
The ampersand (&) introduces the reference and the semi-colon (;) ends
The ampersand (&) introduces the reference and the semi-colon (;) ends
it. However, many user agents can be quite forgiving of HTML mistakes
it. However, many user agents can be quite forgiving of HTML mistakes
−
such as leaving out the semi-colon, and treat
“
&
pound”
as a character
+
such as leaving out the semi-colon, and treat
"
&
pound"
as a character
reference. References can either be numbers (numeric references) or
reference. References can either be numbers (numeric references) or
shorthand words (entity references).
shorthand words (entity references).