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 Fragesteller 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 – UI/UX Designer, 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>

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

...zur Frage

Html mehrere Slideshows untereinander?

Hallo,

ich (Anfänger in dem Gebiet) muss für mein Studium eine Webseite erstellen. Eine Seite möchte ich für eine Bildergalerie nutzen.

Ich habe mir diese Slideshow ausgesucht : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

Ich habe die Bilder zum ersten Thema eingefügt und alles funktioniert super.

Nun wollte ich zu einem anderen Thema diese Slideshow benutzen (mit anderen Bildern) und darunter setzen.

Nun bekomme ich das irgendwie nicht hin. Es öffnet sich keine neue Slideshow mit Bildern sondern nur die Pfeile zum weiter klicken und die dots, mit diesen koordiniere ich aber die erste slideshow.

Wäre nett wenn mir jemand helfen kann wie ich mehrere seperate slideshows erstellen kann, weil diese hier gefällt mir echt gut.

Danke !

...zur Frage

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?

...zur Frage

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 :).

...zur Frage

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?

...zur Frage

An die Webdesigner?

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

...zur Frage

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?

...zur Frage

Webdesign Kaltakquise?

Wie macht man am besten Kaktakquise als Webdesigner. Habt ihr Tipps für mich und ist E-Mailakquise auch effektiv oder nur per Telefon

...zur Frage

HTML Master Element auf mehreren Seiten einbinden?

Ich bin gerade an meinem Portfolio, welches ich selbst über HTML "code".

Die basic Skills reichen mir dazu eigentlich und den Rest bekomme ich von Codepen, aber eine Frage habe ich, welche ich nicht im Netz beantwortet bekommen habe. Oder zumindest weiß ich nicht genau, nach was ich googeln soll.

Ich habe auf jeder Seite dasselbe Menü.
Muss ich das nun auf jeder Seite händisch einpflegen oder kann ich irgendwie einen HTML-Schnipsel mittels PHP von einer anderen Seite auslesen.

Daher ich habe z.B. ein Stück Code welches auf jeder meiner .html Seiten zu finden ist. Ändere ich diesen Codeschnipsel, wird er automatisch auf allen eingebundenen Seiten ebenfalls geändert. So eine Art "Mastertemplate". Ich hoffe ihr versteht, was ich meine.

Und das am besten mit mehreren Objekten. Z.B. Header, Footer und noch andere Elemente, die dann auf die Unterseiten kommen werden.

Da eine komplette Antwort zu dem Thema vermutlich zu komplex ist, gerne auch einfach ein Tutorial verlinken.

Danke!

...zur Frage

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 {

}

...zur Frage

Wie kann ich in HTML den Text im Rahmen die Schriftart ändern?

Hallo,

ich möchte in html von dem Text der im Rahmen ist, die Schriftart ändern.

Irgendwie klappt das nicht so.

@font-face {

font-family: "Germanica";

src: url("Schrift/germanica/Shadowed Germanica.ttf");

}

#id1 { margin-left: 170px;}

<div id="id1"><div align="center"><p style="font-family:Germanica"><p class="outset"><br><font size="7"><strong>Test </font></strong><br><br> <font size="5"><strong> Der Absatz </font></strong> <br><br></p></div>

...zur Frage

CSS Hintergrund von Text separat bewegen?

Ich gestalte eine Webseite mit Elementen, die sich überlappen. Das setze ich mit Flexbox um. Ich habe zwei Texte, die nebeneinander liegen. Die Texte haben jeweils einen farbigen Kreis als Hintergrund. Die Kreise sollen sich an den Kanten überlappen, der Text jedoch nicht.

Kann ich es irgendwie umsetzen, dass der Text auf den Kreisen liegt und ich die Kreise darunter separat bewegen kann, ohne dass der Text sich mit bewegt? Und ohne position:absolute zu nutzen?

...zur Frage

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?

...zur Frage

flask: jinja2.exceptions.TemplateNotFound: index.html | Wie fixen?

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen