CSS: Mit Links und Bildern arbeiten
Im Mittelpunkt des Webdesigns stehen Anker und Bild-Tags. Wie arbeite ich mit Bildern und HTML-Links und manipuliere sie? Diese Frage ist bei Front-End-Entwicklern gerade voll im Trend.
Anker bzw. Anchor-Tags sind im Webdesign von großer Bedeutung. Erst sie geben dem Wort World Wide Web wirklich eine Bedeutung. Es sind nämlich die Links, die Websites in einer spinnennetzähnlichen Struktur verbinden und es den Usern ermöglichen, sich nahtlos zwischen verschiedenen Websites oder auch auf ein und derselben Website zu bewegen.
Website-Bilder können eine Seite deutlich aufwerten und ansprechender wirken lassen. Designer verwenden sie in Kopfzeilen, Listen, Profilbildern, Beschreibungen und Galerien. Auch im eCommerce gilt: Ein Bild sagt mehr als tausend Worte. Mit dem Boom des Online-Handels sind Bilder zu einem wichtigen Bestandteil in der Produktwerbung und bei der Gewinnung von mehr Besuchern geworden.
Anchor Tag (<a>)
In HTML schreibt man den Anchor Tag als <a>. HTML-Links werden auch Hyperlinks genannt. Der <a>-Tag unterscheidet sich deutlich von normalem Text. Standardmäßig ist er unterstrichen und ist blau. Fährt man nun mit der Maus darüber, verwandelt sich der Cursor in eine kleine Hand. Mit CSS kannst du Anchor Tags auf verschiedene Arten gestalten.
Ein wesentliches Attribut des <a>-Tags ist die href, die das Ziel des Links festlegt. Der <a>-Tag, mit dem href-Attribut, ist der Standard-Standard für das Schreiben von Hyperlinks in HTML.
Syntax
Die grundlegende Syntax zum Schreiben eines Hyperlinks in HTML lautet
<a href="https://www.codecoda.com/en">Visit Codecoda</a>Von der Syntax her ist der Text im href-Zitat das Ziel des Links, während der Text zwischen den <a> </a>-Tags der Text ist, den der Leser sieht. Ein Leser, der die Seite von Codecoda besuchen möchte, um mehr Informationen zu erhalten, wird 'Visit Codecoda' sehen, aber nicht den eigentlichen Link zu Codecoda. Und wenn der User auf 'Visit CodeCoda' klickt, landet er auf der Homepage von CodeCoda. Jeder andere Link kann den Link https://www.codecoda.com/en je nach gewünschtem Ziel ersetzen.
Du kannst das <a> in den Körper und Kopfteil eines Dokuments setzen. Der Kopfteil definiert den Link zu externen Ressourcen wie Google-Fonts, externes CSS und externes Javascript.
Arten von Links
Absolute Links
Absolute Links sind Links, die auf einen bestimmten Pfad zeigen. Sie beginnen immer mit einem Protokollnamen. Absolute Links werden hauptsächlich verwendet, um andere Seiten im Internet zu definieren. Der Link - https://www.codecoda.com/en ist ein absoluter Link. Er verweist auf eine bestimmte Website im Internet, und beginnt mit einem HTTPS-Protokoll.
Relative Links
Relative Links sind Links, auf die innerhalb eines Arbeitsverzeichnisses/-Ordners verwiesen wird. Der Dateipfad ist normalerweise relativ zur aktuellen Seite. Ein relativer Dateipfad wird normalerweise angegeben, wenn auf Seiten innerhalb einer Website verwiesen wird. Er benötigt kein Protokoll und keine Adresse, nur den Dateinamen.
<a href="aboutus.html">About us</a>
<!-- In this case, the aboutus.html file is located in the same folder as the working document.-->Der Dateipfad könnte auch Ordner außerhalb des Arbeitsverzeichnisses enthalten.
<a href="/Employees/employees.html">Employees</a>Relative Links bleiben unverändert. Ob nun auf dem entsprechenden Computer oder einem Webserver, wenn sie hochgeladen werden. Sie sollten genau überwacht werden. Wenn sich ein Dateipfad ändern sollte, würde die URL ungültig werden.
In-Page Anchor
Hast du jemals Seiten gesehen, auf denen ein Link oder ein Button mit dem Text 'nach oben gehen' am unteren Rand zu sehen ist? Wenn du dann darauf klickst, führt er dich ganz nach oben auf die Seite oder das Dokument. Vielleicht hast du das auch schon mal bei langen Webdokumenten gesehen, die mit einem 'Inhaltsverzeichnis' versehen sind, in dem jedes Element ein Link zu verschiedenen Abschnitten innerhalb derselben Seite ist. Diese Art der Verlinkung wird 'In-Page-Anchor' genannt, da sie innerhalb derselben Webseite verwendet werden.
Um diesen Verlinkungsstil innerhalb einer Webseite zu nutzen, musst du zuerst den Ort festlegen, wo die User hingehen werden. Dies kannst du durch das Attribut 'name' erreichen. Der definierte Name wird durch das href-Attribut mit einem Pfund-Zeichen gekennzeichnet. Hier ist ein Beispiel.
<html>
<body>
<h1> Table of contents </h1>
<p><a href="#links">HTML Links</a></p>
<p><a href="#images">HTML Images</a></p>
<h1> MAIN CONTENT </h1>
<h2><a name="links"></a>HTML LINKS</h2>
<p>Insert Long Text Here....... </p>
<h2><a name="links"></a>HTML IMAGES</h2>
<p>Insert Long Text Here....... </p>
</body>
</html>Eigenschaften eines Links
Standardmäßig sind alle Links unterstrichen.
- Ein nicht besuchter Link ist blau.
- Ein besuchter Link ist violett.
- Ein aktiver Link ist rot.
- Links umfassen nicht nur Text. Sie können Bilder, Buttons oder andere HTML-Elemente sein.
- Während des Codierens solltest du Dummy-Links besser leer lassen oder das Pfund-Zeichen zwischen Anführungszeichen einfügen. Auf diese Weise kann das Element angeklickt werden, aber der Link führt dich nirgendwohin.
<a href=" ">Dummy link</a>
<a href="#">Dummy link 2</a>Link-Zustände (Pseudo-Klassen)
Links sind dynamisch und treten in einzelnen Zuständen auf. Link-Pseudoklassen erlauben es Entwicklern, die verschiedenen Zustände eines Links in CSS zu gestalten. HTML-Links haben fünf aktive Hauptzustände - link, active, hover, visited und focus. Du kannst alle fünf Zustände gleichzeitig für einen Link anwenden.
Der Status :link ist der Standardstatus eines Links, während :active den aktuell ausgewählten Link bezeichnet. Der :hover-Status tritt auf, wenn sich die Maus über dem Link befindet. Der :visited-Status ist ein Link, der angeklickt wurde. Der :focus-Status tritt auf, wenn ein User sich auf einen Link konzentriert.
Du kannst verschiedene Stile an diese Zustände anhängen. Hier ist ein Code, der bei jedem Zustand die Textfarbe ändert.
a:link{
color: #000000;
text-decoration: none;
}
a:visited{
color: #bbffcd;
}
a:hover {
color: #ffcc99;
}
a:active {
color: #f2f2f2;
}
a:focus {
color: #b1b1b1;
}
<html>
<a href="https://www.codecoda.com/blog/en">Visit our blog</a>
</html>Die Pseudoklassen des <a>-Tags folgen einer bestimmten Reihenfolge. :link kommt vor :visited gefolgt von :hover und :active. Wird eine Pseudoklasse weggelassen, folgt sofort die nachfolgende Pseudoklasse.
Wie andere HTML-Elemente auch, können <a>-Tags mit Klassen und ids versehen werden.
Häufige Arten von Links
- Standard-Link -Dies ist der Standard-Link-Stil, der entweder relativ oder absolut verlinkt:
<a href="contactus.html">Contact us</a> - Bild-Links -Diese Art von Link macht ein Bild anklickbar. Der Anchor Tag umschließt das Bild-Tag.
<a href="https://www.codecoda.com/blog/en"> <img src="codaheaderimage.jpg" alt="header image" /> </a> - Button Links -Mit diesem Link kann ein Button angeklickt werden. Wenn sich das Button-Tag innerhalb des <a>-Tags befindet, dann wird der gesamte Button anklickbar. Befindet sich der <a>Tag innerhalb des Button-Tags, dann ist nur der Text darin klickbar.
<button><a href="https://www.google.com">Click Me</a></button><!--only the text in the button is clickable --><a href="https://www.google.com"><button>Click This</button></a> <!-- entire button is clickable --> - Navs - So benutzt man Links für die Navigation auf einer Seite und Menüs. Normalerweise kannst du den Anchor Tag an eine Liste anhängen und ihn nach deinen Wünschen gestalten.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">About Us</a></li> </ul> </nav>/* CSS */ li { display: inline-block; padding: 2px; } ul { list-style-type: none; margin: 0; padding: 0; } a { font: 18px; color: maroon; text-decoration: none; } a:hover{ color: red; text-decoration:underline; }Der obige Codeausschnitt erzeugt ein tolles, einfaches Top-Leisten-Navigationsmenü für einen Website.
IMAGES <img>
Wir können die Bedeutung von Bildern auf einer Website nicht genug betonen. Mit fortschreitender Webentwicklung steigt auch der Bedarf an guten, hoch optimierten, reaktiven Bildern.
Das Image-Tag wird als <img> in HTML geschrieben. Es benötigt zwei wichtige Attribute, src und alt. Src gibt den Pfad zu dem Bild an, während alt einen alternativen Text für das Bild angibt. Etwas, das das Bild kurz beschreibt, falls das Bild aus irgendeinem Grund nicht geladen wird.
Andere Attribute des Bildes sind srcset, width, height und longdesc. Attribute wie width und height können mit <img> tag inline geschrieben werden oder später im CSS angegeben werden.
Hintergrundbilder
Background-image legt ein Bild als Hintergrund für ein bestimmtes Element fest. Hintergrundbilder sind im Webdesign recht beliebt, und Webdesigner verwenden sie oft im Zusammenhang mit Überschriften, da man leicht Text auf ihnen schreiben kann.
Standardmäßig wiederholt sich ein Hintergrundbild sowohl vertikal als auch horizontal. Du kannst dich darum kümmern, indem du die No-Repeat-Eigenschaft verwendest.
In CSS wird die Eigenschaft background über den URL-Wert gesetzt. Der URL-Pfad kann relativ oder absolut sein. Hintergrundbilder können mit anderen Hintergrundeigenschaften angepasst, positioniert und manipuliert werden.
Der folgende Codeausschnitt erzeugt ein Hintergrundbild mit einem Text-Overlay in der Mitte des Bildes.
<div class="header-image">
<div class="header-text">
<h1>TechBuddies</h1>
<h4>We love tech</h4>
</div>
</div>.header-image{
background-image:url("https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png");
background-color: #fbfcfb;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.header-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}Reagierende Bilder
Ein reaktives Bild ist ein Bild, das sich automatisch an die Größe der Bildschirmanzeige anpasst. Der Gedanke daran, verschiedene Medienabfragen für andere Bildschirmgrößen zu erstellen, mag einem vielleicht Kopfschmerzen bereiten, jedoch sind reaktive Bilder relativ einfach zu definieren.
img {
width: 100%;
}Wenn du die width oder max-width-Eigenschaft auf 100% setzt, reagiert das Bild automatisch, so dass es jede Elementgröße ausfüllen kann.
Zentrierte Bilder
Der Versuch, Ausrichtung und Reaktionsfähigkeit eines Elements zu vereinen, kann sich manchmal als ziemlich knifflig erweisen. Die Standardeinstellung für das Zentrieren eines Gegenstandes ist text-align: center, aber das funktioniert nicht immer, besonders wenn andere Anzeigeeigenschaften dagegen sprechen.
Um ein Bild horizontal zu zentrieren, könntest du auch den Auto-Wert margin: margin verwenden.
img {
margin: 0 auto;
}Flexbox bietet hier eine zuverlässigere Methode, Bilder zu zentrieren. Um ein Bild horizontal, entlang der x-Achse zu zentrieren, kannst du folgendes benutzen
img {
justify-content: center;
}Benutze den folgenden Code, um ein Bild vertikal zu zentrieren
img {
align-items: center;
}Du kannst beide benutzen, um ein Bild sowohl horizontal als auch vertikal perfekt zu zentrieren.
Abgerundete Bilder
Abgerundete Bilder sind der Hit, wenn es um Profilbilder geht. Um ein Bild abzurunden, musst du den Randradius einfach auf 50% setzen. Dadurch werden alle Kanten des Randes gleichmäßig abgerundet.
img {
border-radius: 50%;
}Figure und Bildunterschriften
Bilder arbeiten mit HTML-Tags, <figure> und <figcaption>. Der figure-Tag steht für einen in sich geschlossenen Inhalt, der Bilder, Diagramme, Illustrationen usw. umschließt. Die figcaption ist eine Beschreibung des figure-Tags. Bilder, die innerhalb des figure-Elements platziert und mit figcaption beschrieben werden, können eine schöne Galerie mit Notizen erstellen.
BILDERGALERIE MIT FIGURE UND FIGCAPTION
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
color: black;
font-style: italic;
padding: 2px;
text-align: center;
}<div>
<figure>
<img src="https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Trulli" style="width:100%">
<figcaption>Puglia, Italy</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1486591913781-4bee9ed65bfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Paris" style="width:100%">
<figcaption>Paris, France</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1484503369601-c5f45a1bf914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="spain" style="width:100%">
<figcaption>Madrid, Spain</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1504019347908-b45f9b0b8dd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Island" style="width:100%">
<figcaption>Trogir, Croatia</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1509840841025-9088ba78a826?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Turkey" style="width:100%">
<figcaption>Istanbul, Turkey</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1512753360435-329c4535a9a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Rome" style="width:100%">
<figcaption>Rome, Italy</figcaption>
</figure>
</div>ERGEBNIS
ABSCHLIEßENDE WORTE
Es gibt heute kaum noch Webseiten ohne Links oder Bilder. Bilder können die Erfahrungen von Besuchern einer Internetseite maßgeblich beeinflussen, sind aber auch für Suchmaschinen und SEO wichtig. Die sorgfältige Verwendung dieser beiden HTML-Elemente erhöht die Relevanz und Glaubwürdigkeit einer Website. Zu lernen, wie man Medien im Webdesign effektiv einsetzt, ist eine Grundvoraussetzung für jedes Webprojekt.
