Sobald Sie mit dem Erstellen von Webseiten mit HTML beginnen, beginnen Sie mit der Größenanpassung. Damit Ihre Website so aussieht, wie sie aussehen soll und wahrscheinlich mit einem von Ihnen oder einem anderen Designer erstellten Design übereinstimmt, müssen Sie die Größe des Texts auf dieser Website sowie anderer Elemente auf der Seite ändern. Möglicherweise suchen Sie dazu nach einem HTML-Tag "size", der jedoch schnell fehlt.
Das HTML-Größen-Tag ist in HTML nicht vorhanden. Um die Größe Ihrer Schriftarten, Bilder oder Ihres Layouts festzulegen, sollten Sie stattdessen Cascading Style Sheets verwenden. Jede visuelle Änderung, die Sie am Text einer Website oder einem anderen Element vornehmen müssen, sollte von CSS behandelt werden! HTML ist nur für Struktur.
Das einem HTML-Tag am nächsten liegende Tag ist das alte Font-Tag, das tatsächlich ein Größenattribut enthielt. Seien Sie gewarnt, dass dieses Tag in aktuellen HTML-Versionen nicht mehr unterstützt wird und in Zukunft möglicherweise nicht von Browsern unterstützt wird! Sie möchten das font-Tag nicht in Ihrem HTML-Code verwenden! Stattdessen sollten Sie CSS lernen, um Ihre HTML-Elemente zu dimensionieren und Ihre Webseite entsprechend zu gestalten.
Schriftgrößen
Mit CSS lassen sich Schriftarten wohl am einfachsten skalieren. Mehr als nur die Textgröße. Mit CSS können Sie Ihre Website-Typografie genauer definieren. Sie können die Schriftgröße, die Farbe, das Gehäuse, das Gewicht, den Abstand und mehr festlegen. Mit dem font-Tag können Sie nur die Größe und dann nur als Zahl relativ zur Standardschriftgröße des Browsers definieren, die für jeden Kunden unterschiedlich ist.
Um für Ihren Absatz eine Schriftgröße von 12 pt festzulegen, verwenden Sie die Stileigenschaft Schriftgröße:
h3 {font-size = 24px; }
Dieser Stil würde die Schriftgröße von headiing3-Elementen auf 24 Pixel setzen. Sie können dies zu einem externen Stylesheet hinzufügen, und alle H3s Ihrer Website würden diesen Stil verwenden.
Wenn Sie Ihrem Text weitere typografische Formatvorlagen hinzufügen möchten, können Sie sie dieser CSS-Regel hinzufügen:
h3 {font-size: 24px; Farbe: # 000; Schriftgewicht: normal; }
Dies würde nicht nur diese Schriftgröße für H3s festlegen, sondern auch die Farbe auf Schwarz setzen (was der Hex-Code von # 000 bedeutet) und die Gewichtung auf "normal" setzen. Standardmäßig stellen Browser die Überschriften 1 bis 6 als fetten Text dar. Daher würde dieser Stil diesen Standardwert überschreiben und den Text im Wesentlichen "entfalten".
Bildgrößen
Bilder können schwierig sein, um Größen zu definieren, weil Sie den Browser tatsächlich verwenden können, um die Größe des Bildes zu ändern. Natürlich ist das Verändern der Größe von Bildern mit dem Browser eine schlechte Idee, da Seiten langsamer geladen werden und Browser die Größenänderung oft schlecht durchführen, was dazu führt, dass die Bilder schlecht aussehen. Verwenden Sie stattdessen Grafiksoftware, um die Größe der Bilder zu ändern und dann deren tatsächliche Größe in den Webseiten-HTML-Code zu schreiben.
Im Gegensatz zu Schriftarten können Bilder entweder HTML oder CSS verwenden, um die Größe zu definieren. Sie definieren die Breite des Bildes und die Höhe. Wenn Sie HTML verwenden, können Sie die Bildgröße nur in Pixel definieren. Wenn Sie CSS verwenden, können Sie andere Maßeinheiten verwenden, einschließlich Zoll, Zentimeter und Prozent. Dieser letzte Wert, Prozentsätze, ist sehr nützlich, wenn Ihre Bilder wie in einer responsiven Website flüssig sein müssen.
Verwenden Sie zum Definieren der Bildgröße mithilfe von HTML die Attribute height und width des img-Tags. Zum Beispiel würde dieses Bild 400 x 400 Pixel groß sein:
height = "400" width = "400" alt = "image" />
Verwenden Sie zum Definieren der Bildgröße mithilfe von CSS die Eigenschaften für Höhe und Breite. Hier ist dasselbe Bild, das die Größe mit CSS definiert:
style = "Höhe: 400px; Breite: 400px;" alt = "image" />
Layoutgrößen
Die häufigste Größe, die Sie in einem Layout definieren, ist die Breite. Als Erstes müssen Sie entscheiden, ob Sie ein Layout mit fester Breite oder eine responsive Website verwenden. In anderen Worten, definieren Sie die Breite als eine genaue Anzahl von Pixeln, Zoll oder Punkten? Oder legen Sie die Breite Ihres Layouts mithilfe von Ems oder Prozentsätzen flexibel fest? Um die Größe Ihres Layouts zu definieren, verwenden Sie die CSS-Eigenschaften Breite und Höhe wie in einem Bild.
Feste Breite:
style = "width: 600px;">
Flüssigkeitsbreite:
style = "width: 80%;">
Wenn Sie sich für die Breite Ihres Layouts entscheiden, sollten Sie die unterschiedlichen Browserbreiten berücksichtigen, die Ihre Leser möglicherweise verwenden, und die verschiedenen Geräte, die sie auch verwenden werden. Aus diesem Grund sind responsive Websites, die ihr Layout und ihre Größe je nach Gerät und Bildschirmgröße ändern können, heute der beste Standard.
