Share
U heeft zojuist een HTML-sjabloon gekocht en moet deze nu aanpassen voordat u hem online kunt zetten, maar u hebt geen ervaring met code, dus u weet niet zeker hoe u dit moet doen. Nou, rust even, want in deze tutorial gaan we je door het hele proces heen helpen.
We gaan ervan uit dat je nog nooit eerder een HTML-regel hebt gezien, laat staan een HTML-code hebt bewerkt, dus hoe nieuw je ook bent om met code te werken, je krijgt precies te zien wat je elke stap van de HTML-code moet doen. manier.
Laten we bij het allereerste begin beginnen.
Technisch gezien is het antwoord op deze vraag "Hyper Text Markup Language". Voor het aanpassen van een sjabloon kunt u HTML echter beschouwen als een reeks openings- en sluitingstags zoals deze:
Tags worden aangegeven met < en > tekens en de afsluitende tag bevat altijd een /. Paren van tags hebben als volgt inhoud hiertussen:
John Smith, front-end ontwikkelaar
Soms zijn er echter ook op zichzelf staande tags, met geen sluitende partner, zoals deze:
Verschillende HTML-tags zorgen ervoor dat verschillende soorten inhoud op een webpagina verschijnen. Het bovenstaande voorbeeld van tags zouden een grote koptekst creëren, "John Smith, Front End Developer", en het voorbeeld
Als u een HTML-sjabloon wilt bewerken, is het enige dat u moet weten welke tags de delen van de pagina vertegenwoordigen die u wilt wijzigen, hoe u ze in de code kunt vinden en hoe u ze kunt bewerken, zodat ze laten zien wat u wilt.
Ja, het is volledig mogelijk om HTML in Kladblok of een soortgelijk programma te bewerken, maar het zal voor u veel vlotter gaan als u een juiste app voor het bewerken van code gebruikt. Een van de belangrijkste redenen is dat je een gekleurde markering van je code krijgt, zoals je binnenkort zult zien, waardoor het veel gemakkelijker te lezen en te bewerken is.
Ik beveel Sublime-tekst aan, die u hier kunt downloaden: https://www.sublimetext.com/3
Download de sjabloon die u hebt gekocht - in het geval van deze zelfstudie gebruiken we deze sjabloon 'Clean CV' om te demonstreren.
De meeste HTML-sjablonen komen in een ZIP-bestand - als dat zo is, ga je gang en pak je de jouwe nu. Kijk vervolgens rond in de mappen van de sjabloon totdat u het bestand "index.html" of "index.htm" vindt.
In ons voorbeeld CV-sjabloon is het bestand "index.html" te vinden in de map "01.html-website".
Open nu dat bestand in Chrome. Zelfs als Chrome niet uw standaard- of voorkeursbrowser is, gebruikt u deze toch, omdat we gaan werken met een aantal hulpprogramma's die zijn ingebouwd om u te helpen bij het bewerkingsproces.
Als dit de eerste keer is dat u een sjabloon bewerkt, probeer dan niet in het idee te komen om de kleuren en opmaak nog aan te passen. Om dat te doen moet je je verdiepen in CSS, de taal die verantwoordelijk is voor het opmaken van de pagina. Het is een goed idee om u te concentreren op één ding tegelijk wanneer u nog niet bekend bent met het aanpassen van sjablonen, en HTML de beste plek is om te beginnen.
Als u de bal aan het rollen wilt krijgen, bekijkt u uw sjabloon in Chrome en zoekt u naar de geschreven elementen en afbeeldingen op de pagina die u moet wijzigen. Als je wilt, kun je een lijst opstellen zodat je door kunt gaan en elk item kunt controleren terwijl je je bewerkingen uitvoert.
In het geval van onze CV-sjabloon willen we wijzigen:
Nu hebben we een lijst met items die we kunnen wijzigen. We kunnen de bijbehorende HTML-tags in de code vinden. Laten we beginnen met de naam.
Klik met de rechtermuisknop op de naam, die standaard "John Smith" leest, en selecteer Inspecteren:
Een dergelijk paneel zou in uw browser moeten openen:
Het paneel "Inspectie"Dit paneel geeft je een interactieve manier om naar de code te kijken. Beweeg uw muis over de regel die wordt weergegeven ...
Door met uw muis over verschillende coderegels te bewegen en te zien welke delen van de pagina oplichten, helpt dit paneel u om erachter te komen welke code overeenkomt met welk element. U blijft gewoon over verschillende coderegels zweven totdat het gedeelte dat u zoekt oplicht.
Breid nu het h1 tags door op het driehoekje links ervan te klikken en de inhoud ertussen te zien, d.w.z.. John Smith Front-end ontwikkelaar.
Deze formulering komt overeen met wat je op het scherm ziet, dus je weet dat je het juiste deel van de code hebt gevonden.
Het is nu tijd om uw HTML-bestand te openen voor bewerking. Open het bestand "index.html" in Sublime-tekst en je zou zoiets als dit moeten zien:
U wilt de code hier vinden die overeenkomt met wat u zag in de Chrome-inspecteur. Blader door tot je het vindt op regels 61 - 64.
Nu kunt u de inhoud tussen de tags bewerken om de naam en het beroep naar uw eigen smaak te wijzigen. Bewerk eerst "John Smith" onder je eigen naam:
Dan, tussen de tags, verander "Front End Developer" in uw eigen beroep.
Sla je bestand op en vernieuw de sjabloon in Chrome. U zou uw wijzigingen moeten zien als volgt:
Nu heb je het basisproces naar beneden:
Laten we het proces herhalen om de rest van de inhoud die we willen aanpassen te bewerken.
Vervolgens voegen we ons eigen afbeelding links van de naam en het beroepsgebied toe. Klik met de rechtermuisknop op de afbeelding en controleer deze en noteer de bijbehorende tag:
U kunt in het inspectievenster zien dat deze regel direct boven de regels staat die we zojuist hebben gewijzigd:
Ga naar uw HTML-bestand en zoek de tag op regel 59:
Voor deze tag moet u de waarde van de tag wijzigen src kenmerk dat u ziet in de img label. U doet dit door te bewerken wat er tussen de aanhalingstekens staat. Je zult het veranderen naar de bestandsnaam en locatie van je eigen afbeelding.
Pak een afbeelding van jezelf met een grootte van 150 px bij 150 pixels (negeer dat de bestandsnaam 140x140.png is, de grootte is eigenlijk 150x150).
Zet je afbeelding neer in de submap "_content"; het bevindt zich in dezelfde map als uw "index.html" -bestand.
Verander nu de waarde van het in uw HTML-bestand src attribuut, vervangt "140x140.png" door het bestand dat u zojuist aan de submap "_content" hebt toegevoegd. Controleer of de extensie die u typt dezelfde is als die in uw bestand, bijvoorbeeld "Png" / "jpg":
Sla je bestand op, vernieuw Chrome en je zou je nieuwe foto moeten zien verschijnen:
Laten we nu de links op de social media-pictogrammen in de rechterbovenhoek van de sjabloon bewerken. Klik, net als eerder, met de rechtermuisknop op een van de pictogrammen en inspecteer het. Kijk in het venster naar de regel boven die gemarkeerd is en je zult zien dat deze de tekst "facebook-icon" bevat. We gaan dit gebruiken om de code in ons HTML-bestand te vinden.
Terug in Sublime-tekst, druk op CTRL + F en voer een zoekopdracht uit voor "facebook-icon". Je zou het op regel 75 moeten vinden.
De een tag op regel 75 maakt de koppeling op het pictogram en de href attribuut dat je ziet, bepaalt waar die link naartoe zal gaan. U moet de waarde hiervan wijzigen href attribuut aan uw Facebook-URL (bijvoorbeeld: https://www.facebook.com/mylink).
Vervang de # dat is er standaard met uw URL. Doe dan hetzelfde voor Twitter op regel 79, Google+ op regel 83 en LinkedIn op lijn 87.
Als er een pictogram is dat u volledig wilt verwijderen, markeert u de link vanaf de opening tag en eindig bij het sluiten tag en verwijder vervolgens die code.
Sla uw site nu op en vernieuw hem, en wanneer u op de koppelingen klikt, moet deze naar de juiste locatie worden geleid.
Laten we vervolgens de contactgegevens onder de sociale pictogrammen wijzigen.
Begin met het inspecteren van het woord 'E-mail', zodat we kunnen vinden waar dit gedeelte met contactinformatie in de code begint. Noteer de regel code die u hebt gemarkeerd en de regel eronder zodat u deze kunt koppelen aan uw HTML-bestand.
Druk in Sublime-tekst op CTRL + F nogmaals en deze keer zoeken naar "E-mail". U moet het exemplaar van het woord 'E-mail' vinden dat wordt omgeven door code die overeenkomt met wat u in het infovenster hebt gezien.
Je vindt het op regel 94. Markeer het standaard e-mailadres "[email protected]" op de twee locaties op die regel:
Vervang het dan door uw eigen e-mailadres. Op de volgende regel kunt u ook het telefoonnummer vervangen door uw eigen telefoonnummer en op de regel hieronder kunt u het webadres vervangen door uw eigen adres:
Laten we nu beginnen met het bewerken van de belangrijkste CV-secties van de sjabloon. Er zijn een paar onderdelen van deze secties, dus we beginnen met het inspecteren van elk onderdeel, zodat u weet waar u op moet letten in uw code. Dit is ook een kans voor u om iets meer te leren over het navigeren door het inspectievenster om verschillende delen van uw site te vinden.
Blader omlaag naar het gedeelte "Professioneel profiel", klik met de rechtermuisknop in de tekst en inspecteer deze.
In het infovenster ziet u dat het een a gemarkeerd heeft p tag-this tag is verantwoordelijk voor het maken van alinea's in uw tekst.
Vervolgens willen we weten hoe een hele sectie tekst in een CV-sectie eruit ziet in code, niet alleen in afzonderlijke alinea's. Klik in het inspectievenster op de regel code boven de alinea die u zojuist hebt gecontroleerd en u zou alle tekst moeten zien oplichten:
Dit vertelt u dat elke sectie van de code is ingepakt in de tags div is een afkorting voor a divisie, en deze tags worden gebruikt om lay-out en styling te beheren.
Bekijk nu de titel van het CV-hoofdstuk, "Professioneel profiel":
In eerste instantie is alles wat je ziet een andere reeks div -tags. Dit komt omdat de werkelijke kop tussen deze tags is genest.
Druk op dat driehoekje aan het einde van de regel om het uit te vouwen en de inhoud ervan te bekijken en doe hetzelfde op de volgende regel totdat je de tekst 'Professioneel profiel' ziet waarnaar je op zoek bent. Je zult het ingepakt vinden ...
Nu weten we hoe de code eruit ziet voor elk onderdeel van deze CV-sectie, we kunnen teruggaan naar Sublime Text en beginnen met het bewerken ervan.
Plaats uw cursor rechts bovenaan uw HTML-document, zodat u vanaf de bovenkant kunt beginnen met zoeken. druk op CTRL + F en zoek naar "cv-item". Blijf kijken totdat u het exemplaar van de code vindt Nu kunt u de tekst voor het gedeelte Professioneel profiel vervangen door die van uzelf. Wikkel elke alinea van je tekst in ... Wanneer u klaar bent, controleert u of de tag met de openingsparagraaf van uw laatste alinea van de sectie het kenmerk bevat ... Als u uw HTML-document opslaat en uw site ververst, ziet u dat alles in de bovenste twee secties is aangepast. Nu kunnen we doorgaan met het bewerken van de resterende CV-artikelsecties op dezelfde manier als we net deden met het "Professional Profile". Inspecteer elk deel van elke sectie om vertrouwd te raken met de code waarnaar u moet zoeken om ze te bewerken. Inspecteer een functie: Inspecteer een werkperiode: Inspecteer een kogellijst: Gebruik dezelfde aanpak als bij het bewerken van het gedeelte 'Professioneel profiel' om de inhoud van de resterende CV-secties te bewerken. Als u functietitels, taakperioden of opsommingslijsten wilt bewerken, zoekt u de code op die overeenkomt met wat u in het infovenster hebt gezien, net zoals u tot nu toe met elke bewerking hebt gedaan. Gebruik ... Notitie: als u nieuwe CV-secties wilt toevoegen of bestaande cv-secties wilt verwijderen, moet u het infovenster gebruiken om de codetags te vinden die de volledige sectie omwikkelen. In dit voorbeeld ziet u dat de hele sectie is omwikkeld met de tags In je code kun je nu dat hele codeblok vinden en het kopiëren en plakken om een nieuw item te maken, of het hele lot verwijderen als je het kwijt wilt. Met je cv-secties bewerkt, komen we op het laatste item op onze lijst met wijzigingen; het auteursrechtbericht in de voettekst. Nogmaals zullen we hetzelfde proces gebruiken. Klik met de rechtermuisknop op het auteursrechtbericht en controleer het: Zoek vervolgens de overeenkomende code in uw HTML en bewerk deze met het huidige jaar en uw eigen naam: Goed gedaan! U hebt deze HTML-sjabloon zojuist volledig aangepast om uw eigen inhoud weer te geven. Ik hoop dat je er nu zeker van bent dat je in de toekomst meer code kunt aanpassen. De sjabloon waaraan we hebben gewerkt, is misschien een relatief eenvoudige, maar onthoud dat het proces voor bewerken altijd hetzelfde is, ongeacht hoe ingewikkeld een sjabloon lijkt. Inspecteer gewoon de sjabloon en identificeer de code voor het onderdeel dat u wilt wijzigen, zoek die code vervolgens in uw HTML-bestand en bewerk deze. Wanneer je aan het bewerken bent en je ziet een HTML-tag die je niet begrijpt, laat dat je niet tegenhouden. Er is eindeloos veel informatie online om u te helpen te leren wat iedereen doet. Zie voor wat extra hulp onderweg deze geweldige leerhandleidingen:Professioneel profiel
klasse met de waarde laatste, zoals dit: 
p tags om paragrafen te maken, en net als bij het gedeelte "Professioneel profiel", als u een sectie met een alinea beëindigt, moet u ervoor zorgen dat die er is tag bevat class = "laatste", d.w.z. 
Bewerk auteursrechtboodschap
En je bent klaar!
Accentsconagua
