Skip to content

Latest commit

 

History

History
135 lines (102 loc) · 3.97 KB

part2.md

File metadata and controls

135 lines (102 loc) · 3.97 KB
Raw

More HTML

Just plain text can get a bit boring. But HTML can do so much more ... For a start, why don't you spice things up with some images?

Images

  • Images are marked with the img element

    <h1>Eine Katze!</h1>
<img src="http://placekitten.com/400/400?image=9" />

  • HTML is a little bit more complicated because of:

  • self-closing elements <... />
  • attributes src="..."

Lists

Sometimes it is useful to list things. For example all the cute cate memes you collected at your journey through the web. Your friends will love your list with cute kittys!

<p>Cute Kitty</p>

<ul>
    <li><img src="http://placekitten.com/300/300?image=1" /></li>
    <li><img src="http://placekitten.com/300/300?image=5" /></li>
    <li><img src="http://placekitten.com/300/300?image=12" /></li>
    <li>And many more ...</li>
</ul>

<p>It takes three to form a hipster triangle</p>

<ol>
    <li>Eins</li>
    <li>Zwei</li>
    <li>Drei</li>
</ol>

Tables

And sometimes you need to be really organized. This is a case for tables!

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Alter</td>
            <td>Beschreibung</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Awesome Code Monkey</td>
            <td>12</td>
            <td>Loves code adventures on the web - bananas!</td>
        </tr>
        <tr>
            <td>Cute Kitten Cookie</td>
            <td>Cookie does not talk about age</td>
            <td>Loves sweet milk and cookies, bows and little bells </td>
        </tr>
    </tbody>
</table>

Videos

  • element <video src="wonderful-world.mp4" />

  • Actually it's a bit more complicated

    • you have to know the URL of your video file
    • Unfortunately the majority of platforms like YouTube or Vimeo don' allow this

  • That's why we use embed codes

    • YouTube & Co. provide you with a HTML code you can use for your website to embed the video
    • How to get the code?
    • Go to the page with the video, e.g. here, click "Share", then "Embed" and copy the given code to your own website.
    <iframe width="560" height="315"
    src="//www.youtube.com/embed/QncgmzH6yQU"
    frameborder="0" allowfullscreen>
</iframe>
    • Tip: The code changes depending on which size and border color for your video you choose.

Audio

  • Similar to videos. Just give it a try!
  • Here is a link you can use

Many more elements

  • Now we had the chance to meet the most common elements
  • There are many more out there, though. It's impossible to remember them all, so we found a handy overview.

Several Pages

  • So far we dealt just with links to other websites
  • Different pages of one website need links among themselves

One page:

<!-- links1.html -->
<p>Link to <a href="links2.html">another page</a>.</p>
<p>Or do you wanna
    <a href="http://lmgtfy.com/?q=cute kittens">go somewhere else</a>?
</p>

And another one:

<!-- 08-links2.html -->
<p>Und wieder <a href="08-links1.html">zurück</a>.</p>

This is a cool new trick - and it's an easy one as well. And although this may seem simple to you, you can build choose-your-own-adventure stories just with this. And of course you can use links between the pages of almost every website.

Interesting links you might like

German:

English: