Bereits HTML-Code für die Hauptseite. Erstellen von HTML-Seiten in Notizblock: Klarstellungen für Dummies

Jetzt ein paar Worte zu den Tags, die wir mit dieser Seite erstellt haben.

Beschreibung von HTML-Tags aus Beispiel

1. - Diese Tags müssen auf jeder Webseite vorhanden sein. Sie informieren Browser und Suchmaschinen, dass dies eine HTML-Seite ist.

Jede HTML-Seite hat die folgende Struktur:

... Tags-Tags ... ... Page Body ...

2. - Es gibt alle sichtbaren Seiteninhalte zwischen diesen Tags.

4. - Zwischen diesen Tags wird ein Seitentitel verschrieben, der oben im Browser angezeigt wird. Wenn Sie auf der Suche nach etwas in Suchmaschinen suchen, ist das erste, was angezeigt wird, der angezeigt wird, nur der Name der Seite. Etikett Oft abgekürzt namens "tytyl". Ich rate Ihnen, sich mit dem Artikel kennenzulernen: So erstellen Sie ein Tag </p> <p>Machen wir nun zu den Tags, die sich in den HTML-Seiten befinden (innen <body> und</body> ).</p> <p>5. <center></center> - Diese Tags richten sich alles in der Mitte aus. In diesem Fall ist das Zentrum die Mitte des Bildschirms. In Zukunft wird empfohlen, diese Tags abzulehnen.</p> <p>6. <h1></h1> - Dies ist eines der Tag-Tag-Tag-Tag-Tag <h1>..<h6> , normalerweise wird der Name der Seite abgeschlossen. Diese Seite ist beispielsweise das Header-Tag "Beispiel für das Erstellen einer HTML-Seite".</p> Hinweis <p>diese Tags haben viel Gewicht im Ranking der Site, sodass sie ordentlich und mit dem Geist verwenden müssen.</p> <p>Wenn Sie einen HTML-Code erstellen, müssen Sie eine einfache Regel einhalten: Sie müssen zuerst den Header-Tag gehen <h1> und kann dann schon gehen <h2> , <h3> usw. Die Hauptsache ist, dass es nicht zuerst war <h2> , später <h1> , später <h3> usw. Es muss eine strikte Hierarchie geben. Headlovkov. <h2> , <h3> usw. Vielleicht viel.</p> <p>7. <br/> - Dies ist ein einzelner Tag, das kein Schließungs-Tag benötigt. IT-Übergang zur nächsten Zeile. Zwei einzelne Tags in einer Zeile sind in meinem Beispiel geschrieben, um zweimal zur nächsten Zeile zu gelangen.</p> <p>8. <span><img src='https://i0.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy loading=lazy> </span> - Dies ist ein einzelnes Tag, das das Bild anzeigt.</p> <ul><li>sRC ist ein obligatorischer Parameter, in dem die Bildadresse angegeben ist (anstelle von URLs müssen Sie die Adresse registrieren, an der Ihr Bild gespeichert ist). <br><u>Hinweis</u>: <ul><li>Wenn sich das Bild in einem Ordner mit Ihrer HTML-Seite befindet, reicht es aus, den Namen des Bildes zu schreiben, ansonsten müssen Sie entweder eine absolute oder relative URL verschreiben.</li> <li>Vergessen Sie nicht, die Erweiterung des Bildes anzugeben. Zum Beispiel, .jpg, .gif, .jpeg.</li> </ul></li> <li>alt oder Titel - Sie können in diesen Parametern eine Beschreibung in Ihr Bild schreiben. Wenn Sie eine Maus in das Bild mitbringen, wird diese Beschreibung angezeigt. Diese Parameter sind wichtig, um die Website zu fördern, insbesondere auf der Suche nach Bildern. Wenn das Bild nicht heruntergeladen wird, wird dieser Text abgeleitet, der auch ein Plus ist.</li> </ul><p>9. <font></font> - Diese Tags sollen die Schriftart, den Hintergrund, die Größe usw. ändern. Kurz gesagt, alles, was mit der Textformatierung zugeordnet ist, kann in einem Tag konfiguriert werden. Dieses Tag hat einige ein paar Attribute, die ich in einer separaten Lektion erzählen werde.</p> <p>Hinweis: - ein ähnliches Tag.</p> <p>Es gibt auch eine CSS-Schriftart-Eigenschaft, in der Sie alle diese Parameter einstellen können.</p> <p>10. - Fett zuordnen. Alles, was zwischen dem Schluss gezogen wird <b> und</b> Es wird fett hervorgehoben. Wenn Sie es beispielsweise zum Beginn des Inhalts schreiben, und am Ende schließen, wird der gesamte Text auf der Seite auf der Seite hervorgehoben. Dies ist ein ziemlich gewöhnliches Tag, dessen Analog ist <strong></strong> .</p> <p>Suchmaschinen achten auf dieses Tag, um den Einfluss von Keywords zu verbessern. Sie müssen jedoch vorsichtig sein, da sie jedes Mal von fetthaltigen Schlüsselwörtern partitioniert wird, wenn sie für Spam wahrgenommen wird.</p> <p>Wenn Sie eine Webseite öffnen, enthält es typische Elemente, die sich nicht von der Art und Richtung der Site ändern. In Beispiel 4.1 ist der Code eines einfachen Dokuments mit den Haupt-Tags angezeigt.</p> <p>Beispiel 4.1. Quellcode-Webseite</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Muster-Webseite.

Titel

Der erste Absatz.

Zweiter Absatz.

Kopieren Sie den Inhalt dieses Beispiels und speichern Sie ihn im Ordner C: \\ www \\ unter dem Namen Examps41.html. Führen Sie danach den Browser aus und öffnen Sie die Datei über den Menüpunkt. Datei\u003e Datei öffnen (Strg + O). Geben Sie im Dialogfeld Dokumentauswahl die Datei example41.html an. Der Browser öffnet die in Fig. 1 gezeigte Webseite. 4.1.

Feige. 4.1. Das Ergebnis der Ausführung des Beispiels

Element Entwickelt, um den Typ des aktuellen Dokuments - DTD anzugeben (Dokumenttypdefinition, Beschreibung des Dokumenttyps). Es ist notwendig, dass der Browser versteht, wie Sie die aktuelle Webseite interpretieren, da HTML in mehreren Versionen vorhanden ist. Darüber hinaus gibt es XHTML (erweiterbarer Hypertext-Markup-Sprache, eine erweiterte Hypertext-Markup-Sprache), ähnlich wie HTML, jedoch anders als Syntax. An den Browser "nicht verwirrt" und verstanden, je nach dem Standard, um eine Webseite anzuzeigen, und Sie müssen die erste Zeile einstellen .

Es gibt mehrere Arten Sie unterscheiden sich je nach der HTML-Version, die orientiert ist. Auf der Registerkarte. 4.1. Die Haupttypen von Dokumenten mit ihrer Beschreibung sind angegeben.

Tabelle. 4.1. Gültiger DTD.
Doctype. Beschreibung
HTML 4.01.
Strenge HTML-Syntax.
HTML-Übergangssyntax.
Frames werden im HTML-Dokument angewendet.
HTML 5.
In dieser Version von HTML, nur eine DOCTLE.
XHTML 1.0.
Strikte XHTML-Syntax.
XHTML-Übergangssyntax.
Das Dokument ist in XHTML geschrieben und enthält Frames.
XHTML 1.1.
XHTML 1.1 Entwickler gehen davon aus, dass es HTML allmählich verdrängen wird. Wie Sie sehen, hat keine Division auf der Art keine Definition, da die Syntax eins die klare Regeln ein- und gehorcht.

Die Differenz zwischen der strikten und der Übergangsbeschreibung des Dokuments besteht aus einem anderen Ansatz zum Schreiben des Codes des Dokuments. Strict HTML erfordert strikte Einhaltung der HTML-Spezifikation und vergessen Fehler nicht. Übergangsalat HTML mehr "ruhig" bezieht sich auf einige Codes, sodass dieser Typ in bestimmten Fällen diese Art nutzen kann.

In strengen HTML und XHTML benötigen Sie beispielsweise sicherlich ein Tag Und in der Übergangs-HTML können Sie nicht angeben und nicht angeben. Denken Sie gleichzeitig daran, dass der Browser in jedem Fall das Dokument angezeigt wird, unabhängig davon, ob es der Syntax entspricht oder nicht. Eine solche Prüfung wird mit dem Validator durchgeführt und ist hauptsächlich für Entwickler gedacht, um Fehler im Dokument zu verfolgen.</p> <p>In Zukunft werden wir hauptsächlich streng anwenden<!DOCTYPE> Außer wenn es speziell festgelegt ist. Dadurch können wir typische Fehler vermeiden und dem Schreiben des syntaktisch korrekten Codes lehren.</p> <p>Oft können Sie den HTML-Code im Allgemeinen ohne Verwendung des HTML-Codes erfüllen<!DOCTYPE> Die Webseite wird in diesem Fall noch angezeigt. Trotzdem kann es herausgestellt werden, dass das gleiche Dokument im Browser auf unterschiedliche Weise auf verschiedene Arten angezeigt wird<!DOCTYPE> Und ohne es. Darüber hinaus können Browsern solche Dokumente auf ihre eigene Weise anzeigen, dadurch die Seite "Falten", d. H. Es wird überhaupt nicht wie vom Entwickler erforderlich angezeigt. Damit keine solchen Situationen hinzugefügt werden<!DOCTYPE> zum Anfang des Dokuments.</p><p>Etikett <html> Definiert den Beginn der HTML-Datei, der Titel ist im Inneren gespeichert ( <head> ) und der Körper des Dokuments ( <body> ).</p><p>Der Header des Dokuments, wie es auch als Block bezeichnet wird <head> kann Text und Tags enthalten, aber der Inhalt dieser Partition wird jedoch nicht direkt auf der Seite angezeigt, mit Ausnahme des Containers <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etikett <meta> Es ist universell und fügt eine ganze Klasse von Möglichkeiten hinzu, insbesondere mithilfe von Metategories, als verallgemeinerter Anruf dieses Tags können Sie die Codierung der Seite ändern, Keywords, Beschreibung des Dokuments und vieles mehr hinzufügen. Damit der Browser ist, um zu verstehen, was sich mit dem UTF-8-Kodieren (Unicode-Transformationsformat, das Unicode-Konvertierungsformat) und diese Zeichenfolge hinzugefügt, wird diese Zeichenfolge hinzugefügt.</p><p> <title>Muster-Webseite.

Etikett Gibt den WebPage-Header an, dies ist eines der wichtigen Elemente, die zur Lösung einer Vielzahl von Aufgaben bestimmt sind. Im Windows-Betriebssystem wird der Header-Text in der oberen linken Ecke des Browserfensters angezeigt (Abb. 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Feige. 4.2. Titelart im Browser</p> <p>Etikett <title> Es ist obligatorisch und muss sicherlich im Dokumentcode vorhanden sein.</p><p>Achten Sie darauf, ein Schluss-Tag hinzuzufügen</head> Um anzuzeigen, dass die Dokument-Header-Einheit abgeschlossen ist.</p><p>Leiche des Dokuments <body> Entwickelt, um Tags und einen sinnvollen Teil der Webseite aufzunehmen.</p><p> <h1>Titel</h1> </p><p>HTML bietet sechs Text-Header verschiedener Ebenen an, die die relative Bedeutung des Abschnitts nach dem Titel zeigen. Also, Tag. <h1> repräsentiert den wichtigsten Header der ersten Ebene und das Tag <h6> Es dient dazu, den Titel der sechsten Ebene anzuzeigen und ist das geringste von Bedeutung. Der erste Level-Header wird standardmäßig von der größten Schriftart der Schriftart angezeigt, die nachfolgenden Niveau-Header in der Größe sind weniger. Stichworte <h1>...<h6> Dies sind die Blockelemente, sie beginnen immer mit einer neuen Zeile, und nach ihnen werden andere Elemente in der nächsten Zeile angezeigt. Außerdem wird die Überschrift und danach leerer Speicherplatz hinzugefügt.</p><p> <!-- Комментарий --> </p><p>Ein Text kann im Browser aus dem Display im Browser ausgeblendet werden, indem er einen Kommentar darstellt. Obwohl der Benutzer keinen solchen Text sieht, wird es immer noch in dem Dokument übertragen, sodass Sie also den Quellcode angesehen haben, können Sie verborgene Noten erkennen.</p> <p>Wenn Sie eine Webseite öffnen, enthält es typische Elemente, die sich nicht von der Art und Richtung der Site ändern. Beispiel 1 zeigt den Code eines einfachen Dokuments mit den Hauptelementen.</p><p>Beispiel 1. Quellcode einer Webseite</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Muster-Webseite.

Titel

Der erste Absatz.

Zweiter Absatz.

Kopieren Sie den Inhalt dieses Beispiels und speichern Sie ihn im Ordner C: \\ www \\ unter dem Beispiel2.html. Führen Sie danach den Browser aus und öffnen Sie die Datei über den Menüpunkt. Datei\u003e Datei öffnen (Strg + O). Geben Sie im Dialogfeld Dokumentauswahl die Datei example2.html an. Der Browser öffnet die in Fig. 1 gezeigte Webseite. einer.

Feige. 1. Das Ergebnis des Beispiels im Browser

Element (JARG. Ärzte) entwickelt, um den Typ des aktuellen Dokuments anzugeben - DTD (Dokumenttypdefinition, Beschreibung des Dokumenttyps). Es ist notwendig, dass der Browser versteht, wie Sie die aktuelle Webseite interpretieren, da HTML in mehreren Versionen vorhanden ist - modernes HTML5 oder veraltetes HTML4 und XHTML. An den Browser "nicht verwirrt" und verstanden, je nach dem Standard, um eine Webseite anzuzeigen, und Sie müssen die erste Zeile einstellen.

Da wir weiterhin nur mit HTML5 arbeiten, benötigen wir nur eine kurze und moderne Doktion.

Wir haben erwähnt, dass die Namen der Elemente mit kleinen und großen Buchstaben geschrieben werden können. ZU Diese Regel gilt auch und kann auf unterschiedliche Weise aufgenommen werden. Der Name dieses Elements wird traditionell jedoch in Großbuchstaben geschrieben.

Tag öffnen Bestimmt den Beginn des HTML-Dokuments, der Kopf ist im Inneren gespeichert ( ) und der "Körper" des Dokuments ( ).

Der Inhalt dieser Partition wird nicht direkt auf der Seite angezeigt, mit Ausnahme des Artikels . Innerhalb <head> Die folgenden Elemente können sich befinden: <base> , <link> , <meta> , <script> , <style> oder <title> .</p><p> <meta charset="utf-8"> </p><p>Element <meta> Es ist universell und fügt eine ganze Klasse von Merkmalen hinzu, insbesondere mithilfe einer Metatega, da A ALALIDIERT in diesem Artikel aufgerufen wird, können Sie die Codierung der Seite ändern, Keywords, Dokumentbeschreibungen hinzufügen und viel mehr für den Browser- oder Suchmaschinen vorgesehen sind . Insbesondere, dass der Browser versteht, was sich mit UTF-8-Kodierung (Unicode-Transformationsformat, Unicode-Konvertierungsformat) und diese Zeichenfolge hinzugefügt, wird hinzugefügt.</p><p> <title>Muster-Webseite.

Element Gibt den Namen der Webseite an. Im Browser wird es auf der aktuellen Registerkarte angezeigt (Abb. 2).</p><p><img src='https://i0.wp.com/webref.ru/assets/images/html-tutorial/title.png' height="62" width="367" loading=lazy loading=lazy></p><p>Feige. 2. Nennen Sie Webseiten im Browser</p><p>Element <title> Es ist obligatorisch und muss sicherlich im Dokumentcode vorhanden sein. Darin darf es nur Text schreiben und keine anderen Elemente in <title> sollte nicht. Es ist jedoch zulässig, verschiedene Textzeichen hinzuzufügen, beispielsweise wie folgt: <span><title>Adobe ™ Photoshop®. .

Schließungs-Tag. Zeigt an, dass der "Kopf" des Dokuments abgeschlossen ist.

"Körper" des Dokuments Entwickelt, um die Elemente und den Inhalt der Webseite zu platzieren.

Titel

HTML bietet sechs Text-Header verschiedener Ebenen an, die die relative Bedeutung der nach dem Titel befindlichen Partition zeigen. Also, Element

repräsentiert den wichtigsten Header der ersten Ebene und das Element

Es dient dazu, den Titel der sechsten Ebene anzuzeigen und ist das geringste von Bedeutung. Der erste Level-Header wird standardmäßig von der größten Schriftart der Schriftart angezeigt, die nachfolgenden Niveau-Header in der Größe sind weniger. Elemente

...

Dies sind die Blockelemente, sie beginnen immer mit einer neuen Zeile, und nach ihnen werden andere Elemente in der nächsten Zeile angezeigt. Außerdem fügt der Browser vor der Überschrift und danach leerer Speicherplatz hinzu.

Ein Text kann im Browser aus dem Display im Browser ausgeblendet werden, indem er einen Kommentar darstellt. Obwohl der Benutzer einen solchen Text nicht sieht, wird es immer noch in dem Dokument übertragen, sodass Sie den Quellcode angesehen werden, können Sie verborgene Noten erkennen.

Die Lektion "So erstellen einer HTML-Seite" ist dem Layout der einfachsten Webseite gewidmet. Sie erfahren, wie Sie die HTML-Datei korrekt speichern, die erforderliche Kodierung einstellen, um die HTML-Seite im Browser korrekt anzuzeigen und Texte, Listen, Bilder auf der Webseite zu platzieren.

Nachdem Sie diese Lektion studiert, erfahren Sie bereits, wie Sie die erste Webseite erstellen, wie in Abbildung 1.

Bild 1

1. HTML-Dokumentstruktur

HTML-Dateien haben eine Erweiterung .htm. oder .html..

Normalerweise Tags-Paare: Anfangs- und End-Tags. Initial -<>, zum Beispiel endlich

und

Paar Tag namens mehr container .

Einige Tags verfügen nicht über ein zwingendes Paar-Tag, ein solcher Tag wird aufgerufen single . Dieses Tag ist geschlossen, indem Sie beispielsweise die rechte Spitze vor der schließenden Eckhalterung schreiben

Die Struktur des HTML-Dokuments ist wie folgt (Abbildung 2).

Figur 2.

Erläuterung der Auflistung in Abbildung 2

In der ersten Zeile bedeutet das Doctype-Design eine der Standards des Webseiten-Layouts.

Zwischen Tags und Enthält das Header-Teil. Es beinhaltet ein Design </b> und <b>. Dieser Name wird beim Laden des Dokuments in der Browser-Header-Leitung (Abbildung 3) angezeigt.

Figur 3.

Aufzeichnung bedeutet kyrillische Kodierung, sodass die Buchstaben korrekt im Browser angezeigt werden. Wenn die Kodierung nicht vorgeschrieben ist, können die Schriftarten manchmal wie folgt angezeigt werden (Abbildung 4)

Figur 4.

Dieselbe Seite nach dem Einfügen der Kodierung (Abbildung 5)

Abbildung 5.

Hinweis: Anstelle der Kodierung charset \u003d "Windows-1251"sie können die Kodierung verwenden charset \u003d " utf. -8" Damit können Sie mehrsprachige Websites erstellen, da alle in der Welt vorhandenen Symbole darin vorhanden sind. In diesem Fall in Notizblock.++, um das Layout zu löschen und zu sparenhtml.Datei Wählen Sie aus dem oberen Menü Codieren - codieren in Utf. -8 ohne Bom. (Utf-8 ohne bom)

So erstellen Sie das erste Dokument dieser Informationen.

Praktische Aufgabe 1.

1. Erstellen Sie einen Ordner, benennen Sie ihn mEINE.haus.. Die Namen aller Ordner und Dateien müssen von lateinischen Zeilenbuchstaben erstellt werden, russische Namen können nicht verwendet werden. Geben Sie die Namen kurz und semantisch an.

Der Webseitencode wird in einem Notizblock geschrieben. Es ist besser, nicht das Notebook zu verwenden, das sich in der Lieferung von Windows befindet, sondern mehr "Advanced", z. B. Notepad ++. Verteilung Notepad ++. Es gibt im Ordner CD / Distr..

2. Öffnen Sie Notepad ++. Stellen Sie sicher, dass die ANSI-Codierung installiert ist, um dies im Menü zu tun. KodierungInstallieren Sie die Position. Codieren in Ansi..

3. Wählen Sie in Notepad ++ Code aus der Liste in Abbildung 2.

Der Code in der Liste in Abbildung 2 dient uns später als Vorlage, um nicht jedes Mal die Struktur des HTML-Dokuments einzugeben. Doctype Design-Kopie von hier (erinnern und merken, dass es nicht notwendig ist).

4. Speichern Sie die Datei unter dem Namen shablon.html.im Ordner mein Haus.Während auf dem Feld Dateityp Installieren Alle Arten.(Abbildung 6), ansonsten öffnet sich Ihre Webseite später nicht im Browser.

Abbildung 6.

5. Nach dem Speichern laufen shablon. html. Doppelklick. Infolgedessen sieht Ihre Datei so aus (Abbildung 7).

Abbildung 7.

Wenn Sie das Ergebnis nicht erhalten haben, heißt es, wie in der obigen Abbildung, bedeutet dies, dass in dem Code am wahrscheinlichsten einen Fehler vorliegt. Genug ein falsches Symbol und die Webseite werden nicht korrekt angezeigt. Überprüfen Sie erneut den Code mit der Liste in Abbildung 2.

6. Innerhalb des Ordners mein Haus. Ordner erstellen Öffentlichkeit_ html.. Ein solcher Name wird normalerweise als Ordner bezeichnet, in dem die Site gespeichert wird, wenn auf diesem Hosting platziert (dieser Ordner kann auch www bezeichnet werden).

7. Speichern Sie die Datei shablon. html. im Ordner Öffentlichkeit_ html. Unter dem neuen Namen main.. html..

8. Aus dem Ordner CD/ html_css_1.datei öffnen text_main.txt. in Notepad ++ und öffnen Sie auch die unter dem Namen gespeicherte Datei main.. html.

9. Kopieren Sie den gesamten Text aus der Datei. text_main.txt.und in die Datei einfügen main.. html.anstelle der Phrase "den Inhalt der Webseite". In Teg Schreiben Sie das Wort "Home". So <b><title>das main.

10. Speichern Sie die Änderungen und zeigen Sie die Datei an. main.. html.im Browser. Sie sehen unformatierte Text. Sogar die Straten, die sich im Quelltext befinden, der Browser nicht (Abbildung 8).

Abbildung 8.

2. Formatierungnetz.Bereich Tag.Html.

In dieser Lektion erörtert "So erstellen einer HTML-Seite" die Haupt-Tags, die zum Markieren einer Webseite verwendet werden.

Tags sollen den Text der Webseite formatieren. Die Liste der Tags kann im Ordner näher angesehen werden. CD/VerzeichnisHtml.im Verzeichnis. html401_ru.chm. (Im oberen Menüpunkt elemente).

Betrachten Sie einige der Tags.

Elemente h. 1, h. 2, h. 3, h. 4, h. 5, h. 6

Die Strukturierung des Körpers des Dokuments wird im Element durchgeführt < körper.> Verwenden von Heats, die durch Elemente H1, H2, H3, H4, H5, H6 definiert werden.

Die Elemente der Kopfzeile sind Paar, sodass sie öffnen müssen < h.1> und schließen h.1> Stichworte.

HTML verfügt über sechs Stufen von Titeln: H1 (das oberste), H 2, H3, H4, H5 und H6 (das niedrigste). Die Funktionen der Schlagzeilen ähneln den üblichen Titelnstilen in Texteditoren.

Die Wirkung dieser sechs Tags wird in den folgenden Zahlen dargestellt. In einem Bild ist der Quellcode (Fig. 9) andererseits eine Ansicht im Browser (Abbildung 10).

Abbildung 9.

Abbildung 10.

Trennung von Text auf Absätze

Etikett < p.> Gibt den Beginn des Absatzes an und fügt den Abstand von oben ein - ein Einrückgang an die Trennung dieses Absatzes aus dem vorherigen.

Zwangsstranglücke.

Etikett
Ermöglicht das Übertragen des verbleibenden Teils des Absatzes in die nächste Zeile. Dies ist ein unbezahltes Tag, und im Gegensatz zu Tag-Tag erhöht das Absatz nicht das Intervall zwischen den Reihen.

Praktische Aufgabe 2.

1. Formatieren Sie den Titel "Katalog von architektonischen Projekten" mit Tags

und

.

2. Formatieren Sie den Titel "Projekte für Ihr zukünftiges Zuhause" mit Tags

und

.

3. Formatieren Sie die "Projekte der Häuser" und "House Square" -Eing-Header mit Tags

und

.

4. Der Haupttext ist mit dem Tag in Absätze unterteilt

In den ersten beiden Absätzen verwenden Sie das Tag
Um die Zeichenfolge zu übertragen. Infolgedessen sollte Ihr Code so aussehen (Abbildung 11).

5. Überprüfen Sie das Ergebnis im Browser.

Abbildung 11.

Markierte und nummerierte Listen

HTML bedeutet, dass Sie alle Listen erstellen können: nummeriert (Digital und Alphabet) und mit verschiedenen Arten von Markern gekennzeichnet.

Etikett < ul>…ul> Generiert eine markierte Liste.

Etikett < old>…old> Erzeugt eine nummerierte Liste.

Separates Listenelement wie in

    und in
      wird mit einem Tag gebildet < li.> .

      Praktische Aufgabe 3.

      1. Erstellen Sie eine nummerierte Liste unter der Überschrift "Hausprojekte".

      2. Erstellen Sie eine markierte Liste unter dem Titel "House Square". Ihr Code sieht so aus (Abbildung 12).

      Abbildung 12.

      3. Durchsuchen Sie die Seite im Browser.

      Listen können mit verschiedenen Markern ineinander eingefügt werden.

      Ein Beispiel einer angehängten Liste ist in Fig. 4 gezeigt. 13.

      Praktische Aufgabe 4.

      1. Implementieren Sie in dem in Abbildung 13 gezeigten neuen Dateicode.
      2. Speichern Sie die Datei im Ordner mein Haus. unter dem Namen spisokok._ vlozh.. html.. Das Ergebnis ist in FIG. 13.

      Abbildung 13. Beispiel investierte Liste

      Startschriftarten

      Etikett - Ermöglicht das Anzeigen des fettgedruckten Textes.

      Etikett - Ermöglicht das Anzeigen von Text in einem angemessenen Stil.

      Etikett - Zeigt unterstrichene Text an.

      Beispielsweise:

      In diesem Fall wird der Text angezeigt. fett Kursiv Aber nicht unterstrichen.

      In diesem Fall wird der Text geschrieben fat unterstrichen in Kursivschrift .

      Untere und obere Indizes

      Etikett < sub.> und sub.> Ermöglicht das Senken des Textes an der Kante unter dem üblichen Text.

      Etikett < sup> und sup> Ermöglicht das Erhöhen von Text auf der Abschaffung über dem üblichen Text. Der Text, der sich zwischen diesen Tags befindet, wird von kleinerer Schrift im Vergleich zu herkömmlichem Text dargestellt.

      Praktische Aufgabe 5.

      1. Format im ersten Absatznamen myhouse.ru Fettgedruckte Schrift (Abbildung 14).

      Abbildung 14.

      2. Das Format in der zweiten Absatzmenge "mehr als 95% der Projekte", die in Kursivschrift unterstrichen sind (Abbildung 15).

      Abbildung 15.

      3. Formatieren Sie die oberen Indizes an diesen Stellen, an denen Quadratmeter verwendet werden (Abbildung 16).

      Abbildung 16.

      4. Speichern Sie die Datei. Durchsuchen Sie den Browser. Die Webseite sollte so aussehen (Abbildung 17).

      Abbildung 17.

      3. Bilder einfügen.

      In unserem Artikel "So erstellen Sie eine HTML-Seite" werden wir ansehen, wie Sie auf der Webseite posten können.

      Bilder eingesetztes Tag einfügen . Obligatorisch für dieses Tag ist ein Attribut src. (aus der englischen Quelle - Quelle). Es definiert den Pfad in die Grafikdatei, dessen Bild auf der Webseite angezeigt werden soll.

      Ein Befehl wird zum Einfügen des Bildes verwendet.

      Beispielsweise: " image1.jpg." alt \u003d "(! Lang: Bild" /> !}

      Das Alt-Attribut ist erforderlich, um die Webseite im Modus deaktivierter Bilder anstelle des fehlenden Bildes anzuzeigen, anstelle des fehlenden Bildes wurde eine Inschrift ergriffen, die im Alt-Attribut ausgeführt wird. Auch Alttexte werden immer empfohlen, weil Suchmaschinen analysieren sie als Schlüsselwörter beim Suchen nach Bildern.

      Grafikdateien können im Format sein jPG, GIF, PNG und notwendigerweise im FarbmodellRGB..

      Praktische Aufgabe 6.

      1. Fügen Sie nach der Liste der Häuserhäuser die Bilder der Hütten auf der Webseite ein projekt._1.jpg. und projekt._2.jpg.aus dem Ordner Cd / html_cSS._1 . Um dies zu tun, kopiere zuerst die beiden dieser Bilder in den Ordner, in dem sich die main.html-Datei befindet. Der Bildeinfügungscode sieht so aus (Abbildung 18).

      Abbildung 18.

      2. Überprüfen Sie das Ergebnis im Browser (Abbildung 19).

      Abbildung 19.

      Grundsätzlich das Prinzip der Verwendung von TagsHtml. Muss verstanden werden. Sie werden im selben Prinzip verwendet: Wenn das Container-Tag, das ist das Öffnungs- und Schließkennzeichen. Wenn das Tag Single ist, gibt es kein Schließungs-Tag, in diesem Fall wird der rechte Schrägstrich beispielsweise in eine schließende Eckhalterung geschrieben< br. /\u003e. Ist der Tag-Container oder einsam, dass Sie immer in der Spezifikation sehen könnenhtml401_en.chm im Abschnitt "Elemente".

      4. Ansprechen innerhalb der Site

      In unserer ersten Lektion, "So erstellen Sie eine HTML-Seite", analysieren wir die Konzepte der Adressierung in HTML.

      Berücksichtigen Sie die Adressierungsoptionen, wenn die HTML-Datei Bilder aufstellen muss, die sich in verschiedenen Site-Ordnern befinden.

      Es gibt zwei Arten von Adressierungen:

      • absolut;
      • relativ.

      Absolute Adressierung (Verwenden von Computer-Disc-Namen) wird nicht benutzt(Abbildung 20)

      Abbildung 20.

      Benutzt relative Adressierung - Adressierung innerhalb eines Dokuments oder einer Reihe von Dokumenten auf einem Server. Um sich auf die Datei innerhalb der Site zu verweisen, müssen Sie den Browser angeben, in welchem \u200b\u200bPfad, in dem er tun soll, um in die gewünschte Datei zu gelangen.

      Beispiel 1.

      Das Bild befindet sich in einem Ordner mit einem HTML-Dokument (Abbildung 21). Das heißt, das Bild und die HTML-Datei befinden sich auf derselben Ebene im Dateisystem und das HTML-Dokument kann das Bild sofort anhängen. In diesem Fall wird das Einfügen des Bildes in die Webseite so aussehen.

      / >

      Abbildung 21.

      Praktische Aufgabe7

      Implementieren Sie Beispiel 1 (Erstellen Sie einen Ordner, Datei doc.html, nehmen Sie ein Bild ein). Bild

      Beispiel 2.

      Bild bilde. jpg. Das Hotel liegt im Ordner mappe._1 . Das HTML-Dokument befindet sich außerhalb des Ordners Ordner_1. Jene. Im Dateisystem der Site befindet sich das HTML-Dokument eine höhere Ebene als das Bild (Abbildung 22). Sie müssen sich beim Ordner Ordner_1 anmelden, und dann das Bild anschließen

      Abbildung 22.

      Praktische Aufgabe8

      Beispiel 2 implementieren 2 (Erstellen Sie einen Ordner, doc.html-Datei, nehmen Sie ein Bild ein). Das Bild muss in die doc.html-Webseite eingefügt werden.

      Beispiel 3.

      Bild bilde. jpg. Das Hotel liegt im Ordner mappe._1 was wiederum in dem Ordner liegt mappe._2 . Das HTML-Dokument befindet sich außerhalb dieser Ordner (Abbildung 23). Somit befindet sich das HTML-Dokument zwei Ebenen höher als das Bild. Brauchen:

      • melden Sie sich bei Ordner Ordner_2 an,
      • anmelden anschließend in den Ordner Ordner_1,
      • dann fügen Sie das Bild an.

      Abbildung 23.

      Praktische Aufgabe9

      Beispiel 321 (Erstellen von Ordnern, Datei doc.html, nehmen Sie ein Bild ein). Das Bild muss in die doc.html-Webseite eingefügt werden.

      Beispiel 4.

      mappe._1 . Das Bild befindet sich außerhalb des Ordners Ordner_1. Jene. Das HTML-Dokument befindet sich in einem Niveau, das niedriger ist als das Bild (Abbildung 24). Sie müssen den Ordner Ordner_1 verlassen und dann das Bild anhängen. Beenden Sie den Ordner wird durch das Design angezeigt ../ (Zwei Punkte und den Schrägstrich nach rechts).

      / >

      Abbildung 24.

      Praktische Aufgabe10

      Implementieren Sie Beispiel 4 (Erstellen Sie einen Ordner, doc.html-Datei, nehmen Sie ein Bild ein). Das Bild muss in die doc.html-Webseite eingefügt werden.

      Beispiel 5

      Das HTML-Dokument befindet sich im Ordner mappe._1 was wiederum im Ordner ist mappe._2 . Das Bild ist außerhalb dieser Ordner. Somit befindet sich das HTML-Dokument zwei Ebenen niedriger als das Bild (Abbildung 25). Brauchen:

      • beenden Sie den Ordner Ordner_1.
      • beenden Sie den Ordner Ordner_2
      • befestigen Sie das Bild.

      Wie Sie müssen, um zweimal auszukommen, dann das Design ../ Zweimal wiederholt.

      / >

      Abbildung 25.

      Praktische Aufgabe 1.1

      Beispiel 5 implementieren 5 (Ordner erstellen, Datei doc.html, ein Bild nehmen). Das Bild muss in die doc.html-Webseite eingefügt werden.

      Beispiel 6. (Abbildung 26)

      Brauchen:

      • beenden Sie den Ordner Ordner_1.
      • beenden Sie den Ordner Ordner_2
      • gehen Sie zu Ordner Ordner_3
      • gehen Sie zum Ordner Ordner_4
      • bild pic.jpg anhängen

      Abbildung 26.

      Praktische Aufgabe 1.2

      Beispiel 6 (Erstellen von Ordnern, Datei doc.html, nehmen Sie ein Bild ein). Bild

      muss in die doc.html-Webseite eingefügt werden.

      Beispiel 7 (Abbildung 27)

      Brauchen:

      • beenden Sie den Ordner Ordner_1.
      • beenden Sie den Ordner Ordner_2
      • beenden Sie den Ordner Ordner_3,
      • melden Sie sich beim Ordner Ordner_4 an,
      • bESTELLEN SIE BILD PIC.JPG.

      Da ist es notwendig, dreimal zu beenden, dann das Design ../ dreimal wiederholt.

      Abbildung 27.

      Praktische Aufgabe 1.3

      Implementieren Sie Beispiel 7 (Ordner erstellen, Datei doc.html, nehmen Sie ein Bild ein). Bild

      muss in die doc.html-Webseite eingefügt werden.

      Wie oft müssen Sie also ausgehen, das Design so oft ../, und wenn Sie durchgehen, listen wir die Namen auf dem Pfad der Ordner auf.

      Praktische Aufgabe 1.4

      1. Erstellen Sie ein HTML-Dokument und setzen Sie das Bild so ein, dass der Pfad zum Bild wie folgt ist.

      " ../../../../../../folder_1/folder_2/folder_3/image.jpg." / >

      2. Entwickeln Sie Ihr eigenes Beispiel für das Einfügen in ein HTML-Dokument, damit er enthält und ausgabe aus Ordnern und eingang In Ordnern. Ein Beispiel sollte von allen obigen Beispielen abweichen.

      Infolge der Ausführung dieses Themas müssen Sie folgende Dateien haben:

      • shablon.html.
      • main.html.
      • spisok_vlozh.html.
      • innerhalb des Ordnersmein Haus. Es muss einen Ordner gebenÖffentlichkeit_ html.mit zukünftigen Site-Dateien
      • sieben Beispiele für relative Adressierung und zwei Beispiele als Kontrolle der praktischen Aufgabe 14
Fortsetzung des Themas:
Os

Ich habe einen Web-Service, den ich überregte, den ich als "Link zum Service hinzufügen" registriert habe, für den HTTPS erforderlich ist, und Zertifikat. Unten ist mein Code zum Erstellen einer Instanz ...