reference_document_exported.html

<p>The main content of the article starts here.</p><h2>Headings</h2><p>Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.</p><p>Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...</p><h2>Basic Text and a Link</h2><p>Text can include links and basic formatting. By using the toolbar you can define <strong>bold</strong> and <em>italic</em> text.</p><p>To create a link just use the button within the toolbar: <a href="http://en.wikipedia.org/wiki/Lorem_ipsum">Lorem ipsum</a></p><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><h2>Lists</h2><p>There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.</p><ul><li><p>This is an unordered list...</p></li><li><p>… with <em>two</em> entries</p></li></ul><ol><li><p>And here we have a numbered list</p></li><li><p>This time, with <strong>three</strong> entries.</p></li><li><p>Great, isn’t it?!</p></li></ol><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><h2>Images</h2><p>Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.</p><p>When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.</p><figure class="float-left"><a href="http://devex.com"><img src="https://lh7-us.googleusercontent.com/7bgjcEQ6DWAfTzeb-RY5ExlTBWkHdqQf9PSK7ck3IxzI2sVDrm_hfI6jT-c04tenqOWWtWMxMQyWX0fEZeN3aVbBC_YsCCKm0vmddGeRgIETJ5yJbQoGCzh4dwCo0bPGfh5rTljMk8PEvwQ" alt=""></a><figcaption>The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag  with a url inside, the image will have a link to that url (devex.com, in this case).</figcaption></figure><p>The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.</p><p>You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.</p><figure class="float-right"><img src="https://lh7-us.googleusercontent.com/TUa7V3jix4UVQPZBW7NV4vbN0cos0XiHaKCBzlY0qZSSmOD9CBsEIVo1XbxpTGDwElOiNTthnJxSHVaQ2MoSY0tKcV2NYBswCUeeI8FCO_BbTOj3IQ-dAWuxoTLAGov9AQjckAYlhSz8zIY" alt="The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader)."><figcaption>The caption will then also be on the right, even if it’s not properly aligned within this document.</figcaption></figure><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><p>Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.</p><figure><img src="https://lh7-us.googleusercontent.com/9iLRuiHNW66DDyP0pP-4xkiGmxcDp7D1a526AGyuTnMWbrX89YRxABC9iDkoKS0p-sQtOBAxCPzcb9Kvpd08gE6JHOCxNnEu7tnJLDpIRj2g8ME3jNcrimi8_HqJcIT9Bjd_2pZURwC0_Ts" alt=""><figcaption>And of course, also the big images have captions...</figcaption></figure><h1>Embedded Elements</h1><p>Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.</p><h2>Videos: Vimeo</h2><p>Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.</p><figure><div class="embed vimeo-video"><iframe src="https://player.vimeo.com/video/42315417?app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen title="What We Do - Raj Kumar, President, Devex"></iframe></div><figcaption>The paragraph following the URL is the video’s caption.</figcaption></figure><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><h2>Videos: YouTube</h2><figure><div class="embed youtube-video"><iframe width="200" height="150" src="https://www.youtube.com/embed/_ZG8HBuDjgc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><figcaption>The paragraph following the URL is the video’s caption.</figcaption></figure><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><h2>Slideshows</h2><p>Slideshows are, like videos, referenced by an URL:</p><figure><div class="embed slideshare"><iframe src="https://www.slideshare.net/slideshow/embed_code/key/fAYvedL9rNCr9k" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/Devex/the-best-global-development-quotes-of-2012" title="The Best Global Development Quotes of 2012" target="_blank">The Best Global Development Quotes of 2012</a> </strong> from <strong><a href="https://www.slideshare.net/Devex" target="_blank">Devex</a></strong> </div>

</div><figcaption>The paragraph following the URL is the slideshow’s caption.</figcaption></figure><p>Please note that currently only slideshows on slideshare are recognized.</p><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><h2>Twitter Tweets</h2><p>Individual tweets can be embedded by providing the URL:</p><figure><div class="embed tweet"><blockquote class="twitter-tweet" align="center"><p lang="en" dir="ltr">New post on the <a href="https://twitter.com/hashtag/Devex?src=hash&amp;ref_src=twsrc%5Etfw">#Devex</a> Tech Blog: The Devex NewsLab: Using Google Docs as a CMS - <a href="http://t.co/iv86zTX0JZ">http://t.co/iv86zTX0JZ</a></p>— Devex It (@d3v3x) <a href="https://twitter.com/d3v3x/status/554608639030599681?ref_src=twsrc%5Etfw">January 12, 2015</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div><figcaption>A nice caption...</figcaption></figure><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><h1>Quotes</h1><p>A subtitle named “Quote:” indicates the start of a quote which continues until the first occurring horizontal line. The last paragraph is formatted to be the quoted source. Quotes can be aligned to the left, right or center. Centered quotes will span the whole width of the article while left- and right-aligned are smaller and have text floating around it.</p><div class="quote float-left"><p>Operator! Give me the number for 911!</p><small>Homer Simpson</small></div><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><div class="quote"><p>Marge, don't discourage the boy! Weaseling out of things is important to learn. It's what separates us from the animals! Except the weasel.</p><small>Homer Simpson</small></div><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><div class="quote float-right"><p>Oh, so they have internet on computers now!</p><small>Homer Simpson</small></div><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><h1>Text Boxes</h1><p>Text boxes include internal excerpts from the article (Story Highlights) or additional information related to the article and are displayed either on the left or on the right. A subtitle named “Textbox:” indicates the start of a text box which continues until the first occurring horizontal line. Text boxes can contain headers which have to be in the formatting “Heading 2”.</p><div class="text-box float-left"><h2>A nice title for our left-aligned text box</h2><p>A first paragraph with some text</p><p>which continues here in the second paragraph</p></div><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><p>To make the text box appear on the right side of the article just align it’s text to the right.</p><div class="text-box float-right"><h2>Story Highlights</h2><ul><li><p>Text boxes really awesome!</p></li><li><p>They also support lists!</p></li></ul></div><p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p><div class="text-box float-left"><p>It will generate a textbox with the words inside the brackets as tags, which could be used later to generate css classes, for example</p></div>