Eigene website Erstellen html

Erstellen Sie Ihre eigene Website html

aber auch Personen ohne HTML- oder CSS-Kenntnisse betreiben eine Webseite. Erlernen Sie HTML und CSS durch den Umbau von Webseiten. Durch den Umbau der Beispieldesigns erlernt man die individuellen HTML-Befehle und CSS-Anweisungen im Dialog (quasi in the wild) und erlebt die Implementierung im HTML-Tutorial und wie eine vollständige Website erstellt wird. Nach der besten Art des Lernens, es selbst umzusetzen, wird das Vorwissen im Anschluss in die Praxis überführt. Zu diesem Zweck werden schrittweise ganze Muster-Websites mit typischem Design kopiert: Schlichtes ein-spaltiges Design (mit Response-Design) mit der Website "Säulenbauten .

..." (Spaltenstrukturen...).

Natürlich können Sie auch Ihr eigenes Vorhaben in Betracht ziehen und wie bei den Beispielprojekten umsetzen: z.B. eine Website über Ihr eigenes Steckenpferd oder die Website für einen Vereinszweck. Sobald Sie dieses Kapital abgeschlossen haben, haben Sie Ihre eigene Website, die Sie nach Ihren Wünschen beliebig ausbauen können.

Lernprogramm 1: Struktur einer reaktiven Website mit HTML, CSS und Java-Script

Mit diesem Tutorium lernen Sie die Struktur einer Website kennen..... Diese Anleitung ist wie ein Rezept. Das hat den Nachteil, dass Sie das Resultat auch ohne Programmierung downloaden können. Also, wenn Sie nach dem Tutorium alles begriffen haben und lieber weiter an Ihren eigenen Dingen arbeiten möchten, können Sie das Beispiel annehmen und anbringen.

Über Rückmeldungen und Kritiken bin ich froh, wenn du nicht weiter kommen solltest, dann kannst du mir schreiben oder Kommentare abgeben. Also wollen wir eine kleine Website mit HTML, CSS, Java-Skript erstellen und Bootsstrap nutzen, weil wir viel Zeit einsparen und mit CSS arbeiten. Darüber hinaus bietet uns Bootsstrap eine reaktionsschnelle Website, die auf jedem Endgerät mit einem fortschrittlichen Webbrowser dargestellt werden kann.

Auf der Website selbst wird ein kleines Menu mit Überschriften angezeigt und der Inhaltsbereich der Website zeigt eine Kopfzeile + Texte und ein Image. Um etwas Interaktion zu erreichen, werden wir auch Verknüpfungen und Buttons einfügen, mit denen wir die Website ändern oder ganz unkompliziert den Content verändern können. Danach gehen wir zur Analysephase und zum tatsächlichen Aufbau der Website über.

Wie müssen wir vorgehen, um diese Website zu bekommen und wie soll diese Website ausfallen? Hier finden Sie das grundlegende Layout der projektierten Website sowie die Dateiform. So haben wir eine html-Datei, in die der Content über HTML eingebunden wird. Wenn wir ein Programmverhalten entwickeln wollen, das einen eingeblendeten Programmtext anzeigt, wenn Sie auf die Schaltfläche "Mehr" klicken, werden wir dies mit Java-Skript tun und von jQuery unterstützt, da wir viel Programmieraufwand ersparen.

Sie erstellen ein eigenes Unterverzeichnis auf Ihrer Harddisk und erstellen 3 Leerdateien darin: und fügen es dem Inhaltsverzeichnis hinzu. html. Und wir haben unseren eigenen Stil. und Ihr eigenes Skript. JJ s und diese müssen hinzugefügt werden. com/getting-started/#download und kopieren Sie den Inhalt der Verzeichnisse css und js ins Adressbuch Ihrer Website.

Eine kurze Überprüfung des Inhaltsverzeichnisses. html im Webbrowser und in den Entwicklungswerkzeugen ergibt, dass alles in Ordnung ist, auch wenn die Seiten unausgefüllt sind. Jetzt erstellen wir unsere festen Bestandteile im Body-Element: Menu, Headline, Texte, Buttons, Bilder und Links. So fügen Sie das Beispiel Navbar-fixed-top ein und können dort Ihren Menüpunkt einfügen.

Testen Sie dies, sehen Sie, dass die Internetseite unter dem Menüpunkt "verschwindet". Es gibt in der Doku auch einen kleinen Hinweis, dass Sie eine Property in Ihrem eigenen CSS einbinden müssen. Wenn noch nicht erledigt, müssen wir den Quellcode in Ihrem eigenen Stil CSS erstellen. und referenzieren Sie diese Akte im Verzeichnis. html im Kopf (Zeile 11).

Sie erstellen also ein weiteres Div-Element mit der Klassenbezeichnung "container-fluid" und verschieben den Inhalt dorthin. Die Ergebnisse sehen so aus: Sie teilen die Website in ein Tabellengitter und ordnen den Inhalt in dieser Liste an. Sie fügen also die Property type="button" und die Class "btn btn-success" zum Knopf hinzu.

Jetzt wirkt die Schaltfläche etwas modern..... So erstellen Sie ein p-Element für den Imprint und setzen die Sorte text-right. Grundsätzlich ist unsere Website nach außen hin bereits fertiggestellt, aber eines noch nicht, nämlich beim Anklicken des Buttons einen Texteinblendung zu wünschen und bestenfalls die Schaltfläche dafür auszublenden.

Wir werden jQuery dafür verwenden, aber um es zu verwenden, müssen Sie einige Elements-ID-Eigenschaften angeben, damit jQuery dieses Elements in der HTML-Datei auffinden kann. Also gib dem Button eine weitere Eigenschaft: id="moreExperience". Jetzt können Sie den Kode für den Klick in Ihr Skript eingeben. JS. alert("Learn more.... clicked." ); }); }); Ein kleiner Testfall wird Ihnen eine Warnmeldung anzeigen, sobald Sie auf die Schaltfläche klicken.

In unsere HTML-Datei wollen wir nun einen neuen Eintrag vornehmen. texts ("Der Robot, den Sie auf dem Foto finden, ist recht geil. ( und " ); }); Wir selektieren das Bauteil nach ID und können dann einen neuen Eintrag in das Bauteil mit . text(""""); anbringen. Es ist mir bekannt, dass ich den Knopf bewusst ausgelassen habe, um ihn zu verstecken.

Basierend auf diesem Lernprogramm sollten Sie die folgenden Punkte erstellen. Erstellen Sie das Imprint analog zur Startseite, die Sie über den Verweis auf der Startseite erreichen können.

Sie sollten es hier sozusagen einen kleinen Schritt ins kaltem Gewässer gewagt haben und es mal ganz simpel versuchen. Inwiefern Sie diese Grundkenntnisse lernen können, wird auch im Download zu diesem Tutorium erklärt. In unserem nächsten Tutorium lernen wir etwas mehr über Java-Skript und dort zeige ich Euch, wie man ein kleines Kurzfilmprogramm in Gestalt eines Textabenteuers erstellt.

Wenn du Rückmeldungen oder andere Informationen hast, schreibst du mir oder kommentierst du weiter und wenn dir das Lernprogramm gefällt, würde ich mich freuen, wenn du dich auf meiner Website anmeldest und ein ähnliches oder ähnliches Blatt da oben lässst.

Mehr zum Thema