HTML-code. HTML-kleurcodes

HTML- Standaard hypertext-opmaaktaal. (Engels afkorting HyperTekst Opmaaktaal ).

De HTML-taal werd in de 20e eeuw uitgevonden om tekst weer te geven (in het begin was het alleen maar tekst) en naarmate deze zich ontwikkelde computertechnologie Video's, audio, afbeeldingen, enz. begonnen te verschijnen. (in de 21e eeuw werd deze informatie ‘inhoud’ genoemd), wat uiteraard leidde tot de noodzaak om het internet uit te breiden. Dankzij dit begon de HTML-taal zich te ontwikkelen.

Tegenwoordig zijn er naast HTML nog andere programmeertalen: PHP, CSS, MSQ, Java-scripts en anderen. Hun aantal groeit voortdurend, net als de kwaliteit van het schrijven van code.

De HTML-taal voert in wezen alleen pagina-opmaak uit, wat op de site moet worden weergegeven, en andere talen geven de pagina ‘kleuren’ en combineren deze tot één geheel, waardoor de site schoonheid en betekenis krijgt.

In de 21e eeuw is een concept als het Web-2.0-tijdperk van multimedia al volop in gebruik, waarbij de tekst al naar de achtergrond verdwijnt. Maar op op dit moment Tekst wordt op websites in de regel nog steeds gebruikt om bepaalde acties of elementen van de site te beschrijven, of het nu om video- of audiomateriaal gaat. Daarom moet je nog steeds de HTML-taal leren, zonder welke je geen tekst en andere elementen van de site kunt schrijven en prachtig kunt ontwerpen.

De HTML-taal kent vele versies, maar in de regel hebben deze niet veel veranderingen ondergaan. Momenteel de hoofdversie HTML-taal is HTML 4.01 Transitional - de overgangstaal van HTML 4.01 Transitiona naar HTML 5.0, laatstelijk beschikbaar gegeven tijd HTML-versies.

IN deze cursus HTML 4.01 Transitiona-taal zal worden overwogen aangezien de vijfde versie nog in ontwikkeling is.

Laten we dus beginnen met het leren van de HTML-taal. Ik zal je alleen een beschrijving geven van die tags die vaak voorkomen bij het schrijven van websites, en de rest wordt helemaal niet of zeer zelden gebruikt.

Tabel met HTML-tags en attributen.

Tags en attributen:	Beschrijving van tags en attributen:
	Gekoppelde tag (heeft een openings- en sluitingstag met een "/" in de sluittag). Is een generieke tag HTML. Dit is een gemeenschappelijke container waar iedereen in past. bestaande labels. Deze tag en de volgende drie zijn vereist voor elke tag HTML-pagina's.
	.Deze tag bevat de naam van de sitepagina. Zoekmachines zoeken eerst naar deze naam.
	Gekoppelde tag. Het staat binnenin geschreven tag-paar .Deze tag bevat; plakkerige tafel CSS-stijlen, sitepaginatitel, paginabeschrijving, scripts, paginacodering.
	Gekoppelde tag. Geschreven in de gekoppelde tag na de paartag . Deze tag bevat alle andere tags HTML die het uiterlijk en volume van de pagina geven. Het hele proces van het maken van een website vindt plaats in deze tag.
	Gekoppelde tag. Geschreven in de gekoppelde tag . Deze tag wordt gebruikt om koppen op de site te markeren. Hoe hoger het getal in de tag, hoe lager de kopwaarde. Dienovereenkomstig geldt: hoe kleiner de titel, hoe minder de invloed ervan zoekmachines op het gebied van site-optimalisatie. Deze tag speelt een grote rol, net als de tag bij het vinden van de site in zoekopdrachten.
	Gekoppelde tag. Geschreven in een gekoppelde tag . Het belangrijkste doel van deze tag is om teksten in paragrafen te verdelen.
	Gekoppelde tag. Geschreven in de gekoppelde tag . Is een link naar andere secties van hetzelfde HTML pagina of een link naar een andere site.
	. Het doel is hetzelfde als de tag, maar kan alle inhoud in delen verdelen door er spaties tussen te plaatsen. Heeft weinig lichamelijke activiteit.
	Ongepaarde tag. Geschreven in de gekoppelde tag . De tag laat dat zien deze plek er is een afbeelding.
	Gekoppelde tag. Geschreven in de gekoppelde tag . Voegt een tabel in de site in.
, ,	. Het belangrijkste doel van deze tags is om tekstgedeelten te maken vetgedrukt En cursief om het menselijk oog te trekken. Met deze tags kunt u het hoofdidee van de tekst benadrukken.
	Gekoppelde tag. Geschreven in de gekoppelde tag . De tag heeft geen betekenis, maar met deze tag kun je elk gebied markeren HTML pagina's waarmee u eventuele wijzigingen qua vormgeving in de CSS-stylesheet kunt doorvoeren.
	Gekoppelde tag. Geschreven in de gekoppelde tag . Het doel is hetzelfde als de tag , maar met een kleinere actieradius die binnen de tag werkt .
, , , , ,	Gekoppelde tags. Geschreven in de gekoppelde tag . Verdeel de tekst in lijsten met opsommingstekens.
Gekoppelde tags. Geschreven in de gekoppelde tag . Verdeel de tabel in rijen en kolommen.
		Gekoppelde tag. Geschreven in de gekoppelde tag . Selecteert de hoofdrij in de tabel, maakt de tekst vetgedrukt en lijnt deze uit op het midden van de cel.
src="", href=""	Twee attributen waarvan de essentie is dat ze het adres geven van de informatie die erin wordt aangegeven. Dat wil zeggen, ze geven de plaats aan waar deze of gene inhoud zich bevindt. En dit kan gewone tekst zijn, of een bron, of iets dergelijks grafische informatie; beeld, video, audio, enz. Maar deze kenmerken zijn strikt gescheiden per doel. Het src="" attribuut geeft alleen adressen aan grafische bronnen, dat wil zeggen de plaats waar ze zich bevinden. En het href="" attribuut geeft alleen adressen naar andere pagina's van de site of naar andere bronnen, dat wil zeggen dat het in feite een banale hyperlink is naar een andere bron die zich op een andere pagina van de site bevindt.
klasse = ""	Een attribuut dat aan vrijwel elke tag kan worden toegewezen. De essentie van dit attribuut is het geven van een naam aan een specifiek stuk inhoud wanneer het verder wordt onderzocht en aangepast met behulp van CSS-stijlbladen.
titel = "", alt = ""	De essentie hiervan is om bijvoorbeeld twee attributen aan een grafische bron te geven; afbeelding, beschrijving. Maar omdat het er twee zijn, is hun beschrijving anders. IN titel attribuut="" Er wordt een beschrijving geschreven die wordt gemarkeerd als u de muiscursor over dit object beweegt, zodat de bezoeker weet wat er onder dit object verborgen is. Meestal is dit een link. IN alt-attribuut="" Er wordt een beschrijving van dit object geschreven die voor de zoekmachine duidelijk maakt wat voor soort object het is, zodat het in de database kan worden opgenomen voor indexering. Deze beschrijving onzichtbaar voor bezoekers van de site, maar zichtbaar voor zoekmachines.
align="", valign=""	De essentie van deze twee attributen is om een ​​bepaald deel van de site horizontaal of verticaal uit te lijnen. Dat wil zeggen, ze maken de browser duidelijk in welk deel van de site deze zich moet bevinden. deze informatie. Het align="" attribuut lijnt specifieke of alle inhoud horizontaal uit. Het valign="" attribuut lijnt sommige of alle inhoud verticaal uit.
breedte = "", hoogte = ""	Twee attributen waarvan de essentie is om een ​​object op de site uit te rekken of te verkleinen. In wezen zorgen deze attributen ervoor dat bepaalde objecten bijvoorbeeld vervormen; tafels, in hoogte en breedte, waardoor hun afmetingen veranderen.
grens = ""	Tabelframe-attribuut. Met dit attribuut kunt u zichtbaar maken en onzichtbaar kader tafel en stel ook de dikte van het frame in.
cellpadding="", cellenpacing=""	De essentie van de twee attributen is hetzelfde als bij het border="" attribuut, maar het enige verschil is dat randen niet aan de hele tabel worden toegewezen, maar aan de rij- en kolomelementen ervan.
bgcolor = ""	Een attribuut dat de kleur van de tabelrand specificeert.

Als u een webpagina opent, bevat deze typische elementen die niet veranderen afhankelijk van het type en de focus van de site. Voorbeeld 4.1 toont de code eenvoudig document, met de belangrijkste tags.

Voorbeeld 4.1. Broncode webpagina's

Rubriek

Eerste paragraaf.

Tweede paragraaf.

Kopieer de inhoud dit voorbeeld en sla het op in de map c:\www\ als example41.html. Start daarna de browser en open het bestand via het menu-item Bestand > Bestand openen (Ctrl+O). In het documentselectiedialoogvenster selecteert u het bestand example41.html. De webpagina getoond in figuur 1 wordt geopend in de browser. 4.1.

Rijst. 4.1. Resultaat van het uitvoeren van het voorbeeld

Elementis bedoeld om het type van het huidige document aan te geven - DTD (documenttypedefinitie, beschrijving van het documenttype). Dit is nodig zodat de browser begrijpt hoe de huidige webpagina moet worden geïnterpreteerd, omdat HTML in verschillende versies bestaat. Daarnaast is er XHTML (EXtensible HyperText Markup Language), dat vergelijkbaar is met HTML, maar er qua syntaxis van verschilt. Om ervoor te zorgen dat de browser “niet in de war raakt” en begrijpt volgens welke standaard de webpagina moet worden weergegeven, is het noodzakelijk om de eerste coderegel in te stellen .

Er zijn verschillende soorten, verschillen ze afhankelijk van de HTML-versie die ze targeten. In tabel 4.1. De belangrijkste soorten documenten met hun beschrijvingen worden gegeven.

Het verschil tussen een strikte en een transitionele documentbeschrijving is een andere benadering van het schrijven van documentcode. Strikte HTML vereist een strikte naleving van de HTML-specificatie en is onvergevingsgezind ten aanzien van fouten. Transitional HTML is meer ontspannen over sommige codefouten, dus dit type is dat ook bepaalde gevallen bij voorkeur gebruiken.

In strikte HTML en XHTML is de aanwezigheid van de tag bijvoorbeeld vereist

Label


Tekstbasis html-codes. Laten we eens kijken naar de meest elementaire html-codes van sitepagina's

In de sitecode zelf doet het hoofdlettergebruik er niet toe; u kunt zowel “HTML, BODY...” als “html, body...” schrijven.

T bijv En dienen ervoor te zorgen dat de documentcode als html wordt herkend.

– geeft aan dat de “kop” van de pagina begint – de paginatitel en de technische informatie ervan.

– paginatitel. Wat tussen deze twee tags staat, wordt weergegeven in de browserheader.

– de “kop” van de pagina is voorbij.

Er zijn openingstags <тег> en sluiten . Er zijn tags die niet gesloten hoeven te worden. Sommige tags veroorzaken, zelfs als ze niet gesloten zijn, geen fouten, maar sluiten altijd als ze gesloten moeten worden.

Paginatekst – tussen deze tags bevindt zich alle inhoud van de pagina – tekst, afbeeldingen, links, enz.

– het document is beëindigd. Typisch is dit t tag y molen wordt helemaal aan het einde van het document toegevoegd.

Tekstopmaaktags

-

- dit zijn de kopjes.

Hoe kleiner het getal, hoe groter het lettertype in de titel; u kunt de grootte van elk type titel aanpassen. Er wordt aangenomen dat tags

,

de meest “favoriete” tags door zoekmachines; via deze tags bepalen zoekmachines het onderwerp van de inhoud. Labels

-

moet gesloten zijn.

Voorbeelden:

Titeltag van het tweede niveau

- Hkoptekst op het tweede niveau

Kop van het vierde niveau

- H koptekst op het vierde niveau

Tags worden ook vaak gebruikt om tekst op te maken - , , , , .

De tekst wordt vetgedrukt weergegeven De tekst wordt vetgedrukt weergegeven – tag analoog Cursieve tekst - analoog Onderstreepte tekst Doorgestreepte tekst Toegenomen En afgenomen tekst vergeleken met de huidige.
Superscript -X 2 Abonnement -X 2 Monospace-tekst - zoals een typemachine

Al deze tags zijn dubbelzijdig en moeten gesloten zijn. Tags kunnen in combinatie worden gebruikt. Bijvoorbeeld:

Vetgedrukte, cursieve en onderstreepte tekst

In de regel worden tags gesloten in de volgorde waarin ze zijn geopend. Als u de volgorde wijzigt, verandert er mogelijk niets, maar als u een complexe tekstopmaak heeft, krijgt u problemen.

Regelinvoer en tekstblokken

Titeltags (

-

) vertaal de regel erna (“druk op enter”), tenzij anders aangegeven in de stylesheets. Wanneer u tekst in “naked html” schrijft, wordt er geen rekening gehouden met uw regeleinden, de tekst loopt op een rij tot aan kopjes of speciale tags.

– vertaalt de regel. De afsluitende tag is niet nodig. Als je dat nodig hebt grote kloof U kunt verschillende van dergelijke tags tussen regels gebruiken, bijvoorbeeld




– vijf regelfeeds.

---

– horizontale scheidslijn:

Veel tags kunnen speciale attributen gebruiken, b.v.

---

U kunt de dikte opgeven:

---

http://site.ru/image.png - Ditafbeelding adres.

http://site.ru/"> Ga naar Site.ru

Waarhttp://site.ru/ - de site waarnaar de link leidt,Ga naar Site.ru – link naam , het zogenaamde anker.

De linkcode bevat het attribuutdoel=" _leeg " - de link wordt in een nieuw venster geopend en er staan ​​afbeeldingen in de coderand = "0" -de foto heeft geen lijst.

Lijsten

Lijsten worden gemaakt met de volgende html-codes:

• Eerste lijstitem


• Tweede lijstitem


• Derde item op de lijst

Tafels

Tabellen zijn een complexer element dan deze html-tags, je kunt er een heel bericht aan wijden, hier laat ik alleen een voorbeeld zien van de code voor de eenvoudigste tabel:

Inhoud

Na elke tag in de code wordt een regeleinde geplaatst, zodat u de html-code gemakkelijk kunt bewerken.

Inhoud

Dezelfde tabelcode kan als volgt worden ingevoegd:

Dit is de hoofdstructuur van de sitepagina. Als u de basis kent, kunt u doorgaan naar meer complexe. Basis html-codes bijgewerkt: 10 april 2017 door:

beheerder Reizend door de uitgestrektheid Wereld wijde web , je kon merken hoe anders ontwerp en mogelijkheden van webpagina's HTML.

. Maar niet iedereen van jullie weet dat al deze diversiteit wordt geïmplementeerd op basis van taal HTML Alles wat u op de pagina ziet - tekst, afbeeldingen, tabellen en andere elementen die de semantische inhoud van de webpagina vormen, inhoud genoemd, wordt gemaakt met behulp van opmaaktaal . Klik klik met de rechtermuisknop ga met de muis over een willekeurige webpagina en selecteer het item in het vervolgkeuzemenu"HTML-code bekijken" of"Broncode" – zal verschijnen teksteditor HTMLmet symbolen en iconen die voor u onbegrijpelijk zijn - dit is het.

-paginacode Elk WWW-document kan gestileerde en opgemaakte tekst, afbeeldingen en hyperlinks naar verschillende internetbronnen bevatten. Om al deze mogelijkheden te realiseren is het ontwikkeld speciale taal beschrijvingen van WWW-documenten genoemd HyperText-opmaaktaal (HTML), dat wil zeggen,.

Hypertext-opmaaktaal Beschrijving van de webpagina op HTML-taal

is een reeks instructies die door een browserprogramma worden geïnterpreteerd. Een document geschreven in HTML is tekstbestand

Volgens deze instructies plaatst het programma tekst op het scherm en worden afbeeldingen afzonderlijk opgeslagen grafische bestanden, en vormt hyperlinks met andere documenten of internetbronnen. Een HTML-bestand krijgt dus pas de vorm van een webdocument als het door de browser wordt geïnterpreteerd.

In standaard HTML is er echter één aanzienlijk nadeel. Om bijvoorbeeld de lay-out van alinea's qua inhoud en hun ontwerp te beschrijven, is het noodzakelijk om deze eigenschappen voor elke alinea te beschrijven, zelfs als er 10 of 20 alinea's op één pagina staan. En stel je voor dat de site 100 pagina's kan hebben. Als gevolg hiervan moet u hetzelfde stukje HTML-code twintig of tweehonderd keer in de pagina invoegen, waardoor de bestandsgrootte toeneemt.

Wat een hoofdpijn voor programmeurs! Om het leven van arme webmasters gemakkelijker te maken, zijn ze uitgevonden Trapsgewijze stijlbladen (CSS) - trapsgewijze tafels stijlen.

CSS werkt op een andere, gemakkelijkere en economischere manier. Om alinea's in de site-inhoud te ontwerpen, wordt één keer een code of ontwerpstijl geschreven. Deze code of stijlbeschrijving wordt opgeslagen in apart bestand. Verder is het alleen nodig wanneer HTML-hulp Markeer de tekst in paragrafen en CSS zorgt voor het ontwerp. De code wordt tientallen en honderden keren verkleind.

Het is erg handig om beschrijvingen van stijlen in een apart bestand te plaatsen, vooral als de site meer dan één pagina heeft. Om te veranderen bijvoorbeeld registratie alle paragrafen op de site, verander gewoon de code in het stijlblad.

CSS kan samen met HTML wonderen verrichten, allemaal dankzij de taakverdeling bij het maken van webpagina's. De opmaak van pagina-elementen is gebaseerd op HTML, en visueel ontwerp elementen worden gegeven met behulp van CSS-tabellen

CSS-stijlbladen- een poging om de details van het paginaontwerp te scheiden van de structuur en inhoud ervan.

Voorlopig is dit een Chinese brief voor jou. Maar ik zal niet doen alsof ik een goeroe ben en nog een tutorial schrijven “Wat is HTML en CSS”. Op internet vindt u een hele lading soortgelijke informatie, plus veel gepubliceerde studieboeken. Als je dieper op het onderwerp wilt ingaan, ligt de vlag in jouw handen. Wees niet bang HTML En CSS zijn heel eenvoudig en elke theepot kan ze beheersen. Maar het is nog niet nodig om hier overhaast op in te gaan.

Door eigen ervaring Ik weet dat het beter is om de hersenen van de theepot niet te overbelasten met onnodige informatie, anders zal het, d.w.z. de hersenen zullen van tevoren koken. Geloof de slimme jongens op verschillende sites niet die beweren dat het maken van een website eerst moet beginnen HTML leren en CSS. Ik heb voor jou goed nieuws– je hoeft de HTML-code niet zelf te schrijven, want slimme mensen bedacht CMS .

< Как работает браузер

HTML-pagina en de structuur ervan gedefinieerd door de hoofdtags

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

• HTML-structuur Door over het algemeen vormt de kern van elke webpagina.
• Tegenwoordig zijn er verschillende soorten HTML documenten. Elk documenttype heeft zijn eigen documenttype HTML-structuur(details onderaan de pagina).
• Correcte initiaal HTML-structuur is een onderpand compatibiliteit tussen browsersites.

In het systeem Startmenu of Start, ga 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 overwegen HTML-tags

• , waarmee de structuur van de pagina wordt gedefinieerd HTML- verplicht, bepalen
• 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: HTML 1. Schrijf de code in Kladblok

pagina's: 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. U kunt een bestand ook in elke browser vinden en openen in het venster dat verschijnt nadat u een combinatie van twee toetsen op het toetsenbord hebt getypt: Ctrl en O - houd Ctrl ingedrukt en druk vervolgens op Latijnse brief

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 wanneer Firefox-hulp . IN eerdere versies deze browser zou u de tekst die u schreef niet kunnen lezen, maar zou deze worden weergegeven vreemde symbolen HTML. Deze onjuistheid kan worden geëlimineerd door er eenvoudigweg in op te nemen

code van twee tags met een set attributen die ook vereist zijn.

Correcte HTML 4.01-structuur Dit zou de initiële structuur moeten zijn :

HTML-documentstructuur Voeg zelf alinea's en een titel toe en kijk wat eruit komt. Vergeet niet om na elke opslag van het document de inhoud van het browservenster te vernieuwen door op de knop te klikken

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