Persoonlijke webpagina. Wat is een webpagina: de samenstelling ervan, hoe te maken en op te slaan
Wat is HTML
Tegenwoordig gebruiken 3,5 miljard mensen internet – dat is de helft van de wereldbevolking. Bij het bezoeken van websites realiseren veel mensen zich niet eens dat HTML is gebruikt om ze te maken. Zonder dit zouden alle webpagina's eruitzien als een doorlopend, onleesbaar canvas van lijnen. Laten we proberen erachter te komen wat deze taal is en waarom deze nodig is.
HTML en andere concepten
Elke activiteit die door de mens is uitgevonden, of het nu gaat om het leren van het alfabet aan kinderen of het produceren van ballistische raketten, leidt vroeg of laat tot... uniforme normen. Hetzelfde gebeurde met het maken van webpagina's. In 1991 ontwikkelde de Britse wetenschapper Tim Berners-Lee de eerste specificatie HTML-taal, waarmee u documenten kunt maken die u kunt weergeven verschillende apparaten, mensen die geen lay-outvaardigheden hebben. HTML is nu de standaard bij het maken van webpagina's.
HTML-taal
Afkorting HTML staat voor HyperTextMarkupLanguage. Dat wil zeggen: HTML is een taal hypertext-opmaak documenten die op internet zijn geplaatst. Door het gebruik ervan ontvangen browsers informatie over hoe verschillende elementen van webpagina's kunnen worden weergegeven. Sommige gebruikers verwarren HTML met programmeertalen, maar het kan niet worden gebruikt om acties uit te voeren, bijvoorbeeld het openen van een pop-upvenster. Dit is slechts een opmaak - vergelijkbaar met wat elke Microsoft Word-gebruiker is tegengekomen. U kunt het gebruiken om tabellen te maken, tekst op te maken, links naar foto's toe te voegen, enz.
HTML-code bestaat uit tags– commando's waarmee de markering wordt opgegeven. Elke tag staat tussen punthaken en is verantwoordelijk voor een specifieke taak. Door bijvoorbeeld de tag te gebruiken u kunt tekst selecteren vetgedrukt en de ploegen
,
En
kunt u een tabel tekenen.
U kunt op de eenvoudigste manier een website in html schrijven teksteditor, waarbij de tags correct worden geplaatst en de extensie .txt wordt vervangen door .html. Voor gebruikers die geen idee hebben wat HTML is, zijn er veel editors gemaakt die het werken met code eenvoudig en duidelijk maken. De meest populaire programma's zijn FrontPage, Dreamweaver en HomeSite. Ze maken allemaal het proces van het maken van websites eenvoudiger, maar ze verstoppen paginacodes met onnodige tags, waardoor hun volume toeneemt. Daarom geven veel, zelfs beginnende websitebouwers, er de voorkeur aan om hypertext-opmaaktaal te leren en HTML-code handmatig te schrijven.
Wat is een webpagina
Typisch een webpagina is een document in html-formaat, dat wordt geopend via een browser en een uniek adres op internet heeft. Naast tekst kan het ook het volgende bevatten:
foto's;
foto's;
audio- en videobestanden;
tafels;
lijsten;
links naar andere pagina's.
De verzameling teksten en andere informatieblokken van een pagina wordt content genoemd. Zijn verplichte elementen Er zijn ook hyperlinks waarmee u snel naar een andere pagina kunt gaan en een multimediabestand of programma kunt downloaden.
Normaal gesproken bestaat een webpagina uit:
“headers”, die basisinformatie bevatten: sitenaam, logo, motto, telefoonnummers, zoekformulier;
het hoofdblok waar de pagina-inhoud zich bevindt;
zijkolommen met lange lijsten: menu-items, kopjes;
“footer” met contacten, copyright, bezoektellers, individuele menu-items.
Een webpagina kan statisch of dynamisch zijn. De eerste zijn geschreven in HTML en blijven ongewijzigd op de servers. Dynamische pagina's bestaan niet totdat de gebruiker een verzoek verzendt om ze te genereren. Ze worden gemaakt door scripts die zijn geschreven door programmeurs in verschillende programmeertalen. Dynamische webpagina's maken het erg handig om mee te werken nieuwsportals, online winkels en andere bronnen die gevuld zijn met vaak veranderende informatie.
Wat is een website
Nu we hebben begrepen wat een webpagina is, kunnen we verder gaan met het concept van een website. Een website is een verzameling webpagina's, verenigd gemeenschappelijk thema en ontwerp. Startpagina site bevat veel links naar intern informatiebronnen, die elk een afzonderlijke webpagina zijn. De site kan uit één pagina bestaan, maar zal zeker links naar andere bronnen bevatten: videobestanden, pop-upvensters, documenten om te downloaden.
Elke site heeft zijn eigen site domeinnaam, die wordt aangegaan adresbalk browser. Het is veel korter en beknopter dan de adressen van interne webpagina's, dus het onthouden ervan zal niet moeilijk zijn. Sommige sites hebben twee of meer adressen die naar dezelfde bron leiden. Dit wordt vaak gedaan door bedrijven die klanten nodig hebben om hun website te kunnen vinden door de bedrijfsnaam zowel in het Latijn als in het Cyrillisch in te voeren. Afhankelijk van het volume en de aard van de inhoud worden sites onderverdeeld in 3 typen.
Hallo, lieve lezers bloggen. Met dit artikel beginnen we de basisprincipes van de HTML-taal te leren.
U weet waarschijnlijk al dat de hoofdtaal van internet is hypertekst taal HTML-opmaak(HyperText Opmaaktaal)
. In dit artikel zullen we het ontdekken basisconcepten HTML en leer hoe u eenvoudige WEB-pagina's kunt maken.
Laten we beginnen met het belangrijkste: laten we kijken hoe het werkt Wereld wijde web - internet. Om webpagina's te maken, maakt u bestanden geschreven in HTML en plaatst u deze op een webserver. Hierna kan elke browser die op een apparaat met internettoegang is geïnstalleerd, of het nu een computer, telefoon of tablet is, uw webpagina's vinden.
Webserver- Dit gewone computer met speciaal software met internettoegang. Het luistert voortdurend naar verzoeken van browsers voor webpagina's, afbeeldingen, audio- en videobestanden. Nadat een verzoek voor een van deze bronnen is ontvangen, zoekt de server ernaar en stuurt dit naar de browser.
Browser- Dit speciaal programma, bedoeld om bijvoorbeeld op websites te surfen Internet Explorer. Met een browser bladert u door websites door op links te klikken. Elke klik op deze manier zorgt ervoor dat de browser een aanvraag voor de HTML-pagina indient bij de webserver, een antwoord ontvangt en de pagina in het bijbehorende venster weergeeft. Het is wanneer de pagina wordt weergegeven dat de HTML-taal begint te werken; deze vertelt de browser alles over de structuur en inhoud van de webpagina. Commando's gebruiken - labels, vertelt HTML de browser waar tekstparagrafen beginnen, welk deel van de tekst een kop is en waar tabellen en zelfs afbeeldingen moeten worden ingevoegd. En tags zijn bijvoorbeeld woorden tussen punthaken
,
,
.
Een webwinkel is dringend nodig, en tijd voor HTML leren, CSS, PHP en andere technologieën zijn niet beschikbaar. Dan kunt u eenvoudig een webwinkel huren met volledig geïmplementeerde functionaliteit en optimalisatie voor zoekmachines.
HTML-taal en zijn tags
De eerste versie van de HTML-taal verscheen in 1992. Anno 2013 wordt de specificatie ontwikkeld nieuwe versie HTML nummer 5. De ontwikkeling van deze specificatie wordt uitgevoerd door de Wereldorganisatie Breed web Consortium, of kortweg W3C. De W3C-organisatie ontwikkelt andere webstandaarden. U kunt zich vertrouwd maken met deze standaarden op hun website www.w3.org. Overigens ondersteunen veel webbrowsers al enkele HTML 5-functies.
Ik stel voor om meteen HTML te leren met een voorbeeld. Laten we dus onze eerste webpagina maken. Om WEB-pagina's te maken Iedereen zal het doen teksteditor. Ik raad aan eerst de ingebouwde Windows te gebruiken Kladblok(in het algemeen raad ik aan om in de toekomst HTML-code te bewerken). Je kunt het vinden: "Start->Alle programma's->Accessoires->Kladblok". Laten we een pagina over auto's maken. Open daarom Kladblok en typ de volgende tekst erin:
Voorbeeld webpagina
Website over auto's.
Welkom op onze autowebsite. Hier vindt u veel interessante en nuttige artikelen over auto's. De site bevat beschrijvingen van veel geïmporteerde en binnenlandse auto's.
Sla vervolgens de gemaakte webpagina op in een bestand met de naam index.html. In dit geval moet u in het dialoogvenster voor het opslaan van bestanden de codering instellen op UTF-8 en de bestandsnaam tussen aanhalingstekens plaatsen, anders voegt Kladblok txt-extensie, en ons bestand krijgt de naam index.htm.txt:
Nu hoeft u alleen nog maar het gemaakte bestand in de browser te openen en het resultaat te bekijken. Hiervoor kunt u gebruik maken van de meegeleverde Windows-browserMicrosoft-internet Explorer, of een andere browser die op uw computer is geïnstalleerd, door te dubbelklikken op het index.html-bestand of door het bestand naar het browserpictogram te slepen. Open het en zie zoiets als dit:
Daarom hebben we in Kladblok een webpagina gemaakt die, hoewel een beetje simpel, al een grote kop bevat en een alinea met tekst die automatisch in regels wordt opgedeeld en waarvan een gedeelte vetgedrukt is.
Wat is een label?
Laten we nu meer praten over de paginastructuur. Laten we naar het fragment kijken:
Website over auto's
.
Hier zien we de tekst die als titel op de pagina verschijnt, omsloten door tags
En
. Wat is een tag in HTML?
HTML-tag- Dit gewone woorden en tekens tussen punthaken, bijvoorbeeld
,
,
. Taggen dus
is de openingstag, tag
afsluitende tag, en de tekst daartussen wordt de inhoud van de tag genoemd. Ook taggen
en labelen
worden gepaarde tags genoemd. Samen vormen de openingstag plus de inhoud plus de slottag een HTML-documentelement. Er zijn ook elementen die uit één openingstag bestaan:
Gekoppelde tag dus
definieert een koptekstelement van het eerste niveau. Er zijn in totaal zes niveaus van kopjes, dit zijn de elementen
—
.
Elementen kunnen blokvormig of inline (tekst) zijn. Blokelementen structurele opmaak van de pagina uitvoeren. Blokelementen worden altijd weergegeven op de pagina met nieuwe lijn en zijn ingesprongen van aangrenzende elementen. Inline-elementen direct de tekst opmaken of logische opmaak. Element
is een blokelement.
Dat is alles voor mij!!! Tot ziens in de volgende berichten!
Heren, goed humeur voor iedereen) Vandaag heb ik besloten een artikel over het onderwerp te schrijven: hoe u uw eigen webpagina kunt maken. Ik werd tot dit onderwerp geïnspireerd door lezers en vrienden die om de een of andere reden nog steeds geen onderscheid maken tussen de soorten sites en pagina's op internet. Ik noem iets zelden een webpagina))) Veel van mijn vrienden zeggen dat echter vaak. Speciaal voor hen heb ik besloten de belangrijkste soorten webpagina's te beschrijven die je voor jezelf kunt maken, zodat je online een soort representatie van jezelf kunt krijgen.
Voordat u een webpagina maakt, moet u zeker een e-mail of een e-mail maken e-mailadres. Ik heb de creatiemogelijkheden in dit artikel beschreven - . En als u een e-mailadres heeft, gaan we verder met de opties voor het maken van uw persoonlijke webpagina. Lees verder voor manieren om u te helpen uw eigen webpagina te maken.
Eén pagina-site
De oudste methode))) Hiervoor moet je de basisprincipes van de HTML-taal leren. Dit doen in onze tijd is helemaal niet nodig; er zijn een miljoen diensten, die hieronder zullen worden besproken. Als u echter wilt begrijpen hoe een website en, gedeeltelijk, het internet, werken, probeer dan zelf een website van één pagina te maken. Hoe je dit doet, heb ik beschreven in het artikel -. Er zijn opties voor het maken van een website van één pagina met behulp van websitebouwers en gratis platforms.
Pagina op het sociale netwerk VKontakte
Ik denk dat in onze tijd de zin: "Ik heb een pagina voor mezelf op internet gemaakt" vooral van toepassing is op het sociale netwerk Vkontakte. VK is het populairst sociaal netwerk in het GOS. Het maken van uw pagina hier duurt slechts 1 minuut. Bovendien tientallen nuttige functies voor activiteiten op internet. Ik heb veel over VKontakte geschreven en ben van plan nog meer te schrijven)) Met dit sociale netwerk kun je...
Met VKontakte kunt u ook een handige URL naar uw webpagina maken, in plaats van de standaard URL bij het registreren van http://vk.com/id8032931. Dan kun je het veranderen in een mooie - http://vk.com/vasheimya.vashafamiliya.
Facebook-pagina
Als VKontakte het populairste sociale netwerk in het GOS is, dan is Facebook het nummer 1 sociale netwerk ter wereld. Facebook wordt beschouwd als iets voor gevorderde Russischsprekende gebruikers))) Maar persoonlijk denk ik dat dit allemaal komt omdat Facebook erg populair en handig is.
Net als bij Vkontakte kunt u uzelf een mooi adres voor uw webpagina toewijzen. De volledige handleiding over het maken van een webpagina op Facebook heb ik beschreven in het artikel -.
Bloggen
Een blog is mijn meest aanbevolen optie voor het maken van uw eigen webpagina. De blog biedt duizenden mogelijkheden voor zelfrealisatie en is zeer gemakkelijk te gebruiken. Vaak net zo gratis als webpagina's op sociale media. Ik bied een selectie artikelen aan over het maken van een webpagina met behulp van een blog:
- snel, maar met kosten voor hosting en een apart domein.
is een blogplatform van Google. Geïntegreerd met veel Google-services. Erg handig als je een Google-fan bent))
is het meest dynamisch ontwikkelende blogplatform. Ik las statistieken in een van de Amerikaanse publicaties dat Tumblr populairder is onder Amerikaanse kinderen van 12-13 jaar oud dan Facebook!!! Ik denk dat dit een indicator is van het gemak en de ontwikkeling van dit platform.
— hier zijn handleidingen voor bijna alle bekende blogplatforms, inclusief de bovenstaande.
Dagboek
Hier vindt u alle belangrijke opties voor het maken van uw webpagina, of, met andere woorden, aanwezigheid op het web. Letterlijk 1 minuut en je bent al ondergedompeld in de ruimte wereldwijde web. Veel surfplezier!
: HTML - hypertext-opmaaktaal (of hypertext-opmaaktaal).
Laten we hem dus beter leren kennen.
Maak eerst een bestand op uw computer met een willekeurige naam en extensie.html (de naam moet aan staan Engels- bijvoorbeeld index.html). Om zo'n bestand te maken, maakt u een gewoon tekstdocument ("Start" - "Alle programma's" - "Accessoires" - "Kladblok") en opslaan ("Bestand" - "Opslaan als") waar dan ook door de naam en extensie in te voeren (het komt voor dat wanneer u een extensie introduceert, Kladblok deze nog steeds opslaat als tekstbestand, maar we hebben het nodig webbestand. Om dit te doen, selecteert u voordat u opslaat het bestandstype - "Alle bestanden (*.*)").
Dit is niet het geval voorwaarde(aangezien u de naam van de eerste pagina in de serverinstellingen kunt wijzigen), maar een regel van goede manieren. De naam van de eerste pagina is bij voorkeur index (index.html), aangezien de server bij toegang een bestand met dezelfde naam produceert: index.
Indien correct opgeslagen, zou het bestandspictogram moeten veranderen in het browserpictogram (door standaard internet Ontdekkingsreiziger).
Open dit bestand nu met Kladblok en kopieer de volgende code daarheen.
Dit is de eerste webpagina!
Opslaan en openen in een browser.
Gefeliciteerd, u heeft zojuist uw eerste webpagina gemaakt.
Tekst "Dit is de eerste webpagina!" Je kunt het in een ander veranderen, bijvoorbeeld: "Dit is mijn eerste webpagina!!!" sla op, update de browser en bewonder het resultaat.
Maar onze pagina heeft geen titel.
We moeten dit oplossen - we zullen de code een beetje corrigeren, of beter gezegd, we zullen er een “Site Head” aan toevoegen met behulp van tags
En .</p><p>
<html>
<head>
<title>Eerste pagina
Dit is mijn eerste webpagina!!!
Bewaar, update, bewonder. Onze pagina heeft nu een titel.
Beschrijving van tags.
Het allereerste label is (deze tag is gepaard, d.w.z. de afsluitende tag vereist) - het wordt gebruikt als een container waarin alle inhoud van de pagina (tekst, afbeeldingen, enz.) zich bevindt. Hoewel deze tag ( En) is optioneel, maar het gebruik ervan duidt op goede manieren. Daarom raad ik je aan om het te gebruiken.
Volgende label - . Dit is ook een gepaarde tag (
En). Deze tag verschijnt niet op de pagina (behalve in de header), maar is verplicht om aan te geven aanvullende parameters pagina's - paginabeschrijving (gebruikt door zoekmachines), trefwoorden(gebruikt door zoekmachines), stijlen, scripts, koptekst, enz.
Label
</b>- gekoppelde tag ( <title>En), is vereist om de paginatitel aan te geven. Bovendien mag deze tag alleen in de tag worden geplaatst !
En de laatste tag in onze code is - . Ook een gepaarde tag (
En
), waarbinnen zich het gehele zichtbare deel van de site bevindt, d.w.z. teksten, afbeeldingen, links, in algemene informatie die u op de site wilt plaatsen.
In de volgende les zullen we het hebben over de soorten tags en de regels voor het schrijven ervan.
Voordat we aan onze reis door HTML- en CSS-websitebouwlessen beginnen, is het belangrijk om de verschillen tussen de twee talen, de syntaxis van elke taal en enkele basisterminologie te begrijpen.
Wat zijn HTML en CSS?
HTML (HyperText Markup Language) definieert de structuur van de inhoud en de betekenis ervan, en definieert inhoud zoals koppen, alinea's of afbeeldingen. CSS (Cascading Style Sheets) is een presentatietaal die is gemaakt om het uiterlijk van inhoud te stylen, met behulp van bijvoorbeeld lettertypen of kleuren.
Deze twee talen – HTML en CSS – zijn onafhankelijk van elkaar en moeten dat ook blijven. CSS mag niet in een HTML-document worden geschreven en omgekeerd. Als algemene regel geldt dat HTML altijd de inhoud vertegenwoordigt en CSS altijd de stijl definieert.
Nu we het verschil tussen HTML en CSS begrijpen, gaan we dieper in op HTML.
Basis HTML-termen
Voordat u met HTML gaat werken, zult u waarschijnlijk enkele nieuwe en vaak vreemde termen tegenkomen. In de loop van de tijd zul je er allemaal meer vertrouwd mee raken, maar voor nu zou je moeten beginnen met de drie basis-HTML-termen: elementen, tags en attributen.
Elementen
Elementen specificeren hoe de structuur en inhoud van objecten op een pagina moeten worden gedefinieerd. Enkele veelgebruikte elementen omvatten meerdere niveaus van kopjes (gedefinieerd als elementen met
Attributen zijn eigenschappen die worden gebruikt om te voorzien aanvullende informatie over het onderdeel. De meest voorkomende attributen zijn onder meer het id-attribuut, dat het element identificeert; het class-attribuut, dat het element classificeert; het src-attribuut, dat de bron van de ingebedde inhoud specificeert; en een href-attribuut, dat een link naar de bijbehorende bron specificeert.
Attributen worden gedefinieerd in de openingstag na de elementnaam. Over het algemeen omvatten attributen een naam en een waarde. Het formaat voor deze attributen bestaat uit de attribuutnaam gevolgd door een gelijkteken, en vervolgens de attribuutwaarde tussen aanhalingstekens. Elementen bijvoorbeeld met href attribuut ziet er als volgt uit:
Shay Howe
Demonstratie van basis HTML-termen
Deze code zal de tekst "Shay Howe" op een webpagina weergeven en wanneer op deze tekst wordt geklikt, wordt de gebruiker naar http://shayhowe.com geleid. Het link-element wordt gedeclareerd met behulp van een openingstag en afsluitende tag die de tekst bedekt, evenals het attribuut en de waarde van het linkadres dat is aangegeven via href="http://shayhowe.com" in de openingstag.
Rijst. 1.01. HTML-syntaxis in schematische vorm omvat element, attribuut en tag
Nu u weet wat HTML-elementen, tags en attributen zijn, gaan we eens naar onze eerste webpagina kijken. Als iets er hier nieuw uitziet, hoeft u zich geen zorgen te maken: we zullen het gaandeweg opsplitsen.
De HTML-documentstructuur aanpassen
HTML-documenten zijn eenvoudig tekstdocumenten, opgeslagen met de extensie .html, niet .txt. Om HTML te gaan schrijven, heeft u eerst een teksteditor nodig die u gemakkelijk kunt gebruiken. Helaas hoort dit er niet bij Microsoft Word of Pages, aangezien dit complexe editors zijn. De twee populairste teksteditors voor het schrijven van HTML en CSS zijn Dreamweaver en Sublieme tekst. Gratis alternatieven ook Notepad++ voor Windows en TextWrangler voor Mac.
Alle HTML-documenten bevatten verplichte structuur, dat de volgende verklaringen en elementen bevat:
,
,
En
.
Aankondiging documenttype ofbevindt zich helemaal aan het begin van een HTML-document en vertelt browsers welke versie van HTML wordt gebruikt. Omdat we de laatste zullen gebruiken HTML-versie, zal ons documenttype eenvoudig zijn. Hierna komt het element geeft het begin van een document aan.
Binnen element
definieert bovenste deel document, inclusief diverse metadata (begeleidende informatie over de pagina). Inhoud binnen een element verschijnt niet op de webpagina zelf. In plaats daarvan kan het de titel van het document bevatten (die verschijnt in de titelbalk van het browservenster), links naar externe bestanden of andere nuttige metagegevens.
Alle zichtbare inhoud van de webpagina wordt in het element opgenomen
. De structuur van een typisch HTML-document ziet er als volgt uit:
Hallo wereld!
Hallo wereld!
Dit is een webpagina.
Demonstratie van HTML-documentstructuur
Deze code toont het document, beginnend met de documenttypeverklaring,, dan komt meteen het element . Binnen elementen komen
En . Element bevat de paginacodering via de tag en de documenttitel via het element . Element <body>omvat de titel via het element <h1>en een stukje tekst er doorheen<р>. Omdat zowel de titel als de alinea binnen het element zijn genest <body>, ze zijn zichtbaar op de webpagina.</p><p>Wanneer een element zich in een ander element bevindt, ook wel genest genoemd, is het een goed idee om het te laten inspringen om de documentstructuur overzichtelijk en leesbaar te houden. In de vorige code beide elementen <head>En <body>genest en verschoven binnen het element <html>. De inkepingsstructuur voor elementen gaat verder met nieuwe elementen die erin worden toegevoegd <head>En <body>
.</p><h3>Zelfsluitende elementen</h3><p>In het vorige voorbeeld is het element <meta>was de enige tag die geen afsluitende tag bevatte. Maak je geen zorgen, dit is met opzet gedaan. Niet alle elementen bestaan uit openings- en sluitingstags. Sommige elementen ontvangen eenvoudigweg inhoud of gedrag via attributen binnen een enkele tag. <meta>is een van deze elementen. Elementinhoud <meta>in het voorbeeld wordt het toegewezen met behulp van het charset-attribuut en een waarde. Andere typische zelfsluitende elementen zijn onder meer:</p><ul><li><br>
</li><li><embed>
</li><li><hr>
</li><li><img>
</li><li><input>
</li><li><li><meta>
</li><li><param>
</li><li><source>
</li><li><wbr>
</li>
</ul><p>Gereduceerde structuur gemaakt met behulp van een documenttypedeclaratie<!DOCTYPE html>en elementen <html>
, <head>En <body>, komt vrij vaak voor. We willen deze documentstructuur handig houden, omdat we deze vaak zullen gebruiken bij het maken van nieuwe HTML-documenten.</p><h3>Codevalidatie</h3><p>Hoe zorgvuldig we onze code ook schrijven, fouten zijn onvermijdelijk. Gelukkig hebben we bij het schrijven van HTML en CSS validators om ons werk te controleren. Het W3C biedt HTML- en CSS-validators die code op fouten scannen. Door onze code te beoordelen, wordt deze niet alleen correct weergegeven in alle browsers, maar leren we ook best practices bij het schrijven van code.</p><h2>In de praktijk</h2><p>Als webdesigners en front-end-ontwikkelaars hebben we de luxe om een aantal geweldige conferenties bij te wonen die gewijd zijn aan ons vak. In de loop van de volgende lessen gaan we onze eigen Stijlenconferentie organiseren en er een website voor maken. Zoals dit!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Laten we een beetje afstand nemen van HTML en eens kijken naar CSS. Vergeet niet dat HTML de inhoud en structuur van onze webpagina's definieert, terwijl CSS deze definieert <a href="https://redcomrade.ru/nl/windows-8/firmennyi-shrift-firmennyi-stil-vizualnyi-razdel-maketa-kakim-dolzhen-byt/">visuele stijl</a> en uiterlijk.</p><h2>Basis CSS-termen</h2><p>Naast HTML-termen zijn er enkele basis-CSS-termen waarmee u vertrouwd moet raken. Deze termen omvatten selectors, eigenschappen en waarden. Net als bij HTML-terminologie geldt: hoe meer u met CSS werkt, hoe meer deze termen een tweede natuur worden.</p><h3>Selectoren</h3><p>Wanneer u elementen aan een webpagina toevoegt, kunnen deze worden gestyled <a href="https://redcomrade.ru/nl/case/neskolko-sovetov-kak-pri-pomoshchi-css-ubrat-podcherkivanie-ssylok-v-html-kak-cherez/">met behulp van CSS</a>. Een selector bepaalt op welk element of welke elementen in HTML stijlen (zoals kleur, grootte en positie) moeten worden toegepast en toegepast. Selectors kunnen een combinatie van verschillende statistieken bevatten om unieke elementen te selecteren, afhankelijk van hoe specifiek we willen zijn. We willen bijvoorbeeld elke paragraaf op een pagina selecteren of slechts één specifieke paragraaf selecteren.</p><p>Selectors worden doorgaans geassocieerd met een attribuutwaarde, zoals een id- of klassewaarde, of een elementnaam, zoals <h1>of<р>
.</p><p>In CSS worden selectors gecombineerd met accolades (), die de stijlen omsluiten die op het geselecteerde element worden toegepast. Deze selector richt zich op alle elementen <span><p>P(...)</p><h3>Eigenschappen</h3><p>Zodra een element is geselecteerd, bepaalt de eigenschap de stijlen die erop worden toegepast. Eigenschapsnamen komen na de selector, binnenin <a href="https://redcomrade.ru/nl/graphics-card/skachat-kursy-knigi---nuzhny-li-figurnye-skobki-v-odnostrochnyh-operaciyah-v/">krullende beugels</a>() en onmiddellijk vóór de dubbele punt. Er zijn veel eigenschappen die we kunnen gebruiken, zoals achtergrond, kleur, lettergrootte, hoogte en breedte en andere vaak toegevoegde eigenschappen. In de volgende code definiëren we de eigenschappen voor kleur en lettergrootte die op alle elementen van toepassing zijn <span><p>P ( kleur: ...; lettergrootte: ...; )</p><h3>Waarden</h3><p>Tot nu toe hebben we alleen een element geselecteerd via een selector en bepaald welke stijl we erop willen toepassen via eigenschappen. Nu kunnen we het gedrag van deze eigenschap instellen via een waarde. Waarden kunnen worden opgegeven als tekst tussen een dubbele punt en een puntkomma. Hieronder selecteren we alle elementen <p
>En stel de eigenschapswaarde voor kleur in op oranje en de eigenschapswaarde voor lettertypegrootte op 16 pixels.</p><p>P ( kleur: oranje; lettergrootte: 16px; )</p><p>Om dit uit te testen, begint onze regelset in CSS met een selector, onmiddellijk gevolgd door accolades. Deze accolades bevatten declaraties die bestaan uit paren eigenschappen en waarden. Elke declaratie begint met een eigenschap, gevolgd door een dubbele punt, de eigenschapswaarde en ten slotte een puntkomma.</p><p>Een veel voorkomende praktijk is om paren eigenschappen en waarden binnen accolades te verschuiven. Net als bij HTML zorgt inspringen ervoor dat onze code overzichtelijk en duidelijk blijft.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Rijst. 1.03. CSS-syntaxisstructuur omvat selector, eigenschappen en waarden</p><p>Het kennen van een paar basistermen en de algemene CSS-syntaxis is een goed begin, maar we moeten nog een paar punten behandelen voordat we de diepte induiken. In het bijzonder moeten we nader bekijken hoe selectors in CSS werken.</p><h2>Werken met selecteurs</h2><p>Selectors geven, zoals eerder vermeld, aan welke HTML-elementen worden opgemaakt. Het is belangrijk dat u volledig begrijpt hoe u selectors gebruikt en hoe ze werken. De eerste stap zou moeten zijn om elkaar te leren kennen <a href="https://redcomrade.ru/nl/multimedia/lg-s-vognutym-ekranom-smartfon-bluetooth---eto-standart-bezopasnogo/">verschillende soorten</a> selectoren. We beginnen met de meest elementaire selectors: type-, klasse- en identificatieselectors.</p><h3>Typekiezers</h3><p>Typekiezers targeten elementen op basis van hun type. Als we bijvoorbeeld alle elementen willen targeten <div>we moeten div-selector gebruiken. De volgende code toont de typekiezer voor elementen <div>, evenals de bijbehorende HTML.</p><p>Afd.(...)</p><p>
<div>...</div>
<div>...</div>
</p><h3>Klassen</h3><p>Met klassen kunt u een element selecteren op basis van waarde <a href="https://redcomrade.ru/nl/processors/javascript-poisk-po-tegu-javascript-i-jquery-vyborka-elementa-po-klassu-atribut/">klasse attribuut</a>. Klassenselectors zijn iets specifieker dan typeselectors, omdat ze een specifieke groep elementen selecteren in plaats van alle elementen van hetzelfde type.</p><p>Met klassen kunt u dezelfde stijlen rechtstreeks toepassen <a href="https://redcomrade.ru/nl/multimedia/verstka-s-pomoshchyu-bootstrap-dopolnitelnye-adaptivnye-klassy-raznye-elementy/">verschillende elementen</a>, waarbij dezelfde klasse-attribuutwaarde wordt gebruikt voor meerdere elementen.</p><p>IN <a href="https://redcomrade.ru/nl/power-supply/zaproshennyi-element-ne-podklyuchen-k-modeli-dom-eshche-odin-blog-veb-razrabotchika/">CSS-klassen</a> worden aangegeven met een voorlooppunt, gevolgd door de klasse-attribuutwaarde. Hieronder selecteert de klassenkiezer alle elementen die de waarde van het geweldige klasse-attribuut bevatten, inclusief elementen <div>En <span><p>Geweldig(...)</p><p>
<div class="awesome">...</div>
</p><h3>Identificatiegegevens</h3><p>Identifiers zijn zelfs nog nauwkeuriger dan klassen, omdat ze zich slechts op één uniek element tegelijk richten. Net zoals klasseselectors de waarde van het class-attribuut gebruiken, gebruiken identifiers de waarde van het id-attribuut als selector.</p><p>Ongeacht het elementtype dat wordt weergegeven, kan de id-attribuutwaarde slechts één keer op een pagina worden gebruikt. Als er ID's aanwezig zijn, moeten deze worden gereserveerd voor belangrijke elementen.</p><p>In CSS worden identificatiegegevens weergegeven door een hash-symbool ervoor, gevolgd door de waarde van het id-attribuut. Hier selecteert de id alleen het element dat het id-attribuut met de waarde shayhowe bevat.</p><p>#shayhowe (...)</p><p>
<div id="shayhowe">...</div>
</p><h3>Extra selectors</h3><p>Selectors zijn extreem krachtige dingen en de hierboven beschreven selectors behoren tot de meest voorkomende selectors die we tegenkomen. Deze selectors zijn nog maar het begin. Er zijn veel geavanceerde selectors beschikbaar en deze zijn direct beschikbaar. Als u er eenmaal vertrouwd mee bent, wees dan niet bang om enkele van de meer geavanceerde versies te bekijken.</p><p>Oké, laten we beginnen met alles samen te voegen. We voegen elementen toe aan de pagina in onze HTML, vervolgens kunnen we die elementen selecteren en opmaken met behulp van CSS. Laten we nu de punten tussen HTML en CSS verbinden om de twee talen te laten samenwerken.</p><h2>CSS verbinden</h2><p>Om onze CSS met onze HTML te laten praten, moeten we vanuit de HTML naar het CSS-bestand verwijzen. Het is een goede gewoonte om al onze stijlen in één op te nemen <a href="https://redcomrade.ru/nl/graphics-card/vnutrennie-i-vneshnie-komandy-dos-sozdanie-faila-v-ms-dos-osnovnye/">extern bestand</a>, waarnaar binnen het element een verwijzing staat <head>ons HTML-document. Eén gebruiken <a href="https://redcomrade.ru/nl/graphics-card/vneshnyaya-ramka-css-primer-raznye-stili-oformleniya-granicy-ramki/">externe CSS</a> stelt ons in staat dezelfde stijlen op de hele site toe te passen en er snel wijzigingen in aan te brengen.</p><h3>Andere opties voor het toevoegen van CSS</h3><p>Andere opties <a href="https://redcomrade.ru/nl/windows-7/kak-podklyuchit-css-fail-k-dokumentu-html-sposoby-podklyucheniya-css-v-html/">CSS-verbindingen</a> omvatten het gebruik van interne en inline stijlen. U kunt deze opties in werkelijkheid tegenkomen, maar ze worden over het algemeen afgekeurd omdat ze het updaten van sites omslachtig en omslachtig maken.</p><p>Om onze <a href="https://redcomrade.ru/nl/monitors/vneshnie-tablicy-stilei-podklyuchayutsya-vnutri-tegov-vnedrenie-css-v-html-dokument/">externe tafel</a> stijlen, willen we opnieuw de door ons gekozen teksteditor gebruiken om een nieuw tekstbestand met de extensie .css te maken. Ons CSS-bestand moet in dezelfde map of submap worden opgeslagen als ons HTML-bestand.</p><p>Binnen een element <head>element toegepast <link>, dat de relatie tussen HTML- en CSS-bestanden definieert. Omdat we binden met CSS, gebruiken we <a href="https://redcomrade.ru/nl/windows-8/chto-takoe-noindex-nofollow-kak-pravilno-ispolzovat-atribut-rel-nofollow--/">rel-attribuut</a> met een stylesheetwaarde om hun relatie aan te geven. Bovendien wordt het href-attribuut gebruikt om de locatie of het pad van het CSS-bestand aan te geven.</p><p>In het volgende voorbeeld van een HTML-document is het element <head>verwijst naar een extern stijlbestand.</p><p>
<head>
<link rel="stylesheet" href="main.css">
</head>
</p><p>Om CSS correct weer te geven, moet de padwaarde van het href-attribuut direct overeenkomen met waar het CSS-bestand is opgeslagen. In het vorige voorbeeld wordt het bestand main.css opgeslagen op dezelfde locatie als het HTML-bestand, ook wel de hoofdmap genoemd.</p><p>Als het CSS-bestand zich in een submap bevindt, moet de waarde van het href-attribuut overeenkomstig met dat pad overeenkomen. Als ons bestand main.css bijvoorbeeld is opgeslagen in een submap met de naam stylesheets, dan zou de waarde van het href-attribuut stylesheets/main.css zijn. Hierbij wordt een schuine streep (of schuine streep) gebruikt om aan te geven dat u naar een submap gaat.</p><p>Op <a href="https://redcomrade.ru/nl/windows-7/kak-uznat-chastotu-processora-v-dannyi-moment-prosmotr-chastoty/">op dit moment</a> onze pagina's beginnen langzaam maar zeker tot leven te komen. We hebben ons nog niet zo diep in CSS verdiept, maar het is je misschien opgevallen dat sommige elementen stijlen hebben die we niet in onze CSS hebben gedeclareerd. Het is de browser die zijn eigen voorkeursstijlen oplegt aan deze elementen. Gelukkig kunnen we deze stijlen vrij gemakkelijk herschrijven, wat we vervolgens zullen doen met behulp van een CSS-reset.</p><h2>CSS-reset gebruiken</h2><p>Elke browser heeft zijn eigen browser <a href="https://redcomrade.ru/nl/power-supply/sozdai-svoi-sobstvennyi-stil-otkuda-berutsya-podpischiki/">eigen stijlen</a> standaard voor <a href="https://redcomrade.ru/nl/ram/element-prozrachnyi-svoistvo-css-opacity-upravlenie-prozrachnostyu-prozrachnost/">verschillende elementen</a>. De manier <a href="https://redcomrade.ru/nl/processors/chto-delat-esli-ne-zapuskaetsya-brauzer-google-chrome-esli-google-chrome-ne/">Google Chrome</a> weergaven van koppen, paragrafen, lijsten, enzovoort, kunnen afwijken van de manier waarop Internet Explorer dit doet. Werd veel gebruikt om compatibiliteit met verschillende browsers te garanderen <a href="https://redcomrade.ru/nl/power-supply/css-znacheniya-po-umolchaniyu-dlya-html-elementov-ispolzovanie-znacheniya-po-umolchaniyu/">css opnieuw instellen</a>.</p><p>Een CSS-reset neemt alle basis-HTML-elementen met een bepaalde stijl en zorgt voor een consistente stijl in alle browsers. Deze resets omvatten meestal het verwijderen van afmetingen, opvulling, marges of extra stijlen die deze waarden verlagen. Omdat CSS-cascadering van boven naar beneden werkt (daar zul je binnenkort meer over leren), zou onze reset helemaal bovenaan onze stijl moeten staan. Dit zorgt ervoor dat deze stijlen als eerste worden gelezen en dat is alles. <a href="https://redcomrade.ru/nl/security/chto-takoe-kuki-dlya-chego-oni-nuzhny-kak-ochishchat-cookies-v-brauzere-kak/">verschillende browsers</a> zal gaan werken vanuit een gemeenschappelijk referentiepunt.</p><p>Er zijn een aantal verschillende CSS-resets beschikbaar om toe te passen, ze hebben allemaal hun eigen <a href="https://redcomrade.ru/nl/motherboard/ranzhirovat-mirovyh-plm-liderov-nerealno-u-kazhdogo-iz-nih-est-svoi/">sterke punten</a>. Een van de meest populaire van Eric Meyer, zijn CSS-reset is aangepast om nieuwe HTML5-elementen op te nemen.</p><p>Als je een beetje avontuurlijk bent, is er ook Normalize.css gemaakt door Nicholas Gallagher. Normalize.css richt zich niet op gebruik <a href="https://redcomrade.ru/nl/windows-7/chto-udalyaetsya-pri-sbrose-do-zavodskih-nastroek-sposoby-i-procedury/">harde reset</a> voor alle basiselementen, maar in plaats daarvan voor het vaststellen van gemeenschappelijke stijlen voor die elementen. Dit vereist een dieper begrip van CSS, evenals kennis van wat u met de stijlen wilt bereiken.</p><h3>Compatibiliteit en testen tussen browsers</h3><p>Zoals eerder vermeld, geven verschillende browsers elementen anders weer. Het is belangrijk om het belang van compatibiliteit en testen tussen browsers te onderkennen. Sites mogen er niet in alle browsers precies hetzelfde uitzien, maar moeten wel dichtbij elkaar staan. Welke browsers u wilt ondersteunen en in welke mate, is een beslissing die u moet nemen op basis van wat het beste is voor uw site.</p><p>Er zijn verschillende dingen waar u op moet letten bij het schrijven van CSS. Het goede nieuws is dat je het allemaal kunt en dat je er alleen wat geduld voor nodig hebt om het onder de knie te krijgen.</p><h2>In de praktijk</h2><p>Laten we teruggaan naar waar we zijn <a href="https://redcomrade.ru/nl/security/chto-pokazyvaet-vatsap-esli-ty-v-ignore-kak-ponyat-chto-tebya-zablokirovali-v-viber/">laatste keer</a> bezocht onze conferentiesite en kijk hoe we wat CSS kunnen toevoegen.</p><ol><li>Laten we in onze stijlenconferentiemap creëren <a href="https://redcomrade.ru/nl/motherboard/kak-sdelat-nevidimuyu-papku-vindovs-8-kak-skryt-papku-na-rabochem-stole-etap-i/">nieuwe map</a> genoemde activa. Dit is waar we alle elementen voor onze website opslaan, zoals stijlen, afbeeldingen, video's, enz. Laten we voor onze stijlen doorgaan en nog een stylesheets-map toevoegen in de map met middelen.</li><li>Laten we met behulp van een teksteditor een nieuw bestand maken met de naam main.css en dit opslaan in de map stylesheets die we zojuist hebben gemaakt.</li><p>Als we naar het index.html-bestand in de browser kijken, kunnen we zien dat de elementen <h1>En <p>Bevat al de standaardstijl. Ze hebben met name een unieke lettergrootte en ruimte eromheen. Met behulp van de reset van Eric Meyer kunnen we deze stijlen verzachten, waardoor ze allemaal vanuit dezelfde basis kunnen beginnen. Om dit te doen, neem een kijkje op zijn website, kopieer de code en plak deze bovenaan ons main.css-bestand.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licentie: geen (publiek domein) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acroniem, adres, groot, citeer, code, del, dfn, em, img, ins, kbd, q, s, samp, klein, staking, sterk, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formulier, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td, artikel, terzijde, canvas, details, insluiten, figuur, figcaption, voettekst, koptekst, hgroup, menu, nav, uitvoer, robijn, sectie, samenvatting, tijd, markeren, audio, video ( marge: 0; opvulling: 0; rand: 0; lettergrootte: 100%; lettertype: overnemen; verticaal uitlijnen: basislijn ; ) /* HTML5 weergaverol opnieuw instellen voor oudere browsers */ artikel, terzijde, details, figcaption, figuur, voettekst, koptekst, hgroup, menu, nav, sectie (weergave: blok;) body ( regelhoogte: 1; ) ol, ul ( lijststijl: geen; ) blockquote, q ( aanhalingstekens: geen; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- ineenstorting: ineenstorting;</p><li>randafstand: 0; ) <link>Ons main.css-bestand begint vorm te krijgen, dus laten we het verbinden met het index.html-bestand. Open index.html in een teksteditor en voeg een element toe <head>V <title>
.</li><li>, onmiddellijk na het element <link>Omdat we via het element naar stijlen verwijzen</li><p>voeg een rel-attribuut toe met het waarde-stylesheet .</p><p>
<head>
<meta charset="utf-8">
<title>We zullen ook een link naar ons main.css-bestand opnemen met behulp van het href-attribuut. Houd er rekening mee dat ons main.css-bestand wordt opgeslagen in de map stylesheets, die zich in de map assets bevindt. De waarde van het href-attribuut, het pad naar ons main.css-bestand, moet dus assets/stylesheets/main.css zijn.
Stijlenconferentie
Tijd om ons werk te bekijken en te zien hoe onze HTML en CSS samenwerken. Het openen van het index.html-bestand (of het vernieuwen van de pagina als deze al geopend is) in de browser zou een iets ander resultaat moeten opleveren dan voorheen.
Rijst. 1.04. Onze Styles Conference-site met CSS-reset
Er zijn verschillende eenvoudige manieren om de editie, versie, build en bitness van Windows 10 te achterhalen. Met release bedoelen we varianten van Windows 10, en dit...
