Html CSS

    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="Ikariam2008@live.deIkariam2008@live.de">Matthias, Meine game mail </a>
    </p>
    <p>a href="Fightforshinobi@admin.deFightforshinobi@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

    [CENTER][COLOR=red]Model
    mit
    Blender
    [/COLOR]     [/CENTER]

    [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?

    Zitat von internetfreak


    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]

    [CENTER]

    Zitat

    Niveau wo bist du ?
    Captain Niveau, wir sinken!


    [/CENTER]

    ach wist ihr was wen euch das alles nicht past dann sagt einfach verpis dich dann ist gut dann seit ihr mich loss ich habe es nicht nötig hier zu sein ich kenne weis got genug seiten die mir helfen und einem nicht stendig jeden scheis unter die nase reiben

    [CENTER][COLOR=red]Model
    mit
    Blender
    [/COLOR]     [/CENTER]

    Du bist ein *****. Das erste stimmt nebenbei nichtmal. Padding und Margin sind definitiv
    nicht für die Definition er Größe gedacht.

    [FONT="Arial"][COLOR="DeepSkyBlue"][SIZE="2"]

    Zitat von internetfreak

    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]

    [CENTER]

    Zitat

    Niveau wo bist du ?
    Captain Niveau, wir sinken!


    [/CENTER]

    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

    [CENTER][COLOR=red]Model
    mit
    Blender
    [/COLOR]     [/CENTER]

    Zitat von SchwarzerMagie;220433

    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?

    [CENTER][LEFT]
    [/LEFT]


    [/CENTER]

    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.

    [CENTER]


    [/CENTER]

    Zitat von xDrago;220440

    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]

    [CENTER]
    [/CENTER]

    Zitat von Sedrika;220487

    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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden