Html-programmeren voor dummies. HTML-taal voor beginners - waar te beginnen en waar naartoe

Iedereen gebruikt internet en iedereen surft op verschillende sites, en waarschijnlijk zou iedereen zijn website graag op internet willen plaatsen, maar dat is niet eenvoudig, daar zijn veel redenen voor. Om echter een kwaliteitswebsite te kunnen hosten, hoeft u alleen maar de basisprincipes te kennen “ WEB-programmering", wat de HTML-taal is. In dit artikel zullen we kijken naar de belangrijkste elementen, tags, attributen en zelfs de eerste webpagina schrijven.

Hyper Tekstopmaak Taal - "HTML" ( hypertext opmaaktaal) beschouwen velen het al lang niet meer als slechts een programmeertaal. Omdat het hele concept van HTML omvat verschillende methoden ontwerp van hypertext-documenten, ontwerp, hypertext-editors, browsers en nog veel meer. Een gebruiker die deze taal onder de knie heeft, krijgt het vermogen om serieuze dingen te doen met behulp van eenvoudige methoden en, belangrijker nog, snel, wat in de moderne wereld als zeer goed wordt beschouwd!

In de HTML-taal kun je je eigen multimediaproducten maken en deze op cd's distribueren, en al deze producten, gemaakt in de vorm van sets HTML-pagina's, vereisen niet de ontwikkeling van gespecialiseerde software, omdat alles wat nodig is voor het werken met gegevens ( Webbrowsers) zijn onderdeel geworden van de standaardsoftware op de meeste personal computers.

• Element ( element) is een constructie van de HTML-taal. Dit is een object dat gegevens bevat en ervoor zorgt dat deze op een specifieke manier kunnen worden geformatteerd. Elke webpagina is een verzameling elementen. Een van de belangrijkste ideeën van hypertekst is de mogelijkheid om elementen te nesten.
• Label ( label) - begin- of eindmarkeringen van een element. Tags definiëren de grenzen van de actie van elementen en scheiden elementen van elkaar. In de tekst van een webpagina worden tags tussen punthaken geplaatst en wordt de eindtag altijd gevolgd door een schuine streep.
• Attribuut - een parameter of eigenschap van een element. Met andere woorden: dit is een variabele die een standaardnaam heeft en waaraan een bepaalde reeks waarden kan worden toegewezen: standaard of willekeurig. Er wordt verwacht dat tekenattribuutwaarden tussen rechte aanhalingstekens staan, maar in sommige browsers kunt u de aanhalingstekens weglaten. Dit komt omdat het attribuuttype altijd vooraf bekend is. Attributen bevinden zich in de starttag en zijn van elkaar gescheiden door spaties.
• Een hyperlink is een stukje tekst dat verwijst naar een ander bestand of object. Hyperlinks zijn nodig om navigatie van het ene document naar het andere mogelijk te maken.
• Kader ( kader) - deze term heeft twee betekenissen. De eerste is het documentgebied met zijn eigen schuifbalken. De tweede waarde is één afbeelding in een complex ( geanimeerd) grafisch bestand (vergelijkbaar met een stilstaand beeld uit een film). Het is ook mogelijk dat u in plaats van de term ‘frame’ in gespecialiseerde literatuur en gelokaliseerde softwareproducten de term ‘frame’ of ‘frame’ kunt vinden.
• Een HTML-bestand of HTML-pagina is een document dat is gemaakt in de vorm van hypertekst op basis van de HTML-taal. Dergelijke bestanden hebben de extensie htm of html.
• Applet ( applet) - een programma dat als een afzonderlijk bestand naar de computer van de klant wordt overgebracht en wordt gestart bij het bekijken van een webpagina.
• Script of script ( script) is een programma dat is opgenomen in een webpagina om de mogelijkheden ervan uit te breiden.
• Verlenging ( verlenging) is een element dat niet is opgenomen in de taalspecificatie, maar wordt gebruikt om de mogelijkheid te bieden een nieuw en interessant opmaakeffect te creëren.
• CGI ( Gemeenschappelijke gateway-interface) is een algemene naam voor programma's waarmee u, als ze op een server worden uitgevoerd, de mogelijkheden van webpagina's kunt uitbreiden. Zonder dergelijke programma's is het bijvoorbeeld onmogelijk om interactieve pagina's te maken.
• HTML-code is een hypertextdocument in zijn oorspronkelijke vorm, waarbij alle elementen en attributen zichtbaar zijn.
• Een webpagina is een document (bestand) dat in hypertekstformaat is opgesteld en op het World Wide Web is geplaatst.
• Website ( plaats) - een reeks webpagina's die zich op één plek bevinden en met elkaar verbonden zijn.
• Browser ( browser) - een programma voor het bekijken van webpagina's.
() - bestanden kopiëren van de server naar de clientcomputer.
• URL ( Uniforme bronzoeker) of uniform resource locator, het adres van een object op internet, d.w.z. Een typische URL voor WWW ziet er als volgt uit: http://www.naam.domein/bestandsnaam.

Alle elementen van taal kunnen in drie groepen worden verdeeld. De eerste omvat de elementen die de structuur creëren hypertekstdocument. Het gebruik van dergelijke elementen is een noodzakelijke formaliteit die niet kan worden verwaarloosd. De tweede groep bevat elementen die opmaakeffecten creëren. Het gebruik ervan wordt bepaald door de specifieke vereisten voor het document, de verbeeldingskracht en de competentie van de ontwikkelaar en bevat elementen waarmee u de software kunt beheren die op de clientcomputer is geïnstalleerd en wordt uitgevoerd. Vaak worden dergelijke elementen automatisch gemaakt wanneer een ontwikkelaar een hypertext-editor of een soortgelijk programma gebruikt om een ​​object in een document in te voegen.

Hoewel de HTML-specificatie een standaard is, worden er nieuwe elementen aan de taal toegevoegd ( extensies). Daarom zijn sommige webpagina's handiger om te bekijken met bepaalde browsers. Extensies worden alleen gemaakt door bekende bedrijven die software voor het WWW ontwikkelen, en gewone gebruikers kunnen hun webpagina's verbeteren door middel van programmeren. Met applets kunt u de beperkingen van HTML wegnemen en ruimte geven aan de verbeelding van de ontwikkelaar.

De eerste versie van de HTML-taal werd begin jaren 90 ontwikkeld door Tim BenersLee voor een van de populaire Mozaïekbrowsers uit het verleden. Maar toen waren noch de browser, noch de HTML zelf gevonden goed gebruik. HTML+ verscheen in 1993 en ook deze versie bleef vrijwel onopgemerkt. Maar de HTML-taal werd wijdverspreid dankzij versie 2.0, die in juni 1994 verscheen. En vanaf dat moment is de populariteit van WWW over de hele wereld toegenomen. De standaarden in versie 2 zijn zo ingeburgerd geraakt dat ze nog steeds worden gebruikt.

HTML-versie 3.0, die ongeveer een jaar later verscheen, introduceerde de mogelijkheid om wiskundige symbolen te tekenen ( Integrale tekens, oneindigheid, breuken, haakjes, etc.) met behulp van taalelementen. Maar de ontwikkeling van dit project vertraagde en kreeg geen verdere verspreiding.

In 1996 verscheen HTML-versie 3.2. Dit was een briljante oplossing; het volstaat te vermelden dat er frames in de taalspecificatie zijn geïntroduceerd, die nu erg populair zijn geworden onder website-ontwikkelaars. Tot op de dag van vandaag ondersteunen alle browsers deze versie van HTML.

Officiële HTML 4-specificatie ( Dynamische HTML) werd ontwikkeld in 1997. Dat was toen al duidelijk verdere ontwikkeling hypertext zal worden geïmplementeerd via webprogrammering. Dit bleek veel effectiever dan het introduceren van nieuwe elementen in de taal.

Hieronder staat de code van de webpagina, die is gemaakt in HTML, en met deze pagina als voorbeeld zullen we de structuur ervan analyseren, maar eerst kopiëren we alle code naar een gewoon notitieblok en klikken op 'Opslaan als' en slaan de code op. bestand met de html-extensie, d.w.z. . na de naam write.html

Structuur van een webdocument Ga naar het einde van het document Kop 1 Kop 2 Kop 3 Kop 4 Kop 5 Kop 6 De eerste link vindt u hier Zou hier gevestigd moeten zijn
hoofdtekst van de webpagina.
En ik zal hier bijvoorbeeld invoegen
diverse overschrijvingen,
zodat jij dat kunt
duidelijk waarnemen
hoe werkt het voor jou
koppelingen in het document,
anders als u een grote resolutie heeft,
U merkt gewoon niet dat de links worden gevolgd

HTML-documentnotatie. Een van de principes van de taal is het nesten van elementen op meerdere niveaus. Dit artikel is de buitenste, omdat de hele webpagina zich tussen de begin- en eindtags moet bevinden. In theorie kan dit element als een formaliteit worden beschouwd. Het heeft de attributen versie, lang en dir, die in dit geval zelden worden gebruikt, en maakt het nesten van HEAD, BODY FRAMESET en andere elementen mogelijk die de algehele structuur van de webpagina bepalen. Uiteraard eindigen al dergelijke documenten met een eindtag.

< head >

Het titelgebied van een webpagina. Met andere woorden, het eerste deel. Net als het vorige element dient HEAD alleen ter vorming algemene structuur document. Dit element kan de attributen lang en dir hebben.

< title >

Een element voor het plaatsen van de titel van een webpagina. De tekstregel in dit element wordt niet weergegeven in het document, maar in de titelbalk van het browservenster. Dit element heeft een grote invloed op de promotie in de zoekmachine, omdat zoekmachines besteden speciale aandacht aan de TITLE-tag. Mijn advies: maak nooit hele lange tekst in deze tag ( 65 tekens is voldoende).

Dit element bevat service-informatie die niet wordt weergegeven bij het bekijken van een webpagina. Er zit geen tekst in in de gebruikelijke zin, dus er is geen eindtag. Elk META-element bevat twee hoofdattributen, waarvan de eerste het gegevenstype definieert en de tweede de inhoud.

< body >

Dit element combineert hypertekst, die de webpagina zelf definieert. Dit is het zichtbare deel van het document dat door de autopagina wordt ontwikkeld en door de browser wordt weergegeven. Dienovereenkomstig moet de eindtag van dit element aan het einde van de webpagina worden gevonden. Binnen het BODY-element kunt u alle elementen gebruiken die bedoeld zijn voor het ontwerpen van webpagina's. Binnen de starttag van het BODY-element kun je veel attributen plaatsen die dienen om de hele pagina in te stellen. Laten we ze in volgorde bekijken.

Een van de handigste kenmerken van deze tag, die van invloed is op het ontwerp van de pagina, is

background="pad naar achtergrondbestand"

Een eenvoudiger achtergrondontwerp komt neer op het instellen van de kleur

bgcolor="#FFFFFF"

De achtergrondkleur wordt gespecificeerd door drie hexadecimale getallen van twee cijfers die de intensiteit van de kleuren rood, groen en blauw (rbg) bepalen.

Omdat u de achtergrond van de pagina kunt wijzigen, kunt u ook de kleur van de tekst wijzigen. Voor dit doel is er het volgende attribuut

tekst="#RRGGBB"

Gebruik het volgende attribuut om de tekstkleur van hyperlinks in te stellen

link = "#RRGGBB"

U kunt ook een kleurwijziging opgeven voor de laatst geselecteerde hyperlink van de gebruiker

Kopelement. Er zijn zes niveaus van kopjes, die als volgt worden aangeduid.
Rubriek
Rubriek
Rubriek
Rubriek
Rubriek
Rubriek

Kop van niveau 1 is de grootste en kop van niveau 6 biedt de kleinste kop. Voor koppen kunt u een attribuut gebruiken dat de uitlijning links, midden of rechts specificeert:

align=”links” align=”center” align=”rechts”

Gebruik de tag om een ​​nieuwe alinea te maken

En om naar een nieuwe regel te gaan zonder een alineatag te maken
d.w.z. er vindt overdracht plaats. Het is niet nodig om deze tags te sluiten. Natuurlijk, als je de tag niet gebruikt

Het ALIGN-element, waarmee de uitlijning van alinea's kan worden ingesteld:

Links

Gecentreerd

Rechts

De tekst tussen deze elementen wordt in de breedte uitgelijnd

Horizontale lijn ( horizontale regel) is een veel voorkomend element. Ten eerste omdat het heel gemakkelijk en handig is om een ​​pagina in delen te verdelen. Ten tweede omdat de keuze van dergelijke ontwerpelementen voor de auteur van de pagina erg klein is. Het element heeft geen eindtag, maar heeft een aantal attributen voor links, midden, rechts, uitvulling:

• uitlijnen = "links"
• uitlijnen = centreren
• uitlijnen = "rechts"
• align=”rechtvaardigen”

Vrije tekst

In dit geval krijgt een bepaalde regel van het document een naam, en daarom kan er een hyperlink worden gemaakt naar een ander deel van het document, of zelfs naar een ander document, die naar dat label leidt.

Afbeeldingen invoegen ( foto's) in een HTML-document wordt de volgende tag gebruikt ( gepresenteerd volledige beschrijving kenmerken van deze tag):

(lijst) zijn ontwikkeld in HTML, ongetwijfeld beïnvloed door het succes van teksteditors. Een lijst verschilt in de eerste plaats van gewone tekst doordat de gebruiker niet hoeft na te denken over het nummeren van de items: HTML neemt deze taak op zich. Als de lijst wordt aangevuld met nieuwe items of wordt ingekort, wordt de nummering automatisch voortgezet. In het geval van ongenummerde lijsten wordt elk item voorafgegaan door HTML met markeringen: cirkels, rechthoeken, ruiten en andere afbeeldingen. Uiteindelijk krijgt de lijst een fatsoenlijke vorm. Er zijn twee groepen van dergelijke tags: sommige definiëren algemeen beeld lijst ( en kunt u attributen opgeven), terwijl anderen de interne structuur ervan specificeren. U kunt standaardattributen in lijsten gebruiken. Er zijn verschillende soorten lijsten.

De meest voorkomende is de ongenummerde lijst ( ongeordende lijst). Het wordt hieronder weergegeven:

• Lijstitem 1
• Lijstitem 2
• Lijstitem 3

Het ul-element is een soort hoogtepunt van de lijst. Hiermee kunt u de ene lijst van de andere scheiden. Het li-element vertegenwoordigt elk van de items.

Ze zijn een van de meesten noodzakelijke middelen gegevens op een webpagina formatteren. Het belangrijkste gemak is dat de browser de hele tabel tekent. De grootte van het frame kan automatisch worden aangepast aan de grootte van het browservenster en uiteraard aan de grootte van de tekstregels en afbeeldingen in de tabelcellen. Naast al het andere kunt u met tabellen veel ontwerpproblemen oplossen: delen van een pagina ten opzichte van elkaar uitlijnen, afbeeldingen en tekst naast elkaar plaatsen, kleurontwerp beheren, enzovoort. Bij het maken van tabellen wordt het principe van nesten toegepast: binnen het hoofdtabelelement (TABLE) worden een aantal elementen gemaakt die rijen definiëren (TR), en binnen deze elementen zijn er elementen om elke cel in de rij te beschrijven (TD, E).

Om de structuur van een bestaande tabel te begrijpen of te ontwikkelen nieuwe tafel, is er één regel die bepaalt dat de volgorde van de elementen de tabel van boven naar beneden en van rechts naar links beschrijft. Als een TABLE-element bijvoorbeeld wordt gevolgd door een TR-element, geeft dit aan dat er een nieuwe tabelrij wordt gedefinieerd. Alles achter dit element wordt op één lijn geplaatst (van rechts naar links). Dit kan een reeks TD-elementen zijn ( cellen), een andere tafel enzovoort. Nadat het verschijnt nieuw onderdeel TR, de beschrijving van de volgende regel begint, etc. tot het einde van de tabel (tag).
De tabel kan horizontaal worden uitgelijnd met behulp van het align-attribuut:

• uitlijnen = "links" - links;
• align="center" - in het midden;
• align="right" - naar rechts.

De tabelbreedte kan exact worden ingesteld in pixels of als percentage van de paginabreedte in het browservenster. Bijvoorbeeld: breedte=400 of breedte=50%

Er worden twee attributen gebruikt om het uiterlijk van het frame te bepalen. Het feit is dat de browser een afbeelding van het frame maakt en de driedimensionaliteit ervan simuleert ( convex) met behulp van verschillen in verlichting van de gezichten

Bijna alle webmasters willen dat hun pagina's op de site staan moderne uitstraling, waren multifunctioneel, mooi en dynamisch. Met standaardmiddelen Dit is niet mogelijk in HTML, dus worden er verschillende tools gebruikt: applets, objecten, trapsgewijze stijlbladen, enzovoort. Maar het meest populaire en wijdverspreide type ( receptie) is het gebruik van scripts.

Een script is programmacode die als brontekst in de tekst van een pagina wordt opgenomen en door de browser wordt uitgevoerd wanneer de pagina wordt bekeken. Het script kan worden geschreven in JavaScript, ontwikkeld door Netscape, of in Visuele basis Script ( VBScript), ontwikkeld door Microsoft.

Met deze tag kunt u de tekst van het scriptprogramma scheiden van andere pagina-informatie. De SCRIPT-tag moet een taalkenmerk bevatten, dat de taal specificeert en de volgende waarden kan aannemen:

• javascript - code in JavaScript;
• vbscript - code in VBScript-taal.

Het type attribuut kan ook het taaltype aangeven, hoewel het gebruik ervan niet vereist is. Om niet alle regels te overtreden, kunt u de volgende definitie in het element plaatsen:

type="tekst/javascript"

Een van de coolste kenmerken van scripts is de mogelijkheid om de inhoud van een pagina te wijzigen als gevolg van de uitvoering van het programma. Maar dit is slechts een kenmerk, geen regel. Door te gebruiken attribuut uitstellen(die geen waarden accepteert), kunt u de browser “vertellen” dat dergelijke wijzigingen niet zullen worden aangebracht. In sommige gevallen zorgt dit ervoor dat de pagina sneller laadt.

Van de standaardattributen kunt u het charset attribuut gebruiken.

SCRIPT-tag ( of een aantal van dergelijke elementen) kan zich in het HEAD-element of in het BODY-element bevinden. Als het script zich binnen het BODY-element bevindt, is het ook mogelijk dat een browser die het SCRIPT-element niet ondersteunt, de programmacode als platte tekst beschouwt en op het scherm weergeeft. Om dit te voorkomen, wordt de scriptcode als commentaar ingevoerd:

-
-
-

Alle moderne browsers Herken deze techniek en negeer commentaartekens. Als u een opmerking in de tekst van het script moet invoeren, wordt hiervoor een andere notatie gebruikt: aan het begin van de regel worden twee schuine strepen // ingevoerd.
De scriptcode wordt uitgevoerd wanneer de pagina wordt geladen, d.w.z. wanneer de inhoud nog steeds zichtbaar is op het scherm. Hieronder ziet u een voorbeeld van het eenvoudigste scenario ( een bericht in het venster weergeven).

-
-
-
- Gewoon een script
-
- alert("Je hebt je eerste script geschreven!")
-
-
-
-

Dit eenvoudige pagina, maar het bevat een script van één regel. Met behulp van de waarschuwingsmethode wordt vóór het laden een bericht weergegeven. En het blijft hangen totdat de gebruiker op de knop OK klikt, het downloaden gaat niet verder.
Het is mogelijk dat de pagina wordt bekeken in een browser die geen scripting ondersteunt; hiervoor is het NOSCRIPT-element voorzien. Moderne programma's meningen negeren de inhoud ervan. Dit element kan op verschillende manieren worden gebruikt. Om te beginnen kunt u er als volgt een advertentie in weergeven: “ Uw browser kan het script dat nodig is om deze webpagina te bekijken niet uitvoeren!"Ten tweede kun je binnen het element een vereenvoudigde versie van de pagina ontwikkelen, zonder scripts. Ten derde kunt u een link naar een ander HTML-document maken. Het NOSCRIPT-element moet een eindtag hebben.

We hebben dus gekeken naar de basis van zo’n WEB-programmeertaal als HTML. Zelfs na het lezen van dit korte artikel heb je al een idee en zelfs de mogelijkheid om in deze taal te programmeren. Ik wens je veel succes!

Ik besloot meer aandacht te besteden aan beginners die kennis willen opdoen op het gebied van website bouwen. Mijn docent heeft mij daartoe aangespoord, omdat zij veel fouten maakte in de handleidingen voor laboratoriumwerk. Ik zou graag willen kijken naar de bron waaruit de educatieve informatie is gehaald, en daar een paar regels van mijn mening achterlaten. Maar daar gaat het nu niet om. In mijn eerste lezing zal ik het hebben over

De tag geeft aan dat de structuur van het HTML-document begint en eindigt. De meeste informatie voor de browser en zoekmachines wordt tussen de tags opgeslagen. De tags bevatten de titel van onze pagina. De tag geeft aan dat verdere informatie voor de gebruiker bedoeld is, en geeft uiteraard aan dat de informatie voor de gebruiker eindigt.

Laat me het nu een beetje uitleggen. Alle tags ( tag - hypertext-opmaaktaalelement) zijn onderverdeeld in twee typen: "enkel" en "sluitend". Bovendien worden tags omsloten door de volgende tekens< и >, zij onderscheiden een tag van een gewone tag html-tekst. Laten we eens kijken naar enkele van de eenvoudigste “enkele” tags:

— een tag die verantwoordelijk is voor het doorbreken naar een nieuwe regel op de plaats waar deze tag is geïnstalleerd. Laten we eens kijken naar de code die deze tag gebruikt.

Mijn eerste website Hallo allemaal!
En dit is mijn eerste site.

Het resultaat mag bekeken worden.

— een tag die een horizontale lijn tekent. Deze tag is van toepassing op blokelementen, de regel begint altijd op een nieuwe regel. Heeft 5 attributen:

• uitlijnen — Bepaalt de uitlijning van de lijn. Kan de waarde links, midden, rechts aannemen.
• kleur — Stelt de kleur van de lijn in.
• noshade - Tekent een lijn zonder 3D-effecten.
• grootte — Stelt de lijndikte in.
• breedte — Stelt de breedte van de lijn in.

Codeer met behulp van de tag:

Mijn eerste site Hallo allemaal! Dit is mijn eerste site.

Een visueel voorbeeld vindt u hier.

Een andere “enkele” tag is . Deze tag wordt gebruikt om informatie op te slaan die bedoeld is voor browsers en zoekmachines. Zoekmachines gebruiken metatags om sitebeschrijvingen, trefwoorden en andere gegevens te verkrijgen. Je mag een onbeperkt aantal metatags gebruiken, ze moeten allemaal tussen en liggen. De parameters van elke metatag hebben de vorm “name=value”, die wordt bepaald door de trefwoorden content , name of http-equiv . Omdat metatags zijn bedoeld voor machines, ze brengen geen visuele wijzigingen aan, dus ik zal alleen de broncode verstrekken:

Deze regel geeft aan dat de maker van de pagina denkt dat de pagina UTF-8-codering gebruikt. In HTML5 is alles eenvoudiger geworden; om de codering te specificeren, heb je alleen de volgende regel nodig:

Er zijn andere enkele tags (, ,
, , , , , , , , , , , , , ), maar ik zal je later aan hen voorstellen.

Laten we het nu hebben over het sluiten van tags. De naam ‘sluittag’ geeft aan dat de tag een verplichte afsluiting vereist. Dit wordt gedaan om het deel van de tekst dat door de tag wordt beïnvloed duidelijk te beperken.

Laten we voor een duidelijk voorbeeld eens kijken naar de tag, die wordt gebruikt om tekst te markeren; deze zet het lettertype vetgedrukt. Tags zijn grenzen die het tekstselectiegebied definiëren. Hier is de code waarin ze vergaten de tag op de laatste regel te sluiten:

Mijn eerste website Hallo allemaal! En dit is mijn eerste site.
Hallo allemaal! En dit is mijn eerste site.

Zoals u kunt zien, is er niets ingewikkelds, nu kunt u meerdere pagina's maken die aan elkaar zijn gekoppeld.

Er zijn verschillende manieren om tekst op een pagina te markeren. Dit kan gedaan worden met behulp van stijlen, of u kunt tags gebruiken. Wij zijn (voorlopig) geïnteresseerd in de tweede optie.

— stelt het lettertype in op vet.

— stelt de cursieve letterstijl in.

— voegt een onderstreping toe aan de tekst.

— bedoeld om de tekst te benadrukken. Browsers geven deze tekst cursief weer.

- streept de tekst door. Deze tag is verwijderd uit HTML5. Het wordt aanbevolen om deze in plaats daarvan te gebruiken

— geeft tekst weer als tekst met één spatie. Verwijderd uit HTML5.

— geeft het lettertype weer als superscript. Het lettertype verschijnt boven de tekstbasislijn en in een verkleind formaat.

— geeft het lettertype weer als subscript. De tekst wordt onder de basislijn van de overige tekens op de regel geplaatst en verkleind.

— bedoeld om de tekst te benadrukken. Browsers geven deze tekst vetgedrukt weer.

— verkleint de lettergrootte met één vergeleken met gewone tekst. In HTML wordt de lettergrootte gemeten in conventionele eenheden van 1 tot 7, de gemiddelde standaardtekstgrootte is 3. De tag verkleint de tekst met één conventionele eenheid. Geneste tags zijn toegestaan ​​en de lettergrootte wordt bij elk genest niveau 1 kleiner, maar kan niet kleiner zijn dan 1.

— vergroot de lettergrootte met één vergeleken met gewone tekst. In HTML wordt de lettergrootte gemeten in eenheden van 1 tot 7, de gemiddelde standaardtekstgrootte is 3. Als u dus een tag toevoegt, wordt de tekst met één eenheid vergroot. Geneste tags zijn toegestaan ​​en de lettergrootte wordt bij elk niveau groter.

— gebruikt om citaten in de tekst te markeren. De inhoud van de container wordt in de browser automatisch tussen aanhalingstekens weergegeven.

— ontworpen om lange citaten in een document te markeren. Tekst gemarkeerd met deze tag wordt traditioneel weergegeven als een uitgelijnd blok met opvulling aan de linker- en rechterkant (ongeveer 40 pixels), evenals opvulling aan de boven- en onderkant.

— definieert een blok vooraf opgemaakte tekst. Dergelijke tekst wordt meestal weergegeven in een lettertype met één regelafstand en met alle spaties tussen de woorden. Standaard wordt een willekeurig aantal spaties in de code op een rij als één weergegeven op de webpagina. Tag Hiermee kunt u deze functie omzeilen en tekst weergeven zoals vereist door de ontwikkelaar.

Het is een blokelement, begint altijd op een nieuwe regel, alinea's tekst die op elkaar volgen, worden gescheiden door opvulling. De hoeveelheid opvulling kan worden geregeld met behulp van stijlen. Als er geen afsluitende tag is, wordt aangenomen dat het einde van de alinea samenvalt met het begin van het volgende blokelement.

.... - HTML biedt zes kopjes op verschillende niveaus, die het relatieve belang van de sectie na de kop aangeven. De tag vertegenwoordigt dus de belangrijkste kop van het eerste niveau, en de tag dient om de kop van het zesde niveau aan te duiden en is de minst belangrijke. Standaard wordt de kop van het eerste niveau weergegeven in het grootste vetgedrukte lettertype, terwijl de kopteksten op volgende niveaus kleiner zijn. Tags ,..., verwijzen naar blokelementen, ze beginnen altijd op een nieuwe regel, en daarna worden andere elementen op de volgende regel weergegeven. Bovendien wordt er witruimte toegevoegd voor en na de titel. De tag heeft een uitlijningsattribuut, dat de uitlijning van de titel bepaalt. Het kan de volgende waarden aannemen: links - links uitgelijnde titel, midden - gecentreerd uitgelijnd, rechts - rechts uitgelijnd, uitvullen - uitgelijnd (zowel rechts als links); -uitgelijnd). Deze waarde werkt alleen voor kopteksten die langer zijn dan één regel.

