Selbstgeschriebene HTML Website von überall drauf zugreifen?

Hey und zwar bin ich momentan noch völlig neu im Thema HTML, allerdings habe ich schon ein paar erste und gute Schritte gemacht, hier mal ein Beispiel:

<!doctype html<
<html lang="de">
<title> Test für gutefrage </title>
<body>
<p> <h1> Ich begrüße Euch herzlich zu meinem HTML-Test </h1> </p>
</body>
</html>

Ich weiß, da geht noch bei Weitem mehr (Listen, zweite Seite, Bilder usw.) aber für den Anfang soll es das sein.

Nur habe ich ein Problem: Meine selbstgeschriebene "Website" wird natürlich von einem lokalen Gerät geöffnet, sodass ich die Website von anderen Geräten nicht öffnen kann.

Und der zweite Punkt: Jetzt lautet die URL: file:///C:/Users/nicob/Desktop/Test.html

Natürlich gewöhnungsbedürftig und vor allem hätte ich gerne sowas wie www.test-html.de oder so. Aber ich könnte mir vorstellen, dass man dafür so einen externen Hoster benötigt, oder geht das auch so?

6 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

02.09.2020, 06:33

Zunächst möchte ich dich auf zwei Fehler in deinem Markup aufmerksam machen.

1) Die letzte spitze Klammer ist verkehrt herum.

<!doctype html<

2) Der schließende p-Tag findet keinen öffnen p-Tag.

<p> <h1> Ich begrüße Euch herzlich zu meinem HTML-Test </h1> </p>

Das liegt daran, dass sich der öffnende p-Tag automatisch schließt, sobald er auf ein Blockelement (hier das h1) stößt. Du solltest also mindestens den schließenden p-Tag entfernen oder besser, beide p-Tags. Die Überschrift nimmt eh eine komplette Zeile ein und hat auch einen Abstand nach oben und unten.

Zu deiner Frage:

Natürlich gewöhnungsbedürftig und vor allem hätte ich gerne sowas wie www.test-html.de oder so.

Einfache Optionen wären:

a) Der IIS (auf Windows OS). Die Installation ist ziemlich einfach und wird hier bebildert erklärt.

Via hosts-Datei könntest du auf deinem Rechner deine Wunschdomain auch auf localhost mappen.

127.0.0.1 www.test-html.de

b) Das Softwarepaket XAMPP beinhaltet verschiedene Webentwicklungstools, darunter auch einen Apache Webserver (der für PHP vorkonfiguriert ist). Eine Schritt-für-Schritt-Installationsanleitung findest du hier. Im Control Panel muss vorerst nur der Apache Server gestartet werden.

Wenn du folgend im htdocs-Ordner (dieser befindet sich im Installationsverzeichnis von XAMPP) eine my-first-page.html anlegst, solltest du sie im Browser via

http://localhost<:Port>/my-first-page.html

erreichen. Die Angabe des Ports ist nur notwendig, wenn du einen anderen als 80 gewählt hast. Einen eigenen Domain-Namen kannst du mit VirtualHosts festlegen.

Wie du die Seite für das Heimnetzwerk öffnest, wird hier beschrieben.

c) Du nutzt einen Webhoster. Vorschläge wurden hier ja schon genannt. Setze vor diesen am besten eine Basic Authentication, sodass nicht jeder auf die Webseite zugreifen kann. Andernfalls kann es, abhängig vom Inhalt der Webseite sein, dass du ein Impressum, u.ä. anbieten musst.

mnlwrnr

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, Technologie

01.09.2020, 21:51

Der Anbieter bplaced (ich kann den Link nicht einfügen, einfach googeln) bietet kostenlos 1GB Speicherplatz für eine Webseite an.

Hier noch ein Tip: Um die Webseite zu erstellen, kann man auch den kostenlosen Google Web Designer nehmen der für Windows, Mac und Linux verfügbar ist. Damit kann man einmal im Layoutmodus oder im Codemodus arbeiten. Hier der Download: https://webdesigner.withgoogle.com/intl/de_de Wenn man damit fertig ist, speichert man sie zuerst einmal auf dem eigenen Computer ab. Dazu erstellt man sich am besten einen Ordner.

Danach kann man sie auf bplaced hochladen.

Als letzten Schritt benötigt man noch eine Domain: https://www.checkdomain.de/free-domain/ Einfach dort deine Wunschdomain eingeben. Domains mit der Endung .free sind kostenlos. Wenn man sich eine gesichert hat, kann man sie mit deiner hochgeladenen Webseite verknüpfen.

Sarasixteen

02.09.2020, 04:32

Habe ich auch benutzt ist empfehlenswert für anfänger

ChrisCat1, UserMod Light

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, Technologie

01.09.2020, 21:30

Du kannst einen Webserver bei dir auf dem PC installieren, dann kannst du die Seite über http://localhost/Test.html aufrufen.
Andere Geräte im gleichen Netzwerk können die Seite dann auch aufrufen. In dem Fall muss dann aber localhost durch die IP-Adresse deines PCs ersetzt werden.

Wenn die Seite auch von außerhalb aufgerufen werden soll, bietet sich die Nutzung eines Webhorstes und das mieten einer Domain an.
Alternativ kann man sie Seite auch selber hosten, hier ist das einrichten aber was aufwändiger.

Sarasixteen

02.09.2020, 04:23

da is ein fehler

<!doctype html<

das wird so gemacht

<!doctype html>

whgoffline

01.09.2020, 21:26

Kannst du auch mit einem Server bei dir zu Hause mit fester Ip oder mit Dynamischer Ip und DynDns hosten.

Woher ich das weiß:Studium / Ausbildung – Informatikstudent

Neviol

Fragesteller

01.09.2020, 21:26

Und wie das? Und wie richte ich das alles ein usw.?

whgoffline

01.09.2020, 21:27

@Neviol

Z.b mit einem kleinen Debianserver und Apache2 oder nginx.

Neviol

Fragesteller

01.09.2020, 21:28

Hätte allerdings natürlich sowas wie Strato, also einen externen Hoster. Wie richtet man das da ein?

whgoffline

01.09.2020, 21:29

@Neviol

Was meinst du mit hätte?

Neviol

Fragesteller

01.09.2020, 21:29

@whgoffline

Habe Zugang dazu meine ich

whgoffline

01.09.2020, 21:29

@Neviol

Webhost oder Server mit ssh? Und hast du eine Domain?

Neviol

Fragesteller

01.09.2020, 21:31

@whgoffline

Webhost bei Strato. Eine Domain kriegt man doch für wenige Euro

whgoffline

01.09.2020, 21:31

@Neviol

Ja, aber hast du eine?

Neviol

Fragesteller

01.09.2020, 21:31

@whgoffline

whgoffline

01.09.2020, 21:32

@Neviol

Dann musst du eine Html doch einfach nur hochladen, oder wo hakt es?

Sarasixteen

02.09.2020, 04:26

@whgoffline

Du brauchst einen Webserver da ladest du dein HTML dokument hoch is doch ganz easy als Anfang würde ich dir den web & domain hoster "bplaced" empfehlen

Ich weiß das es so nicht funktionieren kann aber wie geht es denn richtig???

Was mache ich falsch? Der Error ist :

Uncaught ReferenceError: require is not defined at Test.html:12:28

Mein Code

<!DOCTYPE html>
    <html >
        <head>
        <title>Test</title>
        </head>
            <body>


            </body>

            <script>
                const fs = require("fs");
                fs.readFile("test.txt", (err, data) => {
                if (err) throw err;

                console.log(data.toString());
                });
            </script>
    </html>

...zur Frage

HTML Code funktioniert nicht Bild wir mit Platzhalter ersetzt?

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LIHI Haircuts</title>
 </head>
 <body>
  <img src="/Bilder/Salon.jpg">
 </body>
</html>

Das ist der Code bis jetzt und angezeigt wird mir nur ein Platzhalter. Ich haben einen Ordner namens "Haircut Seite" auf dem Desktop angelegt. Darin befindet sich die ".html" Datei und ein weiter Ordner Namens "Bilder", dort sind dann die Bilder die ich für die Website nutzen möchte. Die Bilder sind auch alle .jpg Dateien. Weiß jemand weiter ?

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

JavaScript - Erste Schritte, CSS wird blockiert?

Ich bekomme folgenden Error, wenn ich versuche meine ersten Versuche einer Webseite in Firefox zu laden.

Die Ressource von "http://localhost:63342/FirstTest/style.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff)

Das ist der Code von den Datein.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="placeholder">
        I'm in a div!
    </div>
    <div class="anotherClass">
        I'm in another class!
    </div>
</body>
</html>

CSS

.placeholder{
    background-color: red;
}

.anotherClass{
    background-color: lightseagreen;
}

Leider werden nur die div Elemente ausgeben, woran kann es legen? Ich werde aus der Fehlermeldung nicht schlau.

Schöne Grüße

...zur Frage

wie findet ihr mein login feld?

habe ein kleines login feld gemacht und später kommt noch python dazu

code html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</header>

<main>

<h1 class="h1" >login</h1>

<h4> <a href="#">Password vergessen?</a></h4>

</form>

</div>

</main>

</footer>

</body>

</html>

css

body {

float: inline-start;

margin-top: 15%;

}

h1 {

font-family: sans-serif;

color: darkblue;

}

#Anmeldefeld {

display: flex;

align-items: center;

justify-content: center;

box-shadow: 20px 20px 10px gray;

border-style: solid;

}

...zur Frage

Wie kann ich eine HTML und JavaScript Login-Funktion mit nur einer Passwortmöglichkeit machen?

Ich will eine Login-Funktion für eine eigene Internetseite machen, wobei nur mein eigenes Passwort funktionieren soll. Es kommt aber immer die Meldung, dass das Passwort falsch sei.

Das ist mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Seitenname | Login</title>
    <meta charset ="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header><img src="bilder/Logo.jpg" alt="Logo"></header>
      <sectionAnmeldung>
        <div class="Anmelden">
          <h1>Anmelden</h1>
          <a>Passwort:</a>
          <input type="password" name="myPw" placeholder="Password" />
          <script>
            function pwRichtig() {
              var x = document.getElementsByName("myPw").value;
              var pw = "password123";

              if (x == pw) {
                document.open("hauptseite.html");
              }
              else {
                alert("Falsches Passwort!");
              }
            }
          </script>
          <input type="submit" name="" value="Einloggen" onclick="pwRichtig()" required />
        </div>
      </sectionAnmeldung>
    </div>
  </body>
</html>

...zur Frage

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zur Frage

HTML/CSS Bilder hinter Text

Hallo Community,

ich arbeite zurzeit an einer kleinen Website (Privat) und würde gerne Bilder hinter Texte bzw. Schriften positioneren.Wenn ich es z.B. so angebe:

Willkommen!

Test Test Test Test Test

dann stehen h1 und p unter dem Bild :/ wie kann ich das ändern?

...zur Frage

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!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>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

HTML Label verschieben?

Möchte gerne das Label im untenstehenden HTML Code verschieben. Hab es mit margin im Css versucht weis aber nicht ganz genau wie es geht.

<!DOCTYPE html>

<html>

<head

<title>Probe Seite</title>

</head>

<body>

<h1> Textfelder erstellen </h1>

<label for "vname"> Vorname:

<button type="button" id="button"> auslesen </button>

</label for "vname">

</body>

</html>

...zur Frage

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

HTML Text verschieben?

Ich möchte den text horizontal mittig haben justify-content und align-items gehen beide nicht


<!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>
</head>
<body>
    <style>
        .WelcomeTitle {
           display: flex;
           flex-direction: column;
          
            text-align: center;
            align-items: center;
            font-family: sans-serif;
        }
    </style>
    <h1 class="WelcomeTitle">Hier kommt ein Titel
        <br>
        hin der Lang ist!</h1>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen