26 | The original idea of the web was that it should be a collaborative
27 |
28 |
29 | space
30 |
31 |
32 | where you can communicate through sharing information.
33 |
34 | {% endhighlight %}
35 |
36 |
37 |
38 | The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.
39 |
40 |
41 |
42 | 如果你想在文档中**强制**添加一个换行，你需要使用` ` HTML 元素：
43 |
44 | {% highlight html %}
45 |
The XML mode supports two configuration parameters:
46 |
47 |
htmlMode (boolean)
48 |
This switches the mode to parse HTML instead of XML. This
49 | means attributes do not have to be quoted, and some elements
50 | (such as br) do not require a closing tag.
51 |
alignCDATA (boolean)
52 |
Setting this to true will force the opening tag of CDATA
53 | blocks to not be indented.
54 |
55 |
56 |
MIME types defined:application/xml, text/html.
57 |
58 |
--------------------------------------------------------------------------------
/javascript/mode/xml/test.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function() {
5 | var mode = CodeMirror.getMode({indentUnit: 2}, "xml"), mname = "xml";
6 | function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), mname); }
7 |
8 | MT("matching",
9 | "[tag&bracket <][tag top][tag&bracket >]",
10 | " text",
11 | " [tag&bracket <][tag inner][tag&bracket />]",
12 | "[tag&bracket ]");
13 |
14 | MT("nonmatching",
15 | "[tag&bracket <][tag top][tag&bracket >]",
16 | " [tag&bracket <][tag inner][tag&bracket />]",
17 | " [tag&bracket ]");
18 |
19 | MT("doctype",
20 | "[meta ]",
21 | "[tag&bracket <][tag top][tag&bracket />]");
22 |
23 | MT("cdata",
24 | "[tag&bracket <][tag top][tag&bracket >]",
25 | " [atom ]",
27 | "[tag&bracket ]");
28 |
29 | // HTML tests
30 | mode = CodeMirror.getMode({indentUnit: 2}, "text/html");
31 |
32 | MT("selfclose",
33 | "[tag&bracket <][tag html][tag&bracket >]",
34 | " [tag&bracket <][tag link] [attribute rel]=[string stylesheet] [attribute href]=[string \"/foobar\"][tag&bracket >]",
35 | "[tag&bracket ]");
36 |
37 | MT("list",
38 | "[tag&bracket <][tag ol][tag&bracket >]",
39 | " [tag&bracket <][tag li][tag&bracket >]one",
40 | " [tag&bracket <][tag li][tag&bracket >]two",
41 | "[tag&bracket ]");
42 |
43 | MT("valueless",
44 | "[tag&bracket <][tag input] [attribute type]=[string checkbox] [attribute checked][tag&bracket />]");
45 |
46 | MT("pThenArticle",
47 | "[tag&bracket <][tag p][tag&bracket >]",
48 | " foo",
49 | "[tag&bracket <][tag article][tag&bracket >]bar");
50 |
51 | })();
52 |
--------------------------------------------------------------------------------
/javascript/post.js:
--------------------------------------------------------------------------------
1 | jQuery(document).ready(function ($) {
2 |
3 | var $breadcrumb = $('#breadcrumb');
4 | var $toc = $('#menu');
5 | var $list = $toc.children('ul');
6 | var $headings = $('.content h3');
7 | var $open = $('#open');
8 | var $close = $('#close, #overlay');
9 |
10 | if ($headings.length) {
11 | $headings.each(function() {
12 | var $el = $(this);
13 | var id = $el.attr('id');
14 | if (id) {
15 | $list.append(
16 | $('').append(
17 | $('')
18 | .text($el.text())
19 | .attr('href', '#' + id)
20 | )
21 | );
22 | $el.prepend(
23 | $('')
24 | .addClass('header-link')
25 | .attr('href', '#' + id)
26 | .html('#')
27 | );
28 | return;
29 | }
30 | });
31 | } else {
32 | $toc.hide();
33 | }
34 |
35 | $breadcrumb.affix({
36 | offset: {
37 | top: $breadcrumb.offset().top,
38 | bottom: function () {
39 | var newsletterHeight = $('#newsletter').outerHeight(true);
40 | var footerHeight = $('#footer').outerHeight(true);
41 | return (this.bottom = newsletterHeight + footerHeight);
42 | }
43 | }
44 | })
45 |
46 | $open.click( function() {
47 | $('html').addClass('has-menu-open');
48 | });
49 |
50 | $close.click( function() {
51 | $('html').removeClass('has-menu-open');
52 | });
53 |
54 | });
55 |
--------------------------------------------------------------------------------
/original-docs/2015-01-01-introduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: chapter
3 | title: "Introduction"
4 | subtitle: "An overview of how the Web works"
5 | section: web
6 | ---
7 |
8 | Before diving into the technical and practical aspect of coding, you need to have a **basic** understanding of how the underlying _environment_ works.
9 |
10 | This introduction is meant to provide a quick overview of both the **Internet** and the **Web**.
11 |
--------------------------------------------------------------------------------
/original-docs/2015-01-05-requirements.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Requirements"
4 | subtitle: "Before reading this tutorial"
5 | section: web
6 | published: false
7 | ---
8 |
9 | ### Show file extensions
10 |
11 | Let's say you have a solar eclipse picture on your computer, it will show up as:
12 |
13 | 
14 |
15 | * the **name** of the file is `solar-eclipse`
16 | * the **extension** of the file is `.jpg`
17 |
18 | A file's extension defines the _type_ of file it is (in this case, an image). For HTML files, the extension is `.html`.
19 |
20 | By default, **file extensions** are hidden. In this tutorial, we'll need to be able to edit these extensions. So follow these instructions to display file extensions:
21 |
22 | * **Windows**: [Show or hide file name extensions](http://windows.microsoft.com/en-us/windows/show-hide-file-name-extensions)
23 | * **Mac**: [Show and hide filename extensions](https://support.apple.com/kb/PH10845?locale=en_US)
24 |
25 | ### Download a good Web browser
26 |
27 |
28 |
29 | [^1]: ["March 20th Eclipse - Ireland cropped" by Jacob Thomas](http://commons.wikimedia.org/wiki/File:March_20th_Eclipse_-_Ireland_cropped.jpg#/media/File:March_20th_Eclipse_-_Ireland_cropped.jpg)
30 |
--------------------------------------------------------------------------------
/original-docs/2015-02-01-html-basics.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: chapter
3 | title: "HTML Basics"
4 | subtitle: "HTML is like Word but for the Web"
5 | section: html
6 | ---
7 |
8 | You're certainly already acquainted with document editors, like **Microsoft Word**, with which you can **structure** your document with titles, paragraph, lists, tables, images, **bold** and _italic_ text.
9 |
10 | **HTML** provides roughly the same elements of formatting. The key difference is that formatting text in Microsoft Word is _visual_, whereas HTML code is purely **semantic**: you provide _meaning_ to your text.
11 |
12 | The same way you use ♫ **notes** ♬ to write **music**, you use **HTML** to write **webpages**.
13 |
--------------------------------------------------------------------------------
/original-docs/2015-02-03-html-block-inline.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "HTML Block and Inline"
4 | subtitle: "HTML has 2 main types of elements"
5 | section: html
6 | ---
7 |
8 | In HTML, you'll mainly come across 2 types of HTML elements:
9 |
10 | * **block** elements like:
11 |
12 | * paragraphs `
`
13 | * lists: unordered (with bullet points) `
` or ordered lists (with numbers) ``
14 | * headings: from 1st level `
34 | {% endhighlight %}
35 |
36 | ### Opening and closing tags
37 |
38 | **All** block-level elements have an opening and closing tags.
39 |
40 | As a result, self-enclosing elements are **inline** elements, simply because their syntax don't allow them to contain any other HTML element.
41 |
42 |
87 |
88 | ### Other types of HTML elements
89 |
90 | There are several exceptions to the block/inline elements, but the ones you will most often encounter are:
91 |
92 | * **list items** for the `
` respectively
94 |
--------------------------------------------------------------------------------
/original-docs/2015-03-01-html-content.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: chapter
3 | title: "HTML Content"
4 | subtitle: "What the Web is all about"
5 | section: html
6 | ---
7 |
8 | The **Web** was created to share _documents_ via Internet, and **HTML** is the _language_ in which these documents are written.
9 |
10 | While **text** has always been the primary medium, HTML evolved to incorporate other types of content like **images** and **videos**.
--------------------------------------------------------------------------------
/original-docs/2015-03-03-html-inline-semantics.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Inline semantics"
4 | subtitle: "The small parts within a block of text"
5 | section: html
6 | ---
7 |
8 | While paragraphs and lists are meant to identify whole **blocks** of text, we sometimes want to provide meaning to a word (or a few words) _within_ a text.
9 |
10 | ### Strong
11 |
12 | For **important** words, use the `` tag:
13 |
14 | {% highlight html %}
15 |
16 | This is important but this is not.
17 |
18 | {% endhighlight %}
19 |
20 |
21 |
22 | This is important but this is not.
23 |
24 |
25 |
26 | By default, `` elements are displayed in **bold**, but keep in mind that it is only the browser's default behavior. Don't use `` _only_ to put some text in bold, but rather to give it more **importance**.
27 |
28 | ### Emphasis
29 |
30 | For _emphasized_ words, use the `` tag:
31 |
32 | {% highlight html %}
33 |
34 | This is emphasized but this is not.
35 |
36 | {% endhighlight %}
37 |
38 |
39 |
40 | This is emphasized but this is not.
41 |
42 |
43 |
44 | By default, `` elements are displayed in _italic_, but keep in mind that it is only the browser's default behavior. Don't use `` _only_ to put some text in italic, but rather to give it _stress emphasis_.
45 |
46 | ### Abbreviations
47 |
48 | Abbreviations like W3C or CD can use the `` element:
49 |
50 | {% highlight html %}
51 |
52 | I just bought a CD.
53 |
54 | {% endhighlight %}
55 |
56 | You can add a `title` **attribute** to specify the abbreviation's description, which will appear by hovering the element:
57 |
58 | {% highlight html %}
59 |
60 | I just bought a CD.
61 |
62 | {% endhighlight %}
63 |
64 |
65 |
66 | I just bought a CD.
67 |
68 |
69 |
70 | ### Inline quotes
71 |
72 | The `
` element is a **block-level** element. It has an **inline** version: ``:
73 |
74 | {% highlight html %}
75 |
76 | He said “Hello World” and just left.
77 |
78 | {% endhighlight %}
79 |
80 |
81 |
82 | He said “Hello World” and just left.
83 |
84 |
85 |
86 | ### Other inline elements
87 |
88 | There are plenty of other [inline semantic elements](https://developer.mozilla.org/en/docs/Web/HTML/Element#Inline_text_semantics) to choose from, but we've covered the most common ones.
89 |
90 | *[CD]: Compact Disc
91 | *[W3C]: World Wide Web Consortium
92 |
--------------------------------------------------------------------------------
/original-docs/2015-03-04-html-images.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "HTML Images"
4 | subtitle: "The major media on the Web"
5 | section: html
6 | ---
7 |
8 | **Images** are the first non-textual content to have appeared on the Web. Most image formats you can find on your computer can also be displayed in your browser: `.jpg`, `.gif` (animated or not), `.png` (transparent or not), `.bmp`...
9 |
10 | ### Syntax
11 |
12 | **Images** use the `` element, which is a **self-closing** element (it only has an opening tag).
13 |
14 | The `src` attribute defines the **location** of the image. As with links, you can either use _relative_ or _absolute_ URLs.
15 |
16 |
17 |
18 |
19 | my-first-website
20 |
21 |
22 |
23 | home.html
24 |
25 |
26 |
27 | soyuz-spacecraft.jpg
28 |
29 |
30 |
31 |
32 |
33 | {% highlight html %}
34 |
35 | Look at this spacecraft landing!
36 |
37 |
38 |
39 | {% endhighlight %}
40 |
41 |
42 |
43 | Look at this spacecraft landing!
44 |
45 |
46 |
47 |
48 |
49 | ### Dimensions
50 |
51 | Every image has **2 dimensions**: a **width** and a **height**. The previously shown spacecraft image is 394 pixels wide and 284 high.
52 |
53 | When inserting an image in HTML, you **don't need to specify its dimensions**: the browser will automatically display it in **full size**.
54 |
55 | If you want to alter the dimensions of an image, although it is possible in HTML, it's recommended to use CSS, as we'll see in later chapters.
56 | {: .info}
57 |
58 | ### Block or inline?
59 |
60 | Although an image has a width and a height, and is visually a big rectangle, an image is **not an HTML block element** but actually an **inline element**.
61 |
62 | This is due to the `` element being a **self-closing** element: it can't technically contain any other HTML element, and is thus considered an inline element, like ``, `` or ``.
63 |
64 | This inline behavior can have unexpected results:
65 |
66 | {% highlight html %}
67 |
86 | {% endhighlight %}
87 |
88 | 考虑到`
115 |
116 | {% endhighlight %}
117 |
118 | 因为自闭合标签没有闭合标签，所以它不能包含其他文档内容，只能通过一些属性来设置额外的信息。
119 |
--------------------------------------------------------------------------------
/_posts/2015-02-03-html-block-inline.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "HTML 块级元素 和 内联元素"
4 | subtitle: "HTML has 2 main types of elements"
5 | section: html
6 | ---
7 |
8 |
9 |
10 | 在HTML中，主要有两种HTML元素。
11 |
12 | * **块级** 元素：
13 |
14 | * 段落： `
9 | 
38 | 
46 | 
70 | in the middle of the paragraph!
71 | 
78 | in the middle of the paragraph!
79 |