Länkar kan delas in i två kategorier:
länkar till externa resurser— skapas med hjälp av en tagg och används för att utöka funktionerna för det aktuella dokumentet när det bearbetas av webbläsaren;
hyperlänkar— länkar till andra resurser som användaren kan besöka eller ladda ner.
Hur man skapar hyperlänkar på en webbplats
1. Länkstruktur
Hyperlänkar skapas med hjälp av en parad tagg. Texten som kommer att visas på webbsidan placeras inuti taggen. Länktexten visas i webbläsaren med en understrykning, teckensnittsfärgen är blå och när du för muspekaren över länken ändrar muspekaren utseende.
Obligatorisk taggparameter är href-attributet, som anger webbsidans URL.
länkindexLänken består av två delar - pekare Och adressdel. Länkindexär en text eller bild som är synlig för användaren. Adressdel Länken är inte synlig för användaren den representerar adressen till resursen som du behöver gå till.
Adressdelen av länken består av URl. URL(Uniform Resource Locator) - enhetlig resursadress. När du skapar adresser rekommenderas det att använda ett bindestreck istället för ett understreck för att separera ord. I allmän syn URL med följande format:
Åtkomstmetod://servernamn:port/sökväg
Åtkomstmetod, eller protokoll, utbyter data mellan arbetsstationer i olika nätverk. De vanligaste dataöverföringsprotokollen:
fil ger läsning av en fil från den lokala disken:
File:/gallery/pictures/summer.html
http ger åtkomst till en webbsida med hjälp av HTTP-protokollet:
http://site.ru/
https är en speciell implementering av HTTP-protokollet som använder kryptering (vanligtvis SSL eller TLS)
https://site.ru/
ftp gör en begäran till FTP-servern att ta emot en fil:
Ftp://pgu/katalog/bibliotek
mailto startar en e-postsession med angiven destination och värd:
Mailto: [e-postskyddad]
Servernamn beskriver det fullständiga namnet på maskinen i nätverket, till exempel site.ru. Om servernamnet inte anges anses länken vara lokal, dvs. det är på samma maskin som HTML-dokumentet som innehåller länken.
TCP-portnummer, där webbservern fungerar. Detta är ett nummer som måste anges om metoden kräver ett portnummer (enskilda servrar kan ha sitt eget distinkta portnummer). Om ingen port anges är standardport 80. Standardportar är:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP
Väg innehåller namnet på mappen där filen finns.
2. Absolut och relativ väg
När en länk endast anger ett filnamn, antar webbläsaren att filen finns i samma mapp som dokumentet som innehåller hyperlänken. I praktiken innehåller webbplatser hundratals dokument, som placeras i separata mappar för att göra dem lättare att hantera. För att skapa en länk till en fil utanför mappen som innehåller det aktuella dokumentet, måste du ange filens plats eller sökväg. HTML stöder två typer av sökväg: absolut och relativ.
Ris. 1. Exempel på mappstruktur 2.1. Absolut väg
Absolut väg indikerar exakt plats fil inom hela mappstrukturen på datorn (servern). Den absoluta sökvägen till filen ger åtkomst till filen från tredjepartsresurser och innehåller följande komponenter:
1) protokoll, till exempel http (valfritt);
2) domän ( domännamn eller datorns IP-adress);
3) mapp (namnet på mappen som anger sökvägen till filen);
4) fil (filnamn).
Det finns två typer av absolut vägnotation: med och utan protokollindikation:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Om filen finns i rotmappen blir sökvägen till filen som följer:
http://site.ru/index.html
Om det inte finns något filnamn kommer webbsidan som är inställd som standard i webbserverinställningarna att laddas (den så kallade indexfilen).
http://site.ru/
Vanligtvis är indexfilen ett dokument som heter index.html. Närvaron av ett snedstreck / betyder att åtkomsten går till mappen om den inte finns där, går den direkt till filen.
2.2. Relativ väg
Relativ väg beskriver sökvägen till det angivna dokumentet i förhållande till det aktuella. Sökvägen bestäms utifrån platsen för webbsidan där länken finns. Relativa länkar används när du skapar länkar till andra dokument på samma webbplats. När webbläsaren inte hittar http://-protokollet i länken, söker den efter det angivna dokumentet på samma server.
En relativ sökväg innehåller följande komponenter:
1) mapp (mappnamn som anger sökvägen till filen);
2) fil (filnamn).
Vägen för relativa länkar har tre speciella notationer:
/ pekar på rotkatalogen och säger att sökvägen ska startas från rotkatalogen dokument och gå ner till nästa mapp
./ pekar på den aktuella mappen
../ gå upp en mapp (katalog)
Den största skillnaden mellan en relativ sökväg och en absolut sökväg är att den relativa sökvägen inte innehåller namnet på rotmappen och överordnade mappar, vilket gör adressen kortare, och om du flyttar från en domän till en annan behöver du inte ange en ny absolut adress. Men om en tredjepartsresurs länkar, till exempel, till dina bilder med relativa adresser, kommer de inte att visas på en annan webbplats.
3. Ankare
Ankare, eller interna länkar, skapar övergångar till olika sektioner av den aktuella webbsidan, så att du snabbt kan flytta mellan sektioner. Detta visar sig vara väldigt bekvämt när det är för mycket text på sidan. Interna länkar skapas också med taggen med skillnaden att href-attributet innehåller namnet på pekaren - den sk förankra, inte webbadressen. Pekarnamnet föregås alltid av ett #-tecken.
Jag tror att ingen HTML-sida kan existera utan minst en hyperlänk (eller bara en länk). Länkar kan vara till andra sidor eller webbplatser, såväl som till filer, bilder etc.
Länkar kan vara externa och interna, text och grafisk. Externa länkar hänvisar till andra webbplatser eller objekt på dem, medan interna länkar tvärtom hänvisar till olika delar av din webbplats. En textlänk är text som när du klickar på den tar dig till ett annat objekt eller öppnar det, medan en grafisk länk är ett objekt (vanligtvis en bild) som också tjänar till att gå till en annan sida, webbplats eller till exempel en bild. Länkar i HTML skapas med hjälp av en tagg (från engelska anchor - anchor). Härnäst ska jag berätta mer om länkar.
Taggen har ett viktigt href-attribut. Dess värde är sökvägen till objektet eller webbplatsen som vår länk refererar till i form av en URL. Ankaret (länkkropp) kan vara antingen text (textlänk) eller bild (grafisk länk). Om du behöver skapa en grafisk länk måste du använda IMG-taggen mellan taggarna som ett ankare. Här är ett enkelt exempel på HTML-kod för en länk:
länktext (ankare)
Jag ska ge dig ett annat exempel så att du kan förstå det bättre. Jag kommer att använda min webbplats som grund:
På html-sidan i webbläsaren ser det ut så här:
Färgen på länktexten ställs in av attribut i BODY-taggen. För att uttrycka det enkelt, länkar är föremål för samma modifieringsattribut som text på sidan. Detta inkluderar fetstil och kursiv stil, användning av rubriker, etc.
Följande kommer att visas på HTML-sidan:
Vi får resultatet utan ram:
Hemsida 1seo
Som du märkte utförs övergången till en annan sida i samma fönster. Om du vill att länken ska öppnas i ett annat fönster eller det överordnade fönstret (som standard är det i samma fönster), kan du använda följande målattribut för A-taggen:
- _blank — öppnar sidan i ett nytt fönster;
- _parent — laddar en länk i det överordnade fönstret;
- _self - standard. Öppnar länken i samma fönster.
Hemsidan för 1seo-webbplatsen
Det finns också ett title-attribut för att skapa ett verktygstips för en länk:
Hemsidan för 1seo-webbplatsen
Förresten, om du anger din postlåda i URL:en och anger mailto:-protokollet, så öppnas e-postprogrammet när du klickar på din länk, där din adress redan har angetts i fältet Till. brevlåda. Med exemplet skulle HTML-koden se ut så här:
Skriv ett meddelande till mig
Jag försökte skriva de viktigaste sakerna du behöver för att skapa en länk i HTML. Förresten, om du har läst de tidigare artiklarna i HTML-handledningen, kan jag med säkerhet säga att du redan vet minimum för att skapa din första fullfjädrade HTML-sida. När du har skapat en sida kan du lägga upp den på gratis hosting och se frukterna av ditt arbete. Tro mig, efter att du har gjort detta kommer du att få en ännu större våg av kreativ energi. Därefter kommer jag att berätta hur du skapar en tabell i HTML. Detta är också mycket viktig information, försök att helt absorbera och smälta det.
Publiceringsdatum: 15 maj 2012Huvudfunktionen i ett HTML-dokument är närvaron i det hyperlänkar(eller helt enkelt länkar) till andra dokument, webbplatser, filer, bilder etc. Det var möjligheten att infoga länkar till sidor till objekt utanför det som gjorde Internet så populärt och bekvämt att använda. Kom därför alltid ihåg "magin" med länkar när du skapar din webbplats.
I den här lektionen kommer vi att prata om hur man skapar en länk till webbplatsen, till dess separat sida eller fil. Du får lära dig hur du ändrar texten i en länk, hur du öppnar den i ett nytt fönster, hur du gör en länk till en bild, vad externa och interna länkar är och mycket mer. Dessutom har du redan information om att arbeta med länkar, som vi berört i tidigare lektioner (vi pratade till exempel om hur du kan ändra färgen på en länk i).
Sammantaget kommer denna handledning att göra din förståelse för länkbyggande komplett och tillräcklig. Du kommer att förstå hur man skapar en hyperlänk i HTML och varför. Och du kommer att lära dig att kontrollera dess egenskaper.
Villkor
§ 1. Länk till fil, länk till webbplats, länk till sida
Många frågor om hur en länk till en fil skiljer sig från en länk till en webbplats eller dess individuella sida tvingade mig att ge svaret på den i början av den här lektionen. Svaret är: ingenting. Alla länkar som anges är externa till original sida och skapas på samma sätt.
För att inte låta mina tankar flöda, ska jag visa dig allt med ett exempel.
I webbläsaren ser vi detta:
I webbläsaren ser vi detta:
Som du kan se skapas alla typer av länkar exakt likadant. Den enda skillnaden är adress objektet som ska refereras. Låt oss nu gå vidare till huvuddelen av lektionen.
§ 2. Skapa externa länkar
Länkarna skiljer sig från varandra genom extern Och inre, såväl som på text Och grafisk. Externa länkar leder utanför html-sidan, interna länkar leder till olika delar samma sidor. Textlänkar är text (som standard är den markerad i blått och understruken), och grafiska länkar innehåller en bild som ett objekt som du måste klicka för att gå till. Alla dessa typer av länkar skapas i HTML med hjälp av en tagg (förkortning för ankare). Låt oss ta en närmare titt på det.
För att skapa en extern länk till en webbplats, sida eller fil, använd taggattributet - href. Värdet på detta attribut är URL webbplats, sida eller fil (vi pratade om detta ovan). Mellan taggarna finns den synliga delen av länken (länkankare), det vill säga det vi ser på webbläsarens skärm. Länkankaret kan vara antingen vanlig text (textlänk) eller grafisk bild(länk-bild). En bildlänk skapas genom att infoga en bekant tagg mellan taggarna och. Generellt sett ser syntaxen för att skapa en länk ut så här:
Till exempel, för att skapa en textlänk till hemsidan på denna webbplats, måste du skriva följande HTML-kod:
http://www.seoded.ru/"> Hemsidan för webbplatsens hemsida
I webbläsaren kommer det se ut så här:
Som jag skrev i början av den här lektionen kan färgen på länktexten (ankaret) ändras med . I allmänhet kan du tillämpa samma regler på länktexten som på sidans huvudtext, d.v.s. markera den med fet stil, kursiv stil, använd rubriker osv.
§ 2.1 Grafiska länkar (bildlänkar)
Som jag sa ovan, för att skapa en bildlänk måste du använda . Ett exempel på en sådan länk ser ut så här:
Och webbläsaren kommer att visa:
Som standard omger webbläsaren bilden i en grafisk länk med en ram. Om detta inte är önskvärt, då attributet gräns märka IMG du måste tilldela värdet 0:
border="0">
Hemsida
§ 3. Interna länkar
Interna länkar används för att bekvämt navigera genom sidor med mycket innehåll. Det var med deras hjälp jag gjorde "Lektionens innehåll" (se i början av denna sida). Interna länkar skapas enligt samma princip som externa länkar. Endast i attributvärde href länkens "ankare" indikeras. "Ankaret" skapas av attributet namn:
name="ankarnamn">text
Och namnet på "ankaret" sätts godtyckligt. Det är värt att säga här att inte alla webbläsare förstår de ryska namnen på "ankare", så jag rekommenderar att du använder det latinska alfabetet. Texten mellan taggarna för att skapa ett "ankare" krävs inte och är oftast inte specificerad.
"Jag är mässling" finns på de platser på sidan dit användaren ska gå efter att ha klickat på länken.
Som jag sa ovan, i attributet href av en intern länk, istället för en adress, anges namnet på det önskade "ankaret" med den obligatoriska hash-symbolen ( # ) framför honom. Låt oss titta på det med ett exempel.
Jag skapade ett "ankare" med namnet zagolovok och placerade den i sidkoden bredvid rubriken på den här lektionen ("Hyperlänkar i HTML"). Ankarkoden är som följer:
name="zagolovok">
href="#zagolovok">Till titel
Och i webbläsaren så här:
Om du märkte att webbadressen i webbläsarens adressfält ändrades efter att ha klickat på den interna länken till titeln:
Till originaladress:
http://www..html
http://www..html#zagolovok
Och med den här funktionen kan du länka till en specifik plats på sidan från valfri resurs på Internet! Det vill säga, låt oss säga att du skapade en sida med en lång artikel om något (eller postade den på sidan stort antal foton) och markerade den med interna länkar. När du var i behövde du länka inte bara till sidan med artikeln (eller fotografierna), utan till en specifik plats på den (eller ett specifikt fotografi). Genom att använda alternativet med en intern länk i adressen kan du enkelt uppnå det du behöver.
§ 4. Absoluta och relativa referenser
Hemsida
Men med relativa länkar är det lite mer komplicerat. I sådana länkar anges adressen antingen relativt rotmappen för webbplatsen (den där startsida), eller i förhållande till den ursprungliga sidan. Sådana länkar behövs till exempel om sajten finns på hemdator. Eller så är detta inte en webbplats, utan en sida som är en pekare till andra dokument.
Låt oss utelämna det, vi måste länka till sidan clienty.html som ljuger i en mapp med webbplatsens huvudsida. Då kommer den relativa länkkoden att se ut så här:
/klienty.html">Kunder
Låt oss nu anta att det finns i samma mapp som huvudsidan zakazy mapp och redan i den ligger sidan klienty.html Då kommer koden för den relativa länken att se ut så här:
/zakazy/klienty.html">Kunder
Låt oss nu titta på att skapa hyperlänkar i förhållande till originalsidan. Låt oss säga att vi har en sida pris.html (startsida) och du måste länka till sidan från den clienty.html Det finns följande typiska alternativ:
1. Sidorna price.html och clienty.html finns i en mapp.
klienty.html">klienter
2. i rotmappen på webbplatsen, sida price.html finns i mappen zakazy en nivå högre).
Koden kommer att se ut så här:
../klienty.html">Kunder
Två punkter indikerar att du måste flytta ut från den aktuella mappen till en högre nivå.
3. Sidan klienty.html och mappen zakazy finns i rotmappen på webbplatsen, mebel mapp finns i mappen zakazy, sida price.html finns i mebel-mappen(dvs klienty.html-sidan i förhållande till den ursprungliga sidan price.html ligger två nivåer högre).
../../klienty.html">Kunder
Det vill säga att varje nivå indikeras med två punkter och ett snedstreck " / ».
4. i rotmappen på webbplatsen, sida clienty.html finns i mappen zakazy(dvs. nu ligger klienty.html-sidan i förhållande till den ursprungliga price.html-sidan en nivå lägre).
zakazy/klienty.html">Kunder
I det här fallet används inte prickar och snedstreck.
5. Price.html-sidan (originalsidan) och zakazy-mappen finns i rotmappen på webbplatsen, mebel mapp finns i mappen zakazy, sida clienty.html finns i mebel-mappen(dvs klienty.html-sidan är nu relativ till den ursprungliga price.html-sidan ligger två nivåer under).
zakazy/mebel/klienty.html">Kunder
6. I rotmappen på webbplatsen det finns två mappar: zakazy och oplata. Sidklient.html finns i mappen zakazy, originalsida price.html finns i mappen oplata(dvs båda sidorna ljuger i olika mappar en nivå ner från webbplatsens rotmapp).
../zakazy/klienty.html">Kunder
§ 5. Länk till e-post
För att skapa en länk till e-post, behövs istället för URL:en i attributvärdet href skriv adressen e-post anger protokollet ( mailto:). Och sedan när du klickar på den här länken öppnas ett fönster e-postprogram med e-postadressen i fältet "Till". I HTML-kod ser det ut så här:
mailto: [e-postskyddad]">Min mail
Och i webbläsaren är det så.
Hyperlänkär en indikation för webbläsaren vilket objekt inom eller utanför HTML-dokumentet den ska komma åt. Med hjälp av hyperlänkar kan användare flytta från en sida till en annan, ladda ner filer etc. En textbit eller en bild kan utformas som en hyperlänk ( grafisk fil). När en webbsida visas i ett webbläsarfönster är textlänken vanligtvis blåmarkerad och understruken. Detta är dock inte alltid fallet. För att gå till platsen som en länk pekar på behöver användaren bara klicka på dess text.
För att skapa en hyperlänk måste du använda taggar Och, definierar för taggen attribut HREF. Dess värde måste vara webbadressen som länken pekar på. Länktext placeras mellan taggar Och.
Om webbsidan som länken pekar till finns på en annan webbplats, då värdet på attributet HREF måste vara en fullständig URL inklusive protokollnamnet; sådana länkar kallas externa länkar. Om hyperlänken pekar på en annan sida på samma webbplats räcker det för att söka efter ett dokument att endast ange en relativ sökväg; en sådan länk kallas en intern länk.
En hyperlänk kan peka på en specifik plats på en sida om en ankartagg först bäddas in där. Taggar används också för att definiera ett ankare Och, men istället för ett attribut HREF ställ in attributet NAMN, vars värde måste vara namnet på ankaret. Den kan bestå av bokstäver och siffror, men får inte innehålla mellanslag. Om det finns flera etiketter på en sida bör de alla ha olika namn.
För att skapa en länk till det installerade ankaret behöver du i taggen lägg dess namn i slutet av URL:en efter dokumentnamnet, avgränsade med # . Symbol # betyder att den följs av namnet på taggen, inte filnamnet.
Länktext
Om i attributet HREF ange en e-postadress med ordet mailto: framför den, sedan efter att ha valt en sådan länk kan du skicka ett meddelande var i fältet "Till vem" denna adress kommer att registreras.
Exemplet nedan diskuterar användningen av olika typer av hyperlänkar.
HTML-dokument som använder hyperlänkar och ankare:
Nya versioner av standardprogram för operationssalen Windows-system och drivrutiner finns även på företagets hemsida Microsoft.
Och nu kan du gå till sidans huvudsida.
Du kan ta reda på hur du kontaktar mig i slutet av denna sida.
i detta textdokument.
Så här kommer HTML-dokumentet att se ut efter att det spelats av webbläsaren:
Nya versioner av standardprogram för operativsystem Windows och drivrutiner finns på Microsofts webbplats.
Du kan använda materialet som finns upplagt i detta textdokument.
I det här exemplet finns ordet "Microsoft" i den externa hyperlänkstaggen och texten "webbplatsens startsida"- i den interna länktaggen. Text "i slutet av denna sida" placeras i ankarlänktaggen, och "i detta textdokument"- i en hyperlänktagg med ett attribut HREF, där vi angav en koppling inte till en webbsida, utan med textdokument, som sparas i samma mapp som det aktuella HTML-dokumentet. Sms:a " [e-postskyddad] " finns i taggen som beskriver ankaretiketten och i attributet HREF angivna e-postadressen.
Om en besökare på sidan använder en extern Microsoft-länk öppnas sidan på: http://www.microsoft.com/. Efter att ha klickat på en hyperlänk "webbplatsens startsida" Sidans huvudsida öppnas. Genom att klicka på en intern länk i ett textdokument öppnas ett fönster med textdokumentet text.doc ingår i aktuell mapp. Om du använder ankarlänken i slutet av den här sidan kommer bilden av den aktuella sidan att ändras så att etiketttexten " [e-postskyddad] ", som ankaret är associerat med, kommer att placeras i den del av dokumentet som är synlig på skärmen.
Placera texten " [e-postskyddad] " är en hyperlänk, med vilken användaren kommer att kunna skicka ett brev med hjälp av e-postmeddelandet som konfigurerats på datorn till det som anges i attributet HREF adress - [e-postskyddad] .
Låt oss titta på ett annat exempel på hur du skapar texthyperlänkar. Låt oss anta att två HTML-dokument sparas i en viss mapp, som beskriver två områden av företagets arbete - 1.html Och 2.html.
Låt oss skapa en lista med hyperlänkar, som var och en illustrerar ett av företagets arbetsområden:
Våra produkter
Våra kunder
Resultat:
Våra produkter
Våra kunder
I det här exemplet finns hyperlänkstaggar i rubriktaggar på första nivån. Hyperlänktexterna kommer att placeras på separata rader och utformas som rubriker på första nivån.
Som standard visas texthyperlänkar i blått och understruket, och om de redan har använts i mörkrött. För att ändra dessa färger, lägg till motsvarande attribut i taggen : . Det betyder att efter att sidan först har laddats kommer alla hyperlänkar att vara lila, och om en besökare använder en av dem blir färgen på deras text gul. Detta är praktiskt när det finns många länkar på sidan och besökaren vill se dem en efter en: genom att sedan byta ut de besökta hyperlänkarna med en annan färg kan sådan visning systematiseras.
God dag till alla, mina kära vänner och läsare. Jag hoppas att du har bestämt dig för att delta i min tävling och redan skriver om din bloggresa. Jo, jag skulle vilja fortsätta vår studie av html-språket och idag skulle jag vilja berätta om en av de viktigaste komponenterna, nämligen hyperlänkar.
Ja, utan sådana hyperlänkar skulle Internet inte vara så bekvämt. Nej, jag ljuger. Det skulle inte vara lätt att navigera överhuvudtaget. Kan du föreställa dig Internet utan dem? Jag personligen gör det inte.
Och idag kommer vi att lära oss hur man infogar en hyperlänk i html. Men först vill jag fråga dig: Vet du vad en hyperlänk är och hur den skiljer sig från en vanlig länk? Allt är faktiskt enkelt här: en länk är en enkel information som refererar till ett dokument. Samtidigt kan du inte klicka på den här texten (ingenting kommer att hända), men du vet var du ska leta efter information.
Exempel: Du kan lära dig hur du framhäver hår i Photoshop på //site/adobe-photoshop/kak-vydelit-volosy/
En hyperlänk är samma text, bara dess kärna är att du kan klicka på denna text och komma till önskad sida, webbplats eller något annat objekt. Dessutom kan själva texten vara vad som helst, medan adressen skrivs separat inuti och kan vara helt annorlunda. Men hur som helst, i vardagligt tal kallas de fortfarande bara länkar. Här är ett exempel på en hyperlänk:
Du kan läsa om hur du korrekt framhäver hår i Photoshop i en av mina tutorials.
Nåja. Bra teori. Låt oss nu gå vidare till praktiken och se vilka som är ansvariga för alla dessa frågor.
Den parade taggen är ansvarig för hyperlänken, men i sig representerar den ingenting. Det går alltid i samband med ett attribut. Och i det här fallet måste vi hela tiden skriva samma href. I attributvärdet lägger vi länken till den önskade resursen själv. Och i själva innehållet skriver vi själva texten som ska bli klickbar (fungerar när man klickar). Titta på exemplet så tror jag att du kommer att förstå allt.
Yandex sökmotor
Som du förstår skrev jag i det här exemplet att när du klickar på en text " Sökmotor Yandex", kommer personen att dirigeras till adressen som är skriven i värdet på href-attributet.
Jag tror att många av er vet att det finns interna och externa länkar. Interna länkar utförs inom en katalog, det vill säga webbplatsen, och externa länkar leder till någon tredjepartsresurs. Och nu ska jag visa dig hur du gör båda.
Inre övergångar
Fil i samma mapp
Men en sådan övergång kommer att fungera förutsatt att filen du länkar till finns i samma mapp som filen där du placerar länken. För andra alternativ är allt lite annorlunda.
Fil i en annan mapp
- Öppna filen pushkin.html i Notepad++
- Hitta nu ordet foto och slå in det i taggar<a href> .
- Nu uppmärksamhet! I attributvärdet anger vi sökvägen i förhållande till filen som redigeras, det vill säga pushkin.html själv. Du borde sluta med något sånt här:
Vad har vi gjort nu? Och vi gjorde följande: eftersom vägen till fotografi ligger i separat mapp img, som finns i samma mapp som filen pushkin.html, då måste vi i attributvärdet först skriva namnet på mappen och sedan, genom ett snedstreck (/), det fullständiga namnet på dokumentet (i vårt fall, fotografier).
Spara och kör filen pushkin.html i din webbläsare. Du kommer att se att ordet "Foto" har blivit blåmarkerat och blivit klickbart, vilket betyder att vi genom att klicka på denna länk kommer till filen fofo.jpg, som finns i img-mappen.
Så hur? Är allt klart? Om något händer, tveka inte att fråga.
Externa övergångar
Och vi kan naturligtvis inte låta bli att nämna externa länkar, efter att ha klickat på vilken vi kommer till en helt annan webbplats. Men det är inget komplicerat här. Hela poängen är att du lägger in den fullständiga adressen till webbplatsen eller webbsidan i href-värdet. Jag visade ett exempel med Yandex ovan. Men här är ett annat exempel:
Jag ska studera för att bli en mästare i sociala projekt.
Här kommer vi till en specifik sida på en specifik webbplats.
Öppnas i ett nytt fönster
Som standard, när du klickar på en länk, öppnas dokumentet i samma fönster som din sida, d.v.s. din sida stängs av. Och det här är inte bra. Speciellt för projekt med främjat innehåll eller bloggar rekommenderas att dokumentet öppnas i ett nytt fönster eller en ny flik när du klickar på en länk utan att stänga din sida.
Målattributet med värdet "_blank" hjälper oss med detta. Det är inget komplicerat här. Du behöver bara infoga detta i öppningstaggen efter href-attributvärdet. Låt oss ta det utdraget från filen lukomorye.html, där vi gjorde en länk till sidan pushkin.html, först nu kommer vi att skriva just detta attribut. Det ska se ut så här:
Från dikten Ruslan och Lyudmila (Författare - A.S. Pushkin)
Nåväl, allt är klart här. När du nu klickar på innehållet öppnas den önskade sidan i ett nytt fönster. Denna sak är mycket nödvändig, för om du inte registrerar den kommer användaren helt enkelt att lämna din sida. Och så, i alla fall, kommer han att stanna kvar på den, bara om han inte specifikt stänger den. Försök att göra allt själv, bara göra allt vackert med dina egna händer. Du behöver inte kopiera och klistra in.
Något sånt här. Det verkar som att jag berättade allt det viktigaste för dig, men om du vill gå i den här riktningen och lära dig HTML och CSS för att skapa professionella webbplatser, bloggar och till och med onlinebutiker, se till att kolla in det utmärkt videokurs om detta ämne. Lektionerna är verkligen utmärkta och berättas verkligen för människor som fortfarande är lite eller inte bekanta med att bygga webbplatser.
Nåväl, detta avslutar vår lektion för idag. Jag hoppas att du gillade min artikel och kommer att bli glad om du blir min vanliga läsare. Så glöm inte att prenumerera på mina blogguppdateringar så att du inte missar något intressant. Tja, jag önskar dig framgång i alla dina ansträngningar. Hej då!
Med vänlig hälsning, Dmitry Kostin.