HTML - Button zum Variieren der Schriftgröße auf meiner Homepage?

Kann mir bitte jemand für HTML einen Tipp geben oder mir eine Internetseite benennen, wie ich auf meine Homepage einen Button kriege, damit ein Leser die Schrift vergrößern oder verkleinern kann?

So wie auf dem Foto im ePaper der FAZ.

Letterboy

07.09.2022, 21:22

Kannst du Javascript?

Mogli333

Fragesteller

07.09.2022, 21:43

Danke. Leider nein. Aber mir sind hilfreiche Tipps jeder Art willkommen, weil ich dann einem Freund Infos geben kann, der das für mich erledigt.

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Letterboy

07.09.2022, 21:52

Falls du den Slider umsetzen willst dann musst du das machen:

Erstelle mit HTML einen Slider: https://www.w3schools.com/howto/howto_js_rangeslider.asp

Dann definiere eine "onChange" Methode, z.b. "updateTextSize" innerhalb des HTML Codes.

<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateTextSize(this.value)">

Jetzt musst du eine Javascript methode schreiben die die textgrößen Anpasst.

Dies kannst du ganz einfach machen indem du auf das CSS zugreifst mit javascript und da im body tag font size veränderst. Dies funktioniert jedoch nur wenn du "em" und nicht "px" benutzt um deine Textgrößen zu definieren, weil "em" textgrößen abhängig von ihren eltern sind. Also wenn du die textgrösse des body's veränderst wird alles größer, bzw. kleiner. Ich hoffe das hilft deinem freund weiter.

Mogli333

Fragesteller

07.09.2022, 21:55

Super. Danke!

Mogli333

Fragesteller

07.09.2022, 21:59

Es ist auch schön, zu sehen, wie meine Frage und natürlich vorrangig deine Antworten bei anderen Lesern auf Interesse stoßen.

Letterboy

07.09.2022, 22:04

@Mogli333

Ja total, ich beziehe auch 90% meines Wissens von Fragen und Antworten von anderen Leuten, wie so gut wie jeder andere Softwareentwickler auch!

10tel

28.11.2022, 16:22

Kann mir bitte jemand für HTML einen Tipp geben

Mit HTML allein kannst du Schriftgrößen nicht bestimmen, da gelten die Einstellungen des Browsers. Unterschiedlich für Überschriften und Text.

Fürs Layout ist CSS zuständig. Für Änderungen an einer geladenen Webseite Javascript.

Mit einem Button auf meiner Homepage kann man die Seite per WhatsApp teilen.

Hier der HTML-Code dazu:

Ich möchte so einen Button aber auch für Facebook, Instagram, Telegram, Twitter und Pinterest auf meiner Homepage.

Wo kann ich im Internet die jeweiligen Codes (stimmt der Ausdruck?) finden?

...zur Frage

FSK 18 Button in Homepage einbauen?

Hallo,

ich habe nun mir eine Selbstbau Homepage von 1&1 angelegt und würde dort gerne auch Aktaufnahmen zeigen . Nun habe ich bei einigen Homepages gesehen - das sie bevor man zur Seite kam einen Button bestätigen musste "über 18" bzw. Altersüberprüfung . Man hat dann nur bestätigt und gut war .

Wie baut man sowas ein bzw. wie ist der HTML Code dafür?

Danke im Voraus

...zur Frage

HTML Textarea nicht ziehbar?

Also ich habe mir etwas mit einer Textarea gebaut in HTML, nur man kann unten rechts das Feld vergrößern und verkleinern. Wie kann ich das Deaktivieren?

...zur Frage

Schriftgröße am PC ändert sich ständig!

ich brauche dringend euren Rat ! ständig ändert sich meine Schriftgröße, ich nutze Mozilla Firefox. Bei der Google-Startseite muss ich immer die Schrift vergrößern, ruf ich meine E-Mails auf, muss ich sie wieder verkleinern....so geht das die ganze Zeit. Habe auch schon bei Extras-Einstellungen die Schriftgröße verändert, leider ohne Erfolg. Was kann ich nur tun, daß ich eine " einheitliche " Schriftgröße für alle Websites habe ???

...zur Frage

Wie Schrift vergrößern?

Hallo, heute morgen hat sich die Schriftgröße auf meinem Lappi verkleinert. Das komische daran ist, das die Schrift nur auf der YouTube Seite kleiner ist. Sehe ich in meinen Einstellungen nach, steht der Regler aber bei 100%. Daher die Frage, wie kann ich das wieder rückgängig machen und vor allem wo?

...zur Frage

Wie kann man bei iMovie fürs iPhone die Schrift vergrößern?

Hallo ihr Lieben!
Vielleicht passt diese Frage hier nicht so 100%tig hin aber ich finde im Internet keine genaue Antwort und hoffe jetzt auf euch :)
Weiß jemand wie man die Schrift bei iMovie auf dem iPhone verkleinern/vergrößern kann? Irgendwie finde ich die Option nirgends, obwohl ich sie so dringend brauche!
GLG

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

Schriftvergrößerung

Hallo

Habe mir jetzt scon mehrfach Rezepte ausgedruckt. Was mir Sorgen macht ist die Schrift. Diese ist so klein, dass man eine Lupe benötigt. Wie kann ich die Schriftgröße verändern und wo? Zum Lesen kann ich es vergrößern aber beim ausdrucken wird es wieder winzig. Bitte um Hilfe.

...zur Frage

html seite soll auf eine größe bleiben?

Hallo,

ich habe bei meiner Website die beiden folgenden Probleme.

Also erstmal bin ich noch Anfänger und gerade dabei meine Website ordentlich aufzubauen und zu strukturieren, also bitte keine bösen Wörter, falls die Antworten zu offensichtlich sind :)

Wenn ich das Window kleiner mache verschiebt sich alles usw. und sieht nicht mehr schön aus, da die Seite ja auf meiner Bildschrimgröße angepasst ist. Gibt es eine Möglichkeit, dass die Seite immer perfekt für die dementsprechende Monitor Größe geeignet ist, ohne das sich beim vergrößern oder verkleinern alles verschiebt?
Das zweite Problem basiert auf dem ersten. Wenn ich das ganze dann auf dem Handy öffnen möchte, ist wirklich alles verschoben... Gibt es da etwas was ich machen kann? Ich weiß das man mit @media screen{} einstellen kann, dass z.B. ein Bild ab einer bestimmten Pixel-Anzahl größer bzw. kleiner werden soll... Jedoch weiß ich ja nicht die Pixelgrößen von jedem Handy? Gibt es da eine einfachere alternative?

Hoffe mir kann da jemand helfen, ansonsten auch gerne per Privat Nachricht

Danke im Voraus

Fabian

...zur Frage

Open Office Schriftgröße lässt sich nach copy-and-paste nicht mehr verstellen. Woran kann es liegen?

Open Office-Schriftgröße lässt sich nicht ändern?

Hallo,

neuerdings kann ich bei Open Office die Schriftgröße nicht ändern, wenn ich den Text mit copy and paste eingefügt habe. Im Original geht es, aber sobald ich einen Text kopiere und an anderer Stelle einfüge kann ich den eingefügten Text nicht mehr vergrößern/verkleinern.

Brauche ich ein Update und wie mache ich das? Oder muss ich dann komplett die neue Version installieren?

...zur Frage

linien entfernen?

zwischen denn button sind so kleine linien. wie kan man die enfernen?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/all.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.min.css">

    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <h1>Homepage</h1>
        <a href="https://youtube.com">
            <button class="youtube"><i class="fa-brands fa-youtube"></i> YouTube</button>
        </a>
        <a href="https://discord.com/channels/@me">
            <button class="discord"><i class="fa-brands fa-discord"></i> Discord</button>
        </a>
        <a href="https://github.com">
            
            <button class="github"><i class="fa-brands fa-github"></i> Github</button>
        </a>
    </div>



    
</body>
</html>

style.css

body {
background-image: url(background.jpg);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: rgb(136, 127, 127);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;

}

.youtube {
    align-self: center;
    background-color: #f44336;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.discord {
    background-color: #738adb;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.github {
    background-color: #495057;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

...zur Frage

web.de iPone 11 Schriftgröße?

web.de bei iPhone 11 schrift vergrößern

...zur Frage

html video tag, controll button verschwinden?

Hallo zusammen

ich habe ein iframe, welches ein video zeigt. dieses ist mittels html video tag eingebunden.

die controll button, play, stop usw. erscheinen zwar kurz, werden aber wieder ausgeblendet. ich kann sie nicht mehr einblenden.

hat jemand eine idee an was das liegt?

der html tag

<video id="video" autoplay="" controls playsinline="" muted="" style="
"></video>

...zur Frage

HTML / CSS: Weißer Rand?

Hey Leute,

ich habe ein kleines Problem!

Ich programmiere gerade eine Homepage für unsere Feuerwehr (test-feuerwehr.bplaced.net).

Allerdings ist auf der mobilen Version ein weißer Balken rechts und die Schrift geht aus dem Bereich heraus! Wieso ist das so? Kann mir jemand sagen, wie ich das weg bekomme?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen