From add2887b08377ca120bdb448d82f4720743e2754 Mon Sep 17 00:00:00 2001 From: David Bau Date: Mon, 28 Jul 2014 12:43:36 -0400 Subject: [PATCH 1/9] Demo mode:html --- src/documents/html/index.html | 5 +++++ src/documents/html/tags.html | 23 +++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 src/documents/html/index.html create mode 100644 src/documents/html/tags.html diff --git a/src/documents/html/index.html b/src/documents/html/index.html new file mode 100644 index 0000000..2966a7f --- /dev/null +++ b/src/documents/html/index.html @@ -0,0 +1,5 @@ +--- +title: Web +layout: codelist +pageOrder: 4 +--- diff --git a/src/documents/html/tags.html b/src/documents/html/tags.html new file mode 100644 index 0000000..d9bec48 --- /dev/null +++ b/src/documents/html/tags.html @@ -0,0 +1,23 @@ +--- +title: HTML Tags +mission: > + Tags are cool. + Tags are awesome. +layout: code +codeLevel: 0 +codeOrder: 3 +thumb: 'redangle' +refs: ['colors', 'pen', 'dot', 'fd', 'bk', 'rt', 'lt', 'curves'] +instructions: + - title: More tags + subtitle: Whoo boy! + mission: > + Try img, ul, p, h1, and hr! + - title: Even more tags + mission: > + Try img, ul, p, h1, and hr! +mode: html +code: | +

Header

Paragraph

+--- From 4ba2c69d44dec4cb3a66ac02313fb973bc0b65f5 Mon Sep 17 00:00:00 2001 From: David Bau Date: Mon, 28 Jul 2014 12:43:36 -0400 Subject: [PATCH 2/9] Demo mode:html --- src/documents/html/index.html | 5 +++++ src/documents/html/tags.html | 23 +++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 src/documents/html/index.html create mode 100644 src/documents/html/tags.html diff --git a/src/documents/html/index.html b/src/documents/html/index.html new file mode 100644 index 0000000..2966a7f --- /dev/null +++ b/src/documents/html/index.html @@ -0,0 +1,5 @@ +--- +title: Web +layout: codelist +pageOrder: 4 +--- diff --git a/src/documents/html/tags.html b/src/documents/html/tags.html new file mode 100644 index 0000000..d9bec48 --- /dev/null +++ b/src/documents/html/tags.html @@ -0,0 +1,23 @@ +--- +title: HTML Tags +mission: > + Tags are cool. + Tags are awesome. +layout: code +codeLevel: 0 +codeOrder: 3 +thumb: 'redangle' +refs: ['colors', 'pen', 'dot', 'fd', 'bk', 'rt', 'lt', 'curves'] +instructions: + - title: More tags + subtitle: Whoo boy! + mission: > + Try img, ul, p, h1, and hr! + - title: Even more tags + mission: > + Try img, ul, p, h1, and hr! +mode: html +code: | +

Header

Paragraph

+--- From caf02c2b5b5c0fa6ef41585146494df2a39f32c3 Mon Sep 17 00:00:00 2001 From: David Bau Date: Fri, 8 Aug 2014 14:41:28 -0400 Subject: [PATCH 3/9] rename html to web --- src/documents/{html => web}/index.html | 0 src/documents/{html => web}/tags.html | 12 ++++-------- 2 files changed, 4 insertions(+), 8 deletions(-) rename src/documents/{html => web}/index.html (100%) rename src/documents/{html => web}/tags.html (56%) diff --git a/src/documents/html/index.html b/src/documents/web/index.html similarity index 100% rename from src/documents/html/index.html rename to src/documents/web/index.html diff --git a/src/documents/html/tags.html b/src/documents/web/tags.html similarity index 56% rename from src/documents/html/tags.html rename to src/documents/web/tags.html index d9bec48..cda978a 100644 --- a/src/documents/html/tags.html +++ b/src/documents/web/tags.html @@ -1,23 +1,19 @@ --- title: HTML Tags mission: > - Tags are cool. - Tags are awesome. + Creating a website is easy! + Start by adding some content to the example web page. + There are many other tags to learn, so go experiment on your own! layout: code codeLevel: 0 codeOrder: 3 thumb: 'redangle' refs: ['colors', 'pen', 'dot', 'fd', 'bk', 'rt', 'lt', 'curves'] instructions: - - title: More tags - subtitle: Whoo boy! - mission: > - Try img, ul, p, h1, and hr! - title: Even more tags mission: > Try img, ul, p, h1, and hr! mode: html code: | -

Header

Paragraph

This make a paragraph that contains this text

--- From b414e3e407babc1c3c5f5c6e5312416427ebed3e Mon Sep 17 00:00:00 2001 From: brook Date: Fri, 8 Aug 2014 16:52:02 -0400 Subject: [PATCH 4/9] initial HTML tag sequence --- src/documents/html/index.html | 5 ----- src/documents/html/tags.html | 23 ------------------- src/documents/ref/img.html.md | 40 +++++++++++---------------------- src/documents/web/tags.html | 42 ++++++++++++++++++++++++++--------- 4 files changed, 45 insertions(+), 65 deletions(-) delete mode 100644 src/documents/html/index.html delete mode 100644 src/documents/html/tags.html diff --git a/src/documents/html/index.html b/src/documents/html/index.html deleted file mode 100644 index 2966a7f..0000000 --- a/src/documents/html/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Web -layout: codelist -pageOrder: 4 ---- diff --git a/src/documents/html/tags.html b/src/documents/html/tags.html deleted file mode 100644 index d9bec48..0000000 --- a/src/documents/html/tags.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: HTML Tags -mission: > - Tags are cool. - Tags are awesome. -layout: code -codeLevel: 0 -codeOrder: 3 -thumb: 'redangle' -refs: ['colors', 'pen', 'dot', 'fd', 'bk', 'rt', 'lt', 'curves'] -instructions: - - title: More tags - subtitle: Whoo boy! - mission: > - Try img, ul, p, h1, and hr! - - title: Even more tags - mission: > - Try img, ul, p, h1, and hr! -mode: html -code: | -

Header

Paragraph

---- diff --git a/src/documents/ref/img.html.md b/src/documents/ref/img.html.md index 61efe11..c07b580 100644 --- a/src/documents/ref/img.html.md +++ b/src/documents/ref/img.html.md @@ -6,33 +6,19 @@ section: html refOrder: 1 --- -img is an HTML tag that you can use inside your write blocks. -The src attribute is set to the name of the image file you want to inclode +img is an HTML tag that you can use to put an image into your HTML document. +The src attribute is set to the name of the image file you want to include. -write '<img src="/images/dragon.png">' +<img src="/img/dragon"> + +This searches google images for the first image result given your query. + +When you write HTML files on the web, you can also just include images from anywhere online. +

+<img src=
+"http://beyondheroes2.zxq.net/BlackDragon.jpg">

+Want to resize your image? There's an attribute for that!
+Add in height='50' width='50' inside your tag, to resize it.
+height, and width are attributes of the img tag. They set the size. -When you write HTML files on the web, you can include images from anywhere online. -For today, we've put together a set of images to use. Here is a list of them: -

-  brain.png
-  bridge.png
-  cave.png
-  dog.png
-  dragon.png
-  exoplanet.png
-  fish.png
-  galaxy.png
-  grasshopper.png
-  key.png
-  mountain.png
-  mouse.png
-  moth.png
-  orangutan.png
-  ship.png
-  ship_deck.png
-  tree.png
-  village.png
-  waterfall.png
-  windmill.png
-

diff --git a/src/documents/web/tags.html b/src/documents/web/tags.html index cda978a..8c1cb89 100644 --- a/src/documents/web/tags.html +++ b/src/documents/web/tags.html @@ -1,19 +1,41 @@ --- title: HTML Tags +subtitle: why dont you tag along? mission: > Creating a website is easy! - Start by adding some content to the example web page. - There are many other tags to learn, so go experiment on your own! -layout: code -codeLevel: 0 -codeOrder: 3 -thumb: 'redangle' -refs: ['colors', 'pen', 'dot', 'fd', 'bk', 'rt', 'lt', 'curves'] + Content in HTML is wrapped by tags which are used to describe the content.
+ There are many tags to learn, so check the references! instructions: - - title: Even more tags + - title: The Tag + subtitle: the sky's the limit! wait, no.. mission: > - Try img, ul, p, h1, and hr! + Most markup tags are used for formatting text, and some find that + interesting. Let's play with images instead.
+ Use the <img> tag to put a cool image onto your page! + Just change the tag like so: <img src='/img/[Add anything here!]'> + - title: Attributes + subtitle: this is an attribute to you.. + mission: > + HTML tags all have attributes. src='' is actually an + attribute of the <img> tag.
width + and height are also attributes of the + <img> tag. + Add the width attribute inside your <img> + tag to resize it like so : <img width='50px' src='/img/[Add anything here!]'> + - title: Hyper-Text-Markup-Language + subtitle: it's all in the name + mission: > + So as you probably have noticed, ther'es an <h2> tag around the text.
+ There are actually many other tags to format your text. Try changing to the <h1>
+ tag to see the difference. See the text reference. + - title: Where are we again? + subtitle: wherever you say you are + mission : > + Now you know how to put elements onto a page and resize them, but how do you position them?
+ Use the <center> tag to center your other elements. Try this :
+ <center>everything else!</center> mode: html code: | -

This make a paragraph that contains this text

Bird!

--- From fe03e9a75e5b420d4fef7d2d8ceed89f92d92bf1 Mon Sep 17 00:00:00 2001 From: David Bau Date: Fri, 8 Aug 2014 17:08:08 -0400 Subject: [PATCH 5/9] Change refernces list. --- src/documents/web/tags.html | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/documents/web/tags.html b/src/documents/web/tags.html index 8c1cb89..9ac0327 100644 --- a/src/documents/web/tags.html +++ b/src/documents/web/tags.html @@ -5,32 +5,33 @@ Creating a website is easy! Content in HTML is wrapped by tags which are used to describe the content.
There are many tags to learn, so check the references! +refs: ['img'] instructions: - title: The Tag subtitle: the sky's the limit! wait, no.. mission: > - Most markup tags are used for formatting text, and some find that - interesting. Let's play with images instead.
+ Most markup tags are used for formatting text, and some find that + interesting. Let's play with images instead.
Use the <img> tag to put a cool image onto your page! - Just change the tag like so: <img src='/img/[Add anything here!]'> + Just change the tag like so: <img src='/img/[Add anything here!]'> - title: Attributes subtitle: this is an attribute to you.. mission: > - HTML tags all have attributes. src='' is actually an - attribute of the <img> tag.
width - and height are also attributes of the + HTML tags all have attributes. src='' is actually an + attribute of the <img> tag.
width + and height are also attributes of the <img> tag. - Add the width attribute inside your <img> + Add the width attribute inside your <img> tag to resize it like so : <img width='50px' src='/img/[Add anything here!]'> - title: Hyper-Text-Markup-Language subtitle: it's all in the name - mission: > + mission: > So as you probably have noticed, ther'es an <h2> tag around the text.
There are actually many other tags to format your text. Try changing to the <h1>
- tag to see the difference. See the text reference. + tag to see the difference. See the text reference. - title: Where are we again? subtitle: wherever you say you are - mission : > + mission : > Now you know how to put elements onto a page and resize them, but how do you position them?
Use the <center> tag to center your other elements. Try this :
<center>everything else!</center> From 837d1dfc41d9ad5d2729a85b61580eb7fd540903 Mon Sep 17 00:00:00 2001 From: brook Date: Fri, 8 Aug 2014 17:18:39 -0400 Subject: [PATCH 6/9] Change to img ref --- src/documents/ref/img.html.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/documents/ref/img.html.md b/src/documents/ref/img.html.md index c07b580..f28ea14 100644 --- a/src/documents/ref/img.html.md +++ b/src/documents/ref/img.html.md @@ -9,16 +9,16 @@ refOrder: 1 img is an HTML tag that you can use to put an image into your HTML document. The src attribute is set to the name of the image file you want to include. -<img src="/img/dragon"> +<img src="/img/dragon"> This searches google images for the first image result given your query. When you write HTML files on the web, you can also just include images from anywhere online. -

+ <img src=
 "http://beyondheroes2.zxq.net/BlackDragon.jpg">
-Want to resize your image? There's an attribute for that!

-Add in height='50' width='50' inside your tag, to resize it.

-height, and width are attributes of the img tag. They set the size.
+
+To resize, follow this example: <img src='someURL' height='50' width='50'>.

+height, and width are attributes of the img tag. 
 
 

From f86955c3f2f8cfe292d0049f85a432d977596f6d Mon Sep 17 00:00:00 2001
From: David Bau 
Date: Fri, 8 Aug 2014 17:25:46 -0400
Subject: [PATCH 7/9] Fix a couple minor issues, and add redirect to /img

---
 docpad.coffee               | 7 +++++++
 src/documents/web/tags.html | 1 +
 2 files changed, 8 insertions(+)

diff --git a/docpad.coffee b/docpad.coffee
index 7cb32f0..a454be8 100644
--- a/docpad.coffee
+++ b/docpad.coffee
@@ -148,6 +148,13 @@ docpadConfig = {
         else
           next()
 
+      # Redirect /img/ urls to public site.
+      server.use (req,res,next) ->
+        if /^\/img(?:\/|$)/.test(req.path)
+          res.redirect('http://gym.pencilcode.net' + req.path, 301)
+        else
+          next()
+
   # =================================
   prompts: false
   checkVersion: false
diff --git a/src/documents/web/tags.html b/src/documents/web/tags.html
index 9ac0327..6285504 100644
--- a/src/documents/web/tags.html
+++ b/src/documents/web/tags.html
@@ -1,5 +1,6 @@
 ---
 title: HTML Tags
+layout: code
 subtitle: why dont you tag along?
 mission: >
   Creating a website is easy!

From 68e507ea30f8bdd554ad92d8175862f95622a416 Mon Sep 17 00:00:00 2001
From: brook 
Date: Fri, 8 Aug 2014 17:29:17 -0400
Subject: [PATCH 8/9] tags edit

---
 src/documents/web/tags.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/documents/web/tags.html b/src/documents/web/tags.html
index 9ac0327..f0b8c30 100644
--- a/src/documents/web/tags.html
+++ b/src/documents/web/tags.html
@@ -22,19 +22,24 @@
       and height are also attributes of the
       <img> tag.
       Add the width attribute inside your <img>
-      tag to resize it like so : <img width='50px' src='/img/[Add anything here!]'>
+      tag to resize it like so : <img width='50px' src='/img/bird'>
   - title: Hyper-Text-Markup-Language
     subtitle: it's all in the name
     mission: >
       So as you probably have noticed, ther'es an <h2> tag around the text.

       There are actually many other tags to format your text. Try changing to the <h1>

       tag to see the difference. See the text reference.
-  - title: Where are we again?
-    subtitle: wherever you say you are
+  - title: HTML Positioning
+    subtitle: finding your center
     mission : >
       Now you know how to put elements onto a page and resize them, but how do you position them?

       Use the <center> tag to center your other elements. Try this :

       <center>everything else!</center>
+  - title: The  Tag
+    subtitle: it's alive!
+    mission: > 
+      The <body> tag is usually used to contain all the content on a page.

+      This is useful if you want to apply some property to your entire document. 
 mode: html
 code: |
   Bird!

From cb4e70d4e6da6e124aab754debd74e0b8bae2add Mon Sep 17 00:00:00 2001
From: brook 
Date: Fri, 8 Aug 2014 17:40:09 -0400
Subject: [PATCH 9/9] tags edit

---
 src/documents/web/tags.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/documents/web/tags.html b/src/documents/web/tags.html
index 4702bc7..75f91f0 100644
--- a/src/documents/web/tags.html
+++ b/src/documents/web/tags.html
@@ -40,7 +40,8 @@
     subtitle: it's alive!
     mission: > 
       The <body> tag is usually used to contain all the content on a page.

-      This is useful if you want to apply some property to your entire document. 
+      This is useful if you want to apply some property to your entire document. For example,

+      to add a background color, add <body bgcolor='[color]'>[Your content]</body> to your document.  
 mode: html
 code: |
   Bird!