Herausforderung: Satz einer Community-School-Homepage

Ausgangspunkt

Sie lösen diese Herausforderung in Ihrer lokalen Entwicklungsumgebung; idealerweise sollten Sie das Beispiel in einem vollständigen Browserfenster anzeigen, um sicherzustellen, dass Sie auf dem richtigen Weg sind.

1. Erstellen Sie auf Ihrem Computer einen neuen Ordner namens typesetting-challenge.

2. Erstellen Sie im Ordner eine Datei index.html und fügen Sie den folgenden Inhalt ein:

   html

   <!doctype html>
   <html lang="en-US">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <title>St Huxley's Community College</title>
       <link href="style.css" type="text/css" rel="stylesheet" />
     </head>
     <body>
       <header>
         <h1>St Huxley's Community College</h1>
       </header>
   
       <main>
         <section>
           <h2>Brave new world</h2>
   
           <p>
             It's a brave new world out there. Our children are being put in
             increasingly more competitive situations as they move through the
             different stages of their life with
             <a href="https://en.wikipedia.org/wiki/Examination">examinations</a
             >, <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>,
             <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and
             other life choices. Having the wrong mindset or making the wrong
             choices can lead to problems at all stages.
           </p>
   
           <p>
             As concerned parents, guardians, or carers, you will no doubt want
             to give your children the best possible start in life — and you've
             come to the right place.
           </p>
   
           <h2>The best start in life</h2>
   
           <p>
             At St. Huxley's, we pride ourselves in not only giving our students
             a top-quality education, but also giving them the
             <a href="https://en.wikipedia.org/wiki/Society">societal</a> and
             <a href="https://en.wikipedia.org/wiki/Emotion">emotional</a>
             intelligence they need to win big in the future. We not only excel
             at subjects such as genetics, data mining, and chemistry, but we
             also include compulsory lessons in:
           </p>
   
           <ul>
             <li>Emotional resilience</li>
             <li>Critical thinking</li>
             <li>Judgment</li>
             <li>Assertion</li>
             <li>Focus and resolve</li>
           </ul>
   
           <p>
             If you are interested, then don't hesitate to get in touch; we'd
             love to hear from you:
           </p>
   
           <ol>
             <li>
               <a href="#">Call</a> or <a href="#">Email</a> us for more
               information.
             </li>
             <li>
               <a href="#">Ask for a brochure</a>, which includes a signup form.
             </li>
             <li><a href="#">Book a visit</a>!</li>
           </ol>
         </section>
   
         <aside>
           <h2>Top courses</h2>
   
           <ul>
             <li><a href="#">Genetic engineering</a></li>
             <li><a href="#">Organic Chemistry</a></li>
             <li><a href="#">Pharmaceuticals</a></li>
             <li><a href="#">Behavioral science</a></li>
             <li><a href="#">Biochemistry</a></li>
             <li><a href="#">Data mining</a></li>
             <li><a href="#">Computer security</a></li>
             <li><a href="#">Bioinformatics</a></li>
             <li><a href="#">Cybernetics</a></li>
           </ul>
   
           <p><a href="#">See all...</a></p>
         </aside>
   
         <nav>
           <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Finding us</a></li>
             <li><a href="#">Courses</a></li>
             <li><a href="#">Staff</a></li>
             <li><a href="#">Media</a></li>
             <li><a href="#">Prospectus</a></li>
           </ul>
         </nav>
       </main>
   
       <footer>
         <p>&copy; 2025 St Huxley's Community College</p>
       </footer>
     </body>
   </html>
   

3. Erstellen Sie im Ordner eine Datei style.css und fügen Sie den folgenden Inhalt ein:

   css

   /* General setup */
   
   * {
     box-sizing: border-box;
   }
   
   body {
     margin: 0 auto;
     padding: 0 20px;
     min-width: 980px;
     max-width: 1400px;
   }
   
   /* Layout */
   
   main {
     display: grid;
     grid-template-columns: 5fr 2fr 2fr;
     gap: 40px;
     padding: 20px 0;
   }
   
   /* header and footer */
   
   header {
     border-bottom: 5px solid #aa6666;
   }
   
   footer {
     border-top: 5px solid #aa6666;
   }
   
   footer p {
     text-align: center;
   }
   

4. Laden Sie das Symbol external-link-52.png herunter und speichern Sie es im Ordner auf derselben Ebene wie die Codedateien.

5. Speichern Sie Ihre Dateien und laden Sie index.html in einem Browser, um das Ergebnis zu testen.

Projektbeschreibung

Sie erhalten etwas HTML für die Homepage eines fiktiven Community College sowie etwas CSS, das den Inhalt in drei Spalten anordnet und einige weitere grundlegende Styles bereitstellt. Sie müssen am Ende der CSS-Datei Regeln hinzufügen, um die in den folgenden Abschnitten beschriebenen Herausforderungen zu lösen.

Schriftarten auf die Seite anwenden

1. Wählen Sie Überschriften- und Fließtextschriftarten aus, die Sie auf die Seite anwenden:
   • Da es sich um ein College handelt, sollten die Schriftarten der Website ein recht seriöses, vertrauenswürdiges Erscheinungsbild verleihen. Eine Serifenschrift für den allgemeinen Fließtext der Website in Kombination mit einer kräftigen Slab-Schrift für die Überschriften wäre geeignet.
   • Sie können selbst entscheiden, ob Sie einen Online-Schriftartendienst wie Google Fonts verwenden, um auf die Schriftarten zuzugreifen, oder Schriftartdateien lokal in Ihr Projekt herunterladen möchten. Unabhängig von Ihrer Wahl müssen Sie Ihre Schriftarten für Ihre Seite verfügbar machen. Wenn Sie lokale Schriftartdateien verwenden, nutzen Sie einen geeigneten Dienst, um dafür robusten @font-face-Code zu erzeugen.
2. Wenden Sie Ihre Fließtextschriftart auf die gesamte Seite und Ihre Überschriftenschriftart auf Ihre Überschriften an.

Allgemeine Textgestaltung

1. Geben Sie Ihren Überschriften und anderen Elementtypen angemessene font-size-Werte, die mit einer geeigneten relativen Einheit definiert sind.
2. Geben Sie Ihrem Fließtext eine geeignete line-height.
3. Zentrieren Sie Ihre Überschrift der obersten Ebene auf der Seite.
4. Entfernen Sie den unteren Abstand Ihrer Überschriften der zweiten Ebene.
5. Geben Sie Ihren Überschriften und Ihrem Fließtext etwas letter-spacing, damit sie nicht zu gedrängt wirken und die Buchstaben etwas Raum haben.
6. Geben Sie dem ersten Absatz nach jeder Überschrift im <section> einen kleinen Texteinzug, beispielsweise 2rem.

Linkgestaltung

1. Geben Sie den Zuständen Link, besucht, Fokus und Hover Farben, die zu der Farbe der horizontalen Balken am oberen und unteren Rand der Seite passen.
2. Sorgen Sie dafür, dass Links standardmäßig unterstrichen sind, die Unterstreichung beim Überfahren oder Fokussieren jedoch verschwindet.
3. Entfernen Sie den standardmäßigen Fokusrand von ALLEN Links auf der Seite.
4. Sorgen Sie dafür, dass bei externen Links das Symbol für externe Links rechts daneben in einer geeigneten Größe eingefügt wird.

Listengestaltung

1. Stellen Sie sicher, dass die Abstände Ihrer Listen und Listenelemente gut zur Gestaltung der gesamten Seite passen. Jede Liste sollte dieselbe line-height sowie dieselben oberen und unteren Außenabstände wie die Absätze haben.
2. Geben Sie Ihren Listenelementen für das Seitendesign geeignete Aufzählungszeichen-Stile. Es liegt bei Ihnen, ob Sie ein benutzerdefiniertes Aufzählungszeichenbild oder etwas anderes wählen.

Gestaltung des Navigationsmenüs

Gestalten Sie Ihr Navigationsmenü so, dass es mit der Seite harmoniert. Wir überlassen dies weitgehend Ihnen, aber hier sind einige Tipps/Vorschläge:

1. Lassen Sie die Links wie Schaltflächen aussehen, die so breit wie die Spalte sind, in der sie sich befinden, und hoch genug, damit die Navigationselemente einen angemessenen Bereich ausfüllen.
2. Wenden Sie auf Ihren Navigationstext dieselbe Schriftart an, die Sie auf Ihre Überschriften angewendet haben.
3. Stellen Sie sicher, dass der Trefferbereich jedes Links erweitert wird, um das gesamte übergeordnete Listenelement auszufüllen.
4. Zentrieren Sie den Text innerhalb jedes Links.
5. Schreiben Sie den Text in Großbuchstaben (mithilfe von CSS, nicht durch Bearbeiten des HTML!).

Hinweise und Tipps

• Sie müssen das HTML für diese Übung nicht bearbeiten, außer wenn dies erforderlich ist, um die Schriftarten auf die Seite anzuwenden.

Beispiel

Der folgende Screenshot zeigt, wie die Seite zu Beginn aussieht:

Der folgende Screenshot zeigt dagegen ein Beispiel dafür, wie das fertige Design aussehen könnte:

/* Solution: Apply fonts to the page */

@import "https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";

html {
  font-family: "IBM Plex Serif", serif;
}

h1,
h2 {
  font-family: "Bevan", serif;
}

/* General setup */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 0 20px;
  min-width: 980px;
  max-width: 1400px;
}

/* Layout */

main {
  display: grid;
  grid-template-columns: 5fr 2fr 2fr;
  gap: 40px;
  padding: 20px 0;
}

/* Header and footer */

header {
  border-bottom: 5px solid #aa6666;
}

footer {
  border-top: 5px solid #aa6666;
}

footer p {
  text-align: center;
}

/* Solution: General text styling */

h1 {
  font-size: 3rem;
  text-align: center;
  letter-spacing: 3px;
}

h2 {
  font-size: 2rem;
  margin-bottom: 0;
  letter-spacing: 1px;
}

section h2 + p {
  text-indent: 2rem;
}

p,
li {
  line-height: 1.6;
  letter-spacing: 0.5px;
}

/* Solution: Link styling */

a {
  outline: none;
}

a[href*="http"] {
  padding-right: 16px;
  background: url("external-link-52.png") no-repeat right center;
  background-size: 14px 14px;
}

a:link,
a:visited {
  color: #aa6666;
}

a:focus,
a:hover {
  text-decoration: none;
  color: #773333;
}

/* Solution: List styling */

ul,
ol {
  margin: 1rem 0;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-roman;
}

/* Solution: Navigation menu styling */

nav ul {
  padding-left: 0;
}

nav li {
  list-style-type: none;
  margin-bottom: 1rem;
}

nav li a {
  font-family: "Bevan", serif;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  line-height: 3.5;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  font-size: 1.3rem;
  font-weight: bold;
  border: 1px solid #aa6666;
}

nav li a:focus,
nav li a:hover {
  color: white;
  background: #aa6666;
}

nav li a:active {
  color: white;
  background: black;
}

• Zurück
• Übersicht: CSS-Textgestaltung
• Weiter