— is een container voor het wijzigen van lettertypekenmerken, zoals grootte, kleur en lettertype. Hoewel deze tag nog steeds door alle browsers wordt ondersteund, wordt deze als verouderd beschouwd en wordt aanbevolen het gebruik ervan te verlaten ten gunste van stijlen. De tag heeft 3 attributen: kleur — stelt de tekstkleur in, gezicht — bepaalt het lettertype, grootte — stelt de lettergrootte in conventionele eenheden in.

— markeert de tekst als citaat of voetnoot bij ander materiaal. Deze markering is handig voor het wijzigen van de tekststijl via CSS, en wordt ook gebruikt om HTML-code in te delen structurele elementen. Browsers stellen tekst in een container doorgaans cursief in.

— geeft aan dat de reeks tekens een afkorting is. Door te gebruiken titel attribuut er wordt een decodering van de afkorting gegeven, waardoor mensen die er niet bekend mee zijn de afkorting kunnen begrijpen. Bovendien indexeren zoekmachines de volledige tekstversie van de afkorting, wat kan worden gebruikt om de ranking van het document te verbeteren.

Standaard wordt de tekst in de container onderstreept met een stippellijn.

Hieronder staat de code waarin ik al deze tags heb gebruikt:

Mijn eerste website

HTML en CSS zijn twee van de kerntechnologieën voor het bouwen van webpagina's. HTML zorgt voor de structuur van de pagina, CSS voor de (visuele en auditieve) lay-out, voor verschillende apparaten. Naast afbeeldingen en scripting vormen HTML en CSS de basis voor het bouwen van webpagina's en webapplicaties. Lees hieronder meer over:

XHTML is een variant van HTML dat de syntaxis van XML gebruikt, de Extensible Markup Language. XHTML heeft allemaal dezelfde elementen (voor alinea's, enz.) als de HTML-variant, maar de syntaxis is iets anders. Omdat XHTML een XML-toepassing is, kunt u er andere XML-tools mee gebruiken (zoals XSLT, een taal voor het transformeren van XML-inhoud).

CSS is de taal voor het beschrijven van de presentatie van webpagina's, inclusief kleuren, lay-out en lettertypen. Hiermee kunt u de presentatie aanpassen aan verschillende soorten apparaten, zoals grote schermen, kleine schermen of printers. CSS is onafhankelijk van HTML en kan worden gebruikt met elke op XML gebaseerde opmaaktaal. De scheiding tussen HTML en CSS maakt het eenvoudiger om sites te onderhouden, stijlbladen tussen pagina's te delen en pagina's aan te passen aan verschillende omgevingen. Dit wordt de scheiding van structuur (of: inhoud) van presentatie genoemd.

De lezing is afgelopen, ik hoop dat de opgedane kennis nuttig voor je zal zijn! In de volgende lezing zal ik je vertellen wat de tag opslaat, we zullen leren hoe we allerlei manipulaties met afbeeldingen kunnen uitvoeren en kennis kunnen maken met tabellen.

Bij het schrijven van dit artikel is de beschrijving van enkele tags hier vandaan gehaald

Hallo allemaal!!! Ik ben erg blij dat je hebt besloten om de hoogten van de basisprincipes van HTML en dit te veroveren juiste keuze. Voordat u uw eerste website maakt, moet u immers de basisprincipes van HTML kennen. Bovendien zul je op een website meer dan eens met HTML-codering te maken krijgen. Ik raad je ten zeerste aan de HTML-tutorials voor beginners op mijn blog te bekijken, en ik garandeer dat je na het voltooien van deze cursus gemakkelijk zelf een webpagina of zelfs een website kunt maken.

Laten we beginnen! Laten we eerst eens kijken
HTML – (uit het Engels. H ypert ext M arkup-taal) is een hypertext-opmaaktaal. Het werd voor het eerst ontwikkeld door de Britse wetenschapper Tim Berners-Lee in 1991-1992. HTML was alleen bedoeld om tekst, afbeeldingen en tabellen op webpagina's te markeren. Nu kunnen programmeertalen zoals JavaScript en VBScript ook in een HTML-document worden ingevoegd.

HTML is geen programmeertaal; het is alleen bedoeld voor het markeren van tekstdocumenten.

Om HTML te leren, heeft u alleen een browser en een standaardkladblok of .
Om Standaard Kladblok te openen, doet u het volgende op uw computer: “Start” => “Programma’s” => “Accessoires” => “Kladblok” .

Als u hebt gehoord over programma's die het schrijven van HTML-code vereenvoudigen (Microsoft FrontPage, Adobe Dreamweaver), dan raad ik af om ze te gebruiken in dit stadium opleiding. Oefen uw vaardigheden in een standaard notitieblok of in de Notepad++ teksteditor, en als u deze cursus voltooit, kunt u programma's gebruiken om dingen te versnellen. Abonneer u op mijn blogupdates en lees hoe u Microsoft FrontPage en Adobe Dreamweaver gebruikt.

Voor een beter begrip heb ik een voorbeeld voorbereid. Kijk goed naar de afbeelding:

Uitleg.

1). Elk HTML-document begint met deze regel:

Met deze regel vertellen we de browser dat ons HTML-document voldoet aan de internationale specificatie versie 4.01. Dankzij deze lijn ziet uw pagina er hetzelfde uit.
Het is niet nodig om deze regel te onthouden; Dit is alleen maar zodat je weet wat het is.

2).

en is het begin en einde van het document.

3).
en - de kop van het document. Vaak worden hier extra servicetags ingevoegd; een van deze tags is . In deze fase van de training leert u over andere servicetags; deze informatie is voldoende.

4).

en - documenttitel.
Deze header wordt weergegeven in de browser:

bij zoeken ben ik index of in Google.

5).
en - de hoofdtekst van het document.< >Hier vindt u de inhoud van het document, bijvoorbeeld tekst, afbeeldingen, tabellen, muziek, films, enz. In de volgende lessen leert u meer over het invoegen van muziek, tekst en afbeeldingen in de hoofdtekst van het document. , , , ,
,

Opmerking:
Je zult vaak het woord ‘tag’ lezen en horen.

Een tag is alles wat tussen de haakjes staat

. Bijvoorbeeld:
etc. - dit zijn allemaal tags.

Tags zijn niet zichtbaar bij het bekijken van de pagina in een browser, maar alles wat niet tussen haakjes staat, wordt tijdens het bekijken in de browser weergegeven.

Er zijn veel tags en ze hebben verschillende doeleinden.
.

Er zijn tags die gesloten moeten worden. Bijvoorbeeld,

open het etiket

...

en zorg ervoor dat je de tag sluit

En er zijn enkele tags, bijvoorbeeld deze

...

Een tag is een soort container die tekst, afbeeldingen en andere tags kan bevatten...
○ Let op de juiste volgorde van openings- en sluitingstags:

De tag die we als eerste hebben geopend, wordt als laatste gesloten, de tweede is de voorlaatste, enz.
Dit is hoe de voltooide standaard verplichte HTML-code voor een webpagina eruit ziet.

Paginatitel Paginatekst, tabellen, afbeeldingen, muziek en video.

Wees niet ontmoedigd als u weinig of bijna niets begrijpt van alles wat hierboven is geschreven. In de tweede les wordt er nog meer geoefend en kun je alles zelf handmatig schrijven en zien hoe HTML werkt.

Ga door naar de volgende les

HTML-basisprincipes voor beginners, wat elke beginnende webmaster of blogger nu zou moeten weten. Als je wilt leren hoe je basiswebsites kunt maken, de code zelf wilt begrijpen, wilt weten wat er achter zit en wat er moet komen, dan is het simpelweg onmogelijk om dit te doen zonder kennis van de basisprincipes van de HTML-taal. Op mijn blog zal ik een hele reeks artikelen hebben die ik van A tot Z aan dit onderwerp zal wijden, ik zal elke tag beschrijven die in het document aanwezig is, wat het betekent en hoe je het correct kunt gebruiken.

Als je de meest fundamentele dingen niet weet, is je pad gesloten. Ik ben van mening dat iedereen die besluit websites te ontwikkelen en te maken de basisprincipes moet kennen en begrijpen, waar de site zelf uit bestaat, hoe deze werkt en wat er in de code zelf gebeurt.

Natuurlijk zijn er nogal wat programmeertalen, ze zijn allemaal op hun eigen manier complex, maar er zijn er een paar die je absoluut moet kennen. Als je een brief prachtig wilt ontwerpen om per post te verzenden, heb je je eigen VKontakte-groep, een groep op andere sociale netwerken, hetzelfde YouTube-kanaal, je moet sleutelen aan de code op een van de site-engines, basisconcepten je moet het gewoon weten.

Ik heb slechts een paar voorbeelden gegeven, sterker nog, nu deze kennis steeds vaker op internet wordt gebruikt. Ik ben meer een beoefenaar dan een theoreticus, dus in mijn artikelen in deze sectie zal ik je stap voor stap mijn voorbeelden laten zien van hoe en wat ik deed. Ik zal zowel voorbeeldpagina's als hele sites plaatsen.

Een HTML-document is het eenvoudigste tekstdocument, een taggingtaal die je dagelijks tegenkomt op internet. Tags beschrijven de structuur van een document. Tags zijn opgemaakt als hoekig< >haakjes, waarbinnen de naam van de tag is geschreven. De browser kijkt naar de structuur van het document, bouwt het op en geeft het weer volgens de instructies op uw monitor, als u uiteraard alles correct hebt gedaan.

Dit hele proces begint voordat je zelfs maar de voltooide foto ziet. Browsers verwerken een document opeenvolgend, van begin tot eind. Inclusief alles wat op de pagina moet staan. Tabellen, afbeeldingen, scripts enzovoort, behalve dat dit CSS-stijlen omvat.

Wat is html - als je kijkt naar wat Wikipedia schrijft - (HyperText Markup Language) hypertext opmaaktaal voor documenten. De meeste pagina's op internet bevatten pagina-opmaak in deze taal. Deze taal wordt door browsers geïnterpreteerd en de resulterende opgemaakte tekst wordt weergegeven op uw computermonitor of mobiele apparaat.

Deze taal is van nature heel gemakkelijk en toegankelijk om te leren. Iedereen kan de basis ervan leren en begrijpen. Om een ​​dergelijke taal te gebruiken, moet u descriptors kennen en gebruiken, ook wel tags genoemd. Met behulp van tags wordt een document gemaakt.

Waaruit moet de structuur van het document bestaan, welke tags moeten aanwezig zijn. Laten we alles bekijken met een klein voorbeeld. Ik schreef wat tekst in MS Office en liet het in deze screenshot zien.

Om deze tekst in de browser weer te geven op dezelfde manier als deze in het document is geschreven, moet u er pagina-opmaak aan toevoegen, die enkele tags bevat. Kijk er eerst naar, dan zal ik iedereen beschrijven die waarvoor verantwoordelijk is.

Welkom op mijn blog, je volgt nu een les over HTML Basics. Als je dit artikel leuk vond, kun je je op deze blog abonneren om nieuwe artikelen in je e-mailinbox te ontvangen.

Uit welke tags bestaat een HTML-document, wat bevat het en waar moet het allemaal worden opgeschreven?

Elke code bestaat uit tekens die tussen punthaken worden geplaatst. Dit worden allemaal elementen genoemd. Alle elementen bestaan ​​meestal uit twee tags, openen en sluiten. Ik raad u aan om eerst goed naar de tags te kijken; als u er een mist en deze niet sluit, moet u grote delen van de code herzien om de fout te vinden.

Er waren gevallen waarin het meer dan een dag duurde, iemand contact opneemt en om hulp vraagt, hij kan geen fout op zijn site vinden, dus kijk altijd heel goed naar wat en waar je schrijft. Laten we dit voorbeeld nu gebruiken om naar elk element van de code te kijken, wat erin geschreven staat, wat het betekent en wat er uiteindelijk gebeurt.

De meeste tags zijn gekoppeld, waaronder een openingstag en een sluitingstag. Naast dergelijke tags zijn er ook enkele tags. Tags kunnen samengaan met andere en dus in elkaar nestelen. Geef tekst bijvoorbeeld in één keer vet en cursief weer.

Tekst

Laat me u er nogmaals aan herinneren dat u de regels in het document moet volgen. Dit is hoe de browser begrijpt wat er op de pagina staat, de volgorde, de inhoud, enzovoort.

Een tag is een onderdeel dat de webbrowser vertelt een bepaalde taak uit te voeren. Bijvoorbeeld de aanwezigheid van een alinea, tabel, formulier of afbeelding.

Attribuut - wijzigt de tag. U kunt bijvoorbeeld een alinea gecentreerd of rechts uitgelijnd uitlijnen, ook de locatie van de afbeelding op de pagina instellen, enzovoort.

Sluit ALTIJD tags. Als u ze opent, zorg er dan voor dat u ze sluit. Anders treedt er een fout op en wordt uw document niet correct op de pagina weergegeven. Er zijn ook uitzonderingen, die niet mogen worden vergeten.

Het is duidelijk noodzakelijk om te begrijpen dat er een documenttitel en de inhoud ervan zijn. De titel is alles wat in de tag staat. Documenttekst (), de hoofdtekst van het document bevat de volledige inhoud van de pagina. Als het nodig is om een ​​stuk code voor jezelf achter te laten en daarbij deze tags in opmerkingen te plaatsen, wordt de tag hiervoor gebruikt. Alles wat zich in zo’n tag bevindt, dient als commentaar en wordt niet door browsers waargenomen.

Laten we beginnen met de allereerste. Aan het begin van het document opende ik een tag en aan het einde sloot ik deze. Deze code is in absoluut elk document aanwezig; het vertelt de browser dat alles wat tussen deze tags wordt geplaatst HTML-code is. Het is de root van het document zelf; alles wat vervolgens achter deze tag aanwezig is, wordt niet langer opgenomen in het document en wordt niet waargenomen door browsers. Helemaal aan het begin van het document wordt de tag geopend en helemaal aan het einde moet deze worden gesloten.

Het volledige gedeelte van deze tag bevat alle technische informatie van het document. Net als bij de vorige tag moet de kop ook aan het einde worden geopend en gesloten. Deze informatie omvat de paginatitel, beschrijving, trefwoorden van zoekmachines en codering. Over de codering iets hieronder.

Inhoud

Deze tag zit in het hoofd en moet binnenin worden geschreven hoofd label. Deze title-tag is verplicht en moet aanwezig zijn in elk HTML-document. Daarnaast verschijnt het als de titel van het browservenster. De lengte van een dergelijke header mag niet langer zijn dan 60 tekens. De tekst van een dergelijke header moet de meest volledige informatie bevatten die kenmerkend is voor de inhoud van de pagina.

Als u 'Hallo wereld' in de koptekst heeft geschreven, is dit de informatie die op de pagina moet worden weergegeven en geen andere. Je moet mensen en zoekmachines niet misleiden, dat vinden ze niet leuk, en daarmee maak je het nog erger voor jezelf. De informatie in deze tag moet relevant zijn voor de inhoud van uw pagina.

Na de verplichte title-tag is er een optionele, maar ook behoorlijk veel belangrijk etiket meta. Deze tag is enkelvoudig. Met deze tag stelt u een beschrijving in voor de pagina (description) en de trefwoorden (keywords).

