Home » Sonstiges » Informatiker als Beruf » Aufgaben für Informatik-Lehrlinge » Arbeitsauftrag HTML/CSS/MODX
- Anzeige -
Software Asset Management beim Fachmann

Arbeitsauftrag HTML/CSS/MODX

Lernziel

Die folgenden Fragen/Aufgaben sind verständlich zu dokumentieren.

Spielregeln

  • Quellen aus dem Internet sind im Artikel anzugeben.
  • Kein Copy & Paste!
  • Versuche Dich erst einmal alleine an der Beantwortung der Fragen. Nimm erst, wenn Du nicht mehr weiter kommst, die Hilfe der Kollegen in Anspruch.
  • Schreibe nicht ab, sondern probiere alles auch aus und dokumentiere das mit Screenshots.
  • Musst Du firmeninterne Details (Rechnernamen, IP-Adressen, Passwörter...) dokumentieren, so darf Deine Doku nur IT-intern zugreifbar sein, ansonsten kannst Du auch öffentlich (Blog...) dokumentieren.
  • Vergiss nicht Bescheid zu sagen, wenn Du fertig bist.

Ausgangslage:

Lies bitte das Dokument HTML 5 Einsteiger Tutorial sowie das Dokument Positionierung mit DIVs und der Kamp mit Display und Co.

Ausgangslage

Dein Lehrmeister hat Dir ein CMS zum "Spielen" eingerichtet (vorzugsweise MODX) und Du kennst die Zugangsdaten.

Fragen/Aufgaben

Da dies ohne Vorkenntnisse nicht ganz einfach ist, siehts Du hier einen Teil des HTML und CSS-Codes.

Egänzende die fehlenden Elemente "..."

<!DOCTYPE html> 
<html lang="de">
<head>
<title>Ich lerne Webseiten zu erstellen</title>
<meta charset="utf-8" />
<link rel="stylesheet" ... />
</head>
<body>

<div id="...">
<div id="...">
<ul>
<li>Menü 1</li>
<li>Menü 2</li>
<li>Menü 3</li>
<li>Menü 4</li>
</ul>
</div>
<div id="...">
<h1>Überschrift</h1>

<h2>Kapitel 1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita 
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
ipsum dolor sit amet, consetetur sadipscing elitr</p>

<h2>Kapitel 2</h2>
<p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor 
sit amet.</p>
</div>
<div class="floatbreaker">
</div>
</div>
</body>
</html>
body
{
  font-family: Verdana, Sans-Serif, Arial, Helvetica;  
  background: lightgray;
}

h1,
h2,
h3
{
  padding: 0;
  margin: 0;
  color: #004F9D;
  margin-bottom: 10px;
  font-weight: normal;
}

#box
{
	width: 80%;
	margin: ...;
	border: 2px solid black;
	padding: 0%;
	display: ...;
	background: ...;
}

#left
{
	float: ...;
	padding-right: ...;
	width: ...;
	font-size: ...;
	font-weight: ...;
	color: ....;
}

#right
{
	padding-left: ...;
	float: ...;
	margin: ...;
	width: ...;
}

.floatbreaker 
{ 
	clear: both; 
}

In MODX würde die neue Vorlage z.B. so ähnlich aussehen. Ergänze auch hier die fehlenden Einträge (...).

<!DOCTYPE html> 
<html lang="de">
<head>
<title>[(site_name)] | Arbeitsauftrag HTML/CSS/MODX</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

<div id="box">
<div id="left">
[[Wayfinder ...]]
</div>
<div id="right">
[*content*]
</div>
<div class="...">
</div>
</div>
</body>
</html>



War der Artikel hilfreich? Bitte liken und sharen. Danke!

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.