Web Science/Part1: Foundations of the web/Web content/Layout elements in HTML

Layout elements in HTML

Learning goals

  1. Know about the style attribute and how to use it within HTML elements
  2. Know already realize that there are some limits using the style attribute
  3. 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

Marking up content with layout descriptions

makes the intention of how to layout content explicit
improves Web accessibility
allows for easily changing layout parameters

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.

Discussion