Creatie van webpagina's met behulp van html-code. Maak een webpagina met behulp van HTML. Andere opties voor het toevoegen van CSS

laat een reactie achter 6,950

Cursus "Webpagina's maken met de HTM-taal" L »

Onderwerp 1. Inleiding tot HTML

Het doel van de HTML-taal

Web -Pagina's Zijn speciale bestanden geschreven in HTML ( Hyper Tekst opmaak Taal - hypertext opmaaktaal)... Onder opmaak betekent het invoegen in de tekst van speciale codes (tags) die bepalen hoe het resulterende hypertextdocument moet worden weergegeven door een speciaal programma - een browser.

De HTML-taal is ontworpen om systeemonafhankelijke bestanden te maken en beschrijft niet het formaat van het document, maar beschrijft de structuur ervan. Als er bijvoorbeeld een kop in de tekst staat, geeft de HTML-code gewoon aan dat het bijbehorende fragment een kop is. Na zo'n code te hebben ontvangen, beslist het programma - de browser zelf wat te doen met de titel. Misschien wordt het in een groter lettertype weergegeven of uitgelijnd met het midden van het scherm. Als deze tekst wordt afgespeeld door een spraaksynthesizer, dan gebruikt de synthesizer deze code om het volume te verhogen en de nodige pauze te maken.

HTML is een computertaal, in zekere zin verwant aan programmeertalen. Het bevat vrij strikte regels die moeten worden gevolgd om de juiste resultaten te krijgen.

HTML is ontstaan ​​met het World Wide Web en is daarmee geëvolueerd. Het is de ruggengraat van het World Wide Web en tegelijkertijd de reden voor zijn wijdverbreide populariteit.

HTML - het dossier

HTML - bestand - een tekstbestand met de extensie .htm of . html De webpagina wordt opgeslagen als een HTML-bestand. Zowel eenvoudige teksteditors, zoals Kladblok of Word Pad, als webeditors kunnen worden gebruikt om een ​​HTML-bestand te maken.

HTML-documentstructuur

Een HTML-document bestaat uit een hoofddocument en markup-tags, dit zijn verzamelingen van veelvoorkomende tekens.

    Alle HTML-documenten hebben een strikt gedefinieerde structuur. Het document moet beginnen met een tag en eindigen met een bijpassende eindtag. Dit paar tags vertelt de browser dat het inderdaad een HTML-document ervoor is.

    HTML-document bestaat uit sectiekoppen en hoofdtekst van het document in die volgorde. De rubrieken sectie is ingesloten tussen de en tags en bevat informatie over het document als geheel. In het bijzonder moet deze sectie de tags bevatten, waartussen de "officiële" titel van het document wordt geplaatst.

    De tekst van het document zelf bevindt zich in de hoofdtekst van het document... De hoofdtekst van het document bevindt zich tussen de tags en BODY>. In de praktijk is het mogelijk om de locatie van deze hoofdtags te bepalen, zelfs als ze afwezig zijn. Daarom, als de tags, en , evenals hun bijbehorende afsluitende tags worden weggelaten, kan het browserprogramma zelf bepalen waar ze hadden moeten zijn. Het wordt echter niet aanbevolen om deze tags weg te laten bij het maken van webpagina's.

Eenvoudigste correcte HTML-document.

< HOOFD >

< TITEL > DocumenttitelTITEL >

HOOFD >

< LICHAAM >

LICHAAM >

Tags HTML

De HTML-taal bestaat uit speciale markup-pointers - tags. Ze kunnen ook opdrachten, instructies of HTML-codes worden genoemd.

Tag is een instructie aan de browser die aangeeft hoe de tekst wordt weergegeven. Alle tags beginnen met een kleiner dan-teken (<) и заканчиваются символом «больше» (>). Een paar van deze symbolen worden soms aangeduid als punthaken. Nadat de open hoekbeugel komt trefwoord het definiëren van de tag.

Elke tag in HTML heeft een speciaal doel. De hoofdletters in de namen van de tags doen er niet toe - u kunt zowel kleine letters als hoofdletters gebruiken, hoewel het gebruikelijk is om hoofdletters te gebruiken om tags te onderscheiden van de normale tekst van het document.

Er zijn twee soorten tags: gepaarde en ongepaarde.

Gekoppelde tags- openen en sluiten, vergelijkbaar met haakjes van een algebraïsche uitdrukking. Ze beïnvloeden de tekst vanaf de plaats waar ze worden gebruikt tot de plaats waar het teken van het einde van hun actie wordt aangegeven (afsluitende tags beginnen met een schuine streep (/).

Bijvoorbeeld, < HTML> HTML >, < P> P>, H 3 >

Niet-overeenkomende tags hebben een eenmalig effect waar ze verschijnen, dus er is geen eindtag nodig.

Bijvoorbeeld,
, ,

Label bevat service-informatie over de website en wordt niet weergegeven in het browserscherm: dit is informatie over de codering van de webpagina, over de auteur, evenals een reeks trefwoorden die de inhoud van de site weergeven.

Voorbeeld.

Een voorbeeld van het maken van een tabel

Uit het voorbeeld kun je zien dat de pagina de W indows-1251-codering gebruikt - de meest voorkomende vandaag, je hoeft alleen deze tag elke keer in dit formulier op je pagina in te voegen; de auteur van de pagina is Ivanov Ivan; de pagina is gewijd aan dieren.

Wanneer het document in een browser wordt weergegeven, worden de tags zelf niet weergegeven, maar beïnvloeden ze de manier waarop het document wordt weergegeven. Als de tag per ongeluk een trefwoord bevat dat niet in HTML staat, wordt de tag volledig genegeerd.

Tag attributen

Openingstags kunnen vaak attributen bevatten die van invloed zijn op het effect dat de tag teweegbrengt.

Attributen zijn optionele trefwoorden, gescheiden van het tag trefwoord en van elkaar door spaties.

Attributen kunnen waarden hebben die na het gelijkteken (=) zijn geschreven. Het is altijd een goede gewoonte om de waarde van een attribuut tussen aanhalingstekens (enkel of dubbel) te plaatsen. De tekenreeks tussen aanhalingstekens mag niet dezelfde aanhalingstekens bevatten. U kunt aanhalingstekens weglaten voor attribuutwaarden die alleen uit de volgende tekens bestaan:

    symbolen van het Engelse alfabet;

  • tijdsintervallen;

    koppeltekens (-).

U kunt ook aanhalingstekens weglaten voor attribuutwaarden die alleen uit de volgende tekens bestaan ​​(zie het technische concept) ):

    karakters van het Engelse alfabet ( A - Z, a - z)

    cijfers ( 0 - 9 )

    tijd-intervallen

    koppeltekens ( - )

Dus, BREEDTE = 80 en UITLIJNEN = CENTRUM is de toegestane afkorting voor BREEDTE = "80" en UITLIJNEN = "CENTER".
Eindtags bevatten geen attributen.

Voorbeelden. LETTERTYPE>

Opmerkingen (1)

Net zoals in alle programmeertalen is het mogelijk om commentaar (teksten die geen deel uitmaken van het programma) aan het programma toe te voegen, zo ook de HTML-taal. Een opmerking begint met een speciale tag. Een opmerking kan alle andere tekens dan het groter dan (>)-teken bevatten en kan dus geen tags bevatten.

Tag overervingsprincipe

Containerlabels.
We weten al dat tags voor het grootste deel uit twee delen bestaan ​​- de opening (die ook attributen bevat) en de sluiting, dat wil zeggen, het "einde" van de tag. De parameters die in de tag zijn opgegeven, zijn alleen geldig tussen het begin en het einde, dat wil zeggen alleen binnen de tag:

<начало 2-го тега>

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

<начало 3-го тега>
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

<Конец 3-го тега>

<Конец 2-го тега>

<Конец 1-го тега>

De inspringingen in de linkermarge zijn niet willekeurig - ze worden automatisch ingesteld door programma's die HTML-code genereren om het lezen gemakkelijker te maken. Het is voldoende om te begrijpen dat hoe verder van de linkerrand de tag is, hoe "dieper" hij ligt, hoe meer "senior" tags erop kunnen inwerken.

Er moet ook worden opgemerkt dat sommige attributen van geneste tags van invloed kunnen zijn op upstream, "senior" tags. Dit is bijvoorbeeld typisch voor geneste tabellen.
Als de grootte van de binnenste tabel is ingesteld op 100, dan mag de buitenste tabel niet kleiner zijn dan 100 pixels + randdikte. Dus de geneste tabel "barst", als het ware, degene waarin deze is genest. Tegelijkertijd, zelfs als het geen gespecificeerde grootte heeft en de hoeveelheid tekst erin aanzienlijk is, zal het de "oudere" tabel uitbreiden tot een zodanig formaat dat het nodig is om het overeenkomstige aantal regels tekst weer te geven. Dit wordt feedback genoemd.

Praktisch werk nr. 1

"Creatie van de eenvoudigste Web -Pagina's"

Doelwit: leer hoe u webpagina's maakt in de teksteditor Kladblok.

Instructies voor implementatie

    Typ daarin de structuur van het HTML-document, dat hieronder wordt weergegeven:

Over onze kleinere broers.

Hier wordt de inhoud van de webpagina geplaatst.

    Sla het bestand op en noem het index .htm.

    Open het gegenereerde bestand. U ziet in een browservenster hoe het bestand dat u hebt gemaakt, eruitziet.

    Sluit uw browser.

    Ga terug naar het bestand dat je in Kladblok hebt opgeslagen.

Breng de volgende wijzigingen aan: in plaats van de woorden "Hiermee wordt de inhoud van de webpagina gehost", typt u het volgende: Dit is mijn eerste pagina .

In lijn < TITEL> specificeer: "Homepage (uw voor- en achternaam)".

    Sla het bestand op als pagina 2.htm.

    Bekijk het resultaat in een browser, bewerk eventueel het bestand met Kladblok.

Onderwerp 2. HTML-tags

Fysieke en logische tekstopmaaktags

Opmaak van lettertype . Er zijn veel elementen voor het opmaken van tekst. U kunt tekst opmaken met traditionele elementen: markeer fragmenten cursief, vetgedrukt, kies een lettertype, lettergrootte en kleur, lijn tekstfragmenten uit. Als de auteur geen eenvoudige opties heeft voor het opmaken van tekst, kan hij zijn toevlucht nemen tot stylesheets, die de opmaakmogelijkheden van de HTML-taal aanzienlijk vergroten.

Laten we eens nader kijken naar de standaard HTML-elementen waarmee u tekst kunt opmaken.

Lettertype- dit zijn tabellen voor het vervangen van de code door een zichtbare afbeelding.
Elke toets op uw toetsenbord produceert een specifieke code die wordt herkend door het besturingssysteem (het besturingssysteem, in de meeste gevallen Windows of Linux / Unix).
Als dus een bepaald lettertype is geselecteerd, vervangt het systeem de code die van het toetsenbord is ontvangen door de afbeelding van een letter of pictogram die overeenkomt met de tabel met lettertypesymbolen. Elk lettertype is een bestand. Een bestand met afbeeldingen van letters, cijfers en symbolen die aan elke knop zijn toegewezen. Lettertype installeren betekent een bestand met extra toewijzingstabellen in het systeem opnemen. MS Windows-systemen gebruiken meestal verschillende lettertypen die bij het systeem worden geleverd - dit zijn:

Arial

Arial

Koerier nieuw

Koerier Nieuw

Komisch zonder

Comic Sans

Times New Roman

Times New Roman

Verdana

Verdana

Elk van deze lettertypen is geschikt voor hun ontwerp en stijl. De meest voorkomende is Arial. 90% van alle bezoekers van uw toekomstige pagina heeft al deze lettertypen. Elk lettertype is een apart bestand in de map Windows / fonts / * .ttf. Hoe kan ik een lettertype er zo uit laten zien in HTML?
< LETTERTYPE >… LETTERTYPE > het type, de grootte en de kleur van het lettertype definiëren... Al deze kenmerken worden gedefinieerd met behulp van de bijbehorende attributen.

De absolute lettergrootte wordt gespecificeerd door het attribuut size (de grootte)... Dit attribuut kan waarden aannemen van 1 tot 7, waarbij de 1e maat de kleinste is en de 7e de grootste.
Voorbeelden.

tekstgrootte 1
tekstgrootte 2
tekstgrootte 3
tekstgrootte 4
tekstgrootte 5

tekstgrootte 6
tekstgrootte 7

Hoe stiller je gaat - hoe verder je ONT bent>.
De eerste vier maten worden meestal gebruikt in het ontwerp. Alles hierboven is een slechte vorm en een teken van amateurisme, omdat het te veel ruimte in beslag neemt en moeilijk te lezen is. Toegegeven, er worden ook grote maten gebruikt. Met de zevende maat kun je bijvoorbeeld een initiaal schrijven (de eerste letter van het begin van een hoofdstuk): Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst.
We kunnen onder andere het lettertype kiezen dat wordt gebruikt om de tekst weer te geven. Dit wordt gedaan door het attribuut gezicht (zicht).

Voorbeelden.Dit is lettergrootte 3 ONT>
tekst LETTERTYPE>
Zoals je kunt zien, NS Deze twee attributen - de grootte en het type van het lettertype - kunnen in elke volgorde in de tag worden gerangschikt :
U kunt ook het attribuut gebruiken kleur (kleur). De kleurnaam wordt gespecificeerd door een getal dat in hexadecimaal is geschreven, bijvoorbeeld kleur = ”# ff 0000”, of gewoon door de naam die in het Engels is geschreven, bijvoorbeeld kleur = ”rood”. Voorbeelden. Dit is een blauw lettertype LETTERTYPE>
Dit is arial lettergrootte 3, kleur blauw FONT>
Het lettertype kan ook zijn: cursief, vet, onderstreept, doorgestreept, superscript, subscript en ook een combinatie van verschillende van deze typen. Dit wordt respectievelijk bereikt door tags:
< l > tekstl >
< B > tekstB >
< jij > tekstjij >
< S > tekst S >
< SUP > tekst SUP >
< SUB > tekst SUB >,
evenals hun combinatie, bijvoorbeeld <jij > tekst jij> B>
Opmaak van alinea's. In de meest voorkomende documenten zijn de belangrijkste functionele secties: krantenkoppen en paragrafen. Webdocumenten zijn geen uitzondering. Gebruik de tag . om gewone alinea's in HTML aan te duiden

…P > (Alinea). Bovendien kunt u alleen de starttag gebruiken, aangezien het volgende element

geeft niet alleen het begin van de volgende alinea aan, maar ook het einde van de vorige. In gevallen waarin de betekenis nodig is om het einde van een alinea aan te geven, kunt u de eindtag gebruiken.
Het attribuut kan ook worden gebruikt met de alinea-tag. uitlijnen (uitlijnen):
uitlijnen = "links" - links uitlijnen;
align = "right" - juiste uitlijning;
uitlijnen = "midden" - midden uitlijning.
Voorbeeld.

Hoofdstuk 1P>

Animatie P>

pagina 3P>

HTML biedt geen mogelijkheid om een ​​alinea-inspringing ("rode lijn") te maken, dus de browser voert meestal een lege regel in tussen alinea's voor de leesbaarheid. Als je naar een nieuwe regel moet gaan zonder een alinea te maken, gebruik dan een enkele tag
... De regel eindigt waar deze was geplaatst en de rest van de tekst wordt op een nieuwe regel afgedrukt. Deze tag is handig om bijvoorbeeld gedichten in een column te schrijven:
Heb de beer op de grond laten vallen
Scheurde de poot van de beer af
Ik laat hem toch niet in de steek,
Omdat hij goed is.
Op het browserscherm zien we een kwatrijn dat op een standaard manier is geschreven.

Een belangrijk middel om scheidingstekens in de tekst te maken, zijn horizontale liniaalstroken, die verschillende delen van het document visueel van elkaar scheiden. Een horizontale liniaal wordt gemaakt door een enkele tag .. Met zijn hulp is het erg handig om de pagina in delen te verdelen. Een aantal attributen zijn toegestaan ​​in de tag:

Uitlijning

uitlijnen = "links"

uitlijnen = "midden"

uitlijnen = "rechts"

uitlijnen = "rechtvaardigen"

Lijndikte en lengte in pixels.

Grootte = 3 (breedte in pixels)

breedte = 300 (lengte in pixels)

breedte = 100% (lengte in procent)

Lijnkleur

kleur = "rood"

HTML ondersteunt zes niveaus van interne documentkoppen. Ze zijn getagd van

…

voordat
…
.
De kop op het eerste niveau is de grootste en de kop op het zesde niveau is de kleinste. Voor koppen kunt u attributen voor uitlijning links, midden en rechts gebruiken.
Voorbeeld.Grootste kop
Kleinste kop

Huisdieren

Logische tekstopmaak . In deze sectie zullen we kijken naar tags die erg lijken op tags die de grootte, kleur en stijl van een lettertype specificeren. Het fundamentele verschil is echter dat deze tags de eigenlijke eigenschappen van de tekst beschrijven. Dit betekent dat tekst er in verschillende browsers anders uit kan zien, maar enig effect is gegarandeerd, zelfs als er om de een of andere reden geen manier is om lettertype-effecten toe te passen. Al deze tags zijn gekoppeld en beïnvloeden de tekst tussen de openings- en sluitingstags. De afsluitende tag is vereist.
Label … gebruikt voor citaten, boektitels. Meestal cursief weergegeven.
Aangezien de HTML-taal is gemaakt door mensen die verbonden zijn met computers, is een hele groep tags ontworpen om de tekst van computerprogramma's en de resultaten van gebruikersinteractie daarmee weer te geven.
Label < CODE >… CODE > geeft de brontekst van een computerprogramma aan, meestal weergegeven in een monospaced lettertype (meestal een Courier-lettertype), dat wil zeggen in een lettertype met een vaste grootte.
Label < KBD >… KBD > siert tekst die moet (of is) ingevoerd met het toetsenbord, meestal weergegeven in vetgedrukte letters. Van Engels toetsenbord - toetsenbord
Voorbeeld.

Om Windows te starten, typt u: winnen.
Code:
Typ: win . om Windows te starten
Label … markeert de tekst als voorbeeld. Gebruikt om tekst te markeren die door programma's is geproduceerd. Weergegeven in monospaced lettertype.
Voorbeeld.
Dit is platte tekst
Label … gebruikt om variabelen in een programmalijst te markeren. Meestal wordt deze tekst cursief weergegeven. Van Engels var iable is een variabele.
Voorbeeld.
EEN, B, C
Code:
A, B, C var>

Label < EM >… EM > gebruikt om tekstelementen te markeren (meestal cursief).
Label < STERK >… STERK > gebruikt om tekstelementen sterker te benadrukken (vetgedrukt).
Voorbeeld.
Dit is platte tekst
En dit is al tekst met de tag .
Aangezien hier semantische markering wordt gebruikt in plaats van decoratieve markering, wordt het aanbevolen om deze tags te gebruiken in plaats van tags en< B >.

Praktisch werk nummer 2

“Tekst op een webpagina opmaken ”

Doelwit: leer hoe u het lettertype en de tekst op een webpagina kunt opmaken.

Instructies voor implementatie

    in element< TITEL> vermeld de naam van de pagina “P/r nr. 2”.

    Maak de volgende tekst op volgens de aanwijzingen (tussen haakjes cursief weergegeven) zoals weergegeven in de afbeelding.

Huisdieren

(titelH 1)

(midden uitgelijnd)

Honden

(titelH 2)

(midden uitgelijnd)

Waakhonden

(links motivering, vet)

Jacht

(rechts uitgelijnd, vetgedrukt)

Opleiding

(midden uitgelijnd, vet cursief)

Clubs Tentoonstellingen Locaties

(midden uitlijnen, lettergrootte 10, letterkleur rood, letterArial )

Gedicht

(letterkleur blauw, lettergrootte 6, middenuitlijning)

Ik sta bescheiden in het leven

Geen ovatie nodig

Maar hoe cool ben ik

Ik kijk naar de schelp!

(links uitgelijnd, lettergrootte 6)

Lijsten maken

Lijsten met opsommingstekens. De lijst verschilt van gewone tekst doordat de gebruiker niet hoeft na te denken over de nummering van zijn items: het programma neemt deze taak over. Als de lijst wordt aangevuld met nieuwe items of ingekort, wordt de nummering automatisch aangepast. In het geval van ongenummerde lijsten plaatst het programma markeringen voor elk item: cirkels, rechthoeken, ruiten of andere afbeeldingen. Als gevolg hiervan wordt de lijst door mensen leesbaar.

Tags voor het maken van een ongeordende lijst:

< LI > UL >
 Label
  • is een soort kader voor de lijst. Hiermee kunt u de ene lijst van de andere scheiden. Label
  • geeft elk van de items aan.

    Voorbeeld.


      Punt 1 van de lijst
      Punt 2 van de lijst
      Punt 3 van de lijst

    Schermweergave:

      Punt 1 van de lijst

      Punt 2 van de lijst

      Punt 3 van de lijst

    Tags voor het maken van genummerde lijst: < O L>< LI > OL >


    Genummerde lijsten. De structuur van een genummerde lijst is vergelijkbaar met die van een ongeordende lijst. Alleen voor framing wordt de tag gebruikt

    1. ... Elk item is genummerd met Arabische of Romeinse cijfers, letters van het Latijnse alfabet.

    Voorbeeld.


      Punt 1 van de lijst
      Punt 2 van de lijst
      Punt 3 van de lijst
      O L>

      Schermweergave:

        Punt 1 van de lijst

        Punt 2 van de lijst

        Punt 3 van de lijst

      De nummeringsmethode wordt gespecificeerd met behulp van het attribuut type... Alle nummeringsmethoden worden weergegeven in de tabel:

      Nummeringstype:

      Praktisch werk nummer 3

      "Maak genummerde en ongenummerde lijsten"

      Doelwit : leer hoe u lijsten op webpagina's kunt maken.

      Instructies voor implementatie :

      1 ... Maak een nieuwe webpagina in Kladblok.

      2 ... in element vermeld de naam van de pagina "P / r nr. 3".</p> <p><b>3 </b>... Maak de volgende tekst op volgens de aanwijzingen (tussen haakjes cursief weergegeven) zoals weergegeven in de afbeelding:</p> <p>De zon moet zijn:</p> <p><i>(Lettergrootte 8, rood,</i></p> <p><i>midden uitlijnen)</i></p> <p>1. Warm.</p> <p>2. Rond.</p> <p>3. Geel.</p> <p>Sneeuw moet zijn:</p> <p><i>(Lettergrootte 6, blauw,</i></p> <p><i>midden uitlijnen)</i></p> <p>V. Kholodny.</p> <p>S. Pluizig.</p> <p><i>(Het lettertype van beide lijsten is zwart, maat 3).</i></p> <p><i><b>Hyperlinks <br></b> </i><i><u>Soorten hyperlinks.</u> </i><i> </i><b>< </b><b>EEN</b> <b>>… </b><b>EEN</b> <b>> </b> het maken van een hyperlink. <br>Deze tag vereist het attribuut <b>href</b> <b>. </b> De waarde is de URL waarnaar de link verwijst. Linktekst wordt tussen tags geplaatst <b>< </b><b>EEN</b> <b>>… </b><b>EEN</b> <b>>. </b> Wanneer het document in een browser wordt weergegeven, is de linktekst meestal onderstreept en blauw weergegeven. Het klikken op de link leidt tot de overgang naar de opgegeven URL.</p> <p>Er zijn verschillende soorten hyperlinks te onderscheiden.</p> <ul><p>Extern (linkt een webpagina naar documenten die niet tot deze website behoren).</p><p>Intern (link documenten binnen dezelfde website).</p> </ul><p><i><u>Het absolute pad.</u> </i><i> </i> Als de hyperlink extern is, wordt de volledige URL van het document aangegeven, ook wel <i>op een absolute manier. <br>Voorbeeld.</i> <A href =”<u><span>http</u> </span><u>:// </u> <u><span>www</u> </span><u>. </u> <u><span>microsoft</u> </span><u>. </u> <u><span>com</u> </span>”> Microsoft A> <br>Het belangrijkste nadeel van het gebruik van een absoluut pad is dat wanneer u bestanden naar een andere server op internet overbrengt, u alle hyperlinks moet wijzigen.</p> <p><i><u>Relatief pad.</u> </i><i> </i> Als de hyperlink intern is, dan: <b>alleen dat deel is aangegeven</b><b>URL</b> <b>, wat anders is voor de twee gekoppelde documenten (</b> zogenaamd <i>relatief pad</i><b>), </b> Als er bijvoorbeeld twee documenten in dezelfde map staan, volstaat het om de naam van het bestand op te geven waarnaar door de hyperlink wordt verwezen. <br>Als de documenten zich in verschillende mappen bevinden, wordt eerst de mapnaam aangegeven en vervolgens de naam van het bestand waarnaar wordt verwezen door de hyperlink.</p> <p><i>Voorbeelden.</i> <A href =”my .htm ”>Mijn persoonlijke pagina A> <br> <A href =”sport /run .html ”>Lange afstand hardlopenA> <br>Interne links zijn handiger omdat u geen wijzigingen hoeft aan te brengen in afzonderlijke documenten wanneer u uw website naar een andere server verplaatst.</p> <p><i><u>Ankers.</u> </i><i> </i> Hypertekstlinks kunnen verwijzen naar een specifieke plaats op de pagina, als ze eerder op de juiste plaats zijn ingevoegd <i>Anker</i>... Anker gebruikt ook tags <A >en A>, maar in plaats van het href-attribuut is het attribuut nodig <b>naam</b>... De waarde van dit attribuut is <i>anker naam.</i> Het mag alleen uit Latijnse letters en cijfers bestaan ​​en mag geen spaties bevatten. <br>Om naar een ingesteld anker te linken, moet u de ankernaam opgeven aan het einde van de URL na de documentnaam, gescheiden door een "#"-symbool.</p> <p><i><u>Een postadres opgeven in een hyperlink</u> </i>... Wanneer een hyperlink wordt gebruikt om een ​​e-mailadres op te geven, springt het selecteren ervan niet naar een nieuw document, maar start een e-mailprogramma op uw computer om een ​​bericht naar de opgegeven ontvanger te sturen. Meestal wordt een dergelijke link aan het einde van de pagina geplaatst om een ​​link naar de webmaster of de auteur van de pagina te geven, bijvoorbeeld, <A href =”mailto :vebmaster @mail .ru >Alexey IvanovA></p> <p><i>Voorbeeld. <br></i><HTML ><br> <HEAD ><br> <TITLE >Links en ankers TITEL> <br>HOOFD> <br><BODY ><br>Nieuwe versies van de standaard besturingssysteemsoftware voor de nieuwste stuurprogramma's zijn te vinden op de website van het bedrijf. <br> <A href =”<u><span>http</u> </span><u>:// </u> <u><span>www</u> </span><u>. </u> <u><span>microsoft</u> </span><u>. </u> <u><span>com</u> </span>”> Microsoft A> <br> <P >En nu kun je naar <A href =”my .htm ”>mijn persoonlijke pagina <br></p><p>Hoe u contact kunt opnemen met de auteur staat beschreven in: <br> <A href =”#address ”>einde van deze pagina <br><i> </i> Dit is waar de hoofdinhoud van de pagina zich bevindt. <br><i> </i><a>adres ”> E-mailadresA> <br>LICHAAM> <br>HTML></a></p> <p><b>Praktisch werk nummer 4</b> </p> <p><b>"Hyperlinks maken"</b> </p> <p><b>Oefening 1.</b> Creatie van de eenvoudigste hyperlink.</p> <p><b>Doelwit:</b> leer hoe u twee HTML-documenten kunt koppelen met behulp van hyperlinks.</p> <p><b>Instructies voor implementatie:</b> </p> <ul><p>Maak twee webpagina's in Kladblok. Noem een ​​pagina 1.htm, de tweede pagina 2.htm. Sla beide pagina's op in één map met de naam site. Houd er rekening mee dat de namen van mappen en pagina's in het Engels moeten zijn en met een kleine letter moeten beginnen.</p><p>in element <title >specificeer de paginatitel "P / r nr. 4. Taak 1".</p> </ul><p>Ga naar pagina 2</p> <p>Ga naar pagina 1</p> <ul><p>Open de eerste pagina in uw browser en controleer of beide hyperlinks correct werken.</p> </ul><p><b>Taak 2.</b> Maken van hyperlinks.</p> <p><b>Doelwit:</b> leer hoe u drie HTML-documenten kunt koppelen met behulp van hyperlinks.</p> <p>U kunt de tweede taak voltooien als u taak 1 met succes hebt voltooid.</p> <ul><p>Maak een derde pagina pagina 3.htm.</p><p>Maak op pagina 3.htm hyperlinks om naar pagina 1.htm en pagina 2.htm te gaan.</p><p>Voeg op pagina's 1.htm en pagina 2.htm een ​​hyperlink toe om naar pagina 3.htm te gaan.</p><p>Open de eerste pagina in uw browser en zorg ervoor dat u nu van elke pagina naar een andere van de drie gemaakte pagina's kunt gaan.</p> </ul><p><b>Taak 3.</b> Kleur hyperlink <b>. </b> </p> <p><b>Doelwit:</b> leer de kleur van hyperlinks te definiëren.</p> <p>U kunt de taak voltooien als u taak 2 met succes hebt voltooid.</p> <ul><p>Op pagina's pagina 1.htm, pagina 2.htm en pagina 3.htm in de tag <body >definieer de kleur van de hyperlinks:</p> </ul><ul><p>Open de eerste pagina in de browser en volg de links van pagina naar pagina en zorg ervoor dat de kleur van de hyperlinks correct is ingesteld.</p> </ul><p><i><b>Tekeningen op</b> </i><i><b>Web</b> </i> <i><b>-bladzijde.</b> </i></p> <p>Illustraties (tekeningen, foto's) spelen een belangrijke rol bij het ontwerp van webpagina's. De afbeeldingen zelf worden opgeslagen in aparte bestanden buiten het HTML-document, maar worden intern door de browser weergegeven. Dit gebeurt met een enkele tag. <b>< </b><b>IMG</b> <b>>. </b> Het vereiste kenmerk van deze tag is de <b>src</b>, waarvan de waarde het pad is naar een bestand met een afbeelding of foto,</p> <p>Als de afbeelding zich in dezelfde map als de webpagina bevindt, is het pad alleen de naam van het bestand, bijvoorbeeld: <img src='/sozdanie-web-stranic-s-pomoshchyu-html-koda-sozdanie-web-stranicy-s-pomoshchyu/' loading=lazy loading=lazy>... Als de afbeelding in een andere map staat, moet deze map worden opgegeven, bijvoorbeeld: <img src='/sozdanie-web-stranic-s-pomoshchyu-html-koda-sozdanie-web-stranicy-s-pomoshchyu/' loading=lazy loading=lazy>... Als de afbeelding op een andere site staat, wordt het pad voluit geschreven: <br><img src='https://i2.wp.com/homepage.ru/my/my.jpg' loading=lazy loading=lazy>.</p> <p>In de tag <img src='/sozdanie-web-stranic-s-pomoshchyu-html-koda-sozdanie-web-stranicy-s-pomoshchyu/' loading=lazy loading=lazy>je kunt ook attributen gebruiken zoals: <br><b>hoogte</b> <b>, </b><b>breedte</b>- stel de hoogte en breedte in van het gebied waarin de afbeelding wordt weergegeven. Als slechts één van deze attributen is opgegeven, wordt de tweede dimensie in de juiste verhouding ingesteld. Maar onthoud dat schalen de beeldkwaliteit verslechtert. De grootte van de afbeelding wordt gemeten in pixels of als percentage, bijvoorbeeld: <img src='/sozdanie-web-stranic-s-pomoshchyu-html-koda-sozdanie-web-stranicy-s-pomoshchyu/' loading=lazy loading=lazy>, <b>grens</b> <b> – </b> stelt de dikte van het kader rond de afbeelding in (in pixels). Dit attribuut kan worden weggelaten, omdat er standaard altijd een kader om de afbeelding staat. Maar als u het wilt verwijderen, dan <u>stel de waarde van het border attribuut in op nul, <br></u><b>rand kleur</b>- stelt de kleur van het kader rond de afbeelding in, bijvoorbeeld: <br>< IMG src="picture.gif" border="3" bordercolor="#CC0000"> <br>In ons voorbeeld is de randkleur ingesteld op rood, en natuurlijk mag het randattribuut (randdikte) niet nul zijn als u een rand rond de afbeelding wilt zien, <br><b>uitlijnen -</b> uitlijning van de afbeelding ten opzichte van andere objecten: <br>de afbeelding wordt naar de linkerrand van het scherm geperst en de tekst loopt er naar rechts omheen, <br>afbeelding - rechts, tekst - links.</p> <p>De tekst kan ook onderaan de afbeelding staan ​​(dit is standaard) - (1), in het midden - (2), en bovenaan - (3): <br>(1) - <br>(2) - <br>(3) - </p> <p><b>vspace</b><span>- stelt de afstand tussen tekst en afbeelding in (verticaal): <br>,<br></span><b>hspace</b> <span>- stelt de afstand in tussen de tekst en de afbeelding (horizontaal):</p> <p>< imgsrc=" pr1. png" hspace<span>="30"><br>De afstand wordt gegeven in pixels.</p> <p>De tag gebruiken <img src='/sozdanie-web-stranic-s-pomoshchyu-html-koda-sozdanie-web-stranicy-s-pomoshchyu/' loading=lazy loading=lazy>u kunt afbeeldingen in hyperlinks gebruiken, afbeeldingen in tabellen invoegen, ontwerpproblemen oplossen ...</p> <p><b>Praktisch werk nummer 5</b> </p> <p><b>"Een afbeelding als hyperlink gebruiken"</b> </p> <p><b>Doelwit</b>: leer hoe u een afbeelding als hyperlink kunt gebruiken.</p> <ul><p>Gebruik afbeeldingen in plaats van teksthyperlinks op pagina 1.htm, pagina 2.htm en pagina 3.htm. Voor deze:</p> </ul><ul><p>open de map die door de leraar is opgegeven (de map bevat bestanden met de afbeelding van gekleurde knoppen), voeg de afbeelding van de blauwe knop in op de eerste pagina en maak een hyperlink om naar de tweede pagina te gaan:</p> </ul> <ul><p>Voeg zelf de afbeelding van de oranje knop in om van de eerste pagina naar de derde te gaan;</p><p>Stel de rand van beide afbeeldingen in op 2;</p> </ul><ul><p>Open de eerste pagina in de browser en zorg ervoor dat de knoppen correct werken door de links van pagina naar pagina te volgen.</p><p>Voeg uw eigen knopafbeeldingen in op pagina 2.htm en pagina 3.htm en stel de juiste hyperlinks in.</p><p>Open de eerste pagina in de browser en volg de links van pagina naar pagina om ervoor te zorgen dat de knoppen op alle pagina's correct werken.</p> </ul><p><i><u>Alternatieve tekst.</u> </i> </span><i> </i> Web <span>-de pagina kan worden weergegeven door een browser die niet over de middelen beschikt om afbeeldingen weer te geven. Gebruikers schakelen vaak de weergave van afbeeldingen uit om de documentontvangst te versnellen. In beide gevallen is het wenselijk om de mogelijkheid te geven om na te gaan wat er op de foto staat, als het niet te zien is. Hiervoor wordt alternatieve tekst gebruikt, die wordt gespecificeerd in de tag< </span> Img> attribuut <b>alt</b><b>(of</b> <b>titel</b><b>), </b> <span>dit attribuut geeft tekst weer op de locatie van de afbeelding wanneer deze wordt geladen. Bijvoorbeeld:</p> <p><img src='/sozdanie-web-stranic-s-pomoshchyu-html-koda-sozdanie-web-stranicy-s-pomoshchyu/' loading=lazy loading=lazy></p> <p><i><u>Een afbeelding als achtergrond gebruiken</u> </i>... Als u een afbeelding wilt gebruiken als pagina-achtergrond ("wallpaper"), dan in de tag <BODY >we gebruiken dit attribuut om het adres van de afbeelding aan te geven. Bijvoorbeeld:</p> <p><BODY background =”boss3.gif” >.</p> <p><i><b>Kaders</b> </i></p> <p><i><u>Meerdere documenten op één webpagina plaatsen.</u> </i> Met de HTML-taal kunt u het browservenster in verschillende delen splitsen en in elk ervan een afzonderlijk document weergeven. Dergelijke gebieden worden genoemd <i>kozijnen.</i><b> <br></b> Hoe verschilt de structuur van een HTML-document met frames van een gewoon HTML-document? Een dergelijk document bevat geen "body"-sectie van het document en bevat helemaal geen tekst. In plaats daarvan bevat het een beschrijving van de frames en de namen van documenten die in afzonderlijke gebieden zijn geladen. <b><br>< </b><b>FRAMESET</b> <b>>… </b><b>FRAMESET</b> <b>> </b> tagbeschrijvingen van frames. <b><br></b> Tussen tags <b>< </b> FRAMESET>… FRAMESET> bevat een beschrijving van de grootte en volgorde van plaatsing van gebieden in het browservenster, evenals specificeert de documenten die in elk van deze gebieden moeten worden geladen. <br>Label <FRAMESET >moet een vereist attribuut bevatten <b>cols</b> of <b>rijen,</b> bepalen van de manier waarop het venster wordt gesplitst. De waarden van deze attributen bepalen de hoogte (of breedte) van de venstergebieden. Ze worden gescheiden door komma's in pixels of als percentage geplaatst. Als laatste parameter kan een asterisk (*) worden gebruikt. Alle vrije ruimte wordt toegewezen aan een dergelijk frame. <br>Het cols attribuut verdeelt het venster in gebieden met verticale lijnen, terwijl het rows attribuut het venster bijvoorbeeld horizontaal verdeelt <br><FRAMESET rows =”45%,30%,25%”>, <FRAMESET cols =”40%,30%,30%”><br>Als beide attributen zijn ingesteld, wordt in het venster een subgebied-mesh gegenereerd, bijvoorbeeld <br><i> </i><frameset rows =30%,30%,30%><br> <frame src =name .htm ><br> <frame src =sun .htm ><br><frameset cols =50%,*><br> <frame src =cat 1.htm ><br> <frame src =cat 2.htm ><br>frameset> <br>Hierdoor is het scherm opgedeeld in vier deelgebieden: twee horizontaal en twee verticaal. Bovendien is het de derde waarde van het attribuut <i>rijen</i> stelt u in staat om ruimte op het scherm toe te wijzen voor een verticaal deelgebied.</p> <p><b>< </b><b>FRAM</b> <b>E> -</b> enkele tag genest in een tag <FRAMESET >, moet een vereist attribuut bevatten <b>src</b> <b>, </b> document definiëren dat bijvoorbeeld in een apart gebied moet worden geladen <FRAME src =”doc 3.htm ”><br><i>Voorbeeld. <br></i> <html ><br> <head ><br> <meta http -eguiv ="Content -Type " content ="text /html ;charset =windows -1251"> <meta name ="Author " content ="Ivanov Ivan "><br> <meta name ="Keywords " content ="Животные, собаки, клубы"><br>hoofd> <br><title >Pagina met navigatiebalktitel> <br> <frameset cols =25%,*><br> <frame src =19_1.htm ><br> <frame src =19_2.htm ><br>frameset> <br>html> <br>EEN</p> <p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m27ce16d6.jpg' align="bottom" width="100%" loading=lazy loading=lazy></p> <p><i><u>Kwaliteit van HTML-documenten.</u> </i></p> <p>De creatieve aard van het maken van HTML-documenten is vergelijkbaar met programmeren, dus fouten zijn mogelijk die kunnen leiden tot moeilijkheden of zelfs volledig onvermogen om het gegenereerde document op internet te lezen. Bovendien maakt de grote verscheidenheid aan computers die zijn aangesloten op internet het onmogelijk om van tevoren te voorspellen hoe het document eruit zal zien op het scherm van een bepaalde gebruiker.</p> <p>Webpagina's zijn bedoeld voor een breed publiek, dus houd deze overwegingen in gedachten bij het opstellen van HTML-documenten. Om een ​​goed HTML-document te maken, zijn er enkele vrij eenvoudige regels die u moet volgen.</p> <p>3. Om ervoor te zorgen dat een HTML-document voor een zo breed mogelijk publiek beschikbaar is, is het noodzakelijk om "één stap achter te blijven" bij de laatste ontwikkelingen in de ontwikkeling van de HTML-taal. De nieuwste innovaties worden niet altijd direct doorgevoerd in browsers en nieuwe versies hebben tijd nodig om de meerderheid van de gebruikers te bereiken. Documenten waarin gebruik wordt gemaakt van de nieuwste innovaties zijn slechts voor een beperkt publiek beschikbaar.</p> <p>4. Een fout die nieuwelingen vaak maken, is overmatig gebruik van ontwerpelementen, met name een verscheidenheid aan kleuren en lettertypen. Zo'n pagina ziet er op zijn best flitsend uit. In het ergste geval kan de tekst helemaal niet worden gelezen op computers met een afwijkend kleurenschema of bij afwezigheid van de benodigde lettertypen.</p> <p>5. Maak geen misbruik van afbeeldingen en multimediabestanden. Met een overvloed aan dergelijke objecten kan het laden van de pagina worden vertraagd en kan de lezer zijn interesse erin verliezen nog voordat hij de kans heeft iets te lezen.</p> <p>6. Aangezien het maken van HTML-documenten verwant is aan programmeren, is het proces van het vinden en oplossen van fouten, in het programmeren bekend als debuggen, noodzakelijk bij het maken van een webpagina. De meeste, zo niet alle gemaakte fouten kunnen worden opgespoord nog voordat de pagina beschikbaar is voor externe lezers. Fouten die moeten worden gecorrigeerd, omvatten ook grammaticale en typefouten.</p> <p>7. Frames zijn een zeer krachtige maar ook zeer gevaarlijke ontwerptool voor webpagina's. Er worden veel meer slechte webpagina's met frames gemaakt dan goede. Het enige criterium voor de geletterdheid van het gebruik van frames is gebruiksvriendelijkheid. Als de pagina dankzij frames vele malen mooier, maar iets minder handig wordt, moet je frames zonder aarzelen opgeven. Het zal bij de lezers alleen maar irritatie veroorzaken.</p> <p>8. Mensen waarderen zorg en aandacht. Door de belangrijkste informatie bovenaan de pagina te plaatsen, kunnen ze de laadtijd van het document goed benutten.Het vergezellen van illustraties met alternatieve tekst is niet erg, maar wordt zeer op prijs gesteld. De aanwezigheid van een groot aantal nuttige hyperlinks op de pagina helpt mensen niet alleen om vruchtbaar over het internet te reizen, maar moedigt hen ook aan om keer op keer terug te keren naar de pagina die hen deze mogelijkheid bood.</p> <p><b>Praktisch werk nummer 6 <br>"Meerdere documenten op één webpagina plaatsen"</b> </p> <p><b>Doelwit:</b> leer hoe u frames maakt in de teksteditor Kladblok. <br><b>Instructies voor implementatie:</b></p> <ul><p>Open de teksteditor Kladblok.</p><p>Maak een nieuwe webpagina die er als volgt uitziet in een browser:</p> </ul><p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_25dae440.png' align="bottom" width="100%" loading=lazy loading=lazy></p> <ul><p>Geef in het element de naam van de pagina "P / r nr. 6" op.</p><p>Bekijk de gegenereerde webpagina in een browservenster.</p><p><br>Breng de volgende wijzigingen aan: in het attribuut <i>rijen</i> verander de eerste twee waarden, <i> </i> verwijder de derde waarde.</p><p>Sla uw wijzigingen op.</p><p>Bekijk het resultaat in een browser. Wat veranderde?</p><p>Wijzigingen negeren, terugkeren naar de oorspronkelijke staat van de webpagina.</p><p>Bekijk de webpagina in een browservenster.</p> </ul><h6>Onderwerp 3. Afbeeldingen op de webpagina</h6> <p><i><b>Elementen van de theorie van computergraphics</b> </i></p> <p><i><u>Kleurmodel.</u> </i></p> <p>De afbeelding kan zwart-wit, grijswaarden (tinten van dezelfde kleur) en kleur zijn. Een kleurenafbeelding kan echter, afhankelijk van het doel, in een ander kleurenpalet staan. Het RGB-palet wordt gebruikt in computermonitoren, d.w.z. voor afbeeldingen die op de monitor worden bekeken. Het CMYK-palet wordt gebruikt bij het maken van afbeeldingen om af te drukken.</p> <p>Het meest voorkomende kleurmodel heet RGB Rood - rood, Groen - groen, Blauw - blauw) door de namen van de drie basiskleuren die erin worden gebruikt om alle andere te vormen. Het RGB-kleurmodel wordt meestal geïllustreerd met een afbeelding in de vorm van drie elkaar kruisende cirkels. In het midden van de kruising vormen deze drie kleuren opgeteld wit. Paarsgewijs snijpunt van aangrenzende cirkels geeft extra kleuren: geel, cyaan, magenta.</p> <p>In het RGB-model zijn er drie kanalen - rood, groen en blauw, dat wil zeggen, RGB is een driekanaals kleurmodel.</p> <p>Elk van de drie RGB-kleurcomponenten kan een van de 256 waarden aannemen - van maximale intensiteit (255.2555.255 - wit) tot nulintensiteit (0.0.0 - zwart), d.w.z. absoluut elke kleur en kleurschakering kan worden verkregen door rode, groene en blauwe kleuren in verschillende verhoudingen te combineren</p> <p>Om een ​​harmonieuze kleurcompositie te creëren, moet u de kenmerken van de kleur kennen. Natuurlijk zijn er veel van dergelijke kenmerken, we zullen alleen de belangrijkste beschouwen.</p> <p><i><u>Kleurkenmerken:</u> </i></p> <p>Een van de kleurenschema's kenmerkt de natuurlijke eigenschappen van elke tint, dit is het HSV-schema (hue, verzadiging, helderheid)</p> <p>Tinttoon - een van de punten van het kleurenwiel, de meest heldere en verzadigde.</p> <p>Verzadiging verzadiging - de verhouding van de hoofdkleur en dezelfde helderheid grijs.</p> <p>Waarde helderheid - de algehele helderheid van de kleur (extreme posities - zwart en maximale heldere toon)</p> <p><b>Praktisch werk nummer 6</b> </p> <p><b>"Werken met het RGB-kleurmodel"</b> </p> <p><i><b>Taak 1. Bepaling van kleur in het formaat</b> </i><i><b>RGB</b> </i> </p> <p><b>Doelwit</b>: Leer een kleur te definiëren in RGB-formaat.</p> <p><b>Instructies voor implementatie:</b></p> <ul><p>Start de grafische editor Paint (Start - Programma's - Accessoires)</p><p>Bepaal welke kleur in het RGB-model wordt vastgelegd en vul de tabel in:</p> </ul><p>Voer hiervoor de opdracht Palet - Palet wijzigen uit. Klik in het dialoogvenster Palet wijzigen op de knop Kleur definiëren, voer numerieke waarden in voor de kleuren in de tekstvakken onder het kleurvak. Het toegestane bereik voor elk blok is van 0 tot 255, waarbij 0 het donkerste is en 255 het lichtste.</p> <p><i><b>Taak 2. Kleuren van verschillende intensiteiten mengen in een grafische editor</b> </i> Verf</p> <p><b>Doelwit</b>: leer hoe u met kleuren van verschillende intensiteiten kunt werken in de eenvoudigste grafische editor.</p> <p><b>Instructies voor implementatie:</b></p> <ul><p>Bepaal welke kleur wordt verkregen door twee kleuren met maximale intensiteit te mengen (255):</p> </ul><ul><p>rood en groen;</p><p>groen en blauw;</p><p>rood en blauw.</p> </ul><ul><p>Bepaal welke kleur wordt verkregen door twee kleuren van halve intensiteit te mengen (127):</p> </ul><ul><p>rood en groen;</p><p>groen en blauw;</p><p>rood en blauw.</p> </ul><p>groen en blauw</p> <p>rood en blauw</p> <p>maximale intensiteit</p> <p>halve intensiteit</p> <p><i><b>Taak 3. Tekenen in een bepaalde kleur in een grafische editor</b> </i><i><b>Verf</b> </i> <i><b>. </b> </i></p> <p><b>Doelwit</b>: leer kleuren herkennen.</p> <p><b>Gebruiksaanwijzingen:</b></p> <ul><p>Teken in een nieuw bestand de volgende geometrische vormen met de opgegeven kleur:</p> </ul><ul><p>Vierkant (205, 44, 100);</p><p>Rechthoek (0, 230, 69);</p><p>Cirkel (30, 30, 30);</p><p>Ovaal (200, 100, 20);</p><p>Driehoek (10, 10, 10);</p><p>Trapezium (50, 50, 250).</p> </ul><p><i><u>Kleurenschema's</u> </i></p> <p>Als u de eigenaardigheden van de perceptie van elke kleur en kleurencombinatie kent, kunt u een aantal kant-en-klare schema's bouwen. Elk van deze schema's, belichaamd in het leven, klinkt op zijn eigen manier, en geeft een bepaalde sfeer aan de compositie.</p> <p>Als we een harmonieuze combinatie van kleuren willen bereiken, kunnen we er meerdere in de buurt nemen, de een na de ander op het kleurenwiel. Bijvoorbeeld geel en geelgroen.</p> <p>Om contrast te creëren, worden kleuren tegenover elkaar gekozen, tegenover elkaar geplaatst. Deze kleuren worden complementair genoemd. Zij aan zij toegepast, maken ze elkaar helderder en levendiger. Paren van geel-violet, magenta-groen zijn voorbeelden van complementaire kleuren.</p> <p>Naast het gebruik van kleuren die naast elkaar liggen, kunt u proberen dezelfde kleuren te gebruiken, maar met verschillende gradaties van verzadiging.</p> <p>De meest betrouwbare en onuitputtelijke bron van kleurenschema's is echter de natuur. De mens maakt er deel van uit, en niets behaagt zijn oog meer dan de harmonie van natuurlijke tederheid en schoonheid.</p> <p>Prestigieuze kleuren: goud, zilver, donkergrijs, zwart. Het is hun taak om soliditeit, vertrouwen, stabiliteit en hoge waarde over te brengen.</p> <p>Pastelkleuren: delicaat, beige, roze, blauwachtig - vrouwelijk, zacht, ontspannend.</p> <p>"Gezonde" kleuren: uit de Amerikaanse psychologie - reinheid, gezondheid, vertrouwen, familie (geelgroene schaal met toevoeging van zwart).</p> <p>Natuurlijke kleuren: dicht bij natuurlijke organische, natuurlijke componenten.</p> <p>Striae als een variant van kleurgebruik zijn meestal tonale tinten van dezelfde kleur en als accent - een actievere kleur</p> <p>Het is beter om het beproefde recept aan te houden: gebruik een minimum aan kleuren, maar kies tegelijkertijd de kleuren zelf zo contrasterend mogelijk. De belangrijkste vereiste voor een paar kleuren voor achtergrond en tekst is voldoende contrast tussen beide, noodzakelijk voor comfortabel lezen.</p> <p><i><u>Veilig palet.</u> </i></p> <p>We mogen niet vergeten dat de maker van de webpagina geen flauw idee heeft van welk computermodel en onder controle van welke programma's zijn werk zal worden bekeken. Hij weet niet zeker of zijn "groene boom" rood of oranje wordt op de schermen van gebruikers.</p> <p>Daarom zijn alle populaire webbrowsers (browsers) vooraf geconfigureerd voor één vast palet. Dit palet heeft geen 256 kleuren, maar slechts 216. Dit komt doordat niet alle computers 256 kleuren kunnen weergeven.</p> <p>Dit vaste palet, dat rigide indices definieert voor het coderen van 216 kleuren, wordt een veilig palet genoemd.</p> <p><i><u>Rasterafbeeldingen</u> </i></p> <p>De basis van de rasterweergave van afbeeldingen is een pixel (punt) met een aanduiding van de kleur ervan. Wanneer je bijvoorbeeld een rode ellips op een witte achtergrond beschrijft, moet je de kleur van elk punt aangeven, zowel de ellips als de achtergrond. De afbeelding wordt weergegeven in de vorm van een groot aantal stippen - hoe meer er zijn, hoe visueel beter de afbeelding en hoe groter de bestandsgrootte.</p> <p>Bitmap wordt meestal gebruikt voor een afbeelding van een fotografisch type met veel detail of tint. Het schalen van dergelijke afbeeldingen in een willekeurige richting verslechtert meestal de kwaliteit.</p> <p><i><u>vectorafbeeldingen</u> </i></p> <p>Vectorrepresentatie bestaat uit de beschrijving van beeldelementen door wiskundige krommen, die hun kleuren en vulling aangeven. Een rode ellips op een witte achtergrond wordt beschreven door slechts twee wiskundige formules - een rechthoek en een ellips van de bijbehorende kleuren, maten en locaties. Het is duidelijk dat een dergelijke beschrijving veel minder ruimte in beslag zal nemen dan in het geval van rasterafbeeldingen. Een ander voordeel is schaalbaarheid van hoge kwaliteit in elke richting.</p> <p>De keuze voor raster- of vectorformaat hangt af van de doelen en doelstellingen van het werken met de afbeelding. Als fotografische kleurnauwkeurigheid vereist is, heeft een raster de voorkeur. Het is handiger om logo's, schema's en ontwerpelementen in vectorformaat te presenteren.</p> <p><i><u>Grafische bestandsindelingen voor internet</u> </i></p> <p>GIF en JPEG zijn de twee meest populaire beeldformaten die de facto de standaard zijn geworden voor gebruik op het WWW.</p> <p>Foto's kunnen het beste worden opgeslagen in JPEG-indeling en illustraties in GIF-indeling</p> <p><i><u>Optimalisatie van afbeeldingen.</u> </i></p> <p>Voor webpagina's is de kwestie van het fotoformaat erg belangrijk.</p> <p>De allereerste fase van optimalisatie is de selectie van het belangrijkste op de foto, het weggooien van al het andere en het focussen op het geïllustreerde element. Dit wordt bereikt door bij te snijden en het meest expressieve deel te vinden dat de betekenis van de foto overbrengt. Na deze bewerking is het al mogelijk om het beeld te optimaliseren om het kleinste formaat te bereiken. Maar er is een compromis met de grootte van uw foto's - maak ze niet te klein. En maak ze niet te groot. Gewoonlijk is een foto 250 x 300 pixels groot en neemt deze ongeveer 6-10 KB in beslag. Dit betekent niet dat alle foto's even groot moeten zijn, maar het gebied van de foto moet er gelijkwaardig aan zijn. Zo wordt bijvoorbeeld een bestand van 45,93 Kb met een downloadsnelheid van 28,8 Kbps 17 seconden in de browser geladen.</p> <h4>Praktisch werk nummer 8</h4> <p><b>"Grafiek op een webpagina plaatsen"</b> </p> <p><i><b>Taak 1. Decoratie met kleur</b> </i><i><b>Web</b> </i> <i><b>-Pagina's.</b> </i></p> <p><b>Doelwit:</b> leer hoe u een gekleurde achtergrond voor een webpagina maakt, lettertypen met verschillende kleuren gebruikt en horizontale lijnen op pagina's plaatst.</p> <p><b>Instructies voor implementatie:</b></p> <ul><p>Maak een nieuwe webpagina in Kladblok.</p><p>in element <title >geef de titel van de pagina aan "P/r nummer 8. Taak 1".</p><p>In het beginelement <body >gebruik het juiste attribuut om de achtergrondkleur van de pagina zwart te maken.</p><p>Label Good Night in het wit. Lijn het uit in het midden van de pagina. Lettergrootte 12.</p><p>Voeg een horizontale lijn in rood in.</p><p>Maak een geel onderschrift "Geniet van je dromen". Lijn het uit in het midden van de pagina. Lettergrootte 8.</p><p>Plaats een horizontale blauwe lijn van 10 pixels dik, 50% van de schermbreedte, en lijn deze uit met het midden.</p> </ul><p><i><b>Taak 2. Afbeeldingen op een webpagina plaatsen.</b> </i></p> <p><b>Doelwit</b>: leer hoe u afbeeldingen op een webpagina plaatst.</p> <p><b>Instructies voor implementatie:</b></p> <ul><p>Maak een nieuwe webpagina in Kladblok.</p><p>in element <title >geef de titel van de pagina aan "P/r nummer 8. Opdracht 2".</p><p>Als de tag <body >geef de paginakleur niet op, de standaardachtergrond is wit.</p><p>Plaats een tekening van een voetbalzwaard op de pagina. Een bestand met de naam voetbal .gif bevindt zich in de map die door de leraar is opgegeven. Om de afbeelding te plaatsen, moet u het pad naar het bestand in het element specificeren <img src='/sozdanie-web-stranic-s-pomoshchyu-html-koda-sozdanie-web-stranicy-s-pomoshchyu/' loading=lazy loading=lazy>... Om de beschrijving van het pad naar dit grafische bestand te vereenvoudigen, kopieert u dit bestand naar dezelfde map waarin de webpagina wordt opgeslagen. Het element ziet er dan als volgt uit:</p> </ul><p>Als het bestand zich niet in dezelfde map als de webpagina bevindt, moet u het relatieve pad naar dit bestand specificeren.</p> <ul><p>Geef de voetbal een onderschrift met het alt-attribuut (titel).</p><p>Maak een 2 px brede rand rond de afbeelding.</p><p>Plaats de kop "World of Football" op het grootste formaat boven de afbeelding en lijn deze uit met het midden van de pagina.</p> </ul><p><b>Onderwerp 4. HTML-tags. Tafels</b></p> <p><i><b>C</b> </i> <i><b>tabellen maken en opmaken <br></b> </i><i><u>De rij en cel van de tabel instellen.</u> </i> Een tabel is een van de handigste manieren om grote hoeveelheden gegevens weer te geven. De HTML-taal heeft de meest uitgebreide mogelijkheden voor het maken van verschillende soorten tabellen. <br>Bij het maken van tabellen wordt het principe van nesten gebruikt: binnen het hoofdelement van de tabel</p> TR> is een tag die een tabelrij definieert. De eindtag kan worden weggelaten omdat de regel eindigt waar de volgende regel begint. <br>… TD> is een tag die een tabelcel definieert. De eindtag kan ook worden weggelaten. <br>Cellen kunnen alle gegevens en alle HTML-tags bevatten die in de hoofdtekst van het document zijn toegestaan. Een tabelcel kan bijvoorbeeld een geneste tabel of afbeelding bevatten. Browsers berekenen automatisch de grootte van cellen en de hele tabel, hoewel deze eigenschappen gedeeltelijk kunnen worden ingesteld met behulp van attributen. <br><i>Voorbeeld (een tabel met twee rijen en kolommen). <br></i><TABLE ><br>Hoofdstad <br>Rusland Moskou <br>Frankrijk Parijs <br>TABEL> <br>Zo ziet het er op het scherm uit: <p>Telefoonnummer</p> <p>Petrova AI</p> <p>Smirnov V.P.</p> <p><i><u>Stelt de breedte van de tabelrand in.</u> </i> Het attribuut gebruiken <b>grens</b> u kunt de breedte van het tabelframe in pixels instellen, bijvoorbeeld: <br><TABLE bor der=”2”><br>U kunt de randen van de tafel onzichtbaar maken, hiervoor moet de breedte van de tafelrand op 0 staan, bijvoorbeeld <TABLE width =”300” bgcolor =”#00cc 99” bor der=”0”></p> <p><i><u>De breedte en hoogte van de tafel instellen</u> </i><i>. </i> De breedte en hoogte van de tabel kunnen exact in pixels of als percentage van de paginabreedte in het browservenster worden opgegeven. Er zijn standaard attributen: <br><b>breedte</b>- breedte; <br><b>hoogte</b>- hoogte. <br>Als we bijvoorbeeld een tabel van een bepaalde grootte moeten instellen, bijvoorbeeld 500 pixels breed, dan geven we aan: <br><TABLE width =”500” bor der=”1”><br>Als we een tabel over de volledige breedte van het scherm willen hebben, zonder ons te bekommeren om de monitorresolutie van degene die onze webpagina zal bekijken, dan stellen we de paginabreedte in op 100%. <br><TABLE width =”100%”bor der=”1 ”><br>Zo ziet het er op het scherm uit:</p> <p>Telefoonnummer</p> <p>Petrova AI</p> <p>Smirnov V.P.</p> <p>Als we tegelijkertijd een grote lijnhoogte nodig hebben, bijvoorbeeld 300 pixels, dan geven we nog een attribuut aan: <br><TABLE width=”100%” height=”300” bor der=”1”><br><i><u>De achtergrondkleur en kleur van tabelcellen instellen</u> </i><i>. </i> Voor de hele tafel kan een achtergrondkleur worden ingesteld, hiervoor is er een attribuut <b>bgcolor</b>... De waarde voor dit kenmerk kan een Engels woord zijn, zoals rood, of een hexadecimale code, zoals # FF0000. <br>Als we bijvoorbeeld in de allereerste tabel die we hebben gemaakt, een zilveren achtergrond moeten instellen, geven we het volgende aan: <TABLE bgcolor=#c0c0c0></p> <p>Zo ziet het er op het scherm uit:</p> <p>Telefoonnummer</p> <p>Petrova AI</p> <p>Smirnov V.P.</p> <p>U kunt de kleur van de tabelcellen afzonderlijk instellen. In dit geval wordt het attribuut bgcolor in het element geplaatst</p><p>Bijvoorbeeld, <br><TABLE width=500 border =1><br>Hoofdstad <br>Goud> RuslandGeel> Moskou <br>Kastanjebruin> FrankrijkOranje> Parijs <br>TABEL></p><p>Zo ziet het er op het scherm uit:</p> <p><i><u>Gegevensuitlijning in tabelcellen. <br></u> </i> C Er is een set attributen ontworpen om gegevens in tabelcellen uit te lijnen. Attribuut <b>uitlijnen</b> stelt u in staat om gegevens in cellen horizontaal uit te lijnen. Het heeft de volgende waarden: <br>Links - links uitlijning; <i><u><br></u> </i> Rechts - juiste uitlijning; <br>Midden - midden uitlijning. <br>Attribuut <b>valign</b> Hiermee kunt u tekst verticaal uitlijnen. Waarden kunnen als volgt zijn: <br>Boven - uitlijning met de bovenrand van de cel; <br>Midden - midden uitlijning; <br>Basislijn - uitlijnen op de eerste regel <br><i>Voorbeeld. <br></i><TABLE width =100% border =1 align =center ><br> <TR ><br> <TD ><B >Horizontale uitlijning B> TD> <br></p><p>Centrum <br>links> Links <br>Rechterrand <br> <TR ><br> <TD ><B >Verticale uitlijning B> TD> <br>valign = boven> Boven uitlijnen TD> <br> <TD valign =middle >Midden TD> <br> <TD valign =baseline >Onderste TD> <br>TR> <br>TABEL> <br>Als resultaat krijgen we de volgende tabel: <b>Horizontale uitlijning</b> </p><p>Centrum</p> <p>Links uitgelijnd</p> <p>Rechterrand</p> <p><b>Af te stemmen op <br>verticaal</b></p> <p>Bovenrand</p> <p>Centrum</p> <p>Onderrand</p> <p><b><br>< </b><b>tafel</b> <b>breedte</b> <b>=500 </b><b>grens</b> <b>=3> </b></p> <p> <b>Academische prestatie</b> </p> <b>N <b>NS</b><b>/ </b> <b>NS</b> </b><b><b>Achternaam</b> </b><b><b>School</b> </b><b><b>Klas</b> </b><p><b> <span><b>Praktijkwerk nummer 9 <br>"Een tabel maken en opmaken"</b> </span> </b></p><p><b><b>Doelwit:</b> leer hoe u eenvoudige tabellen kunt maken en opmaken in de teksteditor Kladblok. <br><b>Instructies voor implementatie:</b> </b></p><p><b>Maak een nieuwe webpagina die er als volgt uitziet in een browser:</b></p><b>Achternaam</b><p><b>Telefoonnummer</b></p><p><b>Petrova AI</b></p><p><b>31-74-16 </b></p><p><b>Smirnov V.P.</b></p><p><b>46-29-89 </b></p><p><b>De achtergrondkleur van de tafel is zilver, de breedte van de tafelrand is 1.</b></p><p><b>Geef in het element de naam van de pagina "P / r nr. 14" op.</b></p><p><b>Bekijk de gegenereerde webpagina in een browservenster.</b></p><p><b>Ga terug naar het bestand dat je in Kladblok hebt opgeslagen. <br>Pas het aan zodat de webpagina er in een browser als volgt uitziet:</b></p><p><b>Telefoonboek</b></p> <b>Achternaam</b><p><b>Telefoonnummer</b></p><p><b>Petrova AI</b></p><p><b>31-74-16 </b></p><p><b>Smirnov V.P.</b></p><p><b>46-29-89 </b></p> <p>De achtergrondkleur van de cellen van de eerste rij is lichtgroen, de achtergrondkleur van de cellen van de overige rijen is zilver, de breedte van het tafelframe is 5.</p><p><b>Bekijk de webpagina in een browservenster.</b></p><p><b>Sla uw wijzigingen op.</b></p><p><b><i><u><b>Rijen of kolommen in een cel samenvoegen</b> </u> </i><i>. </i> </b></p><p><b>Bij het bouwen van complexe tabellen kan het nodig zijn om meerdere rijen of kolommen in één cel te combineren (samenvoegen). Hier zijn attributen voor: <b>colspan - ja</b> toont het aantal kolommen aaneengeschakeld in één cel (standaard = 1), <b>rijspan - y</b> Toont het aantal aaneengeschakelde rijen in één cel (standaard = 1). <i>Voorbeelden:</i> </b></p><b>1 </b><p> <b>1 </b></p><p>Het hele verschil tussen deze constructie van tabellen ligt in het uiterlijk van de parameter <b>rijspan = "2",</b> het nummer waarin overeenkomt met het aantal "substrings", d.w.z. letterlijk hoeveel regels zijn samengevoegd tot een cel. Als we in een symmetrische tabel van links naar rechts lezen, gebeurt hetzelfde, maar waarom staat er een cel met het getal drie voor de cel met twee in de code? Alles is heel eenvoudig - <i>letterlijk</i> de code voor de eerste regel staat voor "de cel die de gegeven 1 bevat", "de cel die de gegeven 3 bevat, bestaande uit TWEE substrings", de code voor de tweede regel staat voor "de cel die de gegeven 2 bevat". <u>Zoals je kunt zien, behoort cel 3 fysiek tot de EERSTE rij!</u></p> <p>Als we cellen horizontaal hebben uitgelijnd, dan in plaats van de tag <b>rijspan</b> tag gebruikt <b>colspan</b>, natuurlijk in de cel die het gebied van meerdere kolommen beslaat). <i>Bijvoorbeeld:</i><i> </i> </p> <table width="684" border="0"><tr valign="top"><td width="80"> </td> <td width="79"> </td> </tr></table><table width="200" border="1"><tr align="center"><td colspan="2">1 </td> </tr><tr align="center"><td>2 </td><td>3 </td> </tr></table><p><b>Praktijkwerk nummer 10 <br>Rijen of kolommen samenvoegen in tabelcellen</b> </p> <p><b>Doelwit:</b> <span>leer complexe tabellen te maken in de teksteditor Kladblok. <br></span><span><b>Instructies voor implementatie:</b> </p> <ul><p>Open de teksteditor Kladblok.</p><p>Maak een nieuwe webpagina die er als volgt uitziet in een browser:</p> </ul><p>Academische prestatie</p> p / p <p>Achternaam</p> <p>School</p> <p>Klas</p> <p>Chemie cijfers</p> <p>1 p/g</p> <p>2 p/g</p> <p><b>Ivanov</b> </p> <p><b>Petrov</b> </p> <p><b>Sidorov</b> </p> <p>De achtergrondkleur van de eerste rij van de tafel is aquamarijn, de breedte van de tafel is 500, de breedte van het tafelframe is 3.</p> <ul><p>Geef in het element de naam van de pagina "P / r nr. 10" op.</p><p>Bekijk de gegenereerde webpagina in een browservenster.</p><p>Ga terug naar het bestand dat je in Kladblok hebt opgeslagen. <br></span><br></p> </ul><p><i><u>Een webpagina markeren met behulp van een tabel.</u> </i> Het is handig om een ​​webpagina te markeren met een tabel. Er zijn verschillende markeermogelijkheden mogelijk. Laten we er een paar bekijken. <br><b>Eerste optie.</b> De pagina wordt opgemaakt met behulp van een schermvullende pagina, ongeacht de schermresolutie (breedte = "1000%"). In dit geval is het handig om een ​​tabel te maken die uit twee rijen en twee kolommen bestaat. De bovenste rij wordt gereserveerd voor de paginatitel, de linkerkolom wordt gereserveerd voor het websitemenu. Met een dergelijke lay-out beslaat de pagina altijd het volledige scherm, ongeacht de schermresolutie van de bezoeker (Fig. 4.12).</p> <p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m775cb074.png' align="bottom" width="100%" loading=lazy loading=lazy></p> <p><b>Rijst. 4.12.</b> </span><span>Voorbeeld opmaak</span><span>Web</span><span>-Pagina's. Eerste optie</p> <p>De nadelen van dergelijke opmaak kunnen worden toegeschreven aan de "drijfkracht" van de pagina-inhoud, dat wil zeggen dat wanneer de schermresolutie afneemt, de inhoud in smallere frames moet passen, waardoor de tekst naar beneden "glijdt". Om dit te voorkomen, moet u een vaste tafelgrootte selecteren, waarna de tafel er bij elke schermresolutie ongewijzigd uitziet.</p> <p><b>Tweede optie.</b> De pagina is opgemaakt met behulp van een 760 pixels brede tabel die is uitgelijnd op het midden van het scherm. Tegelijkertijd ziet een bezoeker met een schermresolutie van 800x600 pixels een pagina met een breedte van bijna het hele scherm, en een bezoeker met een monitorresolutie van 1024x768 en hoger een tabel met een breedte van 760 pixels in de midden van het scherm en witte marges aan de zijkanten.</p> <p>In dit geval is het handig om een ​​tabel te maken met drie rijen en één kolom. De bovenste regel wordt gereserveerd voor de paginatitel, de tweede regel wordt gereserveerd voor het websitemenu en de derde regel wordt direct gereserveerd voor de site-inhoud (Fig. 4.13).</p> <p><img src='https://i0.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_20004b1a.png' align="bottom" width="100%" loading=lazy loading=lazy></p> <p><b>Rijst. 4.13.</b> </span><span>Voorbeeld opmaak</span><span>Web</span><span>-Pagina's. Tweede optie</p> <p>Als het nodig is om illustraties, foto's etc. binnen de tekst van de pagina te plaatsen, dan worden in dit geval ook tabellen gebruikt. In het onderstaande voorbeeld wordt een tabel met twee rijen en drie kolommen ingevoegd in de tweede cel van de tweede rij. Afbeeldingen worden ingevoegd in de eerste en derde cel van de eerste rij en de paginanaam wordt ingevoegd in de tweede cel van de eerste rij. Alle cellen van de tweede regel bevatten tekst (Fig. 4.14).</p> <p><b>Rijst. 4.14.</b> </span><span>Voorbeeld opmaak</span><span>Web</span><span>-Pagina's. De derde optie:</p> <br clear="left"><br><img src='https://i0.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m32b43cfb.png' align="bottom" width="100%" loading=lazy loading=lazy><h6>Onderwerp 5. Eindwerk "Creatie van een website over een bepaald onderwerp in TR" Kladblok "</h6> <p>De leerlingen ontwikkelen en ontwerpen thuis een websiteproject op papier in de vorm van een creatief werk, en implementeren dit vervolgens in HTML in de klas.</p> <p>_____________________________________________________________________________</p> <p>De cursus is ontwikkeld op basis van I. Smirnova's boek "Beginnings of Web-design".</p> <h3>2.7.1. Een webpagina maken in FrontPage 2003 Editor</h3> <p>Webpagina's of hypertext-documenten (html-documenten) zijn tekstbestanden die zijn gemarkeerd met tags met behulp van de HyperText Markup Language (HTML). HTML is geen programmeertaal, het is een opmaaktaal of hypertext-formatter. Tags worden gebruikt om het document te markeren. Tags staan ​​tussen punthaken. In principe zijn tags gekoppeld, d.w.z. er zijn begin- en eindtags.</p> <p>Met de HTML-opmaaktaal kunt u de tekst van een webpagina opmaken, grafische objecten en afbeeldingen erop plaatsen, geluidsopnamen en verschillende multimedia-elementen invoegen, evenals scripts (JavaScript, VBScript), en hypertext-links maken.</p> <p>De webpagina begint en eindigt met gekoppelde tags <html>en</html>... Gekoppelde tags worden tussen deze tags geplaatst <head>, </head>(de kop van de webpagina), waartussen gepaarde tags zijn <title> voor de titel van de webpagina, en introduceert ook verschillende metatags voor trefwoorden, beschrijving van de pagina-inhoud, enz.

      Dan volgen de tags ,

      (body van de webpagina), wordt de inhoud of inhoud van de pagina tussen deze tags geplaatst.

      Als u bijvoorbeeld gelabelde tekst invoert in Kladblok of Kladblok ++:


      Online training


      Deze site is gewijd aan afstandsonderwijs informatica, telecommunicatie en e-business




      en sla het op met de html-extensie, dan krijgen we een html-document dat wordt weergegeven in het browservenster en de vorm heeft die wordt weergegeven in de afbeelding.


      Rijst. 1.

      Webpagina's (hypertekstdocumenten) zijn bestanden met een uniek adres en worden weergegeven door browsers.

      WWW-pagina's kunnen zijn:

      • statisch;
      • dynamisch;
      • interactief.

      Statische pagina's zijn statische bestanden (een set tekst, tabellen, afbeeldingen, enz.) die zijn gemaakt met de HTML-opmaaktaal en de extensie .html of .htm hebben.

      Dynamische webpagina's zijn webpagina's die worden gegenereerd of gegenereerd (gemaakt) tijdens de uitvoering van een gebruikersverzoek. Deze pagina's zijn geschreven in PHP, ASP, etc. en hebben respectievelijk de extensies .php, .aspx. Dynamische pagina's worden gemaakt door de zogenaamde engine (Content Management System) of een speciaal programma op de server, die op verzoek van gebruikers een webpagina genereert uit de gegevens die op de server in de database zijn opgeslagen.

      Interactieve webpagina's zijn webpagina's die formulieren bevatten (gemaakt in PHP, JavaScript en VBScript, enz.), via deze formulieren worden gegevens uitgewisseld tussen de gebruiker en de server.

      Webpagina's worden gemaakt met behulp van verschillende html-editors: Microsoft Voorpagina, Macromedia Dreamweaver, TinyMCE WYSIWYG Editor, FCKeditor, enz.

      Om te leren webpagina's en sites te maken, is het raadzaam om een ​​editor in het Russisch te gebruiken. FrontPage bevat wizards die het gemakkelijk maken om een ​​website te maken, en webpaginasjablonen die de opmaak (structuur) en het ontwerp bevatten die nodig zijn om snel webpagina's te maken.

      Het algoritme voor het maken van webpagina's in de FrontPage 2003-editor wordt gedetailleerd beschreven op de pagina

      Een webpagina kan tekst, afbeeldingen en hyperlinks naar verschillende internetbronnen bevatten. Om al deze mogelijkheden te realiseren is een speciale taal ontwikkeld genaamd Hyper Text Markup Language (HTML), oftewel Hypertext Markup Language. Een document geschreven in HTML is een tekstbestand dat de eigenlijke tekst bevat die informatie naar de lezer brengt, en opmaakvlaggen. De laatste zijn specifieke reeksen karakters die instructies zijn voor de kijker; in overeenstemming met deze instructies rangschikt het programma de tekst op het scherm, bevat afbeeldingen, die zijn opgeslagen in afzonderlijke grafische bestanden, en vormt hyperlinks met andere documenten of internetbronnen. Een HTML-bestand wordt dus alleen een WWW-document wanneer het door een kijker wordt geïnterpreteerd.

      Aangezien HTML-documenten in ASCII-indeling zijn geschreven, kan elke teksteditor worden gebruikt om deze te maken.

      Html- of .html-bestandsextensie. htm, waarin de tekst is gemarkeerd met HTML-tags. HTML wordt gebruikt om de syntaxis en plaatsing van tags te definiëren op basis waarvan de browser de inhoud van het webdocument weergeeft. De tekst van de tags zelf wordt niet weergegeven door de webbrowser.

      Alle tags beginnen met "<" и заканчиваются символом ">". Meestal is er een paar tags - een begin (opening) en een eind (afsluitende) tag, waartussen de opmaakinformatie wordt geplaatst:

      HTML is de standaard opmaaktaal voor hypertext-documenten

      Hier is de starttag de tag

      En de laatste -

      ... De eindtag verschilt alleen van de starttag doordat deze vóór de tekst tussen haakjes staat<>er is een "/" (slash).

      Een browser die een HTML-document leest, geeft het in een venster weer met behulp van de HTML-tagstructuur. Elk HTML-document moet drie hoofdonderdelen hebben:

      HTML-declaratie

      rubriek

      Hoofdtekst van het document

      Laten we elk van de punten afzonderlijk bekijken:

      HTML-declaratie

      en... Een paar van deze tags vertelt de kijker (browser) dat er een HTML-document tussen staat, waarbij de eerste tag in het document de tag is (helemaal aan het begin van het document), en de laatste is(helemaal aan het einde van het document).

      rubriek

      en... Tussen deze tags staat informatie over het document (titel, trefwoorden, beschrijving, enz.). Het belangrijkste is echter de naam van het document, die we in de bovenste regel van het browservenster en in de Favorietenlijsten zien. Om uw HTML-document een naam te geven, wordt de tekst tussen de tags geplaatst en.

      O</i> <i>paarden

      Hoofdtekst van het document

      Het derde hoofdonderdeel van het document is de body. Het volgt direct na de titel en bevindt zich tussen de tags en... De eerste moet direct na de tag staan en de tweede is voor de tag... De hoofdtekst van een HTML-document is waar de auteur HTML-geformatteerde informatie plaatst.

      O</i> <i>paarden ... .

      Uit het bovenstaande kunnen we de HTML-paginacode schrijven:

      O</i> <i>paarden Inhoud mijn stanitsa

      Over het algemeen zijn er veel tags en elk van hen voert bepaalde functies uit bij het maken van een HTML-pagina.

      Trapsgewijze CSS-stijlbladen

      Stel dat u de tekstkleur in uw HTML-site moet wijzigen van zwart naar blauw, daarvoor moet u de achtergrondkleur op elke pagina van uw site wijzigen, maar er is een eenvoudigere oplossing voor dit probleem. U kunt gebruik maken van cascading style sheets of met andere woorden CSS (Cascading Style Sheets).

      CSS was de revolutie die het WWW deed schudden. Als de webdesigner daarvoor niet wist hoe zijn creatie eruit zou zien in verschillende programma's van webbrowsers, kan hij nu alles regelen: van de tekenstijl tot de positie van de afbeelding op de pagina.

      CSS wordt dus gebruikt door de makers van webpagina's om kleur, lettertypen, lay-out en andere aspecten van documentpresentatie te specificeren. Het belangrijkste doel van CSS-ontwikkeling was om inhoud (geschreven in HTML of een andere opmaaktaal) en documentpresentatie (geschreven in CSS) te scheiden. Html wordt gebruikt om de inhoud van de pagina te structureren en CSS wordt gebruikt om die gestructureerde inhoud op te maken.

      Bovendien kunt u met CSS hetzelfde document in verschillende stijlen of uitvoermethoden presenteren, zoals weergeven, afdrukken, spraaklezen (met een speciale spraakbrowser of schermlezer).

      De CSS bij het renderen van de pagina kan uit verschillende bronnen worden gehaald:

      Externe stylesheets, dat wil zeggen een apart bestand. css waarnaar in het document wordt verwezen.

      Inline-stijlen - CSS-blokken in het HTML-document zelf.

      Inline-stijlen, wanneer in een HTML-document stijlinformatie voor één element wordt gespecificeerd in het style-attribuut.

      Aangepaste stijlen: een lokaal CSS-bestand dat door de gebruiker is opgegeven in de browservoorkeuren, dat de stijlen van de auteur overschrijft en op alle documenten wordt toegepast.

      Browserstijl: de standaardstijl die standaard door de browser wordt gebruikt voor het presenteren van elementen.

      Stijlbeschrijvingen staan ​​in tags en geplaatst tussen tags .

      Als je stijlen in een apart bestand plaatst, dan tussen de tags voor elk HTML-document moet u een link naar het CSS-bestand toevoegen:

      Standaard. css is uw CSS-bestand met een beschrijving van de toe te passen stijlen. Als het zich in een andere map bevindt, moet u het pad ernaartoe opgeven. Een CSS-bestand wordt gemaakt in elke teksteditor, bijvoorbeeld in Kladblok, u hoeft alleen de extensie van het tekstbestand te wijzigen in CSS.

      Webpagina's kunnen in elk formaat bestaan, maar de standaard aangenomen Hyper Text Markup Language is een hypertext opmaaktaal die is ontworpen om rich text te creëren die rijk is aan afbeeldingen, geluid, animatie, videoclips en hypertext-links naar andere documenten, verspreid over het web. en die zich op dezelfde server bevinden of een integraal onderdeel zijn van hetzelfde webproject.

      Het is mogelijk om op het web te werken zonder de HTML-taal te kennen, aangezien HTML-teksten kunnen worden gemaakt door verschillende speciale editors en converters. Maar rechtstreeks naar HTML schrijven is niet moeilijk. Het kan zelfs gemakkelijker zijn dan het leren van een HTML-editor of -converter, die vaak beperkt is in zijn mogelijkheden, fouten bevat of slechte HTML-code doorgeeft die niet op verschillende platforms werkt.

      HTML bestaat in verschillende smaken en blijft evolueren, maar HTML-constructies zullen waarschijnlijk in de toekomst worden gebruikt. Door HTML te leren en te begrijpen, door een document te maken aan het begin van het leren van HTML en dit zoveel mogelijk uit te breiden, zijn we in staat webpagina's te maken die door veel webbrowsers kunnen worden bekeken, zowel nu als in de toekomst. Dit sluit de mogelijkheid niet uit om andere methoden te gebruiken, zoals de methode met verbeterde mogelijkheden die wordt geboden door Netscape Navigator, Internet Explorer of een ander programma.

      Werken in HTML is een manier om te leren hoe u documenten in een gestandaardiseerde taal kunt maken, waarbij u alleen extensies gebruikt als dat echt nodig is.

      HTML is geratificeerd door het World Wide Web Consortium. Het wordt ondersteund door verschillende reguliere browsers en zal waarschijnlijk de basis worden van bijna alle webgerelateerde software.

      Het voorbeeldprogramma Communicatietechnologie in computerwetenschappen en ICT heeft in totaal 12 uur en stelt voor om een ​​webpagina te maken met behulp van sjablonen. Over het onderwerp "Multimediatechnologieën" worden 8 uur toegewezen, maar als in een onderwijsinstelling informatica op propedeuseniveau al in de klassen 5, 6 en 7 wordt gestudeerd, is het raadzaam om de studie van multimediatechnologieën over te brengen naar een propedeutische cursus en dan kun je de tijd voor het bestuderen van communicatietechnologieën verlengen, of beter gezegd, je kunt het onderwerp "HTML-websites bouwen" in groep 8 toevoegen.

      Het wordt aanbevolen om de technologie van het maken van sites met de hypertext opmaaktaal HTML in het Kladblok-programma onder de knie te krijgen, wat het fundamentele principe in deze richting is. Het is natuurlijk onmogelijk om de hele HTML-taal in 8 uur te leren, maar je kunt het doel en de toepassing van de belangrijkste tags van de taal laten zien. Als de student geïnteresseerd is in de technologie van het maken van sites, kan hij het materiaal zelfstandig of in geschikte cursussen, kringen of keuzevakken blijven bestuderen.

      De gepresenteerde methodologische handleiding is herhaaldelijk getest in de 8e klas van gymnasium nr. 441 van het Frunzensky-district van St. les.

      Er zijn extra taken voorzien voor studenten die het geplande werk in de les snel hebben voltooid.

      De stof is effectief onder de knie wanneer studenten, samen met de leraar, een gemeenschappelijk project uitvoeren, bijvoorbeeld rond een thema uit de geschiedenis van St. Petersburg “Dramatische theaters van St. leraar.

      Als test beantwoorden de leerlingen vragen over de HTML-tag kennistest en presenteren ze een zelfgemaakte website.

      De belangrijkste doelstellingen van de training: de vorming van cognitieve interesse, de ontwikkeling van intellectuele en creatieve vaardigheden op het gebied van webtechnologieën.

      Leerzaam:

      • om een ​​kennissysteem te vormen over de technologie van het maken van websites;
      • leer de hypertext-opmaaktaal HTML voor het maken van websites;
      • kennis te maken met de stadia van projectactiviteiten.

      Ontwikkelen:

      • creativiteit ontwikkelen voor zelfexpressie door het creëren van websites;
      • het vermogen ontwikkelen om te vergelijken, een analoog te zoeken en kennis over te dragen naar een nieuw vakgebied van webtechnologieën;
      • computervaardigheden ontwikkelen

      Leerzaam:

      • een gewetensvolle werkhouding bevorderen;
      • een gevoel van kameraadschap en persoonlijke verantwoordelijkheid voor de gecreëerde site bevorderen;
      • bevordering van artistieke en esthetische smaak;
      • een competente en correcte internetgebruiker opleiden.

      Les 1

      1. Overzicht van websites en HTML

      Publicaties op het World Wide Web zijn in de vorm van websites. Een website is gestructureerd als een tijdschrift dat informatie bevat over een onderwerp of probleem. Net zoals een tijdschrift uit gedrukte pagina's bestaat, bestaat een website uit computerwebpagina's die door middel van hyperlinks met elkaar zijn verbonden. Webpagina's kunnen tekst, afbeeldingen, tabellen, multimedia en dynamische objecten bevatten. Websites kunnen worden gemaakt met HTML.

      HTML - Hyper Text Markup Language - hypertext opmaaktaal. HTML is op geen enkele manier een programmeertaal, het is alleen verantwoordelijk voor de rangschikking van elementen (tekst, afbeeldingen) in het browservenster. HTML is de taal voor het maken van websites op het World Wide Web. De HTML-taal bestaat uit eenvoudige commando's - tags. Tags regelen de presentatie van informatie op het scherm bij het weergeven van een HTML-document. Tags staan ​​tussen punthaken<>... en er zijn gepaarde en ongepaarde (single<>).

      Een HTML-document is een tekstbestand met de extensie. html of. htm met een set tags.

      Browser - (browser) - een programma om webpagina's te bekijken. Browsers Microsoft Internet Explorer, Opera, enz. Worden veel gebruikt Wanneer een browser een HTML-document ontvangt, parseert het dit, bouwt een objectmodel van het document op en geeft het resultaat vervolgens weer op de monitor.

      2. De structuur van het HTML-document

      3. Tekens opmaken

      De tekens tussen de volgende tags vertegenwoordigen:

      Lettertype-opties

      Tekst tussen tags …….. heeft een opgegeven grootte, kleur en lettertype. Hiervoor worden de attributen gebruikt: GROOTTE = een waarde van 1 tot 7 en KLEUR = kleur (aqua, zwart, blauw, fuchsia, grijs, groen, limoen, kastanjebruin, marineblauw, olijfgroen, paars, rood, zilver, groenblauw, geel, wit), elke kleur heeft zijn eigen hexadecimale code van 000000 tot FFFFFF.

      Als de tekst meerdere spaties tussen woorden of tabs bevat, toont de browser slechts één spatie op het scherm. Als er extra spaties nodig zijn, voeg dan een symbolische primitief toe tussen woorden.

      Enkele tag
      breekt de tekststroom en voegt een lege regel in. Verschillende van deze tags voegen meerdere lege regels toe. Regelafstand is enkelvoudig.

      4. Praktische taak nummer 1.

      Creatie van het eerste HTML-document "Dramatische theaters van St. Petersburg", werken met lettertypen, het instellen van de kleur en grootte van het lettertype. De technologie van het werk beheersen.

      Les nummer 2

      1. Tekst opmaken per alinea

      Tag - begint een alinea op een nieuwe regel. De nieuwe alinea wordt van de vorige gescheiden door dubbele regelafstand.

      Tekst uitlijnen op alinea's:

      2. De kleur van alle tekst en achtergrond van een document instellen

      Beschreven in de starttag van de documentbody

      TEKST= tekstkleur >.

      3. Koppen van verschillende niveaus

      getagd …. noteer de tekst die erin zit. De n-waarden variëren van 1 tot 6, en de tekst wordt weergegeven van groter naar kleiner. Tags …. kan attributen hebben UITLIJNEN = MIDDEN, LINKS, RECHTS.

      4. Eenvoudige lijsten

      5.Praktische taak nummer 2

      Tekst opmaken in alinea's, achtergrondkleur, koppen van verschillende niveaus, lijsten.

      Les nummer 3

      1. Afbeeldingen invoegen

      Alle browsers ondersteunen formaten .gif, .jpg. Deze formaten zijn bitmap. GIF- Ondersteunt transparantie en animatie, zeer geschikt voor handgetekende afbeeldingen. Jpg- voor afbeeldingen in kleur, zeer geschikt voor gescande afbeeldingen en foto's, ondersteunt geen animatie.

      Enkele tag voegt overal afbeeldingen in de tekststroom in:

      >

      Optionele tagkenmerken :

      Om de tekening gecentreerd te houden, kun je de tag . gebruiken

      …….
      /

      2. Praktische taak nummer 3

      Afbeeldingen invoegen en opmaken. Zelfbediening van webpagina's voor theaters.

      Les nummer 4

      Koppelingen met andere documenten zijn geordend op tags<een> ....

      > hyperlinktekst .

      >< IMG SRC = 'Grafische bestandsnaam' >

      2. Praktische taak nummer 4

      De lijst met theaters op de glavn.htm-startpagina opmaken als hyperlinks naar de respectieve theaterwebpagina's.

      Les nummer 5

      1. Tabellen

      Ze worden niet alleen gebruikt om gegevens in cellen te positioneren, maar ook om fragmenten van tekst en afbeeldingen ten opzichte van elkaar te positioneren.

      Het is handig om tabellen te gebruiken om sitenavigatie te creëren.

      Een voorbeeld van een tabel met twee rijen (rijen) met daarin twee cellen:

      Tabelcellen kunnen tekst of afbeeldingen bevatten, evenals HTML-gelabelde tekst en hyperlinks. U mag de tabelcellen niet leeg laten, u moet ten minste een vaste spatie plaatsen

      Basistagkenmerken

en
stel de parameters van een tabel, rij of cel in:

ALIGN = links, rechts, midden - uitlijning (

, ,
)

BGCOLOR = 'kleur' ​​- achtergrondkleur (

, ,
)

HSPACE = waarde - vrije ruimte links en rechts van de tabel in pixels (

)

VSPACE = waarde - vrije ruimte boven en onder de tabel in pixels (

)

WIDTH = waarde - de breedte van de tabel (cel) - in pixels, of als een percentage (

,
)

HOOGTE = waarde - de hoogte van de tabel (cellen, rijen) - in pixels of als percentage (

, )

BORDER = waarde - de dikte van de rand rond de tafel en zijn cellen, standaard waarde = 1, als waarde = 0, dan is er geen rand (

,
, ,
)

BORDECOLOR = 'kleur' ​​- randkleur ( >)

VALIGH = onder, midden, boven - verticale uitlijning van inhoud (

)

2. Praktische taak nummer 5

Sitenavigatie maken in de vorm van een tabel uit één regel

Lessen #6 en #7

1. Koptekstgedeelte , Meta-tags

Het kopgedeelte op elke pagina bevat informatie over het document dat wordt gebruikt bij het weergeven ervan. Tekst tussen tags </b>... <b>, weergegeven in de titelbalk van het browservenster.

Het kopgedeelte bevat meestal ook een aantal tags. met verschillende attributen die aanvullende informatie (meta-informatie) geven over de website:

Dramatheaters van St. Petersburg <b>

> - - (geeft het type codetabel aan ( windows-1251, Koi8-R en andere) gebruikt bij de voorbereiding van het tekstgedeelte van het document.

- informatie over

Het is noodzakelijk om de hoofdpagina van de site te ontwerpen volgens het voorbeeld van het glavn.htm-bestand, een tabel of een lijst te kiezen als navigatie op de site, en 2 - 3 pagina's die de inhoud van de site onthullen en bevatten: titel, tekst en afbeelding.

Les nummer 8

1. Controletest op kennis van HTML-tags - 15 minuten.

2. Reflectie. Presentatie van het project en de beoordeling ervan door de leerlingen van de klas en de leraar - 30 minuten.

Controletestvragen - Bijlage 2.

Literatuur voor de leraar

  1. Thomas A. Powell “Webdesign. De meest complete gids. In een subkliniek”, 2e druk, BHV-SPB, 2005
  2. Bruin M. “HTML 3.2. De meest complete gids. In het origineel”, BHV-SPb, 1999
  3. Zakharkina V.V. "Basis van het maken van webpagina's", methodologische gids, St. Petersburg, 2000
  4. K. Akhmetov, "Microsoft Internet Explorer 4.0 voor iedereen", uitgeverij Computer, Moskou, 1997

Literatuur voor de student

  1. Usenkov D. "Lessen van de webmaster", Moskou, BINOM, 2004
  2. Smirnova I. “Begin van webdesign, St. Petersburg, BHV, 2004.

Lijst met internetbronnen

  1. http://htmlbook.ru - Vlad Merzjevitsj. Een kort, maar informatief rijk leerboek over technologie voor het maken van sites, HTML, CSS, ontwerp, afbeeldingen, enz.
  2. http://html.manual.ru - Vladimir Gorodulin. HTML-referentie.
  3. http://winchanger.narod.ru - A. Klimov. Een snelle verwijzing naar HTML-tags.


© Copyright 2017, https://qzoreteam.ru