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

Da Wikiversità, l'apprendimento libero.
Jump to navigation Jump to search

Layout elements in HTML

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

Obiettivi di apprendimento

  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

Trascrizione

<!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

Marking up content with layout descriptions

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

Wikiversity-Mooc-Icon-Edit.svg
Wikiversity-Mooc-Icon-Ask.svg
Wikiversity-Mooc-Icon-Further-readings.svg

Ulteriori letture

nessuna ulteriore lettura
Tu puoi definire un'ulteriore lettura qui.
In generale puoi usare il bottone di modifica nell'angolo alto in a destra di una sezione per modificarne il contenuto.
Wikiversity-Mooc-Icon-Discussion.svg

Discussioni