HTML staat voor HyperText Markup Language en is de meest gebruikte taal voor het schrijven van webpagina's.

• Hypertext verwijst naar een manier om webpagina's (HTML-documenten) te koppelen. Een link die op een webpagina beschikbaar is, wordt dus hypertekst genoemd.
• Zoals de naam al doet vermoeden, is HTML een opmaaktaal, wat betekent dat u HTML gebruikt om eenvoudigweg een tekstdocument te "markeren" met tags die de webbrowser vertellen hoe het moet worden gestructureerd voor weergave.

HTML is oorspronkelijk ontwikkeld om de structuur van documenten te definiëren, zoals koppen, lijsten, paragrafen, enzovoort, om de uitwisseling van wetenschappelijke informatie tussen onderzoekers te vergemakkelijken.

HTML wordt nu veel gebruikt om webpagina's op te maken met behulp van verschillende tags die beschikbaar zijn in de HTML-taal.

HTML-document

Het volgende voorbeeld toont een HTML-document in zijn eenvoudigste vorm:

Documenttitel Titel

Hier is de inhoud van het document...

Laten we de code opslaan in een HTML-bestand document.html met behulp van uw favoriete teksteditor. En open het bestand met een webbrowser zoals Internet Explorer, Google Chrome of Firefox, enz. Het zou het volgende resultaat moeten tonen:

Tags voor het maken van een HTML-document

Zoals eerder vermeld, is HTML een opmaaktaal en gebruikt het verschillende tags om inhoud op te maken. Deze tags staan ​​tussen punthaken. De meeste tags hebben overeenkomstige afsluittags, met uitzondering van enkele tags. Een tag heeft bijvoorbeeld een sluittag en een tag heeft een sluittag en andere.

In het bovenstaande voorbeeld worden de volgende tags gebruikt om een ​​HTML-document te maken:

Label	Beschrijving
	Deze tag specificeert het documenttype en de HTML-versie.
	Deze tag bestrijkt een compleet HTML-document en bestaat voornamelijk uit de documentkop, die wordt weergegeven door ... tags, en de documenttekst, die wordt weergegeven door ... tags.
	Deze tag vertegenwoordigt de titel van het document, die mogelijk andere HTML-tags bevat, zoals , enz.
	De tag wordt binnen de tag gebruikt om de titel van het document aan te geven.
	Deze tag vertegenwoordigt de hoofdtekst van het document, waarin andere HTML-tags zijn opgeslagen, zoals , , En anderen.
	Deze tag vertegenwoordigt de titel.
	Deze tag vertegenwoordigt een paragraaf.

Kennis van deze tags is voldoende om een ​​HTML-document (html-pagina) te maken.

Om HTML te leren, moet u de verschillende tags kennen en begrijpen hoe ze zich gedragen bij het opmaken van een tekstdocument. HTML leren is eenvoudig omdat gebruikers alleen maar het gebruik van verschillende tags hoeven te leren om tekst of afbeeldingen op te maken, waardoor er een prachtige webpagina ontstaat.

HTML-documentstructuur

De structuur van een typisch HTML-document ziet er als volgt uit:

Documentdeclaratietag Tags die zijn gekoppeld aan de titel van het document Tags die zijn gekoppeld aan de hoofdtekst van het document

In de volgende lessen zullen we alle hoofd- en body-tags leren. Laten we nu eens kijken wat een documentdeclaratietag is.

Verklaring

De declaratietag wordt door de webbrowser gebruikt om inzicht te krijgen in de HTML-versie die in het document wordt gebruikt. De huidige versie van HTML is 5 en gebruikt de volgende declaratie:

Er zijn veel andere soorten declaraties die in een HTML-document kunnen worden gebruikt, afhankelijk van welke versie van HTML wordt gebruikt. We zullen hier meer details over zien als we de tag samen met andere HTML-tags bespreken.

HTML-pagina en de structuur ervan gedefinieerd door de hoofdtags

Laten we eens kijken hoe de meest gewone internetpagina er van binnenuit uitziet.

• De HTML-structuur is over het algemeen de basis van elke webpagina.
• Tegenwoordig zijn er verschillende soorten HTML-documenten. Elk documenttype heeft zijn eigen HTML-structuur (details onderaan de pagina).
• De juiste initiële HTML-structuur is de sleutel tot cross-browser compatibiliteit van de site.

Ga in het Start- of Startsysteemmenu naar het gedeelte Programma's (Alle programma's), open de map Accessoires en selecteer Kladblok. Dit is natuurlijk niet het enige hulpmiddel voor het schrijven van code, maar in dit stadium is dit wat je nodig hebt.

Voorbeeld documentstructuur:

Laten we eens kijken naar de HTML-tags die de structuur van de pagina definiëren.

• - verplicht, definieer het HTML-document.
• - definieer een sectie met service-informatie en bevat instructies voor zoekmachines, browsers en scripts.
• - bepaal de hoofdtitel van de webpagina.
• - verplicht, bepaal het zichtbare deel van het document.
• - definieer de kop van het derde niveau.
• - definieer de paragraaf. Zie de les HTML-paragrafen

HTML-documentstructuur | Het schrijven van de paginacode

De volgorde van acties is als volgt:

1. Schrijf de HTML-code van de pagina in Kladblok:

4. Open IE (Internet Explorer) of een andere standaardbrowser. In het menu proberen we het bestand index.html dat op de computer is opgeslagen te vinden en te openen. Je kunt een bestand ook in elke browser vinden en openen in het venster dat verschijnt nadat je een combinatie van twee toetsen op het toetsenbord hebt getypt: Ctrl en O - houd Ctrl ingedrukt en druk vervolgens op de Latijnse letter O.

Om de stof verder te bestuderen, heb je het volgende nodig:
U moet eenvoudigweg verschillende browsers op uw computer hebben. Download Mozilla Firefox, Opera gratis en ga verder met onze les.

Open index.html met Firefox. In eerdere versies van deze browser kon je de tekst die je schreef niet lezen, waardoor er vreemde tekens werden weergegeven. Deze onjuistheid kan worden geëlimineerd door eenvoudigweg twee tags met een set attributen in de HTML-code op te nemen, die ook verplicht zijn.

Correcte HTML 4.01-structuur

Dit zou de initiële structuur van een HTML-pagina moeten zijn:

HTML-documentstructuur

Voeg zelf alinea's en een titel toe en kijk wat eruit komt. Vergeet niet dat u na elke opslag van het document de inhoud van het browservenster moet vernieuwen door op de knop in Mozilla Firefox of de knop in Internet Explorer te klikken, of op F5 om de wijzigingen door te voeren.

Is bij jou alles gelukt? - Dus je was voorzichtig en deed alles goed.

HTML (van de Engelse HyperText Markup Language - "HyperText Markup Language") is de standaard opmaaktaal voor documenten op het World Wide Web. De meeste webpagina's worden gemaakt met HTML (of XHTML). HTML wordt door browsers geïnterpreteerd en weergegeven als een document in een voor mensen leesbare vorm.

HTML is een toepassing (“speciaal geval”) van SGML (Standard Generalized Markup Language) en voldoet aan de internationale standaard ISO 8879. XHTML is een toepassing van XML.

Tekstdocumenten met opmaak in HTML (dergelijke documenten hebben traditioneel de extensie .html of .htm) worden verwerkt door speciale toepassingen die het document in de opgemaakte vorm weergeven. Dergelijke toepassingen, die “browsers” of “internetbrowsers” worden genoemd, bieden de gebruiker doorgaans een handige interface voor het opvragen van webpagina’s, het bekijken ervan (en het weergeven ervan op andere externe apparaten) en, indien nodig, het verzenden van gebruikersinvoer naar een server. De meest populaire browsers van vandaag zijn Google Chrome, Mozilla Firefox, Opera, Internet Explorer en Safari.

HTML-documentstructuur

Normaal gesproken is een HTML-document een bestand met de extensie .html of .htm, waarin de tekst is gemarkeerd met HTML-tags (Engelse tag - speciale ingebouwde instructies). HTML definieert de syntaxis en plaatsing van tags op basis waarvan de browser de inhoud van een webdocument weergeeft. De tekst van de tags zelf wordt niet weergegeven door de webbrowser.

Een HTML-document bevat tekst (de inhoud van de pagina) en inline-tags: instructies over de structuur, het uiterlijk en de functie van de inhoud. Een HTML-document is verdeeld in twee hoofddelen: het hoofd en het lichaam. De kop bevat informatie over het document, zoals de titel en methodologische informatie die de inhoud beschrijft. De hoofdtekst bevat de documentinhoud zelf (wat wordt weergegeven in het browservenster).

Voorbeeld documentstructuur:

HTML-structuurkop

Basis HTML-elementen

Een tag is een element van de hypertext-opmaaktaal. Een correctere naam is een descriptor. Er worden slechts twee tags gebruikt: opening, of initiële, en sluiting, of einde, of bovendien is het, afhankelijk van de taalimplementatie, mogelijk om een ​​enkele tag en een lege elementtag te gebruiken. Een alinea-inspringingstag kan bijvoorbeeld een alinea opmaken tussen , of misschien in een enkele vorm tot de volgende eerste

Voorbeeld van een leeg element: - breekt de tekst af zonder de inspringing te behouden, maar u kunt een speciale vorm gebruiken om de tag te schrijven met minder tekens:

Elke tag bestaat uit een naam, die kan worden gevolgd door een lijst met optionele attributen, allemaal tussen punthaken< >. De inhoud van de haakjes wordt nooit weergegeven in het browservenster. De tagnaam is meestal een afkorting van de functie ervan, waardoor deze gemakkelijker te onthouden is. Attributen zijn eigenschappen die de functie van een tag uitbreiden of verfijnen. Normaal gesproken zijn de naam en kenmerken binnen een tag niet hoofdlettergevoelig. De waarden van bepaalde attributen kunnen echter hoofdlettergevoelig zijn. Dit geldt met name voor bestandsnamen en URL's.

De meeste tags zijn containers. Dit betekent dat ze een begin- (opening of begin) en een eind- (sluitings)tag hebben. De tekst tussen de tags voert de instructies uit die erin staan.

De eindtag heeft dezelfde naam als de starttag, maar wordt voorafgegaan door een schuine streep (/). Het kan worden gezien als een "schakelaar" voor de tag. De eindtag bevat nooit attributen.

In sommige gevallen is de eindtag optioneel en bepaalt de browser het einde van de tag op basis van de context. Meestal wordt de eindtag (paragraaf) weggelaten. Browsers ondersteunden deze tag zonder een overeenkomstige aanvulling, dus veel webschrijvers zijn gewend geraakt aan het gebruik van de korte vorm. Daarom is het bij twijfel de moeite waard om een ​​afsluitende tag in de tekst op te nemen. Dit is vooral belangrijk als uw document Cascading Style Sheets gebruikt.

Sommige tags hebben geen eindtags omdat ze worden gebruikt om individuele (op zichzelf staande) elementen op de pagina te plaatsen. Eén daarvan is de afbeeldingstag . Het plaatst eenvoudigweg de afbeeldingen in de stroom van de pagina. Andere zelfstandige tags zijn regeleinden (
), horizontale lijn () en tags die informatie over het document bevatten en geen invloed hebben op de inhoud die op het scherm wordt weergegeven, zoals en .

Er worden attributen aan een tag toegevoegd om de acties ervan uit te breiden of te wijzigen. U kunt meerdere kenmerken aan één tag toevoegen. Als tagkenmerken de tagnaam volgen, worden ze gescheiden door een of meer spaties. De volgorde is niet belangrijk. De meeste attributen hebben waarden die volgen op een gelijkteken (=) na de attribuutnaam. Waarden zijn beperkt tot 1024 tekens. Waarden kunnen hoofdlettergevoelig zijn. Soms moeten waarden tussen aanhalingstekens staan ​​(dubbel of enkel). De regels voor het schrijven van waarden zijn als volgt:

· als de waarde uit één woord of cijfer bestaat en alleen uit letters (a-z), cijfers (0-9) en speciale tekens (punt of koppelteken) bestaat, kunt u deze na het gelijkteken plaatsen, zonder aanhalingstekens;

· Als de waarde meerdere woorden bevat, gescheiden door komma's of spaties, of speciale tekens bevat anders dan een punt of koppelteken, moet deze tussen aanhalingstekens worden geplaatst. URL's vereisen bijvoorbeeld aanhalingstekens omdat ze '://'-tekens bevatten. Aanhalingstekens zijn ook vereist bij het opgeven van kleurwaarden met behulp van het "#rrggbb"-formaat.

HTML-tags kunnen andere HTML-tags bevatten, zodat meerdere tags invloed kunnen hebben op één element. Dit heet nesten. Om dit correct te implementeren, moeten de begin- en eindtags van de subtag zich tussen de begin- en eindtags van de buitenste tag bevinden.

Een veel voorkomende fout zijn overlappende tags. Hoewel sommige browsers inhoud weergeven die op deze manier is gemarkeerd, staan ​​veel browsers niet toe dat u de regel overtreedt. Het is dus belangrijk om de tags correct te plaatsen. Informatie die wordt genegeerd wanneer deze door browsers wordt bekeken:

· regeleinden. Tekens aan het einde van de regel in een HTML-document worden genegeerd. Tekst en elementen lopen door tot een tag of
. Regeleinden worden uitgevoerd als de tekst is aangemerkt als opgemaakte tekst ();

· Tabtekens en meerdere spaties. Wanneer de browser een tabteken en meerdere opeenvolgende spaties in een HTML-document tegenkomt, wordt er slechts één spatie weergegeven. Dus als een document het volgende bevat: "ver, ver weg", zal de browser "ver, ver weg" weergeven. Extra spaties kunnen aan de tekststroom worden toegevoegd met behulp van het niet-afbrekende spatieteken (). Bovendien wordt alle witruimte weergegeven als de tekst is opgemaakt (in tags);

· meerdere tags. Een reeks tags die niet worden onderbroken door tekst, wordt door alle browsers als overbodig geïnterpreteerd. De inhoud wordt weergegeven alsof er maar één . De meeste browsers zullen meerdere tags uitvoeren
in de vorm van verschillende overgangen naar een nieuwe lijn;

· onbekende tags. Als de browser de tag niet begrijpt of verkeerd is ingesteld, negeert de browser deze eenvoudigweg. Afhankelijk van de tag en browser kan dit verschillende resultaten opleveren. Ofwel zal de browser niets uitvoeren, ofwel kan de inhoud van de tag als platte tekst worden weergegeven.

U ontdekt wat de minimale structuur van een HTML-document moet zijn. We zullen elk van de noodzakelijke elementen in detail en met voorbeelden analyseren. We zullen ook praten over hoe u op de juiste manier bestanden en websitepagina's kunt maken.

HTML-documentstructuur

Laten we eens kijken naar de structuur van het HTML-document om te begrijpen hoe alles werkt. U zult ontdekken welk frame op de pagina aanwezig moet zijn om als geldig te worden beschouwd ( juist).

Om een ​​webpagina te kunnen maken, moet deze een minimum aantal tags bevatten. Ze bevinden zich in het onderstaande voorbeeld.

Hoe u een website op internet maakt

De browser interpreteert zelf al deze tags en geeft ze weer in één vorm van informatie voor de gebruiker. U heeft zelf gemerkt dat wanneer u naar de site gaat, deze elementen niet op het scherm worden weergegeven. Je ziet alleen de mooie verpakking die de browser weergeeft.

Visueel voorbeeld van een DOCTYPE-tag voor een HTML-pagina

De DOCTYPE-tag staat altijd helemaal aan het begin van de webpagina. Het is vereist om het type van het huidige document aan te geven. En daarnaast begrijpt de browser welke versie van html er gebruikt wordt.

In de nieuwste versie 5 ziet het er als volgt uit:

HTML-tag

Is een container die alle inhoud van een webpagina bevat. Openings- en sluitingselementen in een document zijn optioneel. Een goede stijl vereist echter het gebruik ervan.

Normaal gesproken komt de openings-html-tag op de tweede plaats na het definiëren van het document met behulp van doctype . Hoe dichterbij komt altijd als laatste op de pagina.

Deze tag vertelt de browser waar ons html-document begint en eindigt. Daarom zijn alle andere elementen ( behalve doctype) moet in deze container worden genest.

hoofd label

De head-tag is ontworpen om andere elementen op te slaan die tot doel hebben de browser te helpen bij het werken met gegevens. Ook in de container bevinden zich metatags die worden gebruikt om informatie op te slaan. Het is ontworpen voor browsers en zoekmachines.

De head-inhoud wordt niet rechtstreeks op de webpagina weergegeven, behalve de title-tag. Hij is verantwoordelijk voor de paginatitel.

Over het algemeen slaat dit element alle technische informatie over de pagina op. Bijvoorbeeld het coderingstype van de html-pagina. Het zal de browser vertellen hoe het document het beste kan worden gedecodeerd. We kunnen hier ook verschillende scripts toevoegen.

titel tag

hoofd heeft één vereist onderdeel. Dit is de titeltag. Hij is verantwoordelijk voor hoe de titel van de HTML-pagina eruit zal zien. Wat u hier schrijft, verschijnt op het browsertabblad.

Neem dit serieus!

Voor dit element raad ik aan een titel van niet meer dan 60 tekens te gebruiken, inclusief spaties. Dit is nodig zodat het niet wordt afgesneden in de zoekresultaten. En zorg ervoor dat u hier betekenisvolle woorden opneemt. Dat wil zeggen, we schrijven specifiek waar de pagina over zal gaan.

Professionele creatie van een website op internet met voorbeelden

Natuurlijk moet u trefwoorden invoegen en uw naam aantrekkelijker maken. Anders loopt u eenvoudigweg het risico zoekverkeer te verliezen.

metatag

Een ander element is de metatag. Het is niet gepaard en heeft geen bijzondere waarde. De belangrijkste elementen zijn echter de attributen.

Met behulp van parameters en attributen kan de tag dus belangrijke informatie over uw pagina opslaan.

Laat me de charset-parameter aan het element toevoegen en daarin de gewenste documentcodering aangeven.

Professionele creatie van een website op internet met voorbeelden

Merk op hoe de parameter is opgegeven. We plaatsen het in de tag en vóór het rechter sluithaakje. Vervolgens plaatsen we een gelijkteken en geven we de codering van het document tussen aanhalingstekens aan.

Zorg ervoor dat u dit in uw documenten vermeldt. Anders verschijnen er lelijke hiërogliefen op uw website in plaats van tekst ( krakozyabry).

lichaamstag

Net daaronder staat de bodytag. Dit is de hoofdtekst van het document. Binnenin bevindt zich de inhoud die zichtbaar is voor de gebruiker. Dit kunnen tekst, afbeeldingen, links, video's, enzovoort zijn.

Merk op dat het lichaam altijd onder het hoofdlabel komt. Dat wil zeggen dat er eerst technische informatie over de pagina is en pas daarna de hoofdinhoud voor de gebruiker. Maar niet andersom!

Er moet een h1-tag in de body zitten. Dit is de titel van het materiaal. Dat wil zeggen, hoe uw artikel zal worden genoemd. Ik raad aan om de naam niet langer dan 55 tekens te maken, inclusief spaties.

html-syntaxis

Het is de moeite waard om iets te vermelden over de html-syntaxis. Probeer tags meteen in zo'n handige vorm te ordenen als in het bovenstaande voorbeeld. Je kunt ze natuurlijk in een chaotische volgorde rangschikken.

Professionele creatie van een website op internet met voorbeelden

De inhoud van het document bevindt zich hier en is zichtbaar voor alle gebruikers.

De browser maakt het niets uit.

Het zal de pagina hoe dan ook correct weergeven. Maar het zal erg lastig voor u zijn om de html-code van de pagina te bewerken. Daarom raad ik aan om niet te beeldhouwen en het zorgvuldig te doen.

Plaats individuele tags altijd op aparte regels. En volg de nestregel. Laat alle geneste tags één tab vanaf het bovenliggende element inspringen.

Documenttitel Materiaaltitel

Hoofdtekst

Dat wil zeggen dat de head-tag één tab moet worden ingesprongen ten opzichte van de html-tag. Het lichaam komt op hetzelfde niveau als het hoofd, omdat het ook in de html-container is genest.

Om snel en gemakkelijk met de broncode te kunnen werken, moet u er in het algemeen voor zorgen dat u de inspringing behoudt op basis van het nestniveau van de elementen.

De enige uitzonderingen zijn hoofd en lichaam. Ze worden slechts één keer per pagina gebruikt. Om niet te ver naar rechts te gaan als er veel nesting is, kunnen deze elementen daarom zonder inkepingen worden gemaakt.

Documentnaam

Hoofdtekst

Als er veel nesting plaatsvindt, helpt deze methode ruimte te besparen en niet verdwaald te raken in de html-structuur.

Zoals u weet, kunnen tags in elkaar worden genest. Tekst en afbeelding staan ​​bijvoorbeeld in verschillende tags. Ze hebben echter nog steeds een gemeenschappelijk ouderelement.

Als een tag wordt geopend, moet deze worden gesloten. Als het leeg is en geen afsluitend gedeelte heeft, kan er niets in zo'n tag worden ingevoegd.

Het is belangrijk om de volgorde strikt te volgen!

Als een andere tag binnen een tag is genest, komt het openingsgedeelte van de ene tag eerst. Dan het openingsgedeelte van een ander, enzovoort. Alleen dan mogen ze gesloten worden. Maar dit moet in omgekeerde volgorde gebeuren. Dat wil zeggen dat we eerst de tweede tag sluiten en pas aan het einde bereiken we de eerste.

Correct voorbeeld:

De inhoud van het document bevindt zich hier en is zichtbaar voor alle gebruikers.

Onjuist voorbeeld:

De inhoud van het document bevindt zich hier en is zichtbaar voor alle gebruikers.

Bovendien kunnen binnen één tag meerdere elementen worden genest. Maar het principe is hier hetzelfde. Eerst maken we hem open. Dan plaatsen we er een paar tags en sluiten het dan.

Voor maximaal gemak kunt u bovendien HTML-opmerkingen in de code gebruiken. Schrijf bijvoorbeeld op waarvoor dit stukje code verantwoordelijk is. Dit is erg handig tijdens de ontwikkeling.

Het commentaar zelf kan uit één regel of uit meerdere regels bestaan.

Documentnaam

Hoofdtekst

Het is geschreven tussen structuren.

Hoe maak je een HTML-bestand aan

Misschien weten sommigen van jullie niet hoe je een HTML-bestand moet maken. Er zijn veel speciale programma's voor deze taak:

• Beugels
• Notitieboekje
• Kladblok++
• Sublieme tekst
• Atoom en anderen

Als u Windows heeft, is Kladblok standaard al beschikbaar. Maar ze zijn niet handig in gebruik. Om te beginnen raad ik aan de gratis HTML-pagina-editor Notepad++ te gebruiken. Het heeft veel functies voor gemakkelijk werken met code.

Wanneer u de editor start, heeft u al een nieuw leeg bestand voor u liggen. Schrijf daarin het skelet van de html-pagina ( kader), die we hierboven hebben besproken. Hij moet altijd aanwezig zijn.

Professionele creatie van een website op internet met voorbeelden Hoe u een website op internet kunt maken

De inhoud van het document bevindt zich hier en is zichtbaar voor alle gebruikers.

U kunt de tekst veranderen om bij u te passen. Over het algemeen zal dit de eenvoudigste html-pagina zijn.

HTML-codering

Wanneer u pagina's maakt, neem dan altijd de codering op in de metatag. Dit is een servicetag die in de kop wordt geplaatst.

Over het algemeen is dit meta-element veelzijdig. Het kan niet alleen verantwoordelijk zijn voor de codering, maar ook voor vele andere dingen. We zullen hier echter in de volgende artikelen over praten.

Nu speelt het voor ons de rol van een coderingsaanwijzer. Er is hier een speciale vermelding. Het vertelt de browser dat het document is gemaakt in UTF-8-codering.

Waarom heb je überhaupt codering nodig?

Het is geen geheim dat er over de hele wereld verschillende talen worden geschreven en gesproken. Als we een pagina maken en in het Russisch schrijven, dan zullen ze in Duitsland in het Duits creëren en schrijven. Andere landen hebben al hun eigen taal.

Voorheen was het bij het maken van een HTML-pagina nodig om de codering op te geven, die we in het Russisch schrijven. De Duitsers moesten aangeven dat ze in het Duits schreven enzovoort.

Wanneer we een pagina bezoeken, begrijpt de browser al in welke taal de site is geschreven. Het begrijpt ook welke taal voor de tekst wordt gebruikt. Dienovereenkomstig probeert het deze tekstinhoud weer te geven, afhankelijk van de gegeven codering.

Helaas lukte dit niet altijd.

Als we Chinese sites zouden bezoeken, zouden we zwarte vierkanten of vraagtekens kunnen zien in plaats van hun symbolen. Dat wil zeggen, de browser begreep eenvoudigweg niet wat deze karakters waren.

De html-codering is verkeerd ingesteld

Als oplossing voor dit probleem is de universele utf-8-codering gemaakt.

Toen het een standaard werd, was het niet langer nodig om een ​​specifieke codering voor een specifieke taal te specificeren. Het was voldoende om universele utf-8 te specificeren en uw site zou normaal in alle browsers worden weergegeven.

Tegelijkertijd wordt het werken met de database ook vereenvoudigd. Houd er daarom rekening mee dat we de codering altijd in utf-8 zullen specificeren. Maar hier moet je nog op één ding letten.

Bewaar html utf-8

Om alles te laten werken en de browser de pagina weer te geven, is het raadzaam om het HTML-document zelf op te slaan in utf-8. Het programma Notepad++ helpt ons hier heel goed bij.

Er is hier een item "Coders". Als uw codering nu niet correct is ( zoals de mijne op de onderste foto), klik vervolgens op het item "Converteren naar UTF-8 zonder stuklijst".

In dit geval wordt uw HTML-bestand geconverteerd naar UTF-8-codering. Sla uw wijzigingen op.

In de rechter benedenhoek vindt u het opschrift “Dos\Windows ANSI as UTF-8”. Dit betekent dat het document in utf-8-modus is gemaakt en dat de weergave normaal zal zijn.

En meteen zo'n advies!

Ga naar “Opties” -> “Instellingen”. Er is hier een tabblad Nieuw document. Vink onmiddellijk het vakje aan voor “UTF-8 zonder BOM-tag”. Op deze manier worden alle nieuwe documenten onmiddellijk in deze codering aangemaakt.

Hoe een HTML-pagina op te slaan

De bestandsnaam kan van alles zijn. Maar standaard, en vooral als dit de hoofdpagina van de site is, slaat u deze op als index.html.

Wanneer we een siteadres typen zonder een specifieke pagina op te geven, betekent dit dat we de index.html-pagina opvragen. Dat wil zeggen dat wanneer we contact opnemen met de server, deze precies de indexpagina zal uitvouwen.

Als we een specifieke pagina specificeren, wordt deze uiteindelijk weergegeven. Maar als het adres niet is opgegeven, wordt de indexpagina geretourneerd. Dus standaard noemen we de pagina index.html.

En zoals je al zou moeten opmerken, moet de bestandsextensie html zijn. Dat wil zeggen, selecteer in het bestandstype “Hyper Text Markup Language” en klik op “Opslaan”.

Hoe een HTML-bestand te openen

Hoe u een HTML-bestand opent om een ​​visuele weergave van de pagina te bekijken. Hiervoor gebruiken we elke browser: Google Chrome, Opera, Edge, Mozilla Firefox, Safari en andere.

Niet voor niets slaan wij bestanden op met de html-extensie. Alleen dit soort documenten worden immers door browsers gereproduceerd. En de HTML-taal zelf is een standaard voor pagina-indeling voor latere reproductie door browsers.

Over het algemeen klikt u met de rechtermuisknop op het bestand.

Wijs in het menu naar “Openen met” en selecteer de gewenste browseroptie. Als ze niet worden weergegeven, klik dan op “Selecteer een andere applicatie”. Selecteer daar uit de lijst het gewenste programma voor het lezen van HTML-pagina's.

Als u de code moet bewerken, selecteert u de juiste editor. Ik raad aan om Notepad++ te gebruiken.

Hoe de html-code van een pagina te bekijken

Ook wil ik je vertellen hoe je de html-code van een pagina rechtstreeks in je browser kunt bekijken. Dit is in de praktijk erg handig. Ontdek bijvoorbeeld welke html-codestructuur een bepaalde site gebruikt.

Het is heel gemakkelijk om de code te bekijken. Druk gewoon op de toetsencombinatie Ctrl + U. De broncode van de sitepagina wordt geopend in een nieuw tabblad.

Broncode van de site

U kunt ook vlak voor het paginaadres in de adresbalk schrijven:

Browsers hebben ook een ingebouwde tool voor webontwikkelaars. De toegang daartoe in het menu zal voor elk programma anders zijn. Als u echter op F12 drukt, wordt dit hulpprogramma in elke browser geopend.

Leg indien mogelijk uw code uit waar nodig.

Gebruik opmerkingen om uw code uit te leggen: wat deze doet, wat deze doet en waarom de door u gekozen oplossing wordt gebruikt.

(Dit punt is optioneel omdat het geen zin heeft te verwachten dat code altijd goed gedocumenteerd is. Het nut van commentaar hangt af van de complexiteit van het project en kan verschillen voor HTML- en CSS-code.)

Taken Vink taken voor je to-do lijst af met TODO.

Markeer taken met het TODO-trefwoord. Gebruik geen andere veelgebruikte formaten zoals @@ .

Plaats contacten (gebruikersnaam of mailinglijst) tussen haakjes: TODO(contact) .

Beschrijf de taak na een dubbele punt, bijvoorbeeld: TODO: Taak.

Aanbevolen: (# TODO(Ivan Ivanov): Behandel de uitlijning #) Test
Aanbevolen:

• Komkommers
• Tomaten

HTML-opmaakregelsDocumenttype Gebruik HTML5.

(Het wordt aanbevolen om HTML te gebruiken met het inhoudstype text/html. Gebruik geen XHTML, omdat application/xhtml+xml slechte browserondersteuning heeft en de optimalisatieopties beperkt.)

HTML-geldigheid Gebruik waar mogelijk geldige HTML.

Gebruik geldige HTML-code, tenzij u door het gebruik niet de bestandsgrootte kunt bereiken die vereist is voor het gewenste prestatieniveau.

W3C HTML-validator (Engels) om de geldigheid van de code te controleren.

Validiteit is een belangrijke en meetbare kwaliteit van code. Het schrijven van geldige HTML bevordert het leren kennen van technische vereisten en beperkingen en zorgt voor een correct gebruik van HTML.

Niet aanbevolen: Controleer. Controleer gewoon
Aanbevolen: Cheque Even een cheque.

Semantiek Gebruik HTML zoals het bedoeld is.

Gebruik elementen (soms ten onrechte ‘tags’ genoemd) waarvoor ze bedoeld zijn: koppen voor koppen, p voor paragrafen, a voor links, enz.

Dit maakt de code gemakkelijker te lezen, bewerken en onderhouden.

Alternatieve media Zorg altijd voor alternatieve media-inhoud.

Probeer alternatieve inhoud te bieden voor media, zoals afbeeldingen, video's of animaties die zijn gedefinieerd met behulp van canvas. Voor afbeeldingen is dit een betekenisvolle alternatieve tekst (alt), en voor video en audio, indien mogelijk, een transcriptie van de tekst en het bijschrift.

Alternatieve inhoud kan mensen met een handicap helpen. Het is bijvoorbeeld moeilijk voor iemand met een slecht gezichtsvermogen om te begrijpen wat er op de foto staat als @alt er niet op is ingesteld. Andere mensen kunnen moeite hebben met het begrijpen van wat er in een video- of audio-opname wordt gezegd.

(Als de alt-tekst van de afbeelding overbodig is, of alleen voor decoratieve doeleinden wordt gebruikt op plaatsen waar CSS niet kan worden gebruikt, gebruik dan een lege alt-tekst alt="" )

Scheiding van verantwoordelijkheden Aparte structuur, inrichting en gedrag.

Houd structuur (opmaak), uiterlijk (stijlen) en gedrag (scripts) gescheiden en probeer de interactie daartussen tot een minimum te beperken.

Zorg ervoor dat documenten en sjablonen alleen HTML bevatten en dat HTML alleen dient om de structuur van het document te definiëren. Verplaats alle code die verantwoordelijk is voor het ontwerp naar stijlbestanden, en de code die verantwoordelijk is voor het gedrag naar scripts.

Probeer hun kruispunten tot een minimum te beperken door een minimum aantal stijlbestanden en scripts in uw sjablonen op te nemen.

Door structuur te scheiden van presentatie en gedrag, wordt code eenvoudiger te onderhouden. Het wijzigen van sjablonen en HTML-documenten duurt altijd langer dan het wijzigen van stijlbestanden of scripts.

Niet aanbevolen: HTML is waardeloos HTML is waardeloos

Ik heb hier al eerder over gelezen, maar nu is alles definitief duidelijk: HTML is complete onzin!!1 Ik kan niet geloven dat je, om het ontwerp te veranderen, elke keer alles opnieuw moet doen.
Aanbevolen: Mijn eerste herontwerp met alleen CSS Mijn nieuwe CSS-ontwerp

Ik heb hier eerder over gelezen, maar uiteindelijk heb ik het zelf gedaan: ik gebruik het principe van scheiding van zorgen en schuif het ontwerp niet in HTML

Hoe cool!

Geheugensteuntjes Gebruik geen geheugensteuntjes.

De enige uitzondering op deze regel zijn HTML-servicetekens (bijvoorbeeld< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

Optionele tags Gebruik geen optionele tags. (niet nodig)

Om de bestandsgrootte te verkleinen en de leesbaarheid van de code te verbeteren, kunt u optionele tags weglaten. De HTML5-specificatie bevat een lijst met optionele tags.

(Het kan enige tijd duren voordat deze aanpak op grote schaal wordt gebruikt, omdat deze heel anders is dan wat webontwikkelaars doorgaans wordt geleerd. Vanuit het oogpunt van consistentie, code en eenvoud is het het beste om alle optionele tags weg te laten in plaats van enkele.) .

Niet aanbevolen: we verspillen bytes - we verspillen geld.
Aanbevolen: Bytes zijn geld!

Zodat

"type" attribuut Geef het type attribuut niet op wanneer u stijlen en scripts aan een document toevoegt.

Gebruik het type-attribuut niet bij het verbinden van stijlen (behalve wanneer u iets anders dan CSS gebruikt) en scripts (behalve wanneer u iets anders dan JavaScript gebruikt).

Het opgeven van het type attribuut is in dit geval niet nodig omdat HTML5 standaard gebruik maakt van text/css (Engels) en text/javascript (Engels). Dit werkt zelfs in oudere browsers.

Niet aangeraden:
Aanbevolen:
Niet aangeraden:
Aanbevolen:

HTML-opmaakregelsOpmaak Maak een nieuwe regel voor elk blok-, tabel- of lijstelement en laat elk onderliggend element inspringen.

Ongeacht de stijlen die voor het element zijn opgegeven (met CSS kunt u het gedrag van het element wijzigen met behulp van de weergave-eigenschap), plaatst u elk blok- of tabelelement op een nieuwe regel.

Laat ook alle elementen inspringen die in een blok- of tabelelement zijn genest.

(Als u problemen heeft met witruimte tussen lijstelementen, kunt u alle li-elementen op één regel plaatsen. Het wordt aanbevolen dat Lint in dit geval een waarschuwing geeft in plaats van een fout.

Aanbevolen:

• Masja
• Glasha
• Cheburash

Aanbevolen: Winstbelastingen

$ 5.00	$ 4.50

CSS-stijlregels CSS-geldigheid Gebruik waar mogelijk geldige CSS-code.

Gebruik geldige CSS-code, behalve in gevallen waarin browserafhankelijke code vereist is of in validatorfouten.

Gebruik tools zoals de W3C CSS Validator om uw code te valideren.

Validiteit is een belangrijke en meetbare kwaliteit van code. Het schrijven van geldige CSS helpt overbodige code te elimineren en zorgt voor een correct gebruik van stijlbladen...

Klasse-ID's en -namen Gebruik jokertekens of betekenisvolle klassenamen en -identificatoren.

In plaats van codes te gebruiken of het uiterlijk van een element te beschrijven, probeer de betekenis van de creatie ervan uit te drukken in de naam van een klasse of identificatie, of geef het een sjabloonnaam...

Wildcard-namen zijn eenvoudigweg variantnamen voor elementen die geen speciaal doel hebben of niet te onderscheiden zijn van hun broers en zussen. Ze zijn meestal nodig als ‘helpers’.

Het gebruik van functionele namen of sjabloonnamen vermindert de noodzaak voor onnodige wijzigingen aan het document of de sjablonen.

Verouderd: /* Verouderd: betekenisloos */ #yee-1901 () /* Verouderd: beschrijving van het uiterlijk */ .button-green() .clear()
Aanbevolen: /* Aanbevolen: nauwkeurig en to the point */ #gallery () #login () .video () /* Aanbevolen: sjabloonnaam */ .aux () .alt ()

Identifier- en klassenamen Gebruik voor identifiers en klassen namen die zo lang als nodig maar zo kort mogelijk zijn.

Probeer zo kort mogelijk te formuleren wat dit element precies moet doen.

Dit gebruik van klassen en identificatiegegevens draagt ​​ertoe bij dat de code begrijpelijker en efficiënter wordt.

Typekiezers Vermijd het gebruik van klassenamen of ID's met elementtypekiezers (tag).

Tenzij absoluut noodzakelijk (bijvoorbeeld bij helperklassen), gebruik geen elementnamen met klassenamen of ID's.

Snelkoppelingen voor eigenschappen Gebruik waar mogelijk snelkoppelingen voor eigenschappen.

CSS biedt veel verschillende verkorte vormen (zoals font ), waarvan het gebruik waar mogelijk wordt aanbevolen, zelfs als slechts één van de waarden is opgegeven.

Het gebruik van een verkorte eigenschapsnotatie is handig voor meer efficiëntie en een beter begrip van uw code.

Niet aanbevolen: /* Niet aanbevolen */ border-top-style: geen; lettertypefamilie: palatino, georgia, serif; lettergrootte: 100%; lijnhoogte: 1,6; vulling-bodem: 2em; opvulling-links: 1em; opvulling rechts: 1em; opvulling bovenaan: 0;
Aanbevolen: /* Aanbevolen */ border-top: 0; lettertype: 100%/1,6 palatino, georgië, serif; opvulling: 0 1em 2em;

0 en eenheden Geef geen eenheden op voor nulwaarden

Geef geen eenheden op voor nulwaarden, tenzij daar een reden voor is.

0 in het hele deel van een breuk. Zet geen “0” in het hele deel van breuken.

Plaats geen 0 in het gehele deel in waarden tussen -1 en 1.

Citaten in links Gebruik geen aanhalingstekens in links

Gebruik geen aanhalingstekens ("" , "") met url() .

Hexadecimale kleurnamen Gebruik waar mogelijk een hexadecimale notatie van drie tekens.

De hexadecimale notatie van drie tekens voor kleuren is korter en neemt minder ruimte in beslag.

Voorvoegsels Prefixkiezers met voorvoegsels die uniek zijn voor de huidige toepassing. (niet nodig)

Gebruik in grote projecten, maar ook in code die voor andere projecten of op andere sites wordt gebruikt, voorvoegsels (als naamruimten) voor identificatiegegevens en klassenamen. Gebruik korte, unieke titels gevolgd door een koppelteken.

Het gebruik van naamruimten helpt naamconflicten te voorkomen en kan uw site gemakkelijker te onderhouden maken. Bijvoorbeeld bij het zoeken en vervangen.

Scheidingstekens in klassen en identifiers Scheid woorden in identifiers en klassenamen met behulp van een koppelteken.

Vermijd het gebruik van iets anders dan een koppelteken om woorden en afkortingen in selectors met elkaar te verbinden, om de leesbaarheid en het gemak van begrip van uw code te verbeteren.

Niet aanbevolen: /* Niet aanbevolen: de woorden “demo” en “image” zijn niet gescheiden */ .demoimage () /* Niet aanbevolen: er wordt een onderstrepingsteken gebruikt in plaats van een koppelteken */ .error_status ()
Aanbevolen: /* Aanbevolen */ #video-id().ads-sample()

Hacks Vermijd het gebruik van browserversie-informatie of CSS-hacks - probeer eerst andere methoden.

Het kan verleidelijk zijn om browserverschillen te bestrijden met CSS-filters, hacks of andere oplossingen. Al deze benaderingen moeten alleen als laatste redmiddel worden beschouwd als u een efficiënte en gemakkelijk te onderhouden codebasis wilt. Simpel gezegd: het toestaan ​​van hacks en browserdetectie zal het project op de lange termijn schade toebrengen, omdat het betekent dat het project de weg van de minste weerstand kiest. Waardoor het gebruik van hacks makkelijker wordt en ze steeds vaker gebruikt kunnen worden, waardoor ze te vaak gebruikt zullen worden.

CSS-opmaakregels Advertenties rangschikken Sorteer advertenties alfabetisch.

Definieer declaraties in alfabetische volgorde om consistente code te garanderen waarmee u gemakkelijk kunt werken.

Negeer bij het sorteren de browservoorvoegsels. Als er meerdere browservoorvoegsels worden gebruikt voor één eigenschap, moeten deze bovendien ook worden gesorteerd (zo moet bijvoorbeeld -moz vóór --webkit staan)

Inspringingen in blokken. Laat blokinhoud altijd inspringen.

Laat blokinhoud, zoals regels binnen regels of declaraties, altijd inspringen om de hiërarchie weer te geven en de code begrijpelijker te maken.

Na declaraties Plaats een puntkomma na elke declaratie.

Gebruik een puntkomma na elke declaratie voor codeconsistentie en om het toevoegen van nieuwe eigenschappen gemakkelijker te maken.

Na eigenschapsnamen Gebruik spaties na dubbele punten in declaraties.

Gebruik altijd één spatie na de dubbele punt (maar niet ervoor) in declaraties, voor de volgorde van de code.

Selectors en declaraties scheiden Scheid selectors en declaraties met een regeleinde.

Begin elke selector of declaratie op een nieuwe regel.

Scheidingsregels Scheid regels met regeleinden.

Plaats altijd een regeleinde tussen regels.

Metaregels CSSGroeperingsregels Groepeer regels en geef groepen aan met commentaar. (niet nodig)

Groepeer waar mogelijk de regels samen. Geef groepen aan met opmerkingen en scheid ze met regeleinden.

Conclusie Wees consistent

Als u code bewerkt, neem dan een paar minuten de tijd om te begrijpen hoe deze is geschreven. Als wiskundige operatoren gescheiden zijn door spaties, doe dan hetzelfde. Als opmerkingen tussen haakjes of streepjes staan, doe dan hetzelfde met uw opmerkingen.

Het idee van deze gids is om een ​​gemeenschappelijk vocabulaire te creëren waarmee ontwikkelaars zich kunnen concentreren op wat ze willen uitdrukken, in plaats van op hoe.

We bieden uniforme ontwerpregels waarmee je code in dezelfde stijl kunt schrijven, maar ook de codestijl die al in het project wordt gebruikt is belangrijk.

Als uw code heel anders is dan de bestaande code, kan dit het ritme van de lezer verstoren en het lezen ervan bemoeilijken. Probeer dit te vermijden.

Opmerking van de vertaler Ik zou ook willen opmerken dat Google zich primair richt op grote projecten met een hoge belasting, waarbij elke byte duur is, dus het is de moeite waard om te overwegen dat als ze aanbevelen om elke selector op een nieuwe regel te starten, of spaties te gebruiken in plaats van tabs , betekent dit in de eerste plaats dat de code wordt verkleind en gecomprimeerd voordat deze op de site wordt gebruikt.

Bedankt aan iedereen die tot nu toe heeft gelezen.

Tags: tags toevoegen