• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfe für einen Anfänger bei HTML

H

HTMLlernen

Neues Mitglied
Hallo Erstmal

Bin neu hier......

Ich möchte HTML 5 + CSS erlernen.....

Nur habe ich so paar Probleme und das klappt nciht so wie ich genau will.

Denke, wenn ich paar Beispiele sehe wie es ca. funktioniert wie ich möchte das ich genau weiß wie ich rangehen soll.

Man sagt ja nicht umsonst jeder Anfang ist schwer.....

Ich benutze als Explorer Firefox und arbeite mit Sublinetext 3.

Ok ich möchte eine Seite erzeugne sie so aussehen soll.

Die 2 kleinern Kästchen sollen möglichst gleich Aussehen also auch von der Größe und die 4 anderen Kästchen sollten auch von der Größe aus gleich sein.

Ich wäre euch für eure Hilfe sehr dankbar.
 

Anhänge

  • Bild html.jpg
    Bild html.jpg
    28,6 KB · Aufrufe: 16
Hallo,

Man sagt ja nicht umsonst jeder Anfang ist schwer.....
Zum Vergrößern anklicken....

Erst mal solltest du die Grundlagen vom aktuellem HTML5 / CSS3 lernen.

Dazu gehört unter anderem, das zunächst der HTML-Quelltext mit Inhalt erstellt wird und anschließend das Aussehen mit CSS angepasst wird.

Deine Vorgehensweise ist damit ungeschickt. Zumal wenn leere Boxen gestaltet werden sollen. Deren Größe ist schließlich vom Inhalt abhängig. Mit Inhalt würde das CSS entscheidend geändert werden müssen.

Ob die vielen h3-Überschriften angebracht sind hängt auch vom Inhalt ab. Das läßt sich so nicht beurteilen.

Ich benutze als Explorer Firefox
Zum Vergrößern anklicken....

Wenn interessiert das? Niemanden.

Du willst die Seiten für deine Besucher erstellen (nehme ich zumindest an) und auf deren Browser oder Geräte hast du keinen Einfluss. Die Seite muss also auf allen Geräten (Smartphones, Tablets, Desktoprechnern) und allen erwartbaren Auflösungen im Hoch- und Querformat funktionieren. Und die Darstellung hängt, wie bereits grade erwähnt, vom Inhalt ab.

Auf einem Smartphone im Hochformat sind 4 Boxen nebeneinander in der Regel nicht angebracht.

Es ist ein typischer Anfängerfehler Webseiten bei der Erstellung nur auf seinem großen Bildschirm in seinem Browser zu betrachten.

Denke, wenn ich paar Beispiele sehe wie es ca. funktioniert wie ich möchte das ich genau weiß wie ich rangehen soll.
Zum Vergrößern anklicken....

Nein, das funktioniert heutzutage erfahrungsgemäß nicht mehr. Ohne Grundlagenwissen hangelst du dich nur von einem Problem zum nächsten. Du würdest dir nur veraltetes HTML/CSS raussuchen, weil das vermeintlich am einfachsten ist.

Mit aktuellem HTML/CSS kannst du ohne das erforderliche Grundlagenwissen wahrscheinlich überhaupt nichts anfangen. Das belegen leider auch die vielen angeblichen Fachleute, die mit jeder Menge schwammiger Ausreden ihr veraltetes HTML-/CSS-Wissen als angemessen und aktuell verkaufen.

Gruss

MrMurphy
 
Danke für die Tipps, dann fange ich mit den Grunsteinen ein.

Benutze noch eine Lektüre Webpublishing mit HTML und CSS.
 
Hallo,

ich habe mal ein Beispiel für dein Layout erstellt.

Der HTML-Teil ist ziemlich schlicht, da gibt es ja nur die Überschriften, etwas Inhalt und ein paar leere Boxen, die mangels Bedeutung als div erstellt wurden. Mehr gehört nach deinen bisherigen Wünschen da auch nicht rein.

Das CSS ist auch nicht besonders aufwändig. Die height-Angaben der div-Boxen würden mit Inhalt wohl wegfallen. Es gibt natürlich noch andere Lösungen für das CSS, aber die sind veraltet.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Leeres Layout</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         display: flex;
         flex-wrap: wrap;
      }
      div {
         border: 2px solid black;
         border-radius: 0.5rem;
      }
      div:nth-child(4),
      div:nth-child(6) {
         width: 20%;
         height: 2rem;
         margin: 1rem 40%;
      }
      div:nth-child(8),
      div:nth-child(9),
      div:nth-child(10),
      div:nth-child(11) {
         height: 5rem;
         width: 23%;
         margin: 1rem 1%;
      }
      h1, h2, h3 {
         text-align: center;
         width: 100%;
         margin: 0.5rem;
      }
   </style>
</head>
<body>
   <h1>Irgendeine Überschrift</h1>
   <h2>Noch eine Überschrift</h2>
   <h3>Ein Wort</h3>
   <div></div>
   <h3>Ein Wort</h3>
   <div></div>
   <h3>Irgend ein kleiner Text</h3>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>

Webpublishing mit HTML und CSS
Zum Vergrößern anklicken....

Das Buch scheint nach meinen Informationen schon etwas veraltet zu sein. Seitdem haben sich HTML5 und CSS3 im Boom mit Smartphones und Tablets enorm weiter entwickelt.

Die Autorin beschreibt XHTML noch als aktuell obwohl dessen Entwicklung bereits seit 2006 offiziell eingestellt ist. Das passt natürlich nicht.

Andererseits war die Autorin bereits damals mit dem noch heute aktuellem Einsatz von HTML und CSS vertraut, zum Beispiel der Trennung von Inhalt und Gestaltung. Oder das Webseiten keine Größe kennen. Damit sind heutzutage leider noch viele Webseitenersteller überfordert.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Ich danke für deine Hilfe eine Frage welche Literatur würdest du empfehlen für einen Anfänger der sich immer steigern will um HTML 5 und CSS erlernen will.

Ich muss ja die Bücher ncith kaufne kann die ja erstmal ausleihen und mich dann entscheiden, für welches Buch ich nehme.

Oder ich teste erstmal die Bücher in der Literaturempfehlung mit welchem ich am besten zu Recht komme.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben