HTML Code erzeugen
Die Kurzbefehle und der daraus erzeugte Html-Code
Vorbereitung
Erstelle in Brackets eine neue Datei. Speichere sie als layout1.html
1. Der Html-Rumpf
html>(head>title{Arbeiten mit Brackets und Emmet})>body
Kopiere die Zeile in die neue Datei. Command+Alt+Enter erzeugt den Html-Rumpf und beschreibt das title-Element.
<html>
<head>
<title>Arbeiten mit Brackets und Emmet</title>
</head>
<body>
</body>
</html>
2. Die Elemente im body-Element
div.container>header+nav.sidebar+article.content+footer
Platziere den Cursor im body. Füge die Zeile 2 ein, mit Command+Alt+Enter werden die Html-Elemente für den Inhalt erstellt. (Zur besseren Übersicht stelle ich jeweils den ganzen Html-Code dar. Grau = bereits erstellte Code-Fragmente, Schwarz = zusätzlich erzeugte Code-Fragmente.)
<html>
<head>
<title>Arbeiten mit Brackets und Emmet</title>
</head>
<body>
<div class="container">
<header></header>
<nav class="sidebar"></nav>
<article class="content"></article>
<footer></footer>
</div>
</body>
</html>
3. Titel und Top-Navigation im Header
h1{Weblabor Startseite}+nav.top>ul>li*3>a{Seite $}
Platziere den Cursor im header >Zeile einfügen >Command+Alt+Enter erzeugt:
<html>
<head>
<title>Arbeiten mit Brackets und Emmet</title>
</head>
<body>
<div class="container">
<header>
<h1>Weblabor Startseite</h1>
<nav class="top">
<ul>
<li><a href="">Seite 1</a></li>
<li><a href="">Seite 2</a></li>
<li><a href="">Seite 3</a></li>
</ul>
</nav>
</header>
<nav class="sidebar"></nav>
<article class="content"></article>
<footer></footer>
</div>
</body>
</html>
4. Die Navigation in der SideBar
ul>li*3>a{Unterseite $}
Platziere den Cursor in nav.sidebar >Zeile einfügen >Command+Alt+Enter erzeugt:
<html>
<head>
<title>Arbeiten mit Brackets und Emmet</title>
</head>
<body>
<div class="container">
<header>
<h1>Weblabor Startseite</h1>
<nav class="top">
<ul>
<li><a href="">Seite 1</a></li>
<li><a href="">Seite 2</a></li>
<li><a href="">Seite 3</a></li>
</ul>
</nav>
</header>
<nav class="sidebar">
<ul>
<li><a href="">Unterseite 1</a></li>
<li><a href="">Unterseite 2</a></li>
<li><a href="">Unterseite 3</a></li>
</ul>
</nav>
<article class="content"></article>
<footer></footer>
</div>
</body>
</html>
5. Untertitel und Absatz mit Blindtext als Inhalt
h3{Beschreibung Untertitel}+p>lorem
Platziere den Cursor im article.content >Zeile einfügen >Command+Alt+Enter erzeugt:
<html>
<head>
<title>Arbeiten mit Brackets und Emmet</title>
</head>
<body>
<div class="container">
<header>
<h1>Weblabor Startseite</h1>
<nav class="top">
<ul>
<li><a href="">Seite 1</a></li>
<li><a href="">Seite 2</a></li>
<li><a href="">Seite 3</a></li>
</ul>
</nav>
</header>
<nav class="sidebar">
<ul>
<li><a href="">Unterseite 1</a></li>
<li><a href="">Unterseite 2</a></li>
<li><a href="">Unterseite 3</a></li>
</ul>
</nav>
<article class="content">
<h3>Beschreibung Untertitel</h3>
<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.</p>
</article>
<footer></footer>
</div>
</body>
</html>
6. Inhalte im Footer
p.footerleft{Adresse}+p.footerright{Disclaimer}
Platziere den Cursor im footer >Zeile einfügen >Command+Alt+Enter erzeugt:
<html>
<head>
<title>Arbeiten mit Brackets und Emmet</title>
</head>
<body>
<div class="container">
<header>
<h1>Weblabor Startseite</h1>
<nav class="top">
<ul>
<li><a href="">Seite 1</a></li>
<li><a href="">Seite 2</a></li>
<li><a href="">Seite 3</a></li>
</ul>
</nav>
</header>
<nav class="sidebar">
<ul>
<li><a href="">Unterseite 1</a></li>
<li><a href="">Unterseite 2</a></li>
<li><a href="">Unterseite 3</a></li>
</ul>
</nav>
<article class="content">
<h3>Beschreibung Untertitel</h3>
<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.</p>
</article>
<footer>
<p class="footerleft">Adresse</p>
<p class="footerright">Disclaimer</p>
</footer>
</div>
</body>
</html>
Der fertige Html-Code für das der Skizze entsprechende Layout.
Ohne entsprechende Css-Stile kannst du das Layout nicht richtig prüfen. Da wir uns auf das erstellen von Html-Code mit dem Modul Emmet fokusieren wollen, habe ich eine Css-Datei bereitgestellt.
Weiter, mit Css das Funktionieren des Layouts prüfen