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/ref/img.html.md b/src/documents/ref/img.html.md index 61efe11..f28ea14 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">
+ +To resize, follow this example: <img src='someURL' height='50' width='50'>.
+height, and width are attributes of the img tag. -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/index.html b/src/documents/web/index.html new file mode 100644 index 0000000..2966a7f --- /dev/null +++ b/src/documents/web/index.html @@ -0,0 +1,5 @@ +--- +title: Web +layout: codelist +pageOrder: 4 +--- diff --git a/src/documents/web/tags.html b/src/documents/web/tags.html new file mode 100644 index 0000000..75f91f0 --- /dev/null +++ b/src/documents/web/tags.html @@ -0,0 +1,49 @@ +--- +title: HTML Tags +layout: code +subtitle: why dont you tag along? +mission: > + 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.
+ 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/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: 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. For example,
+ to add a background color, add <body bgcolor='[color]'>[Your content]</body> to your document. +mode: html +code: | +

Bird!

+ +---