HTML schreiben und zeitgleich geschriebenes anzeigen lassen?

Hi

Ich hab ein video gesehen wo jemand was programmiert hat was dann zeitgleich auf der rechten hälfte seines bildschirms angezeigt wurde. (Kann mich nicht erinnern obs programmiert war oder html).

Geht das auch mit html? Oder muss ich etwas zu Ende schreiben und kann es dann erst sehen. Was kein sinn für mich macht weil das Ja alles nur optisch ist.

(Bin komplet neu in dem Thema)

Lg🥰

4 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

08.08.2023, 14:08

Es gibt mehrere Möglichkeiten und Wege, um sich vom aktuellen Entwicklungsstand eine Live-Vorschau anzeigen zu lassen. Seien es WYSIWYG Editoren wie Adobe Dreamweaver, mithilfe einer Erweiterung wie Live Server für VS Code, über Frontend-Tools wie Vite oder man richtet es selber manuell z.B. über NodeJS und Gulp ein.

Node und Gulp habe ich an dieser Stelle mal weggelassen, da im Vergleich zu den anderen beiden Lösungen doch etwas aufwändiger ist. Nichtsdestotrotz sind Node und Gulp nützliche Werkzeuge, um solche Umgebungen aufzusetzen. Es gibt auch noch Webpack oder halt Anwendungen wie Prepros und Codekit (nur für macOS).

Prepros - Web Development Companion

LG medmonk

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

08.08.2023, 13:44

Du brauchst dafür einen WYSIWYG (What you see is what you get) - Editor. Einfach mal nach "wysiwyg html editor" mit einer Suchmaschine nach suchen lassen.

Woher ich das weiß:Hobby

08.08.2023, 13:45

Das geht z.B. mit Live-Server Erweiterung für visual studio code.

Woher ich das weiß:Studium / Ausbildung – Informatikstudent

08.08.2023, 13:42

Das ist mittlerweile Standard. Wenn du z.B. in VS Code und in React entwickelst kannst du einen lokalen Live-Server starten und im Browser nachvollziehen, wie sich die Implementierung auf die WebApp auswirkt.

Woher ich das weiß:Studium / Ausbildung – Studium (M.Sc., Dr.) und mehrjährige Berufserfahrung

Ähnliche Fragen

Kann man bei jeder Internet Seite den Quellcode sehen?

Also kann man von jeder beliebigen Webseite den Code sehen wie sie programmiert wurde also z.B das man den HTML Code sieht?

javascript -webkit-scrollbar check in welchem div man ist?

Hey,

Ich versuche eine Website wie Tiktok zu programmieren und habe jetzt programmiert, dass man runterscrollen kann und dann ein neues Video kommt.
Das habe ich 100% nur mit HTML und CSS gemacht, aber jetzt will ich in Javascript ein Check einführen, welches Video man gerade anschaut.

dashboard.php:

player.css:

Kann mir wer helfen?

HTML Seite kostenlos veröffentlichen?

Hallo,

wenn ich mir eine Seite mit HTML programmiert habe, wie kann ich die dann kostenlos veröffentlichen? Muss ich dafür einen Server haben?

Danke und LG

Welche IDE nutzt ihr?

Ich bin gespannt auf das Ergebnis. Vermutlich ist es sinnvoll, wenn ihr zusätzlich angebt, welche in Sprachen ihr entwickelt.

Selfmade Fullstack lernen?

Hallo miteinander,

Ich hab angefangen über Codecademy mir das Programmieren (obwohl das Wort dafür etwas zu groß ist) auf HTML und CSS beigebracht.

Ich hab mich mit einer Softwareakademie in Verbindung gesetzt und bin auf die Schlussfolgerung gekommen, das jeder sich das auch von alleine beibringen kann.

Kann mir jemand alle Programme von A bis Z (also alles zum Programmieren, nicht nur die drei Elemente wie HTML CSS und Javascript) auflisten, die ein Software Entwickler drauf haben muss?

Wenn möglich dann bitte auch in der Reihenfolge in der man sie lernen sollte.

Und welche Programme bzw. Webseiten muss ich dafür nutzen, um alles zu lernen?

Ich möchte in den nächsten 2-3 Jahren neben meinem Beruf mir das alles beibringen, da ein Softwareentwickler sich nicht auf seine Qualifikationen auf dem Lebenslauf sondern eher auf sein eigenes Portfolio berufen muss bei Bewerbungsgesprächen.

Ich danke für die Antworten & die Hilfe im Voraus.

Da mir HTML und CSS zu lernen leicht fällt, denke ich das diese Richtung für mich richtig ist.

Liebe Grüße

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

Website vergrößern Html/ Css?

Hallo alle zusammen,

Ich habe eine Website am Laptop mit HTML und CSS programmiert, aber wenn ich das auf dem PC öffnen möchte dann ist das Format kleiner und damit es passt muss ich die Website um 175% vergrößern im browser...

Kann ich das in HTML und CSS irgendwie reinschreiben, dass sich die seite immer automatisch in der größe ist und wenn ja wie?

Danke für eure hilfe

HTML und CSS übungen mit Lösung 2023 (aktuell)?

Hallo zusammen ich suche sowas wie PDFs oder eBooks und seriöse Webseiten die sowas anbieten. Möglichst Anfänger freundlich.

Danke für eure Antworten

P.S. bitte keine Amazon-Links, bitte wenn dann alternativ die ISBN oder Titel und Autor.

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

Mit JavaScript Alter ausrechnen?

Ist es möglich über JavaScript, wenn man das Geburstsdatum eintippt, dass das Alter ausgerechnet wird?

Es soll dann neben stehen: 41 Jahre und 100 Tage

Warum gibt es nichts anderes als JavaScript im Browser Frontend?

Es gibt Dart-Flutter, C#-Blazor soweit ich weiß, aber ich nehme an, es ist nur JavaScript unter der Haube.

Ähnlich wie, wenn man React Native Code schreibt, wird es in die native mobile Sprache umgewandelt => Kotlin, Swift etc..

Weil soweit ich weiß, versteht der Browser nichts anderes als HTML, CSS und JavaScript.

Es gibt da nur die V8-Engine / andere JavaScript-Engines.

Aber warum?

Wieso ist es nicht theoretisch möglich, einfach mit einer neuen Sprache die für cross platform entwickelt wurde, einen onclick-Event Listener zu nutzen?

In einer ganz eigenen Engine.

Heißt nicht, das sie JavaScript irgendetwas die nächsten 5 Jahre streitig machen könnte, aber wenn diese Sprache direkt Typisierung unterstützen würde, ohne TypeScript und auch noch für andere Dinge besser geeignet wäre als JavaScript (wurde halt nicht dafür designed, ganz egal ob Electron, Native existiert) wie Desktopanwendungen, Mobil, etc..

PHP nehme ich erst garnicht auf, das macht alleine gar nichts im Frontend, ist eine Backendsprache und alleine sinnlos auf Websites, bis auf bisschen HTML generieren, das auch nur vom Server kommt.

Klar, wenn du ewig lange Weiterleitungen willst, die furchtbar sind und überhaupt nicht interaktive Websites, dich auf Formulare beschränkst, dann kriegst du das auch ohne JavaScript hin, etwas Schreckliches zu programmieren.

Mit WebAssembly kenne ich mich gar nicht aus. Ob da Event Listener, usw. möglich sind. Aber alleine von der Einstiegshürde und Komplexität die ich höre, ist das keine Alternative.

Assembly ist auch keine Alternative zu C++. Dafür gibt es Rust.

Webseite sicherer machen?

Hallo, ich gabe mit einfachem HTML und CSS eine Webseite für mein Unternehmen programmiert, denn ich brauche eigentlich nur eine einfache Seite. Nun zur Frage: Wie kann ich diese Webseite sicherer machen? Verwendet habe ich nur Html und Css und ich will das Service von Google Cloud benutzen

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }