Grundkurs in der Webentwicklung: Erstelle deine eigene Website mit HTML, CSS, Javascript und WordPress | Brenton Strine | Skillshare

Playback-Geschwindigkeit


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

Grundkurs in der Webentwicklung: Erstelle deine eigene Website mit HTML, CSS, Javascript und WordPress

teacher avatar Brenton Strine, Web Guru

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

55 Einheiten (4 Std. 6 Min.)
    • 1. Trailer

      1:17
    • 2. Das Internet verstehen 1

      3:50
    • 3. Das Internet verstehen 2

      6:38
    • 4. Hole dir dein kostenloses Domain- und Web-Hosting

      8:05
    • 5. Interoperabilität

      3:03
    • 6. Hyperlinks

      2:18
    • 7. Plaintext vs. Rich Text

      1:11
    • 8. Fortgeschrittene Plaintext – Brackets

      3:10
    • 9. Einfügen von Plaintext in einem Browser

      4:32
    • 10. Frontend vs. Backend

      1:44
    • 11. FTP

      10:26
    • 12. Die Suche zum Verständnis

      2:02
    • 13. Anatomie einer Website

      4:05
    • 14. Live-Bearbeitung mit ShiftEdit

      7:59
    • 15. HTML-Syntax Lektion 1 – Tags

      6:14
    • 16. Exercise

      7:38
    • 17. Exercise

      5:15
    • 18. HTML-Syntax Lektion 2 – Attribute

      2:19
    • 19. HTML-Links

      8:37
    • 20. HTML-Syntax Lektion 3 – Nesting

      3:43
    • 21. HTML

      6:17
    • 22. HTML-Tipps und Geheimnisse

      18:20
    • 23. CSS und HTML-Sitzung in einem Baum

      3:45
    • 24. CSS Syntax 1: Eigenschaften und Werte

      4:12
    • 25. CSS Syntax 2: Mehrere Deklarationen

      3:17
    • 26. CSS Syntax 3: Selektoren

      3:52
    • 27. CSS Syntax 4: Kurse

      7:53
    • 28. Einführung in die DOM

      5:16
    • 29. Chrome DOM Inspect

      0:37
    • 30. Firefox DOM und Firebug

      4:14
    • 31. Internet Explorer DOM Inspect

      2:17
    • 32. Safari Mac Inspect

      2:10
    • 33. Safari Windows DOM Inspect

      1:30
    • 34. Verwendung des DOM Inspect Tool

      8:39
    • 35. Einführung in das Drehbuchschreiben

      2:12
    • 36. Javascript

      3:55
    • 37. Javascriptstränge

      2:38
    • 38. Die Javascript

      6:46
    • 39. Die Javascript

      3:17
    • 40. Backend Scripts

      2:34
    • 41. Php

      7:04
    • 42. Content-Management-Systeme

      3:04
    • 43. Wie Server mehrere HTTP-Anfragen umgehen mussen

      6:00
    • 44. Das Tool für die Network

      2:15
    • 45. WordPress auf dem Server

      4:21
    • 46. Unterstützung deiner aktuellen Website

      3:57
    • 47. Installation von WordPress

      6:42
    • 48. WordPress Administration

      6:09
    • 49. Permalinks

      2:22
    • 50. Bewegen der Blog-Seite von der Seite von der Seite

      2:06
    • 51. Anpassen von Themen

      4:20
    • 52. Anpassen der Sidebar und des Menüs

      3:15
    • 53. Bearbeiten von Themen

      1:52
    • 54. Plug-ins

      2:35
    • 55. Abschluss von thoughts

      1:57
  • --
  • 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.

1.047

Teilnehmer:innen

118

Projekte

Über diesen Kurs

Dieser Kurs soll dir die Konzepte, Tools und Praktiken des webmaking. machen. Wir geben Überblicke, bevor wir mit vielen Video-, video, Illustrationen und Tests in die Details eingehen. Nach vier Wochen wirst du dich sicher und bereit sein, die Dinge zu verwirklichen!

Dieser Kurs führt dich in die Welt der Webentwicklung ein. So kannst du mit dem Erstellen von Websites Websites beginnen und dich in Zukunft neue Kenntnisse in der Zukunft unterrichten.

Die Anregung für den Kurs beinhaltet 6 Monate ein komplettes komplettes Programm – d. 

Dieser Kurs konzentriert sich auf vier Bereiche:

CODING SKILLS
You lernst die Übung, die CSS und Javascript, die practice des Internet. Anstatt diese umfassende Einblicke in die üblichen Bereiche zu geben zu verspüren, konzentriere uns das


TOOLS
Web verwenden alle Arten von Tools, die sie effizient und leistungsstark, was sie tun können. Wir werden uns mit allen wichtigen Webdev vertraut machen und regelmäßig alle wichtigen Tools wie Texte, FTP-Kunden, webdev Bandbreite und demystify editors, und viele Artikel verwenden. Wir werden auch die Bibliotheken und Frameworks (z. B. jQuery, Bootstrap, HTML5-Boilerplate, Wordpress und cPanel) ersuchen, die das Codieren schneller, einfacher und effizienter


(e.g. erforschen die Grundlagen der Art der Web-Funktion und wie sie sie machen. Dies beinhaltet die Mechanik des Internet, die Komponenten einer Website und Strategien, die die Entwickler verwenden, um Dinge effizient, organisiert und einfach zu machen. Die RESOURCEN wirst du


auch eine eigene Ausbildung auf deiner eigenen Weise ausbauen – allein ist das alles gut für den Wert des Kurses wertschätzen. Das Web ist voller Schocks voller freien Lernressourcen, um dir bei deiner webmaking zu helfen. Aber selbst ist es eine schreckliche Aufgabe, alles zu sortieren und es kann unmöglich wissen, auf welche Dinge du dich konzentrieren solltest, auch wenn du sie finden kannst. Dein Lehrer:in ist fast ganz selbstständig und glaube doch, dass du dich selbst alles beibringen kannst, was du auch alles wissen kannst. Im Kurs verwenden wir alle Arten von Ressourcen (Referen, Bildung, Forums, und auch Sandboxen, Codegenerator, inspiration und Google Suchtechniken).

Triff deine:n Kursleiter:in

Teacher Profile Image

Brenton Strine

Web Guru

Kursleiter:in

I began teaching myself web development in the 90's and have gone on to work as a web developer on sites used by millions for companies like eFax, Citrix, Amazon and NASA Jet Propulsion Laboratory.

I've also taught web development to many thousands through my lessons on Code Year, Educator.com, Skillshare and Udemy. I have taught kids programming in homes, classrooms, and robot camps. I've also done in-person web development workshops in Los Angeles and recently started a web code bootcamp in LA that teaches beginners web development in one intensive, immersive weekend.

I hold a masters degree in Theology, enjoy working with youth, and drink tea every day. I currently live in South Pasadena with my wife. In January 2013 I start Shoutleaf Web Resrouces which provides domain... 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. Trailer: - Hallo. Mein Name ist Brenton Strain und ich bin der Dozent für diesen Kurs. - Was? Einen zu machen? 01 Was? Making want One bringt Sie von Null zu haben eine Website, die Sie mit Ihren Freunden teilen können . Es ist ein technischer Kurs, aber es ist kein Kurs, der konzentriert sich auf, wie der Code und die Programmiersprachen. wirst du lernen. Aber ich bin irgendwie wie der Geschichtslehrer, der nichts dagegen hat, wenn man sich nicht die Daten der Orte, die Namen und Daten auswendig lernt der Orte, . Ich möchte nur, dass Sie die Konzepte verstehen, also werde ich Ihnen technische Konzepte von allem beibringen, was Sie wissen müssen, um Ihre Website zum Laufen zu bringen , vorausgesetzt, Sie nehmen nur diesen Kurs ohne Website überhaupt. Dies beginnt mit, so dass Sie Dinge lernen, wie Sie eine Domain erhalten, wie Sie Hosting erhalten, wie Sie Ihren Server verbinden, wie Sie hochladen. Du wirst ein wenig H zwei Metal und CSS lernen. Sie werden einige Back-End-Programmierung wie PHP lernen. Ähm, und dann, äh, die letzte Lektion. Sie werden sogar lernen Kontakt-Management-System. Art von wie tut eine Menge von dem Code für Sie, und Sie können einfach die Website durch dieses Content-Management-System ausführen wird WordPress Um lernen , und Sie werden auf und bereit sein, am Ende dieses Kurses zu gehen und teilen Sie Ihre Links. 2. Das Internet verstehen 1: Das nennt man eine Festplatte oder ein Laufwerk. Es ist buchstäblich eine Scheibe, die schwer zu sehen ist. Es hat hier einen kleinen Kopf, der über die Scheibe häutet und sie liest. Und, äh, die Disc Spence. Und hier sind Einsen und Nullen, die Mahnwache Daten oder Dateien bilden. Wenn ich also eine Datei von dieser Festplatte auf diese Festplatte übertragen möchte, ist dies eine andere Festplatte. Es sind meine Freunde, hart zu fahren. Ich werde das nicht auseinander nehmen, weil es nicht meins ist, und ich will es brechen. Aber der einfachste Weg für mich, dies hier zu tun, wäre, beide Festplatten in meinen Computer zu stecken . Und dann muss ich nur das Betriebssystem benutzen, beide Laufwerke und Dragon Drop öffnen, um die Datei von einer Festplatte auf die andere zu übertragen. Dies wird als Übertragung bezeichnet. Was ist, wenn meine Freunde Festplatte nicht hier in meinem Haus ist, aber er ist eigentlich woanders? Was ist, wenn er in Atlanta, Georgia ist? Es ist ein bisschen komplizierter für mich, die Datei von einer Festplatte auf die andere zu übertragen , oder? Nun, vielleicht nicht so sehr, weil ein Download tatsächlich eine Art von Übertragung ist. Es ist eine Möglichkeit, eine Datei von einer Festplatte auf eine andere zu übertragen. So offensichtlich wäre, dass die Nutzung des Internets, um Festplatte zu übertragen. Aber um das Internet zu verstehen, lohnt es sich, ein wenig Zeit zu nehmen, um darüber nachzudenken, wie wir Dateien auf diese Festplatte ohne das Internet übertragen würden . Ohne das Internet wäre wahrscheinlich das wahrscheinlichste, dass ich diese Festplatte physisch nach Atlanta verschieben müsste , und dann könnte mein Freund sie in seinen Computer stecken und die Dateien übertragen, damit ich einfach Fahren Sie dorthin. Oder ich könnte das Postamt benutzen und das Postamt aufrufen, weil das Postsystem eigentlich ungefähr analog zu der Funktionsweise des Internets ist . Also, das Mail-System ein bisschen zu verstehen Also, . Es wird mit einem Verständnis des Internets bis zu einem gewissen Grad helfen. Also, wissen Sie, ich weiß nicht viel darüber, wie das Mail-System funktioniert, funktioniert, aber ich weiß zum Beispiel, dass, wenn ich diese Festplatte packe und sie anlege und eine Adresse auf es, Ich beginne mit dem allgemeinsten ich beginne mit wie Vereinigte Staaten. Wenn es aus den Vereinigten Staaten geht, und ich habe den Staat, dass ich die Stadt, die die Straße gesetzt hat, gesetzt, nennen Sie das mit der Straßennummer. Dann habe ich den Namen der Person und dann können Sie es von dort mit noch spezifischeren Dingen ändern , so dass Sie eine Wohnungsnummer machen könnten oder Sie sich um kümmern können. Und ich weiß auch, dass der Postbote nicht oder Post Woman nicht zu meiner Tür kommt und mein Paket abholt und dann direkt nach Atlanta fährt und es aufgibt. Nein, es gibt tatsächlich ein Netz von Postämtern, die ins Spiel kommen. Also zuerst geht es zu meiner lokalen Post und sie sehen sich die Adresse an. Sie lesen es von unten nach oben und sie entscheiden, OK, muss das zu einem anderen Postamt gehen, das höher ist? Oder ist es Haben wir die Zuständigkeit für diese Adresse und können wir sie von wo aus senden wir ? Also, weil es zum Beispiel nach Atlanta geht , würde es zu einer anderen regionalen, breiteren Sache gehen. Vielleicht gibt es irgendwo ein nationales Meistbüro. Wir gehen rüber zu einem Ost-Coaster oder einem Southern Postamt. Und ein. Irgendwann kommt es zu einem Postamt, das die Zuständigkeit dieser Adresse hat, und dann wird es beginnen, es flussabwärts genauer zu senden. Und es wird vielleicht in Atlanta Postamt gehen und Michael eine bestimmte Route. Und dann wird es von dort auf die Straße und an die Adresse geliefert, und dann wird die Person es öffnen und sie sehen Thea den Namen an, und wenn es ihr Name ist, dann werden sie tatsächlich, äh, einen Abschied nehmen und das Paket bekommen. 3. Das Internet verstehen 2: Lassen Sie uns das wieder in unser Szenario bringen und wie alles ins Theater zusammenhängt. Mail-System ist ein Netzwerk von verbundenen Postämtern, und das Internet ist ein interverbundenes Netzwerk von Computern. Ähm, jetzt ist sein grundlegendstes Netzwerk nur zwei Computer, die verbunden sind. Sie könnten einfach jedes unendliche Kabel bekommen und eine Verbindung zu Computern herstellen, und Sie hätten ein sehr niedriges Netzwerk. Ah, mehr in nützlichem Netzwerk wäre, wo Sie mehrere Computer miteinander verbunden haben Und jetzt, . offensichtlich, wollen Sie nicht ein Gericht pro Computer im Netzwerk und Kabel haben, die jeden einzelnen Computer, jeden anderen Computerverbinden einzelnen Computer, jeden anderen Computer , denn das wäre ein riesiges Kamelschlamassel. Es ist viel einfacher, dass ein Computer der dedizierte Hub des Netzwerks ist und alle Computer, die an einem Computer angeschlossen sind, dem Hub und dann, dass ein Computer Informationen von jedem der Computer an andere Computer weiterleiten kann . Es geht einfach durch den Hub. Jetzt Hubs sind Sie können Sie noch sitzen diese bis heute einrichten, und viele Leute haben sie in der Vergangenheit eingerichtet. , Aber was jetzt ein bisschen einfacher ist,ist, einen dedizierten Computer zu haben, der für den spezifischen Zweck gebaut ist , einer dieser Hubs zu sein. Auf diesem Weg müssen Sie es nicht einrichten. Sie müssen sich keine Sorgen darüber machen, dass jemand Ihren Hub ausgeschaltet oder, Sie wissen schon, ein Software-Update oder so etwas macht. Ihr gesamtes Netzwerk geht aus, während der Hub ausgeschaltet ist. Jetzt haben die meisten von Ihnen wahrscheinlich einen so genannten Router. Dies ist ein eher drahtloser Schreiber, und es hat auch einige Ethernet-Überschwemmungen in der Rückseite, so kann ich eine Reihe über das WiFi verbinden, und dann kann ich bis zu vier Computer über die Ethernet-Stecker verbinden. Und das ist eigentlich ein kleiner Computer, der wie ein Computer aussieht. Aber drinnen ist ein Mutterbrett. Es gibt Speicher, es gibt Speicher. Und, ähm, das lebt, um all dem zu dienen, was es tut. Ist es Ratten Netzwerkverkehr von einem Computer zum anderen. Deshalb nennen wir es einen Router. Sie könnten es auch einen Server nennen, wenn Sie diese Art von dem verursachen wollten, was es ist. Und so, in unserem Szenario, sagen ich möchte, dass mein Freund in der Lage ist, auf diese Datei zugreifen, und ich sage ihm, gehen Sie zu Brenton string dot com slash eingereicht bei txt. Das ist meine Webadresse. Das ist also, weißt du, es ist so wie im Mail-System, dass man eine Adresse haben muss, und es hat eine Syntax, die man nicht in irgendeiner Reihenfolge richtig machen kann. Sie müssen es in einer bestimmten Reihenfolge tun. Sie müssen die Domain an erster Stelle setzen. Du musst dot com setzen, du musst Schrägstriche setzen und all das. Aber, ähm, wissen Sie, also hat er seine Ratter, und er stellt diese Anfrage ein, und der Router wird sich das ansehen und sagen, ich habe keine Zuständigkeit für diese Adresse, weil sie nicht in sein lokales Netzwerk und Atlanta, richtig? Also, was Writer tun wird, ist es Upstream an einen anderen Server zu senden, ein Computer, der nur entwickelt wurde, um diese Art von Netzwerkverkehr auf Bier namens Server zu behandeln . Und was dieser Computer tun wird, ist dann seine Datenbank zu überprüfen, um zu sehen, oder? Nein, äh, hat keine Zuständigkeit. Und das Ding, das ich meine, es sieht nicht die Akten an dieser Stelle an. Es wird nur anfangen, ihre Domain zu betrachten, wirklich, denn das ist die niedrigste Ebene Sache, die wie das Land oder die Postleitzahl oder so ist . Und wenn es keine Zuständigkeit hat, sendet es diese Anfrage an einen noch breiteren, allgemeineren Server. Und dieser Server wird sich den Domänennamen ansehen und seine Datenbank überprüfen, um zu sehen, ob er das weiß . Es ist interessant. Im Grunde alles diese Computer ist, dass sie sich den Domänennamen ansehen und herausfinden, ob sie Gerichtsbarkeit haben und welcher Computer nicht zuständig ist. Also nennen wir diese Server Namen Server, eigentlich, weil alles, was sie tun, ist, auf die Domain-Namen zu schauen und zu befürchten, wo dieser Domain-Name in der Welt ist, wie, wie, buchstäblich wie, wo es ist es tatsächlich. Und so irgendwann wird ein Nameserver sagen, ich kenne diese Domain. Ich weiß, wo es ist, und dann wird es Sie an den tatsächlichen Server senden so gesendet, so wird es die Anfrage an meinen Computer senden. Ich habe Laptop, der einige Software installiert hat, die es Teoh Schnittstelle mit den Servern ermöglicht , und auf diese Weise wird es eine Server-Software genannt. Du. Wenn Sie einen Mac haben, wird er standardmäßig installiert. Eigentlich müssen Sie nur konfigurieren, und Sie können es auf jedem Computer aufhalten. Diese Servicesoftware. Also habe ich diese Server-Software bekommen und sie bekommt diese Anfrage und dass sie die Datei zurück über das Internet sendet . Also gehen wir hin. Job erledigt, richtig? Nun, es ist ein bisschen komplizierter als das, weil ich meinen Laptop nicht immer an haben will und, äh, nie ist das gleiche Problem mit dem Hub, richtig? Wenn mein Laptop die fünf ausgeschaltet wird, um es neu zu starten, dann geht meine Website herunter. Was ich also tun möchte, ist einen speziell gebauten, zweckgebundenen Computer zu haben , der ein Server ist, nicht nur kein Allzweck-Laptop, sondern er lebt, um Websites zu bedienen. Richtig? Es ist also ein Server, und es muss wirklich erstaunlich gute Internetverbindung wirklich schnell haben. Es muss wirklich viel Speicher sein, damit es, uh, uh, all das Zeug halten und mehrere Verbindungen haben kann. Manchmal, je nachdem, wie groß du verärgert bist. Millionen von Verbindungen zur gleichen Zeit ist wirklich schnell passiert, Festplatte, so dass Sie diese Informationen von der Festplatte auf dso wirklich bauen Einrichten Ihres eigenen Servers. Weißt du, du könntest es tun, aber einen guten Server zu haben, wird eine Menge Geld kosten. Und das ist, warum die meisten Menschen, die meisten Organisationen selbst nicht die Mühe, war die Einrichtung ihrer eigenen Server. Was sie tun, ist, dass sie eine andere Organisation bezahlen, die sich auf die Einrichtung von Service spezialisiert hat, um es für sie zu tun . Ähm, und das wird Webhost genannt. Sie wissen also, dass der Begriff Host hier gilt. Ah, Gastgeberin ist jemand, der Sie einlädt, ihren Raum zu nutzen, wie der Gastgeber einer Party lädt Sie ein , ihr Zuhause zu benutzen. Wissen Sie, wenn die Stadt dort die Olympischen Winterspiele veranstaltet, lädt Zuschauer und Athleten ein, in ihrer Stadt zu sein und ein Webhost lädt Ihre Website ein, live auf ihrem Server zu kommen. Dies ist also viel einfacher, als den eigenen Server einzurichten , und als Teil dieses Kurses bietet shot Leaf sechs Monate kostenlose Web-Posting. Das bedeutet, dass Sie einen Platz für Ihre Website haben, um im Internet zu existieren. Das ist Artikel Arbeit wurde für Sie getan, und anstatt für normalerweise bezahlen zu müssen, zahlen Sie wie eine jährliche oder eine monatliche Gebühr. Sie haben sechs Monate kostenlos, wie durch diesen Kurs gehen. Das ist eine grundlegende Einführung in die Internet-Infrastruktur. Die einzigen wirklichen Dinge, die Sie von diesem nehmen müssen, sind, dass ein Sie brauchen eine Web-Adresse . Bekannt ist auch ein Domain-Name und B. Sie benötigen einen Webserver, der auch als Web Posting bekannt Gehen Sie also weiter und schauen Sie sich das nächste Video an, um Hilfe dabei zu erhalten. 4. Hole dir dein kostenloses Domain- und Web-Hosting: Wir werden alle unsere Experimente machen und in Vorlesungsprojekten und all das, tatsächlich auf einer Live-Website, Ihrer Domain dot com und auf dem tatsächlichen Shot Blatt Web Hosting sechs Monate kostenlosen Web-Posting , die Sie für diesen Kurs bekommen. Es ist also wie ein Lernspielplatz, auf dem du arbeiten musst . Und so müssen Sie das einrichten. Also zuerst, müssen Sie eine Domain Domains kosten Geld bekommen. Sie werden auf einem Jahr registriert, Jahr zu Jahr Basis von, um, was Registrare genannt werden, und sie werden von I. eingerichtet Kann ich sehen, ein und ist dieses Leitungsorgan des Internets, das wählt, wer ein sein könnte Registrar, und sie setzen die Preise Domain-Namen in der Regel kosten etwa 12 Dollar pro Jahr, je nachdem, ob Sie ein dot com und dot org sind oder was nicht. Einige Registrare haben mehr berechnet, so dass sie einen Gewinn machen. Einige Registrare berechnen weniger als Werbeaktion. Einrichten Ihrer Domain und Hosting mit Schuss Blatt ist super einfach überhaupt ist durch diese eine Seite Sie gehen zu Schuss Blatt dot com Schrägstrich Registrieren Sie sich und Sie werden auf diese Seite zu bekommen und Sie können Ihre kostenlose Web-Hosting und Sie sind frei Domain hier alle an einem Ort, Ähm, alles auf einmal. Also, um die Freiheit zu bekommen und man muss eine dieser Domains wählen, ist es hier unten notiert. T K, g A. CFP und ML sind diejenigen, die jetzt verfügbar sind, und sie werden hier unten unten sein. Dies ist also die Top-Level-Domain dot com ist offensichtlich die bekannteste und bekannteste, also wählen Sie eine Domain aus und geben Sie sie einfach hier ein und überprüfen Sie dann die Verfügbarkeit, um zu sehen, ob sie verfügbar ist. Wenn Sie bereit sind, für so etwas wie ein Punkt com zu bezahlen, Sie müssen auch ein wenig härter arbeiten, um eine Domain zu finden, die, Ah, nicht bereits genommen. Wenn Sie eine Domain kaufen möchten oder wenn Sie bereits eine Nachfrage haben, die Sie auf den Shot übertragen möchten , lassen Sie Nameserver auf dem Shot verlassen Posting. Ich werde am Ende des Videos darüber sprechen, aber für jetzt werden wir einfach ziemlich schnell darüber reden, wie die kostenlose Domain und das kostenlose Hosting nutzen, so dass Sie weiter überprüfen müssen, bis Sie etwas finden , das verfügbar ist sobald Sie etwas zur Verfügung finden. Aber ich werde es dir sagen, damit ich dir sagen werde, dass es kostenlos ist, wenn du einen kostenlosen ausgesucht und weitermachst. Die Hauptsache, die Sie tun müssen, ist, dieses Kontrollkästchen zu aktivieren. Stellen Sie sicher, dass das jetzt Monat zu Monat ist, denn , äh, Sie bekommen nur sechs Monate kostenlos durch Web-Posting. Am Ende der sechs Monate werden Sie in einen bezahlten Kunden umgewandelt oder Ihr Konto wird gelöscht. Je nachdem, was Sie tun möchten. Ich werde Ihnen helfen, für einen anderen Host zu übertragen, wenn Sie einen anderen Host gefunden haben, den Sie auch bevorzugen . Also, was? Posting Domain alle an einem Ort. Richten Sie einfach Ihren Promo-Code ein. Sie können sehen, dass ich diesen Promo-Code bereits angewendet habe A B C D E F G ist gefälscht. Du wirst den Promo-Code eintragen, den du aus den Videos erhältst. Und dann ist es nur ein einfacher Prozess zum Auschecken und Ausfüllen der Registrierungsinformationen . Und dann, wenn Sie dies tun, wo Ihre Domain und Sie Hosten oder beide von Shot Blatt, dann sind Sie eingerichtet und gut zu gehen, es ist alles wirklich einfach. Wenn du willst, ähm, wenn du eine eindeutigere Domain verwenden willst, die keine der freien ist. , Wenn du willst, ähm, ähm, Es gibt ein paar Optionen, so offensichtlich könnte man einfach von Shot Blatt kaufen. Ein weiterer Trick ist, dass Sie eine Suche nach Domain-Namen und oft andere Registrare haben Angebote und Aktionen los. So sieht jetzt aus wie eins und eins. GoDaddy hat Domains für einen Dollar für das erste Jahr. Also, was das bedeutet ist, dass Sie diese Domain für das erste Jahr für einen Dollar registriert bekommen. Danach musst du den vollen Preis für diese Domain bezahlen musst du den vollen Preis für diese Domain bezahlen. Was auch immer es jetzt ist, Sie können Domain von einer Registerfahrt auf eine andere übertragen. Manchmal gibt es Transfergebühren, manchmal nicht Überweisung. Wenn Sie vielleicht über den Preis der Registrierung und Domain für ein Jahr, das ist in der Regel wie, wissen Sie, um $12,10 bis $12. Dies ist also ein guter Weg, um eine Domain zu erhalten, wenn Sie möchten, wie ein Top-Level wie dot com oder so. Ähm, und noch etwas zu wissen ist, lassen Sie Ihre Domains nicht Ende des Jahres verfallen. Wenn Sie Ihre Nachfrage auslaufen lassen, was passiert ist, dass Spammer sie innerhalb von Sekunden kaufen, nachdem sie abgelaufen sind. Und es kann unmöglich sein, Ihre Domain jetzt zurück zu bekommen, in Bezug auf die Wahl eines guten Domain-Namens, Sie wollen einige Grenzen? Kurz, einfach. Denken Sie daran, Denkwürdige Typ A ble. Ähm, Sie wollen irgendwie ein Gleichgewicht zwischen all dem finden und eine andere Sache, die Sie tun können, ist, dass Sie Domain-Hacking-Domain-Hacking tun können , wenn Sie von köstlichen Delle Donne ASIO i ceo Dot uns gehört haben . Das ist ein interessanter aussehender Name. Das ist so lecker und nein, wenn ich es tippe, geht es eigentlich nur zu köstlichen Dot Com. Aber was sie dort tun, ist, dass sie die Dot uns Top-Level-Domain gewählt haben. Es gibt tatsächliche Domain ist der CEO und dann gibt es Ah, es Sub-Domain ist Dell und Sie können so viele Sub-Domains haben, wie Sie wollen. Sie können das einrichten, also wirklich, was sie tun, ist, dass sie uns ausgegeben haben und dann haben sie ein paar kreative Freiheiten genommen, um einen Zauber zu machen. Köstlich. Das heißt also Domain-Hacking. Es ist nicht wirklich Hacking ist nur Hacken bedeutet nur, mit ihm zu spielen. Also gehe ich im Mai zu Deal und unsere Domain er und Notiz kann wieder zu demeanor dot com wechseln weil es tatsächlich schwer ist, diese Domain-Hacks zu tippen. Aber, ähm, das wird dir helfen, etwas auszuwählen. Also sagen Sie, Sie wollen diocoole Banane, um, gibt Ihnen alle Optionen, und dann gibt es Ihnen wie Tricks. Wie gibt es den Punkt n a, um, um, Top-Level-Domain, die Sie verwenden können, und es ist sich der verschiedenen Top-Level-Domänen bewusst. Ähm, also gibt es einen Punktnamen. Es gibt einen Punkt Ich, ähm, da könnte man Punkt am Schrägstrich e machen oder ein Verzeichnis benutzen. Also das ist, ah, nützlich, weil es Ihnen sagt, welche Domains bereits verfügbar sind. Also, wenn es diesen grünen Kreis hat, dann ist diese Domain tatsächlich verfügbar und Sie können sie registrieren. Ähm, diese Dinge, die Sie wahrscheinlich irgendwo anders registrieren müssen, weil Shut Leaf keine Tonne Top-Level-Domains anbietet. Eine andere, die Sie verwenden können, heißt, Hack hat Emmy bekommen, und dieser ist nicht verbunden. Aber, ähm, es wird Ihnen etwas schneller sagen, welche Art von Optionen es gibt. Es ist nur verfügbar. Eso eat dot es ist die Spanien Top-Level-Domain, so dass Sie sehen können, es ist ziemlich schnell und Abholung verschiedener Optionen. Und nur zu beachten, wenn Sie am Ende mit einem seltsamen Top-Level-Domains wie DOT N A, die Nambia ist müssen Sie es an die Nambia Registrar gehen, und sie könnten Sie wie $100 pro Jahr oder etwas lächerlich berechnen. Denken Sie also daran, dass die wirklich bizarren Namen manchmal von dem Land kontrolliert werden , das diese Top-Level-Domain besitzt, und sie können irgendwie tun, was sie wollen. Das ist also ein Nachteil. Ähm, aber, ähm, wenn Sie Ihre eigene Domain auswählen, die nicht über Shot Lee verfügbar ist, finden Sie einen guten Deal. Ähm, dann gehst du einfach hierher, setze deine Domain und so ist Shot Leaf in der Lage, dein Hosting an deine Domain anzuschließen, und dann musst du zu deinem Registrar gehen, wer auch immer es ist, wenn es geht Papa oder genannt billig oder einige Sie wissen, Nambia Registrar, müssen Sie sich in ihre Schnittstelle einloggen und die Option finden. Teoh setzen die Name-Server für diese Domain und setzen in Ennis ein Punkt Schuss verlassen dot com und hat bis heute Schuss verlassen dot com als Namen-Server. So möchten Sie das so schnell wie möglich tun, weil es eine Weile dauern kann, bis Nameserver auf das Hosting über das Internet zu übertragen, So werden Sie einrichten. Sie melden sich hier für das Hosting an. Sagen Sie uns, welche Domain es ist und dann auf Ihrem Registrar. Wenn dies nicht der Fall ist, zeigen Sie an, ob Sie die Namenserver manuell einstellen und dann bis zu zwei Tage für die Verbreitung im Internet geben müssen. Wenn es ist, wird es propagiert. Wenn Sie Ihre Domain eingeben, sollten Sie die Shelby Nachricht sehen, dass Sie bereit sind. 5. Interoperabilität: Beginnen wir also mit der Interoperabilität. Sagen wir, ich muss Programme Notizblock und Arbeitsamt. Es ist irgendwie wie Microsoft Word. Jetzt werde ich in nicht interoperablen Dokument-Textdokumenten erstellen und interagieren. Jetzt gehen wir hoch, und wir werden es speichern, wie genau der Name da ist. Aber der Typ ist Wort, Doc. So Arbeitsämter, die mit Microsoft Word betrieben werden können. Ich könnte es in all diesen vier Monaten retten. Ich werde Dot Dot Doc wählen und sparen, und du siehst, dass es hier aufgetaucht ist. Jetzt werden wir es in den Notizblock legen, der Word-Dateien nicht öffnen kann. Das ist nicht Interoperabilität. Wenn wir wollen, dass sie operieren eingeben, müssen wir es in einem Dateityp speichern, die beide verarbeiten können. Kein Pad an. Lee macht Nur-Text. Wenn ich also möchte, dass dies im Notizblock funktioniert, löschen wir die Datei und beginnen von vorn. Nun, dieses Mal, wenn wir es speichern, speichern wir es in einem Format, das mit Notizblock bedienbar ist, weil nein, Pat nur Text speichert. Hier ist die Akte. Ziehen Sie es hinein. Jetzt funktioniert es. Und früher war das, wenn Sie eine Datei hatten, die Sie von einem Mac auf einen PC senden, oder umgekehrt. Es war nicht garantiert, dass sie die richtige Software installiert haben, damit es funktioniert, also war die Lösung, die sie für das Internet bei der Gestaltung haben, HTML. Es ist ein gemeinsames Dokumentenformat, auf das sich jeder einigen könnte. Sie würden ihr Computersystem in der Lage machen, dieses Dokumentformat zu lesen. HTML steht für Hypertext-Markup-Sprache. Und dann einigten sie sich auch auf etwas namens http http ist der Weg für die Computer, alle miteinander zu reden? Sie müssen dieselbe Sprache sprechen. Wenn ich hier in Pasadena bin und mit einem Computer in New York spreche und das über die Luftwellen über das Internet schicke und sie nicht wissen, wie sie miteinander reden sollen, bekomme ich nicht die Akte, die ich brauche. Sie müssen also dieselbe Sprache sprechen. Diese Sprache, die sie erstellt haben, ist HTTP-Hypertext-Übertragungsprotokoll. So bemerken Sie HTML http. Diese beiden wichtigsten Dinge, die sie geschaffen haben, um das Internet funktionieren zu lassen, sind Schlüssel der Interoperabilität. Beide haben am Anfang H t Hypertext, also diejenigen das Übertragungsprotokoll, die Markup-Sprache oder das Dokumentformat, aber beide sind Hypertext. Was ist Hypertext? Nun, das ist die zweite wichtige Sache im Internet. 6. Hyperlinks: Hypertext bedeutet jenseits des Textes. Es ist mehr als nur normaler Text, der Hyperlinks und andere Interaktivität enthält. Früher gab es alte Terminals, wo man tatsächlich auf den Monitor tippen konnte, um einem Hyperlink zu folgen , und es würde Sie zu anderen Teilen des Dokuments oder zu anderen Dokumenten führen. Ah, Hyperlink ist etwas, das einen Teil des Internets mit einem anderen verbindet. Das Internet kann man sich also als ein großes Netz mit all diesen verschiedenen kleinen Ankerpunkten vorstellen . Und jeder Ankerpunkt hat Links Hyperlinks, Hypertext, die zu anderen Teil kleine Anker gehen, kleine Teile des Internets. Also haben Sie einen Punkt hier. Zeigen Sie hier, zeigen Sie hier. Hier, hier, hier, hier, hier. Und diese Punkte sind alle miteinander verbunden. Und was macht das Internet großartig ist, dass nicht nur dieser eine Punkt alle diese anderen Punkte verbunden ist , sondern Sie haben andere Punkte darin, die alle miteinander verbunden sind, und das ist so beginnt, wie ein Web aussehen. Aber in Wirklichkeit sieht es eher wie ein großes neuronales Netzwerk aus. Es ist eigentlich nur irgendwie chaotisch, und der Grund dafür ist, dass niemand wichtiger ist als jeder andere Punkt, jeder Ankerpunkt im Web ist gleichermaßen in der Lage, auf jeden anderen Teil des Web zuzugreifen. Sie haben also Hyperlinks, die alle verbindenden Threads und dieses Web oder dieses Netz verbinden , und sie sind überall verbunden. Nun, das war eigentlich nicht sehr intuitiv. Es war eine Erfindung von Tim Berners Lee, die, gut durchdacht war, um sicherzustellen, dass das Internet interoperabel sein würde. Und das würde die Hyperverknüpfung all dieser verschiedenen Anker erleichtern . Die alte Art, dies zu tun, könnte so etwas wie Connect to your Server sein. Das ist dein Erreichen, das in einem anderen Teil der Welt liegt. Und du weißt, du tippst die Nummer von was auch immer ein, dann musst du dich einloggen. Dann müssen Sie durch die Verzeichnisstruktur des Computers navigieren. Dann müssen Sie die Datei finden und anfordern, und dann wird sie über das Internet an Sie gesendet, und dann können Sie sie öffnen. Hoffentlich ist es in einem Format, das Ihr Computer lesen kann. Also heutzutage, mit Ihnen oder sonst ist es vereinfacht. Also setzen Sie einen Link für ein U L und es ist genau so. Es gibt den Domainnamen, der Ihnen mitteilt, mit welchem Computer Sie sprechen sollen. Und dann haben Sie eine beliebige Ordner- oder Verzeichnisstruktur und Sie haben den Dateinamen hier , und es ist alles nur eine Gruppe genau dort, und es tut alles für Sie. 7. Plaintext vs. Rich Text: Wenn wir also eine Webseite erstellen wollen, können wir nicht einfach Microsoft Word öffnen und etwas darin schreiben und speichern und erwarten, dass es im Web funktioniert, weil es interoperabel sein muss. Also, wenn du jemals versucht hast, das zu tun, ähm, dann merkst du es nicht. Aber Microsoft Word verwendet ah Markup-Sprache. Es hat eine eigene Formatierung. Es ist keine Hypertext-Markup-Sprache. Es ist Microsoft, was auch immer meine Auszeichnungssprache ist. Also, wenn Sie versuchen, in Microsoft Word zu schreiben, zum Beispiel mit einer neuen Markup-Sprache, dann haben Sie den Markt Bling von Joyriding in die Markup-Sprache von Microsoft codiert . Und dann, wenn Sie es dazu dienen, einen Browser oder etwas über das Internet zu mögen, wird es zuerst, es wird. Http wird sagen, dass dies ein Microsoft Word-Dokument ist, und so wird der Browser wahrscheinlich nicht einmal versuchen, es zu lesen. Aber wenn es so ist, wird es wirklich verwirrt sein, weil es kein Wortdokument gibt. Es kennt nur HTML. Was wir also tun müssen, ist sicherzustellen, dass selbst wenn wir gutes HTML schreiben, es nicht in ein anderes codiert werden kann. Sprache muss codiert werden, während wir sie eingeben, so dass Sie finden müssen, was als Nur-Text-Editor bezeichnet wird 8. Fortgeschrittene Plaintext – Brackets: Also, wenn Sie in Windows sind, ist das einfach. Öffnen Sie einfach den Notizblock. Wenn Sie es nicht finden können, drücken Sie die Windows-Taste sind Typ Note. Pad-Hit. Geben Sie ein. Wenn Sie sich in Mac befinden, können Sie jetzt Text an ihm öffnen. Auf dem Mac ist es ein bisschen etwas. Es ist ein bisschen schwieriger, da Sie sicherstellen müssen, dass Sie als Nur-Text und nicht als Rich-Text speichern . Dies ist eine Unterbrechung von der Zukunft. Ich schlage jetzt vor, dass ein einzelner intelligenter Texteditor seit der Sex-Hervorhebung hatte, und es heißt Klammern. Das wird also viel besser sein als das, was ich vorher vorgeschlagen hatte. Und deshalb komme ich zurück und überprüfe diesen Kurs. Wenn Sie also in Windows oder Mac sind, sollten Sie in der Lage sein. Teoh, laden Sie diese goto Klammern die i O und kommen Sie auf diese Website und legen Sie den Knopf. Und das ist Dies ist, was es in OS X aussah. Sobald es heruntergeladen wird, doppelklicken Sie darauf, um es zu öffnen. Ich habe diesen Prozess durchgemacht und dann, wie immer bei Max-Sachen, ziehst du ihn in deinen Anwendungsordner unter Windows. Der Prozess ist sehr ähnlich. Haben Klammern, nicht meine eigenen, und Sie klicken auf meine Schaltfläche nach unten warten, bis es heruntergeladen wird, und Sie werden voran gehen und doppelklicken Sie darauf. Klicken Sie auf, laufen und lassen Sie die Rate Fehler Ort abkühlen. Möchten Sie es installieren? Geh weiter und öffne es auf. Es sieht so aus, sowohl auf Windows als auch auf Mac, wenn die großartigen Dinge über Klammern ist, dass, Sie es verwenden, es einige wirklich erweiterte Funktionen zu tun. Also empfehle ich Ihnen dies definitiv gegenüber jedem anderen Technologie-Center. An dieser Stelle ist es für Web-Entwickler im unteren Bereich entwickelt. Hier können Sie auswählen, welche Art von Code verwendet wird. Also, wenn Sie sagen, dass innerhalb von acht E-Mail-Erweiterung, dann wird es sein. Wissen Sie, wenn Sie CSS für Nur-Text oder etwas anderes tun, wird dies automatisch erkennen. Und wenn ich HTML-Tags hier eintippe, macht es einige automatische Vervollständigung für mich und einige andere coole Dinge wie das. Ihre ganze Arbeit verunreinigt Luft hier auf der linken Seite. Die volle haben Sie geöffnet wird hier sein, und dann können Sie Plug Ins und andere Dinge mit dieser Schaltfläche installieren. Das ist also ein wirklich cooles Werkzeug, das wirklich mächtig ist. Und doch ist es einfach auf ziemlich leicht zu verstehen, wenn Sie gerade erst anfangen. Installieren Sie also unbedingt Klammern, bevor Sie fortfahren. Dies wäre ein wirklich nützliches Werkzeug für Sie, aber das Wichtigste ist, dass Sie in der Lage sind, ein Dokument zu verfassen und es im Nur-Text-Format zu speichern . Also wird es standardmäßig die Erweiterung dot txt haben oder Sie oder was wir tun werden, ist, warum sollte es HTML geben . Also, bekomme das wird positiv, positiv eingestellt . Erhalten Sie uns nicht und kommen Sie dann zurück, wenn Sie in der Lage sind, zu überprüfen, dass Sie im Klartext speichern . 9. Einfügen von Plaintext in einem Browser: Okay, Sie haben Ihren Texteditor installiert, und Sie haben herausgefunden, wie es funktioniert und Nur-Text-Modus. Also, hier ist, was ich will, dass du tust. Ähm, richtig. Hallo. Welt in Ihrem Dokument. Ähm, und du könntest das später erweitern. Versuchen Sie jetzt nicht, einen Code einzugeben. Es ist genau richtig. Nur-Text, rechts. Hallo, Welt. Und wie sparen Sie, als ob Sie es bereits gespeichert haben? Speichern Sie es an einem anderen Ort. Also speichern Sie es unter, ähm Ihre Datei und wählen Sie sie aus. Name gefunden. Das ist wichtig. Sie müssen wissen, wo Sie es speichern, weil Sie die Datei später verschieben müssen. Daher empfehle ich, es direkt auf Ihrem Desktop zu speichern oder zu erstellen. Eigentlich noch besser erstellen Sie einen Ordner auf Ihrem Desktop namens Was? Erstellen Sie 101 Einheit eins und speichern Sie es in diesem Ordner. Geben Sie ihm einen gefundenen jährlichen Denken Sie daran und geben Sie ihm die Erweiterung dot html. Stellen Sie nun sicher, dass es sich nicht um einen ausstehenden versteckten Dateinamen handelt. Erweiterungen auf sie so. Txt am Ende. Da du im Klartext speicherst, sobald du das herausgefunden hast, wirst du das speichern. Es wird gespeichert, ist Ihre Datei. Benennen Sie den HTML-Code Es wird keine versteckte Datei geben. Erweiterungen werden nicht in irgendeiner anderen Form von Eleganz mit Klartext gestorben html gespeichert werden. Okay, jetzt bedenken , Sie, wo Sie es hinstellen. Öffnen Sie Ihren Opener, Browser, Jeder Browser, Safari, Chrome, Firefox, Internet Explorer. Und entweder verwenden Sie den offenen Dialog wie Datei-Open-Steuerung. Was auch immer Ihre Verknüpfung für Ihr Betriebssystem ist oder wenn Sie den Ordner geöffnet haben, können Sie einfach ziehen, klicken Sie auf die Datei, die Sie gerade erstellt haben. Ich sagte Ihnen, erinnern Sie sich, wo es in Ihrem Browser nur in eine leere neue Seite waas und der Browser sollte , wenn Sie es richtig gemacht haben, nur die Klartext-Datei öffnen. Sie haben diese Plan-Text-Datei. Es ist jetzt geöffnet und zeigt genau das an, was Sie geschrieben haben. Es sollte nicht anders aussehen, es sei denn, Sie haben einen verrückten Code geschrieben. Es sollte nur einfacher Ebenentext sein. Und wenn Sie in der Adressleiste des Browsers schauen, sollten Sie Ihren Dateinamen 0,80 mil sehen. Und dann vorher, in der URL, haben Sie alle Standortinformationen und Sie werden feststellen, dass es mit etwas wie Datei beginnt oder es nicht mit dem normalen Zeug beginnt. Es sieht nicht aus wie ein normales Web du Welt. Es gibt keine Domäne, zum Beispiel, ist eine lokale Datei. Also, aber damit machen wir in einer Minute etwas. Ich hoffe, du hast dich nicht angezogen. Schließen Sie Ihr Technikzentrum nicht. Wenn Sie dies tun, können Sie es speichern und offen halten. Also hier ist A Hier ist der Trick, den Sie immer tun sollten, wenn Sie komponieren und bearbeiten, ist ein Fenster, das Ihr Ergebnisfenster und ein Fenster, das Ihr Bearbeitungsfenster ist . Also, wenn Sie Ihren Nur-Text-Editor noch geöffnet haben, legen Sie das in die Hälfte Ihres Bildschirms und setzen Sie Ihren Browser und die andere Hälfte des Bildschirms. Sie können ihn beide gleichzeitig ansehen. Und wenn Sie die Dinge nicht geändert haben, gehen Sie jetzt zu Ihrem Nur-Text-Editor und nehmen Sie eine Änderung vor. Geben Sie etwas Neues, und dann speichern Sie, nicht sagen, dass Speichern Sie es an der gleichen Stelle, weil Sie es bereits geöffnet haben. Schließen Sie nichts jetzt Tab über oder wechseln Sie zum Browser und finden Sie die Aktualisierungsschaltfläche. Ah, Abkürzung in Windows ist fünf. Es ist ein wenig wie Recycling suchen Symbol drücken aktualisieren und Sie werden sehen, dass die Seite aktualisiert mit dem, was Sie gerade in Ihrem Textcenter eingegeben haben. Das ist also die Essenz einer Webseite. Sie haben gerade eine Webseite erstellt. Ähm, es ist keine Webseite, weil sie nicht im Internet ist. Wenn ich, wenn du das mit mir teilen wolltest, könntest du mir nicht einfach ein U R L. geben und dann könnte ich es sehen. Du müsstest mir eine ganze Kopie der Akte schicken. Das ist also nicht ganz das Internet, aber es ist eine Webseite. Es ist eine Seite, die vom Browser geöffnet wird, und es ist Klartext, den wir später mit Cold machen werden. Aber es ist, ähm, es wird vom Browser im HTML-Format geöffnet, eigentlich, eigentlich, also tun Sie das. Tun Sie etwas wie Hit Rückkehr ein paar Mal, versuchen Sie, eine Liste zu erstellen und dann aktualisieren Sie sie und sehen Sie, was passiert. Sie bemerken, dass es nicht ganz das ist, was Sie erwarten. Es gibt keine Formatierung, die erlaubt ist oder versuchen, sechs Leerzeichen zwischen einem Wort eso zu setzen. Etwas Interessantes ist los. Wir müssen es selbst formatieren. Wir werden das von Hand tun, aber im Moment ist es wichtig zu wissen, dass Sie gerade eine Webseite 10. Frontend vs. Backend: Wir denken daran, wie wir suchen nach der Verbindung zum Server, der sich im Internet befindet, das ist das Internet. Man könnte es sogar so vorstellen wie in der Wolke irgendwo am Himmel. Und der Server ist einfach immer da und wartet darauf, zu dienen. Wenn der Server also das Internet ist und wir hier unten auf der Erde sind, dann sind wir der Kunde. Der Client ist derjenige, der die Dienste des Servers empfängt. Der Client ist also die Vorderseite der Gleichung. Der Server ist die Rückseite oder die Internet-Seite. Nun, da der Client Sie mit Ihrem Computer oder jeder andere, der seinen Computer verwendet, um eine Verbindung mit dem gleichen Server herzustellen. Das ist die Kundenseite. Und sie werden Dinge wie Browser anstelle von Serversoftware verwenden. Und wir nennen die Client-Seite Vorderseite irgendwie, weil es der Teil ist, den wir sehen, und wir nennen die Serverseite Rückseite, weil der Teil, den wir nicht sehen, es ist auch, wie wir es denken , ist am Himmel. Die Metaphern Luft ein wenig verwirrend, aber Vorderseite ist das, was direkt vor dir hinten oder Backend ist, was im Internet normalerweise so Dinge passiert auf dem Server oben in der Wolke oben in den Himmel. Das ist Back-End-Zeug, das direkt auf Ihrem Computer passiert, auf Ihrer Festplatte im Speicher Ihres Computers und RAM und auf Ihrem Monitor, der Front-End ist. Wenn also ein Client eine Verbindung zu einem Server herstellt, kommuniziert er mit http, der Client fragt den Server nach einer HTML-Datei, und der Server sendet es nach unten an den Client Wir nennen diesen Download. Das Hochladen wäre umgekehrt, wenn der Client zur Datei bis zum Server geschickt wird, was die meisten Leute nicht tun, es sei denn, Sie sind ein Web-Entwickler und Sie sind alle Web-Entwickler . Am Ende dieser Lektion lernen wir, wie man hochlädt. 11. FTP: Sie haben eine Webseite. Wie willst du es ins Internet bringen? Wir brauchen, ah, ein anderes Protokoll nicht für Hypertext, sondern um Dateien in die Cloud zu übertragen, um Dateien hochzuladen . Dies wird als Dateiübertragungsprotokoll bezeichnet. Es ist sehr ähnlich zu http in vielerlei Hinsicht, da es interoperable Einrichtungen ist, Kommunikation zwischen Geräten zwischen Software und Computern. Aber sein Zweck, wie es sagt, ist es, eine Datei ins Internet auf einen Server zu übertragen oder Ah, guten FTP-Client herunterzuladen . Seine Cyber-Ente. Gehen Sie zu Cyber Ente Punkt c h. Seien Sie vorsichtig. Du tippst nicht cyber duck dot com. Es ist Cyber Ente Dot ch. Scrollen Sie nach rechts und Sie sehen die Download-Längen. Dies funktioniert auch für Windows. Gehen Sie weiter und klicken Sie auf die ZIP-Datei und warten Sie, bis sie heruntergeladen wird. Nun, das ist ein wenig interessant. Der Download ist eine ZIP-Datei, und Sie können es in Ihrem, äh, Download-Ordner direkt hier sehen äh, . Und wenn Sie hier darauf klicken oder in Ihrem Download-Ordner doppelklicken, wird es zuerst entpackt. Jetzt gibt es nicht automatisch das kleine ah kleine Dienstprogramm, um es in Anwendungen zu ziehen . Sie müssen also Ihren Anwendungsordner finden und ihn von hier in Anwendungen ziehen. Ich habe hier eine Abkürzung. Ich habe es fallen gelassen. Nun, das erste Mal, dass Sie es öffnen, kann es einige Abhängigkeiten geben, die installiert werden. Ich ziehe das auf meinen Desktop, oder du möchtest es auf dein Dokument ziehen, um eine Abkürzung zu machen. Es gibt auch ein paar Lesezeichen hier am Anfang, um Ihnen einige Beispiele zu geben. Aber diese sind nur verwirrend, und Sie werden sie sowieso nicht verwenden, also gehen Sie vor und löschen Sie sie. Jetzt haben Sie Cyber Ente installiert. Dies wird auf dem PC ähnlich sein. Es gibt ein paar Möglichkeiten, eine Verbindung herzustellen. Zunächst könntest du hier oben eine schnelle Verbindung herstellen. Sie können hier eine offene Verbindung herstellen, aber ich schlage vor, das erste, was Sie tun, ist ein Lesezeichen zu erstellen. Es wird sehr ähnlich sein, eine offene Verbindung mit diesem zu machen. Also gehen Sie voran und klicken Sie auf diese kleine Schaltfläche unten unten. Verlassen Sie das Plus, um eine Verbindung hinzuzufügen. Siehst du, ich habe das gerade gemacht und es hat es erschaffen. Wird das löschen und neu starten bekommt einen Klick dieses kleine Plus und hier haben Sie ein neues Verbindungs-Lesezeichen. Also geh weiter und gib ihm einen Spitznamen. Ich werde das Lauren und Brenton nennen, weil die Website, die ich für diesen Kurs mache Lauren Brenton dot com ist. Nun ist Ihr Server, das ist der Name Ihrer Domain. Jetzt gibt es einen Trick hier können Sie tatsächlich, da Sie auf Schrei Leaf Server gehostet, Sie könnten schreien Blatt dot com Putts Leif dot com tun, aber es wird mehr Spaß und leicht zu erinnern, wenn Sie in Ihrem Namen eingeben Ihren Domain-Namen, also geben Sie Ihren Domainnamen ein. Hier ist meine Lauren und Brenton dot com. Also beachten Sie, dass ich www nicht in die Front gestellt habe und ich besonders nicht http in die Front gestellt habe. Dies ist kein Hypertext-Übertragungsprotokoll. Es ist FTP. Wenn du wirklich wolltest, könntest du die URL erscheinen sehen, sagt der FTP dort oben. Du könntest das tun, aber lass es einfach so. Nur die Domain und und verlassen Sie den Port bei 21 dann setzen Sie den Benutzernamen. Woher wissen Sie also Ihren Benutzernamen? Gehen Sie zu den E-Mail-Informationen, die Ihnen gegeben wurde, so Hier sind die Informationen, die ich mir eine E-Mail geschickt . Also schon habe ich in der Domäne. Nimm jetzt den Namen hier, er ist l und B. Also werde ich diese End-Paste beschleunigen. Nun, ich hoffe, dass dies hier mehr Optionen erweitert wird, weil es die Dinge viel einfacher für Sie machen wird , wenn Sie mit einem Standardpfad von www beginnen und ich werde Ihnen zeigen, warum in einer Sekunde. Aber gehen Sie weiter und setzen Sie den Standardpfad von www. Der Rest davon. Sie können irgendwie in Ruhe gehen. Okay, also geh jetzt und schließe das Passwort, das du in einer Minute erhältst. Also, jetzt habe ich dieses Jahr. Jetzt können Sie das Buchzeichen öffnen, und es wird Sie nach dem Passwort fragen. Also kopiere ich das Passwort und füge es ein, und ich werde es dem Schlüsselbund hinzufügen lassen. Eigentlich Eigentlich lässt es mich das nicht tun, aber wenn du ein Setup bist, kannst du dich vielleicht daran erinnern. Melden Sie sich nicht anonym an. Also verwenden Sie den Namen ist dieses Passwort, das ich gerade eingefügt habe. Daraus werden Sie feststellen, dass der Nameserver in der Kontakt-E-Mail dafür nicht ins Spiel kommt . Ich bin also nicht zu sagen, dass dies nicht noch einmal angezeigt wird und fortfahren, da ich dies nicht brauche, um eine gesicherte FTP-Verbindung zu sein . Alles klar, es ist verbunden. Also denken Sie daran, dass ich Ihnen gesagt habe, www für den Startpfad einzugeben. Das liegt daran, wenn Sie das nicht getan hätten, hätten Sie tatsächlich im Stammverzeichnis gestartet, damit Sie in Ihren Verzeichnissen navigieren können , entweder mit diesem oder damit. Also bin ich gerade zu meinem Root-Verzeichnis gegangen, indem ich auf diese Schaltfläche klicke. Und so wäre das, was Ihnen vorgestellt worden wäre, wenn Sie nicht in dieses kleine www eingegeben hätten . Also bist du in das eingegangen. Sie haben in diesen www-Ordner geladen, der genau wie der Ordner ist, in dem sich alle öffentlichen Web-Sachen befinden. Es ist eigentlich ein Alias oder eine Abkürzung zu öffentlichen Unterstrichen. HTML. Es ist das Gleiche, was du bemerkt hast. Sie beide haben dieses c g. Ich war da drin. Wenn ich öffentliche HTML öffne, gehe ich an den gleichen Ort ist, wenn ich Www öffne. Diese anderen sind Dinge, über die Sie sich keine Sorgen machen müssen. Sie kümmern sich größtenteils um sich selbst, also werde ich wieder ins Www gehen. Und die Belagerung, die ich war, ist etwas, das irgendwie ein Rückschlag ist. Es ist ein wenig archaisch. Wir brauchen es nicht, also werde ich es löschen. So löscht man also eine Datei? Ein FTP. Nun, wie laden Sie hoch? Lassen Sie uns das aus dem Weg bewegen und öffnen Sie die Hallo Punkt HTML-Datei, die ich hier habe. Das ist also die Datei, die ich hochladen möchte. Es ist in diesem Web Making-Ordner auf meinem Desktop, und es ist ziemlich einfach. Das ist der Ort, in den ich ihn schleppe , der mit Lauren und Brenton dot com slash korreliert und dann wird alles, was ich hier reinstelle , direkt da sein. Dies ist im Grunde die Wurzel der Domain, also ist das ein wenig verwirrend. Das ist, wenn ich hier rauf gehe. Dies ist die Route im Backend. Aber das ist wirklich die Wurzel Www. Also, um das da reinzulegen und jetzt wird es hochgeladen. Es zeigt mir die ganze Information, die es benötigt, um hochzuladen, und es heißt „Fortsetzen“, stoppen Sie all diese verschiedenen Kontrollen, die ich habe. Und dann, wenn es fertig ist, sagt es mir, Hochladen abgeschlossen. Und jetzt kann ich sehen, dass die Akte da ist. Das ist also auf meiner lokalen Festplatte in diesem Ordner hier. Hallo Punkt html. Nun ist dies die Hölle oda html auf meiner Website meine Lauren und Brenton dot com Website. Also lassen Sie uns tatsächlich einen Browser öffnen und überprüfen und sehen, ob wir Hallo Punkt HTML beschränkt. Okay, hier ist Krume. Ich werde meinen Domainnamen Lauren und Brenton dot com eingeben. Also, wenn ich einfach hier gehe, ohne diesen Hello Punkt HTML einzugeben, wird es Sie zu einem Index bringen. Dieser ist immer sichtbar. Aber jetzt ist es iss, so dass ich einfach darauf klicken konnte, um zu meinem ausgehöhlten einen HTML zu bekommen. Aber ich werde weiterhin die ganze Sache eingeben. Lauren Brenton Punkt com Vorwärts Schrägstrich Hallo Punkt html Hit. Geben Sie ein und da ist mein Dokument. Das hier ist dieses Dokument. Jetzt wollen Sie etwas Interessantes hier sehen, es ist im Internet. Lassen Sie uns einen anderen Tab öffnen und öffnen Sie uns in Miss Tab, die gleiche Datei. Aber von meiner Festplatte, um es hineinzuziehen. Siehst du also den Weg hier? Dies ist der Pfad zu meiner Festplatte auf meinem Mac, Ihre Dateibenutzer Brenton Desktop Web, so dass man ein one hello zu HTML. Es ist die gleiche Datei wie die hier im Internet. Ein Fräulein Tab. Lauren Brenton dot com Schrägstrich Vologda html So sind sie anders. Sie sind anders, aber die gleiche Datei befindet sich jetzt an zwei Stellen. Wo wäre eigentlich richtiger zu sagen, dass dies eine Kopie dieser Datei ist? Also hier ist etwas, das es wichtig ist, verstehen Sie? Wenn ich diese Datei auf meiner Festplatte bearbeite, wird sie erst im Internet aktualisiert, wenn ich sie erneut hochgeladen habe. Also lassen Sie uns voran und tun, dass öffnen Sie mit Text dran. Hier ist meine Akte. Ich habe ein wenig HTM Oh, aber ich werde hallo sagen. Dies ist eine lokale Änderung und speichern. Also habe ich gerade eine Änderung an dieser Datei vorgenommen. Nun, wenn ich zu meinem Browser gehe, nachdem ich alles habe, was ich tun muss, um dies zu speichern, gehe zu meinem Browser und gehe zum lokalen Tab und lade neu und du siehst hallo. Dies ist eine lokale Änderung, um etwas anderes zu tun. Lauren Brenton dot com Aktualisieren. Es wurden keine Änderungen vorgenommen. Warum? Weil ich es nur auf meiner Festplatte geändert habe. Wenn ich die Änderung hier im Internet sehen möchte. Ich muss diese Datei ziehen, um diese Datei im Internet durch FTP zu ersetzen, wurde wieder hochgeladen. Es wird mich fragen, Willst du überschreiben? Und ich klicke? Ja, ich möchte überschreiben. Und jetzt wird es wieder hochgeladen und es hat eine weitere Kopie gemacht. Das ist das alte Exemplar außer Kraft gesetzt. Also, jetzt wird dieser aktualisiert. Also gehen wir zurück zum Fenster und aktualisieren. Lauren Brenton dot com hallo dot html Und jetzt ist die lokale Veränderung auf meiner erschienen. 12. Die Suche zum Verständnis: die Welt um uns herum ist voll von Inhalten, und wenn wir es betrachten, sind unsere Gehirne in der Lage, sie in sinnvolle Dinge verarbeiten konnten Sinn eines Topfes zu machen. Wenn wir es sehen, gibt unser Gehirn ihm den Sinn Topf. Wenn wir uns ein Dokument ansehen und ein paar Worte lesen konnten, waren in der Lage, die Überschrift zu lesen und Sinn daraus zu machen und ihm die Bedeutung zu geben. Das ist die Überschrift. Leider haben Computer nicht diese angeborene Fähigkeit, die wir haben. Wir müssen also eine spezielle Sprache verwenden, die wir HTML nennen, um dem Inhalt, mit dem Browser und Computer arbeiten, Bedeutung zu verleihen . Also, was? Ein Computer schaut sich eine Webseite an und lädt sie. Es muss wissen, dass der Header ah, Header ist . Es muss wissen, dass ein Link ein Link ist, so dass, wenn Sie darauf klicken, kann er Sie dorthin bringen, wo die Länge gehen sollte. Wir verwenden also eine spezielle Sprache, um dem Inhalt einer Webseite diese Bedeutung zu verleihen, und die Art und Weise, wie wir es tun, ist sehr ähnlich, wie Sie jemandem helfen könnten, der kein Englisch kannte , der in Ihrem Haus lebt, um die Welt um sie herum zu verstehen. Also, wenn Sie einen Devisenschüler hatten, der kein Englisch sprach, was Sie tun könnten, ist, diese kleinen Tags zu bekommen und um Ihr Haus zu gehen und alle verschiedenen Teile Ihres Wohnzimmers in Ihrer Küche zu markieren und alles mit englischem Wort zu beschriften so dass Ihr Devisenschüler kann nicht, wenn Sie nach einem Wasserkocher fragen. Oh, ich erinnere mich, dass es derjenige war, der das Tag darauf hatte, dass Kettle ähnlich wie ein HTML sagte. Wir werden auf diese Haftnotiz schreiben, den Namen dessen, was wir markieren, damit, wenn wir es jetzt auf den Wasserkocher legen, jeder , der dieses Etikett lesen kann, weiß, dass dies ein Kessel ist. HTML ist insofern ähnlich, als der Browser alles verstehen kann, was wir ein Tag setzen, weil es dieses kleine Tag lesen kann. Also müssen wir alles in der Küche beschriften, das Kabinett und alles darin, jedes einzelne Regal, jedes einzelne Regal, all das Zeug, das auf unserer Arbeitsplatte ist, und dann jeden einzelnen Topf eins nach dem anderen, 13. Anatomie einer Website: Bisher haben wir ein Bild des Internets gezeichnet, das einen Client, einen Server und eine Sprache enthält . Aber wir haben nicht wirklich viel darüber gesprochen, was eigentlich hin und her verlegt wird . Im Moment, was Sie erstellt haben, ist reine Inhalte oder es ist nur eine Nur-Text-Datei, Richtig, Also haben Sie diese Nur-Text-Datei ohne Code hochgeladen, aber Sie haben gerade diesen Klartext fiel und es hat nur Wörter. Und wenn Sie zum Earl Ihrer Domain gehen, es alt heruntergeladen und zeigen Sie es in einem Browser, und wir haben es gesehen. Das ist also nur zufrieden. Das ist es, was wir suchen, wenn wir das Internet nutzen. Wir kümmern uns normalerweise nicht sehr um all die überflüssigen zusätzlichen Sachen. Uns ist es egal, was gekämpft wird. Uns ist egal, wie der Code aussieht. uns egal, ob es Es istuns egal, ob eswirklich hübsch aussieht. Der Inhalt ist der Kern. Alles andere ist eine zusätzliche Ebene, die zur Erfahrung beiträgt, aber nicht unbedingt die Verwendung des Web unerlässlich ist. Ihre Seiten sind tatsächlich gut genug, um Inhalte an Menschen zu kommunizieren, obwohl sie nur Klartext sind. Aber wenn wir eine andere Ebene hinzufügen wollten. Wir könnten HTML-Code verwenden, um ihm eine Bedeutung zu geben. So wird HTML dem Inhalt eine gewisse Struktur und Bedeutung verleihen. Es befasst sich mit dem Substantiv Ihrer Webseite. Es definiert nur, was die verschiedenen Dinge sind, Was jetzt sind sie. Es steht. Das ist ein Link. Das ist Ah, Header. Es versucht nicht, etwas mehr zu tun, als nur das grundlegende Substantiv Vokabular zu haben, um Ihrer Kommunikation der Inhalte ein wenig mehr Bedeutung zu geben . CSS befasst sich mit Additiven der Seite. Es handelt sich um die Art und Weise, wie es aussieht und sich anfühlt. Es beschreibt nicht den Inhalt, nicht den Inhalt. Nichts gehört jetzt, es beschreibt den Stil oder, wie wir es nennen, im Keil über die Web-Entwicklungswelt. Die Präsentation geht in und es ist nicht wirklich direkt in den Inhalt eingehakt. Aber es hakt in den HTML, und es verwendet die verschiedenen HTML-Tags, die verschiedene Teile der Seite definiert haben. Und dann gibt es diese verschiedenen, aussagekräftigen Teile der Seite spezifische Möglichkeiten zu suchen, damit es den Fonds einstellen kann. Es kann die Farbe einstellen. Es kann diese Größe in der Form festlegen, die Sie auf einer Webseite gesehen haben, die eine bestimmte Weise aussieht. Die Art, wie es aussieht, wird mit CSS festgelegt. CSS hat vollständige Macht über sie. CSS beschäftigt sich nur mit diesen Additiven. Wir müssen irgendwann Verben verwenden, oder? Wenn Sie also Webseiten sehen, die interaktiv sind, mit denen Sie Dinge tun können , kommt Javascript ins Spiel. So kommt JavaScript ein und es macht eine Webseite interaktiv. Wir unterscheiden zwischen statischen und dynamischen Webseiten. Eine statische Webseite wäre nur eins ohne Skripte, die nicht interagieren oder sich ändern. Sie laden es, und egal, was Sie tun, Sie können die Seite nicht ändern. Das meiste, was Sie tun könnten, ist einen Text hervorzuheben. Und, ähm, wenn Sie weiter laden, wird es immer genau die gleiche Seite sein, es sei denn, der Besitzer aktualisiert die Seite rechts, also ist eine dynamische Seite eine, mit der Sie interagieren können. Dinge bewegen sich um, Sie können auf Dinge klicken. Spiele können in Java-Skript geschrieben werden. Sie können Anwendungen haben, die in JavaScript geschrieben sind, und die meisten Webseiten sind heute sehr interaktiv, und Sie nutzen JavaScript stark. JavaScript befasst sich nur mit den Verben dieses Inhalts. Der letzte Teil ist Bilder und andere Medien, so dass Bilder und andere Medien der Inhalt in und für sich selbst sein können. Aber die meiste Zeit ist es Text passt den Inhalt und Sie nähen Bilder, Audio, Video und andere Medien in die Seite in die Mitte des Inhalts als eine Erweiterung für den Kontakt. Das enthaltene Medium ist eigentlich eine eigenständige Datei, und Sie haben diese auch vom Server herunterladen und dann in den Inhalt nähen . 14. Live-Bearbeitung mit ShiftEdit: für dieses im Session-Projekt. Wir werden Code immer wieder bearbeiten. Wir werden einen Texteditor verwenden, aber von diesem Punkt an im Kurs werden wir tatsächlich ein anderes Programm verwenden. Es war wichtig für Sie, die Textbearbeitung zu verstehen und für eine wirklich leistungsstarke Bearbeitung, Sie sollten immer noch die Texteditoren verwenden, die Sie auf Ihrem Computer installiert oder verwendet haben. Aber wir werden von nun an einen Cloud-Texteditor machen, um den Prozess für diese einfacheren Websites irgendwie zu vereinfachen . Das heißt also Shift at it shift edit dot net Gehen Sie, um es zu verschieben dot net Jetzt werden Sie feststellen, Shift at dot com ist verfügbar, um zu kommen, wenn Sie es eingeben, aber das ist nicht die gleiche Website. Gehen Sie nicht, um es zu verschieben Punkt com verschoben es Punktnetz. Sie können das Chrom und Sanktion installieren, aber, aber, ähm, Sie möchten das später tun, also gehen Sie vor und beginnen Sie, indem Sie auf den Link „Erste Schritte“ klicken. Dies ist ein kostenloses Konto, obwohl es offensichtlich Möglichkeiten gibt, dafür zu bezahlen. Aber Sie brauchen die bezahlten Konten nicht. Sie brauchen nur ein kostenloses Konto für den Moment. Jetzt im Anmeldeprozess. Sie können tatsächlich ein Konto mit ah erstellen, Drittanbieter-Konto. Wenn Sie beispielsweise bei Google zugeordnet sind,können Sie ein Konto erstellen,indem Sie Google click allow verwenden, und dann meldet es Sie an. beispielsweise bei Google zugeordnet sind, Wenn Sie beispielsweise bei Google zugeordnet sind,können Sie ein Konto erstellen, indem Sie Google click allow verwenden, Sobald Sie Ihr Konto erstellt haben, melden Sie sich an und rufen Sie diesen Bildschirm auf. Wenn Sie zuerst einen Willkommensbildschirm mögen, wird es sagen, dass der Zugriff ihn verschoben hat. Dies ist ein Bildschirm, auf dem Sie sein müssen. Dies ist also ein Online-Texteditor Combo FTP-Client. Okay, das wird irgendwie alles tun, was wir in der letzten Sitzung alle zusammen auf einmal gemacht haben. Es wird die Dinge vereinfachen. Es ist ein bisschen weniger mächtig, und es ist nicht so hilfreich, um Sie verstehen zu lassen. Das Konzept ist, warum hat nicht damit geführt. Also wollte ich, dass Sie verstehen, wie Sie dies zuerst manuell machen, aber das ist eine vereinfachte Art, dies zu tun. Also das erste, was Sie dio wollen, ist die Einrichtung Ihrer Verbindung zu Ihrer Website mit FTP, so Sie die Art und Weise, wie Sie tun, dass Sie auf dieses kleine Jahr Symbol klicken. Dann werden Sie in der Lage, eine Website zu wählen, nachdem Sie es so eingerichtet haben, jetzt gibt es keine Website hier, aber jetzt, um es zum ersten Mal einrichten klickt auf das Zahnradsymbol und wählen Sie dann neue Website. Und was jetzt? Dies ist dies die gleichen Kontoinformationen, die Sie in Ihrem FTP-Client vor. Also gehen Sie weiter und holen Sie sich Ihre E-Mail, die Ihre Shot Leaf Account-Informationen enthält, und geben Sie die Informationen hier ein. Es ist sehr ähnlich. Okay, also werde ich das hier überziehen. Und dann hier ist die E-Mail, die ich mir selbst geschickt habe. Also, natürlich kann ich das kleinste machen. Wir können beides gleichzeitig sehen. Ich gebe ihm einen beliebigen , Spitznamen,den ich für das Konto will. Also werde ich Lauren Brenton anrufen, den Server verlassen, FTP eingeben, das in Ruhe lassen und dann zur Domain gehen. Nun, das ist Ihre volle Domain hier. Und denken Sie daran, Sie können shout verlassen dot com verwenden, da Sie es auf Ihre Website zeigen, ist tatsächlich auf die Schuss Blattnamens-Server verwiesen. So wird das Sie mit dem gleichen Server Schuss verbinden lassen dot com oder Ihren Namen. Nimm einfach deinen Namen. Also minus Lauren Brenton dot com, einschließlich der Top-Level-Domain-Teil des Domain-Namens, so dot com dot net dot oder was auch immer, und dann gehen Sie vor und setzen Sie Ihren Benutzernamen. Dieser Benutzername ist der gleiche mit ihm, den Sie hier bekommen haben und dann pastoriert Kopieren und fügen Sie Ihr Passwort und gehen Sie vor und speichern Sie das standardmäßig. Nun, das Verzeichnis, in dem Sie auswählen können, mit welchem Verzeichnis Sie standardmäßig beginnen möchten. Also, ähm, Sie können das wahrscheinlich nicht ändern, bis Sie sich zum ersten Mal mindestens einmal angemeldet haben. Aber Sie werden zurückgehen und dies auf www oder öffentliche Unterstriche html setzen möchten, so dass Sie nicht jedes Mal zu öffentlichen Unterstrichen HTML navigieren müssen. Und dann ist dies das Web, das Sie sind. Lassen Sie das in Ruhe. Also gehen Sie vor und testen Sie die Verbindung, bevor Sie weitermachen. Wenn Sie so eine Luft bekommen, liegt das daran, dass Sie etwas falsch in eines dieser Felder eingegeben haben. Also habe ich gesagt, ich habe absichtlich das falsche Passwort eingegeben, also lass mich das korrigieren, und dann können wir weitermachen. Jetzt, wo Sie eine Verbindung hergestellt haben, können Sie gehen und das Startverzeichnis ändern. Ähm, du wirst nach www oder öffentlichem Unterstrich HTML suchen. Es gibt tatsächlich eine Eigenart mit der Art, wie das funktioniert, Sie können sehen, wie der www-Direktor in diesen längeren Namen umbenannt wurde. Also, diese Art bricht es tatsächlich. Es deutet darauf hin, dass dies eine Abkürzung ist. stattdessen Wählen Siestattdessenden öffentlichen Unterstrich html. Sie können sehen, wie dies funktioniert, indem Sie den öffentlichen Unterstrich HTML nicht auswählen, wie Sie das Standardstartverzeichnis verwenden. So tun Sie es nicht, wenn Sie sich einloggen Sie werden nicht mit all dem präsentiert und müssen es jedes Mal finden und navigieren Sie zu ihm. Öffentlicher Unterstrich html Gehen Sie nicht hinein. Nur den Ordner dort und wählen Sie den Ordner dort. Jetzt sind Sie dort verbunden und Sie können Ihre Verbindung speichern. Großartig. So können Sie sehen, dass ich mich eingeloggt habe. Lassen Sie mich das schließen. Jetzt bin ich mit meinem Server mit FTP direkt hier auf der linken Seite verbunden. Hier, ich habe einen Haufen von diesen Tabs, die sich weiter öffnen. Nun, dies ist eine Möglichkeit, eine neue Datei zu erstellen. Ähm, und du wirst mit HTML anfangen. Aber zuerst bemerken Sie, dass Sie Ihre Akte schon hier haben. Was auch immer du es genannt hast, es ist genau hier. Und hoffentlich haben Sie ihm die Punkt-HTML-Erweiterung gegeben. Dies ist eine Möglichkeit, die Dateien in der Cloud direkt zu bearbeiten , so dass Sie nicht das ganze Laden zwischen jeder Bearbeitung durchführen müssen. Wenn Sie also nur einmal darauf klicken, wird nichts passieren. Eigentlich, Soto bearbeitet es. Sie müssen entweder doppelklicken oder mit der rechten Maustaste klicken. Wenn du willst. Klicken Sie mit der rechten Maustaste, um zu bearbeiten, müssen Sie Fuß öffnen. Es ist ein wenig un intuitiv, und nicht einer von ihnen öffnet dies offen, sondern nur doppelklicken Sie darauf. Dadurch wird es geöffnet und Sie können die Datei sehen, die Sie zuvor hochgeladen haben. Also hier ist es. Hallo, Welt. Lass uns auf meine Website gehen, um zu sehen, was ich hier habe, nur um uns zu erinnern. Also hier ist Lauren Brenton dot com und da ist die Akte. Und denken Sie daran, Aiken gibt Schrägstrich Hallo, dass html und ich kann mein Dokument dort sehen. Okay, jetzt habe ich dieses Fenster geöffnet diesen Tab und diesen Tab mit Thea mit der Datei in der Cloud bearbeitet wird, ich brauche das nicht mehr, also ziehe ich diese, ziehe das aus, so dass ich es in einem separaten Fenster habe, nicht nur eine separate Registerkarte. Und dann schaffe ich es, damit ich beide zur gleichen Zeit sehen kann, weil ich hin und her gehe. Also gehen Sie weiter und tun Sie das auch. Lass deine Fenster nebeneinander öffnen und ich schaffe es. In Ordnung. Also lasst uns weitermachen und etwas ändern. Also habe ich hier nur eine Änderung vorgenommen, und nein, ich habe es nicht gespeichert. Und ein kleines Sternchen erscheint hier, das anzeigt, dass eine Änderung am Dokument vorgenommen wurde und nicht gespeichert wurde. Also, ohne zu speichern, was passiert, wenn ich auf Lauren und Brenton dot com Nichts aktualisieren. Okay, aber wenn ich es speichere, hier ist das Speichersymbol. Sparen Sie Sparen. Hallo. Und jetzt verschwindet der kleine Asteroid. Nun, wenn ich auf meiner Website im Internet live aktualisieren, sehen Sie meine Änderung. Das ist also cool, denn durch das Speichern hat mehr als eine Sache getan. Es hat es gespeichert und in hat das ftp alles für mich gemacht und es hat alles verbunden. Und es hat den Prozess viel vereinfacht. So können Sie sich dies als Live-Editor vorstellen, Live-Website-Editor, Änderungen vornehmen 15. HTML-Syntax Lektion 1 – Tags: bevor wir weitermachen, müssen wir einen Schritt zurück gehen und uns ansehen, wie die Dinge tatsächlich mit Haftnotizen in HTML beschriften , wie wir es in meiner Küche gemacht haben. Also, was ich hier getan habe, ist, dass ich in einen Texteditor gegangen bin und den gesamten Inhalt meiner Küche geschrieben habe. Also oben mit der Spitze hier habe ich Küche und dann in der Küche sind all die Dinge auf meinem Tresen, die Weingläser auf der Theke. Der Messerblock befindet sich auf der Theke. Im Messerblock befindet sich ein Haufen Messer und dann alles andere die Regale in meinem Schrank und das Topfregal und die Töpfe. Also sagen wir zum Beispiel, ich muss dem Browser sagen, wie man versteht, dass dies Blume ist. Also können wir nicht einfach in einem Texteditor eine Haftnotiz nehmen und , sie auf die Blume kleben,weil dies ein Texteditor ist, das wird einfach nicht funktionieren. Also müssen wir einen Weg finden, um das Tag tatsächlich in den Text zu setzen. Also, wie würdest du vorgehen und das tun? Nun, eine Sache, die Sie versuchen können, ist, ein kleines Etikett von Hand zu erstellen. Weißt du, dass du diese kleinen Klammern hast und sie benutzen kannst, um ein Ding zu machen, das irgendwie wie ein Tag aussieht . Und jetzt wird es vielleicht der Browser wissen. Okay, das ist das Blumen-Tag, und es zeigt an, dass das Blume ist. Aber das Problem dabei ist, dass, wenn die Browser durchlesen, wie wird es wissen, dass dieses Blumen-Tag zu diesem und nicht zu diesem geht? Es ist ein wenig kompliziert in einem Texteditor, um eine Sache anzuzeigen, während Sie im wirklichen Leben einfach die Haftnotiz darauf kleben können In einem Texteditor müssen Sie herausfinden, wie Sie abgrenzen können, auf welche Sache Sie tatsächlich zeigen. Das wird also nicht funktionieren, weil es nicht wirklich anzeigt, wohin ich zeige. Es könnte irgendwie überall hingehen. Eine andere Möglichkeit, dies zu tun, könnte sein, etwas wie Okay zu tun, ich möchte darauf hinweisen, dass es genau hier ist. Wenn Sie also auf Ihrer Tastatur auf die Komma- und Periodentasten schauen, werden Sie kleine Pfeile sehen. Ich nenne ihn Karotten. Und wenn Sie die Umschalttaste drücken, könnten Sie hier einen kleinen Zeiger machen, und ich kann auf Blume zeigen und ich muss möglicherweise auch angeben, wann ich aufhören soll, auf Blume zu schauen , so dass der Browser nicht nur weiter auf Bohnen liest. Also werde ich eine andere Ära machen, indem ich auf die andere Seite des Mehls zeige. Also jetzt mit dieser kleinen Syntax, die Karotten oder die Pfeile zeigen, weiß ich, dass alles zwischen diesen beiden Pfeilen Blume ist. Uh, Hoppla. Außer nicht, weil ich das Tag in Jahr zwei schreiben muss. Das wird also auch nicht funktionieren, denn der Browser muss wissen, dass dies der Tag ist und nicht nur ein anderes Wort wie Zucker . Also brauche ich eine Möglichkeit, den Anfang des Tags zu markieren, sowie den Tag-Namen zu schreiben und darauf zu zeigen, wo das, was das Tag ist. Angabe beginnt und wo es endet. Die Art und Weise, wie wir dies in HTML tun, ist mit einem anderen dieser kleinen Pfeile. Also, jetzt sieht das irgendwie wie ein Tag aus, richtig. Es fängt an, sich zu formen. Es sieht so aus, als wäre es eine zusammenhängende kleine Sache wie diese, außer es ist spitz an den Rändern. Also, das ist, ah, eine gute Strategie, aber es wird nicht ganz funktionieren. Der Fehler dabei ist, dass es Probleme haben wird zu verstehen, dass dieser kleine Zeigerender das Ende von Mehl ist und nicht etwas, das hier begonnen hat. Sagen Sie, zum Beispiel, ich wollte darauf hinweisen, dass dies der ganze Zähler war, den ich so etwas wie diesen Zähler machen könnte und dann unten und der Zähler. - Richtig. Aber dann, was wir haben, sind die Browser wie, OK, das ist alles Zähler. Und dann, wenn es zu hören bekommt, was endet, ist der Zähler endet Orosz-Blume, der den Browser nicht weiß. Was wir also tun müssen, ist, wann immer wir einen dieser Endzeigepfeile haben, müssen wir angeben, was endet. Und die Art und Weise, wie wir das tun, ist, indem wir den Tag-Namen wieder Blume und dasselbe hier mit Bohnen eingeben. Nun, das reicht noch einmal nicht aus, denn woher weiß der Browser, dass ich hier nicht eine neue Blume beginne und dann alles zwischen hier und dann ist die nächste Schlussblume Blume. Also brauchen wir einen Weg, um einen beginnenden Blumenangriff von dem enden Blumen-Tag zu unterscheiden und was wir diesen kleinen Schrägstrich verwenden können Es ist wie ein Schrägstrich, der nein sagt, aufhören, das ist es nicht. Also Mehl und dann schneiden Sie kein Mehl mehr. Das ist also beginnende Blume. Das ist ein Ende der Blume. Das ist also der Tag, und es hat diese kleinen Pfeile, die darauf hinweisen, was zwischen dem Start- und End-Tag liegt, und alles, was zwischen diesen beiden Pfeilen steckt, ist Blume. Denken Sie also daran, dass es ein Schrägstrich und kein umgekehrter Schrägstrich ist. Die Schrägstriche nach vorne lehnen wie ein kleiner Kerl, der sich nach vorne lehnt, und es ist direkt neben den kleinen Karotten-Tags. Das ist also leicht zu merken. Geh einfach immer direkt neben ihn. Dies ist also die Syntax, wie man eine, ähm, eine Seite mit HTML markiert , um dem Browser mitzuteilen, was es bedeutet. Nun, natürlich, in echtem HTML, gibt es kein solches Tag wie Mehl und Bohnen. Das ist meine Küche, aber das wäre der Weg, es zu tun. Jetzt müssen wir hier runter. Denken Sie daran, ich habe dieses kleine schließende Tag von Zähler müssen hier runter und stellen Sie sicher, dass ich Stop-Zähler. Okay, jetzt, können Sie sehen, wie ich den Rest von uns markieren würde? 16. Exercise: wir werden tatsächlich etwas HTML schreiben. Also tun Sie das zusammen mit mir, während ich rede. Pausen, gehen Sie. Also, im Moment hat diese Seite ein Betonungswort. Dies ist eine Wolkenänderung. Nun, das ist nicht semantisch markiert. Und wie wir wissen, geht es bei HTML um Semantik. Also im Moment, wenn jemand, der blind ist, ein Bildschirmlesegerät verwendet, was der Bildschirmleser tun wird, wenn er diese Seiten lädt, wird es sagen: Hallo, Hallo, Welt. Dies ist eine Wolkenänderung und es wird nicht wirklich das Wort Wolke betonen. Also, was wir tun müssen, ist HTML zu verwenden, um dies zu markieren, so dass ein Screenreader weiß, dass es betont Text. Und ich werde sagen, das ist eine Wolkenänderung. Es wird tatsächlich betonen, dass es die Art und Weise ändern wird, die das Wort Wolke sagt. Okay, also der Weg, das in HTML zu tun, ist mit betone tag, das e. M. Also geh voran und lege e m um es jetzt. Außerdem ist es unhöflich, im Internet zu schreien, und alle Hauptstädte deuten darauf hin, im Internet zu schreien. Es sieht einfach klebrig aus. Also lassen Sie es uns auch Kleinbuchstaben machen. Nun, auf diese Weise ändern wir unsere Inhalte nicht mit Präsentationsmaterial und mit semantischen Sachen. Wir setzen die Semantik in den HTML, wo sie hingehört, anstatt in unseren Inhalt. Und dann können wir es später mit CSS so aussehen lassen, wie wir es wollen. wir werden später darauf eingehen, Aberwir werden später darauf eingehen, also nehmen Sie diese Änderung vor und speichern Sie sie. Also pausieren Sie, wie Sie gehen und tun Sie das zusammen mit mir. Nachdem Sie es hier gespeichert haben, sollten Sie sehen, wann Sie diese Seite neu laden. Dasselbe genaue Seite hallo dot html scheint, als wir an einer Änderung davon arbeiteten, es ist jetzt html betont, so dass Sie sehen, dass es jetzt kursiv ist. E. M ist nicht genau das Gleiche wie ein Talikum. GM hat eine semantische Bedeutung, eine sinnvolle Bedeutung betont. Es gibt auch eine Augenmarke, was metallisch bedeutet. Jetzt hat das I-Tag eine semantische Bedeutung von etwas wie einem Text, der sich auseinandersetzt, so dass Sie ein Augen-Tag semantisch für Situationen verwenden würden, in denen Sie zum Beispiel den Namen eines Schiffes oder eines Fremdwortes haben zum Beispiel , etwas, das wir typographischen Lee normalerweise kursiv aus einem Grund, dass es sich typographische Lee handelt. Okay, das ist anders als E. M. Also nur, weil Sie wollen, dass etwas kursiv geschrieben wird. Sie benutzen also den Namen eines Bootes. Sie würden das M-Tag nicht verwenden. Dafür. Sie würden das I-Tag verwenden, das es kursiv macht. Und nur weil etwas betont wird, will man nicht unbedingt immer ein Talic sein. Du könntest es. Sie könnten versucht sein, das I-Tag für etwas zu verwenden, das betont wird, aber es ist nicht dasselbe. Das I-Tag zeigt etwas anderes an. Außerdem haben Sie nicht immer Ihren Text, der kursiv betont wird. Haben Sie jemals eine Website gesehen, wo betonen Texas unterstrichen waren fett id oder machte eine andere Farbe oder machte eine andere gekämpft Größe? Es gibt verschiedene Möglichkeiten, dies zu tun, also lassen Sie sich nicht über die Standardeinstellung verwirren. Schau, der HTML-Code gibt es. Denken Sie an die Semantik. Also haben wir etwas HTML geschrieben und Sie sehen, wie das funktioniert. Der E M geht um den Bereich, der betont wird. Also, was das tut, ist dieses Wort Cloud wird betont und alles andere wird nicht betont. Wenn ich Worte hervorheben wollte, könnte ich diesen Schnitt basierend ziehen und speichern, und jetzt werden beide diese Worte betont. Dies ist eine Wolkenänderung, also werden beide betont, und lassen Sie mich voran gehen und Ihnen ein anderes Tag zeigen. Dies ist jetzt eigentlich ein Absatz. Also lassen Sie es uns als Absatz markieren. Dies ist das p-Tag und wissen, dass, wenn Sie in einigen Kontexten zu verschieben, wird es Ihnen automatisch die Schließung Tack geben. Alles, was hier drin ist, ist ein Absatz. Nun, wir wollten, dass es so weitergeht. Also werde ich diesen zweiten abschließenden Teil schneiden und zum Ende der Zeile gehen, um nach unten zu gehen und dann einfügen. So, jetzt sehen Sie, dass von hier nach unten gezogen, um alles zu hören, was hervorgehoben ist, ist ein Absatz jetzt, nach HTML. So speichern Sie es und aktualisieren. Es gibt keine Veränderung, die du siehst. Aber die Seite hat jetzt semantisch diese Bedeutung und Bub in sie. Sie haben ihm gegeben, die Bedeutung von diesem ist ein Absatz. Dies wird Ihre Google-Suche Ranking verbessern. Es wird es für Menschen, die unterschiedliche Behinderungen haben, zugänglicher machen. Es wird es mehr mit dem Rest des Internets verbunden machen. Sie möchten also diese semantische Bedeutung haben, Auch wenn es später nicht eine bestimmte Art und Weise aussieht, können wir mit CSS hereinkommen, und wir können Absätze darauf abzielen, ihn auf eine bestimmte Weise aussehen zu lassen, wenn wir wollen. Was ich will, dass Sie tun, ist tatsächlich in der gleichen Sache hier den gleichen Hallo Punkt HTML oder den Dateinamen, den Sie ihm gegeben haben. Erstellen Sie nicht nur innerhalb dieser Seite eine neue Seite. Ich möchte, dass Sie diese Seite ein wenig erweitern. Ich möchte, dass Sie ihm einen Titel geben, die Überschrift einen weiteren Absatz und eine Liste von Links zu einigen Ihrer Klassenkameraden-Domains und ich werde nicht gestolpert. Es gibt diese Aufgabe ist ein bisschen ein Trick. Die Zuweisung ist wie eine Trickfrage. Ich gebe Ihnen einen Auftrag, und es gibt einen Teil davon, den Sie nicht wissen, wie Sie tun sollen, es sei denn, Sie wissen schon, wie man es von woanders macht . Ich habe dir noch nicht gesagt, wie du das komplett erledigen sollst, also wenn du an den Punkt kommst, an dem du keine Ahnung hast, was ich dir gerade zugewiesen habe, mach dir keine Sorgen darüber. Fahren Sie einfach weiter. Es wird mehr Sinn machen Würde ich es erklären, wenn Sie bereits auf eigene Faust ausprobiert und gesehen haben , warum das dann ist, wenn Sie es gerade von Anfang an hören . Das ist also ein Lehrmittel, das ich benutze, um dir zu helfen, den Grund zu merken und zu verstehen, dass wir Dinge auf eine bestimmte Art und Weise tun. Also lass dich nicht stolpern, wenn du zu dem Punkt kommst, an dem du es nicht herausfinden kannst. Also nochmal, was du tun wirst, ist, dass wir diese Seite ein bisschen erweitern werden. Du gibst ihm einen Titel, der der Titel für die gesamte Seite ist. Dann geben Sie ihm eine Überschrift und dann unten, werden Sie ein weiteres Paar Graphen und dann eine Liste von Links zu Klassenkameradeseiten setzen. Also offensichtlich werden Sie die Links Ihrer Mitschüler Seiten im Projektbereich finden, und darüber hinaus, nachdem Sie den Inhalt dafür geschrieben haben, werden Sie auch semantisch vermarkten. Die Art und Weise, wie du das tun wirst, ist, dass du diese Elemente benutzen wirst, also werde ich dir nicht zeigen, wie das geht. Ich lasse Sie herausfinden, wie Sie das H ein-Tag für eine Seitenüberschrift verwenden. Sie haben bereits das Absatz-Tag für den Absatz gesehen und dann werden Sie das Listenelement Tag haben , das markiert, was wird, dino, dass etwas ein Listenelement ist. Okay, also geh weiter und pausiere das Video jetzt und schließe dieses kleine Session-Projekt . Lassen Sie sich nicht stolpern. Wenn Sie nicht wissen, wie etwas zu tun, tun Sie einfach alles, was Sie können Und dann, wenn Sie alles getan haben, können Sie ein NPAs das Video und weiter. 17. Exercise: Okay, also hoffentlich hattest du nicht zu viel Ärger damit. Also hier habe ich den Auftrag auch erledigt. Der erste Teil. Ich habe gerade den Inhalt zusammengestellt. Also hier habe ich den Titel hier gemacht. Peitschen Machen Sie das rückgängig. Steuerelement oder Befehl Z rückgängig machen. Okay, das ist der Titel. Das ist meine Überschrift. Dies ist der Absatz, den wir zusammen geschrieben haben. Und dann ist das mein Absatz. Sie wissen gerade jetzt, wie es geht einfach weiter entlang Off-Screen geht den ganzen Weg hier raus Weg hier raus. - Das ist in Ordnung. Ich werde es einfach so lassen. Und dann hier ist meine Liste mit Links zu meinen Klassenkameraden Seiten. Dies sind die Seiten, die die meisten Likes im Projektabschnitt hatten. Also, wenn wir das jetzt speichern, ohne es mit HTML zu markieren, mal sehen, was passiert. Irgendwie ein Chaos. Es gibt hier nur eine Menge ah aneinander gereiht, und es wird schlimmer, wenn ich die Größe der Seite ändere, richtig? Es ist alles nur zusammengereiht. Eigentlich ist das einzige, was nicht zusammengereiht ist der Teil, in dem wir diesen kleinen Absatz gemacht haben. Das ist schön segmentiert, aber Brendans Seite, der Titel und dann meine Überschrift sind alle aneinander gereiht und das alles ist zusammengereiht. Das ist also nicht gut. Lassen Sie uns etwas HTML schreiben, um es zu bereinigen. Also Brendans Seite, ich will der Titel sein. Das war ein Teil des Tricks. Ich habe dir nicht den HTML-Code gegeben, um diesen Titel zu schreiben. Es ist ein wenig verwirrend, also kommen wir als Nächstes darauf zurück. Du hast die Überschrift, also gibt es einen Unterschied, richtig? Die Überschrift der HTML vier ist H eins. Also sollten Sie Ihren Hoffentlich haben, wenn Sie nicht geschrieben haben, sollte Ihr Code wie dieser h aussehen, den Inhalt des H und jeden stoppen. Also alles, von diesem bis das ist das Alter eins. Wenn wir dies speichern und es jetzt betrachten, können wir sagen, dass der HTML die Bedeutung des ersten Level-Headers durchdrungen hat. Wenn du raten würdest, was würdest du raten? Dass der Code für den Header der zweiten Ebene ist, so haben wir dies bereits geschrieben. Lasst uns das jetzt in Ruhe lassen. Dies ist ein Absatz. Also werde ich nochmal p schreiben und dann am Ende. Oder eigentlich, was einfacher wird, ist, wenn ich es einfach hier lege. Stop P schließen p So ist dies das P-Element. Und jetzt, wenn ich es speichere und hier rüber gehe und aktualisiere, sollten wir einen Unterschied zwischen diesem Absatz und dem, was danach folgt, sehen. Gut. Okay, jetzt habe ich dir das l I-Tag gegeben, um anzuzeigen, dass etwas ein Listenelement ist. Also, was ich hier getan habe, sehen Sie, dass das einfach nicht funktionieren wird, weil es alles auf einer Linie steht. Also, wenn ich es ein l gebe, ich um jeden Gebrauch, was ich getan habe, habe ich irgendwie versucht, Formatierung in es zu setzen, während ich das schreibe, weil ich jedes von ihnen auf eine neue Zeile gesetzt habe und ich ihm diesen kleinen Strich gegeben habe und du kannst sehen, dass es nicht funktioniert hat. Es funktioniert, wenn es klein ist, weil es die langen Wörter umschließt. Aber es funktioniert nicht jede andere Größe, weil es hier keine wirklich Formatierung gibt. Also dieser kleine Bindestrich hier, ich habe es nicht eingegeben, weil es tatsächlich Teil meines Inhalts ist, sondern weil ich versucht habe, es zu formatieren. Aber Formatierung ist formal die Aufgabe von CSS und für HTML, ihm die Bedeutung für das CSS zu geben. Also werden wir diese kleinen Striche löschen, die ich da reingesteckt habe, weil sie nicht richtig zufrieden sind . Also gehe ich voran. Ich mache sie alle. Und jetzt werde ich die I Elemente hier reinlegen. Nun natürlich sehr wichtig, ist es natürlich sehr wichtig,dass Sie es immer genau auf die richtige Art und Weise eingeben. Also, wenn ich Zeit sparen will, was ich tun werde, ist kopieren Sie diesen offenen Verbündeten und tun Sie alle einmal und diese eine diese eine einfügen, einfügen, einfügen und dann daran erinnern, alles sauber zu halten. Der enge Verbündete Paste, Paste, Paste, Paste, Paste. Jetzt sollte der HTML wissen, dass all dies Listenelemente sind. Speichern und aktualisieren. Perfekt. Das sieht also viel besser aus. Also hier ist der knifflige Teil. Ich habe dir gesagt, du sollst Links setzen, aber das ist, dass du sonst bist. Also habe ich dir nicht gesagt, wie man Links setzt. Jetzt gab ich Ihnen das ein Element für ein Tag, und so konnten Sie versuchen, Zehenlänge, Leichtigkeit mit einem und dann stoppen ein.Aber wenn Sie es speichern und schauen Sie es, können Sie sagen, dass es nicht wirklich funktioniert, okay? Und darüber hinaus möchten Sie in der Lage sein, den Namen dieser Person zu sagen, anstatt immer die Sie Earl wird wirklich nett sein, wenn Sie einfach den Namen, die O jedes Wort, das Sie wollen, und dann verankern Sie die Ihre während in es. 18. HTML-Syntax Lektion 2 – Attribute: Um Links zur Arbeit zu bringen, bringen, müssen wir etwas Neues lernen. Schauen wir uns unser kleines falsches Küchenbeispiel noch einmal an. Also, jetzt ist es in gefälschter HTML-Stil-Syntax markiert, und Sie können sehen, dass ich Tags für all die verschiedenen Dinge auf meinem Zähler habe. Alle einzelnen Weingläser, jedes Messer in meinem Messerblock und dann Meziane an der Theke. Jetzt kommt das Kabinett, mit verschiedenen Regalen, Tellern, Schüsseln und solchen Dingen. Jetzt ist der Boden das Topfregal, also im Topfregal gibt es ein Problem, weil alle Töpfe gleich aussehen, aber sie haben tatsächlich unterschiedliche Größen. Sie können einen Drei-Kern A vor Gericht sehen. Wie sollen wir also mit dem Etikett sagen, dass dieser Topf eine andere Größe im anderen Topf ? Nun, was Sie dio ist, dass Sie ein Attribut auf den Topf schreiben, also müssen wir die Größe angeben. Die Seiten dieses Pots sind drei Gerichte, also haben wir die richtige Größe von Eagles drei Courts. Dies ist ein wenig Attribute, die in das Tag selbst geht, und dann setzen wir das ganze Tag zurück auf den Topf, und jetzt wissen wir, dass dieser Topf drei Gerichte ist. Also, was wir wollen, ist gehen Sie voran und markieren Sie jedes von diesen einzeln, wie sie verschiedene Größen sind . Also offensichtlich, wenn wir Informationen über diesen Topf schreiben wollen, müssen wir die Informationen in diesen Tag setzen. Nun, das ist nur das schließende Tag. geht nie etwas rein, muss hier reingehen. Jetzt wollen wir es nach dem Namen des Tags setzen, der besagt, dass es ein Topf ist, also legen wir es hier. Legen Sie es nie vorher, denn dann wird der Browser verwirrt. Nun schreiben wir das Attribut, Namen, Größe, und dann müssen wir festlegen, was drei Gerichte gleich ist. Gehen wir weiter und machen das mit all den anderen. Okay, jetzt habe ich die meisten dieser Größen gegeben. Es kann sein, dass einige der Töpfe nicht wirklich brauchen, um die Größenattribute zu haben, weil es nicht wirklich gilt. Zum Beispiel, einige meiner Töpfe in der Größe sind nicht so wichtig, also werde ich das auslassen 19. HTML-Links: Jetzt sollten wir wissen, wie man die URL in das Anker-Tag einfügt, damit wir den Text sehen können. Aber der Anker hat die URL als Attribut, das dem Browser mitteilt, wohin wir uns bringen sollen, wenn wir auf diesen Text klicken. Es gibt also aus archaischen Gründen, dass wir das einen Anker nennen und ah, Hyperreferenz. Das Anker-Tag wird also nicht die Hyperreferenz oder die URL umgehen. Ich schneide das ab, setze das Wort um, das du willst. Das ist also Projekt Oma. Also, wenn ich das speichere, kommt das näher an, wie wir es tun sollen. Projekt Oma. Nun, so möchte ich, dass der Link aussieht, außer dass ich in der Lage sein will, auf ihn zu klicken und es bringen Sie mich zu dem Sie sind l, dass ich gerade hier herausgeschnitten. Wie machen wir diesen Anker dazu, dass die Hyperreferenz oder die URL darin verlinkt ist? Der Weg, dies zu tun, ist mit einem Attribut, das dieses Element ein Attribut für Attribut haben kann geht immer genau hier und der Attributname für die Hyperreferenzen H ref, Hyperreferenz. Und jetzt beachten Sie, dass, weil ich in dieser Syntax Hervorhebung Programm Verschiebung an es bin. Wenn ich auf Leerzeichen klicke, bekomme ich eine kleine Liste möglicher Attribute. Jetzt möchte ich, dass Sie sich daran erinnern, dass die ACTU es geht in der ersten, die Öffnung, nicht in den schließenden Elementen. Also, wenn ich versuche, es hier zu platzieren, bekomme ich diese kleine Liste nicht, weil sie nie dorthin geht. Nichts geht hier je außer dem schließenden Abgrenzung er und dem Elementnamen, den Sie schließen. Er geht genau hier nach dem Namen des Elements. Aber bevor das Tag tatsächlich schließt, um ein Leerzeichen zu setzen und Sie sehen oh, es gibt einige vorgeschlagene Attribute und die Attribute, die wir für unsere Hyperreferenz wollen ist H Ref steht für Hyperreferenz. Also wird die h ref sein und ich werde in den Link einfügen. Die Hyperreferenz ist dieser Link, also lasst uns ihn speichern und aktualisieren. Es wurde in einen Luchs verwandelt, und jetzt ist es ein Anker, mit dem die Hyperreferenz dort verbunden ist, ähm, verärgert da drin und Sie können unten sehen, dass der kleine Vorschautext auftaucht. Wenn ich darauf klicke, muss ich Oma projizieren. Gehen wir zurück. Was ist, wenn es noch eine Sache gibt, die wir mit diesem Attribut tun müssen. Wenn diese Attribute, die, was der eigentliche Name ist ein Kleid, Hyper-Referenz gleich ist und dann, was es gleich ist, ist der Earl die eigentliche Hyperreferenz? Das ist also Attribut, Name, Attributwert. Die Werte können dort sehr unterschiedlich sein. Eigentlich ist es ein gültiger Zeh. Haben Sie einen Dateinamen, der ein Leerzeichen darin hat, aber sagen Sie, dass sie bei Hallo, Space World benannt hatte . Dies wird Probleme für uns verursachen, weil der HTML-Code dies liest. Das ist erfrischendes Meer. Was es getan hat, ist, dass es es getan hat. Es hat versucht, mich zu projizieren Oma dot com Schrägstrich Hallo? Nichts. Weil es diesen Raum sah und ich dachte, ich wäre fertig. Was wir also immer tun müssen, ist, jedes Mal Anführungszeichen zu setzen, Attributwerte. Jeder einzelne Wert Attributwert wird immer Anführungszeichen enthalten, und dies wird viele Probleme beheben, und es wird Ihre Syntax sauber halten. Also geh zurück. Aktualisieren. Nun, wenn ich darauf klicke, es gibt mir die ganze u R L erscheinen. Hallo und dann ist es dieser Code, der Raum in ihrer Welt bedeutet jetzt, sie hat nicht wirklich die Seite erstellt. Hallo, Welt. Das habe ich mir erfunden. Sie hat eine Seite erstellt. Hallo. Deshalb wird es nicht gefunden. Aber das kannst du hier oben sehen. Die eigentliche Vollendung, in die du Earl gekommen bist. Also gehen wir zurück und lassen Sie uns das auf was reparieren? Ihre eigentlichen Seiten. Also gehen Sie vor und setzen Sie eine treff gleich für alle diese Links. Und die Art, wie ich es tun werde, ist, dass ich es wirklich schnell machen werde. Da diese bereits die URL hier haben, werde ich nur eine Reise gleich Kopie kopieren und sie vor diese setzen. Sehen Sie, wie schwierig das ist. Aber es spart viel Zeit, und dann werde ich diesen Teil kopieren. Das abschließende Zitat in der abschließenden Karotte. Ich werde es am anderen Ende dieses Jahres einfügen, Earl. Sie werden die Syntax-Hervorhebung sehen, die sich ändert, da ich Fehler erstellt habe, indem ich es falsch mache. Aber jetzt, wenn ich fertig bin, ist alles sauber. Und jetzt brauche ich also hier der Anfang des Ankers. Ich muss es auch schließen. Also für jeden. Ich werde weitermachen und es kopieren. Diese Paste muss genau da sein. Und jetzt kann ich den Anker für jeden von ihnen füllen. Also, wenn ich das rette, was passiert dann? Wenn ich das aktualisiere, sollten Sie in der Lage sein, eine Idee zu haben, dass. Okay, also habe ich Project Oma hier geschrieben. Aber hier ist nichts zwischen nichts im Anker-Tag. Es gibt den Wert der Attribute, die Hyperreferenz. Also verweist der Hyper-Referenzen dort, aber der eigentliche Anker hat keinen Inhalt dazu. Also Peitschen, ich glaube, ich habe das alles gerettet. Aber es ist nur ein Dokument zum Speichern geöffnet. Wenn ich also auffrische, was mit diesen passieren wird, bist du das anders. Ich habe diese URLs in die Attribute verschoben und jetzt hat der eigentliche Anker keinen Inhalt. Sie werden verschwinden, und hier ist nichts. Das ist, weil das Extra nicht hat Der Anker hat keinen Inhalt. Also werde ich voran gehen und jedem von ihnen Worte geben, um jetzt zu speichern und dann zu aktualisieren. Jetzt tauchen sie alle auf und sie sollten arbeiten. Ich kann auf jedes von ihnen klicken und zurückgehen und schauen, diese Person hat tatsächlich schon etwas HTML geschrieben, weil es eine betonte oder kursivierte Textur gibt. bin mir nicht sicher, ob sie das Hervorhebungs-Tag oder das Kursiv-Tag verwendet haben, weil ich ihren Code nicht sehen kann. Und schauen Sie, diese Person hat auch eine Art HTML geschrieben, weil sie hier einige Formatierungen haben. Ich frage mich, welchen Code sie verwendet haben, aber wir können die Quelle unserer Webseite sehen, aber wir können nicht die Quelle ihrer Webseiten sehen. Nun, das kannst du, aber ich sage dir später, wie du das machst. Eine Frage, die ich habe, ist. Hat jemand von Ihnen, als Sie diese Liste zum ersten Mal erstellt haben, anstatt Bindestriche wie ich zu verwenden, Zahlen verwendet? Haben Sie 12345 gemacht? Anstelle von Bindestrich oder Aufzählungszeichen? Es gibt einen Unterschied in den Arten von Listen. Es gibt eine geordnete Liste, die 12345 sein würde, und es gibt eine A Nordeste. Also wir tatsächlich gibt es eine Möglichkeit, diese ganze Liste als die eine oder andere zu markieren, und es ist tatsächlich erforderlich. Ein Listenelement sollte immer entweder bestellt oder ein Nord falsch sein, und die Art und Weise, wie wir das tun, ist, dass wir das Anfangs-Tag hier in das schließende Tag setzen und das Element für die geordnete Liste ist ol das Element für eine neue geordnete Liste. Geht es dir gut? Also habe ich meins mit Strichen gemacht, weil ich nicht wollte, dass es bestellt wird. Es gibt keinen Grund, dass es in der Reihenfolge keine Bedeutung gibt. Es ist nur eine zufällige Reihenfolge. Also werde ich dir l eine nicht geordnete Liste machen und du siehst, dass mir automatisch das schließende Tag gegeben hat . Ich brauche es nicht. Sie sind geschnitten. Ich brauche es hier unten. Einfügen. Also, was das sagt, ist, dass hier eine Bestellliste von hier nach hier ist. Das ist eine Bestellliste. Und das ist ein Listenelement. Es gibt all diese Listenelemente, also ist das einzige, was direkt in eine Bestellliste eingeht, das Listenelement. Lassen Sie sich also nicht verwirren, wenn Sie sehen, dass diese UL beginnt und es nicht aufhört, obwohl ein anderer begonnen hat. Das bedeutet, dass sich dieses Listenelement innerhalb dieser unerhörten Liste befindet. Es bedeutet nicht, dass dies auf unserer Liste zuerst steht und das ist das nächste. Das ist eigentlich unterhalb der U. L. 20. HTML-Syntax Lektion 3 – Nesting: zurück zu unserem Küchenbeispiel. Dies ist wie, wie Sie die Töpfe wie in der Topfregal finden können, die Topfregal Startpfeile genau hier. Und es geht runter zu diesem anderen Pfeil hier, und Sie können sehen, dass alle Töpfe unter dem Topfregal-Element dort darin verschachtelt sind . Und das macht Sinn, weil sie alle auf dem Topfregal sind. Und natürlich, natürlich, als wir nach oben scrollen, haben wir das beschränkt, während der Zähler endet und es gibt eine neue Sache namens Kabinett. Das Kabinett besteht aus Regalen. Es gibt ein paar Regale, und dann enthalten die Regale Dinge wie Teller. Das ergibt also einen vollkommenen Sinn. Sie müssen zum Kabinett gehen und es öffnen und dann ihre Regale. Sie schauen in die Kabine, dass Sie verschiedene Regale finden, bis Sie das Regal finden, das hat was Sie suchen. Und dann können Sie in diesem Regal Ihre Teller und Schüsseln und die Dinge, die Sie wirklich suchen, eingrenzen . Jetzt natürlich ist das allesnatürlichin der Küche, was auch in unser kleines Beispiel für gefälschten Code. Die Küche ist ganz oben. Und dann, wenn wir den ganzen Weg nach unten scrollen, hier ist das schließende Küchenschild. Also ist alles zwischen diesem Pfeil nach oben und dieser Ära, die nach unten zeigt, in der Küche. Eine andere Möglichkeit, dass das Programm darüber spricht, ist dies ein Elternteil und das ist ein Kind oder dieser Verbündete. Es hat einen Vorfahren, der die UL ist. Und diese ul hat einen Nachkomme, der der Verbündete ist. Und wir haben eine ähnliche Sache hier mit dem Verbündeten und dem Anker-Tag vor sich. Das Anker-Tag befindet sich tatsächlich innerhalb des Listenelements. Es ist nicht der nächste, nachdem wir Ally nicht in die Nähe setzen können, weil wir den Anker umgeben wollen . Das Anker-Tag, das Ankerelement, ist also das Ankerelement, ein untergeordnetes Element des Verbündeten Elements, das ein untergeordnetes Element der UL ist. Also okay, beantworten Sie diese Augen. Du siehst gerade dieses Video an. Das l ich hier, das ich hervorhebt. Was ist seine Beziehung dazu? - Sie? Nun, sag es. Es ist ein Kind. Das ist ein Kind davon. Was ist diese Verbündete Beziehung zu diesem Verbündeten? Wenn du Kind gesagt hast, hast du eigentlich nicht recht, aber du denkst darüber nach, was gut ist, sie sind eigentlich Geschwister, und das ist der eigentliche Fachbegriff. Diese Luft-Geschwister, sie sind alle Kinder dieser Ul. Also sind sie alle Geschwister voneinander. Und hier ist noch eine Frage. Diese A. Was würdest du sagen? Es ist Beziehung zu diesem Verbündeten. Es ist kein Geschwister, weil sie nicht beide Kinder desselben Elternteils sind. - Du. Das ist nicht, dass wir keinen technischen Namen dafür haben, aber es ist so etwas wie Onkel schreiben. Dies ist das Kind dieses Verbündeten und das ist ein Geschwister. Deine Eltern Geschwister sind also dein Onkel oder deine Tante. Dafür gibt es eigentlich keinen Fachbegriff. Aber was wichtig ist, ist, dass Sie nicht denken, dass dieser Anker ein Sit witzt. Glaubst du nicht, dass dieser Anker ein Geschwister dieses Verbündeten oder ein Nachkomme dieses Verbündeten ist ? Dieser Anker ist nur ein Nachkomme dieses Verbündeten. Nun, was ist das für Anchors? Dies verankert, ähm, Beziehung zu diesem auf Bestellung Listenelement. Kein Elternteil, denn es ist ein Schritt nach oben. Es ist ein Großeltern, oder der allgemeinere Fachbegriff ist nur Vorfahren gut. Also hoffentlich ist das nicht zu verwirrend für Sie. Wenn Sie gerade mit HTML beginnen 21. HTML: jetzt. Eine andere Sache, die wir bekommen müssen, ist, dass wir viel mit dieser Seite definiert haben, um zu speichern und einfach zu aktualisieren. Wir haben hier eine Menge Informationen definiert. , Sehen Sie, als ich diese Änderung vorgenommen habe, weil ich die UL gesetzt habe und es einfach ein wenig herauskam und sich als eine andere A-Liste getrennt hat. Also jetzt wird es tatsächlich wissen, dass es auf der Bestellliste steht, aber wir haben nicht tatsächlich angegeben, dass all dies ein HTML-Dokument ist. Das ist etwas, was wir eigentlich tun müssen. Und es gibt ein Element, das HTML genannt wird, das angibt, dass die Seite in HTML-Code geschrieben wird . Also müssen wir dies immer in unsere HTML-Dokumente, Peitschen und es setzen . Es füllte das für mich, was irgendwie hilfreich und irgendwie nicht ist. Also die ganze Sache, alles ist HTML. Okay, jedes Bit davon ist HTML. Die erste Zeile aller Ihrer HTML-Dokumente sollte also immer html sein. Okay, das gibt es in der Zukunft einen Vorbehalt, aber ich werde es vorerst verlassen. Von dem, was Sie wissen, alles ist die erste Zeile h Timo und die letzte Zeile wird geschlossen. Html. Alles in hier ist HTML. Speichern Sie, was passieren wird, wenn ich nichts auffrische. Es war eine semantische Veränderung, und es erlaubte dem Browser zu verstehen, was er jetzt liest. Hier ist noch ein Problem. Dieser Titel. Ich möchte auf den Titel der Seite jetzt erscheinen. Da steht die U R L. Weil ich ihr keinen Titel gegeben habe. Aber wie bekomme ich es da oben? Weil dies auf der Seite ist. Es legt es einfach hier unten auf der Seite. Also, was ich brauche, ist eine Art wie eine Möglichkeit, einige Meta-Informationen über die Seite zu geben . Ich möchte diesen Titel nicht in den gleichen Hauptteil der Seite einfügen. Ich möchte es wie oben oben, oben hier drin, wie in muss ich, wie, wie, einen Abschnitt die Gibbs spezielle Informationen über die Seite haben. Aber es ist noch nicht wirklich Teil des Dokumentenkörpers, also wenn Sie darüber nachdenken, wenn Sie wirklich, wirklich clever sind, stellen Sie sich wahrscheinlich vor, wie der Name dieses Tags ist. Sie stellen sich wahrscheinlich so etwas vor, als gäbe es ein Tag namens Dokument, das Sie um das gesamte Dokument herum legen . Dokument öffnen, geschlossenes Dokument. Und dann haben Sie noch einen Tag, den Sie so etwas nennen würden, wie, wenn Sie sich das erfinden würden, was würden Sie sich einfallen lassen? Vielleicht stellen Sie sich vor, dass es so etwas wie Meta nennt. Wenn du irgendeinen Gedanken in dieser Richtung hättest, bist du absolut brillant. Wenn du es nicht tust, ist das okay. Sie könnten immer noch brillant sein, aber Sie würden nicht wissen, wie die tatsächlichen Namen der Elemente sind. Aber wenn du das erraten würdest, ist das ziemlich gut. Also was? Die tatsächlichen Namen, die die Elemente sind Es ist nicht Dokument und Meta. Was ist es, um anzuzeigen, dass dies der Dokumententext ist. Der Elementname ist body und Sie setzen dieses body-Element Sie setzen diesen body-tag Befehl, schneiden Befehl einfügen oder Steuerelement einfügen um den gesamten Dokumentkörper. Also geht es nicht. Setzen Sie es nicht hinter diesem HTML, weil der Körper, den ich der Körper des Dokuments bin , Teil der HTML-rechten Stadt ist. Und es würde auch nicht sein, dass es nicht zusammenpassen würde, oder? Da dieses Körperelement danach beginnt, müssen sie innen verschachtelt werden. Dieser Text ist ein untergeordnetes Element dieses HTML-Tags. Dies sagt nun dem Computer, dass all dies vom Ende des body-Tags bis zum Anfang des schließenden body-Tags der Dokumentkörper ist. Jetzt speichern wir es und es ändert sich noch nicht ganz, weil es tatsächlich Syntex Air gibt das hier außerhalb des Körpers ist. Ähm, da ist das zweite Element, das wir eintragen oder das zweite Tag und wir nennen diesen Kopf. Das ist Kopfinformation. Es ist wie Header-Informationen, die gehen, nicht es ist nicht wirklich im Dokument. Es ist wie oben, genau wie versteckt. Dies ist, wo Sie alle Informationen auf der Seite, die ausgeblendet ist, die sich auf die gesamte Seite beziehen . Okay, also ist es irgendwie so, wie in einer Person der Kopf all das Wissen und alles enthält. Dies ist das Wissen, das für die gesamte Seite gilt. Wenn wir das speichern und aktualisieren,funktioniert es immer noch nicht, warum funktioniert es nicht? Wenn wir das speichern und aktualisieren, funktioniert es immer noch nicht, Weil wir angeben müssen, welche Art von Kopfinformationen das jetzt ist. Der richtige Weg, dies zu tun, ist mit, wenn wir ihm einen Titel geben wollen, und übrigens können Sie dies immer tun und sehen, wofür HTML verfügbar ist. Ich habe den offenen Karottenschlüssel gemacht und ich hörte auf. Und jetzt diese Verschiebung, weil es eine Syntax-Hervorhebung ist und es ein HTML-Editor ist. Es hat mir einige Vorschläge gegeben, die für diesen Bereich geeignet sind. Also, welcher ist es? Ich wollte, dass es der Titel ist. Da ist es. Es ist wie, tatsächlich klicken Sie auf das und es fühlt sich jetzt berechtigt für mich. Ich muss die Eingabe am Ende beenden und dann den Titel Now stoppen. Jetzt wird die Seite funktionieren. Jetzt wird es funktionieren. Speichern Sie das zu verschwinden und beobachten Sie hier, wenn ich es auffrischen ISS Brendans Seite. Also, wenn du das jetzt mitgemacht hast und deine Seiten repariert hast, dann gehst du, es ist okay. Wenn Sie nicht alles im Voraus bekommen haben, war es nicht wie ein Test. Aber wenn du es hast, wenn du es hast, bekommst du jetzt deine Seite, um all das zu tun. Sie haben das Projekt abgeschlossen. Dies ist ein riesiger, monumentaler Schritt. Sie sind von jemandem gegangen, der nicht wusste, was HTML ist. So speichern Sie eine Webseite, wie Sie eine Webseite zu jemandem erstellen, der HTML schreibt und eine Webseite im Internet erstellt. Dies ist eine wirklich Webseite in jeder Hinsicht, und als HTML ist es auf. Es ist auf der Domain. Es wird über das Internet serviert. Öffentlich über http verfügbar, Es ist seine semantische beschichtet. Sie sind ein Web Maker, und wenn Sie nur, wenn Sie aufhören, den Kurs jetzt zu nehmen, würden Sie das grundlegende Wissen, das Sie 10 Schritte über die meisten Menschen setzen würde, die nichts von diesem Zeug bereits kennen. 22. HTML-Tipps und Geheimnisse: Wenn wir Code schreiben, ist es sehr wichtig, die Dinge organisiert zu halten. Dies ist eine wirklich einfache Website bis jetzt, und es beginnt bereits kompliziert aussehen. Also, was wir in der Regel tun, wenn wir Dinge, die verschachtelt sind, wie hier, zum Beispiel, wir haben ein Sie gut, in einem Verbündeten, wir in der Regel in Schulden die Kindelemente. Jetzt bin ich in Dellen, indem ich die Tab-Taste eine Registerkarte pro Nest oder pro Schicht tief drücke. Ist es jetzt. Ein weiterer Trick ist, dass wir normalerweise diese Art von Sache nicht schulden. Das ist also, wie innerhalb einer Linie. Also, wenn Sie sich unsere Seite wieder ansehen, die u L Wenn wir es hinzugefügt haben, ist es irgendwie wie einen Zeilenumbruch hier in einem Zeilenumbruch gemacht, der es wie ein Block seinen eigenen Block gemacht hat. Also, ähm, wir werden in der Regel in Schulden diese. Aber dieser Listeneintrag und der Anker sind wie auf dieser gleichen Zeile, und wir tun normalerweise nicht in Dent, so dass ich nicht gehen würde. Ich würde das nicht in der Regel tun, obwohl Sie könnten, wenn Sie wirklich verwirrt wären und es notwendig, um klar zu sein. Und ich habe das manchmal gemacht. Das ist also eine Möglichkeit, es zu tun. Und wenn Sie wirklich übertrieben werden wollten, könnten Sie sogar in Schulden und dies tun und wissen, wie die Idee wissen, wie die haben diesen Texteditor mir hilft, indem Sie irgendwie helfen, wo meine Einrückungen gehen, wenn ich zurückkehre. Also, wenn Sie wollten, könnten Sie so erfinden, um es nur sehr klar zu machen, dass das Projekt Oma innerhalb dieses Wut-Tags ist, das innerhalb dieses Listenelements ist, der sich innerhalb dieses Listenblocks befindet. Aber das ist etwas überflüssig. Es ist normalerweise einfacher, Elemente, die irgendwie wie in der gleichen Zeile sind, alle in der gleichen Zeile zu setzen , ebenso hier oben. Wir würden nicht versuchen, dies in eine neue Zeile zu setzen und eingerückt, weil dies irgendwie so ist, als würde es den Fluss des Satzes aufbrechen. Das ist eine Wolkenänderung, also werde ich zurückgehen und das rückgängig machen, weil es irgendwie wie eine Inline-Sache ist. jedoch Dieser Absatz blockiert ihnjedoch auf seinen eigenen kleinen Block. Also werden wir das lassen und ich erfinde das und das. So werden Sie feststellen, dass, wenn, wie wir durch eine in Zahnarzt von diesem gehen und bereinigen alle leeren Räume, die manchmal wollen Sie eine Menge Dinge erfinden. Also möchte ich alles beulen, was in diesem Körper ist, von hier bis hier. Also kann ich entweder eins nach dem anderen gehen oder es gibt ein paar Tricks, die Sie verwenden können, also könnte ich einfach alles hervorheben, was ich möchte. In Schulden ist lang, es gibt mehrere Zeilen und Hit Tab, und es tut alle von ihnen für Sie. Tippen Sie auf, tippen Sie auf. Es wird es jetzt weiter tun Was ist, wenn Sie sie alle zurücknehmen möchten, wenn Sie Einzug, können Sie eine Sonderzeichenkombination namens shift tab verwenden. Nun, das ist nicht universell. Einige gute Texteditoren haben einige dieser Verknüpfungen, und einige nicht. Sie müssen sich also mit dem Texteditor vertraut machen, den Sie verwenden. Aber die meisten der fortgeschrittenen haben Tab, wenn Sie mehrere Zeilen ausgewählt haben, um in Schulden alle von ihnen, und dann toe un eingerückte Hit Shift, halten Sie es und geben Sie dann tab toe un in Schulden, und so halten Sie nur Shift, und wenn Sie Shifty Hit Tab halten, geht es zurück eine Einrückung, wenn Sie nicht halten, verschieben Sie Tab drücken, geht es vorwärts. Also werde ich das alles weiter klären. HTM im Körper befinden sich beide innerhalb der HTML-Elemente. Sorry, ich meinte H Ich traf Körper und Körper und Kopf sind beide innerhalb des HTML-Elements. Also jetzt ist unser Text ein bisschen sauberer und einfacher zu betrachten. Es mag für dich jetzt verwirrend aussehen, aber wenn du zu einer sehr großen, verwirrenden Seite kommst , wird es in der Lage sein. Es wird hilfreich für Sie sein, in der Lage zu sein, Ihre Haltung zu bekommen, wie tief in etwas ist, indem Sie sich jetzt die Einrückung ansehen. Es bringt auch einige Fragen ans Licht, wie zum Beispiel diesen Text hier. Online 13 ist eigentlich ein direktes Kind des Körperelements. Es ist nicht unter irgendetwas anderem verschachtelt. Nun ist das eine Art Warnzeichen, denn was das bedeutet, ist, dass die einzige semantische Bedeutung, die dieser Text hat, ist, dass er HTML im Dokumententext ist. Es hat also eigentlich keine semantische Bedeutung darüber hinaus. Es ist eine Webseite. Es ist Teil einer Webseite, also normalerweise ist das ein Hinweis darauf, dass etwas schief ist. Und was wir tatsächlich tun müssen, ist, diesem ein Absatz-Tag um ihn herum zu geben, weil es ein Absatz ist. Whoops. Ich, äh, zweifle das, und es hat mir da draußen geholfen. Okay, das ist also, äh, äh, ein Absatz auf Blockebene. Diese Frau hat sie auf ihre eigene neue Linie gesetzt. Und jetzt wissen Sie vielleicht, dass ich irgendwie widersprüchlich in meiner Einrückung bin. Mit diesen Absätzen. Ich habe eine neue Zeile erstellt und eingerückt. Und mit diesem hier habe ich es gerade hier reingebracht. Ähm, das ist keine schlechte Sache, inkonsistent zu sein, aber größtenteils ist es gut, wenn Sie nach Konsistenz versuchen, besonders wenn Sie anfangen, bis Sie bestimmte Gewohnheiten entwickeln, die helfen Sie in Ihrer Beschichtung. Wenn ich das jetzt speichere und aktualisiere, werden Sie tatsächlich keine Änderungen sehen, weil alles, was ich getan habe, ist, die Art zu ändern, wie ich es für mich formatiert habe, nicht die Art, wie ich es für jemand anderes formatiert habe, um es zu sehen. Es ändert nicht das HTML-Format, und ich habe die Semantik dieses Absatzes geändert, aber es hat nicht wirklich die Art und Weise geändert, wie es aussah. Also hier ist die Quelle der Seite hier ist dies der Code, der dahinter steckt. Nun, ich weiß nicht Was, wenn ich den Code auf dieser Seite betrachten möchte, ohne dass diese ganze Schicht geöffnet wird, um die Datei zu finden? Was ist, wenn ich nur sehr schnell überprüfen möchte, wie das aussieht? Okay. Zum Beispiel möchte ich zu Sam Gold gehen. AEA-Seite. Entschuldigung. Wenn ich deinen Namen falsch ausspreche und sehen will, wie er das gemacht hat, kann ich mich nicht in sein Konto einloggen. Ich habe sein Konto nicht. Er hat sein Passwort nicht ausgeliefert. Hoffentlich hat er es nicht getan. Aber was ich tun kann, ist, dass ich tatsächlich an den Code seiner hinter bekommen kann. Ich könnte die Quelle dafür bekommen, wie das gebaut wurde. Und die Art und Weise, wie Sie das tun, ist, dass der Browser das ein bisschen größer machen wird? Oder eigentlich, was ich tun werde, ist, dass ich es einfach auf diese Seite des Bildschirms ziehe, denn was ich dir zeigen werde, ist in diesem kleinen Menü. Jetzt hat jedes Betriebssystem und jeder Browser einen anderen Ort, an dem Sie den Menüpunkt haben , aber in Chrome gehen Sie hier hinein und gehen Sie dann zu Tools. Und Sie können diesen Artikel sehen. Dieser Menüpunkt direkt hier, Quelle anzeigen. Und die Verknüpfung dafür ist Optionsbefehl. Sie auf fast allen Windows-Computern. Die Abkürzung dafür ist, dich zu kontrollieren. Wenn Sie also in Windows sind, versuchen Sie nicht einmal, das Menüsymbol zu finden. Geben Sie einfach immer steuern Sie dies zu tun, um View-Quelle auf vielen anderen Computern finden müssen, um zu sehen und finden Quelle und Chrome auf Mac. Es ist nicht so, aber gehen Sie zu Tools und sehen Sie die Quelle an. Okay, lass mich das wieder aufmachen. Haben Sie gesehen, was es dort gemacht hat und einen neuen Tab geöffnet? Das ist also die Seite, auf der ich war. Dies war Sams Seite und das öffnete diesen Tab mit der Quelle. Siehst du das? Es sagt Quelltext hier, und es hat das gleiche wie Earl oder den gleichen Ort. Und es zeigt die eigentliche Quelle. Sie haben Zeilennummern und ich kann die Elemente sehen, die er verwendet hat, damit ich das riesige I-Tag sehen kann , was gut ist, denn wenn Sie das e-m-Tag verwenden würden, würde das semantisch bedeuten, dass diese ganzen Sätze betont haben, was ein bisschen seltsam wäre. Allerdings ist es nicht wirklich ein Dies ist nicht wirklich ein, ähm, ähm, ein fremdes Wort oder ein spezieller Begriff, also ist es immer noch nicht ganz semantisch korrekt. Also, ähm, in Zukunft werden wir CSS verwenden, und was wir tun werden, ist, dass wir ein semantisch korrektes Tag verwenden und dann CSS, um es kursiv zu machen , so dass es so aussehen kann, wie er will, ohne semantisch falsch zu sein. Aber ich werde dir später beibringen, wie man das macht. So können wir auch Dinge sehen, wie er Zeilenumbrüche hier einen vor und einen nach diesem kursivierten Teil, der nicht auftaucht, so dass wir eine Menge von diesem Zeug sehen können, nur für jeden, der auf jeder Website zu sehen ist. So können Sie dies auf jeder Website tun, gehen Sie zu jeder gewünschten Website und überprüfen Sie die Quelle. Gehen wir zum Skill Share und schauen Sie sich die Quelle an. Ich habe hier eine Abkürzung. Okay. Für mich ist es Kontrolle. Es tut mir leid. Es ist Optionsbefehl. Sie haben Fenster gefunden, seine Kontrolle. Du Okay, so Skill teilen Dot com bin ich während der Quelle. Hier ist die Quelle. Sieh es dir an. Sie können dies auf jeder Seite sehen, und Sie können durchschauen und Sie können herausfinden, herausfinden, zum größten Teil, wie sie die Dinge gemacht haben. Dies ist tatsächlich eines der größten Lernwerkzeuge, die Sie haben, ist der View source Befehl . Gehen Sie einfach vor und sehen Sie die Quelle einer beliebigen Seite. Wenn du neugierig bist, wie sie etwas gemacht haben. Wie haben sie diese Fähigkeit zu teilen Bild bekommen? Dort können Sie die Quelle anzeigen, und da dies eine sehr komplizierte Seite ist, gibt es eine Menge Code zum Durchblättern, aber schließlich werden Sie in der Lage sein, ihn zu finden. Jetzt bin ich in der Lage, ein bisschen schneller zu finden, weil ich es tue. Ich habe das nicht für einen Lebensunterhalt getan, also kann ich Ihnen sagen, dass dies der Code für dieses Bild hier ist. Das sehe ich sofort. Nun, ich werde dich eine Weile dauern, um zu diesem Punkt zu kommen, aber du wirst es irgendwann schaffen, weil du in der Lage sein wirst, all diese zusätzlichen kleinen Dinge zu lesen , die Sinn machen werden, genau wie Parson. Du bist also an dem Teil, in dem du individuelle Buchstaben lernen willst und du denkst Wie kann jemand all diese Buchstaben einzeln lesen und Wörter formen und dann diese Wörter zusammen lesen ? So schnell, dass sie es so schnell lesen können, wie sie reden. Ich erinnere mich daran, dass ich, als ich lesen lernte , nur die Buchstaben nacheinander herausgefunden habe. Das ist ein K, das ich sagte. Und dann ist jemand, der lesen kann. Nur Gruppe liest ganze Sätze fast, sobald sie es sehen. Das ist, wo Sie gerade jetzt sind, ist ein Brief nach dem anderen. Aber du wirst es schnell aufnehmen. Da ich dies für Sie hervorgehoben habe, können wir sehen. Schauen Sie sich dieses Bild ist Schrägstrich Logo bash, Gliedmaßen Punkt PNG und ich kann tatsächlich auf sie in einigen Brüdern klicken. Die meisten Brüder, wenn Sie einen neueren Browser haben, können Sie auf Sie klicken. RL ist innerhalb der, ähm, innerhalb der Seite und versteht den Kontext. Aber ich werde mit der rechten Maustaste darauf klicken und neue Registerkarte machen und wir werden sehen, dass dies das Bild ist. Es ist das gleiche Bild war genau da. So können Sie viel erledigen. Das ist sehr mächtig und nicht hier. Sie haben nicht die volle U R l. Also, wie haben sie das gemacht? Dieser Schrägstrich am Anfang, wo die U. R L sein soll, zeigt an, dass es relativ ist. Es ist ein relativer Pfad, der direkt am Ende der Domain beginnt. Also, wenn Sie das jemals sehen, oder wenn Sie jemals einen Link setzen, dass es nicht die vollständige Domäne hat, nur seinen Verwandten zu den beiden, beginnend mit dem Schrägstrich, dann ist dies, wie es funktioniert. Wir werden später darüber reden, aber es gibt wie eine Menge Dinge, die, wenn Sie durchschauen, werden Sie in Tonnen von verschiedenen coolen Dingen laufen, die Sie lernen wollen, wie man dio und Betrachtung der Quelle ist werde Ihnen zeigen, wie es geht. Es gibt ein paar Dinge, die Sie immer schreiben müssen, wenn Sie eine Webseite erstellen, ähm, Sie müssen immer HTML Kopf und Körper schreiben, also hat es immer acht E-Mails mit Kopf und Körper Nachricht darin. Außerdem wollen Sie immer einen Titel, und es gibt noch andere Dinge. Also, was wir nennen, wenn Sie ah haben, Reihe von sich wiederholenden Code, der immer benötigt wird und Sie es nicht weiter schreiben möchten, also erstellen Sie es irgendwie und an einem Ort, wo Sie rechts kopieren und einfügen oder kopieren und einfügen können Dateien, nennen wir das ein Boilerplate. Es ist wie eine kleine Vorlage, die Sie verwenden, um Sie zu sammeln, um zu beginnen , wie Sie Ihre Seite erstellen werden. Also, wenn Sie immer diese h E-Mail, Kopf, Körper, etc. haben , Kopf , Körper, , wenn Sie Ihre Seite erstellen, möchten Sie vielleicht, wie, gehen Sie voran und tun Sie das vielleicht sogar wollen etwas wie wenn Sie Titel sind, beginnen Sie immer mit einer bestimmten Phrase und dann fügen Sie ein wenig mehr hinzu. Fügen Sie das auch in Ihrem Boilerplate ein. Und wenn du dann mit deinem Vorbild anfängst, musst du dieses redundante, wiederholende Zeug nicht machen. Du wirst schon einen guten Start für dich haben. Nun, diese Verschiebung hat tatsächlich eine Art Boilerplate eingebaut. Ich habe dir gesagt, dass du das nicht tun sollst, weil ich es dir jetzt zeigen wollte. Aber wenn Sie auf die neue Registerkarte gehen und wenn Sie hier auf eine neue Registerkarte klicken, ist es das Gleiche. Ich werde schließen, dass Sie einen neuen Tab kennen und Sie erstellen mit einem dieser kleinen Jungs, die das wieder herausziehen , weil wir es jetzt betrachten können, wenn Sie eine dieser Seiten erstellen und sich nicht einmal um das ganze Zeug kümmern, werden wir nicht in das überhaupt. Aber Sie werden in HTML CSS und JavaScript zu bekommen. Und wenn Sie interessiert sind, vielleicht sogar PHP, aber erstellte HTML-Seite und schauen Sie sich an, was kommt. Es gibt ein kleines Vorbild, das all das für dich erledigt. Denken Sie daran, wie wir HTML schließen html Kopf schließen Kopf Titel, geschlossener Titel, Körper, geschlossener Körpereingeben geschlossener Titel, Körper, geschlossener Körper mussten. Und es setzt sogar ein Leerzeichen zwischen den Body-Tags, so dass Sie beginnen können, den Dokumentkörper, den Inhalt für Ihre Seite, zu schreiben Dokumentkörper, . Und wenn du nicht titelst, gibt es dir den Titel. Ohne Titel. Jetzt sind hier ein paar besondere Dinge drin. Es gibt Ihnen ein Meta-Zeichen sagte Dies ist ein ganz besonderes Tag, das in den Kopf geht, der dem Browser sagt, welchen Zeichensatz Sie die meiste Zeit verwenden jetzt UTF ist der beste Zeichensatz zu verwenden. Dieses Programm weiß, dass es den UTF-8-Zeichensatz verwendet, also mach dir keine Sorgen darüber. Lassen Sie das einfach in Ruhe. Denken Sie daran, in der vorherigen Vorlesung, als ich Ihnen gezeigt habe, wie Sie im Klartext speichern. Sie haben vielleicht gesehen, dass es Möglichkeit gab, den Zeichensatz zu ändern, und ich sagte, Lassen Sie es einfach. Das liegt daran, wenn Sie es geändert und dann gespeichert hätten, ohne es auf den richtigen Zeichensatz zurückzusetzen , erhalten Sie seltsame Dinge wie eine Reihe von Fragezeichen oder Blöcken oder Dinge, wenn der Zeichensatz nicht korrekt ist, also lassen Sie das die meiste Zeit in Ruhe. Sie TF a ist, was Ihr Zeichensatz sein wird. Die andere Sache, die neu ist in diesem kleinen Boilerplate, das ich dir nicht gezeigt habe, ist das. Erinnern Sie sich an den kleinen Vorbehalt, als ich sagte, dass HTML immer die erste Zeile eines Dokuments ist? Es war nicht wirklich ein Vorbehalt. Es war nur eine geradlinige Lüge. Die erste Zeile jedes Dokuments ist eigentlich der Doc-Typ. Der Doc-Typ ist eine spezielle Möglichkeit, zu definieren, in welcher Art von 80 Mel Sie codieren. Es gibt tatsächlich mehrere Versionen von HTML. Nun, es gab mal. Heutzutage haben wir erkannt, dass die Verwendung mehrerer Versionen von HTML Probleme verursacht, und es hat in der Vergangenheit viele Probleme verursacht. Es gibt HTML drei. Es gibt HTML vier und 4.1. Es gab die Übergangsstandards und nicht standardmäßige Versionen. Wir haben eine Version von HTML hinzugefügt, die Kolok wirklich als Tag-Suppe bekannt wurde. Html, weil es keinen Doc-Typ hatte und der Syntax nicht ordnungsgemäß gefolgt wurde. Es folgte nicht den Standards. Und so waren es nur Tags, irgendwie wie das Zusammenwerfen in einer Suppe, und der Browser musste herausfinden, was damit zu tun ist und, zum größten Teil, blättert. Wir sind ziemlich gut darin, es herauszufinden. So sahen die alten Dokumenttypen aus. Früher hättest du das alles tun müssen. Du hattest deinem Wurzelelement trotzen. Und dann gibt es all diese anderen, wie kleine Teile davon. Also lassen Sie uns ein Beispiel sehen. Hier ist der Doc-Typ für X html. Ein Blick darauf, wie lächerlich lang es ist. Es passt nicht einmal auf die Seite. Es enthält Dinge wie einen Link zu den Spezifikationen, die Sprache. Hier ist html vier, nur regelmäßige Alter Schnee. 4.1 Schauen Sie sich dieses Chaos an und es gibt mehrere Versionstypen von Alter bis, bevor dies Standards ist . Dies ist ein Übergang, der etwas lockerer ist. Vielleicht sehen Sie das Wort locker. Und dann gibt es eine andere Version, wenn Sie Frames verwenden. Ähm, also all diese verschiedenen Dokumenttypen. Was für ein Chaos. wir nicht mehr. H, Was wir jetzt getan haben, ist, dass wir es vereinfacht haben, und es ist im Grunde nur ein HTML. Sie verwenden nur HTML. Es ist nicht ganz das gleiche wie Tags Suppe, weil Ihr Browser weiß, dass sie Standards folgen. Aber es ist ähnlich in dem Sinne, dass wir nicht weiter versuchen werden, wie genau angeben, welche Version von HTML überzogen wurden, und im Browser wird es anders rendern , je nachdem, ob Sie tatsächlich vergessen, wer in h klein 4.1 Übergangszeit. Sie müssen diese sehr spezifische Sache in einem HTML-Vierpunkt tun. 01 streng. Du musst das tun. Und jetzt brach meine ganze Seite, weil ich etwas abgewichen bin. Das wird es nicht mehr tun. Dies ist dies nicht neu in html fünf, und das ist interessant. Dies ist eigentlich der HTML-5-Dokument-Typ, aber nein, es hat keine Fünf dort. Weil wir keine Versionen mehr machen. Es ist nur das ist nur HTML. Von nun an ist es ein Lebensstandard. Setzen Sie dies immer oben auf Ihrer Seite und wissen Sie, dass es einfacher ist, jetzt, da es jemals war. 23. CSS und HTML-Sitzung in einem Baum: die Zeit ist gekommen, über CSS zu sprechen. CSS ist, dass dritte Schicht, die dritte Schale von verbessern Männer hinzugefügt Funktionalität, die auf den Kern des Inhalts geht . Im Kern haben Sie also einfach Ihren Inhalt, was Sie kommunizieren, die nächste Shell um das ist HTML, das die Bedeutung und die Struktur für das Dokument bereitstellt. Und dann oben drauf ist das CSS, das diesen Stil, das Aussehen und das Gefühl bietet . Also hakt das CSS in die verschiedenen Elemente ein, die Sie dort mit HTML eingefügt haben. Also HTML und CSS. Ihre Beziehung war irgendwie wie die Beziehung zwischen einem nerdy Kerl, der nur alle Funktionalität ist . Er ist immer so, als würde er über wirklich nerdy Dinge reden und Semantik streiten und sich Sorgen um Details darüber machen , wie die Dinge technisch bedeuten. Er verwendet Wörter wie, technisch gesehen, viel, viel, und CSS ist wie diese modische Frau, die sich immer mit Stil und Farben und der Art und Weise beschäftigt , wie die Dinge aussehen und wie sich die Dinge fühlen. Und so arbeiten diese beiden Leute auf ihre eigene Art, ah, nicht den wirklich nerdy, HTML-funktionalen Kerl alleine, sein Haus sieht schrecklich aus. Es ist nur funktionales Zeug. Er hat nichts, was gut aussieht. Es gibt keine Dekoration, es ist nichts an der Wand. Es ist einfach alles rein, was nötig ist, um Dinge zu erledigen. Er weiß nicht, wie man sich anzieht. Er kleidet sich. Aber er sagt, Dressing ist nur, wie halten Sie warm technisch hat nur eine rein funktionale Denkweise. Die Bedeutung von Kleidung ist, dich warm zu halten. Jetzt kommt CSS rein und ohne HTML ist sie alles Flaum. Es ist einfach nur Stil und es gibt keine wirklichen Inhalte. Es ist nur das alles, wie Farben und Verbesserungen und Und wenn sie zusammenkommen, , machen sie diese mächtige Sache,weil sie Funktion und Stil haben. Sie haben die Präsentationsseite und sie haben die sinnvolle Seite davon. Und wenn Sie, wenn Sie das Treffen mit einem Look and Feel zu verbessern, erhalten Sie diese schöne Kombination, die einfach wirklich funktioniert. Sie haben die Macht hinter dem Stil und Sie haben das Aussehen und Gefühl und das gut aussehende CSS hinter dem HTML. Und zusammen machen sie das wie ein erstaunliches dynamisches Duo. Also ist es wichtig, dass Sie CSS von Anfang an gelernt haben, richtig? Da Sie immer noch HTML lernen. Also haben Sie wahrscheinlich an dieser Stelle nicht viel HTML technisch bekommen, aber das ist in Ordnung. Sie müssen anfangen, CSS zu lernen, weil Sie versucht sein werden, Dinge mit HTML gut aussehen zu lassen . Und das wird einfach nicht funktionieren. Das ist, als ob man sich auf die nerdy Jungs Art und Weise verlässt. Er macht Dinge wie er trägt braune Hemden mit braunen Gürtel braune Hosen und braune Schuhe alle gleich braun, weil er denkt, dass es passt. Aber CSS kommt rein und sie hat Mode Sinn und Farbsinn, und es lässt es besser aussehen. Versuchen Sie also nicht, mit HTML zu stylen. Es ist, als wäre es wie nerdy. Äh, ja, Sie wollen sich gut kleiden, Sie wollen Ihre Website mit CSS verkleiden, verwenden Sie ihre Mode Sinn. Das ist es, worin sie gut ist. Aber verwenden Sie HTML ist gut, lassen Sie nicht Alter Geruch. Verwenden Sie HTML Verständnis dessen, was die Dinge eigentlich technisch bedeuten, sein nerdy technisches Verständnis der Dinge, weil er ist, was Ihre Website für viele verschiedene Menschen mit verschiedenen Arten von Behinderungen zugänglich machen wird , verschiedene Arten von Browsern, verschiedene Arten von Computern und sogar Nicht-Personen, Computer, die das Internet crawlen, versuchen, Informationen über Ihre Website zu erhalten. Es wird Ihre Website mit verschiedenen Teilen des Internets verbunden machen, Google, äh, das semantische Web und all das 24. CSS Syntax 1: Eigenschaften und Werte: Lasst uns weitermachen und ein bisschen CSS schreiben. Also haben wir in der letzten Sitzung über Attribute gesprochen, also macht es Sinn, dass CSS ein Attribut eines anderen Elements sein würde . Also sagen Sie, Sie gehen zurück zu Ihrer Seite und Sie haben Ihre Überschrift Ihren Index Punkt html von Ihren Hausaufgaben und Sie haben ihm eine Überschrift gegeben. Hoffentlich in h eine erste Ebene Überschrift, und Sie möchten, dass es ein wenig besser aussieht als nur der einfache alte HTML-Formatierungsstil, dort eingefügt wurde. Also, was du tun wirst, ist, dass wir Attribute hinzufügen werden. Nun, das ist ein bisschen knifflig, weil du ein Attribut hinzufügen wirst. Zuallererst, um ihm zu sagen, dass dies CSS ist, tust du dies. Der Attributname ist style. Jetzt erinnern Sie sich, wie Sie eine Attribute schreiben? Sie gehen in das h ein Element und nach dem Elementnamen nach dem Tag-Namen. Also nach dem h setzen Sie ein Leerzeichen und das ist, wo Sie die Attribute, Namen und dann gleich und in den Attributwert schreiben . Der eigentliche Name ist also Stil, weil dies Stil ist. Die eigentliche, die hinzugefügt wurden, ist CSS und der Name für die Adresse ist Stil. Okay, also Stil ist gleich und dann Anführungszeichen setzen. Und hier drin , da werden wir unser CSS setzen. Aber hier ist die Arbeit. Es ist wirklich knifflig, weil wir die Namenswert-Paar-Sache verdoppeln. Okay, du bist also so, du hast hier mehrere Schichten. Sie haben die Sie haben den Elementnamen. Sie haben den Attributnamen, und dann haben Sie die CSS-Attributnamen, die Sie haben. Sie haben den CSS-Eigenschaftennamen. Das ist eigentlich das, was wir nennen, weil es verschiedene Requisiten gibt, die wir nicht einfach haben wollen . Wie, was wolltest du hier reinlegen? Was denkst du denn? CSS UK. Also haben Sie Stil gleich und Sie setzen Ihr CSS, wenn Sie 10 Pixel setzen wenn Sie möchten, dass die Größe der Schriftart 10 Pixel beträgt? Woher weiß es, dass Sie wollen, dass das Größe und nicht die Höhe oder die Breite sein? Ähm, Sie müssen in diesen Attributen auch ein Namenswertpaar des CSS angeben, an dem Sie arbeiten. Also gebe ich Ihnen ein paar Dinge, die Sie tun können. Also zuerst, lassen Sie uns es eine andere Größe machen. Sie werden also sagen, ähm, wir werden aus der Schriftgröße B 12 Pixel machen. Wir machen es klein, nur um zu sehen, dass du kleine Überschriften machen kannst, wenn du willst. Jetzt können Sie nicht einfach 12 Pixel setzen, offensichtlich. Also, was Sie setzen, ist Schrift Bindestrich Größe Doppelpunkt 12 S. X. X. So schauen Sie es. Sieh dir das an. Das wird verwirrend, richtig? Aber Sie haben ein Namenswertpaar innerhalb des CSS, und wir können gleich nicht wieder verwenden, weil dann Stil gleich Schriftart wäre. Größe ist gleich, dass es zu viele Gleichen im Browser geben würde. Ich wüsste nicht, welche wohin gehen. Also anstelle von ungleichen Zeichen, verwenden wir einen Doppelpunkt so kämpfte Strich Größe. Jetzt benutzen Sie einfach den kleinen Bindestrich kleine Minus-Taste, genau die, die direkt auf Ihrer Tastatur ist. Neben der Plus-Taste. Es ist der gleiche Schlüssel ist der zugrunde liegende Schlüssel. Wenn Sie alte Verschiebung und so Schriftart Dash Größe Doppelpunkt 12 p x, die PX der Einheiten. Und wann immer Sie etwas haben, das eine Nummer ist, müssen Sie immer die Einheiten haben. Also, wenn Sie dies tun, speichern Sie es, Sie werden aktualisieren und sehen, dass die Gedankengröße gesunken ist. Jetzt gehen wir voran und ändern die Farbe. Lassen Sie uns eine weitere Eigenschaft und andere CSS-Eigenschaft in unserem H ein Element in unserem H ein Tag in die Stil-Attribute unseres H ein-Tags hinzufügen. OK, also mach dir nicht allzu Sorgen über die Syntax in der Semantik dessen, was ich sage. Es spielt keine Rolle, ob Sie wissen, wann ich Stil, Attribut und ein Element sage und all dies tagging, spielt keine Rolle, ob Sie genau all dem folgen was ich sage. Was wichtig ist, ist, dass, wenn Sie es so angelegt sehen, Sie verstehen, dass dies ein 18 HTML-Attribute ist, und hier ist, wo Sie all Ihr CSS setzen und dass dies die Eigenschaft ist und dies ein Wert ist . Sie müssen die Namen dieser Dinger nicht kennen. Ich benutze die Namen, die technischen Namen, aber du musst nur wissen, wie man es benutzt. Du musst nur sicher sein, dass du es nicht sagst. Versuchen Sie und setzen Sie ein Gleichheitszeichen hier oder ah, Doppelpunkt hier müssen Sie nur die Syntax kennen 25. CSS Syntax 2: Mehrere Deklarationen: Um die Farbe zu ändern, müssen wir ein anderes CSS-Attribute einfügen und wir müssen es direkt nach dieser anderen CSS-Eigenschaft setzen, die wir einfügen. Also haben wir die Schriftgröße Jetzt werden wir die gleichen Attribute innerhalb dieses Stils einfügen . Eigentlich in diesen Zitaten müssen wir in diesen Zitatenauch die Farbe setzen. Okay, also ist das alles innerhalb desselben HTML, eigentlich. Alle im gleichen Stil. Der Stil entspricht also sowohl Schriftgröße als auch Farbe. Also gehen sie beide in diese Zitate, okay? Und wir brauchen eine Möglichkeit, die eine CSS-Eigenschaft von der anderen zu unterscheiden, die Schriftgröße von der Farbe und die Art und Weise, wie wir das tun werden. Ok. Komma würde Sinn ergeben, aber wir werden nicht Comma Commons verwenden, um verschiedene Dinge wie diese zu trennen, oder? Komma würde Sinn ergeben, aber wir werden nicht Comma Commons verwenden, um verschiedene Dinge wie diese zu trennen , Wir werden einen Semikolon benutzen. Es tut mir Leid. Ich weiß nicht genau, warum sie sich für einen Semikolon entschieden haben. Ähm, in vielen Programmiersprachen verwenden Sie einen Semikolon, um eine Anweisung zu beenden, die Sie wie eine Phrase Semikolon arbeiten möchten . Im Gegensatz zu Perioden in einer Menge Programmierung ist die Welt wie in Javascript Wann immer Sie eine Anweisung haben, setzen Sie ein Semikolon am Ende so. Also setzen Sie einen Semikolon nach diesem 12 p x Semikolon. , Matt sagt,das ist das Ende dieser CSS-Eigenschaft. Und dann weiß der Browser, dass alles danach ein neues ist. Also gehen Sie vor und setzen Farbe Doppelpunkt K erinnern, nicht gleich und dann können Sie eine Farbe setzen. Jetzt gibt es viele Möglichkeiten, Farben zu setzen, und es gibt verschiedene Werte, so dass Sie Hex-Codes verwenden können. Sie können RGB-Werte verwenden, in denen Sie HTML-Farbcodes verwenden können. Jetzt wird es für dieses Beispiel am einfachsten sein, einfach den HTML-Farbcode zu verwenden. Ich weiß nicht, wie viele es vielleicht gibt, 60 oder so Namen, die man schreiben kann wie grün, rot , blau, viele der üblichen und sogar Dinge wie Schar twos. Ähm, also geh weiter und setze Grün. Wir werden es in grüne G R E ändern und weil es so geschrieben ist, müssen wir keine Einheit setzen. Also gehen Sie weiter und setzen Sie das und dann setzen Sie uns wieder ein Semikolon schließen. Auch wenn das hier ist, werden wir uns nicht trennen wollen, brauchen wir nicht. Wir brauchen es technisch nicht, um zwischen zu trennen. würdest du kein Komma ganz am Ende setzen, oder? Aber es macht nur Sinn, immer dieses schließende Semikolon nach jeder Eigenschaft zu setzen, so dass, wenn Sie jemals Dinge gemischt haben, um die Reihenfolge zu ändern, Sie nicht durcheinander werden und es ist nur eine gute Übung. Es ist irgendwie technisch korrekt. Also gehen Sie voran und setzen Sie das schließende Semi rufen jetzt. Speichern und aktualisieren Sie jetzt, und Sie werden sehen, dass die Eigenschaften angewendet wurden. So Attribute und Eigenschaften CSS-Eigenschaften die Eigenschaft, um, ist der tatsächliche Name des Stils, der jetzt angewendet wird, und Sie könnten es ein Attribut für alle nennen , die Sie bereits das Word-Attribut verwenden, um HTML-Attribute zu beschreiben. Deshalb ist dieses Vokabular so, als ob sie sich irgendwie gegenseitig abgestürzt haben. Denken Sie also daran, Attribute sind Attribute, die im HTML enthalten sind, und Eigenschaften sind alle CSS in Ordnung, und Sie werden diese nicht verwirrt, denn wenn Sie in den CSS-Kontakten sind, haben Sie nie diese Gleichheitszeichen-Syntax. Wenn Sie in der HTML-Seuin-Syntax sind, haben Sie immer das Gleichheitszeichen und Sie haben diesen Doppelpunkt oder Semikolon nicht darin 26. CSS Syntax 3: Selektoren: Sie haben gerade ein CSS geschrieben. Du kannst hier wild gehen, aber wir stoßen auf ein Problem. Und wir werden das mit dem Rektor D R Y in Ordnung bringen, wiederhole dich nicht. Das Prinzip des Trockens sagt also, dass man sich nicht wiederholen sollte, wenn überhaupt möglich. Angenommen, Sie haben mehrere Absätze und möchten jeden dieser Absätze etwas Styling setzen . Selbst wenn er wollte, haben alle Absätze das gleiche Styling. Die Art und Weise, wie Sie dies tun müssen, besteht darin, dass Sie jeden P-Elementstil gleich und dann die CSS-Eigenschaften und dann die CSS-Eigenschafteneinfügen, einfügen und in jede einfügen. Wenn Sie dann später eine Änderung vornehmen möchten, müssen Sie gehen und jedes manuell finden. Ersetzen Sie es, ändern Sie es, ersetzen Sie es nacheinander. Deshalb haben wir dieses Prinzip, d r I. Weil es sehr schwierig macht, d r I. etwas zu modifizieren und etwas zu aktualisieren, und es macht es einfach schwierig, es beim ersten Mal zu tun, nur um es beim ersten Mal einzurichten. Also hat CSS seine mächtige Fähigkeit, das CSS tatsächlich an einem Ort zu erstellen und es auf die gesamte Seite und nicht nur wahllos auf die gesamte Seite, sondern nur auf die Teile der Seite, die Sie wollten. Das ist echt cool. Der Weg, dies zu tun, ist, dass wir eigentlich aufhören werden, mit HTML-Attributen zu spielen . Wir werden an den Anfang der Seite in den Header gehen, so dass Sie HTML und dann Header in Header vor dem Body-Tag innerhalb des Header-Angriffs darin haben, werden wir ein Element namens style erstellen. Okay, also wird es die offene Karotten-Stil enge Pflege bei diesem Style-Tag haben. Und dann das schließende Style-Tag. So Stil, naher Stil. Und dann im Inneren gab es zu schreiben c assistiert wird auf die gesamte Seite gelten, so dass es Sinn macht seine in den Kopf. Alles klar, also, ähm, geh weiter und rechts. Einige CSS, die wir auf alle Absätze anwenden möchten. Also wirst du, Sag, so etwas tun müssen. Geben Sie ihm Sagen Marge, Colon. 10 p x. Dies wird einen kleinen Spielraum um alle Ihre Absätze geben. Ein Rand von 10 Pixeln. Nun sind Ränder und Polsterung ein wenig ähnlich. Und ein bisschen anders, aber darüber reden wir später. Also geben wir ihm einen Rand von 10 Pixeln. Gehen Sie voran und tun Sie das. Nun, wie haben wir das für die gesamte Seite gelten? Aber nur die Absätze. Wie machen wir es? Nun, wir werden eine kleine Klammer um den Anfang und um das Ende schreiben, um das von anderen Dingen zu trennen . Und davor werden wir den Selektor schreiben. Jetzt ist der Selektor die Art und Weise, wie wir den Teil der Seite auswählen, den wir anvisieren möchten. Wenn wir also nur alle P-Elemente auswählen möchten, alle Absätze, verwenden wir den Selektor, der nur all diese Ziele. Und es gibt eine Möglichkeit, einen HTML-Moment mit dem Tag-Namen und CSS anzusprechen. Sie setzen also den HTML-Tag-Namen des Elements, das Sie auswählen möchten, und es wird alle auswählen. Setzen Sie also P p geschweifte Klammer und dann Ihre Eigenschaft und Eigenschaftswert, und schließen Sie dann die geschweifte Klammer. Und jetzt weiß es, dass alles zwischen diesen beiden geschweiften Klammern, das ist der Stil, der angewendet werden wird, und dann der Selektor, er wird alle P-Elemente anvisieren, also kannst du Onley. Offensichtlich können Sie hier nur die Namen von HTML-Elementen einfügen und Sie können Onley HTML-Elemente einfügen , die tatsächlich in Ihrem Dokument erscheinen. Wenn Sie also keine P-Tags haben, wird dieses P nichts tun. Es wird dies nicht anwenden Dieses Muster es meine ich diese Marge auf irgendetwas. Aber wenn Sie dies tun, wird es nur auf diese p-Elemente abzielen. Wenn Sie also voran gehen und speichern und Ihren Browser aktualisieren, sollten Sie eine kleine Änderung in Ihren Absätzen sehen, wie sie sind, wie sie ausgelegt sind. 27. CSS Syntax 4: Kurse: Wenn Sie mitprogrammiert haben, während wir gehen, ist das großartig. Wenn nicht, mach dir keine Sorgen. Aber fangen Sie sofort an. Code zusammen für unser in Session Projekt. Wir werden unseren Code etwas aufräumen. Also jetzt ist unser CSS an zwei Stellen. Es befindet sich im style-Element html-Tag-Element in der Kopfzeile, und es ist in den Formatattributen HTML-Attributen im H ein Element. Okay, also müssen wir das aufräumen und alles an einem Ort platzieren. Und es ist im Allgemeinen schlechte Praxis, den Stil tatsächlich zu verwenden. Attribute, Ähm, weil es gegen d r. Warum wiederhole dich nicht. Also lasst uns unsere Seite ein wenig austrocknen. Und lassen Sie uns diese beiden Regeln die Regel über die Absätze und die Regel über die Überschrift der ersten Ebene in unser Style-Element in unser Style-Tag einfügen. Was ich möchte, dass Sie nur das CSS aus dem style-Attribut kopieren. Das ist im H-Ein-Tag. Denken Sie also daran, dass der Attributname Stil ist. Dann gibt es ein Gleichheitszeichen, und dann haben Sie in Anführungszeichen den Attributwert Kopieren Sie also den gesamten Attributwert, ohne die Anführungszeichen, nur den Wert. Das erste, was wird F für den Schriftstil sein. Das Letzte wird das letzte Semikolon sein. Also kopieren Sie all das und gehen Sie dann in Ihr Style-Element oben in der Kopfzeile und finden diejenige, die Sie die Regel, die Sie über die Absätze geschrieben haben und darunter ein paar Treffer ein paar Mal eingeben und das CSS, das Sie gerade kopiert haben, direkt dort darunter. Jetzt haben Sie also die Absatzregel, die die Absätze und dann die geschweiften Klammern für die Selektoren auswählt, eher für die Eigenschaften dieser Regel und dann darunter haben Sie diese zufälligen CSS-Eigenschaften, die nicht überall. Also möchte ich sehen, ob Sie herausfinden können, wie Sie es dieses zufällige CSC CSS anvisieren, das Sie es einfach einfügen, Sehen Sie, ob Sie selbst herausfinden können, wie Sie es zum Ziel machen. Nur das h ein Element. Okay, also pausieren Sie jetzt und versuchen Sie es. Und mach dir keine Sorgen, wenn du es nicht rausbekommen hast, aber lass mich dir erklären, wie es geht. Was du dio willst, ist, dass p Das war oben für Absätze als Modell, und du wirst einen anderen Selektor für nur dieses H schreiben. Also, was Sie schreiben, ist H ein, das H ein Element oder H ein Steuerelemente und Tags wählt, die ich austauschbar verwende. Sie wählen das H mit, und dann legen Sie die geschweiften Klammern um alle Regeln, die von diesem Selektor verwendet werden . Sie haben also die ganze Regel. Und dann innerhalb dieser Regel sind die Komponenten der Selektor, und dann befinden sich die Eigenschaften und und Eigenschaftswerte und die Eigenschaften innerhalb dieser geschweiften Klammer . Also geh weiter. Und wenn Sie es nicht ganz richtig verstanden haben, reparieren Sie Ihren Code und speichern Sie ihn und aktualisieren Sie und sehen Sie, was Sie haben. Jetzt haben wir zwei Regeln. Eine Regel über Absatz-Tags oder Absatzelemente und eine Regel über das H ein Element, so dass wir hier auf ein Problem stoßen könnten, besonders wenn Sie Ihr H ein Element toe Stil nur dann formatieren möchten, wenn es sich an der Spitze Ihrer Seite, aber du wolltest Zeh. Sie möchten auch Überschriften der ersten Ebene in anderen Teilen Ihrer Seite verwenden, aber Sie möchten nicht, dass sie wie die oberste aussehen. So gerade jetzt, wie der P-Selektor alle P-Elemente auswählt, wenn Sie eine Kirche unten auf Ihrer Seite einfügen und Sie diese Regel nicht ändern, werden Sie alle gleich aussehen. Also, wie wollen wir nur diejenige anvisieren, die wir oben wollen? Nur das Top. Die Methode, die wir verwenden, ist, dass wir eine Klasse zuweisen müssen. ich jetzt. Es tut mir leid, wenn dieses Vokabular nur verwirrend außer Kontrolle gerät. Aber wenn Sie darüber nachdenken, macht es Sinn, dass wir zwei Klassen von H eins Elemente haben. Wir haben die oberste Ebene, die wir auf eine Weise aussehen wollen, und dann haben wir eine zweite Klasse von all diesen anderen Klasse oder Typ oder Kategorie. Also haben wir zwei Kategorien zwei Klassen von H ein Elemente und die Art und Weise, wie wir CSS verwenden müssen . Verwenden Sie HTML, um CSS zu sagen Die Unterscheidung zwischen diesen Kategorien ist durch Zuweisen einer Klasse HTML hat eine andere Attribute namens Die Klasse Attribute den Namen der tatsächlichen seine Klasse und der Wert ist jede Klasse, die wir ihm geben. Also sollten wir tatsächlich diese Klassenattribute zu diesem ersten H ein Element hinzufügen. Also gehen Sie zu Ihrem H ein Element. Und übrigens, löschen Sie den Stil gleich Attribute, die wir nicht mehr brauchen. Also geh einfach weiter und lösche das. Und stattdessen werden wir ein Attribut in die H eine Elementklasse schreiben und dann Anführungszeichen setzen und dann innerhalb dieser Anführungszeichen einen Klassennamen bilden. Sie können einen beliebigen Klassennamen erstellen. Wir könnten dieses Top zuerst nennen, weil es die Spitze oder die erste Überschrift ist. Und dann werden der Rest der H, wenn wir sie später schreiben, in einer anderen Klasse sein. Also geh voran und gib ihm zum Beispiel die Klassenspitze . T o p. Innerhalb der Anführungszeichen. Nun, was wir tun werden, ist, dass wir nach oben gehen, und wir werden angeben, dass wir nur die h eins Elemente wollen, die diese Spitzenklasse Zehe haben, die Codierung haben, die wir setzen. Also finden wir, dass diese Regel zu Ihrem Stilelement scrollen und finden die Regel, die wir für die H geschrieben haben . Und jetzt, wie werden wir das ändern, so dass es auf Leasing wählt. Es zielt nur auf die H, die die Klassenspitze haben. Also werden wir in diesen Selektor gehen, weil wir ändern, was er auswählt, was er zielt. Und wir können nicht einfach richtig oben, denn mit unserer Syntax, wenn Sie hier nur ein Wort schreiben, wird es denken, dass es ein HTML-Moment ist, oder? Also brauchen wir eine Möglichkeit zu unterscheiden, dass Dies ist nicht nur ein HTML-Element ist nicht auf der Suche nach oben. Es sucht nach einer Klasse namens top in der Art, wie wir es tun. Dies ist mit einem Punkt oder einer Periode, also setzen Sie einen Punkt und dann das Wort oben. Also kein Leerzeichen zwischen dem Punkt und dem Klassennamen, um Punkt und in den Klassennamen in diesem Fall oben zu setzen . Und das wird dem Browser sagen, dass wir nach etwas suchen, das einen Klassennamen von top hat , und wir können es tatsächlich auch an das H ein Element anhängen. Also für jetzt, lasst uns die Dinge vereinfachen, um das H ein Element zu essen. Ich werde Ihnen zeigen, wie Sie sie später verbinden, aber im Moment, genau richtig Punkt t O P. genau richtig Punkt t O P.An Stelle, wo das H so kein Leerzeichen zwischen dem Punkt und dem Klassennamen war. nun Wenn Sie diesnunspeichern und aktualisieren, wird keine Änderung angezeigt, da sich die Klasse auf demselben Element befindet, das früher auf Elemente zielte, die denselben Ort abzielen. Es wählt den gleichen Ort aus, aber es wählt ihn auf eine andere Art und Weise aus. Anstatt den Elementnamen oder den Tag-Namen zu verwenden, wird es mit dem Klassennamen ausgewählt. Also, jetzt, wenn wir andere H ein Elemente niedriger in der Seite schreiben wollen, werden sie von diesem Selektor nicht gezielt, es sei denn, wir geben es. Diese Klasse ist gut, also gehen Sie vor und schreiben Sie ein paar der H ein Elemente. Wenn Sie neugierig sind und Sie werden sehen, dass, wenn Sie diese anderen schreiben und speichern und dann Ihren Browser aktualisieren, sie sehen anders aus. Sie haben nicht das gleiche CSS auf sie angewendet 28. Einführung in die DOM: Ich möchte Ihnen eine Strategie mit einem wirklich coolen Tool beibringen, das wahrscheinlich bereits in Ihrem Browser integriert ist . Es heißt also das Browser-Inspect-Tool, und was es tut, ist es Ihnen erlaubt, die Quelle der Seite auf eine wirklich besonders nützliche Weise anzuzeigen . In der letzten Lektion haben wir gelernt, wie man die Quelle anzeigt. Also, die meisten Windows-Computer, es kontrolliert Sie. Es könnte etwas wie Befehlsoption Sie Wenn Sie auf einem Mac sind oder wenn Sie wie in Internet Explorer oder einem anderen Browser sind , müssen Sie möglicherweise in das Menü Ansicht gehen und Geschäfte finden. Also geh weiter und mach das noch mal. Jetzt sind ein paar in der Lage. Was Sie jetzt sehen werden, ist auf Ihrer Seite. Sie sehen, dass der Code, der in der Quelle angezeigt wird, fast identisch mit dem Code ist, der in Ihrem Texteditor ist, was Sinn macht, weil er Ihnen die Quelle zeigt. Und natürlich können Sie die Quelle jeder Seite im Internet anzeigen. Ähm, aber es ist eigentlich nicht das hilfreichste, weil , besonders auf größeren Seiten, es, besonders auf größeren Seiten,wirklich schnell außer Kontrolle gerät. Es ist schwer, durch all dieses Zeug zu blättern und genau das zu finden, wonach Sie suchen. Es gibt also einen besseren Weg. Und das ist auch besonders nützlich für das Schreiben von CSS, weil es Ihnen erlaubt , äh, Änderungen am Code vorzunehmen, nur temporäre Änderungen, die sie wollen. Du bist nicht in der Lage, sie zu retten, aber ich zeige dir, wie das geht. Das Browser Inspect Tool hat unterschiedliche Namen in verschiedenen Browsern. Ähm, viele Browser werden es den Dom Inspector nennen, den Hund und der Grund, warum wir es nennen, ist, weil es tatsächlich auf das Dom schaut. Jetzt. Was ist der Hund? Nein, nein. Dom klingt beängstigend, aber es ist nicht beängstigend. Haben Sie keine Angst von Don. Hey, Don Sands für Dokumentenobjekt-Modell. Mach dir keine Sorgen darüber. Sie sich keine Sorgen, sich daran zu erinnern, wofür es steht, aber was es ist, ist es im Grunde der Quellcode. Erinnern Sie sich, wie wir in der letzten Sitzung die Quelle angesehen haben und wir in der Lage sind, den Quellcode,den gesamten HTML-Code und all das Zeug, das da drin war, zu betrachten Quellcode, ? Das dom ist auch die Quelle könnte, aber es ist nicht genau der Quellcode. Der Quellcode ist nur der Quellcode. Der Code, wie Sie ihn geschrieben haben. Das dom ist die Computer, die diesen Quellcode verstehen. Es ist wie eine theoretische mentale Karte des Quellcodes, den der Browser im Kopf hat. Also ist es so, als würde meine Frau mir eine Einkaufsliste schreiben, ähm, und sie könnte sich tatsächlich wie Anweisungen aufschreiben. Tun Sie das, diese das, und diese Reihenfolge. Und, ähm, ich lese die Liste. Aber während ich im Laden herumlaufe, lese ich vielleicht nicht immer diese Liste. Ah, Wort für Wort. Während ich gehe, habe ich irgendwie eine mentale Liste in meinem Kopf aufgestellt. Also diese mentale Liste ist Es sollte sein, wenn ich nicht albern bin, wenn ich die Dinge nicht vergesse, sollte es sein. Dasselbe ist, was auf der tatsächlichen physischen Liste steht. Aber die mentale Liste ist wie abstrakt und theoretisch und getan, also organisiere ich es vielleicht ein bisschen anders. Ich denke vielleicht nicht, vielleicht denke ich nicht genau so, dass die Liste geschrieben ist , und vielleicht mache ich sogar einige kleinere Änderungen, wie wenn es einen Rechtschreibfehler gab oder ob sie etwas Seltsames in der Liste gemacht hat. Ich mag es vielleicht, es zu reparieren, damit es in meinem Gehirn Sinn macht. Und Browser machen sehr ähnliche Dinge mit dem Code. Sie lesen den Code, und dann analysieren sie ihn. Wenn ein Browser liest, wird der Code Parsing genannt, so dass sie den Code analysieren, und dann erstellen sie dieses dom, dieses mentale Verständnis, dass das die Struktur der Seite ist. Es ist nicht immer genau das gleiche wie der Quellcode, den Sie geschrieben haben. Zum Beispiel, es entfernt den Leerraum, wenn Sie Leerzeichen setzen und drücken, geben Sie Hit Return. Der Browser braucht diesen Leerraum nicht wirklich, um zu verstehen, wieman , wie die Seite erstellt. Das ist also kein Teil des Domes. Und wenn Sie zum Beispiel eine schlechte Syntax haben und Sie einige Fehler in Ihrem Code machen, und wenn es in der Lage ist, das zu korrigieren, wenn es herausfinden kann, was Sie meinten, sagen wir, zum Beispiel, Sie, ähm, Sie schreiben ein Listenelement und Sie setzen das Start-Tag und dann die Liste, aber dann setzen Sie nicht das schließende Listenelement Tag und dann starten Sie ein neues Listenelement, also ist der Browser jetzt schlau genug zu sagen: OK, Listen sind immer nacheinander. Es gibt keine anderen Elemente, die zwischen ihnen kommen können. Und wenn ich also eine andere Liste sehe, die Adam beginnt, dann gehe ich davon aus, dass diese letzte endete, also wird der Browser in seinem Dom das schließende Listenelement Tag für dich in sein Dom setzen . Also werden wir in den Kopf des Browsers mit dem Dom-Inspektor zu sehen bekommen. Wir werden diesen Code tatsächlich sehen, während er in diesen Baum geparst wird. Also wir normalerweise, was wir sehen, ist die gerenderte Version dieses Codes. Aber jetzt werden wir den eigentlichen Quellcode sehen, wie er im Kopf des Browsers ist. Hier sind THIEVE-Videos, wie Sie das Browser-Inspect-Tool für den Browser einrichten und laufen lassen, den Sie verwenden 29. Chrome DOM Inspect: chrome ist vielleicht der einfachste Browser, um das Browserinspektor-Tool zu verwenden. einfach rechts, Klicken Sieeinfach rechts,und gehen Sie zu inspizieren Element. Dies öffnet das Inspect-Tool mit Ihrem dom-Baum auf der linken Seite und Ihre Zellen standardmäßig auf der rechten Seite . Und Sie können natürlich natürlich Ihre verschiedenen Optionen hier und dann entlang der Spitze auswählen. Hier sind die Dinge, die ein wenig später in den Kurs geraten. Nun, wenn Sie das in seinem eigenen separaten Fenster lösen wollen, verwenden Sie das und dann, um es wieder nach unten zu bringen und es wieder in den Schmerz dort unten zu befestigen. Sie verwenden das, und wenn Sie es dann vollständig schließen möchten, können Sie diese Schaltfläche hier verwenden. 30. Firefox DOM und Firebug: in Firefox, um zu Ihrem Dom, Inspector zu gelangen , können Sie voran gehen und mit der rechten Maustaste klicken und nach unten gehen, um Element zu inspizieren. Nun, das wird diese kleine Brotkrume Dom-Lage auf der Unterseite bringen und Sie müssen ein wenig mehr tun , um die volle Dom Inspektion zu bekommen. Dieses kleine Symbol hier wird also den vollen Dom Baum aufrufen , den Sie dann durchblättern können. Und wenn Sie auf die verschiedenen Elemente klicken, sehen Sie, es hebt die verschiedenen Teile der Seite hervor. Nun, wenn Sie das CSS sehen möchten, gehen Sie nach unten zum Stil und klicken Sie darauf, und das zeigt Ihnen die verschiedenen Stile für die verschiedenen Elemente. Also sagen wir, ich wollte den Stil dieser Überschrift hier sehen. Ich kann mit der rechten Maustaste klicken, gehen Sie inspizieren Element, und Sie sehen, dass es mir die Stile dafür gegeben hat. Dieses Element genau hier. Jetzt können Sie auf dieses kleine Symbol klicken, und dann wird es Ihnen erlauben, das Element dynamisch zu sehen, wie Sie nur mit der Maus über das Ding auf der Seite bewegen, anstatt einzeln mit der rechten Maustaste klicken zu müssen. Das ist also ein cooles kleines Feature. Und dann kannst du das auch hoch machen und das verbergen. Sie können diese drei D-Ansicht tun und dies wird Ihnen zeigen, wie Ihre Seiten aufgebaut und geschichtet wurden. So zeigt dies die verschiedenen Elemente Luft Art gestapelt, und Sie können eine Vorstellung davon bekommen, wie Ihre Seiten Bill, Sie können meine Links sehen. Es sind gesetzt, ähm, ein wenig dort, dort, ein zusätzliches Element innerhalb des Absatzelements. Das ist also eine coole, kleine Zukunft. Dies ist also ein Standard-Firefox Dom Inspector, und Sie können es nicht in sein eigenes Fenster ausblenden, soweit ich es sagen kann. Ähm, aber du kannst es damit schließen, aber du darfst es. Möglicherweise möchten Sie Firebug für Firefox erhalten. Firebug ist irgendwie einer der originalen, ähm, ähm, Dom-Inspektoren. Es war eine Anzeige auf ursprünglich, Also gehen Sie zu firebug dot com und installieren Sie es. Sie können es tatsächlich für viele verschiedene Browser installieren, aber es war ursprünglich für Firefox ist, warum es Firebug genannt wird. Klicken Sie also darauf und gehen Sie durch den gesamten Installationsprozess. Es dauert mich auf Stopp Mozilla dot org hinzufügen, das ist der vertrauenswürdigste Ort, um Firefox hinzufügen auf. Du willst also definitiv hierher kommen, um es herunterzuladen? Sie könnten einfach gehen, um auf Stopp Mozilla hinzuzufügen, sterben oder gehen Sie und machen Sie eine Suche nach Firebug, wenn Sie den Prozess abkürzen möchten. Also, jetzt wurde Firebug installiert. Ich kann die Fenster schließen. Und jetzt, wenn ich hier mit der rechten Maustaste klicke, werden Sie sehen, um Elemente zu inspizieren. Das könnte verwirrend sein, wenn Sie Firebug installiert haben. Dies ist der Standard-Firefox-Inspektor und dieses Inspect-Element mit Firebug. Das ist der Firebug Inspect, Inspector. Wenn Sie also darauf klicken, sieht es ein wenig anders aus. Jetzt sieht dies mehr ähnlich wie Chrome aus. Dies ist das ist ähnlich wie Kriminalität. Sie haben den Dom-Inspektor hier und das ah CSS hier auf der rechten Seite, und Sie können die verschiedenen Optionen in Ihrem CSS und dem Dom auswählen. Der dumme Baum ist zusammenklappbar. All das Und dann ist hier die gleiche Option, wo Sie irgendwie hervorheben können Wenn Sie es in sein eigenes Fenster öffnen möchten , können Sie dieses Symbol verwenden, das es in sein Fenster öffnet und dann, um es zurück zu bringen, können Sie den Aufwärtspfad verwenden Taste nach unten. Irgendwie minimiert. Und dann schließt dieser X-Button ihn vollständig. Also werden wir schneller kommen, wenn Sie das Minimieren anstatt das X verwenden, das ich glaube, es ist der Unterschied da ist. Also nochmal, versteh nicht Ah, lass dich nicht verwirren. Sie können es deaktivieren. Wenn du verwirrt wärst. Aber lassen Sie sich nicht durch den Unterschied zwischen diesem Inspect verwirren. Das ist der Firefox. Inspection und dann inspizieren mit Firebug. Das ist der Firebug. Inspection. Also, ähm, ich empfehle irgendwie, Firebug zu verwenden. Ich mag es wirklich. Der Standard-Firefox-Eins ist nicht zu schlecht. Wenn Sie sich an dieses Layout gewöhnen können. Ähm, es ist ein bisschen anders als das, was ich auf Chrome benutze. Und es ist anders als das, was ich von Firebug gewohnt bin. Also schlage ich vor, Firebug wieder. Die Mädchen bekommen firebug dot com 31. Internet Explorer DOM Inspect: Sie können einen Browser im Spektralbereich in Internet Explorer verwenden, obwohl ich es nicht empfehle. Beginnend mit I sieben und bis zu neun. Das ist Internet Explorer neun. Sie können eine F 12 tun, um den Browser und das Spektral zu erhalten, so dass Sie nicht mit der rechten Maustaste klicken und das Inspekt-Element-Menü finden können. Aber was du tust, ist F 12 zu treffen. Ähm, und Sie werden sehen, dass dies tatsächlich sehr hilfreich ist, um Internet Explorer zu testen. Also schlage ich nicht vor, dass Sie in Internet Explorer mit diesem Inspect-Tool entwickeln, aber Sie müssen testen. Und so schlage ich vor, dass Sie die neueste Version von Internet Explorer 10 erhalten, wenn es herauskommt. Und dann können Sie dies verwenden, um Ihren Modus zu wechseln, damit Sie testen können, ob er in einem Explorer Acht oder Internet Explore gleich aussieht . Sieben. Gehen Sie weiter und ändern Sie die ah verschiedenen Versionen hier, und es wird Ihnen ein sehr genaues Bild davon geben, was es wie Internet Explorer acht rendern würde. ändern Sie die ah verschiedenen Versionen hier, und es wird Ihnen ein sehr genaues Bild davon geben, was es wie Internet Explorer acht rendern würde Wie es in Ihrer Einheit rendern würde, erkunden Sieben. Ähm, aber in Bezug auf das Dom-Crawling, können Sie darauf klicken, und es wird Ihnen irgendwie zeigen, ähm, das CSS auf der rechten Seite und dann, wenn Sie sehen wollen, wie es auf der Seite aussieht, Sie können auf diesen Pfeil klicken, und wenn Sie dann auf ein anderes Element klicken, wird es Drilldown und finden es. jedoch Sie können diesjedochnicht auf die gleiche Weise bearbeiten, wie Sie es in anderen Dom-Inspektoren tun können. Du musst hier neue Elemente hinzufügen, und es hat eine Menge Macken, die dich vermasseln werden. Sie sollten sich also definitiv etwas damit vertraut machen, weil Sie einen Internet Explorer testen müssen . Aber zum größten Teil, Sie werden dies nur verwenden, um irgendwie zu verfolgen, was Sie suchen. Alle diese unterscheiden sich also sehr, sehr von den Standard-Inspect-Optionen in den anderen Browsern. Also, wirklich, das verdient sein eigenes separates Video, nur in die Details all dieser. Aber für diese Lektion werde ich nur sagen: Verwenden Sie Internet Explorer nicht, weil es nur Ihr Leben erschweren wird 32. Safari Mac Inspect: für Safari auf dem Mac. Sie können nicht direkt in den Browser gelangen. Überprüfen Sie das Werkzeug sofort, indem Sie mit der rechten Maustaste klicken und das Inspect-Element finden. Ähm, Menüpunkt. Zuerst müssen Sie zu den Einstellungen gehen und zu diesem allerletzten Tab übergehen. Abschnitt hier fortgeschritten. So wird es beginnen. Allgemein Gehe zu erweiterten und klicken Sie auf diese Show Entwickeln Menü in der Menüleiste. Ich merke hier oben, dass es dieses kleine zusätzliche Menü ermöglicht. , Sobald dieses Menü aktiviert ist,haben Sie die Möglichkeit, weiter zu gehen und klicken Sie auf Show Web Inspector und einige andere coole Sachen hier. Aber noch wichtiger ist, dass Sie jetzt, da Sie dieses Menü aktiviert haben, rechten Maustaste klicken können, und es gibt den Menüpunkt Element überprüfen. Also die Web-Inspektoren ein wenig anders in Safari in der Mitte. Hier haben Sie den Dom, und dann auf der rechten Seite ist Ihr CSS. Aber du hast ein paar Optionen von dem, was auf der rechten Seite erscheinen wird. Diese geschweiften Klammern bedeuten das CSS, also gehen Sie weiter und klicken Sie darauf, denn das ist, was Sie die meiste Zeit brauchen werden. Also diese geschweiften Klammern und dann eine Menge davon ist sehr ähnliche Stil-Regeln, um, Stil-Attribute zeigen Ihnen die HTML-Attribute. Und dann gibt es diese Luft, die ähnlich ist wie was? Sie sind auf anderen Browsern auf der linken Seite. Hier, du hast, ähm, viele verschiedene Dinge, die in dieser Luft laufen. Die verschiedenen Registerkarten, die Sie durch klicken, dass auf den meisten Browsern inspizieren wie auf Chrome, zum Beispiel sind nur entlang der Spitze hier, Also das ist ein wenig anders. Aber wenn du mich siehst und chrom durchklickst, um zu gehen, wie die Timeline und all die anderen kleinen Dinge, das ist, wo sie in diesem sind. Und um zurück zum Dom zu kommen, musst du darauf klicken und hier gehen. Also zum größten Teil verstecke ich dieses Panel einfach. Sie haben diese coole Fähigkeit und Safari, um dieses linke Panel zu verstecken oder dieses rechte Panel auszublenden. Wenn Sie laufen wollen, verstecken Sie es und ah, und so gibt Ihnen etwas Flexibilität. Nun, wenn Sie dieses Fenster als eigenes frei schwebendes Fenster trennen möchten, können Sie auf diese Schaltfläche klicken. Wenn Sie docket lesen möchten, klicken Sie zurück und dann, wenn Sie es wieder schließen möchten, klicken Sie es direkt hier. 33. Safari Windows DOM Inspect: Safari unter Windows ist ein wenig anders, um in das dom zu gelangen, inspect-Tool standardmäßig. Es wird wahrscheinlich hier sein, wenn Sie rechts, klicken und gehen Sie zu inspizieren Element. Aber es gibt eine Chance, dass Sie in die Einstellungen gehen müssen und klicken Sie auf diese letzte Registerkarte die erweiterte Registerkarte, und überprüfen Sie diese Schaltfläche So diese Show entwickeln Menü in der Menüleiste kann in Ihrem deaktiviert werden wie es auf Mac standardmäßig ist. Sie sehen also, dass sich nichts wirklich geändert hat, aber jetzt bekomme ich die Inspektionsleiste nicht. Wenn Sie also wirklich sehen wollen, wovon es spricht, können Sie die Menüleiste hier jetzt anzeigen. Hier oben wirst du sehen, dass es kein entwickeltes Werkzeug gibt. Aber wenn ich in diesen Gang gehe und zu Einstellungen gehe und dies dann überprüfe, die entwickelte Menüleiste angezeigt und verschwindet, wenn sie da ist. Dann erhalten Sie das Inspect-Element, und Sie können dieses Zeug auch hier verwenden. Also geh weiter und hol das Inspect-Element, und dann hast du den Dom Baum auf der linken Seite, das CSS auf der rechten und dann den Breadcrumb dom Trail hier unten und all diese verschiedenen Elemente hier oben . Dies ist sehr ähnlich, wie es in Chrom ist. Die Fenstersafari ist Krümel sehr ähnlich. Element inspizieren. Also, wenn Sie in Windows sind, ist das ziemlich ähnlich wie mit Chrome. Sie können es lösen, indem Sie auf diese Schaltfläche klicken, und dann, wenn Sie es erneut anhängen möchten, können Sie diese Schaltfläche hier verwenden und dann, um es zu schließen verwendet diese Schaltfläche hier oben. 34. Verwendung des DOM Inspect Tool: Im Allgemeinen, was Sie tun werden, ist zu finden, dass inspizieren und in der Unterseite Ihres Browsers, es wird Pop-up dieses ganze magische Web-Entwickler-Wunderland von all diesem Zeug. Das erste, was Sie sehen werden, ist auf der linken Seite das Dom wieder, nur dieses mentale Verständnis des Quellcodes. Aber es ist perfekt strukturiert und irgendwie fixiert. So werden Sie manchmal sehen, dass die Elemente Luft ineinander zusammenbrachen, also haben wir letztes Mal über das Verschachteln gesprochen. Wenn Sie also ein Element haben, das innerhalb eines anderen Elements ist, das sich innerhalb eines anderen Elements befindet. Der Browser zeigt möglicherweise an, dass diese ausgeblendet sind, sodass Sie nur das oberste Element und die Children Elemente sehen. Die abhängigen Elemente sind tatsächlich drin, aber Sie können ihn nicht sehen, es sei denn, Sie klicken ein kleines Plus, aber Schaltfläche oder Symbol, und dann werden Sie irgendwie, wie, sehen, es erweitern. Das ist also tatsächlich eine sehr effiziente Möglichkeit, Code zu durchlaufen und selbst ein Gefühl dafür zu bekommen. Also gehen Sie weiter und schauen Sie sich den Dom an und erkunden Sie ihn ein wenig und sehen Sie, ob Sie Ihre Seite sinnvoll machen und verstehen können . Angenommen, Sie möchten die Größe unserer Überschrift ändern, weil sie Überschrift zu klein ist, aber wir wollen nicht zu unserem Code gehen, die Schriftgröße ändern, zurückgehen und aktualisieren, sehen und überprüfen, ob es die Größe ist, die wir gesucht. Und dann, wenn es nicht die richtige Größe ist, gehen Sie zurück zu unserem Code. Ändern Sie die Schriftgröße erneut. Erraten Überprüfen Sie, um unseren Browser zu überprüfen, um zu sehen. Es ist immer noch nicht ganz die richtige Größe, hin und her. Das könnte lange dauern. Eines der coolen Dinge an diesem Tool ist es Ihnen erlaubt, Ihre Seite innerhalb des Browsers zu ändern , ohne den Code zu beeinflussen. Wo du modifizierst, ist die Morgendämmerung. Sie ändern das mentale Verständnis dieser Seite des Browsers. Jetzt werden Sie nicht in der Lage sein, diese Änderungen zu speichern, aber es wird Ihnen helfen, wie spielen Sie mit ihm ein wenig und sehen Sie es, wie Sie mit ihm spielen, um die bekommen, was Sie suchen. So in deinem Dom. Inspector, gehen Sie vor und bringen Sie den Mauszeiger über eines der Elemente, und Sie haben. Es gibt einen Unterschied zwischen dem Setzen des Cursors über das Element. Benennen Sie den tatsächlichen Tag-Namen und dann die gleichen Werte und Attribute, die darin liegen. Also, wenn Sie es über die AK Tribut, zum Beispiel, es ist nicht ganz das gleiche ist es über die Elemente setzen. Also, wenn ich sage, legen Sie es über ein Element, um es über Angriff zu setzen, meine ich den Tag-Namen. Und wenn Sie dies tun, während Sie es über verschiedene Elemente verschieben, werden Sie sehen, dass es im Browser auf der Seite hervorgehoben ist. Sie können sehen, dass es Ihnen tatsächlich zeigt, welches Element hervorgehoben wird. Es gibt Ihnen die Umrisse davon, und es wird Ihnen die Ränder und die Polsterung in verschiedenen Farben zeigen. Jetzt ist dies in verschiedenen Browsern anders, aber oft ist der Rand lila und die Polsterung ist gelb und die Größe davon rückwärts. Wie auch immer, du wirst dich in der Zukunft daran gewöhnen, aber ich zeige dir die Höhe. Die Breite zeigt Ihnen, wo es ist, Und wenn Sie darauf klicken, klicken Sie erneut auf den Elementnamen. Klicken Sie nicht wie das Betätigungselement an. Klicken Sie auf den Elementnamen den Tag-Namen und dann in diesem rechten Schmerz. Was Sie sehen werden, ist das CSS, das darauf zutrifft, also wird dies auf komplizierten Seiten sehr groß sein. Sie müssen viel durchblättern, aber auf einer einfacheren Seite ist es ein bisschen einfacher. Also wieder auf verschiedenen Browsern gibt es verschiedene Möglichkeiten, dies zu zeigen. Aber eines der kleinen Fenster, die sie haben, ist, ähm, die CSS-Regeln, die auf dieses Element angewendet werden. Eso an der Spitze, sehen Sie manchmal eine leere Regel für Sie Zehe setzen neue Dinge in, und dann werden Sie in der Regel von den meisten spezifischen Chili spezifischen kategorisiert sehen. Und mach dir noch keine Sorgen darüber, was das bedeutet. Wir werden später darüber reden, aber es bedeutet im Grunde die Dinge, die Luft anwenden, dass, die höher sind. Priorität zu niedrigere Priorität. Ah, Liste aller Regeln und Sie werden sogar den Standardbrowser sehen. CSS-Regeln, so dass Sie tatsächlich sehen können. Wirklich, Sie können den Mut von all dem sehen. Sie können die ZSVA sehen, die Sie nicht geschrieben haben. Es ist nur ein Teil des Browsers. Defaults erreichten ihn. Cool. Klicken Sie jetzt auf Ihr H ein Element, das,für das wir die Klasse geschrieben haben, und denken Sie daran, auf den Tag-Namen zu klicken, damit Sie sehen, ob Sie es in diesem richtigen Bereich finden können. Klicken Sie jetzt auf Ihr H ein Element, das, für das wir die Klasse geschrieben haben, und denken Sie daran, auf den Tag-Namen zu klicken, damit Sie sehen, ob Sie sollten in der Lage sein, diese Klasse den Selektor zu finden, der die Klasse und dann die ganze Regel enthält. Die verschiedenen Eigenschaften, die Sie geschrieben haben, um und sagen, dass Sie die Größe Doppelklick in den Wert der gekämpften Größe ändern möchten, und Sie werden sehen, dass es sich von einer Art wie unbearbeitet ble zu einem essbaren Zustand ändert. Jetzt ist das ein wenig knifflig, weil verschiedene Browser dies auf eine andere Weise tun. Und auch sie ändern manchmal die Art und Weise, wie dies zwischen Browserversionen funktioniert. Es könnte also ein bisschen anders auf Ihrem System sein. Aber es ist normalerweise DoubleClick innerhalb des mit innerhalb des Eigenschaftswerts, um es in seinen Kräuterzustand zu gehen . Und wenn das nicht funktioniert, müssen Sie vielleicht einfach so rumklicken und verschiedene Dinge ausprobieren, bis Sie es für Ihren Dom-Inspektor funktionieren. Aber irgendwann, wenn Sie herausfinden, wie Sie mögen, was die Technik ist, es in diesen glaubwürdigen Zustand zu bringen , und dann können Sie es bearbeiten, so dass Sie ein paar Dinge tun können, können Sie einen neuen Wert eingeben und dann richtig sehen dort, ändern Sie sich direkt vor Ihren Augen. Oder Sie können, wenn es so etwas wie eine bestimmte Anzahl von Pixeln ist, wie nummerische Einheiten. Und dann ist da noch die Einheit. Danach können Sie die Pfeiltaste nach oben und unten verwenden, und das wird tatsächlich durch Art von blättern, und Sie werden sehen, wie Sie aktualisieren, wie Sie die oben und unten Cherokee verwenden, um den Wert zu erhöhen oder zu verringern, so dass Sie in der Lage, es tatsächlich ändern Seiten zu sehen, und Sie beschränkt nur die Größe, die Sie wollen, auf, Ben, können Sie. Sie können dies bearbeiten. Entschuldigung. Sie können dies die Menge ändern, die nach oben und unten geht, wenn Sie die Cherokees verwenden, indem Sie Shift und, äh, Ault und Kontrolle manchmal verwenden, um es zu größeren Sprüngen oder kleineren Sprüngen zu machen. Aber gehen Sie weiter und spielen Sie damit ein wenig, bis Sie die gewünschte Größe bekommen. , Sobald Sie es in der gewünschten Größe haben,denken Sie daran, daran, wenn Sie diese Seite neu laden, werden Sie diese Änderung verlieren, weil dies nur eine Änderung des Domes ist. Es ist nur das Verständnis der Seite durch den Browser. Sie haben den Code nicht geändert, also müssen Sie den Code tatsächlich ändern, damit das, was Sie tun, ist, sobald Sie ihn auf die gewünschte Größe bekommen, schauen Sie sich den tatsächlichen Wert an, der Sie also natürlich weiß, wo du bist. Ich zeige dir die ganze Regel. Ich zeige Ihnen den Selektor und dann die Eigenschaft und den Eigenschaftswert. daran, Denken Siedaran,den Eigenschaftswert und gehen Sie dann zu Ihrem Code. Finden Sie denselben Ort. Suchen Sie die gleiche Regel, die mit dem gleichen Selektor für die gleiche Eigenschaft. Und dann, wenn Sie den Wert sehen, ersetzen Sie den alten Wert durch den neuen Wert nur aus dem Speicher. Oder Sie können diesen Wert sogar kopieren und in Ihren Code einfügen, speichern und dann aktualisieren. Und wenn Sie nicht geschrieben haben, ändert sich Ihre Seite nicht. Also das ist, dass du den Dom verwendest, den du durch den Punkt navigierst. Das Dom ist irgendwie so, als wäre es dieser Baum der Vererbung. Es ist irgendwie so,weißt du, weißt du, diese russischen Puppen, wo sie eine in eine andere stecken, außer es ist viel komplizierter. Wir nennen es den Baum Sie können mögen, reduzieren Sie es den ganzen Weg bis zur Wurzel, und Sie können nur das Wurzelelement sehen, und dann können Sie von dort aus beginnen oder Sie können mit der rechten Maustaste auf die Seite auf das eigentliche Element klicken , das Sie wollen rechts sehen. Klicken Sie auf die, die Sie sehen möchten und gehen Sie zu inspizieren, und das wird Sie dort in den Dom. Es wird durchblättern. Es wird un kollabieren und erweitern und markieren Sie nur das Element, auf das Sie geklickt haben. Und manchmal ist es ein wenig verwirrend, weil Elemente irgendwie vor einander stehen, und es und der , auf den Sie geklickt haben, ist nicht derjenige, auf den Sie dachten, dass es angeklickt wurde, sondern Sie normalerweise an einen sehr nahen Ort bringen . Und Sie können irgendwie durch den Dom navigieren, um das genaue Element zu finden, nach dem Sie suchen. Sie können viele Änderungen vornehmen. Sie können tatsächlich eine ganze Seite nur in diesem Dom Inspector komplett codieren, Sie könnten das ganze CSS und alles schreiben und dann verlieren, wenn Sie aktualisieren. Wahrscheinlich keine gute Idee, das zu tun. Es gibt viele wirklich coole Features in diesem Dom erkunden. Es ist eigentlich mehr als nur ein Domine Spore Explorer. Es ist mehr als nur ein Browser. Inspektor hat ein Loch Wunderland von Werkzeugen 35. Einführung in das Drehbuchschreiben: Bisher besteht ein Bild des Internets aus einer Serverseite, einer Client-Seite und dem, was sie hin und her kommunizieren, was der Inhalt ist, der untrennbar mit dem HTML und dem CSS eingewickelt ist. Wir verstehen also, dass der Inhalt der Punkt von dem ist, was wir kommunizieren, und der HTML-Code ist, was diesen Inhalt gibt Meeting markiert es bis zu einer Sache zu bedeuten. Wir sprechen über HTML als das Substantiv der Sprache von Internet-Sprachen, und, ah, das CSS ist, was es so aussehen lässt, wie wir wollen, wir reden über CSS ist die Adjektive in Bezug auf Internet-Sprachen. Also, wenn Sie interaktive Dinge tun möchten, wenn Sie möchten, dass Ihre Website Dinge tun, um auf den Benutzer in einer Weise zu reagieren, die mehr ist, als nur Ah, Hyperlink zu folgen . Was Sie brauchen, ist JavaScript, das Sie brauchen, während Sie ein Skript irgendeiner Art benötigen. JavaScript ist das clientseitige Skript, also können Sie ein Skript in der Cloud im Internet auf dem Server haben, um, und es kann eine Menge coole Sachen machen, aber Sie können auch Skripte direkt auf Ihre auf den Heimcomputern Ihres Benutzers auf ihren Computern , wie, wie auf der Website, während sie es ohne Kommunikation zurück zum Server verwenden. Die Sprache, die wir normalerweise verwenden, ist JavaScript und Java-Skript ist aus diesem Grund sehr mächtig , weil es diese ständige Kommunikation vor und her nicht erfordert. Wenn Sie Skripte auf Ihrem Server haben, als dass der Benutzer damit interagieren kann, muss es diese HTTP-Verbindung geben, und Sie müssen sagen, was der Benutzer getan hat. Und dann hat das Skript eine Chance zu antworten, und dann müssen sie eine weitere HTTP-Verbindung herstellen, um die Skriptantwort hin und her zu geben , so dass es nicht ganz so effizient ist. Was effizienter ist, ist, wenn Sie den Computer Ihres Besuchers verwenden, er seinen Prozessor verwenden, das Skript auf seinem Computer und seinem Computerspeicher läuft, und Sie können eine Menge Dinge erledigen. Inter aktiv, genau da 36. Javascript: öffnen Sie Ihre Webseite und verschieben Sie sie so, wie wir es getan haben. Und ah, loggen Sie sich ein und gehen Sie zu, ähm, erstellen Sie tatsächlich 1/3 Seite. Erstellen Sie also eine neue Seite und wir nennen es Script HTML. Und dann, ähm, werden Sie wahrscheinlich mit Ihrer ganzen Seite und allem verbunden sein wollen. Also ich bin, du kannst das entweder jetzt machen oder später darauf zurückkommen. Eso einzahlen jetzt, wenn Sie voran gehen und erstellen Sie das Skript dot HTML-Datei, so dass ich Ihnen eine Chance geben, jetzt zu pausieren. Okay, Sie haben also eine neue leere Skripte erstellt, die HTML in Ihren Kopf gehen. Das ist das Kopfelement. Also denken Sie daran, das erste Element ist dieser Doc-Typ, Dann haben Sie den HTML und dann haben Sie Kopf und innerhalb des Kopfes, Sie haben ein paar Dinge, einschließlich der Titel eso. Normalerweise setze ich es nach dem Titel, setze diese Art von Dingen und wir werden ein neues Element schreiben. Und dieser HTML-Code, wir schreiben, heißt Skript. Und was dieses Element tut, ist, dass es uns einen Raum gibt, um unser Skript zu schreiben, unsere Skriptsprache, die Javascript sein wird, also schreiben Sie das Skript als C. R I P T Das öffnende l Tag und dann das schließende Tag . Ich habe Element und Tag austauschbar verwendet und dann etwas Raum zwischen den öffnenden und den schließenden Tags und drinnen, das ist, wo Sie Ihr Skript schreiben? Es wird Javascript sein. Es wird kein HTML sein. Also geht kein HTML zwischen diesem Skript und Stopp-Skript. Es ist alles, was alles Javascript wissen. HTML Okay, hier drin ist Scripting sehr ähnlich wie, ähm, Mathe. Wenn Sie sich an die Algebra erinnern, gibt es dieses Konzept einer Variablen. So haben Sie etwas wie X und X kann eine Zahl enthalten. Wir wissen nicht, welche Nummer es kann. Die Zahl, die es enthält, variiert Okay, so dass Sie eine einfache Gleichung wie eins plus eins gleich X haben könnten. Das ist ein Ehlinger brechen eine Sammlungsgleichung, und Sie können für X lösen. Erhalten Sie zu schreiben? Um, so dass Sie auf der linken Seite, fügen Sie eins plus eins hinzu, um zu kommen und dann zu gleich X und ah zu kommen, und Sie können kompliziertere Dinge tun, wo die Variable an verschiedenen Orten mit mehreren Variablen ist . Will Scripting verwendet auch Variablen und, ah so gehen Sie voran und schreiben Sie Ihre erste Variable zu. Zu Beginn wirst du schreiben. Sie müssen es als Variable mit Java-Skript deklarieren. Der Weg, das zu tun, ist Ihre richtige Hvar, die für Variable steht und nur immer alles Kleinbuchstaben macht. Es sei denn, sie sagen dir, dass du etwas tun sollst. Großbuchstaben, äh, var VR-Raum. Und übrigens, Sie schreiben dies innerhalb des Skript-Elements zwischen diesen Skript-Start- und Schließ-Skript-Tags , rechts, Bar-Raum X. Also benennen wir diese Variable X und dann setzen Sie ungleiches Symbol und dann eine Eins , also definiert dies die Variable X und setzt gleich Zehe eins. Jetzt können wir diese s O verwenden, zum Beispiel, Sie können, ähm, ähm, tun Alarmbereitschaft. Haben Sie jemals diese lästigen Pop-Ups gesehen, die ein Geräusch auf einer Webseite machen? Es ist irgendwie ärgerlich, aber zum Testen funktioniert es ziemlich gut. Also werden wir einen Java-Skriptbefehl schreiben, um eine dieser Warnungen zu erstellen, und dann können wir alles, was wir wollen, in dieses kleine Pop-up setzen. Das Job-Skript dafür ist übrigens, dies auf eine neue Zeilenwarnung zu setzen und dann öffne Klammern schließen Klammern, so dass kein Leerzeichen nach der Warnung, offene und geschlossene Klammern direkt danach. Jetzt geh zurück und in diese Klammern. Richtig, der Buchstabe X. Das ist also der gleiche Name ist die Variable, richtig? Also, was es tun wird, ist, dass es diese Variable alarmieren wird. Wenn Sie also die Variable warnen, die JavaScript erstellt, wird dies angezeigt. Aber es warnt nicht nur den Variablennamen. Es warnt tatsächlich, was die Variable ist. Also, um, speichern Sie das und ich gebe Ihnen die Chance, es zu leiten und zu sehen, was passiert. 37. Javascriptstränge: Okay, Also hoffentlich, wenn Sie entlang folgen, Als Sie es gespeichert und diese kleine Javascript-Funktion ausgeführt haben, indem Sie die Seite laden, haben Sie ein Pop-up. Das war nur der Inhalt dieser variablen. So sehr einfach. Ich möchte dir hier etwas Cooles zeigen. um dieses X zu setzen, Anstatt die Klammernum dieses X zu setzen,anstatt nur den Variablennamen in die Klammern zu setzen , möchte ich, dass Sie Anführungszeichen um es setzen. Setzen Sie also ein Zitat um links und ein Zitat um die rechte Seite, und jetzt liest es Alarm, öffnet Klammern, zitieren Sie Ihren Variablennamen , der X ist und dann ein weiteres Zitat und dann die schließenden Klammern. Also, was denkst du, wird jetzt passieren? Wir alarmieren den Variablennamen nicht mehr nur in seinen eigenen Java-Skripten. Im Text tun die Anführungszeichen etwas in JavaScript. Wenn Sie Anführungszeichen um etwas setzen, wertet JavaScript es nicht mehr als Skript aus, sondern wertet es als etwas aus, das wörtlich genommen werden soll. Es ist also so, als ob ich mit dir rede und ich beschreibe Dinge in der Verwendung von Wörtern. Und dann benutze ich plötzlich Zitatsymbole um ein bestimmtes Wort. Nun, viele Leute werden das benutzen, um ein Wort zu betonen. Aber technisch gesehen, wenn Sie ein Zitat um ein Wort setzen, besonders wenn die Anführungszeichen um dieses Wort oder um diesen Satz geschrieben werden, bedeuten, dass Sie tatsächlich etwas zitieren, ist es ein Zitat, also ist es kein länger sagst du es. Aber du bist es. Es ist eigentlich etwas, das zitiert wird. Sie also einen Satz wie diesen hören oder einen Satz lesen, Wenn Sie alsoeinen Satz wie diesen hören oder einen Satz lesen,verstehen Sie nicht den Teil, der in Anführungszeichen als Teil des Satzes steht. Sie verstehen es als eine separate Art von Sache, und das ist ähnlich mit JavaScript. Wenn es also jetzt auf dieses X stößt, weil es in Anführungszeichen steht, wird es es nicht mehr als eine Variable betrachten. Es wird es als den Buchstaben X in Anführungszeichen betrachten. Es ist nur das, was wir eine Schnur nennen. Das ist es. Wir nennen es eine Zeichenfolge, weil normalerweise eine Zeichenfolge aus mehreren Buchstaben besteht, die aneinander gereiht sind. Also, wenn es wie X y Z war, weißt du, dass es wie Popcorn ist. Hast du jemals diese Popcorn-Ketten gemacht? Waren Sie, wo Sie String durch Popcorn setzen und Sie haben eine Reihe von, ähm gut, ähm gut, die Popcorn's sind wie Buchstaben in JavaScript-Strings. Und diese JavaScript-Zeichenfolge ist eigentlich nur ein Popcorn. Der Buchstabe X. Aber der Punkt ist, es versteht es als eine kleine Zeichenfolge von Buchstaben, nicht als etwas, das gelesen und verstanden und als Variable analysiert werden soll. Also setzen Sie die Zitate um und speichern Sie es und Positivität, und ich gebe Ihnen die Chance, es auszuführen und zu sehen, was so positiv passiert. 38. Die Javascript: Okay, also wenn du das richtig machst, hättest du diese Warnung jetzt bekommen sollen. Aber anstatt die Nummer eins zu alarmieren, warnte es den Buchstaben X , der nur eine Zeichenfolge ist. Also geh weiter und, ah, du kannst damit ein bisschen spielen und alles hineinlegen, was du willst, und du kannst einen Satz schreiben . Sie können einen Roman schreiben. Eigentlich denke ich, es gibt eine Grenze, wie viel du da reinpassen kannst. Aber wenn Sie es in Anführungszeichen setzen, was auch immer Sie dort einfügen, wird es einfach direkt an Sie zurückzitieren. Aber wenn Sie keine Anführungszeichen setzen, dann wird das JavaScript-Programm, wenn es durchläuft, davon ausgehen, dass das, was es alarmiert, nicht nur ein Text ist, sondern es ist JavaScript zu verstehen. Wenn es also variabel ist, wird es den Wert dieser Variablen warnen. Lassen Sie uns das ein wenig interaktiver machen. Die stärkste Fähigkeit von JavaScript besteht nicht nur darin, diese Variablen zu haben, sondern auch die Fähigkeit, die Werte dieser Variablen zu testen und verschiedene Dinge zu tun, abhängig von der Bedingung oder dem Zustand dieser Variablen. Also, um dies zu testen, verwenden wir diese logische Sprache von wenn dann sonst. Also, wenn das wahr ist, tun Sie das noch. Wenn das wahr ist, tun Sie dies. Und die Art und Weise, die dies in JavaScript tut, ist normalerweise mit Variablen, die eine Variable mit einer anderen vergleichen oder eine Variable mit einer Zeichenfolge vergleichen. Also, Also, lasst uns weitermachen und das in unseren Code schreiben. Also werden wir dies schreiben zwischen dem, wo wir diese Variable X deklarieren und wo die Warnung auftritt, weil wir diese Alert-Warnung bedingt haben werden, basierend auf dem, was die Variable enthält. Also, nachdem VAR gleich X ist , legte diese Zeile eine neue Zeile und schreibe das Wort, wenn jetzt wieder, wir werden Klammern setzen, wenn und endete seine einfachste. Wenn Sie einfach kein Leerzeichen setzen, wenn kein Leerzeichen und dann öffne und geschlossene Klammern und dann innerhalb dieser Klammern, werden wir die Testbedingung schreiben. Also, was wir testen werden, ist laufen und testen, ob X eins ist oder nicht. Also, wenn X eins ist, werden wir eine Sache alarmieren. Und wenn X nicht eins ist, werden wir etwas anderes lernen. Also toe, um dieses Recht zu testen, X gleich eins. Also würden Sie erwarten, nur X gleich eins zu schreiben, aber, ähm, Sie müssen in Bezug auf Computer denken. Computer sind nicht sehr gut darin, eine Sache zu verschiedenen Dingen zu haben. Also verwenden wir bereits das Gleichheitszeichen eine Zeile oben. Um den Wert X zuzuweisen, entspricht eins. Das ist irgendwie wie in Mathe. Wenn wir sagen, lassen Sie X gleich eins und dann, wenn wir Ihre natürliche Neigung testen, wird wie, sagen wir, wenn x ein Gleichheitszeichen eins, wenn X gleich eins ist . Aber wir müssen einen Unterschied unterzeichnen, um die Gleichheit zu testen. Also verwenden wir Gleichheitszeichen und Sie werden viele Fehler machen, wenn Sie viel JavaScript oder Code schreiben, wo Sie versehentlich ein Gleichheitszeichen setzen, wenn Sie testen, und es wird XTO eins zuweisen. Wenn Sie das tun, wird es immer wahr sein. Egal, was Sie zwischen X und der anderen Seite setzen, wenn Sie nur ein Gleichheitszeichen setzen, wird es wahr sein, weil Sie es auch setzen. Wahr. Also tu das nicht. Setzen Sie auf Gleichheitszeichen und setzen X gleich eins. Also testen wir, ob X gleich Zehe eins ist oder nicht. Jetzt können Sie Anführungszeichen um dieses setzen, aber JavaScript ist eigentlich sehr schwierig, weil es möglich ist, dass es möglich ist, sich das anzuschauen. Wenn Sie keine Anführungszeichen setzen, versteht es es. Wie ich bereits sagte, es ist Javascript zu verstehen. Es ist nicht nur eine ah, es ist nicht nur eine Zeichenfolge, aber es versteht, dass als Zahl die Nummer eins, ähm, ähm, Und wenn Sie also eine Variable geben, wenn Sie sie einer Zahl zuweisen, versteht die JavaScript-Engine , dass die Variable eine Zahl enthält. Nun kann die Variable auch Strings enthalten. So Notizen bisher haben wir diese Variable gegeben. Wir haben es gleich eins ohne Anführungszeichen gemacht. Da es keine Anführungszeichen hat, ist das eine Zahl. Und so unten können wir es vergleichen. Wenn X gleich eins ist, wird die Zahl getestet. Java-scrupel-Test führt X aus, das jetzt die Nummer eins enthält, die der Nummer eins entspricht. Und hier ist etwas wirklich kniffliges. Wenn Sie Anführungszeichen um das in diesem Test setzen, wird es verglichen. Ist X die Nummer eins gleich der Zeichenfolge eins. Der Charakter eins. Es ist ein kleines Popcorn auf der Schnur. Recht und Job Skript ist ziemlich schlau. Es wird tatsächlich sagen, dass das dasselbe ist. Der String eins und die Nummer eins sind gleich, aber es ist irgendwie so, dass dies nicht immer zuverlässig ist. Sie können sich nicht auf JavaScript verlassen, immer herausfinden, welche Art der Variablen es ist. Manchmal werden Sie auf Dinge stoßen, bei denen es Dinge bewertet, von denen Sie denken, dass sie gleich sind. Aber JavaScript ist nicht ganz fortgeschritten genug, weil es sich um verschiedene Variablentypen . Also lasst uns um der Zukunft willen. Lassen Sie uns dies durchgehen und achten Sie auf die Art der Variablen, die es ist, und versuchen Sie, konsistent zu sein . Lassen Sie uns also keine Zitate um das setzen. Lassen Sie uns versuchen, es als Zahl zu behalten. Die Zahl, die wir gesetzt haben, ist ein ah, Variable ist die Zahl. Nun lassen Sie uns auch eine Zahl testen, also setzen Sie keine Anführungszeichen um sie herum. Okay, wenn X gleich eins ist, was machen wir dann? Wir müssen sagen, was passiert, wenn diese Bedingung wahr ist und wie wir das so machen. Wir können nicht einfach annehmen, dass der Rest der Seite so ist, als müssten wir Java-Skript sagen, wo das Gleiche ist, wo das Ding zu tun ist, wir müssen ihm einige Grenzen geben. Sonst wird es nur denken, ob es wahr ist. Wie von jetzt an für immer. Ich werde das immer tun, aber wir wollen uns wie eine bestimmte Anzahl von Dingen einstellen. Es ist also so, als ob wir in CSS die geschweiften Klammern wieder verwenden. Also gleich danach schließende Klammern eine offene geschweifte Klammer und setzen Sie dann ein paar Zeilenumbrüche, Sie wissen schon, drücken Sie, drücken Sie, geben Sie ein paar Mal ein und legen Sie eine schließende geschweifte Klammer. Nun, alles zwischen dieser offenen geschweiften Klammer und dieser schließenden geschweiften Klammer wird das sein, was wir tun werden, wenn X wahr ist. Entschuldigung, wenn X gleich eins ist, was bedeutet, wenn diese Bedingung wahr wird. So wird JavaScript die Bedingung, den Teil in den Klammern auswerten , und wenn es als wahr ausgewertet wird, wird es ausgeführt, dass ausgeführt wird. Es wird tun, was in diesen geschweiften Klammern ist. Also lassen Sie uns die Warnung kopieren und einfügen, die wir zuvor geschrieben haben, in diese geschweifte Klammer Bereich. Denn wenn X eins ist. Und lasst uns es ändern, um zu sagen, lasst uns eine Zeichenfolge machen, also in Anführungszeichen, das ist richtig. X ist eins, und Sie können schreiben, dass aus. Okay, also werde ich dir eine Chance geben, aufzuholen und, äh, äh, und das ein positives Video zu machen 39. Die Javascript: , Wenn Sie es aktualisieren,werden Sie sehen, dass je nachdem, wie Sie kopiert haben, Sie sehen, dass, weil X eins ist, es Ihnen Ihren Satz geben wird. Und wenn Sie diese zweite Warnung gelöscht haben, werden Sie nichts anderes sehen. Aber wenn Sie es nicht getan haben, werden Sie auch diese zweite Warnung sehen, weil nachdem es diese durch Bedingung durchgekommen ist, wenn es weiter entlang des Skripts geht, das dies weiterhin ausführt, das Skript und es wird auf diese nächste Warnung stoßen . Also wollen wir eine Warnung machen, dass es nur passiert, wenn X nicht eins ist. Also der Weg, dies zu tun, ist direkt nach der schließenden geschweiften Klammer, wir werden das Wort anders schreiben. Also, wenn das wahr ist, wenn das wahr ist, tun Sie dies sonst noch diese andere Sache. Also, wenn richtig anders und wir eine weitere geschweifte Klammer öffnen, weil wir jetzt sind, setzen wir die Bedingung, was zu tun ist, wenn es nicht wahr ist. Also sonst öffnen, Lockige Blake Brace. Setzen Sie ein paar Zeilenumbrüche geschlossen. Geschweifte Klammer. Jetzt hier drin, werden wir sagen, was passiert, wenn X nicht wahr ist. Es tut mir leid, wenn X nicht eine ist, die als wahr bewertet. Also wirst du das nicht sehen, solange es wahr ist. Aber lassen Sie uns sagen, dass Alarm da oben bewegen und schreiben, X ist nicht eins. Okay, jetzt solltest du nur alarmieren müssen. Derjenige, der X sagt, ist eins in der ersten Bedingung und dann derjenige, der sagt, dass X nicht eins in der 2. 1 ist , also lassen Sie es posten und ausführen und dann aus. Fahren Sie fort, wenn Sie das getan haben. Okay, jetzt, wenn Sie es richtig gemacht haben, werden Sie sehen, dass die Warnung sagt, X ist eins, und dann sehen Sie nicht die zweite Warnung. Die andere Warnung wird nicht angezeigt, da diese Bedingung nicht erfüllt ist. Gehen Sie nun vor und ändern Sie Ihre Variable in Ihrem JavaScript. In dieser ersten Zeile setzen wir var X gleich eins. Ändern Sie diese Nummer in eine andere Nummer. Sie können es ändern, um Sie können es auf 100 ändern. Du könntest ein Wort setzen. jedoch Wenn Siejedochein Wort setzen, muss es in Anführungszeichen stehen. Es muss eine Schnur sein. Andernfalls wird JavaScript denken, dass es sich um einen anderen Variablennamen oder etwas handelt, und es wird verwirrt. Wenn Sie also ein Wort setzen wollen, müssen Sie sicherstellen, dass das Job-Skript weiß, dass es eine Zeichenfolge ist. Es ist wie diese Charaktere, die auf dem Popcorn und auf der Schnur aufgereiht sind. Ähm, sonst wird JavaScript sagen, also setzen Sie das Wort Affe. JavaScript wird denken, Oh, es spricht über den Variablennamen Affe und es wird suchen, wo Sie Variable namens Affe gesetzt haben . Sie sagten, eine Variable namens X. Sie haben nicht eine namens Affe festgelegt und auch, dass es keine Jobs, Skript, Funktionen oder Methoden oder vordefinierte Dinge, die Affen sind. So, wie du siehst, wie die Wortleiste da drin ist. Es steht nicht in Anführungszeichen. Das ist etwas, das Java-Skript verwendet. Es gibt, wenn es da drin ist, das ist ein Wort, und es ist nicht in Anführungszeichen. Das ist wie eine dieser Job-Skript-Dinger. Es ist also nicht in Anführungszeichen. Job-Skript wird denken, dass es etwas damit gemacht hat, und wenn es ihnen nicht wirklich geschickt wird, dass es irgendetwas tun kann, wird es ersticken, damit du X gleich einem Wort setzen kannst, das du erstellst oder einem Satz. Aber stellen Sie sicher, dass Sie es in Anführungszeichen setzen, damit es weiß, dass es eine Zeichenfolge ist. Also machen Sie das und führen Sie es aus, und ich werde Ihnen eine Chance geben, es zu versuchen. Also hättest du die andere Warnung sehen sollen. Das ist also sehr cool. Sie beginnen, die Grundlagen der Funktionsweise von Javascript zu sehen. Ähm, das sind Grundlagen der Programmierung. 40. Backend Scripts: Was Sie bisher bis zu dieser Scripting-Lektion getan haben, ist Markup und Styling. Also haben Sie HTML getan, das Markup-Sprache ist. Es ist eine Markup-Sprache, und Sie waren CSS, das für Cascading Stylesheets steht. Es ist nicht wirklich wichtig, wofür es steht, aber es ist eine Stylingsprache, und dort haben sie mehr gemeinsam als mit Skriptsprachen. Jetzt befindet sich ein Skript in einem ganz anderen Bereich. Es ist näher an wie, eigentlich, was wir denken, wenn wir über Programmierung sprechen. Sie haben also wirklich gerade Ihr erstes Skript geschrieben, und offensichtlich können Sie viel mehr mit Java-Skript tun. Aber das war mehr von Justin Einführung in die frontseitige clientseitige Skripterstellung. JavaScript ist also die Sprache der Wahl. Übrigens, wenn Sie lernen werden, wie man Web-Entwicklung in Bezug auf die Herstellung von Webseiten zu tun, bedeutet das in der Regel ein Front-End-Web-Entwickler. Back-End-Webentwickler neigen dazu, aus mehr einem Informatik-Hintergrund wie Programmierung zu kommen und, wie wenn Sie einen Programmierabschluss oder einen Informatik-Abschluss bekommen, sind Front-End-Entwickler eher von dem, was Sie wahrscheinlich sind interessiert an. So ist die Vorderseite des Entwicklers, dass die drei wichtigsten Dinge, die Sie lernen möchten, unsere HTML, CSS und JavaScript. Sie können mit diesen drei Sprachen nicht entkommen. Ab sofort haben Sie Ihre Einführung in alle drei, und während Sie gehen, werden Sie auf sie und Sie werden wissen, wie Sie sie verwenden. Und Sie können es wahrscheinlich ziemlich schnell abholen, wie Sie gehen. Nur irgendwie, wie es herauszufinden, wie du gehst und du wirst viel erledigt. Die andere Seite der Skripterstellung ist also das Back-End oder die Serverseite, daher ist Front-End-Skripting JavaScript. Die Tasche Conscripting ist viel komplizierter, weil es neigt, ah, viele verschiedene Sprachen zu geben . In der Tat können Sie wahrscheinlich auch Ihren Server anschließen, auch Ihren Server anschließen, um fast jede Sprache auszuführen, die Sie wollen. Und das liegt daran, dass Sie die vollständige Kontrolle über Ihren eigenen Server haben und er nicht wirklich interoperabel sein muss. In gewissem Sinne, in dem Sinne, dass alles, was Sie auf Ihrem Server tun, das Scripting und all das, was passiert, nur auf Ihrem Computer passiert. Und dann, sobald es fertig ist, das Ergebnis, dass es über das Internet sendet, das interoperabel sein muss, aber die Programmierung und Auswahl und wie die Butterning des Programms muss nicht wirklich Inter operieren . Es ist nur die Kommunikation, die Internet brechen muss, so dass Sie zurückschreiben und Skripte in jeder Sprache, die Sie wollen, solange sie mit der Standardmethode kommunizieren können. Wie http, Um, aber es gibt einige Standard-diejenigen, die sich viel gewöhnen, und umm ich bin in uns stellen Sie PHP vor. 41. Php: PHP ist Open Source und kostenlos. Und so neigt es dazu, viel in einer Menge von Software zu gewöhnen, die kostenlos im Internet und Open Source im Internet ist . So, zum Beispiel, WordPress verwendet PHP und PHP ist eine zurück und Sprache. Das ist, weißt du, es hat viele Fehler, aber in gewissem Sinne ist es sehr einfach, mit einfachen Dingen zu beginnen. Also werden wir nur ein sehr einfaches PHP-Skript auf das Backend schreiben, und dann werden wir es ausführen und irgendwie sehen, wie das funktioniert. Was wir also tatsächlich tun werden, ist, dass wir genau den gleichen Code wie im Java-Skript abstimmen. Aber wir werden es in PHP schreiben. Um dies zu tun, gehen Sie wieder in Ihre Schicht und erstellen Sie eine neue Datei. Und hier ist die andere Sache ist, dass Sie diesmal keine HTML-Datei erstellen werden. Sie werden eine Datei namens script dot PHP erstellen. Okay, das ist sehr wichtig, dass Sie ihm die Erweiterung PHP geben. Nun, wenn Sie Shift verwenden, gibt es ein wenig, es gibt eine kleine Möglichkeit, eine PHP-Datei zu erstellen, mit der bereits als PHP beginnen. Also gehen Sie voran und tun Sie das, wenn Sie wollen, oder erstellen Sie es einfach auf und speichern Sie es hat dot PHP. Wichtig ist, dass Sie diese Datei auf Ihrer Website namens Script Stop PHP haben. Inzwischen Inzwischen werden wir das gleiche Skript schreiben. Die Art und Weise, eine Variable in PHP zu erstellen, ist nicht genau die gleiche, weil es eine andere Sprache ist, nicht die gleiche wie in JavaScript. Der Weg, dies in PHP zu tun, besteht darin, ein Dollarzeichen und dann den Namen Ihrer Variablen ohne Leerzeichen dazwischen zu schreiben . Also müssen wir diese deklarative Var nicht wirklich haben. Sie können einfach Dollar X schreiben und das wird die Variable X erstellen. also gehen Sie voran und schreiben Dollar X gleich eins. Und dann, ähm, tatsächlich, Großteil des Codes ist derselbe. Also die nächste Zeile, die Sie schreiben können, wenn X gleich eins ist. Was musst du nun daran ändern? Sie müssen sicherstellen, dass PHP weiß, dass das X eine Variable ist. Und die Art, wie Sie das tun, ist mit diesem kleinen Dollar so richtig Dollar X, Wenn Dollar X gleich eins ist und dann wissen Sie, die gleiche Syntax mit den Klammern und alles. Und dann bist du offen und schließt geschweifte Klammern. Ich bin in ihrem, anstatt Alarm zu schreiben. Was wir tun werden ist, ähm, PHP ist kein Front-End-Skript, richtig? Es hat also keine Kontrolle über den Browser auf die gleiche Weise. Aber was es tun wird, ist PHP wird einen erstellen, ähm, es wird einige Inhalte ausspucken. Also, ähm, was wir tun werden, ist, dass wir definieren, welche Inhalte er damit ausspuckt. Und im Grunde ist es, als würden wir ein Dokument schreiben, das über das Internet übertragen wird. Also gehen Sie weiter und schreiben Sie das Wort Echo Space, und dann können Sie Ihre Zeichenfolge schreiben. Also statt der Warnung genau das richtige Echo Leerzeichen und dann in Anführungszeichen öffnen schließen, schließen Sie Zitat schließen Zitat. Richtig. Deine Stärke. Also X gleich X ist gleich eins. Was auch immer Sie schreiben wollen, um, und folgen Sie dem noch einmal in der Steuer. Die geschlossene geschweifte Klammer sonst öffnen geschweifte Klammer und ändern dann die von Alerts zu Echo Leerzeichen Zitat. Also nein, es gibt keine Klammern. Wieder, richtig? X ist nicht eins. Und dann schließen Sie Zitat keine Klammern in PHP. Und dann die Kleidung lockig Klammer. Also werde ich dir die Chance geben, das aufzuholen und zu retten. Aber bevor du das tust, will ich dich nur darüber reden, was passieren wird. Also haben Sie das Drehbuch geschrieben. Es ist genau das gleiche wie das JavaScript in vielerlei Hinsicht. Aber das JavaScript, wie das JavaScript funktioniert, ist, ähm, Sie laden die Datei aus dem Internet Skript HTML. Und in dieser Datei haben Sie das Java-Skript eingebettet, so dass JavaScript auf dem Computer des Clients auf der Client-Seite auf dem Computer Ihres Benutzers, dass Aufträge auf ihrem Computer ausgeführt werden könnten und diesen Code in Ordnung ausführt und Erstellen Sie diese kleinen Pop-Ups. Also haben sie diesen Code auf ihrem Computer als mit PHP, seinem Backend und alles wieder in der Schrift so, ist es anders. Anstatt das Skript herunterzuladen, ist das, was tatsächlich passiert, dass Sie die Anfrage für dieses Dokumentskript auf PHP stellen und anstatt es wie bei Skriptstudie HTML herunterzuladen, , anstatt herunterladen, was es tut, ist es auf dem Server ausgeführt, ohne es herunterzuladen. Was passiert, ist, dass das Skript auf dem Servercomputer in seinem Speicher in seinem Prozessor ausgeführt wird Up, oben in der Cloud wird es dort ausgeführt, und dann erstellt das Skript ein Produkt. Es wird ausgeführt, und es erstellt eine Datei. Es schafft etwas, und das ist es, was es sendet. Das Ergebnis der Ausführung des Skripts, das gesendet wird, ist also das Ergebnis, nicht das Skript, sondern das Ergebnis des Skripts. Also, was dieses Skript tut, ist, dass es diese Echo-Anweisung hat. Das ist es, was es aussendet. So könnte man sich vorstellen, dass Echos, Druck, Echo und Druck irgendwie dasselbe sind. Was tut, ist das, was es ist. Es erstellt diese kleine Datei, die ist die, deren Inhalt alles ist, was Sie jetzt wiedergeben. Offensichtlich vereinfache ich eine Menge, aber was dieses Skript tatsächlich tut, das ist alles, was es tut. Wenn Sie das speichern, möchte ich, dass Sie fortfahren und kopieren Sie das aus, speichern Sie es und führen Sie es dann in Ihrem Browser aus. Wissen Sie, Ihre Domain-Namen, Schräg-Skript PHP, und ich möchte, dass Sie sich bewusst sein, dass Sie das Skript nicht herunterladen. Sie laden die Ausgabe des Skripts herunter, Okay, also machen Sie das und führen Sie es aus. Also hoffentlich war das eine ziemlich nahtlose Erfahrung für Sie. Sie gehen zu Ihrer Domain und anstelle des Skripts, dass HTML Sie ihm den Dateinamen geben, Sie hier hatten. Ich habe es Drehbuch genannt. PHP. Sie können, wenn Sie nicht haben, ist wahrscheinlich berechtigt, dass PHP. Aber gehen Sie weiter und setzen Sie diese Domäne in das. Dein Alan. Ich meine, und Sie sehen, dass die Ausgabe des Skripts jetzt wissen, dass dies nicht das Skript selbst ist. Wenn Sie also die Quelle anzeigen , sehen Sie hier kein Skript. Sie sehen die Quelle nicht, weil sie die Quelle nicht herunterlädt. Es zeigt Ihnen nur die Ausgabe. Das ist also Ah, das ist das Ende des In-Class-Projekts. Sie haben nun sowohl ein Front-End als auch das Back-End-Skript abgeschlossen. Sie sind also ein Front-End- und Backend-Skript-Master und, ah, für das Projekt. Wir werden weitergehen und einige Skripte mit ein wenig mehr Interaktivität schreiben und ah, mit dem Benutzer interagieren und etwas nützlicheres tun 42. Content-Management-Systeme: bisher in diesem Kurs haben Sie alle grundlegenden Fähigkeiten zur Web-Entwicklung gelernt. Sie haben etwas über das Internet erfahren. Sie wurden in HTML, CSS, JavaScript und sogar Back-End-Skripting eingeführt CSS, . Und wenn Sie das letzte Projekt gemacht haben, waren Sie in der Lage, an einem E-Mail-Widget zu arbeiten, das all diese Fähigkeiten und Kenntnisse kombiniert. Andi zeigte, wie sie zusammenarbeiten, um, ah, Widget zu erstellen , die Menschen erlauben würde, Sie auf all den verschiedenen Seiten in Ihrer Website per E-Mail zu senden. So haben Sie vielleicht bemerkt, dass es viel Zeit und Mühe gekostet hat, jede einzelne Seite zu entwickeln und Sie haben Zeh. Selbst wenn wir das Prinzip von D. R umsetzen , warum wiederholen Sie sich nicht. Es gibt immer noch eine Menge zusätzliche Beschichtung, die Sie für jede Seite tun müssen, und es wird nur eine Menge Aufwand erfordern, und Sie wollen wahrscheinlich nicht so viel Zeit damit verbringen, Ihre Website zu entwickeln. Sie möchten so viel Zeit damit verbringen, Ihre Inhalte zu entwickeln. Wie wir anfangs erwähnt haben, ist der Inhalt das Wichtigste. Das ist es, worum es geht. Was wir also verwenden, ist ein Content-Management-System, das all dies für Sie erledigt. und spezifisch. Wir schauen uns WordPress an. Also, während Sie unterwegs sind, nehmen Sie wahrscheinlich eine von zwei Routen. Wahrscheinlich gehen Sie entweder in die Tiefe auf jedes dieser Konzepte lernen mehr über HTML, CSS und JavaScript. Sie machen wahrscheinlich alle optionalen Hausaufgaben und investieren wirklich viel Mühe in Ihr Projekt. Setzen Sie viel Mühe in die Projekte, ähm, oder Sie nehmen die andere Route, wo Sie nur versuchen, das bloße Minimum zu bekommen, um eine Website ins Leben zu rufen und laufen zu lassen. Und Sie kümmern sich nicht unbedingt darum, all diese Details zu lernen und zu lernen, wie man programmiert und programmiert und programmiert und lernt, wie man in die kleinste Menge von allem kommt. Sie wollen nur in der Lage sein, eine Website zu verwalten und zu betreiben, und Sie haben nicht unbedingt die Zeit, um maßgeschneiderte Dinge und wirklich in die Tiefe und das Wissen zu bekommen . Also jede dieser Straßen sind völlig in Ordnung, und WordPress ist. Sie können es als etwas vorstellen, das, weil es es es für Sie verwaltet, ist irgendwie wie diese zweite Route, die einfachere nackte minimale Route mag. Aber es ist nicht wirklich wahr WordPress Sie das gleiche tun können. Sie können beide Routen nehmen. Sie können entweder einfach die Einrichtung erhalten und Ihre Website einsatzbereit machen. Und ohne viel Fachwissen oder Wissen oder in die Tiefe gehen oder lernen Codierung. Fangen Sie einfach an, es zu tun, oder Sie können wirklich in die Tiefe gehen und Sie können anpassen. Sie können in all die verschiedenen Aspekte, die Plug Ins Themen erhalten. Sie können beginnen, Ihre eigenen Themes zu entwickeln, und Sie können WordPress machen fast alles, was Sie wollen. In der Tat gibt es wahrscheinlich eine Menge von Websites, die Sie verwendet haben, die Sie nie einmal erkannt wurden tatsächlich auf WordPress als Kern basiert. Und sie wurden so angepasst, dass sie nicht einmal als WordPress erkennbar . Bevor wir also in die eigentliche Einführung in WordPress kommen, schauen wir uns ein wenig an, wie all diese Fähigkeiten, die verwendet wurden, zusammen in einer tatsächlichen Umgebung arbeiten , in der Sie eine Seite aus dem Internet herunterladen und anzeigen, und wird irgendwie einige der Motivation dafür sehen, warum Sie ein Content-Management-System benötigen 43. Wie Server mehrere HTTP-Anfragen umgehen mussen: Also, wenn Sie eine Seite herunterladen, die Sie in der URL setzen und dass Sie waren alle direkt auf den Server und sagt dem Server, der eine senden Sie eingereicht und in der Regel geht der Prozess so etwas , der Server wird Sie in HTML-Datei senden, weil das ist , was Sie angefordert haben. Und der Browser wird anfangen, diese HTML-Datei von oben nach unten zu lesen. Es liest die ganze Sache, beginnend eine ganz oben genau die gleiche Art wie wir lesen, links nach rechts, oben nach unten. Und während es durchläuft, wird es schließlich in etwas wie Ihr CSS-Link-Element laufen, das ein Verweis auf Ihre externe CSS-Datei ist. Ich bin so, dass Ihre CSS-Datei nicht wirklich in dieser achten TML ist. Es ist getrennt. Also, wenn es zu dieser Zeile in Ihrem Dokument kommt, wird eine weitere HTTP-Anfrage an den Server senden und nach dieser CSS-Datei fragen. Also werden wir weiter lesen und es wird vielleicht eine JavaScript-Referenz finden, und es wird eine HTTP-Anfrage an den Server senden, der danach fragt, und es wird weiter weitergehen und all diese Referenzen finden. Es ist viel schneller für den Browser, die gesamte Webseite zu lesen, als diese HTTP-Anfragen durchlaufen. Während das alles passiert, erhält der Server diese Anfragen, beginnend mit diesem CSS, findet man die CSS-Datei und sendet sie dann die Zeile, indie Zeile, dann erhält er auch die Anfrage für die Skriptdatei, findet diese Datei und sendet es an den Browser. Sie können dies in Aktion auf Ihrer eigenen Webseite mit den Entwicklertools sehen. Zum Beispiel, auf Mac Option Command I vier Chrome bringt die Entwickler-Tools, und Sie haben normalerweise diese Dom inspizieren Sachen auf der Registerkarte Elemente. Sie können jedoch zur Registerkarte „Netzwerk“ wechseln, und dies zeigt Ihnen Informationen über die HTTP-Anforderungen und alle anderen Netzwerkaktivitäten , die gerade ausgeführt werden. Das erste, was wir tun müssen, ist, die Seite neu zu laden, damit sie das erfassen kann. Gehen Sie zu Ihrer eigenen Webseite und probieren Sie dies aus, sobald Sie die Liste der Dinge aktualisieren, die mit der Haupt-HTML-Datei für Ihre Seite beginnen. Offensichtlich ist das das erste, was angefordert wird, und Sie können hier sehen, dass es ein Diagramm gibt, wann diese Anfragen gestellt werden. Dies ist eine Zeit-Null und dann, wie lange es gedauert hat, bis der Browser sich mit dem Server verbindet, um alles zu senden, was er in diesem Fall sendet, eine HTTP-Anfrage, die nach der HTML-Datei fragt und dann darauf wartet, dass der Server weitergeht und dass htp den Speicherort findet, nach dem die HTTP-Anfrage sucht. Und dann, wenn es zum Beispiel Skripte gibt, zum Beispiel Skripte gibt, führen Sie dieses Skript aus und dann ist der Empfang das Herunterladen. dauerte es in diesem Fall Da es sich um eine HTML-Datei handelt und sehr klein ist, nur eine Millisekunde. Obwohl die HTML-Datei jedoch, jedoch, dauerte es ah, 142 Millisekunden, immer noch eine kurze Zeit, aber ein wenig länger, als es zum Download für den Server brauchte, um die Datei zu finden und senden, damit Sie sehen können, dass es ein paar andere Dateien auf dieser Seite in der HTML-Datei enthält , haben Sie das Stylesheet, das Java-Skript und dann ein Bild. Jetzt schauen Sie sich diesen Stil an. Sie und dann JavaScript Vape begannen die HTTP-Anfragen auf Lee, nachdem der HTML-Code heruntergeladen und geladen wurde . Das liegt daran, dass der Browser die Verweise auf beide gefunden hat und parallel in http gestartet wird. Http. Fordern Sie an, den Server nach diesen beiden Dateien zu fragen. Jetzt werden Sie hier drüben den Status bemerken. Diese Zahlen sind der HTTP-Antwortcode. Also 200 bedeutet, dass es es geschafft hat. Okay, 304 ist ein Antwortcode. Das bedeutet, dass der Browser es bereits im Geld hat, und der auf dem Server ist nicht anders. Es ist die gleiche Version, die Sie in den Browsern Bargeld haben, so dass es nicht herunterladen. Wenn Sie also den Mauszeiger über, werden diese sehen, dass, obwohl es einige Zeit gibt, sich zu verbinden und auf den Server zu warten, sie nicht wirklich wieder heruntergeladen werden, weil sie bereits existieren. In diesem Fall war es in Millisekunden, um den HTTP-Antwortcode zu erhalten und in diesem Fall Null Millisekunden, um das Javascript zu erhalten. HTTP-Antwortcode. Nun, wenn wir eine saubere Schiefer bekommen wollen, um zu sehen, wie es aussehen würde, all dies beim ersten Besuch der Seite herunterzuladen , müssen Sie Shift halten, wenn Sie drücken. Aktualisieren, und das wird es sagen, neue Kopien von allem zu bekommen. Egal, was. Es ist im Grunde wie das Löschen der Cache-Zehe. Halten Sie, verschieben Sie und klicken Sie. Aktualisieren, und Sie werden sehen, dass es ein wenig länger gedauert hat. Die Zeiten änderten sich, so dass es immer noch etwa 350 Millisekunden von Anfang bis Ende dauerte, um die HTML-Datei zu erhalten. Sobald es mir HTML-Datei gebracht hatte, bekam es das CSS und JavaScript parallel gestartet beide HTTP-Anfragen Zur gleichen Zeit jedoch sehen, können Sie jedoch sehen,dass das Stylesheet viel kleiner war. Es waren 655 Bisse gegen 90 Kilobyte pro Kilobyte viel größer als ein Biss. So wird das Stylesheet in 88 Millisekunden heruntergeladen, während das JavaScript in 222 Millisekunden heruntergeladen wurde. Eigentlich hat der Stil, den sie in einer Millisekunde heruntergeladen hat, 88 Millisekunden gedauert, bis der Server es sendet. Während diese beiden HTTP-Anfragen die Anfragen parallel gesendet wurden, die Java-Skripte noch viel länger heruntergeladen. Und dann können Sie sehen, dass es eine Weile gedauert hat, bis das Bild sogar geladen wurde. Der Browser war also nicht in der Lage, diese HTTP-Anfrage für das Bild zu machen, bis diese Zeile gelöscht wurde . Und du kannst das sehen. Diese kleine Zeile zeigt hier an, wann der Dom fertig geladen ist und dies zeigt an, wann die Seiten vollständig geladen wurden, und Sie müssen sich jetzt keine Sorgen um diese machen. Aber diese lila Zeile bedeutet, dass der Browser den ganzen Weg durch die HTML-Abdeckung gelesen hat , um zu decken, und es hat analysiert und erstellt seine mentale Bild der Seite. Der Dom. Und das ist, wenn Sie anfangen zu sehen, dass einige dieser Dinge geladen werden. 44. Das Tool für die Network: Ein weiteres großartiges Tool in der Chrome-Entwickler-Tools-Paket ist die Timeline Tap. Gehen Sie hier rüber und schalten Sie diese kleine Aufnahmetaste ein, um mit der Aufnahme zu beginnen und dann aktualisieren Ihre Seite halten Shift erneut, wenn Sie möchten. Jetzt gibt Ihnen dies eine Idee, und Sie können die Aufnahme nach der Sekunde deaktivieren. Dies gibt Ihnen eine Vorstellung davon, wie lange es viele der kleineren Unteraktionen dauert, und es zeigt Ihnen einige der Abhängigkeiten, so dass Sie sehen können, dass die allererste Anfrage die Sendeanfrage für die HTML-Datei ist und die hier erweitert wird. Es gibt viele verschiedene Dinge, die der Browser tut, wie er geht. Die nächste Anfrage ist für die CSS-Datei, die einige dieser anderen Dinge ausgelöst hat, die Daten empfangen, das Laden und dann das Java-Skript beendet haben, und Sie können diese Luft parallel und dann direkt hier sagen. Dies ist eine interessante Wieder berechnen Stil. Dies zeigt, wie der Browser die Informationen aus dem Stylesheet nach dem Laden verwendet, um das Aussehen der Seite neu zu berechnen. So wird dies Wieder Zeichnung oder Malerei genannt, und dies ist ein Teil dessen, wo für Sie sehen, geschieht der Flash-Ofen Stil Inhalt. Und dann können Sie hier sehen, wo das eigentliche Java-Skript-Skript ausgewertet wird. Ich werde hier rüber scrollen. Hier wird das Skript ausgewertet. Also wird das Skript hier geladen, und dann wird es tatsächlich hier ausgeführt, und Sie können als Parsing durch das Lesen verschiedener Dinge sehen. Dieses Timeline-Werkzeug ist also sehr mächtig, da es Ihnen alle Details von genau dem zeigt was passiert, und Sie können die verschiedenen Teile zusammenbrechen und erweitern. Und wenn Sie nach unten scrollen, werden Sie beginnen, Dinge wie Malerei und zusammengesetzte Ebenen zu sehen. Und das ist eine gute Möglichkeit, zu debuggen, wenn die Dinge lange dauern würden. Aber im Allgemeinen, wenn Sie sich das Netzwerk-Tool ansehen, sehen Sie die Dinge, die dies haben einen größeren Bereich hier, größere Download-Größe. Das ist ein Problem. Und dann, wenn man Dinge sieht, die von anderen Dingen abhängen, ist das ein weiteres Problem. Abhängigkeiten. Aber in den meisten Fällen wird Ihnen helfen, die Anzahl der HTTP-Anfragen zu reduzieren. Das bedeutet also, alle Ihre Stile all Ihr Javascript in einer Datei zu kombinieren und die Anzahl der Bilder zu reduzieren, die noch nicht geladen sind, und die Gesamtgröße 45. WordPress auf dem Server: Betrachten Sie das Netzwerk-Tool. Sie sehen die Dinge, die dies haben einen größeren Bereich hier, größere Download-Größe. Das ist ein Problem. Und dann, wenn man Dinge sieht, die von anderen Dingen abhängen, ist das ein weiteres Problem. Abhängigkeiten. Aber in den meisten Fällen wird Ihnen helfen, die Anzahl der HTTP-Anfragen zu reduzieren. Das bedeutet also, alle Ihre Stile alle Ihre Java-Skripte in einer Datei zu kombinieren und die Anzahl der Bilder zu reduzieren, die noch nicht geladen sind und die Gesamtgröße reduzieren. So können Sie sehen, dass in einer idealen Situation das einzige, was auf jeder Seite anders ist, der Inhalt und dann vielleicht ein wenig Informationen, die in die Kopfzeile gehen, wie der Titel, Äh, so dass Sie irgendwie idealisieren können eine Website-Struktur, in der es dieses gemeinsame Layout gibt. Sie, bei denen jede Seite eine gemeinsame Überschrift Sidebar Fußzeile hat, freigegebene CSS teilen JavaScript, und das ändert sich nie. Und das einzige, was sich zwischen den Seiten ändert, ist nur dieser Inhalt. Und dann, wenn Sie zwischen Seiten wechseln, erhalten Sie nur den einzigartigen Inhalt für diese Seite. Und, natürlich, das ist genau das, was Wordpress Blindgänger. Die Art und Weise, wie Wordpress funktioniert, ist ein wenig anders als unsere statischen Seiten. Bisher. WordPress ist ein serverseitiges Skript, ein sehr kompliziertes Programm, das auf diesem Server lebt. Und es tut eine Menge Dinge, einschließlich Manager Einige Datenbanken. Datenbanken sind so, wie Sie sich vorstellen können, wenn Sie jemals mit Microsoft Excel oder einer Tabellenkalkulation gearbeitet haben. Software-Datenbanken halten den gesamten Inhalt Ihrer Website in diesen Tabellen oder Datenbanken, und dann WordPress ist in der Lage, zum Beispiel,auf den Inhalt von bestimmten Seiten aus der Datenbank gezogen zugreifen zum Beispiel, und dann bauen eine Seite, die es Ihnen sendet. Also das erste, was Sie über WordPress wissen müssen, ist, dass es tatsächlich übernimmt die U. R L Struktur Ihrer Website für das Verzeichnis, in dem es sich befindet. Also, wenn WordPress im Hauptverzeichnis ist, können Sie Ihre Domain dot com und dann alles andere eingeben. Und egal, was Sie eingeben, egal welchen Ordner- oder Dateinamen Sie eingeben. Selbst wenn es nicht existiert, wird es zu WordPress umgeleitet werden, und WordPress wird die Kontrolle darüber haben. Also, was tatsächlich passiert, wenn Sie in einem U. L. zwei eine WordPress-Website eingeben L. , ist, dass Sie das WordPress-Skript jedes Mal laden. Es ist nur das gleiche WordPress-Skript, und was WordPress tut, ist es, welche Dateien Sie angefordert haben, und es erhält diese Informationen aus der Datenbank, und es baut diese HTML-Ausgabe. Sie erinnern sich also, dass Skripte nicht wirklich heruntergeladen werden. Sie senden nur die Ausgabe, die heruntergeladen werden soll. Also, was WordPress tut, ist es baut die HTML-Datei für die angeforderte Seite. Und dann laden Sie herunter, dass Sie die Ausgabe des PHP-Skripts herunterladen, das WordPress ist, das die HTML-Seite basierend auf der UL zusammengestellt hat, die Sie angefordert haben. Das ist nicht alles, was WordPress tut, aber. Dies ist ein Vorteil, dass Ihre Website organisiert bleibt, aber wir nennen es ein Content-Management-System, weil es Ihre Inhalte verwaltet und weil es die Erstellung Ihrer Inhalte erleichtert. Wenn Sie Ihren Inhalt manuell erstellen möchten, müssen Sie das gesamte Framework und die Struktur für jede Seite einzeln erstellen. Wenn Sie jedoch ein Content-Management-System verwenden, können Sie sich bei diesem Content-Management-System anmelden. Sie können sich tatsächlich in die Skripte auf dem Server einloggen, und es ist so, als ob wir Shift verwendet haben. Wir waren online und unsere Inhalte online erstellt. Und dann haben wir es gerettet. Unsere Seite wurde hochgeladen. Dies ist ein wenig anders, da Sie sich nicht bei einer Website anmelden, die über FTP wie Shifted eine Verbindung zu Ihrer Website herstellt. Es war Ihre Sehnsucht direkt in Ihren Server direkt auf Skripte in Ihrem Server. Und so, wenn Sie eine Seite in WordPress erstellen, Sie tatsächlich erstellen sie direkt auf Ihrem Server, und WordPress wird den Inhalt von dem, was Sie schreiben, nehmen Sie es in die Datenbank, nehmen Sie den Titel und alle anderen Informationen darüber und legen Sie es in eine Datenbank. Und wenn das später angefordert wird, zieht es diese Informationen aus der Datenbank, erstellt die HTML-Datei und sendet sie an wen, der sie angefordert hat. Das Tolle an der Erstellung von WordPress-Inhalten ist, dass Sie es tatsächlich erstellen können, ohne direkt mit Code zu arbeiten. Sie müssen sich nicht auf die Entwicklung Ihrer Website konzentrieren. Sie können sich auf die Entwicklung Ihrer Inhalte konzentrieren 46. Unterstützung deiner aktuellen Website: Also, bevor Sie WordPress installieren, ist es wirklich wichtig, dass Sie Ihre bestehende Website sichern, weil es eine hohe Chance Sie es verlieren. Selbst wenn Sie nicht denken, dass Sie sich so sehr um Ihre Website kümmern, es ist schön Zeh. Haben Sie ein Backup davon, so dass, wenn Sie sich erinnern möchten, wie Sie etwas getan haben, können Sie sich Ihre alten Seiten, die Sie gemacht haben, und erinnern Sie sich an eine Art wie ist eine Referenz, wie Sie es gemacht haben. Also gehen Sie weiter und öffnen Sie Ihren FTP-Editor. Sie sind Ihr FTP-Client. Nun, das werden Akten L a oder Cyber Ente oder so etwas sein. Versuchen Sie nicht, Shift darauf zu verwenden. Oder ein anderer Online-Editor. Das ist irgendwie ein bisschen anders. Also werde ich Cyber-Ente benutzen. Da ich auf einem Mac bin, kannst du was auch immer benutzen. Jetzt habe ich dieses Lesezeichen bereits gespeichert. Wenn Sie Ihre Lesezeichen nicht gespeichert haben, erhalten Sie diese E-Mail mit Ihren Kontoinformationen und verwenden Sie diese, um ein Lesezeichen zu erstellen . Aber ich werde eine Verbindung herstellen. Also hier ist meine Website und Sie können sehen, dass ich im w w w Verzeichnis bin oder, ähm, Sie könnten öffentliche Unterstriche HTML-Verzeichnis haben. Sie sind tatsächlich das Gleiche. Und das sind alle Ihre Informationen. Jede einzelne Datei und Sie können sogar modellieren. Sie können es sogar nach dem Zeitpunkt sortieren, an dem sie zuletzt geändert wurden. So können Sie sehen, wie, an welchen Dateien in letzter Zeit gearbeitet haben. Und der Backup-Prozess ist ziemlich einfach. Erstellen Sie einen neuen Ordner auf Ihrem Desktop und geben Sie ihm einen Namen und ein Datum. Ich werde es „l“ und „b dot com“ nennen, und dann werde ich das heutige Datum setzen, und dann markieren Sie jeden einzelnen Gegenstand. Ich klicke auf die untere Umschalttaste und klicke dann auf die obere und es wird alles dazwischen hervorheben . Und ich ziehe es einfach in diesen Ordner mit ah, mit Aktenzilla. Es ist sehr ähnlich. ziehst Duziehstes einfach aus der Serverseite in den Ordner auf deinem Desktop, oder du kannst das linke Panel benutzen, das oder du kannst das linke Panel benutzen, dases hat, je nachdem,wie das funktioniert. es hat, je nachdem, Sie können sehen, dass ich es hier in meinen kleinen Ordner gelegt habe, und das ist Ihre Verstärkung. So, jetzt können Sie tun, haben Sie ein paar Optionen, wenn Sie WordPress installieren. Wenn Sie möchten, dass WordPress Ihre Hauptseite ist. Vielleicht möchten Sie all das Zeug in ein wenig neue verschieben. Ich klicke deine Sequenz e in einen neuen Ordner. Also nennst du das vielleicht lernen und dann dasselbe tun. Klicken Sie auf den unteren Halt, Umschalttaste, und klicken Sie auf die obere Ich ignoriere. Siehst du Jibing, weil nichts drin ist. Und dann brauche ich es und ziehe es dann rein. Also, wenn Sie dies tun, dann ist alle Ihre Website jetzt im Lernen. Und wahrscheinlich werden einige Ihrer Links und Quellverweise unterbrochen, weil Sie den Speicherort geändert haben . Aber es wird in diesem Unterverzeichnis beibehalten, und der Weg, es zu erreichen, wäre Ihr Domain dot com forward slash lernen, und dann werden Sie zu Ihrem Index gebracht. Aber sieh dir das an. Dieser Link wird funktionieren , , weil ich einen relativen Link gemacht habe. Aber Sie können feststellen, dass einige Ihrer Dinge so brechen. Ah, das CSS ist kaputt, also ist das nicht mehr richtig gestylt, weil ich dir die Quelle zeige. Mein CSS sucht in den Stammverzeichnisstilen nach Stilen, die CSS aber, ähm, das Stammverzeichnis. Dies ist das Stammverzeichnis Es gibt keinen Stile-Ordner, die Stile-Ordner in diesem Lernblock. Ihre andere Möglichkeit besteht darin , , alles im Hauptverzeichnis zu lassen und WordPress in einem separaten Verzeichnis zu installieren , also liegt es an Ihnen. 47. Installation von WordPress: Lassen Sie uns voran und beginnen Sie mit der Erstellung unserer ersten WORDPRESS Installation auf Ihren Servern. Nun, die Art und Weise, wie Sie dies tun, ist über die Systemsteuerung auf Ihrem Server. Auf Ihrem Server ist eine Software installiert, die als C-Panel bezeichnet wird, und es ist eine Systemsteuerung, mit der Sie Ihre Domain auf viele Arten verwalten können. Das Bedienfeld für Ihre Website befindet sich auf einer Sub-Domain Ihrer Domain, so Sub-Domain-Name ist C-Panel für die Systemsteuerung. Also tippen und sehen Sie Panel Punkt und dann Ihren Domain-Namen eingeben und Sie werden zu diesem langen Bildschirm kommen . Jetzt sind diese Login-Informationen, die Sie gefragt werden, die Rufblatt-Account-Informationen , die Sie zu Beginn des Kurses gegeben wurden. Also gehen Sie weiter und kopieren Sie Ihren Benutzernamen und Ihr Passwort und melden Sie sich an. Jetzt sind Sie in der Systemsteuerung Ihres Servers eingeloggt, also seien Sie sehr vorsichtig, wenn Sie hier drin sind, denn Sie können eine Menge Dinge brechen. Aber Sie können auch einige wirklich coole Dinge tun, und es ist ziemlich benutzerfreundlich. Um ehrlich zu sein, zeigt es Ihnen einige Informationen über Ihre Website auf der linken Seite hier und dann diese Luft, alle Einstellungen, die Sie Dinge ändern können, die Sie einrichten können. Sie können sogar Backups einrichten. kannst du. Sie können neue FTP-Konten erstellen und die Passwörter für FTP-Konto-Clients ändern. Sie können neue erstellen. Hier ist viel los. Was wir jetzt tun werden, ist, dass wir WordPress mit dem weichen, köstlichen APS-Installer installieren werden. So finden Sie, dass den ganzen Weg ganz unten und klicken Sie auf WordPress. Nun, diese Wordpress installiert gibt Ihnen eine Reihe von Informationen. Aber genau hier wir einfach voran gehen und auf Installieren klicken und irgendwie ignorieren mit dem Rest davon, also lassen Sie dieses Protokoll in Ruhe. Sie haben ein paar Optionen. Lassen Sie es einfach bei http. Setzen Sie das www nicht. Andernfalls wird jedes Mal www benötigt. Und dann sollten Sie hier nur eine Domain haben. Wenn Sie Ihre Hosting-Optionen erweitern, können Sie mehrere Domänen haben. Nun, das ist ah auseinander. Das ist wichtig. Dieses Verzeichnis, dies sagt, wo die WordPress-Installation sein wird. Also, wenn WordPress wird Ihre Haupt-Website, die ich empfehle, Ich mache das auf meiner. Leg nichts hierher. Lassen Sie es einfach leer, und es wird direkt auf Ihrer Hauptseite sein. Also, wenn Sie zu Ihrer Domain dot com gehen, wird es Sie auf die WordPress-Website zu bringen. jedoch möchten, Wenn Siejedoch möchten,dass WordPress entweder wie eine Demo oder eine Testinstallation sein soll, oder Sie möchten, dass es uns ein Spion sein, eine Unterkomponente Ihrer Website und nicht die Hauptsache, und Sie möchten, dass die Hauptsache etwas anderes sein Sie können alles eingeben, was Sie wollen, wie WordPress-Verzeichnis. Und was das wird dio ist es WordPress in diesem Verzeichnis installieren, und dann, wenn Sie zu Ihrem WordPress-Installation gehen möchten, müssen Sie auf Ihre Domain dot com Schrägstrich was auch immer Direktor Sie so setzen gehen. Und dann wird dies Sie zu WordPress bringen. Und wenn Sie das WordPress-Verzeichnis nicht ablegen, dann wird dies Sie zu allem, was Sie in Ihrem Ordner haben, den Sie mit FTP hochgeladen haben oder was auch immer. Also haben Sie hier die Wahl, je nachdem, ob Sie Ihre alten Sachen überschreiben möchten. Also werde ich das in installieren. Ähm, Spezialdirektor. Ich wollte es WP für dieses Beispiel nennen. Ich nehme an, die meisten von Ihnen, wenn Sie es gesichert haben. Ihre Inhalte werden wahrscheinlich nur Ihre alten Inhalte löschen und hier ablegen wollen. Ähm, übrigens, dieser löscht es tatsächlich. Es wird es einfach unzugänglich machen. Es wird immer noch auf Ihrem Server sein, also lassen Sie die Datenbank in Ruhe. Ähm, Sie wollen weich, Delicious und WordPress, um all diese Datenbank Dinge zu verwalten, um es einfach in Ruhe zu lassen . Sie können ihm einen Namen geben, wenn Sie wirklich wollen, aber ich sage, lassen Sie es in Ruhe. Lassen Sie die Tabellenpräfekte in Ruhe. Hier können Sie einige Anfangseinstellungen für Ihren Blogger einrichten. Sie können das später ändern, aber ich gebe ihm einen Namen. Das ist der Name meiner Website. Und dann gibt es einen kleinen Untertitel und dann lassen Sie das in Ruhe. Nun, hier ist, wo Sie ein Zulassungskonto erstellen. Also dies und Männer Konto ist nicht das gleiche wie dieser Schrei Blatt Konto. Was Sie hier erstellen, ist Ihr WordPress-Konto. Also, wenn Sie sich in Ihre WordPress-Website einloggen, Sie gehen, um diese Informationen zu verwenden, und es ist völlig unabhängig von Ihrem Schuss Blatt Konto. Dies sind Ihre Serverkontoinformationen. Dies ist Ihre WordPress-Kontoinformationen, also nicht verwirrt darüber. Und wenn Sie wirklich wollen, können Sie denselben Benutzernamen und dasselbe Passwort verwenden. Allerdings empfehle ich nicht, das zu tun, weil es nur die Idee verstärken wird, dass das gleiche, wenn sie nicht sind und wann, Wenn sich irgendetwas in der Zukunft ändert, Sie werden super verwirrt sein. Also sage ich, erstellen Sie einen neuen Benutzernamen und Passwort, und dieser Benutzername wird tatsächlich manchmal auf WordPress sichtbar sein, je nachdem, wie Sie es einrichten. Also würde ich empfehlen, dass Sie einen professionell aussehenden Namen verwenden, weil manchmal wird es Dinge wie von bei Männern oder was auch immer hier geschrieben werden. Also werde ich Brenton nur so setzen, dass es aussieht, als wäre es von mir. Und dann setzen Sie hier ein Passwort und Ihre Admin-E-Mail. Es ist wichtig, dass dies Ihre tatsächliche E-Mail-Adresse ist. Wählen Sie eine Sprache, gehen Sie nicht in die Fortgeschrittene. Und dann können Sie auch die Installationsdetails per E-Mail an sich selbst senden und installieren. Sie sollten eine Bestätigungsmeldung erhalten, die Ihnen mitteilt, dass es richtig installiert wurde, damit Sie sehen können , dass es zwei Orte gibt, an denen Sie den Hauptplatz hier gehen können. Es wird, wenn Sie das Unterverzeichnis setzen, es wird Ford Slash WP oder Was auch immer Sie setzen, ich setze WP, wenn Sie es nicht in einem bestimmten Verzeichnis installiert haben, es wird nur ein Domain-Name sein. Die Verwaltung. Du Earless, wie du wieder gesetzst und das wird immer WP Hauch von Männern innerhalb des Regisseurs sein. Also, weil ich WP habe, ist es in diesem Unterordner. Aber wenn Sie es nicht gesagt haben, legen Sie es einfach auf Ihre Hauptseite. Es wird nur Ihre Domain dot com Schrägstrich WP Admin sein, so dass Sie sich nicht wirklich daran erinnern müssen , aber lassen Sie uns gehen und schauen Sie sich meine Website an und sehen, wie jetzt aussieht. , Denken Sie daran,dass ich es in diesem WP-Verzeichnis installiert habe. Also hier ist die Standard-WordPress-Installation. Es hat einen falschen kleinen Beitrag hier und ein paar Links auf der rechten Seite, die ziemlich leer sind. Gleichmäßigkeit einer Beispielseite 48. WordPress Administration: Lassen Sie uns also in den Anzeigenbereich einloggen, damit Sie entweder nach unten scrollen den Login finden können. In Meta, wenn du es hier unten siehst, wenn ich darüber schwebe, ist es sein WP Strich. Loggen Sie sich in dot PHP ein. Sie können entweder darauf klicken, um dorthin zu gehen, oder Sie können das einfach direkt in WP Strich eingeben, sich in Punkt PHP einloggen oder Sie können die ganze WP Admin Sache machen. Bill, es bringt dich an denselben Ort. Hier werden Sie die Informationen eingeben,die Sie während der Installation eingerichtet haben. Hier werden Sie die Informationen eingeben, Dies ist also der Verwaltungsbereich Ihrer WordPress-Website. Äh, auch, die Leute nennen es WordPress Blawg. So sind Sie jetzt in einem Bereich eingeloggt, den nur Sie als Administrator sehen können, und hier können Sie alle Inhalte verwalten und alle Einstellungen ändern und im Grunde alles tun , was Sie wollen. Also oben ist hier eine Art Hauptnavigationsleiste. Das wird in diesem obersten Bereich bleiben, solange Sie eingeloggt sind. , Sie können sehen,dass das hier ein Link zu Ihrer Hauptseite ist. Sie können alles in einem neuen Tab öffnen. Und so ist dies wieder Ihre Website. Aber jetzt, wo Sie eingeloggt sind, haben Sie diese Administrationsleiste angezeigt, die nur für Sie ist. Wenn Sie eingeloggt sind, können Sie beispielsweise die Seite bearbeiten, auf der Sie sich befinden. Wenn ich auf eine Seite klicke, werden Sie sehen, dass ich Post Sachen wie das bearbeiten habe. Also, ähm und dann haben Sie Links zurück zu all diesen verschiedenen Bereichen. Also zurück zum Administrationsbereich haben Sie zunächst ein Dashboard bekommen, das nur einige Informationen über Ihre Website und einige, ah, schnelle Schnappschüsse von verschiedenen Bereichen und dann auf der linken Seite ist das Hauptnavigationsfeld, die alle, äh, Dinge verwendet werden, um Ihre Website direkt von der Fledermaus anzupassen und zu bauen. Die wichtigsten Dinge sind Beiträge und Seiten, so dass diese sehr ähnlich sind ihre Möglichkeiten, Inhalte zu erstellen, Seiten zu erstellen. Aber Beiträge sind wie Blawg-Posts und Seiten sind wie Webseiten. Der Unterschied ist also, dass ein Beitrag in deinem Blawg geht und es irgendwie an ein bestimmtes Datum gebunden ist . Also anfangs, wenn Sie einen Beitrag erstellen, wird der Titel des Beitrags wahrscheinlich etwas wie das aktuelle Datum der U R L sein , das er jetzt erstellt. Eine Seite hingegen hingegen soll immer verfügbar sein. Und es mag nicht und wird mit der Zeit alt. Es ist etwas, das immer da ist. Also auf den meisten WordPress-Blog haben Sie, wie ein Blawg-Abschnitt. Dies ist eigentlich ein Beitrag, und dann haben Sie Seiten, die wie ein Teil der Hauptnavigation sind. Lassen Sie uns also voran und erstellen Sie einen Beitrag und eine Seite, um den Unterschied dort zu veranschaulichen. So können Sie entweder direkt auf Neu hinzufügen klicken oder in diesen Seitenbereich gehen, und dann sehen Sie eine Liste aller Ihre Seiten. Im Moment ist es nur eine Beispielseite. Sie können diese eine Beispielseite dort sehen. Eine Beispielseite ist anders als die hallo Welt. Also die Beispielseite werde ich eine neue erstellen. Die einzigen zwei Dinge, die Sie wirklich brauchen, um es zu geben, sind ein Titel und einige Inhalte. Dies ist der Inhaltsbereich hier. Es gibt zwei Tabs. Ich benutze die visuelle Registerkarte, was bedeutet, dass ich nicht im HTML schreiben muss. Wenn ich etwas fett oder ein Talic machen möchte, kann ich diesen Button hier verwenden, und er wird ihn kursiv formatieren, ohne dass ich den Code schreiben muss. Nun, wenn ich tatsächlich ein bisschen mehr Kontrolle an der Macht haben möchte, könnten Sie hier zum Texteditor gehen und Sie werden sehen, dass es tatsächlich der HTML-Editor ist. Ich kann den HTML speziell bearbeiten, aber trotzdem gibt WordPress Ihnen, Ah, ein wenig Hilfe, die manchmal nervig sein könnte. zum Beispiel Wenn ichzum Beispieleinen Zeilenumbruch setze und einen neuen Absatz beginne, wird WordPress automatisch in Ihren Code gehen, und es wird ein Absatz-Tag um Miss und ein Absatz-Tag umschließen, weil Sie die beiden Zeilen bricht, so dass es wirklich benutzerfreundlich ist. Aber es kann benutzerfreundlich sein, wenn Sie nicht erwarten, dass es mit Ihrem Code verwirrt . Sie müssen sich also bewusst sein, dass WordPress diesen HTML-Text tatsächlich ändern wird, obwohl es nicht so aussieht, wie es ist. Also für wirklich schnelle Beiträge und schnelle Inhalte, kann das super einfach sein. Aber wenn Sie versuchen, die Dinge etwas komplizierter zu machen, ähm, kann es frustrierend sein und es gibt ein paar Problemumgehungen, die ich Ihnen später zeigen kann. Aber wie auch immer, lassen Sie uns gehen und veröffentlichen dies und dann, sobald Sie es veröffentlicht haben, ändert sich diese Schaltfläche zu aktualisieren. Also, wenn Sie Änderungen vornehmen, müssen Sie auf Update klicken und Sie können hier sehen, dies ist der Link zu der Seite automatisch erstellt ein u R l, um es. Aber auch, wenn ich auf meine Website gehe und aktualisiere, sollte es im Navigationsbereich angezeigt werden. Das ist also meine erste WordPress-Seite. Und hier ist die Seite, die ich erstellt habe. Nun ist die Seite anders als die Blockbeiträge dieser Hello Welt. Dies ist ein Block Post. Jetzt standardmäßig und WordPress, Ihre Startseite ist Ihre Blawg, und Ihre gebloggte wird nur eine Liste aller Ihrer Blockbeiträge anzeigen. Also im Moment habe ich nur einen. Diese, die standardmäßig von WordPress erstellt wurde. Hallo, Welt. Also lasst uns hineingehen und einen neuen Blawg-Beitrag erstellen. Ich werde auf Beiträge klicken und Sie können meine eine bestehende blawg Post sehen, die von WordPress erstellt wurde, ist eine Demo. Ich werde einen neuen Beitrag erstellen Post ist anders als eine Seite und das gleiche Format. Hier. Es ist fast genau das Gleiche. Sie haben Textbearbeitung oder visuelle Bearbeitung. Ähm, und dann veröffentlichen Sie hier, und es wird aktualisiert, sobald Sie veröffentlicht, wenn Sie es bearbeiten möchten. Wenn ich nun auf meiner Homepage aktualisiere, ändert sich die Navigation nicht, da es sich nicht um eine Seite handelt. Ich habe gerade hinzugefügt, Es ist ein Beitrag, und es geschoben hallo Welt nach unten und zog nach oben, um zu posten, so dass ich in einen bestimmten Beitrag klicken kann , indem Sie auf eine dieser. Und dann kann ich nur diesen Posten sehen. Und sehen Sie, ich habe keine Hallo Welt mehr da unten, und dann habe ich die Navigationsseiten hier oben. 49. Permalinks: Gehen wir zurück zum Armaturenbrett. So, sofort. Das erste, was ich normalerweise tun werde, wenn ich installiert habe, ist es zu Einstellungen gehen und ich gehe zu, um Links unten unten hier zu erlauben. Das ist also alles, was ich anfangs saß. Das sind General Donat Dauerwelle Links. So werden Ihre Seiten erstellt. So wissen, dass die U R L für den ersten Beitrag, den ich gemacht habe, Frage Mark P gleich sechs und die UL für meine Seite, die ich hier erstellt habe, ist Paige. Ich bin gleich vier. Nun, wenn du schönere, hübschere Links haben willst , ist der Weg, das zu tun, genau hier drin. So können Sie eine dieser Optionen auswählen. Ähm, so etwas wie der Postname ist ein guter Weg, es zu tun. Aber Post Name auf eigene Faust kann nicht genug sein, weil , ähm, Sie können viele Beiträge haben, die manchmal den gleichen Namen haben, den gleichen Titel, und dann WordPress müssen zwischen ihnen zu unterscheiden machen bekommen verwirrend. Eine andere Möglichkeit, das zu tun, ist Tag und Name oder Monat und Name. Ich neige dazu zu denken, dass nur den Monat, das Jahr und den Monat. Und dann ist der Name genug, auch wenn auch vielleicht, genau wie das Jahr im Namen. Aber Sie können sehen, wie ich auf diese verschiedenen Dinge klicke, aktualisiert es die benutzerdefinierte Struktur hier. Also gibt es diese Syntax. Das bedeutet Jahr. Das bedeutet Monatsnummer. Das bedeutet Postname, also kann ich irgendwie Chaos mit diesem mögen, wenn ich will, aber ich neige dazu, am Ende den Postnamen zu haben. Es gibt einige Leistungsgründe, die Sie nicht möchten, dass das Posten am Anfang steht, also ist es gut. Dies ist wahrscheinlich die beste ist nur ein Monat und Name, so dass Sie etwas hübsche Links bekommen. Aber es ist auch durch den Monat geteilt. Jetzt, wenn Sie Änderungen speichern, gehen wir, so dass die Seiten nicht diesen Monat und Jahr Namen in ihnen haben. Aber die Beiträge werden, was, das ist völlig in Ordnung für mich, weil Ihr Poster an einen Tag gebunden sowieso, so dass Sie Block Beiträge werden immer mit 2013 beginnen, was auch immer Monat es ist. Und dann der Name, wo sind deine Seiten? Wird nur den Namen der geraden Seite haben. Dies ist also unser erster Schritt, um es von einem Blawg auf eine Seite zu verwandeln 50. Bewegen der Blog-Seite von der Seite von der Seite: Also der nächste Schritt ist Was, wenn Sie nicht möchten, dass Ihre Liste von Beiträgen auf Ihrer Homepage ist, Sie wollten eine tatsächliche Seite haben. Jetzt sind sie Einstellung für das, um Sie in das Lesen gehen. Und gerade jetzt zeigt die Titelseite Ihre neuesten Beiträge. Wir können das ändern, indem wir die Titelseite eine statische Seite haben. Jetzt wird wahrscheinlich eine bestimmte Seite zu erstellen, um unsere Homepage zu sein. Vielleicht nennen Sie es jetzt zu Hause. Ich könnte es auf das setzen, und dann musst du einen Beitrag Seite Toe setzen, deine Blawg-Abteilung übernehmen. Also, bevor wir das machen, werde ich zwei neue Seiten dafür erstellen. Also füge neue hinzu. Ich mache eine Homepage, und ich werde das später aktualisieren. Und dann werde ich eine Blawg-Seite erstellen, und ich werde diese leer lassen. Also, jetzt, da ich habe, schauen wir uns unsere Liste der Seiten an. Also habe ich die Beispielseite, die WordPress für mich gemacht hat, die wir ab und zu zusammen gemacht haben, Ah, Homepage, die ich später erweitern werde, und eine blockierte Seite, die leer ist. Und der Grund, warum wir diese leeren Blockseiten wollen, weil wir in Einstellungen gehen und lesen. Und jetzt werden wir die Titelseite so einstellen, dass sie zu Hause ist und das später erweitern wird. Und dann wird die Seite des Beitrags nur blawg sein. Und jetzt, wenn wir dies sagen und wir können einige Einstellungen hier haben, so zeigt dies wie die 10 letzten Beiträge. Wenn Sie 1000 Block-Puts haben, möchten Sie nicht alle 1000 anzeigen. Das ist also, wie viele Sie auf der Blockseite zeigen, und dann können Sie entweder den vollständigen Text anzeigen oder wenn Sie lange Beiträge haben, möchten Sie wahrscheinlich nur eine kurze Zusammenfassung setzen. Es wird wie die ersten paar Absätze jetzt, wo wir die Einstellung gespeichert haben. Wenn wir hierher zurückkommen und uns auffrischen, werden wir ein paar Änderungen sehen. Also ist unsere Homepage jetzt genau das, was wir auf diese Seite setzen. Wir können diese später erweitern, meine Homepage, und wenn wir dann unsere Blawg-Beiträge sehen wollen, könnten wir zu Blawg gehen. Und dann hier sehen wir die Liste unserer beiden Beiträge, die hier und dann alle anderen Seitenaktualisiert wurden anderen Seiten 51. Anpassen von Themen: alles in dieser Erscheinung haben. Hier hast du die Kontrolle, um die Dinge wirklich zu verändern. Also jetzt, wenn ich zum Auftritt gehe, wird es mich zuerst zu Themen bringen, und wir werden sehen, dass ich das 2012 Thema verwende. Ich könnte auch auf das 2011 Thema wechseln. Ähm, ziemlich bald wird es das 2013 Thema geben, nehme ich an, da sie jedes Jahr eins machen. Es gibt also Optionen in Ihrem Thema, um die Menüs vor dem Hintergrund zu ändern oder zu einem völlig anderen Thema zu wechseln. Oder Sie können ein neues Thema finden. Also lasst uns zum 2011 Thema wechseln. Da es bereits standardmäßig installiert ist, müssen Sie nur auf aktivieren klicken und es ist aktiviert, neues Thema aktiviert, neues Thema aktiviert, und jetzt können Sie sehen, dass 2011 das aktuelle Thema ist, und hier unten, 2012 ist immer noch zur Verfügung. Also jetzt, wenn ich hierher komme und die ganze Art und Weise auffrischen, dass dies aussieht, wird sich das Thema ändern. Jetzt ist es eine völlig andere Seite, richtig, aber es ist genau der gleiche Inhalt. Alle die gleichen Beiträge zu Hause ist immer noch hier, und diese Seite, die ich kann dies ist meine erste WordPress-Seite ist immer noch hier, so können Sie sehen, wie Sie eine Menge Macht hier und getrennt den Inhalt in der Präsentation. Jetzt lassen Sie uns unser eigenes Thema installieren. Ein neues Thema, das wir entweder basierend auf Schlüsselwort suchen können, basiert auf einigen dieser, ähm, ich mag Zeh. Vielleicht finden Sie ein Baumthema, ein Thema, das einen Baum darin hat. Nur zwei Ergebnisse. Vielleicht finden Sie ein Thema, das die Farbe Blau 32 Ergebnisse hat. Ich kann hier irgendwie kleine Demos sehen. Das hier ist nett und finanziell. Jetzt können Sie entweder einfach installieren oder eine Vorschau anzeigen. Erstens, die Vorschau gibt Ihnen eine kleine Vorschau, wie die Seite tatsächlich aussehen wird. Also mag ich diesen hier. Ich werde es jetzt installieren, da ich es installiert habe, kann ich es entweder aktivieren oder zurück zu unserem Theme-Installer gehen, also aktivieren wird es tatsächlich einschalten. Oder wenn Sie es nicht aktivieren, dann haben Sie in Ihren Verwalten Designs immer noch dieses. Das ist der derzeitige , der hier ist. Aber jetzt, unten unten, haben Sie dieses, auf dem Sie installiert haben, und hier können Sie es aktivieren. So neues bisschen neues Thema aktiviert und dann einfach aktualisieren Jetzt habe ich diese sehr cool blauen Regenbogenhimmel Thema los mit flachen Blättern und alles. So ist es wirklich einfach, Themen zu finden, und ich gebe Ihnen einen kleinen Hinweis ist, dass diese installierten Balken suchen. Was es tatsächlich tut, ist es die Suche Wordpress Dot Org ist das Thema Abschnitt genau hier . So gibt es 1732 Themen derzeit auf dem WordPress Themes Verzeichnis, und Sie können durch die beliebtesten suchen, Um, Um, oder einfach nur finden Sie Ihre eigenen. Also hier ist ein cooles. Wenn Sie von Wordpress Dot Org's installieren , gehen sie davon aus, dass Sie es herunterladen und dann hochladen und dann installieren. Selbst wenn Sie es hier finden, ist der beste Weg, um über die Installation zu gehen, wahrscheinlich, den Namen davon zu bekommen und dann zu Ihrem Aussehen zu gehen und dann Themen zu installieren und in der Suche und fügen Sie dann den Namen davon ein und suchen Sie danach, und dann können Sie es hier finden, und wenn Sie es installieren und aktivieren Sie es von hier aus, müssen Sie keinen manuellen Download durchführen. Also hier ist mein anderes Thema, das ich gerade installiert, wer ich in diesem Monat mag. Sie können sehen, dass, wenn ich die Seiten davon ändere, es sich irgendwie etwas ändert. Das scheint ein etwas ansprechendes Thema zu sein. Die Speisekarte brach hier ein, als ich sie klein machte. Und dann, als ich mich erweitert habe, dehnt es sich hier aus. Das ist also ein ansprechendes Thema. Sie möchten sicherstellen, dass Sie ein Thema haben, das so reagiert, weil die Größe von ah Telefon wird mehr so sein und es wird Ihre Seite brechen, wenn es versucht so anzuzeigen. 52. Anpassen der Sidebar und des Menüs: Fortsetzung unserer Umfrage. Lassen Sie uns diesen Stecker in diesem Thema reaktivieren, weil es eine offensichtliche Seitenleiste hat und Sie sehen können , es ist ein wenig überladen. Es gibt eine Menge Zeug hier, also wollen wir einige dieser kleinen Dinge loswerden. Platz dafür ist der nächste kleine Gegenstand. Inside Erscheinungsbild ist die Widgets. Jetzt hier sind all diese verschiedenen Widgets. Sie haben letzten Beitrag aktuelle Kommentare gestiegen, die auf die Suche aktuelle Post aktuelle Kommentare entspricht , etcetera. Also lasst uns Archive und Kategorien loswerden, weil wir diese jetzt nicht wollen. Bewegen Sie ihn aus dem Weg und dann können Sie aktualisieren und Sie können sehen, dies ist ein wenig vereinfacht . Und jetzt lassen Sie uns ein paar Widgets hinzufügen. Lassen Sie uns einen Kalender hinzufügen und dann hier unten, lassen Sie uns den beliebigen Text finden und fügen Sie diesen unten unten hinzu, und Sie können tatsächlich alles, was Sie wollen, hier einfügen, einschließlich HTM heraus. Also sehen Sie, der Kalender ist hier aufgetaucht, und wenn wir dann nach unten scrollen, hier ist der willkürliche Text, den ich mit HTML eingefügt habe, den ich direkt dort hineinfüge. Die nächste coole Sache sind Menüs, so dass Sie vielleicht Ihr Menü ein wenig anpassen möchten, wenn Sie nur mit Standard gehen. Jede Seite, die Sie erstellen, im Gegensatz zu einem Beitrag jede Seite, die Sie erstellen, wird in diesem Menü hier angezeigt. Das bedeutet, dass wir eine blockierte Seite erstellt haben. Wir haben eine Homepage erstellt. Und was, wenn wir entweder die Bestellung ändern wollen oder wir wollen, dass jemand nicht auftaucht? Sagen zum Beispiel, wir wollen das behalten. Dies ist meine erste WordPress-Seite, aber wir wollen nicht immer im Menü erscheinen, und wir wollen, dass die Homepage zuerst ist. Das ist, wo Sie hier mit dem Menübereich unter den Auftritten kommen. Das erste, was Sie tun werden, ist ein Menü zu erstellen. Sie müssen ihm einen Namen geben, und dann können Sie es erstellen. Nachdem Sie es in diesen Theme-Speicherorten erstellt haben, müssen Sie es auswählen und speichern. Jetzt ist es in Ihrem Thema aktiv, und hier können Sie benutzerdefinierte Links in Ihr Menü eingeben. Die meiste Zeit aber Sie abereinfach nur von Ihren bestehenden Seiten zeichnen wollen, die so gut von Ihnen allen sind. Und das sind alle Ihre Seiten. Das oder wenn Sie nur wollen, wenn Sie eine riesige Menge haben, können Sie nach ihm suchen, aber das sollte genug sein. Nun , wenn Sie diese nacheinander überprüfen, werden sie dem Menü hinzugefügt. Jetzt ist dieser Befehl wichtig. Also, wenn ich es jetzt speichern, werden Sie Blawg Startseite Beispielseite sehen und dies ist meine erste WordPress-Seite, die Bestellung gebloggt Startseite Beispielseite ist . Dies ist meine erste WordPress-Seite. Also lassen Sie uns die Reihenfolge ändern, wie wir es wollen und dann sagen, ich wollte loswerden dies ist meine erste Wordpress-Seite. Ich hätte es entweder nicht hinzufügen können. Oder jetzt, da ich es hinzugefügt habe, möchte ich es entfernen. Klicken Sie hier. Also habe ich gerade diese drei in meinem Menü Startseite Blog Beispielseite und sagen, Ich möchte blogged zuletzt setzen, damit Sie wirklich Ihr Menü genau so anpassen können, wie Sie wollen. Sie können auch mit Kategorien spielen, aber ich lasse Sie, um herauszufinden, dass auf eigene Faust 53. Bearbeiten von Themen: Das letzte, was ist der Editor innerhalb des Erscheinungsabschnitts, und das ist die fortschrittlichste. Also, wenn Sie zunächst zum Editor gehen, wird es Ihnen alle Dateien in Ihrem Thema zeigen. Also verwende ich das wolkige blaue Himmel-Thema, und alle diese Dateien sind alle Theme-Dateien. Jetzt wird es mir den Stylesheet-Stil geben, den CSS zuerst, denn das ist wahrscheinlich, was Sie bearbeiten werden. Also, wenn ich die Dinge hier ändern wollte, die Art und Weise, wie ich es tun würde, indem ich zum Editor gehe und diesen Stil editiere, dass CSS Dies ist das CSS hier fiel. Und da Sie CSS gelernt haben, sollten Sie keine Angst haben, Änderungen hier vorzunehmen. Obwohl es sich um eine riesige Wand aus Text handelt, können Sie es langsam herausfinden, vor allem mit den Techniken, die Sie gelernt haben. Sagen wir, ich wollte die Größe dieser Unterposition ändern. Hier kann ich mein Inspect-Element-Tool verwenden und dann die Unterüberschrift finden, und ich kann sehen, dass es diesen Punkt-Header verwendet DOT DSC wahrscheinlich für Beschreibung steht, und ich kann hier testen, welche Größe ich haben möchte. Das scheint eine gute Größe zu sein Also jetzt kann ich hier sehen, dass dies Stil ist, dass CSS Das ist der gleiche. Ich habe gerade bearbeitet. Also muss ich mich an Dot Header Dot DSC erinnern, ich werde in mein Stylesheet gehen und danach suchen . Ich kann sehen, dass es einmal auftaucht, eins von eins. Also weiß ich, dass dies der richtige Ort ist, und hier kann ich das CSS hinzufügen, das ich möchte und ich kann es speichern. Und jetzt, selbst wenn ich das rückgängig mache, wenn ich aktualisiere, werden Sie sehen, dass das sagen, dass die Größe aktualisiert wird. Da ist es. So passen Sie Ihre Seite an und Sie können in wirklich fortgeschrittene Dinge wie dies der Header ist, der hier über diesen Bereich sein wird. Dies ist, wo Sie in den HTML-Code auf der PHP gelangen können, um das 54. Plug-ins: Sie haben Plugins beschränkt, um Ihre Website zu erweitern, um fast alles zu tun, mit dem Sie beginnen möchten. Lassen Sie uns eine einfache hinzufügen, die Ihre Besucher verfolgen wird. Gehen Sie zu neuen hinzufügen und geben Sie dann den Namen des Plugs und Sie suchen, in diesem Fall, Google Analytic ator. Jetzt müssen Sie ein Google Analytics-Konto einrichten, damit dies funktioniert. Aber ich werde Sie durch diesen Prozess führen, weil es sich lohnt. Google Analytic ater Jetzt installieren, Ja, installieren Und dann, sobald es durchgegangen ist, aktivieren Sie den Stecker in. Jetzt sehen Sie es hier unten, gehen Sie zu den Einstellungen. Wir müssen in Ihrem Google-Konto eingeloggt sein. Gehen Sie voran und klicken Sie auf den Link, den sie Ihnen geben und den Zugriff erlauben. Kopieren Sie den Code, den sie Ihnen geben, in die Box und fahren Sie jetzt fort. Anfangs wird es deaktiviert und es wird eine vier oder drei Luft geben. Also, was Sie tun müssen, ist eigentlich rein zu gehen. Wenn dies die Nachricht ist, die Sie erhalten, was Sie wahrscheinlich sind, müssen Sie in Google gehen und ein Google Analytics-Konto einrichten. Gehen Sie also zu Google dot com slash analytics und stellen Sie sicher, dass Sie angemeldet sind. Und hier ist der Anmeldeprozess. Du wirst das für eine Webseite tun. Geh weiter und wähle eine davon aus. Ich werde mit Universal gehen und in Ihre Website-Informationen. Sie müssen die Nutzungsbedingungen akzeptieren, und dann sollte Ihr Konto eingerichtet werden. Gehen Sie zurück zu Ihrer Seite und aktualisieren Sie sie. Dieses Mal, dass Luft verschwindet, so dass Sie auf Aktiviert klicken können. Jetzt gehen Sie einfach voran und scrollen Sie nach unten. Sie können sich später mit diesen anlegen, obwohl Sie wahrscheinlich nichts ändern müssen. Scrollen Sie nach unten und speichern Sie jetzt. Es sollte eingerichtet werden, um das Tracking zu sehen. Gehen Sie zu Ihrem Dashboard und finden Sie hier die Google Analytics-Seite. Ich mag es auf der rechten Seite zu setzen, weil oft das Recht ein bisschen größer ist, und ich ziehe es gerne nach oben. Eine Menge von diesen Luft nicht wirklich so nützlich. Also, jetzt wirst du nichts haben. Aber im Laufe der Zeit sehen Sie ein Diagramm der Anzahl der Besucher, Seitenaufrufe, Besuche, Absprungrate und andere nützliche Daten 55. Abschluss von thoughts: Das ist also das Ende der High-Level-Umfrage von WordPress. Es sollte genug für Sie sein, um loszulegen. Obwohl Sie viele Jahre damit verbringen können, alles zu lernen, was es über WordPress nur die Oberfläche zu erlernen, werden Sie in der Lage sein, in eine Menge wirklich leistungsfähiges Zeug schauen durch, vor allem die Plug Ins, weil Sie können es auf alle Arten von Dingen erweitern. Bildergalerien, Kontaktformulare. Es gibt eine endlose Liste von Tausenden von Plug Ins von Menschen, die erstellt haben. Wahrscheinlich ist der einfachste Weg, um die Plug Ins zu finden, nicht über den Plug und Finder hier, sondern gehen Sie tatsächlich zu Wordpress dot warg und klicken Sie dann auf den Plug Ins Link. Und dies zeigt Ihnen sowohl die beliebtesten Links und die vorgestellten Plug Ins vorgestellten Plug Ins oder diejenigen, die WordPress ist gekennzeichnet, weil sie denken, sie sind besonders nützlich. Und die beliebtesten Plug Ins werden manchmal von Millionen von Menschen verwendet und haben eine gute Bewertung und zum größten Teil, werden eine gute Wette sein, dass viele Leute sie sehr, sehr hilfreich gefunden haben . Also gehen Sie zu WordPress Punkt oder gehen Sie und überprüfen Sie die beliebten Plug Ins, und dann können Sie auch nach der Kategorie der Plug in als auch suchen. Die andere Sache, die Sie sofort tun möchten, ist, wählen Sie ein Thema und beginnen Sie dann, es anzupassen. So finden Sie ein Thema, das ähnlich ist wie Sie es aussehen möchten. Verwenden Sie die Fähigkeiten, die Sie in diesem Kurs gelernt haben, verwenden Sie den Dom Inspector und Ihre CSS Bearbeitungsfähigkeiten, um Ihr Thema zu bearbeiten und es genauer aussehen zu lassen , wie Sie es wollen. Der erste Stopp zum Anpassen eines Themas sind die Optionen im Thema direkt hier. Einige Themen haben also mehr Optionen und andere. Und wenn Sie es nicht wegbekommen, schauen Sie mit diesen Optionen ganz so aus, wie Sie es wollen. Dann gehen Sie in den Editor und beginnen Sie mit der Anpassung der Dinge von Hand. Das ist das Ende dieser Lektion. Gehen Sie weiter und beginnen Sie mit dem Projekt. Und, äh, lassen Sie mich wissen, wie die Dinge laufen