Wie Chrome Code Snippet zum HTML programmieren nutzen?

Hey,

ich programmiere gerade an einer relativ großen Webseite rum, die mehrere hundert Zeilen Code enthält. Leider ist diese Zeilenanzahl nun so groß, dass mein primäres HTML Programm, Brackets, absolut am ruckeln ist und der Live View nahezu unbenutzbar ist.

Nach ein wenig überlegen, fiel mir ein, dass man zum Beispiel in Chrome mithilfe eines Rechtsklicks und dann "Untersuchen" auch eine Art Code Widget gelangt in dem man relativ einfach und mit Live View eine Webseite bzw. die Index Dateien bearbeiten kann. Jedoch scheitert es immer wieder am Speichern, ich weiß einfach nicht wie ich die bearbeitete HTML Datei dann speichern kann (auch wenn ich sie ja auf meinem PC liegen habe) finde ich keine Möglichkeit die dann bearbeitete Datei zu speichern.

Wenn ihr wisst wie das ganze funktioniert oder wenn ihr eine Alternativen HTML Editor kennt, der etwas leistungsstärker als Brackets ist und Live View unterstützt, würde ich mich natürlich sehr über eine Antwort freuen

3 Antworten

Suiram1

10.02.2024, 18:54

Es ist zwar möglich die durch die Dev-Tools bearbeitete HTML-Datei zu speichern, indem man im Tab Sources unter Workspace einen Ordner hinzufügt.

Als leistungsstarken Code Editor kann ich dir Visual Studio Code (VS Code) empfehlen. VS Code kann man für jede Programmiersprache nutzen, da man mit Erweiterungen mehr Features und Funktionen der Sprache hinzufügen kann.

Für Programmierung mit HTML und der Live Preview kann ich dir diese Erweiterungen empfehlen:

Du kannst natürlich je nach dem was du brauchst auch weitere Erweiterungen installieren, aber das sind so die die deinen Bedürfnissen entsprechen.

lg Suiram1

jiojio

Fragesteller

10.02.2024, 19:03

Hey, vielen Dank für die Antwort.

An Visual Studio Code hatte ich gar nicht gedacht. Das nutze ich eigentlich nur für Java. Da hätte ich selber drauf kommen können hahah

Deswegen vielen Dank, probiere ich gleich aus :)

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

10.02.2024, 19:28

Leider ist diese Zeilenanzahl nun so groß, (...)

Das deutet auf kein gutes Projektdesign hin. Unabhängig davon, mit welchem Editor du nun arbeitest, würde ich dir empfehlen, möglichst frühzeitig daran etwas zu ändern, da du dir sonst für die Zukunft ein schlecht wartbares Monster heranziehst.

So gut wie jede Code-Ressource kann für die Entwicklungszeit aufgespalten und in separate Dateien ausgelagert werden (modulares Design). Für das Endprodukt fügt man die Ressourcen wieder zusammen.

HTML kann mittels Backendanwendung zusammengebaut werden. Ob nun mittels Webframework (ASP.NET/Laravel/Rails/...), einer Template-Engine oder über Funktionen, die einige weborientierte Programmiersprachen (wie PHP) bereits in ihrer Standardbibliothek integriert haben.
CSS und JavaScript kann man in Module aufteilen und später via Bundlingtool wieder zusammenfügen.

(...) dass man zum Beispiel in Chrome mithilfe eines Rechtsklicks und dann "Untersuchen" auch eine Art Code Widget gelangt (...)

Mit Local Overrides kannst du Änderungen an der Webseite vornehmen, die bei Neuladen der Seite (bei dir) nicht direkt wieder verworfen werden. Der Override wird als Datei auf deinem Rechner gespeichert.

(...) wenn ihr eine Alternativen HTML Editor kennt, der etwas leistungsstärker als Brackets ist (...)

Ein paar Vorschläge:

PhpStorm
VS Code
Visual Studio

Moin66254

12.02.2024, 11:59

Hi, einige 100 Zeilen sind, wenn man HTML, CSS, JS usw. zusammenzählt, eigentlich nicht viel. Richtig professionelle Seiten haben in der Regel einige Tausend Zeilen. Die werden allerdings häufig mit automatisierten Systemen erstellt. Dein Programm oder dein Gerät scheint deutlich zu wenig Leistung zu haben. Ich empfehle dir, dass du dir entweder Visual Studio (Community) oder Visual Studio Code herunterlädst.

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zur Frage

HTML Code direkt in Browser ausführen?

Also ich habe den Code für eine Webseite (HTML) und ich würde diesen Code gerne direkt in einem Browser ausführen, sodass er die Seite anzeigt.

Geht das, ohne dass man den Weg über eine html-Datei geht und die einfach öffnet?

...zur Frage

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?

...zur Frage

Kann man eine Webseite mit dem VS Code Live-Server irgendwie mit dem Handy testen?

Hallo,

ich bin gerade dabei, in VS Code meine Webseite für das Handy zu optimieren (CSS Media Queries). Ich hatte die ganze Zeit mit Netlify Drop einen 1-Stunden-Host gestartet und geschaut, wo ich noch optimieren muss. Leider habe ich logischerweise irgendwann das Limit erreicht.

Jetzt meine Frage:

Kann man die Webseite mit dem VS Live-Server irgendwie mit dem Handy testen?

Die Seite zuerst online stellen und dann optimieren ist natürlich keine Option. :) Wenn das nicht funktioniert, was habe ich noch für Möglichkeiten?

Danke schonmal!

...zur Frage

CMS in eigene HTML/CSS Webseite einbinden?

Hallo,

folgendes:

Ich habe eine Webseite für eine kleine Firma mittels HTML/CSS erstellt. Einen Baukasten habe ich nicht verwendet, da die Webseite ziemlich komplex war und der Inhaber sie lieber nach eigenen Vorstellungen erstellt haben wollte und nicht einfach durch eine Copy/Paste-Vorlage.

Die Webseite ist soweit fertig, nun möchte der Inhaber aber selbst Inhalte einfügen und aktualisieren können. Kann ich meine HTML-Seite nachträglich zum Beispiel mit einem CMS einbinden? Ich habe sie in VS Code erstellt.

Die Idee mit dem CMS kam daher, dass der Inhaber mit dem Code nicht zurechtkommt und ich Angst habe, dass er die ganze Webseite zerstört, falls er den Code falsch ändert.

Gibt es auch noch andere bessere Varianten als CMS?

Danke schonmal.

...zur Frage

Wie kann ich mein HTML zu einer Webseite machen?

Hi,

ich habe mir ein paar HTML-Kenntnisse angeeignet und habe folgende Frage:

Einmal angenommen, ich habe jetzt eine geile Webseite mit HTML, CSS und JavaScript erstellt.

Wie mach ich das jetzt zu einer wirklich echten Seite? Klar ich brauche eine Domain. Aber wie erstelle ich eine oder (die eigentliche Frage): Wie verknüpfe ich jetzt diesen Ordner, in dem die Informationen wie Bilder, Videos und einzelne Dateien sind, mit dieser Webseite (clientbasiert)?

Und wenn ich das gemacht habe: Wie mache ich z.B. ein Update, weil ich z.B. etwas am Code verändert habe?

...zur Frage

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zur Frage

Website mit code herunterladen?

Hallo ich möchte gerne eine alte öffentliche Website von mir herunterladen mit allen Dateien sodass ich auf den code etc zugreifen kann. Kann mir da jemand helfen wie ich dies machen kann. Ich weiss man kann speichern unter auf google chrome machen jedoch installiert das nicht alle Dateien wie Ordner Bilder etc.

...zur Frage

Microsoft Edge zeigt HTML Code nur in html an und nicht so wie´s eig. sein soll?

Wie kann ich das ändern?

Habe das auf Visual Studio Code gemacht.

...zur Frage

HTML/CSS Steam Website rebuild?

Hallo,

ich möchte gerne die aktuelle Webseite von Steam nachbauen, jedoch habe ich Schwierigkeiten mit dem Hintergrund der Seite. Obwohl die Pixel-Art am Anfang vorhanden ist, fehlt mir der untere Teil der Seite, insbesondere die Darstellung der Steine und Fische. Es wäre am besten, wenn ihr selbst auf die Seite geht, um mich besser zu verstehen.

Ich benötige das zweite Bild von der Seite, das als Hintergrund verwendet wird. Ich habe bereits versucht, es über den Source Code zu finden, war aber leider nicht erfolgreich. Ich zeige euch ein Bild, das ich bereits habe, und benötige lediglich den unteren Teil davon, den ihr auf der Steam-Seite sehen könnt. Dort werden Fische und Steine abgebildet.

Vielen Dank für eure Unterstützung!

...zur Frage

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

HTML, CSS, JavaScript: Komischer Rand entsteht, der da nicht hin soll. Wie entfernen?

Im Rahmen eines Projektes erstelle ich derzeit eine "Webseite". Das Problem ist, dass im blau umkreisten Menü ein Abstand entstanden ist, der dort nicht hingehört. Zur besseren Veranschaulichung wurden Elementen eine Farbe zugewiesen.

Link zum Code:
https://docs.google.com/document/d/15GRD_qnv_Rr4WNFKoEWZLnoZD5wKAh0WldTEo8ZLhuY/edit?usp=sharing

Screenshot

...zur Frage

Button welcher beim Scrollen auf Webseite an gleicher Position unten rechts bleibt HTML?

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

...zur Frage

Dropdown Menü mit Links - HTML?

Ich möchte gerne ein Dropdown Menü auf meiner Webseite einfügen, in den man verschiedene links in den "Auswahlfeldern" hat.

Gemeint:

[Dropdown Menü]
[Link 1]
[Link 2]
[Link 3]
[Link 4]
[Link 5]

Wie kann ich es machen das diese Links funktionieren?

Könnt ihr mir eine Beispiele Code zeigen?

Geht das in HTML?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen