Wie kann man eine zweite Seite in HTML designen (Brackets)?

Hallo, da ich noch Neuling in HTML- Webseiten erstellen bin, habe ich immer wieder Probleme. Bis jetzt habe ich es geschafft mit Brackets eine Haupseite zu machen und diese mit der "style.css" zu gestalten. Da ich aber noch einen Navigationsbereich mit "anklickbarer Schrift" habe und diese auch designen möchte wird es für mich schon etwas kompizierter. Die kontaktseite habe ich schon mit der Schrift in der index.html verknüpft. Wenn ich jetzt allerdings versuche,die Kontaktseite zu bearbeiten (z.B.: Schrift zentrieren und Größe verändern) verändert sich auf der Vorschauseite nichts. Muss ich dazu eine andere Style Datei erstellen oder müsste es in der style funktionieren und ich habe einen Fehler? Ich habe im Anhang noch ein Sreenshot von der style.css und der zweiten Seite "kontakt.html" . Falls es noch weitere Details braucht bitte melden. Vielen Dank an alle, die sich die Mühe machen, mir zu helfen.

Style.css - (Webseite, programmieren, HTML)

kontakt html - (Webseite, programmieren, HTML)

4 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

greenstar19

05.08.2016, 20:11

hallo,

Ich fange mal ganz vorne an:

Die Dokumentenstruktur stimmt schon einmal gar nicht. Denn der Text und alles was auf der Seite zu sehen ist kommt in den Body Bereich, der bei dir gar nicht erst existiert. In den Head teil kommen nur Daten zur Website (Titel etc)
der "Befehl" dif wir div geschrieben ;)
Der Name des Divs also <div id="name"> wird n Anführungszeichen geschrieben
Wenn du den gleichen Stylesheet wie de anderen Seiten nutzen möchtest musst du diesen im Head teil noch verlinken.

Schau dir am besten mal diese Seite an: https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur_und_Aufbau

Das ist auch alles recht gut erklärt.

MfG Nico

Cliche

05.08.2016, 20:51

und denk auch immer daran das Dokument zu speichern und deine Webseite zu aktualisieren, nachdem du eine Änderung gemacht hast, sonst siehst du auch keine Veränderung.

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Webentwicklung

06.08.2016, 07:14

Validieren, validieren und nochmal validieren. ;) In deinem Markup sind einige Fehler enthalten, die erst einmal behoben werden sollten. Erst wenn alles korrekt ausgezeichnet wurde, solltest du mit dem Gestalten der Inhalte beginnen. Vielleicht also erst einmal essentielles Grundlagenwissen zu HTML aneignen.

Woher ich das weiß:Berufserfahrung – Full-Stack Developer

TitusPullo

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

05.08.2016, 20:00

Sieh dir mal den Grundaufbau einer HTML Datei an:

https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur_und_Aufbau

Dieser ist bei dir komplett falsch. Und dif gibt es nicht.

Woher ich das weiß:Berufserfahrung – Leidenschaftlicher Webentwickler

macminiuser

05.08.2016, 20:07

ganz einfach mit <a href="hier der name der datei (muss im gleichen Ordner sein)">Seite 2</a>

Ähnliche Beiträge

style.css (sheet) in einen .php Code einfügen?

wie kann ich mein Style sheet in .css in einen .php Code einfügen? So, dass ich es damit quasi designen kann?

...zum Beitrag

Hallo! 2 Fragen habe ich zum Brackets Editor. Die erste wäre, wie speichere ich die HTML richtig ab? Wo kann ich Brackets auf deutsch runter laden?

Zu meiner ersten Frage. Für Brackets hab ich ein eigenen Ordner in dem die CSS und Html gehen klappt alles ganz gut bis zum Schluss, abspeichern geht auch wunder bar, kann die HTML auch aus dem Ordner öffnen. Wenn ich die HTML nun aber kopiere und auf Desktop lege kann ich sie öffnen aber die Schriften sind nach links verschoben und Bilder werden nicht mehr angezeigt. Hab den Pfad verändert klar aber es sollte trotzdem gehen.

Zu meiner zweiten Frage. Woher bekomm ich Brackets in deutsch. Steht überall deutsch aber wenn ich das Programm öffne ist alles in englisch. Sprachauswahl beim installieren hatte ich nicht.

Danke im vor raus für die Antworten!

...zum Beitrag

An die Webdesigner?

Wie viele Kunden habt ihr ungefähr, dessen Webseiten ihr verwaltet bzw. hostet und wie viel kostet es monatlich bei euch?

...zum Beitrag

Wie lade ich eine HTML-Datei als Webside hoch?

Hallo. Ich habe eine Frage. Icch möchte eine Webside erstellen und habe eine HTML_Datei mit Brackets geschrieben. Aber meine Frage ist jetzt, wie ich das als ein Webside "speichern" kann. In YouTube ist das alles nur englisch. Falls das wichtig ist, ich habe einen Windows 7 Computer, die Dateien sind alle HTML, außer das Gästebuch, das ist in diesem Projekt als php gespeichert und eine style.css datei ist auch dabei. Also wie bekomme ich da jetzt eine Webside raus?

...zum Beitrag

Schriftart in Brackets?

Hallo :).

Ich schreibe gerade für die Schule eine HTML Seite mit dem Programm Brackets und hab mir aus dem Internet eine Schrift gedownloadet, habe diese auch im fonts Ordner in Windows installiert, aber ich kann sie nicht in Brackets benutzen. Hat jemand vielleicht eine Idee woran das liegt? Die Schrift die ich angegeben habe wird nicht in einer Farbe angezeigt, es ist einfach nur grau/schwarz. Wird sie nicht erkannt?

Danke im Voraus für die Antworten :).

...zum Beitrag

HTML/CSS, Bilder werden nicht angezeigt?

Ich habe im <body> mehrere divs, in denen abwechselnd divs und Texte untereinander angezeigt werden sollen. Die Bilder sollen auf voller Höhe sein (height: 100vh;). Wenn ich die Bilder mit <img src=""> im HTML Code im div einfüge, wird es angezeigt. Will ich es aber in meiner CSS Datei als background-image vom div einfügen, wird der Bereich, wo das Bild sein sollte, einfach nur grau. Die style.css ist richtig in der HTML-Datei angegeben, da andere Styles funktionieren. Der Pfad ist ebenfalls richtig angegeben. Hat jemand Ideen, was ich falsch mache? :(

...zum Beitrag

Suche normale Schrift im Indischen Style Design.

Moin! Kann mir evt. jemand helfen? Ich suche nämlich eine Schriftart, die oben verbunden ist, jedoch die Buchstaben "normal (latein)" sind. ein beispiel ist im link unten. Danke :)

https://vimeo.com/35962187
die buchstaben sind normal lateinisch aber die haben ja einen Indischen stil

...zum Beitrag

CSS möchte nicht laden?

Hallo,

es geht darum, dass ich ein Projekt habe in dem Java, Spring boot, ReactJS, CSS, JS und RestAPI mit inbegriffen sind. Mein Problem liegt lediglich darin, dass die html beim laden der Seite: localhost:8080/login.html den inhalt der html datei anzeigt aber die css datei garnicht übernimmt. Die Pfade zu den einzelnen Dateien stimmen ebenfalls, da sie verlinkt sind, doch das stylen über css funktioniert nicht

login.html: https://codefile.io/f/uD0jP33Wef
style.css: https://codefile.io/f/AGN6ENmt6t
script.js: https://codefile.io/f/unKOx5NUi6

Wäre echt top, wenn mir jemand dabei behilflich sein könnte.

...zum Beitrag

CSS in HTML einbinden schlägt fehl?

Ich habe einen "Stylesheet" in CSS geschrieben und den würde ich jetzt gern in meiner HTML einbinden, arbeite mit Brackets (mache es nur aus Jucks und Dollerei, wie ein Hobby) und auch wenn ich den Verweis zur CSS Datei schon in meiner HTML geschrieben habe, tut sich nichts. Liegt es daran dass ich schon im

Style diverse Angaben gemacht habe? Wie Hintergrundfarbe etc. ?

Ich kann auch gern den Quellcode einfügen wo man dann sehen wird das ich den Verweis schon eingefügt habe. Habe den Verweis sogar schon mit komplettem Dateipfad versucht, war aber nichts zu wollen. Muss ich innerhalb der CSS Datei diese irgendwie noch mit HTML verknüpfen? Wohl kaum, oder?

...zum Beitrag

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

Kontaktformular Website Design?

Ich habe ein Kontaktformular auf einer Website und die Informationen werden beim abschicken an eine Email gesendet. Dort sehen die Informationen unübersichtlich aus und ich möchte, dass es übersichtlicher wird. Hat jemand ein template oder Tipps?

...zum Beitrag

Mit HTML die Farbe eines Bildes ändern?

Hallo!

Ich habe eine .png Datei die nur aus transparenten und schwarzen Flächen besteht:

Ist es möglich mit HTML wenn z. B. einer mit der Maus drüber fährt (:hover) das sich der schwarze Teil im Bild zu blau ändert?

...zum Beitrag

Kann man CSS / SCSS Formatierungen Seitenabhängig machen?

Vorneweg: Ich habe 1 CSS / SCSS Datei zum Arbeiten welche für alle Unterseiten bei mir genutzt wird. Daran kann und werde ich nichts ändern und ich bitte auch nicht nachzufragen warum!!!

Kann ich nun eine Formatierung davon abhängig machen auf welcher Seite sie ausgeführt wird? Und wenn ja würde ich mich auch freuen wenn ihr sagt wie.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen