Hand-Coding deiner ersten Website: HTML und CSS-Grundlagen | Sira Academy | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Hand-Coding deiner ersten Website: HTML und CSS-Grundlagen

teacher avatar Sira Academy, School

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

9 Einheiten (49 Min.)
    • 1. Einführung

      4:32
    • 2. Erster Code auf HTML

      8:26
    • 3. Erster Code auf CSS

      3:02
    • 4. Gestaltung des Körpers

      5:47
    • 5. Entwurf des TITEL (Kopfzeile)

      4:09
    • 6. Navigationsliste gestalten

      8:02
    • 7. Design von Containern2 (H2)

      6:10
    • 8. Let's design the Paragraphen und Überschrift (p, h3)

      4:58
    • 9. FOOTER - Ende des Kurses

      3:50
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

104

Teilnehmer:innen

1

Projekt

Über diesen Kurs

Während unseres Kurses erstellen wir eine einfache Website mit HTML und CSS.

Der Kurs dauert nicht mehr als 40 Minuten, und entlang dieser Zeit kannst du eine gleiche Website erstellen, wie du in Einführungsvideo siehst.

Der Kurs wird in einfacher Weise erläutert, alles wird umfassend und klar sein.

Was wir verwenden :

Text-Editor : Notizblock ++

Chrome

Bilder von der Website http://www.monpada.fr

Das ist alles,

Jetzt fangen wir an!

Triff deine:n Kursleiter:in

Teacher Profile Image

Sira Academy

School

Kursleiter:in

Bonjour ! , my name is Ylber, a founder of Sira Academy. I was born in Novosello, a small village in the south east of Kosovo, now I live in Montpellier which is a city in south of France, exciting and much more dynamic. I studied French Literature at the university of Montpellier but also English as a foreign language. I have been teaching for 5 years now in many schools and associations. I really enjoy teaching. It gives me the opportunity to learn about the different cultures around the world.

I have become a self taught, Depending on the complexity of a topic, learning something new can take a long time. And it's bound to be frustrating as you grapple with new terminologies, new models, and apparently irrelevant information. When you are learning something by yourself, there ... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Tust du, meine Freunde? Die Rolle, Liebe meine Schüler. Also, wo ich der einfachste Lehrer, den Sie jemals gesehen haben, so zusammen werden wir diese schöne, einfache Website in 40 Minuten erstellen , so dass es nicht länger dauert Onley 14 Minuten. So sehen Sie, es ist eine sehr einfache Website, aber schön. So können Sie alles, was Sie wollen, setzen. Sie können Bilder, Videos, Artikel so alles posten Videos, . Also sehen Sie, wir haben die Kopfzeile. Also haben wir ein Titelfarbdesign, so dass Sie in jedem Namen nennen können, den Sie mögen. Wir haben einen Navigations-Osten. So sehen Sie Und Sie können Beispielnachrichten, Sport, Biographie, Wirtschaft alles nennen Sport, Biographie, . Also alles, was Sie mögen, so können Sie in jedem Namen ändern, den Sie mögen. So sehen Sie, wir haben so Titelartikel So haben wir aber nur wie ein Beispiel Und die Unterseite haben wir Fuß nach oben So werden wir diese Seite in 40 Minuten erstellen. Also werde ich Ihnen zeigen, wie Sie das Schritt für Schritt tun. Also musst du weitermachen. Ich kenne den Texteditor nicht, also wenn Sie es haben, können Sie Beispiel verwenden Es gibt viele Texteditoren. Also, wenn es nicht schlecht war, erinnerst du dich? Nicht schlecht, aber es war nicht gut. Jetzt ist es nicht das Plus Plus. Das ist also eine sehr gute zu verwenden, wo er Texteditor könnte. Also, sobald Sie haben oder Sie in ihrer Website sind, können Sie nicht die letzte Version laden, um einfach hier herunterladen klicken. Also nicht laden, und Sie werden es nicht laden. Also werde ich es nicht laden, weil ich es schon getan habe. Und ich habe es auf meinem PC, so wird es so zeigen. Das ist also der Texteditor, keine schlechten Cluster. Also, sobald wir diesen Texteditor heruntergeladen haben, müssen wir erstellen. Also müssen wir einen Ordner in oder bestimmt groß machen Also was tun? Bei dem, was ich tue. Also folgen Sie mir einfach. So werden wir Beispiel nennen, oder Website oder Website. Also kannst du in welchem Namen auch immer du willst, also mach dir keine Sorgen. Also, dann werden wir öffnen oder HTML so html. Es ist sehr einfache Sprache, weil alles, was Sie öffnen, müssen Sie schließen. Sie sehen also, dass Sie die Steuer öffnen und dann schließen Sie. Wir haben HTML. Also, jetzt müssen wir es speichern die Ordner, die wir auf diesem Zeug erstellt haben erinnern. Also haben wir Namen es oder getestet, richtig? So oder waren Namen es oder Website. - Richtig. Also werden wir es meinen ersten Namen nennen. Meine erste Website dachte HTML Also denken Sie daran, dass wir nicht Woche arbeiten an PHP oder CSS oder JavaScript. Wir arbeiten mit HTML. So müssen Sie dot html nennen, so dot html und wir werden es speichern. So sehen Sie die Steuer oder der Code hat sich zu blau geändert. Das bedeutet also, dass alles richtig funktioniert. So werden wir genau hier oder erste Website, um zu testen, ob alles richtig funktioniert. Also dann werden wir Luncheon Chrom laufen. Also würde ich es in Kriminalität starten, weil das mein bevorzugter ist. Und sehen Sie, also haben wir es nicht gerettet. Wir müssen sie retten. Also, dann aktualisieren. So sehen Sie oder erste Website wurde angezeigt. Es bedeutet also, dass alles richtig funktioniert, also folge mir einfach. Und in 40 Minuten werden wir gemeinsam diese einfache, schöne Website 2. Erster Code auf HTML: ihren Schülern. Also sind wir wieder in unserem zweiten Tutorial. Also und in diesem Tutorial werden wir anfangen zu entwerfen oder zu erstellen oder zu Seite. Also diese schöne Seite. Also, um das Wachstum zu sagen oder welche Art von Version von HTML verwendet wurden, müssen wir dunklen Typ so Jahr beide und dann Also jetzt weiß der Roeser, welche Art von HTML verwendet wurden. Also erinnere dich an alles. Alles. Wenn wir alles codieren, so ist es in drei Teile getrennt. Also haben wir hier die hatte noch hier. Also, wie du im Kopf siehst, haben wir nur den Titel. Dann ist es von hier aus die Leiche. So in den Körper wird die Navigationsosten-Titel Artikel setzen. So tritt alles in den Körper ein. Also und dann haben wir die Fußzeile, also, wie Sie sehen Jahr. Wir haben also keinen Kanaltyp. Und hier müssen wir also zuerst sagen, dass wir dem Bruder erzählen oder welche Sprache wir benutzen werden. Also, das können wir zeigen, wie HTML lang tippen und dann setzen wir e n. Es ist für Englisch. Also, jetzt sind wir bereit, in drei Teilen zu machen oder zu platzieren. So, wie wir gesagt haben, so dass alles in HTML-Tags eintritt. Also alles, was den Körper hatte, die Navigation führt so alles. Also hier müssen wir jetzt den Kopf setzen. Also haben wir zu schreiben hatte und wir haben zu schließen hatte, Wie gesagt, alles, was wir öffnen, wir müssen schließen. Also in die Haare werden wir nur den Titel setzen. So der Titel können wir meine erste Website mit Hilfe von HTML und CSS nennen. Also, jetzt müssen wir den Titel schließen, richtig, weil wir alles gesagt haben, was wir öffnen, müssen wir schließen. So, jetzt sehen Sie, dass wir haben, haben wir erschaffen. Also haben wir es einen Hund-Typ als die lang, die Sprache aus dem Browser. Und dann haben wir einen Titel gesetzt. Also, jetzt müssen wir den Körper zu schaffen. Also der Körper im Körper, werden wir so alles in den Körper setzen, so dass Körper wir brauchen, um den Körper zu schließen. Also, wie du siehst, so geht alles hier in der Leiche. Also in der Navigation am wenigsten so geht alles hier. Also in der Leiche hier, werden wir einen Toten setzen. Also, Dave, es hilft uns Beispiel, die Seite zu entwerfen. Also haben wir in Dev's nur Klassen verwendet und wir verwenden IDs. So hilft uns das und zu entwerfen Beispiel oder Seite. Also haben wir es Dave Year gesetzt und wir werden es schließen. Wenn ja, in diesem Dave Jahr, werden wir Sachen setzen. Zum Beispiel müssen wir hier das H eins und zwei dieses H erstellen. Wir werden ein I. D. Beispiel geben D. , die Idee, dass wir das geben werden, es war irrrt, bis der Hutmacher es sein wird . Es wird sich zeigen. Also in der Kopfzeile, dann werden wir einen Link beenden. So Links, die wir mit ref erstellen. Also, Ralf, es ist für Link. Also werden wir den Titel als Link machen. Dann geben wir einen Titel. So wie wir gesagt, so Titel wird wie Titel wird Farbdesign farbigen Design sein und es würde nach Hause setzen hier so werden wir den Titel zu schließen und dann werden wir den Titel in der Browser-Farbe von diesem entworfen zeigen . Also, jetzt müssen wir das Alter ein-Tag schließen, sehen Sie. Also, nachdem wir erstellt haben oder Titel und wir haben einen Tag gesetzt, so jetzt müssen wir eine Navigation am wenigsten erstellen , so dass wir durch Eingabe von Nap geleast geleast erstellen. Also, das jetzt ist es genau wie Navigation. Also würden wir in UL setzen. Es bedeutet eine neue Ordnung, es am wenigsten Also hatten wir Recht und wir werden es geben und ich d. Also, um mit CSS zu entwerfen, müssen wir entschieden geben, Also werden wir es Menü nennen. Also, jetzt müssen wir die U L. schließen und dann werden wir am wenigsten erschaffen. Also geben wir Verbündeten und dann verkauft das Mindeste muss als Ling sein, denn wenn Sie vorwärts oder umleiten wollen eine andere Seite, es ist besser, albern Essen setzen Links. Also, wir aber unsere Referenz und dann werden wir nicht Zehe setzen einen Link. Also gehen wir so, würde ich schreiben. So ist es, dass Nummer eins oder neue Mahlzeit? Uh, und dann schließen wir so am wenigsten, und wir werden auch schließen. Also der Link, zumindest Fräsen So werde ich kopieren, um einfacher zu sein, so glücklich, einfacher zu sein. Und so werde ich jetzt wie 12345 sagen, also bedeutet es, dass wir fünf Listen in Breaux haben. Also, nachdem wir gerieben oder navigatorischen Osten Jetzt müssen wir den Bruder überprüfen. So sehen Sie, wir haben den Titel auf der Haben gelegentlich Ost erstellt. Also lasst uns essen es in Chrom und sehen So sehen Sie, wir haben begonnen. Also, jetzt haben wir die Medikamente, Elise und wir haben einen Titel. Also nur Jack. Also hier sind wir wieder frisch kontrolliert. Sie sehen also, wir haben das Navigationsosten- und Farbdesign wie ein Titel. Es bedeutet also, dass alles perfekt funktioniert. Also, nachdem wir Navigational Ost gutgeschrieben haben, müssen wir noch einen Tag machen. Also denken Sie daran, wir können Nummer setzen, damit wir unzählige Zahlen von Dave auf unserer Seite setzen können. Es spielt also keine Rolle, wie viele Tage Sie neue Seite setzen, also ist es unbegrenzt. Also werden wir das benennen hat wie Container zu. Also werden wir in den Hauptbehälter setzen. Sie sehen also, es ist dann im Hauptcontainer der Partei, also müssen wir zwei nach ihnen benennen. Wir werden eine Nation zu schaffen, um zu sitzen bedeutet Essen Überschrift zu, also werden wir wie Artikel schreiben, Artikel verkaufen auf dieser Seite. Wir gehen zum Beispiel. Siehst du, das sind Erfrischungen wieder erhalten. Wir haben Artikel, die wir auch einen Absatz nehmen können. Wir können einfach auf die diese was Seite gehen? HTML-Typen von dot com. Also werden wir diesen Absatz kopieren und wir werden auf unserer Website setzen, so dass es ein bisschen länger ist , aber wir glauben, dass für jetzt so. Also sehen Sie, das wir haben den Absatz und jetzt sollte der Navigations-Osten nicht hier sein. Es sollte also wegen des Todes hier sein. So entbeint einen Behälter, um jetzt überprüfen wir noch einmal. Also haben wir Artikel. Wir werden noch einmal in den Broker überprüfen und sehen, wo wir sind. Also lassen Sie uns Jack noch einmal, wir werden aktualisieren und Sie sehen, wir haben die Artikel auf jetzt haben wir auch den Absatz, also müssen wir auch eine kleine Fußzeile erstellen. Also müssen wir aufhören, hinkt, wie ich in dieser Sprache sagte. So haben wir am Anfang erwähnt, dass wir den Hut, den Körper und die Fußzeile haben . Also haben wir die Lebensmittel und hier werden wir Zehe setzen genau wie ein Absatz und nennen es wie Fuß, so entworfen von mir verkauft, ich werde meinen Namen setzen. So wie ein Absatz, sehen Sie. Also, jetzt funktioniert alles perfekt. Also, wenn der nächste Vortrag, werden wir Schritt für Schritt für Schritt für Paige entwerfen. 3. Erster Code auf CSS: Also sind wir wieder in oder nächste Tutorial, und wir werden ein wenig oder eine Webseite zu entwerfen. Siehst du, wir haben einen Titel Navigational East Artikel auf dem Fuß. Also jetzt werden wir es entwerfen, wenn Sie mit CSS entwerfen möchten. So müssen Sie immer Stil eingeben, so dass wir Stil nur unter dem Kopf eingeben. Also ab, um den Titel auf dem Titeltyp, wir werden Text wie CS setzen hat und dann, wie wir gesagt, so dass alles, was wir auf dem HTML öffnen, wir müssen auch schließen, Also werden wir den Stil zu schließen. Also, jetzt werden wir die Leiche entwerfen. Also die Leiche, sie ist hier. So können Sie sehen, ob Sie etwas entwerfen möchten, geben Sie einfach dieses Wort ein. Also deine Art von Körper. Dann öffnest du die geschweiften Klammern. Also, sehen Sie, wir werden die geschweiften Klammern öffnen, wir geben den Spielraum. Also die Marge gibt es, so gibt es uns Größe. So gibt es uns Größe, um den weißen Raum außerhalb der Grenzen. Also und das Streicheln gibt es eine Größe aus dem weißen Raum Nur so im Inneren des Brettes, sie so marschiert es draußen und Polsterung seiner Innenseite. Also werden wir auch Textzeile setzen und wir werden wie Mitte setzen. Also, jetzt schauen wir nach dem Broker und sehen, was wir sind. So sehen Sie, dass der Titel und alles hat sich auf die mittlere Steuerlinie Zentrum geändert, Also es war einfach. Also jetzt, wie gesagt, haben wir von I d entworfen. Deshalb haben wir hier eine Idee gesetzt. Also, jetzt siehst du, Dave, ich bin jetzt. Aber wir müssen ein Hash-Tag setzen, um zu wissen, was wir entwerfen. Und dann legen wir Container. Also ist der Name schon weg? Meine Güte, Container. Also hier, Jetzt werden wir Nein geben, wir werden ein mit geben Also werden wir ein mit in Richtung der Container geben, so dass wir wie setzen , 770 Pixel auf. Dann muss eine Marge von Null zu Alt sein und wir werden auch eine Steuerlinie wie Zentrum setzen . So muss die linke Textzeile virtuell links sein, also lassen Sie uns noch einmal überprüfen und sehen, dass sich der Text wieder nach links geändert hat . Also, jetzt müssen wir nur den Header entwerfen. Du siehst also die Idee, dass H eins so ist, dass dies ein Tron ist. Dies ist die Kopfzeile. So sehen Sie, dass es ein bisschen so ist es hier ein bisschen chaotisch, also müssen wir den Titel oben in der Navigation setzen. Also lasst uns ändern. Also werden wir den Titel auf der Oberseite für zwei 150 Pixel zu setzen oder zu schieben. So können wir dies tun, indem wir den Befehl eingeben. Hass. Also, dann werden wir 256 Pixel geben. Lasst uns jetzt überprüfen, wo wir sind. Also siehst du, also ist der Titel an die Spitze gegangen. Die Navigation. Es sind nur 250 Pixel von hier bis zu den Titeln. 4. Gestaltung des Körpers: Sehr geehrter Herr In. Also sind wir wieder in Ordnung nächste Vorlesung und in diesem Vortrag werden wir zu Design oder Webseite gehen. Du siehst also den Hintergrund. Es ist ein bisschen chaotisch, also müssen wir einen anderen Hintergrund geben, weil wir einen schwarzen Hintergrund haben. Aber jetzt müssen wir es ändern. Also sehen Sie, wir haben den Titel und dann haben wir die Navigation hier veröffentlicht. Also lassen Sie uns ihrem Körper einen Hintergrund geben. Also dafür brauchen wir nur die Art des Hintergrunds und dann setzen wir diese Farben. Sind da? Es ist meine Vorliebe. Also haben Sie Hashtag eingegeben, da es aktualisiert wurde. Und Sie sehen, der Hintergrund wurde in diese Farbe geändert. Also, was wir als nächstes tun werden, es ist, dass wir eine Grenze zu wenn Container bekommen. Also sehen Sie, wir haben die TIFF-Container, wenn wir sagten, so haben wir getrennt oder Seite mit Tiefen. Also, jetzt gehen wir was? Wir werden gehen. Wir geben einer Marge eine Grenze. In der Tat werden wir eine Grenze von zwei Pixeln bekommen. Also für zwei Pixel und dann werden wir solid eingeben, und wir werden eine schöne Farbe geben Also lasst uns diesem Farbe-Hashtag ein Vorher geben, werden wir einen Hintergrund geben. Also der Hintergrund, der leer sein muss. Es ist besser für uns. Tippen Sie also zuerst auf den Hintergrund in Schwarz Wenn Sie also den Hintergrund leer eingeben möchten, können Sie Hashtag und dreifache EFS setzen. Also lassen Sie uns jetzt gehen und noch einmal überprüfen, ob alles gut funktioniert. Also lasst uns ins frische gehen. Sie sehen, die Dev Container hat sich zu schwarz geändert und Sie sehen, dass wir um einen schönen Rahmen um zwei Pixel mit einer anderen Farbe haben . Also, wenn Sie über Farben überprüfen möchten, können Sie einfach eingeben. So führen Sie Hex-Farben HTML und dann können Sie für jeden Namen aus X-Farben überprüfen so dass Sie mit diesem Link HTML-Farbnamen sprechen können und wenn Sie kopieren und in Ihrer Website setzen möchten , es war einfach. Sie kopieren es einfach und dann schmecken Sie es in CSS. Also im Kaskaden-Stil, wenn Sie Ihr Bagram ändern möchten, so hängt es von Ihrem Geschmack ab. Also, was wir als Nächstes tun werden, ist, dass wir ein paar Bilder auf dieser Website machen, also ist es eine französische Website. Also fangen wir noch einmal an, wir müssen mehr donde ausländische Affäre eingeben. Also werden wir alle Quellen nehmen, die wir für unsere Webseite brauchen. Also klicken wir auf diesen Link html CSS Also das sind die Bilder, die wir verwenden werden, um zu erstellen oder Website. Also werden wir diesen Titel speichern. Also müssen wir in demselben Ordner sagen, den wir erstellt haben, denken Sie daran,dass denken Sie daran, wir einen Ordner mit dem Namen oder der Website erstellt haben, also muss der Typ gyp sein. Also denken Sie daran, wir haben drei Arten von Bildern, also ist es G p g. Es sind Jif und PNG. Also sagen wir auch diesen kleinen Apfel. Der Typ ist also auch Jeff, also speichern wir ihn im selben Ordner. Jetzt müssen wir auch die große Seite speichern. So werden wir es speichern, Klicken Sie einfach wie speichern Sie uns und wir werden es als Jiff speichern. Jetzt haben wir dieses große Menü, das wir für die Navigation Ost verwenden werden, so werden wir es speichern und es ist auch ein Jiff Bild und dann haben wir den Apfel. Also gibt es wir brauchen, um zu entwerfen oder navigieren Osten, also lasst uns uns oder Apfel retten. Also der Big Apfel. Also sagen wir Besuch, gib. Also, wenn Sie diese Bilder machen wollen, Sie können einfach überprüfen Sie diese Website mehr Panda, dass, wenn es Punkt Affäre und Sie können groß, um die gleiche Website wie ich erstellen . Also, was werden wir jetzt tun? Also in der H ein Header so in der Kopfzeile gingen Zehentempo oder um den Apfel zu setzen. Also zuerst werden wir eine Marge auf Null geben. Also werden wir nicht rüber kommen. Die Margen der Marge müssen eine Null sein. Und dann werden wir einen Hintergrund bekommen. Der Hintergrund muss also der Apfel sein. Also die Fülle, die wir nehmen. Also nahmen wir von der Website mehr. Mach auf, meine Tatsache. Also lasst uns gehen und große dich einpacken. Also haben wir diesen Apfel hier drin und wir werden Ihre Kopfzeile einfügen. Also lassen Sie uns die Art dieser Bilder überprüfen. Also sehen Sie jetzt, wir werden die Zeit überprüfen. Also der Typ es ist G PG. Es ist also nicht Jeff. Es ist G PG, um den Namen aus dem Element zu sehen, es ist Apple, dass G p g. So werden wir zu schreiben. Wenn Sie also Bilder aus Ihren Ordnern aufnehmen möchten, benötigen Sie nur den Typ u R l und dann den Namen der Bilder, das Format, die Art der Bilder. Also werden wir keine Wiederholung erstellen und wir werden es in der linken oberen Seite der Weltseite veröffentlichen . Also lassen Sie uns überprüfen, ob alles funktioniert, wenn alles perfekt funktioniert. So sehen Sie Nummer Apple, es ist in oder Header. Also werden wir Schritt für Schritt über, Webseite, Webseite, folgen Sie mir einfach. Und im nächsten Abschnitt werden wir ein anderes Design geben. 5. Entwurf des TITEL (Kopfzeile): Also lassen Sie uns entwerfen oder Website. Siehst du, wir haben gefärbt. Also haben wir diesen Apfel schöne Ebene in oder links oben auf für Webseite gesetzt. Also, was wir tun müssen, es ist Wir müssen ein Design zu diesem Ref geben. Also sehen Sie, wir haben den Link hier drin. Also die Idee, es ist Header und die Länge des Titels. Es ist ein Ihr f so Farbdesign. Also werden wir diesen Titel entwerfen. Also müssen wir nur h einen Header fahren und dann sehen Sie, wir haben den Link, also geben wir Flügel mit einem so öffnen wir die geschweiften Klammern und dann werden wir Schritt für Schritt oder Farbdesign als Link entwerfen. Also der Titel aus waren Webseite. Siehst du diesen Link hier drüben? Also werden wir den ersten Wagen geben, um mit zu geben, also tippen wir noch einmal, wir werden eine mit Zehe Arbeit Link Self Tour Titel geben. Wir werden etwa 400 Pixel geben und dann werden wir einen Hass um 70 Pixel bekommen. Das ist also genug. Also habe ich es einfach vorher gemacht, und es funktioniert gut damit. So sehen wir, dass es nichts noch geändert hat. Also, was wir jetzt tun werden, wir werden es zeigen. Also werden wir Ihren Titel als Block anzeigen. Wenn Sie also einen Unterschied sehen müssen, was ist der Unterschied zwischen der Anzeige im Block und der Anzeige in der Linie, um einfach zur VSC drei Schule auf der Google zu gehen , und Sie geben einfach so Anzeigeblock im Leben ein, so dass Sie lesen und sehen können Unterschied zwischen diesem zu verschieben, so dass Sie überprüfen können. Es gibt einige Beispiele hier, Also, um es besser zu verstehen, also werden wir als Block angezeigt. Also, was werden wir jetzt tun? Also werden wir einen Hintergrund geben, um sich an den Hintergrund zu erinnern. Also geben wir die Sie jetzt sind. Also erinnern wir uns daran, dass wir dieses Foto gemacht haben. Also der Titel, den wir von der Website genommen haben, bewegt Panda, so dass Sie dorthin gehen und nehmen Sie auch den gleichen Titel. Also Sie wir überprüfen wir einfach. Also haben wir einen Titel, dass Jeff. Also lassen Sie uns gehen und überprüfen Sie den Typ aus. Arbeiten Sie das Bild ab. Also sehen wir in den Gefangenen, es ist ein Gyp. Also kappen wir Ural Titel Jif. Also, jetzt, da wir einen Hintergrund Ihren URL-Titel gegeben haben, der Jeff. Also werden wir sagen, wie, wie, keine Wiederholung. Wir wollen also nicht, dass dies wiederholt wird, also muss die Position relativ sein. Also, wenn Sie die Positionen überprüfen wollen, so haben wir zwei Positionen in der Reihenfolge. CSS, wir haben Position relativ und absolut. Also werden wir eine Position geben. Also siehst du, jetzt funktioniert alles gut. Aber jetzt müssen wir mehr in die Linke setzen, weil es nicht besser aussieht. Also werden wir in die linke um 350 Pixel setzen und wir werden in die Spitze setzen, also werden wir in die Spitze für 15 Pixel setzen. Also lassen Sie uns jetzt gehen und überprüfen. Also lasst uns gehen und überprüfen, ob etwas geändert wurde. So sehen Sie, jetzt ist der Titel um 350 Pixel nach links und 15 Pixel von oben verschoben. So sehen Sie das Farbdesign, es sieht nicht wie besser aus, also müssen wir diesen Link entfernen. Um den Link zu entfernen, können Sie einfach Steuer eingeben, und so wird die texanischen Bank diesen Link entfernen. Also werden wir um Minderjährige 5000 Pixel setzen, um diesen Link zu entfernen. Lassen Sie uns also noch einmal aktualisieren und überprüfen, damit alles jetzt perfekt funktioniert. Also, jetzt sehen Sie, wir haben den Titel Farbe Design, die wir in unsere Waffen gesetzt haben. Also, jetzt werden wir auf Design oder Navigation Lecks in der Reihenfolge nächste Tutorial fortzusetzen. 6. Navigationsliste gestalten: So sehen Sie, das ist Ihre Website. Also setzen wir den Apfel hier und dann haben wir den Titel eingelegt. Siehst du, jetzt werden wir es Schritt für Schritt entwerfen. Aber Sie sehen, dass dieses Zeug gelegentlich nicht so gut genug ist. Also werden wir diesen Navigations-Osten entwerfen. Also sehen Sie, wir haben Heidi C i. D. Menu gegeben D. . Also werden wir zuerst die ul viele 90. Also reimst du dich nur wirklich. Nun, dann lesen wir Menü. Also werden wir die Heidi von der Speisekarte geben, und dann werden wir Schritt für Schritt langsam entwerfen. Das Menü muss also ein Beispiel sein. Wir geben ein Hassbeispiel. Der Hass muss um die 35 Pixel sein, und dann der Rand sah der Rand muss eine Null sein. Und die Polsterung muss auch als Null sein. Also null Pixel. Also danach. Also werden wir Hintergründe geben, erinnerst du dich? Damit wir das Sie dorthin bringen, wo ich bin, also setzen wir den Huron. Also entwerfen wir nicht. Dann legen wir dieses große Menü hier rein, also denken Sie daran, große Speisekarte. Also werden wir das hier setzen, also ist hier die Kanzlei aus diesem großen Menü? Also werden wir nach meinem großen Menü suchen. So ist es auch wieder Geschenk. Also gehen wir zu Fuß BGN Menü, dieses Geschenk. So sehen Sie, jetzt werden wir machen, wie Beispiel, wiederholen Sie als X, so wird es mehrmals wiederholen. Dann haben wir etwa minus 25 Sonnen herumgelegt. Das ist also der Hintergrund. Also werden wir noch einmal sparen und wir werden uns erfrischen. Siehst du, es scheint, dass etwas geändert wurde, also aber das ist der Navigations-Osten, den wir setzen. Also haben wir einen Ruf. Aber jetzt ist die Website Malisse, wir müssen wie hier setzen, wie in der Reihe. Also müssen wir auch eso geben. Sehen Sie diesen Anruf? Dies stoppt hier, also müssen wir das Beispiel entfernen, das wir brauchen, um den l mindestens Seles-Typ zu entfernen, nicht zuletzt Typ. So am wenigsten gestylt Beispiel Wir würden wahrscheinlich Stil Typ setzen, so würden wir wie nicht setzen. Und jetzt werden wir sagen, du siehst, also funktioniert jetzt alles perfekt. Also, wo es keine Zahl zwischen in der geringsten hier drin. Also, danach werden wir das am wenigsten entwerfen, also werden wir dir gut geben, also du gut, also du gut dann Menu und Lee, ich so das wenigstens hier drin. Also wurde das jetzt entworfen. Also, jetzt werden wir die geschweiften Klammern öffnen. Also, in diesem, werden wir wie links schweben. Denken Sie daran, wenn Sie sehen, dass die Geschossdecke übrig ist, daher muss der Text als Textlinie im Mittelpunkt der Linie sein. Also muss die Steuer ein Zentrum sein, und wir werden nur sehen, was geändert wurde. Also, sehen Sie, die Linie wurde geändert. Also oben, also Beispiel, wenn wir diesen Typ jetzt entfernen, so sehen Sie, werden wir diese nicht entfernen. Siehst du, sobald es einige Punkte gibt, die sie hier gezeigt werden. Dies ist, was am wenigsten Typ keiner tut. So wird es wie nicht so machen. Jetzt werden wir den Link entwerfen. Also sehen Sie, wir müssen das hier entwerfen. Also werden wir Sie auch Slash Menü Lee setzen, ich so am wenigsten. Und dann die Links. Was wir also mit Links tun werden, werden wir so Schritt für Schritt langsam entwerfen. Also geben wir das mit. Also werden wir zuerst ein mit eso geben muss es um so 107 Pixel sein. Also wie ich mich entschieden habe. Und dann muss der Zeilenhass Beispiel sein wie 25 Pixel, 25 Pixel. Wir werden eine lustige Größe setzen Also auch die lustige Größe muss 12 Uhr sein Also das ist die lustige Größe, die ich gewählt habe Und dann muss das Frontgewicht wie fett sein Also muss das Frontgewicht fett sein Also wir werden das Frontgewicht wie leere Buchstabenabstände setzen Also nur noch einmal so wir einen Buchstabenabstand setzen Also dieser Buchstabenabstand muss um zwei Pixel liegen Also lasst uns gehen und noch einmal überprüfen, ob etwas geändert wurde. Also sehen Sie, diese Dinge wurden durch diese Form von Schritten verändert Also nach diesem, werden wir eine Farbe geben Also das ist eine Farbe, die wir geben werden Also das ist die Farbe, die ich am meisten geben möchte, also setzen wir so und Anzeige als Block So saßen wir angezeigt Block. Also, um nicht zu entfernen Steuerdekoration sagen sehen, dass der Link So sehen wir Wir haben diese Seite hier, so müssen wir diese Seite entfernen, so dass wir durch Text entfernen können, Dekoration, Dekoration, und dann werden wir setzen wie, eine lange, so werden wir noch einmal überprüfen, ob etwas in unseren Texten geändert wurde, sehen sie jetzt funktioniert perfekt, aber was wir brauchen, um es zu tun unterstützte Grenze. Also muss eine Grenze sein, so dass die Grenze direkt an der Grenze, Lee die Grenze. Und richtig. Der Rand rechts muss also eine Surround zu Pixel und Volumenkörper sein. Also die Farbe, die ich dort geben werde. Das ist also die Farbe, die ich mag. Siehst du, die Grenze wurde auf wenig geändert, oder? Das ist also die Grenze, die wir ihm gegeben haben. Also, was wir tun müssen. Also, um, wir brauchen Beispiel, wenn wir mit unseren Mündern tippen. So Beispiel müssen wir wie über SoHo über Mittel Menü setzen. Also werden wir wenigstens ein Over setzen. Wenn wir also den Mund dorthin legen, wird die Linie geändert. So werden wir den Hintergrund der Khobar setzen. Der Hintergrund des Überblicks muss also so sein. Sie sehen also ein großes Menü. Also werden wir dieses große Menü als Geschenk so groß, dass wir Big and Land Menu Gedankengeschenk setzen werden. Also werden wir X. wiederholen also werden wir so mehrmals wiederholen und dann werden wir eine Null wie Ränder vertikal auf beiden Seiten setzen . Also lassen Sie uns noch einmal überprüfen, ob etwas geändert wurde. So sehen Sie, jetzt funktioniert alles perfekt. Aber du siehst etwas, das es hier nicht funktioniert. Also müssen wir, wie, wiederholen, großes Menü setzen wie, wiederholen, wiederholen, . Du warst aus einer Über-So Wiederholungstaktik. Ja. Großes Menü Gedankengeschenk. Das ist also der Ural, der in der Reihenfolge geändert werden muss. Wenn wir die Berge hier setzen, sollte es sich ändern. Normalerweise ändert es nichts an den Hintergrund. Du warst draußen. Großes Geschenk. Wiederholen Sie als X großes Menü. Dunkles Geschenk. Also lassen Sie uns noch einmal überprüfen. Großes Menü Gedankengeschenk. Baghram. Sie haben viele freigelassen. Also das ist genau wie Unterstriche wohl sein muss Also lassen Sie uns noch einmal überprüfen, bewegen Sie es und Sie sehen, ob wir die Maus hier setzen, so dass sich alles perfekt verändert hat. Also, jetzt werden wir diese beiden Teile hier und alles entwerfen, also ist es perfekt so. Danke. Als nächste Vorlesung werden wir entwerfen oder als nächstes 7. Design von Containern2 (H2): wissen, dass wir entworfen haben, so sind wir Navigation am wenigsten. Also sehen Sie, wir haben einen schönen Navigationsosten betitelt. Also müssen wir die Artikel entwerfen. Aber zuerst müssen wir diesen Artikel entfernen. Also werden wir die Santic ändern, also werden wir mehr Artikel setzen. Um das zu tun, können Sie zu diesem HTML ipsum gehen. Hier finden Sie einige Artikel. So Laura Ipsum, so können Sie lange Absätze nehmen. Sie können viele Absätze am wenigsten nehmen, so was auch immer Sie für Ihre Website benötigen. Aber jetzt werde ich nicht von dieser Website kopieren, also habe ich meine eigenen Artikel hier drin, also werde ich posten, also würde ich diesen Artikel entfernen, damit ich alle diese Artikel hier posten werde. Also habe ich Post in HD auch. Du siehst das Alter bis zu drei. Also habe ich hier ein paar Absätze. Also, jetzt lasst uns aktualisieren und sehen Sie, jetzt haben wir mawr Absätze. Wir haben Mawr Artikel, also werden wir Schritt für Schritt entwerfen. Also werden wir in diesem Alter zwei und dann das Alter drei Absätze so entwerfen und dann haben wir auch Sie sehen, also haben wir die Fußzeile hier drin und wir haben auch zurück auf die Hauptseite. Also haben wir hier eine kleine Verbindung. Also, jetzt, wo wir den Titel haben, gehen wir. Sehen Sie, alle Artikel sind so in diesem Tag, wenn ich d Container, so jetzt werden wir diese geteilt entwerfen mit zwei. Also haben wir am Anfang getrennt oder Seite. Also, jetzt müssen wir schreiben. So sehen Sie den Ideencontainer, damit wir Container schreiben müssen, und dann öffnen wir die geschweiften Klammern. Also, was wir hier tun werden, es ist also, dass wir ein Streicheln machen, also klopfen müssen wir da sein. Also Null von links verkauft 25 Pixel von rechts, Also Null von unten und 100 Pixel von oben. Also haben wir so ausgedrückt. Also jetzt werden wir diese große Seite so setzen, dass wir von der Website genommen haben. Also, um das zu tun, können wir einfach gehen und Hintergrund eingeben. Also, dann werden wir Hintergründe eingeben, dann setzen wir wie du l und dann den Namen aus dem Bild. Also der Name ist es PG unterstrichen Seite Punkt Jeff, so werden wir es nicht wiederholen. Also werden wir sagen, wie, wie, keine Wiederholung und dann werden wir einige Streicheln geben, wie 15 Pixel von rechts und 15 Pixel von unten. Also, jetzt lassen Sie uns einfach aktualisieren und sehen, ob alles perfekt war, also Klopfen muss zwei Punkte hier drin haben . Also lasst uns sehen, ob jetzt alles in Ordnung ist. Ja, du bist draußen. Also lasst uns gehen und erfrischen. Und sehen Sie, wir haben jetzt dieses Farbdesign auf der Laborseite. Mit diesem Hintergrund haben wir ihn hier reingesteckt. Was wir als nächstes tun müssen, ist, dass wir diese Artikel entwerfen müssen. Sie sehen also, es sieht nicht schön aus, also Titelartikel. Also werden wir uns ändern. Um das zu tun, müssen wir die Ideen eingeben. Also der Name des I D. Und dann werden wir auch wie Alter tippen . Also werden wir Dave Hashtag eingeben, der zwei enthält, und dann müssen wir angeben, was wir entwerfen werden. Also werden wir auch das Alter gestalten. Also öffneten wir die geschweiften Klammern und um das zu tun, Also, um Design zu tun. Also geben wir zuerst ein Streicheln. Also die Polsterung, wir werden eine Watte von der linken Seite um 25 Pixel geben, und dann werden wir eine Zeile acht geben. So muss der Zeilenhass so wahrscheinlich um 25 Pixel liegen. Es ist Materie. Also lasst uns nachsehen. Also hat sich der Titel geändert. Sie sehen, es hat sich jetzt 25 Pixel von links geändert, also werden wir eine Fondsgröße geben, so dass die Spaßgröße 1,4 yem sein muss. Das ist also eine schöne Größe für Ihren Artikel City. Siehe, der Artikel der Größe hat sich geändert. Und dann gehen wir jetzt. Also sehen Sie, wir haben diesen kleinen Apfel hier drin, also werden wir diesen kleinen Apfel einfach setzen und vier Artikel ausgelacht haben. Also geben wir Hintergrund ein, wie immer. Also oder du bist jetzt, Dann schreiben wir Little unterstreichen Apple, das gyp. Also, ja, das ist der Typ, bevor hier ein wenig läppt. Also gehen wir? Nein. Oder wir gehen. Nein, nein. Wiederholen, wir haben keine Wiederholung, keine Wiederholung Also und dann werden wir links mit ihm geben, um es nach links zu legen. unten. Also hintergrund kleiner Apfel. Keine Wiederholung mehr. Aber, ähm, also werden wir eine schöne Farbgruppen geben, also werden wir Farb-Tour-Titel bekommen. Also setzen wir Hashtag und dann schreiben wir neun b zwei. Das ist eine schöne Farbe, die wir bekommen werden. Also, dann werden wir eine Grenze von unten setzen. Also, um das zu tun, haben wir nur Rand unten ein Pixel solid, und wir werden die gleiche Farbe neun b zwei geben. Also lasst uns gehen und überprüfen, ob etwas geändert wurde. Siehst du, jetzt sieht es besser aus. Wir haben den kleinen Apfel von der linken Seite und es sieht besser aus. In der nächsten Vorlesung werden wir diese anderen Absätze entwerfen. 8. Let's design the Paragraphen und Überschrift (p, h3): So, jetzt, da wir entworfen haben, haben wir den Titel hier drin. So schön betitelt ein nettes Navigational Ost. Also haben wir das Alter entworfen, um Also, was jetzt? - Wir gehen. Also brauchen wir, dass Sie diese anderen Absätze sehen? Also, das haben wir das Alter drei hier drin. Also, wie, sehen Sie, das ist der dritte Absatz. Also werden wir es ein wenig entwerfen, Also, um es zu entwerfen, Also brauchten wir nur, um die Tauben zu tippen, also und dann werden wir wie Container tippen. Also Container, und dann werden wir h drei geben. Also öffnen wir die geschweiften Klammern und was wir entwerfen werden. Also zuerst werden wir eine Margenmarge links geben. Also werden wir etwa 15 Pixel auf Ben geben, die Polsterung von links um fünf Pixel. Also lassen Sie uns überprüfen, ob sich etwas geändert hat. Also, sehen Sie, der Absatz hat 15 Pixel von links verschoben. Also, jetzt werden wir eine Grenze von unten geben. Es sieht also besser aus, wenn wir eine Grenze bekommen. Die Grenze muss also ein Pixel Sally sein. Also werden wir eine Farbe geben, so, wie, 92. Also lasst uns noch einmal nachsehen. Also sehen Sie, wir haben ein Pixel vom Rand, aber so werden wir auch eine Grenze von links geben. Also, wenn ich unterstütze, so werden wir um drei Pixel solide zu bekommen. Also haben wir Wir werden die gleiche Farbe wie neun b zwei geben und dann werden wir eine Farbe geben . Also, wie neun B zwei, auch für die Farbe des Absatzes muss nicht zu sein. Also sehen Sie, jetzt haben wir eine Grenze von links und eine Grenze von unten. So sieht es jetzt Teig aus. Also, was werden wir jetzt tun? Also müssen wir ein wenig die Absätze entwerfen. Also werden wir den Zeilenweg ändern. So sieht es besser aus, wenn wir ändern oder wir rechtfertigen oder Text. Also, um das zu tun, gehen wir in Typ Dave jeden Container zu und dann geben wir die Absätze seifen an. Also gehen wir in die Steuerlinie. Also bekommen wir, wie, Texas Linie. Also werden wir es in die Mitte setzen, also muss der Absatz oder wahrscheinlich meine wir müssen es rechtfertigen. Es ist besser, so die Linie zu besteuern, zu rechtfertigen und dann werden wir Text Invent geben. Also müssen die Texaner als zwei wie Yem sein. Und nach dem Texaner, dann werden wir eine Zeile geben. Warte, also warte die Leitung. Es wird die Collins ändern, so dass es einen Zeilenweg online geben wird. Hasse auf 1,7 e. M. Also lasst uns nochmals überprüfen, ob sich etwas geändert hat. So sehen Sie, die Steuer wurde auf der Linie gerechtfertigt hat sich auf 1,7 Jahr geändert. So sieht es jetzt besser aus. Also brauchen wir das, was wir tun müssen. Also sehen Sie, wir haben diesen kleinen Absatz hier drin, also ist es wie ein Link. Also werden wir ein bisschen entwerfen, also weil es nicht besser aussieht. Also müssen wir setzen i d So div Hashtag gun Reise zu und dann geben wir eine so wie Ling angeben , weil es ein Link war, den Sie gesehen haben Absatz ist ein Link, also werden wir eine Farbe geben. Also die Farbe, die wir ihm acht eine Null geben werden. Das ist also eine schöne Farbe, die wir geben werden. So sehen Sie jetzt die Farbe aus dem Link hat sich geändert, aber es ist gut, wenn wir auch ein über geben. Sobald wir die Hügel gesetzt haben, ist es besser, wenn sich die Farbe aus dem Link ändert. Also ist es besser, wenn es sich geändert hat. Also müssen wir auch zusammen vorbei. Also werden wir wie Dave tippen. Also lassen Sie uns auch den elektiven Hashtag-Container stoppen. Also dann geben wir wie ein und dann das ganze über das, was wir geben werden, Also lasst uns die Farbe richtig. Also mögen wir Farbe. Ok. Wir wollten diese schöne Farbe geben, so Hashtag neun b zwei Also lassen Sie uns speichern und überprüfen, ob sich etwas geändert hat Ja, Nein, wir sehen, sobald wir unseren Mund die Farbe der Gliederketten setzen Also jetzt sieht es besser aus. Wir sind fast am Ende von vier Website Also im nächsten Tutorial müssen wir Fußzeile auf entwerfen Dann werden wir die Seite fertig So zusammen 9. FOOTER - Ende des Kurses: Also haben wir einen kleinen Job, um dies zu tun, um zu beenden oder Website. Also haben wir das Essen. Also sehen Sie, wir haben ein I d und den Namen der Idee. Es ist Footer. Also werden wir diesen Absatz und p Hashtag entwerfen Dann werden wir Fußzeile eingeben. Also, was wir tun werden, werden wir eine Marge geben. Also der Rand des Fußes oder muss Null sein Also werden wir nicht geben marschieren die Polsterung auch. Also die Polsterung von rechts, Also werden wir ein Streicheln von rechts um 10 Pixel geben und so werden wir eine Zeile A geben Also der Zeilenhass muss so 30 Pixel sein. Also 30 Pixel, es ist genug. Also die Steuerlinie. Also werden wir nach rechts setzen, damit es besser ist. Also setzen wir Text die Zeile nach rechts, also die Fußzeile, wir werden es auf den Schriftsteller für Paige setzen. Und lasst uns die Farbe der Fußzeile ändern. Also die Farbe des weiteren werden wir zu acht ändern. Eine Nullsumme. Lassen Sie uns überprüfen und eine Aktualisierung vornehmen. So sehen Sie jetzt die Fußzeile geändert wurde und es ist in der linken Seite oder Website so gestaltet . Also habe ich meinen Namen gesetzt. Also werden wir den Text ändern, damit wir den Text ändern können. Ich werde so Design auf die Urheberrechte schreiben. So funktioniert es also so gut. Zimmer zu tippen wie Paar schreibt, wir werden es aktualisieren und Sie sehen Copyright 2000 und 16. Also das ist Ah, es sieht besser aus. Also, jetzt sind wir am Ende und wir haben fertig oder Website. Also, um diese Liste ändern können. Sie können über Kontakt setzen, so dass Sie setzen können, was Sie wollen, können Sie sogar verwenden, so werden wir setzen nur den Namen ändern. Also, sobald wir Sie aktualisieren sehen, haben wir über Paige, so dass Sie Links erstellen können und dann können Sie direkte Leute zu Ihrem Kontakt oder Tour-Inhalte schreiben . - Was? Jeder Posten. So sehen Sie jetzt werden wir diesen Stil zu entfernen, so dass wir es einfach in einem separaten Ordner oder separat platzieren können . Es ist also nicht gut, es hier zu lassen, also werden wir es besser gestalten. Um das zu tun, werden wir eine neue Registerkarte erstellen. Also dann werden wir basieren oder C s einen Stil hier, so und dann werden wir einen Namen wie Stil dot CSS geben. Also das CSS es bedeutet CASC auf Stil. Also dann sehen Sie, die Farbe aus für Stil hat sich geändert. Also, jetzt haben wir nichts hier drin. Also, sobald wir Beispiel aktualisieren, wenn wir Ihre Seite aktualisieren, sehen Sie, dass alles zurück ist. Verstauen Sie dieses Skelett. Also, jetzt müssen wir den Link finden, um das CSS mit HD-Menge zu verknüpfen. Cool. So können Sie einfach Link CSS HTML schreiben. Also dann haben wir das Link-Tag. Also werden wir diese verlängern kopieren und wir werden es in waren Website einfügen. Also sehen Sie, wir werden es unter dem Titel beschleunigen, damit wir es über den Titel setzen können. Also ist es besser, im Kopf zu sein. Also müssen wir den Namen ändern und jetzt sehen Sie, dass alles gut funktioniert. Also wurde der Name gestylt, das ist er beurteilt. Das ist also zuzusehen. Und es war mir eine Freude, diese Website für Sie zu erstellen