Hallo allemaal!

Zodra we beginnen met studeren, moeten we de basisbeginselen van HTML en CSS kennen, waardoor onze sites beter en aantrekkelijker worden voor zoekmachines. Deze hele week zal ik je vertellen over het werken met de websitecode en dit staat je te wachten:

• . We zullen leren hoe we websitecode kunnen bewerken met behulp van deze editors;
• . We helpen de zoekrobot de structuur van de pagina te begrijpen;
• . We zullen ontdekken hoe correct de sitecode is samengesteld en fouten vinden;

Zoals je kunt zien, hebben we deze week veel werk, dus abonneer je op de Context-UP blogupdates en ontvang alle lessen in je e-mail als je je nog niet hebt geabonneerd.

HTML-basisprincipes

HTML (Hyper Text Markup Language) is een opmaaktaal voor documenten op internet. Dat wil zeggen dat elke pagina van uw website een document is en dat de browser een middel is om dergelijke documenten te bekijken.

Het doel van HTML is om de browser te laten zien waar dit of dat documentelement zich bevindt. Met behulp van deze taal worden elementen op de pagina gemarkeerd en een bepaalde plaats innemen, die vervolgens op de monitor van de sitebezoeker worden weergegeven.

De opmaaktaal bestaat uit speciale tags waarmee de browser kan bepalen:

• Documentstructuur;
• De locatie van een bepaald element;
• Doel van het element;
• Inclusief bestanden van derden;
• En nog veel, veel meer.

Zoekrobots begrijpen dit ook, dus je moet speciale aandacht besteden aan hoe goed het document vanuit SEO-oogpunt is samengesteld en welke structuur het heeft.

HTML-structuur

Elk HTML-document heeft een initiële structuur die strikt moet worden gevolgd. Ze ziet er zo uit:

Paginatitel Pagina-inhoud ". Attributen, als een tag deze heeft, worden alleen aan het begin van de tag geschreven. De inhoud van een tag wordt beschouwd als de inhoud tussen het begin en het einde van de tag.

Met HTML kunt u blok- en inline-elementen beschrijven. De eerstgenoemde bezetten een bepaald gebied in het browservenster, kunnen absoluut worden gepositioneerd, dat wil zeggen op de gewenste plaats in het weergavegebied van de HTML-pagina, en hebben een specifieke grootte.

Inline-elementen worden over het algemeen in één thread weergegeven, dat wil zeggen dat ze, zoals gespecificeerd in het paginabestand, op het scherm worden weergegeven. De weergave van de totale flow kan worden beïnvloed wanneer de pagina wordt geladen. De plaatsing, zichtbaarheid en andere eigenschappen van blokelementen kunnen op elk moment worden beïnvloed via JavaScript-code.

Naast eenvoudige elementen biedt HTML de beschrijving van tabellen en formulieren. Er is veel vraag naar deze elementen bij het “dagelijkse website bouwen”.

Tabelbeschrijving: tags TABLE, TR, TD

Met behulp van de TABLE-tag kunt u een tabel maken, een bepaald aantal TR-rijen en een bepaald aantal TD-cellen in elke rij opgeven. In tegenstelling tot de gebruikelijke tabelindeling is de tabelindeling, vanwege de eigenaardigheden van HTML-opmaak, beperkt tot deze declaratie. Als de ontwikkelaar een rechthoekige tabel wil hebben waarin het aantal kolommen in alle rijen hetzelfde is, moet hij daarom houdt dit zelf in de gaten.

De voornaamste positie van HTML is om alles te doen wat gespecificeerd is, maar niets wat niet begrepen wordt. In sommige gevallen is het aantal kolommen in elke rij van de tabel niet zo belangrijk, maar als je cellen verticaal of horizontaal moet samenvoegen, moet je alles heel zorgvuldig tellen.

Een voorbeeld van een HTML-pagina die een eenvoudige tabel beschrijft, wordt duidelijk weergegeven in het artikel.

Hier wordt een tabel weergegeven met drie rijen bij drie kolommen, en in de eerste rij werd in plaats van de TD-tag de TH-tag gebruikt: de kolomkop. Deze twee tags zijn niet bijzonder verschillend, maar het is heel goed mogelijk om de eerste te gebruiken om de eerste rij van de tabel te onderscheiden, en in CSS kun je je eigen stijl aan TH koppelen, waardoor deze zich onderscheidt van andere TD's.

Formulierbeschrijving: tags FORM, INPUT

Formulieren zijn het populairste onderdeel van HTML-tags. Met behulp van formulieren kunt u informatie overdragen. Eigenlijk is de pagina zelf de uitvoer van informatie, maar het formulier is de invoer ervan.

Voorbeeld van een HTML-pagina die een eenvoudig formulier beschrijft:

Er zijn nog veel meer mogelijkheden om formulieren te gebruiken, maar dit zijn de belangrijkste mogelijkheden. U kunt invoervelden specificeren, een ontwerp geven en handlers om de door de gebruiker ingevoerde gegevens te analyseren. U kunt verborgen velden opgeven en achtergrondinformatie vanaf de pagina verzenden. U kunt knoppen aanwijzen voor het verzenden van informatie. Als u erop klikt, wordt het proces van het verzenden van informatie gestart.

HTML gebruiken

Het kennen van de hyperteksttaal is een baan in elke specialisatie op het gebied van internetprogrammering, maar als je programma's in PHP of JavaScript moet schrijven, dan moet je HTML + CSS perfect kennen.

In het vorige voorbeeld werd de PHP-taal aangegeven. PHP draait op de server, dus de pagina met dit formulier vloog van de server naar de browser met de ingevulde velden. In het bijzonder ontving de TestOnBlur-functie die wordt genoemd in de INPUT-tag (onblur-gebeurtenishandler) alle parameters als tekstvelden.

JavaScript draait in de browser, en om de knop om gegevens terug te sturen naar de server correct te laten werken, dat wil zeggen de constructie: onclick=jQuery("#to").val("cart"), moet u beschikken over een idee niet alleen van wat jQuery is, maar ook wat #to, val, cart is. Meer specifiek moet u de basis-HTML-tags kennen en de algemene regels voor het toepassen van CSS-stijlen daarop.

Dit is voldoende om uw kwalificaties in elke specialisatie op het gebied van internetprogrammering snel te verbeteren.

En het vertaalt zich als ‘hypertext-opmaaktaal’. Hypertext is een speciale methode om door internetpagina's te navigeren, geïmplementeerd in de vorm van hypertextlinks. Door op deze links te klikken, kunt u eenvoudig door de sitestructuur navigeren. Overgangen vinden in dit geval niet lineair plaats, d.w.z. u heeft altijd de mogelijkheid om naar elke pagina van de site te gaan waarvan de link momenteel zichtbaar is.

Opmaak verwijst naar bepaalde regels en eigenschappen die aan pagina-elementen worden toegewezen. Ze worden geïmplementeerd in de vorm van zogenaamde tags. Om bijvoorbeeld aan te geven dat bepaalde tekst op een pagina gecentreerd moet worden, kun je deze markeren met de centertag. U kunt de HTML-code van een specifieke pagina bekijken via het contextmenu. Om bijvoorbeeld toegang te krijgen tot deze code in de Firefox-browser, moet u met de rechtermuisknop op de pagina klikken en 'Paginabroncode' selecteren.

Hoe werkt HTML-code? HTML-code is een reeks korte tags met daarin pagina-elementen. Al deze code wordt opgeslagen in een bestand met de extensie .html of .htm. Wanneer u zo'n bestand in een browser opent, wordt de code erdoor geïnterpreteerd en wordt de voltooide pagina weergegeven in het programmavenster. Als u de HTML-opmaaktaal kent, kan bijna iedereen zijn eigen pagina maken. Wat zijn tags? Tags zijn afzonderlijke structuren binnen de HTML-code. Dit is platte tekst tussen punthaken "". Je kunt tags zien in de HTML-code van vrijwel elke pagina. De tags zelf worden niet op de pagina's weergegeven; ze tonen een specifiek element dat is gecodeerd met behulp van tags. Als er bijvoorbeeld een afbeelding op een pagina staat, bevat de HTML-code de img-tag. Beperkingen van HTML Ondanks het feit dat u met HTML-code een hypertekstpagina van redelijk hoge kwaliteit kunt bouwen, heeft deze zijn beperkingen. Pagina's die uitsluitend dergelijke code bevatten, zijn statisch, d.w.z. ze missen dynamiek, speciale effecten en andere features. Maar ze kunnen worden geïntroduceerd met behulp van andere talen, zoals JavaScript. De overgrote meerderheid van moderne websites wordt gemaakt met behulp van extra talen waardoor ze levendiger en interactiever worden.

Inscripties gemaakt in monospace-lettertypen worden gemaakt met behulp van de tags , en. De resultaten van het gebruik van deze tags zijn meestal identiek: een monospaced lettertype met een vaste tekengrootte en spatiëring.

Label

Een tag is een inline containerelement dat wordt gebruikt om kleine fragmenten programmacode in te voegen, bijvoorbeeld in een webdocument dat een programmeertutorial vertegenwoordigt. Browsers geven dergelijke code weer in een monospace-lettertype (bijvoorbeeld Courier New). Als je ero samen met het element gebruikt

De tag wordt gebruikt om tekst in te voeren zonder opmaak, dat wil zeggen met behoud van alle spaties, tabs en regeleinden. Binnen dit element kunt u de meeste tekstopmaakelementen toepassen.

Let op: In HTML worden regeleinden, opeenvolgende spaties en tabs genegeerd. Meerdere spaties op rij worden als één spatie beschouwd.

Voorbeeld: gebruik van elementen en

• Probeer het zelf »

Binnen een element dupliceert de browser elke spatie of regeleinde die hij tegenkomt, waarbij de oorspronkelijke opmaak behouden blijft.

If (document.getElementsByClassName) ( x = document.getElementsByClassName("paginering") if (x.length>y) ( x.style.visibility = "verborgen"; )

Binnen het "pre"-element dupliceert de browser elke spatie of regeleinde die hij tegenkomt, waarbij uw oorspronkelijke opmaak behouden blijft.

if (document.getElementsByClassName) ( x = document.getElementsByClassName("paginering") if (x.length>y) ( x.style.visibility = "verborgen"; )

Labels en

De tag markeert een stukje code als ingevoerd door de gebruiker via het toetsenbord. Sommige browsers markeren dergelijke tekst met een extra achtergrond.
De tag wordt gebruikt om computeruitvoer te genereren, zoals de tekst die in een consolevenster verschijnt nadat u een besturingsscript hebt ingevoerd. Dit zelden gebruikte element geeft eenvoudigweg de inhoud weer in een monospaced lettertype zoals , , .

Voorbeeld: elementen en

• Probeer het zelf »

Plaats de tekst die de gebruiker via het toetsenbord moet invoeren
containerelement "kbd".

Tekst invoeren: Dit is de tekst die via het toetsenbord wordt ingevoerd

Dit is de tekst die in de container "samp" wordt geplaatst

Label

De tag wordt gebruikt om variabelen in de programmacode verder te markeren. Het identificeert een variabele in een wiskundige uitdrukking of een programmaparameter en wordt meestal cursief weergegeven.

Voorbeeld: elementen

• Probeer het zelf »

Lichaamskinetische energie:

Lichaamskinetische energie:

Wк = mv2/2

Taken Laatste taak

In deze les heb je geleerd over tags die hun inhoud weergeven in een lettertype met vaste spatie, variabelen in de code markeren en tags vooraf opmaken. Ze zijn allemaal belangrijk bij het werken met wiskundige uitdrukkingen en programmacode.

Het is tijd om te herzien wat je hebt geleerd en drie eenvoudige taken uit te voeren:

Variabel

• Beslis zelf"

Gebruik HTML-elementen om de letter y aan te duiden als een variabele in de bovenstaande vergelijking.

Variabel

Paraboolvergelijking y = Nx2

Variabel

Paraboolvergelijking y = Nx2

Voorgeformatteerde tekst

• Beslis zelf"

Met behulp van het HTML-element zorgt u ervoor dat de tekst die in het code-element is geplaatst, in de browser verschijnt, waarbij alle witruimte en regeleinden behouden blijven zoals ze zijn.