Web Science/Part1: Foundations of the web/Web content/Layout elements in HTML
Layout elements in HTML
Learning goals
- Know about the style attribute and how to use it within HTML elements
- Know already realize that there are some limits using the style attribute
- be able to create websites that follow a certain style guide
Video
Script
<!doctype html>
<html lang="en">
<head>
<title>Rens Pickhardt's playlist example</title>
</head>
<body style="font-family: 'Open-Sans', sans-serif; background: #0099D8; color:white">
<h1>
This is <em>Rene Pickhardt</em>'s playlist.
</h1>
<ol style="border: 1px solid white; border-radius:6px;">
<li style="border-bottom: 1px solid white;margin: 20px 20px 30px;padding-bottom:20px">
<em>2013-11-02 01:54 CET</em>
<h3 style="color:orange;margin:0;padding:0;">Lords of the boards</h3>
on <em>Proud like a God</em> by <strong>Guano Apes</strong>
</li>
<li style="border-bottom: 1px solid white;margin: 20px 20px 30px;padding-bottom:20px">
<em>2013-11-02 01:57 CET</em>
<h3 style="color:orange;margin:0;padding:0;">Toxicity</h3>
on <em>Toxicity</em>
by <strong>System of A Down</strong>
</li>
<li style="border-bottom: 1px solid white;margin: 20px 20px 30px;padding-bottom:20px">
<em>2013-11-02 02:01 CET</em>
<h3 style="color:orange;margin:0;padding:0;">B.Y.O.B</h3>
on <em>Mezmerize</em>
by the artist <strong>System of A Down</strong>
</li>
</ol>
</body>
</html>
Having explained layout elements in HTML, the advice is: Keep Layout flexible and separate it from document structure. We will tell why in our next lesson.
Quiz
Further reading
no further reading defined
You can define further reading here.
In general you can use the edit button in the upper right corner of a section to edit its content.
In general you can use the edit button in the upper right corner of a section to edit its content.
