-
Notifications
You must be signed in to change notification settings - Fork 0
/
syntaxChpt4.htm
116 lines (116 loc) · 11.1 KB
/
syntaxChpt4.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Syntax</title>
<link href="_css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner">
<h1>HTML Essential Training</h1>
<h2>HTML Syntax</h2>
<nav role="navigation">
<ul>
<li><a href="intro.htm" title="Introduction to HTML">Introduction to HTML</a></li>
<li><a href="syntax.htm" title="HTML syntax">HTML syntax</a></li>
<li><a href="structure.htm" title="Structuring pages">Structuring pages</a></li>
<li><a href="links.htm" title="Creating links">Creating links</a></li>
<li><a href="reference.htm" title="HTML Reference">HTML reference</a></li>
<li><a href="next.htm" title="Next steps">Next steps</a></li>
</ul>
</nav>
</header>
<main role="main">
<article>
<header>
<p>Because HTML is often the people’s first experience with coding, there can be a fair amount of apprehension about learning it. Thankfully, HTML syntax is relatively simple and easy to learn. Most people can learn the basics of HTML
and begin coding it within the same day.</p>
</header>
<section>
<h3>A markup language</h3>
<p>HTML is a markup language. That means that content on the page is “marked up” by tags which identify the content inside of them. A paragraph, for example, can be identified by placing the “<p>” opening tag
prior to the paragraphs content and the “</p>” closing tag at the end of a paragraph. The full paragraph would look like this:</p>
<pre><code><p>This is a paragraph.</p></code></pre>
<p>Tags consist of a left-angle bracket (<) followed by a character or characters that identify the tag (the “p” for paragraph) and a closing right-angle bracket (>). The closing tags for an element are exactly the same as
an opening tag, except that a forward slash (/) will precede the tags characters.<br>
Although most elements require an opening and a closing tag, the closing tag is optional for some elements and not required at all for others. While there are exceptions to the rule, for the most part any element that contains content
inside the opening and closing tags also requires a closing tag.</p>
</section>
<section>
<h3>Basic document structure</h3>
<p>The core of all HTML documents revolves around three basic tags. First, an html tag (<html>) is required to identify the document as an HTML file. Directly inside the html tag, you’ll find the head element (<head>). The
head of a document is where you’ll find the document’s metadata, the document title, and links to external resources such as style sheets and scripts. A good way to think about the document’s head is that it doesn’t
contain any of the page’s <em>visual</em> content rather it contains information about the document and the resources that help make the page work. Directly after the document’s head, you’ll find its body (<body>).
The body is where you’ll find all of the page’s actual content. Headings, paragraphs, images, lists, tables, and other content will be located here. At its most basic, an HTML file would look like this:</p>
<pre><code><html>
<head>
</head>
<body>
</body>
</html></code></pre>
</section>
<section>
<h3>DOCTYPES</h3>
<p>If you’ve looked at HTML pages before, you’ve probably noticed a long, somewhat intimidating tag just before the opening HTML tag. This is a doctype declaration and it’s a very important but often misunderstood component
of HTML pages. Essentially, it tells the user agent parsing your page which version of HTML (or XHTML) to expect, so that it knows which syntax rules to use when rendering your page. The doctype you use should be based on the version of
HTML you’re using to author the page. While that all sounds good in theory, in reality most of the time a doctype is simply triggering “standards-mode” rather than “quirks mode” (based on older browsers
non-standard way of rendering pages). For that reason alone, all HTML documents should be preceded by a doctype declaration. For more information on doctypes, and the history behind them, check out Mark Pilgrim’s excellent section on
doctypes from his <em><a href="http://diveintohtml5.info/semantics.html#the-doctype" title="Dive into HTML5">Dive Into HTML5</a></em> book. Here are some of the more common HTML doctypes:</p>
<h4 class="dtd">HTML 4.0 transitional</h4>
<pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></code></pre>
<h4 class="dtd">XHTML 1.0 Transitional</h4>
<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code></pre>
<h4 class="dtd">HTML5</h4>
<pre><code><!DOCTYPE HTML></code></pre>
</section>
<section>
<h3>Element attributes</h3>
<p>Some elements can be enhanced through the use of attributes. Attributes allow you to provide more information or additional functionality to the content. Attributes are added to the opening tag of an element and consist of two parts, the
<strong>name</strong> and <strong>value</strong>. Although the syntax varies based on the version of HTML you’re using, it’s standard practice to put values within quotation marks.</p>
<pre><code><h1 class=”headline”>Article’s main headline</h1></code></pre>
<h3>Replaced elements</h3>
<p>Some HTML elements represent content that is replaced by an outside resource such as an image, form control, or a video file. These elements are referred to as <strong>replaced elements</strong> and usually have a predetermined width or
height. In some cases the elements will have attributes that tell the browser where to find an external resource like an image or video.</p>
<pre><code><img src=“photo.jpg” alt=“my awesome photo”> </code></pre>
</section>
<section>
<h3>Code structure</h3>
<p>HTML documents create structure by nesting elements inside of one another. You might group a section of page content together by wrapping them within a <div> or <section> element, for example. When nesting one tag within
another one, you must first close any child elements prior to closing any parent elements. <br>
This syntax, for example, would be <em>incorrect</em>:</p>
<pre class="wrong"><code><p>You must close all nested tags <strong>first!</p></strong></code></pre>
<p>Rather, the correct syntax would be:</p>
<pre class="correct"><code><p>You must close all nested tags <strong>first!</strong></p></code></pre>
<p>HTML also has specific rules about which elements can be nested within other elements. A paragraph (<p>) for example, can’t be nested inside a heading (<h1>). For the most part, these rules are based around the
type of content the tag represents. HTML 4 has two basic types of content: <strong>block</strong> and <strong>inline</strong>. Block-level elements typically occupy their own line within a document, usually stacking one on top of each
other in the order they appear in your code. Inline-level elements can appear within the flow of block level elements. Elements like strong (<strong>), bold (<b>), emphasis (<em>), italic (<i>), and span
(<span>) are always found inside block-level elements. <br>
HTML5, on the other hand, expands the concept of content types to seven different categories of content, with some elements belonging to multiple categories. This replaces the concept of block-level and inline-level elements and adds some
additional nesting syntax rules. For the most part, the rules around nesting elements make sense and are fairly easy to pick up. You should be prepared, however, for it to take some time before you fully understand all of the rules
surrounding nesting elements. One way to making sure to your code is structured properly is to validate your code through a service like the <a href="http://validator.w3.org" title="W3C markup validator">W3C’s Markup Validation
service</a>.</p>
</section>
<section>
<h3>Commenting code</h3>
<p>Often it is helpful to leave notes to yourself or other developers within your code. Perhaps you want to remind yourself what a certain script does, or remind a co-worker how to properly structure specific content. To do this,
you’ll use comments. Comments should appear on their own line, and typically appear directly before or after the code they refer to. Comments begin with a left-angle bracket, an exclamation point, and two hyphens (<!--) and end
with two hyphens followed by a right-angle bracket (-->).</p>
<h4>Comment syntax:</h4>
<pre><code><!-- This is a comment --></code></pre>
</section>
<section>
<h3>Using special characters</h3>
<p>Certain characters are reserved in HTML, meaning that you shouldn’t use them outside of their specific purpose. The angle brackets, for example, are reserved for tags, and using them anywhere outside of a tag could cause parsing
errors in browsers. However, you can still use these reserved characters and other special characters or symbols by using what is known as a <strong>named character entity</strong>. These special codes tell the user agent to replace the
entity code with a specific character. These entities begin with an ampersand (&) followed by the entity name and end with a semicolon (;). To display an ampersand, for example, you would type <strong>&amp;</strong> in place of the
actual ampersand. You can find named character entity lists within the HTML specifications, although the format for them can be a bit hard to read. You can also find a useful list of character entities on the <a href="reference.htm#named">HTML
Reference</a> page, and a more comprehensive list on <a href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" title="Character entity reference">Wikipedia</a>.</p>
</section>
</article>
</main>
<footer role="contentinfo">
<p>© <a href="http://www.lynda.com" title="lynda.com" target="_blank">lynda.com</a> | follow me and lynda.com on Twitter! <a href="https://twitter.com/jameswillweb" title="Follow me on Twitter">@jameswillweb</a> <a href="https://twitter.com/lynda"
title="Follow lynda.com on Twitter">@lyndadotcom</a></p>
</footer>
</body>
</html>