HTML - de eerste stappen bij het leren van de taal. Lessen "HTML Basics" Html eerste stappen lezen

/ Html-zelfstudie. Stap 13.

HTML-tutorial voor dummies. Protozoa.

Stap 13.

De vermakelijke en leerzame les met de worstliefhebber is voorbij en we gaan door naar de volgende les, waarin we het hebben over links.

Onze pagina kan uit meerdere documenten bestaan. Een daarvan is de belangrijkste (index.html) - deze wordt eerst geopend en moet op uw website op internet staan. Je kunt de rest van de documenten een naam geven die je wilt (photos.html, about_me.html, my_pets.html, Friends.html, gh516hgd.html). Ze kunnen zich allemaal in dezelfde map (map) bevinden, of ze kunnen zich in verschillende mappen bevinden.

Wij koppelen deze documenten door middel van links. Dus vanaf de hoofdpagina kunnen we met behulp van de links naar de pagina met foto's gaan, vanaf deze pagina kunnen we teruggaan naar de hoofdpagina, of bijvoorbeeld naar de pagina met onze gedichten, enz.

Laten we eerst een nieuw document maken (in ons voorbeeld prf.html) in dezelfde map (map) waar ons hoofddocument index.html zich bevindt. Bedenk zelf de inhoud van het document; je hebt hier al voldoende kennis voor.

Laat prf.html een document zijn met uw foto's. Dan kunnen we, zonder enig geweten, van de zinsnede “zie mijn foto’s” een link maken naar prf.html:

zie mijn foto's

(1) - mijn foto's
(2) - mijn foto's
(3) - mijn foto's

In geval (1) ligt het document in dezelfde map (map) als het document waarin we linken naar prf.html, in geval (2) ligt het document in de submap /photos, in geval (3) linken we naar de http-site ://www.homepage.ru, waar het document dat we nodig hebben zich bevindt.

De eerste twee voorbeelden (1) en (2) worden relatieve paden genoemd. (3) – absoluut, d.w.z. volledig gespecificeerd, inclusief de sitenaam (in ons geval - http://www.homepage.ru/). We gebruiken een absoluut pad als we naar de pagina's van anderen linken, en we gebruiken een relatief pad als we naar documenten op onze site linken.

Voor alle links in ons document kunnen we kleuren opgeven: link - de kleur van alleen een link, alink - de kleur van een actieve link (aangeklikt), vlink - de kleur van een reeds bezochte link.

Net als de kleur voor alle tekst in een document, specificeren we de linkkleuren . In ons voorbeeld zijn de kleuren voor een eenvoudige link, actief en bezocht, hetzelfde, maar ze kunnen verschillend zijn - dat is naar eigen goeddunken.



Mijn eerste stap

tekst="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">


Hallo, dit is mijn eerste pagina.



Welkom! :)

Ik ben pas onlangs begonnen kennis te maken met het virtuele leven, maar volgens een lange traditie wilde ik ook mijn eigen startpagina maken voor mijn nieuwe virtuele vrienden en kennissen, zodat ze zie mijn foto's , lees over mij, schrijf een paar regels in mijn gastenboek.

Of misschien wil gewoon een willekeurige bezoeker mij plotseling leren kennen, en dat zal ik gedaan hebbennog een virtuele vriend? :)

De foto laat mij zien. De kwaliteit van de foto is helaas niet erg goed, dus het is niet duidelijk en het is een beetje problematisch om de kenmerken van mijn gezicht te zien. Maar over het algemeen is het duidelijk dat het helemaal goed met me gaat :)

Als jij dat ook vindt, laten we elkaar dan eens ontmoeten, kletsen, thee drinken in een café :) Wie weet worden we misschien vrienden in het echte leven :)





()

Zoals je kunt zien, niets ingewikkelds.

Zoals u zich herinnert, kunnen we verschillende kleuren instellen voor verschillende tekstblokken in ons document ( ). Voor tekstlinks kunnen we ook een andere kleur instellen - dit gebeurt met behulp van de tag en zijn kleurattribuut:

zie mijn foto's

Let op - staat in de tag. Als u anders schrijft, kunt u uw link geen andere kleur geven dan de kleur van andere links in het document.

Laten we nu verder gaan met de volgende stap en doorgaan met het verkennen van de links.

Stap 1.

Bestelling staat voorop, dus voordat we beginnen, maken we een aparte map op onze computer aan voor de toekomstige pagina.

D:\eerste stappen\

Op mijn computer heb ik zo'n map op station D gemaakt en deze Eerste Stappen genoemd. U kunt uw map natuurlijk overal maken en deze een naam geven die u maar wilt. Open nu kladblok – kladblok (start – programma’s – accessoires – kladblok of start – programma’s – standaard – kladblok) en kopieer daar de volgende tekst:




Mijn eerste stap


Hallo, dit is mijn eerste pagina.

Welkom! :)



()

Laten we dit document opslaan en het de naam *.html geven

D:\eerste stappen\index.html

Veel lezers struikelen over de zin: " Laten we nu dit document opslaan en het de naam *.html geven", ze schrijven brieven over wat ze alleen als *.txt-tekstdocument kunnen opslaan, maar niet als *.html. Om dit stomme misverstand in de toekomst te voorkomen, schrijf ik dit briefje.

Als u een document opslaat via Bestand -> Opslaan, dan wordt het uiteraard opgeslagen als *.txt. U moet uw document als volgt opslaan:

Bestand -> Opslaan als (Bestand -> Opslaan als)
- Voer vervolgens de naam van uw document in, bijvoorbeeld: index.html (en niet alleen index; het achtervoegsel *.html moet verplicht zijn).
- Als u uw document al heeft opgeslagen als *.html, dan kunt u, wanneer u wijzigingen aanbrengt in dit document, deze alvast opslaan via Bestand -> Opslaan.

Dat is alles. Ik hoop dat het nu goed gaat met iedereen.

Laten we nu een browser openen, bijvoorbeeld Internet Explorer (sluit Kladblok niet, we hebben het later nodig) en ons document in de browser openen.

Bestand - Openen - Bladerknop - Ons document (index.html)
Bestand – Openen – Bladeren – index.html

Als we iets veranderen in ons *.html-document (in Kladblok), moeten we, om te zien hoe het er in onze browser uitziet, niet vergeten op de knop UPDATE in de browser te klikken. Als de wijzigingen niet zichtbaar zijn, betekent dit dat u ergens iets verkeerd heeft geschreven, of bent vergeten het document op te slaan.

Van de auteur: alles begint ooit. Dus je hebt eindelijk besloten om de wetenschap van het bouwen van websites onder de knie te krijgen. Je moet beginnen met de html-taal. Het is erg belangrijk om vol vertrouwen de eerste stappen daarin te zetten, anders struikel je misschien en ga je niet verder met studeren. Vandaag vertel ik je hoe je de taal zo eenvoudig en effectief mogelijk onder de knie kunt krijgen.

Er is altijd een eerste keer voor iedereen. Net zoals een klein kind op een dag zijn eerste stapjes zal moeten zetten, zo moet jij, de persoon die heeft besloten om te beginnen met het bouwen van websites, voor de eerste keer in deze wereld duiken. Om de duik zo aangenaam mogelijk te maken, raad ik aan het meest eenvoudige en begrijpelijke pad te volgen.

Hoe ik begon en wat je hieruit moet begrijpen

Ik vind het erg nuttig en noodzakelijk om je te vertellen hoe ik HTML heb geleerd. Allereerst wil ik je meteen aanmoedigen, zodat je niet denkt dat het leren van HTML hetzelfde is als het bouwen van een space shuttle. Nee, alles is veel eenvoudiger. Om deze taal onder de knie te krijgen, hoef je bovendien geen basiskennis te hebben. Het kan zijn dat je een absoluut complete nul bent in het onderwerp, en zelfs voor de hand liggende dingen niet begrijpt.

De eerste stap om te beginnen met leren is dus beseffen dat het eenvoudig is. Html is eigenlijk ongelooflijk eenvoudig. Kortom, u hoeft slechts een paar dingen uit te zoeken:

Hoe werkt het proces van het maken van een website over het algemeen en waarom is html nodig?

Wat is de structuur van het document, in welke delen is het verdeeld?

Wat zijn tags en attributen, wat zijn ze en hoe kun je ze gebruiken

Al het andere is alleen maar het oppoetsen van je kennis. Dit is geen technologie waarbij je veertien dagen achter de computer moet zitten en theorie moet leren, om dan pas iets te gaan begrijpen en te gaan oefenen. De eerste praktijk kan eigenlijk al in het eerste uur van de studie worden gestart.

Hoe heb ik deze taal geleerd? Ik gebruikte de diensten van Yandex en Google, waar ik de relevante informatie invoerde (zoiets als html studeren). Ik trok meteen mijn aandacht op een site waar 15 lessen over html stonden, in volgorde van moeilijkheidsgraad. Ik kocht blijkbaar een notitieboekje met 48 vellen, verzamelde mijn moed en begon te studeren, waarbij ik bijna elke letter in het notitieboekje opschreef en de tags die ik zojuist had geleerd 300 keer per dag gebruikte.

Deze zaak was ongelooflijk interessant. Eigenlijk heeft deze manier van studeren één probleem:

Toch ontbrak het een beetje aan de training in videoformaat. Ideaal zou zijn als een levend persoon in de video nogmaals uitlegt wat er in de tekst staat.

Zo leerde ik in letterlijk 1 maand de taal. Niet helemaal natuurlijk. Ik zal je vertellen dat je het niet van binnen en van buiten hoeft te bestuderen. Vraag me nu bijvoorbeeld: wat betekent de dfn- of bdi-tag? Ik ga in de map kijken. Maar dit weerhoudt mij er niet van om eenvoudig websites in HTML te maken, omdat 70-80% van de tags en attributen daarin uiterst zelden worden gebruikt en in standaardsituaties praktisch niet nodig zijn.

De snelste manier om html op een hoog niveau te leren: een stappenplan

Eerlijk gezegd zie ik in mijn hoofd al een ideaal plan voor hoe je in letterlijk 1 maand een taal perfect kunt leren, en nog veel minder als je heel hard je best doet. Op een gegeven moment bracht ik er nog meer tijd door.

Het grote probleem met studeren met behulp van vrije informatie is dat het vaak niet alle huidige technieken en trucs onthult. Voeg daarom toe. Informatie moet in andere bronnen worden gezocht. Maar mensen zijn lui en vinden het vaak niet, waardoor hun kennis onvolledig blijft.

Gelukkig hoef je nergens meer naar te zoeken; ik kan je de snelste manier bieden om een ​​taal te leren die resultaat garandeert. Op onze website kun je alle lessen volgen.

Na het voltooien van de eerste stap heeft u een algemeen inzicht in hoe een website wordt gemaakt. Nadat u de volgende stap heeft voltooid, kunt u de basistheorie van HTML gemakkelijk begrijpen en zelfs eenvoudige webpagina's maken door er tabellen, afbeeldingen, formulieren, enz. op te plaatsen.

De volgende stap is volledige oefening. U ontwerpt namelijk een website. Heel simpel, want dit is precies wat je voor de eerste keer nodig hebt. Het belangrijkste in deze fase is om de opgedane kennis te leren toepassen. Zonder toepassing heeft kennis immers geen waarde. Je wilt toch geen HTML leren om aan je vrienden te laten zien, toch? Ik hoop dit niet. Het doel is om HTML als basistaal te leren gebruiken bij het maken van websites.

De volgende en laatste stap is het bestuderen van de meest actuele informatie over de nieuwe tags en functies die html5 met zich meebracht, en het bestuderen van de nieuwe mogelijkheden van css3. Welnu, in de cursus zelf behaal je eindelijk een krachtige doorbraak in het bouwen van websites: je maakt drie websites, elk complexer dan de vorige. Oh ja, zelfs 4, want er zitten nog een paar lessen bij als bonus.

De laatste site die u gaat ontwerpen, is een online winkel. Voel jij de kracht van zo’n training? Nu ben je een complete 0 (misschien weet je niet eens wat een tag is), en over 1 maand heb je een sjabloon voor een professionele online winkel. Ik weet niet eens welk voorbeeld ik moet geven. Het is alsof je op een vierwieler rijdt en dan meteen in een BMW springt.

Kortom

Over het algemeen heb ik u voorgesteld wat de beste manier is om een ​​taal te leren. Uiteraard vergt dit investeringen van u. Zowel een investering van geld als een investering van tijd en moeite. Maar dit is echt het kortste pad van beginner naar professional.

Misschien overdrijf ik, ik wil je niet misleiden, want ze worden geen professionals in een maand, maar terwijl één persoon maanden en jaren ronddwaalt op sites en gratis informatie verzamelt, kun je effectiever handelen en doorgaan het studietraject 15-20 keer productiever.

1 stem

Gegroet, beste lezers! Vandaag zullen we het hebben over "hypertext-opmaaktaal". Waarom iedereen het zou moeten weten, en hoe je de eerste stappen in HTML kunt zetten. Als de ontwerper geen vreemde talen kent, is dit niet het ergste. Het ergste is als hij niet eens basiskennis van html heeft. In dit geval loopt hij het risico voor altijd een “buitenlander” te blijven in de webindustrie.

Taal is belangrijk

Ben je aan het praten? Stel je die van jou ook eens voor!

Bent u het vaak tegengekomen dat het ontwerp van een website tot in het kleinste detail is doordacht, maar uiteindelijk het resultaat te wensen overlaat? Dit betekent dat u en uw browser verschillende talen spreken. Wanneer een ontwerper zoiets tegenkomt, begint hij zich duidelijk te realiseren: een website is geen verzameling prachtige tegels en afbeeldingen.

Een kwaliteitsbron is in de eerste plaats competente code. En om het te begrijpen, moet je het bestuderen. Er zijn veel goede leerboeken die een beginner helpen HTML helemaal opnieuw te begrijpen.

We weten allemaal dat het gemakkelijker is om iets nieuws te leren door te oefenen. Speciaal voor beginners is er een gratis online cursus ontwikkeld” Basis-HTML en CSS " De bron helpt u de basisprincipes van de lay-out, de wetten, functies en eigenschappen van de code te begrijpen.


Je hoeft voor programmeurs geen tonnen saaie literatuur te lezen of een hogere opleiding in jouw vakgebied te volgen. Door de interactiviteit van de cursus kunt u uw vaardigheden onmiddellijk consolideren, de behaalde resultaten bekijken en de mentor zal u helpen als er zich problemen voordoen.

Over problemen gesproken. Beginners maken vaak fouten bij het schrijven van code. Het is belangrijk om hier te onthouden dat met alles rekening wordt gehouden: spaties, punten en komma's. Een extra bord of het ontbreken ervan leidt tot een onjuiste weergave van informatie. Daarom moet u dit zeer zorgvuldig controleren.

Het belangrijkste is oefenen

Het beste is dat je om een ​​website te maken niets ingewikkelds nodig hebt. Je kunt er gewoon langskomen. Open kladblok en schrijf daarin:

<html> <hoofd > <titel > Mijn eerste pagina</titel> </hoofd> <lichaam > Hallo wereld!<br></lichaam> </html>

Mijn eerste pagina Hallo wereld!
Mijn naam is (naam), dit is mijn eerste pagina!

Sla vervolgens alles op dat is geschreven als een html-document, het is belangrijk dat de extensie html is. Hoe dit te doen? Klik in het document op “bestand” en vervolgens op “opslaan als” in het veld “bestandsnaam”: index.html. Na al deze operaties moet het meest interessante nog gedaan worden! Klik met de rechtermuisknop op ons document en open het in elke browser.

Voila! Je hebt een pagina geschreven en dit is nog maar het begin!

Zoals u kunt zien, is de code verantwoordelijk voor de inhoud van de pagina. Met andere woorden - voor. In de regel is één persoon verantwoordelijk voor het ontwerp van de hulpbron en een andere voor de lay-out. Maar de gulden middenweg is wanneer één persoon weet hoe hij een afbeelding moet opmaken en tekenen.

Dit helpt misverstanden tussen twee mensen te voorkomen en uiteindelijk het product te krijgen dat de ontwerper bedoelde.

Hoe en waar te studeren

Voor velen zorgen het aantal tags en simpelweg hun naam voor afschuw. Het is alsof je in een land bent waar ze een onbekende taal spreken. Je kunt niet zonder woordenboek, of beter gezegd, zonder leerboek voor dummies. Cursussen zijn natuurlijk goed, maar je kunt simpelweg niet zonder een boek waarin alles staat uitgelegd en waar je op elk moment naar kunt kijken. Het leerboek kan online worden gedownload of bestudeerd.

De praktijk leert dat de online versie een aantal voor- en nadelen kent. Het nadeel is dat je voor toegang tot het materiaal niet zonder internet kunt. Een pluspunt is dat online publicaties vaak worden bijgewerkt. Daarin vindt u alle relevante informatie voor vandaag.

Allenova Natalya Vyacheslavovna schreef een intelligent, gedetailleerd boek over html ( Look). Dankzij de structuur van de publicatie kun je geleidelijk aan werken en complexere algoritmen beheersen op basis van eenvoudige elementen. Theorie en praktijk sluiten mooi op elkaar aan en vullen elkaar aan.

Hier vindt u antwoorden op specifieke vragen: hoe creëren? Hoe bouwen? Hoe een afbeelding invoegen? Geen abstracte redenering over het onderwerp daarheen te gaan, ik weet niet waarheen. Veel leerboeken schieten hierin tekort; daarmee ben je óf een theoreticus óf een praktijkman voor wie niets werkt. Mee eens, dit zijn niet de meest veelbelovende vooruitzichten.

Om een ​​website te maken, moet je de tags natuurlijk gedetailleerder bestuderen. Hier zouden geen problemen mee moeten zijn; World Wide Web biedt een groot aantal bronnen voor html-mappen. De voordelen van dergelijke mappen zijn dat u een tag in de zoekbalk van een site kunt invoeren en de betekenis ervan kunt achterhalen, hoe en waar deze wordt gebruikt. Met andere woorden, dit is een soort interactief woordenboek.

Wie zelf een website wil maken, kan niet rondkomen met alleen kennis van html. We zullen wel moeten, maar dat is een heel ander verhaal. Als je na het maken van de eerste pagina een volwaardige website wilt bouwen, raad ik je aan je te abonneren op mijn updates. Hier kunt u veel nuttige informatie vinden die u zal helpen de webindustrie te begrijpen.