HTML basics for Twine

If you view "simple.html" in your browser, you will see the words This is a simple webpage on a white or grey background. Where did everything else go? And what are those words with the angle brackets?

ELEMENTS

  • Elements are delineated by angle brackets (< >).

  • Elements are “invisible”; they don’t directly appear in the web page. Instead, they serve as instructions to your browser. We can use elements to change text’s appearance in Twine

  • An element typically starts with an opening tag (<element>) and ends with a closing tag (</element>).

    • STRUCTURES & STRATEGIES

    The elements: html, head, title, are all standard HTML elements that refer to the overall document and are helpful for supporting compatibility with different browsers. These elements are not worked with directly in Twine, however. The body is where you put text and elements to be displayed in the main browser window. The reason that the words This is a simple webpage appear when you display simple.html is becaused you placed them in the body.

  • In Twine, the body element can be addressed through the Stylesheet (more on that later) -- but it is not necessary to include the body element in the markup in Twine html.

    • Emphasis

    -- Change the text of your simple web page to 
        This is a simple webpage. 
    And I mean <em>really</em> simple.
    But... <strong>important</strong>, too!

    Change the name of this to "emphasis.html", then SAVE. Open downloaded html file into your browser.

  • As you can see, the second line of text becomes italic, starting at the <em> and ending at the </em>

  • The third line becomes bold starting at <strong> and ending at the </strong>.

    • MORE ON MARKUP

  • You'll notice all the text show up in one line. HTML ignores whitespace (spaces, tabs, or carriage returns) in the source. It replaces all continuous chunks of whitespace with a single space: ” “. Although it might take you a while to get used to this behavior, the advantage is that that you can use whitespace to make your code more readable
    • Go to Tutorial Part 3