Bovendien kan de metatag gegevens bevatten over de auteur van de pagina en andere metadata-eigenschappen. U kunt voorkomen dat de hele pagina wordt geïndexeerd door zoekmachines. Stel in dat de pagina automatisch wordt vernieuwd na 20 seconden of na 5 seconden, gevolgd door een overgang naar een andere pagina.

Er kunnen meerdere van dergelijke meta-elementen zijn, omdat ze totaal verschillende informatie kunnen bevatten. Andere gebruikers zien niet al uw beschrijvingen wanneer ze de pagina in de browser openen; dit blijft allemaal aan het zicht onttrokken.

De style-tag kan ook worden gebruikt om stijlen op de pagina in te stellen. Als je veel verschillende css-stijlen gebruikt, dan is het raadzaam om deze in een apart bestand in te stellen. Als u er meerdere wilt opgeven, kunt u dit allemaal rechtstreeks in het HTML-document opgeven.

.base ( breedte: 100px; achtergrondkleur: #000; hoogte: 150px; kleur: #fff; )

Of voeg stijlen specifiek toe aan één tag; u moet hiervoor een stijlelement toevoegen in de tag zelf. Deze tag moet worden gebruikt in een container die stijlen voor de pagina instelt. U kunt meerdere van dergelijke tags gebruiken, dit is geen fout.

Een beetje vergelijkbaar met de vorige tag, kunt u met de linktag stijlen instellen voor een document dat zich in een ander bestand bevindt. Met andere woorden, u kunt verbinding maken met een bestaand document volle tafel css-stijlen, die uit veel eigenschappen bestaat. Zo verkleint u de grootte van het document, waardoor het uiteindelijk sneller wordt geladen en geopend op een computer of mobiel apparaat met lage internetsnelheden.

U kunt meer dan één bestand verbinden, er zijn geen beperkingen. Het is niet nodig om zo'n tag te sluiten. Als alles goed is gedaan, worden specifieke stijlen uit een apart bestand in uw document geladen. Deze tag kan worden toegevoegd aan de basisprincipes van HTML en het bestaan ​​ervan niet vergeten. Het resultaat is een foto als deze:

Met behulp van de scripttag kunt u verschillende scenario's (scripts) aan een document koppelen. De aanwezigheid van de sluittag is vereist. Het script zelf kan zich aan het begin van het document, binnenin of aan het einde bevinden.

Vertelt de browser dat alles wat tussen deze tags wordt geplaatst, in uw browservenster moet verschijnen. Hier zijn de belangrijkste tags die in absoluut elk document aanwezig kunnen zijn. De body-tag fungeert als hoofdtekst van de pagina en bevat alle inhoud. Het is raadzaam om deze tag te openen en deze aan het einde van het document te sluiten.

Laten we verder gaan, we zien een tag die op dezelfde manier opent en sluit. Deze tag geeft de hoofdtitel van de tekst aan; in de meeste gevallen staat onder de H1-kop de paginatitel. In feite zijn er slechts zes gegevensrubrieken. . Ze worden ook gebruikt in SEO, maar dit is een iets ander onderwerp. Ik zal hiervoor zeker één artikel uitlichten en geven gedetailleerde beschrijving

voor hen kunt u zich abonneren op blogupdates, zodat u niets mist. De aanwezigheid van dergelijke koppen in het artikel zal helpen belangrijke rol

wanneer u verdergaat op de pagina. Bovendien geeft het gebruik ervan u een duidelijke paginastructuur, de titel, subkoppen, highlights, subparagrafen, enzovoort. Gebruik ze altijd en breng ze in de praktijk. Op veel CMS, zoals WordPress, zie je bij het schrijven van tekst “kop 1”, “kop 2”, “kop 3” enzovoort. Zij zijn degenen die verantwoordelijk zijn voor h1, h2 en h3.

Als u hoofdtekst uit een nieuwe alinea schrijft, schrijft u een tag

. Het markeren van een paragraaf in HTML komt overeen met het aanmaken van een nieuwe paragraaf in een MS Word-document. Ik heb niets nieuws aan het document toegevoegd. Maar dit is niet alles wat in een HTML-document aanwezig zou moeten zijn. Laten we naar een ander voorbeeld kijken, de beschrijving komt iets later.

HTML-document Deze tekst zal vetgedrukt zijn,

Elk document bevat een kop- en titelelement. De eerste, die onmiddellijk na de eerste tag komt. Deze tag bevat alle informatie over de pagina en bevat ook het element. Titel – informatie over de titel van de pagina, met andere woorden de titel van de pagina, de naam ervan. Het staat in de titel waar je naar verwijst juiste naam de pagina waarop de gebruiker via een zoekmachine naar u zal zoeken, is een heel belangrijk punt. Beide elementen moeten open en ook gesloten zijn. Elk element wordt afgesloten met een “/”-teken. Het resultaat is een foto als deze.

Kop- en pagina-inhoud

Zoals je kunt zien, is er niets ingewikkelds. Hier zijn de meest elementaire tags die in elk HTML-document aanwezig zouden moeten zijn. Vergeet niet ze allemaal te sluiten, anders kan de browser niet het volledige beeld van de code waarnemen. Dit moet je altijd weten en onthouden. Vervolgens begint u met het invoegen van tekst, afbeeldingen, video's, enzovoort. Maar dit zal al in andere artikelen staan.

Gebruik het Notepad++-programma om met de code te werken. Het is gratis en het is niet moeilijk om het op internet te vinden. Zeer handig voor het begrijpen van elke code; het geeft ook handig de openings- en sluitingstags weer. We ondersteunen de syntaxis van meer dan 40 programmeertalen. Precies wat je nodig hebt om de basisprincipes van HTML te leren.

Kladblok is in alle opzichten superieur aan een gewoon notitieblok. Voor maximaal gemak, eenvoud en leervermogen, moet deze editor in eerste instantie op uw computer worden geïnstalleerd. Het belangrijkste voordeel en gemak is dat de Notepad++ editor hints geeft bij het schrijven van code, waardoor je veel sneller en kwalitatief beter werkt.

Elk document moet ook het volgende doctype-element bevatten. Waarom is het nodig en wat moet er in zitten. Meestal zijn mensen niet zo enthousiast over deze regels, ze kopiëren ze naar hun documenten en werken rustig. Deze elementen vertellen de browser welke versie van HTML in het document wordt gebruikt, wat de paginabeschrijving is, welke codering wordt gebruikt, welke trefwoorden zijn opgenomen, wie de auteur is en hoe de pagina heet.

Ze worden meestal helemaal aan het begin geplaatst. Er zijn verschillende opties en ze verschillen allemaal van elkaar, ik zal één voorbeeld schrijven dat het meest wordt gebruikt. Deze blanco kan worden gebruikt als kant-en-klaar sjabloon. Het volgende zal zijn duidelijke beschrijving elke regel, hier zouden geen problemen mee moeten zijn.

Kort in duidelijke taal over de basisprincipes van html: Deze regel vertelt de browser dat dit document is XHTML versie 1.0, gebruikt Engelse taal en al deze rotzooi bevindt zich langs naar dit adres. Vervolgens geven we in de metatag aan welke codering wordt gebruikt. De meest gebruikte versie is Windows 1251.

Beschrijving - het onderwerp SEO wordt aangestipt, een van de drie hoofdtags die in absoluut elk document aanwezig moet zijn, geeft de beschrijving van de pagina aan; Wat er op deze pagina staat, een korte beschrijving, niet meer dan twee zinnen. trefwoorden taggen, het onderwerp SEO komt ook aan bod, deze tag is vereist. Het bevat trefwoorden die internetgebruikers gebruiken om u via zoekmachines te vinden.

IN titel tag komt de naam van het document zelf, de titel, die we in de browser zien. Waarschijnlijk de belangrijkste tag in het hele document, die de grootste impact heeft op de promotie van de pagina. In het artikel over het toevoegen en de registratie is bezig beschrijving van deze tag in meer detail.

Wat je moet onthouden uit deze les over de basisprincipes van html:

Alle hoofdpagina's moeten altijd de naam index. Dit is hoe het wordt geaccepteerd en iedereen is eraan gewend, ongeacht de bestandsextensie, het kan html of php zijn. Zo wordt het altijd genoemd.

Bekijk een video over de basisprincipes van HTML van Webformyself.

Hypertext-opmaaktaal, basiselementen en structuur. Dit alles en nog veel meer zal ik proberen te beschrijven op mijn blog. Allereerst zal het geschreven zijn voor beginners nuttige informatie, wordt een codevoorbeeld gegeven en de mogelijkheid om het voorbeeld zelf samen met de voltooide pagina te downloaden.

Dit artikel pretendeert niet zo te zijn uitgebreide gids Opmaaktaal voor HTML-documenten. Het behandelt de basisprincipes van HTML - basisprincipes, concepten en definities van deze technologie, als u deze onder de knie heeft, kunt u gemakkelijk verder gaan met het bestuderen van HTML-codering.

Om de les te bestuderen, downloadt u het archief met de benodigde bestanden.

HTML is een opmaaktaal voor documenten. De juiste uitspraak is HTT.

Heeft u waarschijnlijk ooit in de Word-documenteditor of soortgelijke kantoortoepassingen gewerkt? U weet waarschijnlijk dat dit type editor uitgebreide mogelijkheden heeft voor het bewerken van tekst, het rangschikken van elementen, het invoegen van afbeeldingen, enz.

Waarom, zou je je kunnen afvragen, over tekstverwerkers schrijven in een artikel over HTML? Maar waarom. Als je het door hebt, wat is dan een kantoorredacteur? Dit is een applicatie voor het bewerken en weergeven van documenten.

Het sleutelwoord hier is document. Dat wil zeggen, we maken, bewerken en bekijken een document in een programma, in dit geval - in kantoorredacteur. Als we zo'n document openen in een eenvoudige teksteditor, bijvoorbeeld Kladblok, zullen we veel vreemde symbolen en tekens zien. Deze puinhoop van symbolen is onbegrijpelijk voor de mensheid, maar begrijpelijk voor computers. Dankzij dit interne taal, krijgt het Word-document een bepaalde structuur en uiterlijk in de editor zelf, en het document verschijnt voor ons in al zijn glorie met opgemaakte tekst en afbeeldingen op hun plaats.

HTML is een documentopmaaktaal voor de browser. Woord is hier de browser en het document is de HTML-pagina. Dit is de basis van HTML-technologie, waarvan het begrip nodig is om de opmaaktaal van webdocumenten niet te verwarren met programmeertalen. met met behulp van HTML Wij markering, waar op de pagina het element, de afbeelding of de tekst wordt weergegeven en in welke volgorde ze naast elkaar verschijnen.

Ja, het eenvoudig typen en opmaken van tekst in kantoortoepassingen heeft niets met programmeren te maken. Maar de oplettende lezer zal een belangrijk detail opmerken: in een tekstverwerker typen, bewerken en formatteren we tekst en afbeeldingen met behulp van visuele knoppen en menu's, maar waarom wordt HTML-code met de hand geschreven? Waarom zoveel technische details leren over het schrijven van markeringen voor een document?

Er zijn zelfs veel editors waarmee u HTML-pagina's kunt maken en bewerken, vergelijkbaar met Word. Dat wil zeggen dat de bron-HTML-code voor ons verborgen is en dat we er niet op ingaan.

Een soort Word voor HTML. Zo een visuele editors heten:

Ik noem ze ‘wuzivoogies’. Hoewel dit fonetisch onjuist is, demonstreert het duidelijk de zinloosheid van deze uitvinding. Beginners gebruiken dergelijke editors heel vaak om hun eerste websites te maken. Dit is natuurlijk handig: u hoeft zich niet te verdiepen in de studie van tags, ontwerpstijlen en andere, op het eerste gezicht onaangename en complexe dingen. De editor zelf zet onze acties automatisch om in HTML-code.

Maar zoals ze zeggen: er gebeurt niets zomaar. Meer specifiek heeft deze aanpak zeer ernstige nadelen. Wat weerhoudt iedereen ervan om visuele editors te gebruiken om HTML-pagina's te ontwerpen? Feit is dat op deze manier gevormde pagina's meestal veel onnodige code en veel fouten bevatten vanuit semantisch oogpunt. Nu zijn er uiteraard geen problemen mee snel internet verbinding en het verschil in paginagrootte van 400 kb en 100 kb is niet significant voor de snelheid, maar geoptimaliseerde en correct geschreven HTML-code elimineert veel problemen en biedt veel voordelen, namelijk:

• Competente HTML-code heeft een positief effect op zoekmachine optimalisatie, scansnelheid zoekrobot plaats. De kilobytes aan code die door de vuzivuga worden gegenereerd, zijn niet acceptabel en zelfs schadelijk;
• De HTML-code die door de WYSIWYG-editor wordt gegenereerd, bevat veel semantische fouten. Dat wil zeggen dat de tags die door een dergelijke editor worden gegenereerd, voor andere doeleinden worden gebruikt, waar ze bijvoorbeeld voor lijsten moeten worden gebruikt
  , genereert de editor nog een tag die we niet nodig hebben. Hangt natuurlijk af van de editor, maar hier bedoelen we complexe oplossingen voor het maken van websites niet eenvoudig bewerken tekst in een tekstgebied met WYSIWYG.
  • Er worden veel onnodige tags gegenereerd en de documentstructuur raakt opgeblazen. Laten we zeggen dat je een element in zo'n programma eerst naar rechts, dan naar links en dan naar het midden verplaatst - elke actie laat een spoor achter in de bron-HTML-code. Een editor is een programma en kan niet weten wat je precies wilt krijgen. Het resultaat is dat het een enorme hoeveelheid code genereert, waarbij met alles rekening wordt gehouden mogelijke opties documentgedrag in de browser.
  • Meestal redacteuren voor visueel ontwerp HTML-code veroudert snel. En door het gebrek aan interesse van professionals krijgen ze over het algemeen geen ondersteuning en stoppen ze met ontwikkelen. En HTML evolueert. Alles ontwikkelt zich behalve de wuzivoogi. Dienovereenkomstig kunnen ze geen correcte en moderne code genereren die nieuwe functies en oplossingen zou gebruiken.
  • Het ondersteunen en ontwikkelen van dergelijke projecten is een hemelse straf. Over het gebruik van patronen en hergebruiken Er kan helemaal geen sprake zijn van een code van meningsuiting.

  We zullen HTML dus alleen met pennen schrijven. Adequate tools voor visuele HTML-bewerking zijn nog niet uitgevonden en het is onwaarschijnlijk dat ze zullen verschijnen. De HTML-opmaaktaal is gemakkelijk te leren en te begrijpen, en er zijn veel hulpmiddelen voor het automatiseren van het schrijven van HTML-code, maar daarover meer in andere lessen.

  Na wat aan de WYSIWYG-editor te hebben gesleuteld, verlaten jonge HTML-goeroes deze nutteloze taak en gaan verder.

  HTML-documentstructuur

  Voor lessen raad ik aan de Sublime Text-editor te downloaden en te installeren. Ik raad ten zeerste aan om het ingebouwde Windows Kladblok voor HTML-indeling niet te gebruiken als je je psyche niet wilt breken in de vroege stadia van het leren van HTML.

  We besloten dat we de HTML-documentcode handmatig zouden schrijven, dat wil zeggen door deze te zetten. HTML-lay-out is het proces waarbij een HTML-document wordt gemaakt. In de gewone mensen en geïnformeerde kringen is het slechts lay-out. Elk document heeft een structuur en bepaalde constructieregels. Uit welke elementen bestaat de code, wat is de structuur van HTML?

  Laten we een eerste sjabloon op de computer maken: het index.html-bestand, deze openen met een editor en de volgende code erin plakken:

  Koptekst Documenttekst Houd er rekening mee dat HTML-documenten de extensie .html hebben.

  Dus op volgorde van het voorbeeld.

  - documenttype (doctype)

  Deze constructie wordt altijd aan het begin van het document aangegeven, zodat de browser correct “begrijpt” welke versie van HTML wordt gebruikt bij het samenstellen van het document.

  Vanwege het feit dat HTML voortdurend evolueert, heeft het verschillende versies, zoals elk softwareproduct. De huidige versie van HTML is de vijfde en het doctype dat in het voorbeeld wordt gegeven, is actueel.

  In principe heeft het geen zin om dieper in te gaan op de studie van documenttypen, omdat dit ontwerp met de release van HTML5 een standaard is geworden. Voeg het gewoon aan het begin van het document in elke keer dat u begint met het maken van een website-indeling.

  - begin van het document

  De eerste tag die we zien na het doctype is .

  Een HTML-tag is een structurele eenheid van HTML-documentopmaak. HTML-code bestaat uit bouwstenen die tags worden genoemd. Elke tag heeft zijn eigen functie, en het leren van de HTML-opmaaktaal gaat uiteindelijk over het leren van de tags en hun eigenschappen in een document.

  Ik zou willen opmerken dat het leren van HTML niet zo moeilijk is als het op het eerste gezicht lijkt. Het leren van de tags die worden gebruikt bij documentopmaak is niet zo eenvoudig. zware belasting op de hersenen.

  Documentopmaak begint dus met een tag en eindigt met een afsluitende tag. Elke tag die andere tags of elementen bevat, moet worden afgesloten met een afsluitende tag. Bijvoorbeeld, , , enz.

  De tag is verplicht omdat deze de volledige structuur van het document bevat en een omhulsel is voor andere elementen.

  Label

  Vervolgens zien we de tag, die andere elementen bevat die ons nog niet duidelijk zijn. Bevat andere elementen - dit betekent dat de elementen of tags zich tussen de openings- en sluitingstags van het construct bevinden:

  inhoud of andere tags

  Het doel van de tag is om de meta-informatie van een HTML-document op te slaan, dat wil zeggen informatie die niet in het document zelf wordt weergegeven, maar die wel belangrijk is en grotendeels bepaalt hoe het document eruit zal zien en zich zal gedragen.
  Deze tag is vereist in het document.

  Tag - documenttitel Titel

  Titel is een vereiste tag die tekstuele meta-informatie bevat die in de browser- of tabbladtitel verschijnt. De tag moet in de . Ook wordt de inhoud van deze tag door zoekmachines gebruikt om het document in de zoekresultaten weer te geven.

  Metatag

  Metatag is een gespecialiseerde tag die is ontworpen om gestructureerde gegevens over een pagina te verstrekken. Metatags worden het meest gebruikt in de . Metatags zijn optioneel in HTML-structuur document.

  Favicon

  Voegt een bestand met een favicon-afbeelding toe aan het document. Favicon is een miniatuurpictogram dat naast de documenttitel op een browsertabblad wordt weergegeven. Een favicon is een grafisch bestand van 16 x 16 (of 32 x 32) pixels dat verschillende formaten, zoals png, jpg, ico, gif. Traditioneel wordt het ico-formaat gebruikt. Geanimeerde favicons zijn GIF-bestanden met animatie. U kunt bijvoorbeeld een geanimeerde favicon zien op VKontakte wanneer er een nieuw bericht binnenkomt.

  CSS-documentstijlen

  Verbindt met CSS-document HTML-stijlbestand.

  CSS- trapsgewijs HTML-documentstijlen. Elke tag die zich in de tag bevindt, heeft een reeks eigenschappen, zoals kleur, breedte, hoogte en positie ten opzichte van andere elementen. Al deze eigenschappen zijn CSS-stijlen die naar een extern bestand kunnen worden geëxporteerd. Het ontwerp verbindt externe bestanden met het HTML-document, inclusief CSS-stijlen.

  Opmerking: De href-eigenschap van een constructie specificeert de locatie van het externe bestand. In ons voorbeeld is het bestand stijl.css En favicon.ico, bevinden zich in dezelfde map als het bestand index.html.

  Label

  heeft geen afsluitende tag.

  De tag bevat code of een link naar een JavaScript-bestand en wordt meestal binnen een tag gebruikt, hoewel de Page Speed ​​Optimization-tool van Google aanbeveelt deze tag aan het einde van een document te gebruiken, vóór de afsluitende tag. In ons voorbeeld is een extern bestand aangesloten, dat zich in dezelfde map bevindt als het hoofdbestand index.html.

  Dus vrienden, we hebben gekeken naar de belangrijkste elementen die het vaakst in de tag worden gebruikt. Naast deze elementen zijn er nog een aantal andere die specifieker en optioneel zijn.

  Lichaam oftewel lichaam

  Dit is waar alle leuke en visueel tastbare dingen beginnen in de HTML-indeling van een document.

  Laten we direct verder gaan met de lay-out van het zichtbare deel van de pagina. Alles wat we in de tag schrijven en opmaken, wordt in de browser weergegeven. Laten we ons bestand openen index.html in de browser om duidelijk te zien wat we in de editor doen.

  De tag kan alle HTML-tags bevatten die nodig zijn om het document te ontwerpen en de functionaliteit (vorm) ervan te bieden. Ik zal een tabel geven met de meest gebruikte tags en ze allemaal kort beschrijven. U kunt de voorbeelden in de editor onmiddellijk uitvoeren.

  Label	Beschrijving
  	Een tag voor het maken van koppelingen in een document. Voorbeeld: linktekst Het href attribuut specificeert het document waarnaar de link zal leiden.
  ,	Maakt tekst cursief of vetgedrukt (benadrukt). Voorbeeld: cursieve tekst vetgedrukte (benadrukte) tekst
  , , , , ,	Documentkoppen. Er zijn in totaal 6 niveaus van kopjes, maar in de praktijk worden alleen h1 tot en met h4 gebruikt. Er mag slechts één kop in het document staan, gemarkeerd met de h1-tag, als de hoofdkop van het document. Voorbeelden: Kop van het eerste niveau Kop van het tweede niveau Kop van het derde niveau... enz.
  ,	Documentlijsten. Het is een genummerde lijst of een lijst met opsommingstekens. Het element van zo'n lijst is de tag Voorbeelden: Opsommingsteken 1 Opsommingsteken 2 Genummerd lijstitem 1 Genummerd lijstitem 2
  	Paragraaf. Deze tag definieert een alinea met tekst, gescheiden van andere alinea's. Het is ten zeerste aan te raden deze tag te sluiten. Voorbeeld: Het uiterlijk van HTML-opmaak wordt grotendeels bepaald door CSS-stijlen. Sommige webmasters kiezen er echter voor om in de beginfase van een project geen stijlen te gebruiken.
  	Afbeelding. Met deze tag kunt u een afbeelding in de HTML-opmaak invoegen. Zorg ervoor dat u alternatieve tekst voor alle afbeeldingen opneemt: het 'alt'-attribuut. Deze tag is zelfsluitend. Voorbeeld:
  + +	Formulieren en invoerelementen. Formulieren zijn ontworpen om informatie in het systeem op de server in te voeren. Een soort feedback tussen de gebruiker en de site. Formulieren worden bijvoorbeeld gebruikt wanneer u een bericht naar de server moet sturen. Bovendien kunnen formulieren andere functies vervullen, maar de hoofdtaak is het verzenden van gegevens naar de server. Een voorbeeld is een eenvoudig formulier voor het verzenden van een bericht, waarin de sitegebruiker zijn naam, e-mailadres en wat tekst opgeeft: Berichttekst
  	Definieert een subtekenreeks binnen een tekenreeks. Wordt gebruikt om een ​​deel van een lijn op te maken met behulp van CSS. Eén van de meest gebruikte tags. Zonder design manifesteert het zich op geen enkele manier in de browser. Voorbeeld: HTML leren levert in de meeste gevallen geen problemen op voor beginners.
  ,	Tags zijn ontworpen om video en audio in een document in te voegen. De afsluitende tag is vereist. Voorbeelden: De parameter 'controls' vertelt ons dat de pagina besturingselementen voor media-inhoud moet weergeven, net als bij een gewone audio-/videospeler.
  	Echt een koninklijk label. De meest gebruikte en populaire tag in HTML-paginaopmaak. Dit blok-element, ontworpen om blokken op de site te beheren. Het concept van een “prachtige” lay-out wordt vaak gebruikt - dit betekent dat alle blokken op de site zijn opgemaakt met behulp van deze tags. Kan andere tags bevatten. Voorbeeld: tekst in een genest blok Alle elementen zijn in de meeste gevallen opgemaakt met CSS-stijleigenschappen. De afsluitende tag is vereist.
  	Deze tag laadt een externe pagina in het document. Voorbeeld:

  We hebben niet met alle tags rekening gehouden, en dat is in dit stadium ook niet nodig. Het belangrijkste is om het basisidee van HTML te begrijpen, te leren hoe u de hierboven gepresenteerde tags kunt gebruiken en dan verder te gaan.

  Houd er rekening mee dat alle namen in de meegeleverde bestanden in Latijnse tekens moeten worden geschreven, zonder spaties.

  Doe bijvoorbeeld niet:

  Dit is nodig voor een grotere compatibiliteit van pagina-inhoud. Bovendien dicteren de standaarden voor het schrijven van HTML-code.

  Dus nu kennen we enkele basisprincipes van HTML: welke structuur een typisch HTML-document zou moeten hebben, we kennen enkele van de meest populaire tags, het is tijd om aan de slag te gaan met het lekkerste deel: cookies.

  Praktische opdracht over HTML-opmaak

  Als u het archief met voorbeelden nog niet heeft gedownload, doe dat dan. Je kunt bijvoorbeeld naar het voorbeeld.html-bestand kijken, dat ook in het archief stond.

• Pak het archief uit en maak een index.html-bestand in de map met de uitgepakte bestanden. Open het gemaakte bestand met behulp van de Sublime Text-teksteditor;
• Creëer een initiële documentstructuur met een doctype, tag met daarin en en ga verder met het bewerken van de inhoud van de tag;
• Open het readme.txt-bestand en voltooi de juiste taken in het index.html-bestand dat u hebt gemaakt. Om het resultaat te controleren, opent u index.html in uw favoriete browser.

Hiermee is de les over de basisprincipes van HTML afgerond, in de volgende les "Basisprincipes van CSS" leren we hoe we de stijlen van documentelementen kunnen beheren en elkaar beter kunnen leren kennen trapsgewijze tafels stijlen, leer stijlklassen gebruiken en maak onze lay-out mooi en kleurrijk.

Tot ziens, vrienden!