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

From Wikiversity
Jump to: navigation, search

Layout elements in HTML

Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Learning-goals.svg

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
Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Video.svg

Video

Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Script.svg

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.

Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Quiz.svg

Quiz

1. Marking up content with layout descriptions

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

Your score is 0 / 0
Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Further-readings.svg

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.
Wikiversity-Mooc-Icon-Discussion.svg

Discussion