HTML-programmeertaal tutorial. Basisprincipes van de WEB-programmeertaal HTML

HTML is de hypertext-opmaaktaal die het internet heeft gemaakt tot wat we kennen en waar we van houden. Dankzij deze prachtige tool zien sites er mooi en modern uit en zorgen ze ook voor gebruiksgemak. HTML rangschikt eenvoudigweg de elementen van een webpagina in een gebruiksvriendelijk formaat. Het werk is vergelijkbaar met wat mensen als MS Word of OpenOffice doen. Ze veranderen een anonieme massa brieven in een document met paragrafen, vetgedrukte tekst, cursief, tabellen en zelfs afbeeldingen. De HTML-taal doet ongeveer hetzelfde, met als enige verschil dat de documenten in de browser worden weergegeven, en de mogelijkheden van deze tool zijn veel breder dan die van teksteditor. Tags worden gebruikt voor opmaak - speciale elftallen, die de structuur van een webpagina beschrijft. Ze staan tussen punthaken, zodat de browser ze kan onderscheiden van het grootste deel van de tekst. Vervolgens behandelen we de basisprincipes van HTML voor beginners.

Visuele editors

Beginners die net op pad zijn gegaan om HTML te leren, beginnen hun werk vaak met programma's waarmee u zonder enige kennis websites kunt maken. Daarin kunt u eenvoudig elementen op het scherm rangschikken zoals ze in de browser worden weergegeven. Het lijkt erop dat dit de bron van eeuwige genade is waarmee je de meerderheid van de webontwikkelaars kwijt kunt raken. Maar niet alles is zo eenvoudig, omdat visuele editors veel tekortkomingen hebben die het onmogelijk maken om ze in serieuze projecten te gebruiken.

Al deze programma's creëren veel onnodige tags die de laatste pagina log en suboptimaal maken. In ons tijdperk van supersnel internet is dit natuurlijk minder belangrijk dan voorheen, maar er zijn een aantal redenen waarom een beknopte en goed geschreven website praktischer blijkt te zijn dan zijn tegenhanger die in een visuele editor is gemaakt. Een webpagina die in een dergelijk programma is gemaakt, zal slecht worden verwerkt door zoekrobots, omdat elke kilobyte code belangrijk voor hen is, en het onwaarschijnlijk is dat omslachtige en onlogische code met een hoop bij hun smaak past. Bovendien lopen redacteuren vaak achter op de tijd, worden ze irrelevant, en is het onpraktisch om middelen aan hun ontwikkeling te besteden, aangezien geen enkele professional deze producten gebruikt. Daarom moet iedereen die in de website-ontwikkelingsindustrie wil werken de basisprincipes van HTML kennen.

Labels

Zoals hierboven vermeld, beschrijven tags de structuur van een webpagina voor de browser. De meeste hebben een openings- en sluitingstag, maar niet allemaal. Bijvoorbeeld ..., waar in plaats van stippen inhoud staat. De eerste laat zien waar de tag begint en de tweede sluit deze. Er kunnen andere paginaopmaakelementen in zitten; deze kunnen als een nestpop in elkaar worden genest. Het is belangrijk om tags tijdig te sluiten, zodat de pagina correct wordt weergegeven.

Er zijn ook enkele tags die niet gesloten hoeven te worden. Daarin bevindt de inhoud zich binnenin, net zoals deze voor de meeste HTML-tags kan worden geschreven, en worden de eigenschappen van het element ingesteld. Het wordt aangegeven in de openingstag en ziet er ongeveer zo uit: attribuut="...", waarbij in plaats van punten de attribuutwaarde staat. Het kennen van tags is de eerste en belangrijkste stap naar het beheersen van HTML. De basis van deze kunst omvat ook het begrijpen van de structuur van een webpagina.

Documentstructuur

Elk HTML-document heeft een overeenkomstige extensie, bijvoorbeeld Index.html. Zo kan de browser begrijpen waar hij mee te maken heeft en de pagina correct weergeven. Het is raadzaam om alle bestanden die u gebruikt om een website te maken in één map op te slaan, wat uw leven in de toekomst veel gemakkelijker zal maken. Basisprincipes van opmaaktaal HTML-hypertekst vereisen een duidelijk begrip van de structuur van het document. Het begint met een tag die de browser vertelt welke HTML-versie in dit document wordt gebruikt. Op op dit moment De vijfde versie van de taal is actueel, dus u hoeft hier niets uit te vinden; u kunt de bovenstaande tag veilig aan het begin van elke pagina invoegen.

Dan zijn er de belangrijkste gepaarde structuren die het ‘skelet’ van de site vormen. De eerste tag, waarin alle andere zijn genest, is .... Alles daarbuiten wordt door de browser niet als webpagina herkend, dus wordt het document geopend en gesloten. Deze tag is vereist voor elk document. Het bevat ook nog een aantal vereiste tags, die hieronder zullen worden besproken.

Hoofd

In de ... tag bevindt zich technische informatie die niet op de pagina verschijnt, maar toch een belangrijk onderdeel is van het HTML-document. Op deze plek wordt de basis van de site gelegd; hier wordt de codering geselecteerd en de paginanaam ingevoerd. Het bevindt zich in een vereiste tag.... De titel wordt bovenaan de browser weergegeven, waar u ook een klein pictogram kunt plaatsen dat de inhoud van de pagina karakteriseert. Het is raadzaam om onmiddellijk de codering van het document aan te geven voor een correcte weergave. Dit kan via de tag. Metatags geven informatie over de structuur van de pagina en bevinden zich meestal in de kop.

Link

Het kennen van de basisprincipes van HTML impliceert ook het gebruik van cascading styling, of css. Ze bepalen de eigenschappen van de elementen die op de pagina worden weergegeven. Moderne aanpak deze taak omvat het opnemen van kenmerken als kleur, hoogte en locatie van het element extern bestand voor meer gemak. Gebruik de tag om een CSS-bestand op te nemen. IN afgewerkte vorm het ziet er ongeveer zo uit: waarbij href de locatie van het bestand aangeeft, en type het type aangeeft.

Lichaam

In dit deel van het HTML-document wordt het zichtbare deel van de pagina gemaakt. Alles wat binnen de "body" wordt gedaan, wordt door de browser weergegeven. Het maakt gebruik van een groot aantal HTML-tags. De basisbeginselen zijn tekstopmaak, het werken met links en basishulpmiddelen voor het structureren van een webpagina. Om aan de slag te gaan met HTML, hoeft u alleen maar de basistags te kennen en deze te kunnen gebruiken. Hieronder staan de meest populaire:

- gebruikt om een substring te markeren die onderworpen zal zijn aan een speciale stijl beschreven in css;
- creëert een link op een webpagina; het transitieadres wordt gespecificeerd door het href attribuut;
- een van de meest populaire tags van onze tijd; iedereen die besluit de basisprincipes van de HTMLl-taal te leren, moet er speciale aandacht aan besteden, aangezien dit een blokelement is, op basis waarvan het leeuwendeel van de moderne sites is gemaakt (parameters voor blokken worden ingesteld in css, en andere blokken kan zich in deze tag bevinden);
Selecteert een alinea uit de tekst; de inhoud van de paragraaf bevindt zich tussen de openings- en sluitingstags;
- een genummerde lijst waarvan de elementen zijn ingesloten in een gepaarde tag

- een lijst met opsommingstekens, waarin, net als in een genummerde lijst, elementen worden aangeduid met een tag

- - documentkoppen (het nummer geeft het kopniveau aan, dat wil zeggen de hoofdkop, en de daaropvolgende opties zijn de subkoppen; trouwens, niveaukoppen zijn bijna onmogelijk te vinden op internet), het is ook belangrijk om te onthouden dat er kan slechts één kop op een pagina zijn;

- vetgedrukte tekst;

- cursief;

- het invoegen van een afbeelding op een website (dit is een enkele tag, er is geen afsluitende tag voor nodig, maar deze moet het alt-attribuut bevatten, dat de tekst voor de afbeelding specificeert);

- video in een webpagina invoegen;

- een tag die een audiobestand in het document invoegt.

Dit zijn niet alle tags die u nodig heeft om uw eigen webpagina te maken, maar ze zijn voldoende om de basisprincipes van HTML voor beginners uit te leggen.

CSS

De ontwikkeling van de HTML-taal heeft ertoe geleid dat elke tag veel attributen heeft gekregen en dat de eisen voor het uiterlijk van webpagina's aanzienlijk zijn toegenomen. De code werd omslachtig en ongemakkelijk, het was moeilijk om hem te lezen, laat staan aan te passen of te veranderen. Als uw site bovendien tien pagina's heeft met veel groen gemarkeerde kopjes, en u wilt ze plotseling rood maken, zult u hard moeten werken en elke pagina handmatig moeten wijzigen. Met de komst van Cascading Style Sheets is dit proces eenvoudig en logisch geworden en is de HTML-code veel leesbaarder geworden.

CSS toepassen

Om webpagina's te maken, moet u de basisprincipes van HTML en CSS kennen, aangezien er nu niets meer te doen is op dit gebied zonder kennis van trapsgewijze stijlbladen. Ze stellen attributen in voor elk element die van toepassing zijn op het hele document. Zo kun je voor alle elementen in één keer de kleur instellen

Of door slechts één regel te schrijven. Gezien de moderne eisen voor het uiterlijk van webpagina's is het gebruik van trapsgewijze stijlbladen verplicht.

Om een CSS-bestand aan een document te koppelen, is er een link-tag. Het principe van het gebruik ervan werd iets hoger beschreven, maar het is niet de enige optie om alle stijlen op één plek te combineren. Er is ook een tag die zich in de “kop” van het document bevindt en waarmee u stijlen kunt schrijven zonder CSS-bestanden te gebruiken. Het is niet nodig om de ene of de andere methode te gebruiken. Ze kunnen met succes worden gecombineerd om het beste resultaat te verkrijgen. Als u een bestand met stijlbladen wilt maken, moet u een bestand maken met de extensie .css, bijvoorbeeld Styles.css.

JavaScript

Vaak begint een persoon die besluit te beseffen dat de tools die HTML biedt niet voldoende zijn voor zijn taken. Met de basis kun je een mooie pagina maken, maar wat als je hem ineens interactief moet maken? Voor deze doeleinden is er een unieke programmering die perfect samenwerkt met HTML. Het heet JavaScript, omdat het is opgevat als het jongere broertje van de populaire Java-taal. Tegenwoordig hebben deze talen aanzienlijke verschillen verworven, en de kloof daartussen wordt alleen maar groter.

JavaScript kan de mogelijkheden van HTML uitbreiden door u de mogelijkheid te bieden tags te maken en te bewerken. Met behulp van dit geweldige hulpmiddel kunt u ook met Cokie werken, gegevens van de server downloaden zonder de pagina opnieuw te laden, en de site interactiever maken dan de HTML-mogelijkheden toestaan. Deze taal heeft ook beperkingen met betrekking tot beveiliging. Als JavaScript niet aan de serverzijde wordt gebruikt, wordt het uitgevoerd onder omstandigheden die de mogelijkheden ervan beperken, zodat aanvallers op geen enkele computer kwaadaardige code kunnen gebruiken.

Redacteuren

HTML-basisprincipes voor een beginner vereisen kennis van de handigste en meest praktische programma's voor het maken van webpagina's. Zoals hierboven geschreven zijn visuele editors zoals Dreamweaver en dergelijke niet geschikt voor deze doeleinden. Dus, moet je tags in een gewoon notitieblok schrijven? Deze optie is ook twijfelachtig, omdat een standaard notitieblok geen speciale lay-outhulpmiddelen heeft. Notepad++ kan deze taak goed aan. Het grote voordeel van dit product is dat het open source is en volledig gratis wordt verspreid. Het heeft handige syntaxisaccentuering en automatisch sluiten van tags. Notepad++ biedt ook een ruime keuze aan interfacetalen, en de mogelijkheden ervan kunnen eenvoudig worden uitgebreid met talrijke add-ons.

Sublime Text 3 is een programma vergelijkbaar met Notepad++, maar tegen betaling verkrijgbaar. Zij was het die de harten van de meeste ontwikkelaars won. Sublime Text 3 is ideaal voor JavaScript, CSS en HTML. Je zult de basisprincipes van het werken ermee zelf moeten leren, maar het is de moeite waard. Het bevat werkelijk grenzeloze mogelijkheden tot verfijning, waardoor u het programma zoveel mogelijk op uw wensen kunt afstemmen.

HTML- en CSS-basisbeginselen voor beginners

Zoals u kunt zien, is het leren van de kunst van het maken van webpagina's niet zo moeilijk als het op het eerste gezicht lijkt. Slechts een paar maanden oefenen zal u transformeren van een timide gebruiker in een beginnende ontwikkelaar. Het leren van lay-out is veel eenvoudiger dan het beheersen van een programmeertaal of Linux. In feite zijn er niet zo veel HTML-tags; het is belangrijk om het praktische aspect van hun gebruik te begrijpen.

Vaardigheid in het werken in Adobe Photoshop is in deze kwestie niet overbodig. Met dit programma kunt u werken met foto's, afbeeldingen en andere grafische elementen van een webpagina. Op dit moment is het Photoshop die het beste met dergelijke taken omgaat; het heeft weinig concurrenten. Voor degenen die dit Adobe-product niet leuk vinden, zijn er Lightroom, GIMP, Illustrator en andere programma's met vergelijkbare functies.

Wat levert kennis van HTML op?

De vaardigheden van het maken van webpagina's zijn tegenwoordig zeer relevant, omdat het internet zich met grote sprongen uitbreidt. Elke onderneming, zelfs de kleinste winkel, werkplaatsen en sportclubs, iedereen wil een eigen website hebben. En hiervoor hebben ze natuurlijk een ontwikkelaar nodig die CSS en HTML kent. De basis is makkelijk onder de knie, daarna is het een kwestie van oefenen. Omdat lay-outtechnologieën voortdurend evolueren, zal er altijd vraag zijn naar front-end-ontwikkelaars. Iedereen die besluit zich aan deze interessante branche te wijden, zal nooit zonder werk komen te zitten.

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.

HTML-basisprincipes

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 die per post moet worden verzonden mooi wilt ontwerpen, 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, je hoeft alleen maar de basisconcepten kennen.

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.

Basisprincipes voor beginners

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 geïnterpreteerd door browsers, wordt de resulterende opgemaakte tekst 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 u dit artikel leuk vond, kunt u zich erop abonneren deze blog om nieuwe artikelen in uw e-mailinbox te ontvangen.

Blog van Jevgeni Nesmelov! website Basisprincipes van html en css voor beginners

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

< html >

< body >

< h2 >< / h2 >

< p >Welkom op mijn blog, volg nu de tutorial 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.< / p >

< h2 >Blog van Evgenia Nesmelov! Nesmelov. ru Basisprincipes van HTML en CSS voor beginners< / h2 >

< / body >

< / html >

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 nu gaan in dit voorbeeld Laten we eens kijken naar elk element van de code, wat erin 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

< strong > < i >Tekst< / strong > < / i >

HTML-documentstructuur

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 aanwezig in absoluut elk document, vertelt het 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

< head >Inhoud< / head >

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 kop moet het maximum bevatten volledige informatie, die de inhoud van de pagina kenmerkt.

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 het indexeren van een pagina als geheel voorkomen zoekmachines. Stel in dat de pagina automatisch wordt vernieuwd na 20 seconden of na 5 seconden, gevolgd door een overgang naar een andere pagina.

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

Er kunnen meerdere van dergelijke meta-elementen zijn, omdat ze absoluut kunnen worden gedragen diverse informatie. 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; )

< style type = "text/css" >

Baseren(

breedte: 100px;

achtergrond - kleur: #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:

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

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.

Paginakoppen h1 h2 h3

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 een gedetailleerde beschrijving ervan geven, abonneer je op blogupdates zodat je niets mist. De aanwezigheid van dergelijke koppen in het artikel zal helpen belangrijke rol

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

Aan het begin en sluit het aan het einde

. 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, en deze staat ook cursief

< ! DOCTYPE html >

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< title >HTML-document< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

Basiselementen Kop en Titel

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 erg 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

< / html >

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.

Kladblok++-editor

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, gemak en leerplezier deze redacteur U moet het eerst op uw computer installeren. 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.

DOCTYPE-element

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 in 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 vaakst 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, Engels wordt gebruikt en deze hele puinhoop bevindt zich in 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 staat er op deze pagina korte beschrijving, niet meer dan twee zinnen. De trefwoordentag omvat ook het onderwerp SEO, 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 ontwerpen wordt deze tag gedetailleerder beschreven.

Waarmee je moet onthouden deze les over de basisprincipes van html:

Bijna alle tags openen en sluiten;
Het document begint met de tag ;
Aanwezigheid van label;
Aanwezigheid van label;
Duidelijke structuur van het html-document.

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.

HTML-basisprincipes bevatten de basisregels van de HTML-taal, een beschrijving van de structuur van de HTML-pagina, relaties daarin HTML-structuur-document tussen HTML-elementen.

Een HTML-document is een gewoon tekstdocument dat kan worden gemaakt in een gewone teksteditor (Kladblok) of in een gespecialiseerde teksteditor met codemarkering (Kladblok++, Visuele Studio Code, enz.). Een HTML-document heeft de extensie .html.

Een HTML-document bestaat uit een boomstructuur van HTML-elementen en tekst. Elk element wordt in het brondocument geïdentificeerd door een starttag (opening) en een eindtag (sluiting) (op zeldzame uitzonderingen na).

De starttag laat zien waar het element begint, de eindtag laat zien waar het eindigt. De afsluitende tag wordt gevormd door een schuine streep / vóór de tagnaam toe te voegen: .... Tussen de start- en sluitingstags bevindt zich de inhoud van de tag: de inhoud.

Afzonderlijke tags kunnen inhoud niet rechtstreeks opslaan; deze wordt geschreven als een attribuutwaarde. Een tag maakt bijvoorbeeld een knop met de tekst Knop erin.

Tags kunnen in elkaar worden genest, bijvoorbeeld

Tekst

HTML-elementen kunnen attributen hebben (globaal, toegepast op alle HTML-elementen, en hun eigen attributen). Attributen worden in de openingstag van het element geschreven en bevatten een naam en waarde, gespecificeerd in het formaat attribuut name="value" . Met attributen kunt u de eigenschappen en het gedrag wijzigen van het element waarvoor ze zijn ingesteld.

Aan elk element kunnen meerdere klassewaarden en slechts één id-waarde worden toegewezen. Er worden meerdere klassewaarden geschreven, gescheiden door een spatie, . De klasse- en id-waarden mogen alleen uit letters, cijfers, koppeltekens en onderstrepingstekens bestaan, en mogen alleen met letters of cijfers beginnen.

De browser bekijkt (interpreteert) het HTML-document, bouwt de structuur ervan (DOM) op en geeft het weer in overeenstemming met de instructies in dit bestand (stylesheets, scripts). Als de opmaak correct is, zal het browservenster een HTML-pagina weergeven met HTML-elementen - kopteksten, tabellen, afbeeldingen, enz.

Het interpretatieproces (parseren) begint voordat de webpagina volledig in de browser is geladen. Browsers verwerken HTML-documenten vanaf het begin opeenvolgend, terwijl ze CSS verwerken en stijlbladen koppelen aan pagina-elementen.

Een HTML-document bestaat uit twee secties - de header - tussen de tags ... en het inhoudsgedeelte - tussen de tags ....

HTML volgt de regels in het documenttypedeclaratiebestand (Documenttype Definitie, of DTD). Een DTD is een XML-document dat definieert welke tags, attributen en hun waarden geldig zijn voor een bepaald item HTML-type. Elke versie van HTML heeft zijn eigen DTD.

DOCTYPE is verantwoordelijk voor de juiste weergave van een webpagina door de browser. DOCTYPE specificeert niet alleen de HTML-versie (bijvoorbeeld html), maar ook het overeenkomstige DTD-bestand op internet.

...

De elementen binnen de tag vormen een documentboom, het zogenaamde documentobjectmodel, DOM (documentobjectmodel). In dit geval is het element het rootelement.

De eenvoudigste structuur

Om de interactie tussen webpagina-elementen te begrijpen, is het noodzakelijk om rekening te houden met de zogenaamde ‘familierelaties’ tussen elementen. Relaties tussen meerdere geneste elementen worden geclassificeerd als ouder, kind en zuster.

Een voorouder is een element dat andere elementen bevat. In Figuur 1 is de voorouder van alle elementen . Tegelijkertijd is het element de voorloper van alle tags die het bevat: ,

, , enz.

Een afstammeling is een element dat zich binnen een of meer elementtypen bevindt. Is bijvoorbeeld een afstammeling van en het element

Is een afstammeling van zowel en .

Bovenliggend element - een element dat op meer dan één manier verband houdt met andere elementen laag niveau, en bevindt zich in de boom erboven. In Figuur 1 en . Label

Is alleen de ouder van .

Kindelement- een element dat direct ondergeschikt is aan een ander element van een hoger niveau. In Figuur 1 zijn er alleen elementen , ,

En zijn kinderen van .

Een zusterelement is een element dat een gemeenschappelijk ouderelement heeft met het betreffende element, de zogenaamde elementen van hetzelfde niveau. In Figuur 1 zijn en elementen van hetzelfde niveau, evenals elementen , en

Ze zijn zussen van elkaar.

Sectie ... bevat technische informatie over de pagina: titel, beschrijving, trefwoorden voor zoekmachines, codering, enz. De informatie die u daar invoert, wordt niet weergegeven in het browservenster, maar bevat gegevens die de browser vertellen hoe de pagina moet worden verwerkt.

De vereiste sectietag is . De tekst die in deze tag is geplaatst, verschijnt in de titelbalk van de webbrowser. De titel mag niet langer zijn dan 60 tekens om volledig in de titel te passen. De titeltekst moet zoveel mogelijk bevatten volledige beschrijving inhoud van webpagina's.

Niet vereist label sectie bestaat uit één tag. Met zijn hulp kunt u een beschrijving van de pagina-inhoud en trefwoorden instellen voor zoekmachines, de auteur van het HTML-document en andere metadata-eigenschappen. Een element kan meerdere elementen bevatten omdat deze verschillende informatie bevatten, afhankelijk van de gebruikte attributen.

De beschrijving van de pagina-inhoud en trefwoorden kunnen tegelijkertijd in verschillende talen worden opgegeven, bijvoorbeeld in het Russisch en Engels:

Met behulp van een tag kunt u de indexering van een webpagina door zoekmachines blokkeren of toestaan:

Om de pagina na een bepaalde periode automatisch opnieuw te laden, moet u de vernieuwingswaarde gebruiken:

De pagina wordt na 30 seconden opnieuw geladen. Om de bezoeker naar een andere pagina om te leiden, moet u de URL opgeven in de url-parameter:

tekenset	Specificeert de tekencodering voor het huidige HTML-document:
inhoud	Bevat willekeurige tekst die de waarde specificeert die is gekoppeld aan het http-equiv- of name-attribuut, afhankelijk van hun waarde.
http-equiv	Beheert browseracties op een bepaalde webpagina (equivalent aan HTTP-headers). Bij het weergeven van de pagina volgt de browser de instructies die in het attribuut zijn gespecificeerd: default-style specificeert de voorkeursstijl die op de pagina moet worden gebruikt. Het contentattribuut moet de ID bevatten van het element dat verwijst naar het CSS-stijlblad, of de ID van het element dat het stijlblad bevat. vernieuwen geeft de tijd in seconden aan voordat de pagina opnieuw wordt geladen of de tijd voordat wordt omgeleid naar een andere pagina als het contentattribuut de regel "url=page_address" na de tijd bevat. Automatisch opnieuw opstarten pagina's na een bepaalde tijdsperiode, in dit voorbeeld na 30 seconden: Als u de bezoeker onmiddellijk naar een andere pagina wilt doorverwijzen, kunt u de URL opgeven in de url-parameter:
naam	Geassocieerd met de waarde in het contentattribuut. Mag niet worden gebruikt als voor het element al de attributen http-equiv , charset of itemprop zijn ingesteld. applicatienaam specificeert de naam van de webapplicatie die op de pagina wordt gebruikt. auteur specificeert de naam van de auteur van het document in een vrij formaat. beschrijving definieert korte beschrijving naar de pagina-inhoud, bijvoorbeeld: generator specificeert een van de softwarepakketten die worden gebruikt om het document te maken, bijvoorbeeld: . trefwoorden bevat een lijst trefwoorden, gescheiden door komma's, overeenkomend met de pagina-inhoud, bijvoorbeeld: . Het naamattribuut kan ook volgende waarden uit de uitgebreide specificatie, zoals maker, googlebot, uitgever, robots, slurp, viewport, hoewel geen van deze nog officieel is overgenomen.

Binnen dit element worden de stijlen ingesteld die op de pagina worden gebruikt. Gebruik om stijlen in een HTML-document in te stellen CSS-taal. Er kunnen meerdere van dergelijke elementen op een pagina staan.

Binnen dit element kunt u opmaakcode schrijven voor zowel de webpagina-elementen zelf als voor de gehele webpagina.

.paper (breedte: 200px; hoogte: 300px; achtergrondkleur: #ef4444; kleur: #666666; )

Om een opgegeven stijl aan een element te koppelen, moet u gebruiken klasse attribuut(of id) wijs de juiste naam toe aan het element:

...

CSS-code kan rechtstreeks in het markup-element worden ingesloten als de waarde van het stijlattribuut, bijvoorbeeld:

1.2.4. Element

U kunt ook op een andere manier stijlen voor een document instellen: schrijf ze in apart bestand met een .css-extensie, bijvoorbeeld style.css .

Er zijn twee manieren om een bestand met stijlen aan een webpagina te koppelen:
via de @import url-richtlijn

@ import-URL (stijl.css);

gebruik van het element. Het element vereist geen afsluitende tag. Dit element definieert de relatie tussen huidige pagina en andere documenten. Er kunnen meerdere van dergelijke elementen op een pagina staan. De inzending zal hebben volgende weergave:

kruisoorsprong	Geeft aan of CORS (een browsertechnologie waarmee een webpagina toegang krijgt tot bronnen van een ander domein) moet worden gebruikt bij het ophalen van een afbeelding van een site. anoniem: de browser voegt automatisch een Origin-header toe aan een cross-domein verzoek, met daarin de naam van het domein van waaruit het verzoek is gedaan. Als de server niet reageert met de CORS-header Access-Control-Allow-Origin: * (of de domeinnaam in plaats van een asterisk), wordt het laden van de afbeelding geblokkeerd. use-credentials - Als de server geen inloggegevens verstrekt met behulp van Access-Control-Allow-Credentials: true , wordt het laden van afbeeldingen geblokkeerd.
href	Het belangrijkste attribuut van de tag, de waarde, is het pad naar het bestand met stijlen.
hreflang	Bepaalt de taal van de tekst in het document waarnaar wordt verwezen.
media	Specificeert het type apparaat waarop de linkbron moet worden toegepast.
nonce	Een willekeurig gegenereerde tekenreeksvariabele op de server die regels instelt voor het gebruik van inlinestijlen om inhoud te beschermen. De attribuutwaarde is een teksttekenreeks.
rel	Het attribuut definieert de relatie tussen huidig document en het document waarnaar de link verwijst. alternatief - een link naar hetzelfde document, maar in een ander formaat (bijvoorbeeld pagina's voor afdrukken, vertaling, spiegelen, feed in RSS- of Atom-formaat), . archieven - geeft aan dat het gekoppelde document van historisch belang is. Een link kan verwijzen naar een verzameling documenten, documenten of ander materiaal. auteurslink naar een pagina over de auteur van het document of naar een pagina met de contactgegevens van de auteur. Maak een bladwijzer voor een verwijzing naar de dichtstbijzijnde voorouder van het artikel, die de link is, of naar de sectie van het artikel die het nauwst verwant is aan het element als er geen voorouder is. extern wordt gebruikt om aan te geven dat de pagina waarnaar wordt gelinkt geen deel uitmaakt van deze site. specificeert eerst een link die verwijst naar het eerste document in een reeks documenten. help-link naar een help-document. icon specificeert het pad naar het pictogram dat voor het huidige document zal worden gebruikt. last specificeert een link die verwijst naar het laatste document in een reeks documenten. licentie Een link naar de copyrightinformatie voor een document. next geeft aan dat dit document deel uitmaakt van een serie en dat de link naar het volgende document in die serie gaat. nofollow geeft aan dat de link niet wordt onderschreven door de auteur van de pagina of dat de link een commercieel karakter heeft. noreferrer geeft aan dat de clientverzoekheader met de URL van de verzoekbron niet mag worden doorgegeven bij het volgen van de link. pingback specificeert het adres van de pingback-server, waardoor de blog automatisch sites op de hoogte kan stellen die ernaar linken. prefetch geeft aan dat het bestand waarnaar wordt verwezen vooraf in de cache moet worden opgeslagen. prev geeft aan dat dit document deel uitmaakt van een serie en dat de link verwijst naar een eerder document in die serie. zoeken geeft aan dat het document waarnaar wordt verwezen een interface bevat voor zoeken en gerelateerde bronnen. zijbalk geeft aan dat het gekoppelde document, indien mogelijk, in extra browsercontext wordt weergegeven, en sommige browsers openen, wanneer u op een hyperlink klikt, een venster om de link aan uw bladwijzerbalk toe te voegen. stylesheet is een link naar een extern bestand dat als stylesheet voor dit document zal worden gebruikt. tag geeft aan dat de hyperlinktag van toepassing is op dit document. omhoog geeft aan dat de pagina deel uitmaakt hiërarchische structuur, en dat de hyperlink naar meer leidt hoog niveau hulpbron in de structuur.
maten	Specificeert de grootte van pictogrammen voor visuele weergave. Het kenmerk size wordt alleen gebruikt in combinatie met rel="icon" en kan de volgende waarden aannemen: breedte-hoogte - definieert een lijst met formaten gescheiden door spaties. Elke grootte moet de notatie breedte-hoogte hebben (de afmetingen van het pictogram worden gespecificeerd in pixels), bijvoorbeeld: ; elk - het pictogram kan naar elk formaat worden geschaald.
titel	Definieert de titel van een link of de naam van een reeks alternatieve stijlbladen. De attribuutwaarde is tekst.
type	Specificeert het MIME-type van het document waarnaar wordt verwezen. IN in dit geval het heeft de waarde "text/css" nodig.

asynchroon	Het kenmerk geeft aan dat het script asynchroon met de rest van de pagina wordt uitgevoerd (het script wordt uitgevoerd op hetzelfde moment dat de pagina wordt geladen).
tekenset	Definieert tekencodering
kruisoorsprong	Bepaalt of CORS wordt gebruikt bij het laden van externe scripts (met behulp van het src-attribuut). anoniem - voordat het script in een cross-domein verzoek wordt geladen, voegt de browser automatisch de Origin-header toe, zonder toegangsparameters door te geven (cookie, X.509-certificaat, login/wachtwoord voor basisauthenticatie via HTTP). Als het serverantwoord de header Access-Control-Allow-Origin: domeinnaam niet bevat, wordt het script niet geladen. use-credentials — voordat het script in een cross-domein verzoek wordt geladen, voegt de browser automatisch een Origin-header toe die de toegangsparameters aangeeft (cookie, SSL-certificaat of login/wachtwoord-paren). Als het serverantwoord niet de header Access-Control-Allow-Credentials: true bevat, wordt het script niet geladen.
verschuiven	De interpretatie van scripts wordt uitgesteld totdat het document op het apparaat van de gebruiker wordt weergegeven.
nonce	Biedt beveiliging door bescherming tegen cross-site scripting (XSS)-aanvallen. Stelt regels in voor het gebruik van ingebouwde scripts met behulp van nonce-waarden en hashes. Tijdens het weergeven van de pagina berekent de browser hashes voor elk inline-script en vergelijkt deze met de hashes die in de CSP worden vermeld. Downloaden van andere bronnen dan " witte lijst", is geblokkeerd.
src	Geeft de locatie van het scriptbestand aan, de attribuutwaarde is de url van het bestand dat het JavaScript-programma bevat.
type	Wordt gebruikt om de scripttaal aan te geven die wordt gebruikt om de inhoud van de tag samen te stellen.

Deze sectie bevat de volledige inhoud van het document. Beschikbaar voor het element.

op naafdruk	Een gebeurtenis die wordt geactiveerd nadat een pagina is verzonden om af te drukken of nadat het afdrukvenster is gesloten.
onbevoordruk	Een gebeurtenis die wordt geactiveerd voordat een pagina wordt verzonden om af te drukken.
onbevoorafladen	De gebeurtenis wordt geactiveerd wanneer de bezoeker een overgang naar een andere pagina initieert of op “venster sluiten” klikt. Hiermee kunt u een bericht weergeven in het bevestigingsvenster om de gebruiker te laten weten of hij of zij op de huidige pagina wil blijven of deze wil verlaten.
onhashverandering	De gebeurtenis wordt geactiveerd wanneer het hashgedeelte van de URL verandert, bijvoorbeeld wanneer de gebruiker van example.domain/test.aspx#page1 naar example.domain/test.aspx#page2 gaat.
bericht	Er vindt een gebeurtenis plaats wanneer een bericht wordt ontvangen via een gebeurtenisbron.
online	De gebeurtenis wordt geactiveerd door de browser wanneer de browser vaststelt dat de internetverbinding is verbroken.
online	De gebeurtenis wordt geactiveerd door de browser wanneer de internetverbinding is hersteld.
op paginaverbergen	De gebeurtenis vindt plaats wanneer de gebruiker de pagina verlaat via navigatie, bijvoorbeeld door op een link te klikken, de pagina te vernieuwen, een formulier in te vullen, enz.
op paginashow	De gebeurtenis vindt plaats wanneer de gebruiker naar de webpagina navigeert, na de onload-gebeurtenis.
uitladen	De gebeurtenis wordt geactiveerd als de pagina om een of andere reden niet wordt geladen of als het browservenster wordt gesloten.

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 er meer dan eens mee te maken krijgen HTML-codering op de website. Ik raad ten zeerste aan om uit te checken HTML-lessen voor beginners op mijn blog, en ik garandeer dat je na het voltooien van deze cursus eenvoudig 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 je hebt gehoord over programma's die het schrijven van HTML-code vereenvoudigen (Microsoft FrontPage, Adobe Dreamweaver), dan raad ik je aan ze niet te gebruiken op in dit stadium opleiding. Schrijf je hand in een standaard notitieboekje of in een tekstboekje Kladblok-editor++, en wanneer u deze cursus voltooit, kunt u programma's gebruiken voor versnelling. Abonneer u op mijn blogupdates en lees hoe u Microsoft FrontPage en Adobe Dreamweaver gebruikt.

Voor een beter begrip heb ik een voorbeeld opgesteld. 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

...

juiste volgorde
openings- en sluitingstags:

De tag die we als eerste hebben geopend, wordt als laatste gesloten, de tweede is de voorlaatste, enz.
○ Hier is een voorbeeld van een onjuiste volgorde van openings- en sluitingstags. Bij deze bestelling kunnen er fouten optreden op de webpagina: De fout zat in en. Wees voorzichtig bij het schrijven van code.

Klaar-code.

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

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? Dat weet je waarschijnlijk wel dit type editors hebben uitgebreide mogelijkheden 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 bepaald programma, in dit geval - in een kantooreditor. 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 deze innerlijke taal Word-document krijgt 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. Word is hier de browser en het document is de HTML-pagina. Dit is de basis HTML-technologieën, waarvan het begrip noodzakelijk is om de opmaaktaal van webdocumenten niet te verwarren met programmeertalen. De naam spreekt voor zich - met HTML gebruiken we 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. Deze visuele editors heten:

WYSIWYG

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

alomvattende oplossingen

eenvoudig bewerken

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 originele HTML code. De editor is een programma en kan niet weten wat je precies wilt krijgen; het genereert tonnen code, waarbij rekening wordt gehouden met alle mogelijke opties voor het gedrag van het document in de browser.
In de regel raken editors voor het visuele ontwerp van HTML-code snel verouderd. 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, deze zouden typen. HTML-lay-out is het proces waarbij een HTML-document wordt gemaakt. Bij het gewone volk en in 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” wat HTML-versie gebruikt bij het samenstellen van een document.

Vanwege het feit dat HTML voortdurend evolueert, heeft het verschillende versies, net als alle andere softwareproduct. Huidige versie HTML is de vijfde en het doctype dat in het voorbeeld wordt gegeven, is actueel.

In principe heeft het geen zin om je te verdiepen in 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 telkens wanneer 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 gebruikt zoekmachines 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 niet vereist in de structuur van een HTML-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 dat wel GIF-bestanden animatie bevatten. 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 script.js

, 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. index.html 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

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: Element 1 lijst met opsommingstekens Opsommingsteken 2 Genummerd lijstitem 1
	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: Verschijning 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. Voorbeeld - eenvoudige vorm het verzenden van een bericht waarin de sitegebruiker zijn naam, e-mail en wat tekst aangeeft: 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 veroorzaakt in de meeste gevallen geen problemen 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 is een blokelement dat is 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 versierd met eigenschappen CSS-stijlen. De afsluitende tag is vereist.
	Deze tag wordt geladen 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.

Dit is de afsluiting van de les over de basisprincipes van HTML. In de volgende les “CSS Basics” zullen we leren hoe we de stijlen van documentelementen kunnen beheren, trapsgewijze stijlbladen leren kennen, leren hoe we stijlklassen kunnen gebruiken en onze lay-out mooi en kleurrijk kunnen maken .

Tot ziens, vrienden!