Html CSS

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Hallo ich präsentiere euch heute mein erstes tut zu Html und CSS

      also vor wech das ist 100% von mir wen ich recht weis da ich es frisch geschrieben habe

      ich habe html und Css vor kurzen erst gelernt aber mehr dazu später xD als unwichtigen kram

      Fangen wir mal an


      Hintergrund Bild machen
      mache ich am libsten in css
      "ach so "


      <div style="background-image:url(background2.gif); margin:0px; padding:10px"> das

      es ein bild ist



      Pfart
      Die größe






      "Grafick einbinden"

      Grafik


      <p><img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"></p>

      das es ein Image (Bild) ist
      Quelle des Bilde
      Der Pfad zum Bild
      Die Größe des Bildes width (Breite); height(Höhe)
      Ist die Breite des rammens um das Bild (in Pixel angegeben)




      Grafik beschreiben


      <p><img src="altezeiten.jpg" width="271" height="265" alt="alte Zeiten" longdesc="altezeiten.htm"></p>

      Mit longdesc können sie den Pfad zur Seite wo das Bild beschrieben wird angeben.
      Pfatrt zum bild bsp. Images/baner.png



      Navigation
      "NAVIGATION"


      <a href="Der link oder datei ort auf dem webspace">der name wie es angezeigt werden soll</a> abschlus





      Ansttat Text eine Grafik



      <p>
      <a href="home.htm"><img src="button1.jpg" width="160" height="34" border="0" alt="Home"></a> Rot = Das übliche
      blau = die datei die dan kommt also kann auch "ranking.php" heisen
      Gelb = das ist der Imag pfart zum Bild (Butong)
      Grün = border="0" sorgt dafür das der ramen der sonst um das Bild (Butong) weher nicht mehr ist




      Verweis in ein neues Fenster


      <p>immer wieder neu:
      <a href="http://aktuell.de.selfhtml.org/" target="_blank">SELFHTML aktuell</a>
      </p>


      Der Link
      So legen sie ein Zielfenster Verweis Fest
      Ein verwies in ein neues Fenster


      Verweis Möglichkeiten

      eine kleine liste von den Möglichkeiten


      _blank, um den Verweis in einem neuen Fenster zu öffnen,
      _self, um den Verweis im aktuellen Fenster zu öffnen,
      _parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
      _top, um bei verschachtelten Framesets alle Framesets zu sprengen.





      Auf eine E-Mail Adresse verweisen


      <a href="mailto:Ikariam2008@live.de">Matthias, Ikariam2008@live.de</a>

      Das ist dafür zuständig das es ein Email Verweis gibt


      Das ist die E-Mail Adresse


      Der Name wie der Verweis heist


      ende des Tags


      Mehrere Email Verweise


      Da wird einfach eine lertaste rein geschrieben also


      BSP


      <p><a href="mailto:Ikariam2008@live.de">Matthias, Meine game mail </a>
      </p>
      <p>a href="mailto:Fightforshinobi@admin.de">Admin email adresse </a>




      sonderzeichen
      "SONDERZEICHEN"

      Zeichen Ersetzung
      ä &auml;
      Ä &Auml;
      ö &ouml;
      Ö &Ouml;
      ü &uuml;
      Ü &Uuml;
      ß &szlig;


      &euro;





      &amp; ("Ampersand")

      &lt; ("lower than")
      &gt; ("greater than")




      mahr dazu poste ich noch dan lege ich mal mit den wichtigsten Css sachen los

      CSS
      BACKGROUND
      "Background"

      in Css macht man ein baground nicht so wie in html in html macht man das so

      <body>
      </body>
      in CSS so

      ein -background-farbe macht man so

      body {
      background-color: #cc003

      }

      ein images so
      body{
      background: url(Images/banner.png); width: 1079px; height: 385px;
      background-repeat: no-repeat;
      background-position: top;
      center;

      }
      das es ein Bild ist; url= das es ein pfart auf dem Server ist
      der pfart zum Bild und das Bild mit Format
      da drinnen sollte der pfart stehen
      wie groß das Bild ist width= die breite; height= höhe des Bildes; px=pixel

      das heist das sich das Bild nicht wieder holt also das es einmal das komplette Bild ist nicht 100 mal oder so
      das ist wo das Bild stehen soll kann man auch in px angeben




      Boxen definieren

      "Boxen definieren"

      so dann noch was was wichtig ist wie ihr zum Beispiel was nach links machen könnt also einen Server Status oder so

      dafür müsst ihr es erst mal in einem html Datei definieren oder wie das heißt das macht ihr so

      <div class="box1">
      <div ID="box1">

      </div>

      so naja das kann ich net genau erklären ich weiß es einfach

      class kann man mehr mal verwenden


      ID hin gegen in der css Datei nur einmal
      also nicht das man nicht nur einmal Id nehmen kann ne mit dem selben Namen meine ich jetzt


      </div>
      In der css Datei sieht es wie folgt dann aus


      wenn ihr in der html Datei class genommen hast nimmt man einen .


      .
      box1{
      background-image:url(Images/2.png); width: 250px; height: 96px;
      background-repeat: no-repeat;
      position: absolute; top: 320px; left: 1050px;
      }
      das heißt die Position der box
      ja wo hin sie positioniert werden soll also erscheinen soll


      wen ihr ID in der HTML Datei genommen habt oder php Datei nimmt man in der CSS Datei eine #
      also dann würde das so aussehen

      #box1{
      background-image:url(Images/2.png); width: 250px; height: 96px;
      background-repeat: no-repeat;
      position: absolute; top: 320px; left: 1050px;
      }



      habt ihr noch fragen dann postet sie oder eine pm an mich ich werde nachher bei Gelegenheit noch eine kleine php Sache dazu machen

      ach ja und ich empfehle das Freeware Programm Netbeans für so was das ist echt gut

      mfg SchwarzerMagier

      PS habe versucht auf die Rechtschreibung zu achten
    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • [FONT="Arial"][COLOR="DeepSkyBlue"][SIZE="2"]Hallo ScwarzerMagie,
      was du da geschrieben hast, ist wirklich kein tutorial, das ist ne kleine sammlung an befehlen und rechtschreibfehlern.
      lern doch ma etwas schreiben, du konntest es schonmal.
      vorallem erklär dann die attribute richtig usw.

      habe das internetfreak gezeigt, weißte was er sagte?

      "internetfreak" schrieb:


      Das ist kein Tutorial, das ist "Müll"


      Da internetfreak nicht dumm ist, würde ich sagen, dass du überarbeitest, vorallem nich so grässlich formatieren, tut ja weh in den augen.
      [/SIZE][/COLOR][/FONT]
    • [FONT="Arial"][COLOR="DeepSkyBlue"][SIZE="2"]

      "internetfreak" schrieb:

      Padding/Margin sind nichmal für größe da.
      Und wenn du meine Vorschläge nicht annehmen willst, dann kannste mich mal.
      Kritik verträgste auf jeden fall keine.

      Soviel wieder von internetfreak.
      Und lass dir doch mal helfen, wir meinens nur gut.
      [/SIZE][/COLOR][/FONT]
    • SchwarzerMagie;220433 schrieb:

      habt ihr ne ahnung wie die scheise ist schlecht in der schule wegen dem scheis und dann mukt ihr noch rum manch mal langt es ich will das auch net aber mehr als mir nachhilfe dagegen geben zu lasen die nachilfe kostet und 200 euro 45 mins das ist ne spezial nachilfe also


      Verstehe den Post iwi nicht.

      Du bist wegen dem Tutorial schlecht in der Schule?
      Hat es so lange gedauert?
      Ich verstehe nicht genau was deine Nachhilfe mit dem tutorial zutun hat Oo
      Hast du in Informatik Nachhilfe?
    • Ach ihr Deppen habt euch auch net geändert.
      Er wollte doch nur helfen, aber statt ihn fertig zumachen könntet ihr ihm helfen!

      Auch wenns Teilweise total fail ist, wobei ich auch "<p>" nicht verstehe, also weshalb du es benutz, kann man dennoch etwas daraus lernen, vorallem für einsteiger, das sind so die allerersten Schritte.
      Vielelicht solltest du das mit padding etc. (wie angesprochen wurde) verbessern und dich nicht unterkriegen lassen, sondern dich vesbessern.

      Und das mit der Schule und der Nachhilfe blick ich nicht.
      Du solltest übrigens an deiner Rechtschreibung, was vorallem die Grammatik betrifft, arbeiten.
      Man kann es nur schwer übersetzen.
    • xDrago;220440 schrieb:

      Ach ihr Deppen habt euch auch net geändert.
      Er wollte doch nur helfen, aber statt ihn fertig zumachen könntet ihr ihm helfen!

      Auch wenns Teilweise total fail ist, wobei ich auch "<p>" nicht verstehe, also weshalb du es benutz, kann man dennoch etwas daraus lernen, vorallem für einsteiger, das sind so die allerersten Schritte.
      Vielelicht solltest du das mit padding etc. (wie angesprochen wurde) verbessern und dich nicht unterkriegen lassen, sondern dich vesbessern.

      Und das mit der Schule und der Nachhilfe blick ich nicht.
      Du solltest übrigens an deiner Rechtschreibung, was vorallem die Grammatik betrifft, arbeiten.
      Man kann es nur schwer übersetzen.


      Wegen der Rechtschreibung und Grammatik, er ist Legastheniker.
    • [COLOR="DarkOrange"][SIZE="2"]ich würd das ganze Tut auch noma was farben und schrift größen angeht überarbeiten...
      das sieht grauenhaft aus.

      Ich geh auch ma davon aus, das teile von dem "tut" kopiert wurden,
      da es doch Dinge gibt die richtig geschrieben sind... (soll nich bös gemeint sein)

      außerdem hat
      <a> nix mit navigation zutun,
      mag sein das es dafür verwendet wird, aber imprinzip
      sind es links auf andere dokumente oder script teile.


      Zu deiner Rechtschreibung,
      dafür das du Legastheniker bist kannst du nichts,
      aber trozdem würd ich das ganze vorher ma in word reinpacken
      der zeigt dir dann an das das nicht "pfart" sondern "pfad" heißt.
      Außerdem solltest du dir das ganze danach noch mal durchlesen,
      weil dann wirste selbst bemerken das man durch deinen Satzbau manchmal
      sehr schwer durchsteigt.

      Wenn du nicht in der lange bist einen Satz so zu formulieren das man ihn halbwegs versteht
      dann sollte man das tut schreiben lieber gleich lassen, denn manchen Teile sind zu fast 100% unverständlich :/
      [/SIZE][/COLOR]
    • Sedrika;220487 schrieb:

      Wegen der Rechtschreibung und Grammatik, er ist Legastheniker.


      Sollte keine Ausrede sein, mitlerweile gibt es Seiten die die Rechtschreibung Prüfen.
      Und man kann immer 2-3 Mal durchlesen.

      Ich hab 3 1/2 Stunden HTML und CSS gelernt, und das hab ich fast alles auch gelernt.
      Find es eig. ganz Hilfreich, wenn ich mir was nicht merken kann ^^

      Aber wenn du keine Kritik vertragen kannst, dann lass es Closen.
      Nich böse gemeint.