Veel mensen denken dat het maken van uw eigen website ishet is een lastig bedrijf dat een serieuze voorbereiding en gebruik van complexe tools vereist. Om te beginnen is een minimum aan kennis en het meest elementaire Windows-programma - Kladblok - voldoende. Volg de eenvoudige instructies voor het maken van een website in Kladblok en maak binnen een paar uur de eerste volledige pagina.

Voordelen van Kladblok

Professionele webontwikkelaars, ervarenmakers van sites gebruiken zeer zelden Kladblok in het proces, maar er zijn twee categorieën gebruikers voor wie dit programma een uitstekende keuze is:

• beginner zetmachines;
• mensen die niet bekend zijn met het proces van het maken van webpagina's, die geen complexe editors willen leren om een ​​eenvoudige visitekaartjewebsite te schrijven.

Veel professionals hebben kennis gemaakt met layout enHTML, inzicht in het maken van een site met Kladblok. Hierdoor konden ze alle opgedane kennis veilig en snel consolideren. Kladblok is niet ontworpen om te werken met code en markup, het heeft geen ingebouwde hints, automatische aanvulling en andere chips beschikbaar in moderne programma's, wat betekent dat een ontwikkelaar alleen op zichzelf en zijn geheugen kan vertrouwen.

De teksteditor Kladblok heeft de meest bescheidenminimalistische interface, wat betekent dat u de complexe functionaliteit van het programma niet lang hoeft te begrijpen. Dit is zeer aantrekkelijk voor gebruikers die niet van plan zijn tijd te besteden aan het leren van een tool die ze niet vaak zullen gebruiken.

Werk basis

Een stapsgewijze instructie voor het maken van een HTML-site in Kladblok begint met het openen van het programma. De eenvoudigste manier om Kladblok te vinden is via het Windows Start-menu in het gedeelte Accessoires.

Het geopende nieuwe bestand moet worden opgeslagen methtml extensie. Dit is belangrijk, want met deze extensie zal de browser begrijpen dat er een webpagina voor staat. De opdracht Opslaan als in het menu Bestand opent een nieuw venster. Hier moet u het document index.html een naam geven, de utf-8-codering selecteren en de map die u wilt opslaan.

Nu kunt u dit bestand op elk gewenst moment openen door erop te dubbelklikken of door met de rechtermuisknop op het contextmenu te klikken en "Openen met Kladblok" te selecteren.

De pagina is al gemaakt en u kunt zien hoe deze eruit ziet in de browser. Er zijn verschillende manieren om een ​​document in een internetbrowser te openen:

• door er met de rechtermuisknop op te klikken en "Openen met Google Chrome" (of een andere browser) te selecteren in het menu dat verschijnt;
• door het pictogram naar de tabbalk van een geopende browser te slepen;
• typ in de adresbalk van de browser het volledige adres van het document, beginnend met het protocolbestand: //

bestand: /// C: /Users/UserName/Desktop/my-site/index.html

Nu is de pagina voorspelbaar maagdelijk leeg, het is tijd om deze met informatie te vullen.

Hypertext Markup Language

Все веб-страницы на просторах Мировой паутины geschreven in een speciale HTML-taal (hypertext markup language). Het begrijpen van de basisprincipes is erg belangrijk om te begrijpen hoe u een website in Kladblok of een andere editor kunt maken. Met behulp van HTML vertelt de ontwikkelaar de browser hoe de pagina eruit moet zien. Daarom is het belangrijk om de juiste bestandsextensie in te stellen.

De taal is gebaseerd op tags - combinaties van tekens tussen punthaken.

Tag voorbeelden:

 Kop van niveau 1 
 Cursieve tekst 

De tekst tussen de begin- en eindtags wordt speciaal door de browser verwerkt.

Naast de gegevens die direct op de pagina worden weergegeven, moet u bij het maken van de pagina speciale service-informatie opgeven die is bedoeld voor de browser zelf.

Eerste concepten

U moet beginnen met het juiste ontwerp van het html-document. De basisstructuur van de pagina is als volgt:

De waarde van elk element:

• DOCTYPE - technische informatie voor de browser die aangeeft hoe deze de code moet waarnemen;
• html - root-tag van de pagina;
• hoofd - een gedeelte van de service-informatie niet zichtbaar voor bezoekers van de site;
• meta - servicetag, het tekensetattribuut bepaalt de codering van de tekst;
• titel - de naam van de pagina die wordt weergegeven op het browsertabblad;
• lichaam - de hoofdtekst van het document die direct op de pagina wordt weergegeven.

Na het opslaan van de code en het opnieuw openen (of opnieuw laden) van het bestand in de browser, ziet u de eerste wijziging - de naam van de site verscheen op het tabblad.

Thema en structuur

Voordat u begrijpt hoe u uw eigen HTML-site via Kladblok kunt maken, moet u zich duidelijk voorstellen hoe deze site eruit moet zien. Neem bijvoorbeeld de persoonlijke blog van een bepaalde John Doe.

De belangrijkste elementen van de structuur van deze pagina:

• een hoed met een logo en een kop op het eerste niveau;
• horizontale navigatiebalk;
• hoofdinhoud, vertegenwoordigd door drie artikelen, die elk bestaan ​​uit een titel, een korte beschrijving en een link naar de volledige tekst;
• kelder met copyright-vermelding.

De HTML-code voor deze pagina ziet er als volgt uit:

<!DOCTYPE html> <html>  <hoofd> <meta charset = "utf-8"> <title> De beste site ter wereld </title> </head>  <body>  <div class = "wrapper">  <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </h1> </header>  <nav> <ul> <li> <a href="bio.html"> Autobiografie </a> </li> <li> <a href="life.html"> Mijn leven, mijn prestaties </a> </li> <li> <a href="gallery.html"> Fotoalbum </a> </li> <li> <a href="contacts.html"> Neem contact met mij op </a> </li> <li> <a href="thanks.html"> Bedankt </a> </li> </ul> </nav>  <main>  <artikel> <h2> Superconcert </h2> <div> Was een kilometerlange wachtrij voor kaartjes waard om van deze show te genieten !! </div> <a href="posts/concert.html"> Zie meer </a> </article>  <artikel> <h2> Waarom ik van ijs hou </h2> <div> Ik wil de diepe redenen delen mijn liefde voor ijs ... </div> <a href="posts/ice-cream.html"> Zie meer </a> </article>  <artikel> <h2> Zijn of niet zijn? </h2> <div> Zaken van leven en dood. </div> <a href="posts/to-be-or-not-to-be.html"> Zie de details </a> </article> </main>  <footer> John Doe (c) 2018 </footer>  </div>  </body> </html>

Semantische tags uit de HTML5-standaard worden gebruikt om de webpagina te beschrijven: koptekst, hoofd, nav, voettekst, artikel.

Verklaringen voor de code:

• De koptekst bevat een afbeelding verpakt in een link. Met zijn hulp kan de gebruiker vanaf elke plek op de site terugkeren naar de startpagina.
• De afbeelding zelf staat in de map afbeeldingen gelijk met het bestand index.html... In de code ervoor met behulp van het attribuut breedte de breedte is strikt ingesteld op 100 pixels.
• De titel is vormgegeven als een tag h1, wat het belang ervan onderstreept.
• Het navigatiemenu wordt gepresenteerd als een ongenummerde lijst en elk item is een link naar de corresponderende pagina van de site. Deze secties zijn nog niet beschikbaar, maar kunnen in de toekomst worden gemaakt.
• Gebruik voor artikeltitels de tag h2.
• De link "Bekijken" in meer detail leidt naar een aparte pagina met de volledige tekst van het artikel. Deze pagina's bestaan ​​ook nog niet.
• Alle inhoud is verpakt in een gemeenschappelijk blok met een klasse wikkel... Klasseattributen worden vaak gebruikt om elementen te stylen.

Nu ziet de pagina er als volgt uit:

Deze weergave lijkt niet erg op de geplande. Om de situatie op te lossen, moet u een decoratie toevoegen.

Om dit te doen, moet u een ander bestand maken, naast index.html en noem maar op style.css... Het bevat alle benodigde stijlen.

Op dit moment ziet de projectstructuur er als volgt uit:

Styling

Als we doorgaan met het maken van een website in Kladblok, gaan we naar een nieuw niveau: een stylesheet verbinden.

Om de browser te laten weten waar het ontwerp vandaan komt, moet u het adres van het css-bestand specificeren. Dit is service-informatie, deze moet in de sectie worden geplaatst hoofd.

<hoofd> <meta charset = "utf-8"> <title> De beste site ter wereld </title> <link rel = "stylesheet" href = "style.css"> </head>

Nu alles wat in het bestand wordt beschreven style.css, zal de browser van toepassing zijn op de pagina. Laten we bijvoorbeeld de achtergrondkleur wijzigen:

lichaam { achtergrond: # 89745d; }

De volledige inhoud van de stylesheet ziet er als volgt uit:

lichaam { opvulling: 0; font-family: schreefloos; lettergrootte: 16px; achtergrond: # 89745d; } .wrapper { opvulling: 20px; marge-links: auto; margin-right: auto; breedte: 960px; } koptekst a { tekstversiering: geen; } header img { verticaal uitlijnen: midden; margin-right: 20px; } koptekst h1 { display: inline-blok; verticaal uitlijnen: midden; kleur: # f8d9b7; } nav { padding-top: 20px; padding-bodem: 20px; } nav ul { marge: 0; text-align: center; } nav ul li { display: inline-blok; lijststijl: geen; opvulling: 0px 15px; } nav ul li a { kleur: # f8d9b7; tekstversiering: geen; } nav ul li a: hover { text-decoration: onderstrepen; } artikel { opvulling: 20px; marge: 20px 0; achtergrond: # f8d9b7; box-shadow: 0 0 15px # f8d9b7; } artikel h2 { margin-top: 0px; margin-bottom: 15px; kleur: # d57106; } artikel a { lettergrootte: 14px; font-style: cursief; kleur: # d57106; } voettekst { opvulling: 20px; text-align: right; kleur: # f8d9b7; lettergrootte: 14px; font-weight: vet; }

Uitleg voor stijlen:

• Het body-element is ingesteld op de basislettertypeparameters: schreefloze familie en grootte 16 pixels.
• De hoofdcontainer heeft een constante breedte van 960 pixels en is gecentreerd.
• Menulijstitems zijn gedeclareerde inline-blokelementen, waardoor ze in één rij kunnen worden geplaatst. De onderstreping is verwijderd voor koppelingen, nu verschijnt deze alleen bij zweven.
• Het artikelblok heeft een contrasterende achtergrond en een lichte schaduw.

Als u het document in de browser vernieuwt, kunt u de uiteindelijke weergave zien. De eerste webpagina is succesvol aangemaakt!

Een blog kan echter niet alleen uit de hoofdtekst bestaanpagina's met een lijst met artikelen. Het is noodzakelijk om op de een of andere manier een apart bericht met de volledige tekst weer te geven, bovendien zijn de pagina's die in het navigatiemenu worden aangegeven al gepland.

Het belangrijkste concept van internet is het koppelen van individuele documenten door middel van links. Hoe maak je een hyperlinkwebsite in Kladblok?

Pagina's toevoegen

In feite is al het nodige al gedaan. Menu-items en verwijzingen "Watch" zijn meer in detail verpakt in een speciale tag en, die verantwoordelijk is voor de vorming van de hyperlink. Het vereiste adres wordt aangegeven in het attribuut href... Het blijft alleen om de pagina's zelf te maken en ze naast het bestand te plaatsen index.html.

Voorbeeldcode voor een fotoalbumpagina (gallery.html):

<!DOCTYPE html> <html> <hoofd> <meta charset = "utf-8"> <title> De beste site ter wereld </title> <link rel = "stylesheet" href = "style.css"> </head> <body> <div class = "wrapper"> <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </h1> </header>  <nav> <ul> <li> <a href="bio.html"> Autobiografie </a> </li> <li> <a href="life.html"> Mijn leven, mijn prestaties </a> </li> <li> <a href="gallery.html"> Fotoalbum </a> </li> <li> <a href="contacts.html"> Neem contact met mij op </a> </li> <li> <a href="thanks.html"> Bedankt </a> </li> </ul> </nav>   <hoofd> <div class = "gallery"> <figuur> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> In het forest </figcaption> </figure>  <figuur> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> In de winter </figcaption> </figure>  <figuur> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> Op het strand </figcaption> </figure>  <figuur> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> At Work </figcaption> </figure>  <figuur> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> Nieuwjaar </figcaption> </figure>  <figuur> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> Zelfportret </figcaption> </figure> </div> </main>  <footer> John Doe (c) 2018 </footer> </div> </body> </html>

De hoofdstructuur, koptekst, navigatie en voettekst dupliceren de hoofdpagina volledig, alleen de sectie verandert hoofddie nu een galerij bevat met meerdere blokken figuur... Elk blok bevat een afbeelding en een bijschrift.

Hetzelfde bestand wordt gebruikt om de pagina te ontwerpen style.cssverbonden binnen de sectie hoofd... U moet er verschillende regels voor de galerij aan toevoegen:

.gallery { lettergrootte: 0; } figuur { Scherm: inline-blok; verticaal uitlijnen: onder; breedte: 33.3333%; box-sizing: border-box; opvulling: 10px 15px; marge: 0px; lettergrootte: 14px; kleur: # f8d9b7; text-align: center; } figuur img { breedte: 100%; margin-bottom: 10px; }

Hier wordt een css-techniek gebruikt waarmee u blokken in drie op een rij kunt plaatsen en deze kunt instellen op precies een derde van de breedte van de bovenliggende container.

Het definitieve beeld van de galerij wordt hieronder getoond.

Hyperlinks zorgen voor beweging tussen de pagina's van de site: vanuit het menu gaat u naar het "Fotoalbum", en door op het logo te klikken, gaat u terug naar de hoofdpagina.

Plaatsing van de site op internet

Dus we hebben met behulp van stapsgewijze instructies ontdekt hoe we een website in Kladblok kunnen maken. Maar nu ziet niemand hem! Maar persoonlijke blogs worden gemaakt om je leven met de hele wereld te delen.

Om de situatie te verhelpen, moet u plaatsenalle aangemaakte bestanden op hosting en selecteer een domein voor de site met behulp van een speciale service. Er is een groot aantal hostingproviders die diensten aanbieden voor elke smaak en portemonnee.

Na het sluiten van een overeenkomst met de hoster krijgt u toegang tot het controlepaneel, waar u alle aangemaakte bestanden kunt overzetten. Op dit moment is de projectstructuur als volgt:

Dit moet ook HTML-bestanden bevatten voor de rest van de sitepagina's.

Code-editors

Nu weet u hoe u een html-site kunt maken inKladblok, maar er zijn handigere manieren. Professionals gebruiken speciale editors die zijn ontworpen om met code te werken. Ze bieden veel handige opties om het maken en bewerken van sites gemakkelijk te maken.

Meest populaire tools - Visual StudioCode, Sublieme tekst, Kladblok ++. Men moet niet bang zijn voor hun complexiteit. Als u weet hoe u een website maakt met Kladblok, kunt u gemakkelijk achterhalen wat wat is. Alle aanvullende functionaliteit van deze editors is ontworpen om het werk van de webmaster te vergemakkelijken en mag hem niet hinderen in het proces.

Het bouwen van een website via Kladblok is slechts het begin van een lange en interessante reis als webontwikkelaar.