Kuinka luoda HTML-linkki verkkosivulle

Kuinka luoda HTML-linkki verkkosivulle

Linkin luominen verkkosivullesi tai blogiisi toiselle sivulle edellyttää HTML a href -tunnisteen lisäämistä HTML-lähdekoodin body-osioon. Kun linkki on luotu, vierailija voi avata toisen verkkosivun tai tiedoston napsauttamalla tai napauttamalla linkkiä. Alla on kaksi esimerkkiä, joissa on lisätietoja erityyppisistä linkeistä, joita voit lisätä sivulle.

Huomautus

Tämän sivun menetelmät HTML-linkin lisäämiseksi johtavat siihen, että linkitetyssä tekstissä on alleviivaus. Jos et halua, että linkitetyssä tekstissä on alleviivausta, katso: Miten luodaan linkki ilman alleviivausta HTML:ssä.

Absoluuttinen HTML-linkkiesimerkki

<a href="https://www.computerhope.com/">Computer Hope</a>

Yllä olevassa esimerkissä ulkoinen linkki on absoluuttinen polkulinkki (ulkoinen linkki), joka osoittaa Computer Hope -verkkosivuston kotisivulle alla olevan kuvan mukaisesti. Niin kauan kuin Computer Hope -verkkosivusto on toiminnassa ja sinulla on Internet-yhteys, voit käydä linkissä ilman virheitä.

Esimerkki

Computer Hope

Kärki

Absoluuttisella linkillä voit linkittää mihin tahansa Internet-osoitepalkissasi näkyvään URL-osoitteeseen. Jos esimerkiksi haluat linkittää tälle sivulle, voit kopioida “https://www.computerhope.com/issues/ch001657.htm”-osoitteen ja liittää sen linkin href-osaan.

Esimerkki suhteellisesta HTML-linkistä

Alla olevassa esimerkissä tämä linkki on suhteellinen polkulinkki. Se osoittaa tiedostoon, joka on samassa hakemistossa kuin linkin sisältävä sivu.

HTML-tunniste

Jos tiedosto “hope.html” ei ole samassa hakemistossa kuin sivu, joka yrittää linkittää sivulle, saat 404-virheilmoituksen. Suhteellisen linkin tekee ainutlaatuisen, että sen avulla voit linkittää sivulle, joka toimii online- ja offline-tilassa.

Paikallisten tiedostojen linkittäminen

Suhteellisen linkin (sisäisen linkin) tekeminen antaa linkin toimia online- tai offline-tilassa paikallisessa kansiossa niin kauan kuin tiedosto on olemassa. Et kuitenkaan saa koskaan käyttää absoluuttista polkua luodessasi paikallisia tiedostoja. Jos linkki osoittaa esimerkiksi osoitteeseen C:\html\example.html, tiedosto saattaa toimia tietokoneessasi, mutta jos se avataan toisella tietokoneella, linkki ei toimi.

Kärki

Jos työskentelet HTML-editorin, kuten Dreamweaverin, kanssa, voit määrittää paikallisen sivustokansion ja tehdä kaikki linkit suhteessa kyseiseen juureen. Jos esimerkiksi olemme tallentaneet kaikki tiedostomme C:\ch-kansioon, linkit voidaan tehdä suhteessa kyseiseen kansioon. Toisin sanoen linkki /jargon/h/html.htm on c:\ch\jargon\h\html.htm paikallisesti avattaessa ja online-tilassa https://www.computerhope.com/jargon/h/html .htm. Tässä esimerkissä linkin ensimmäinen vinoviiva käskee selaimen aloittamaan sivuston juurihakemistosta.

Ankkurin lisäominaisuudet

Ankkuritunniste tukee myös muita määritteitä. Voit esimerkiksi lisätä otsikko-attribuutin kuvaamaan linkkiä, kuten alla olevassa linkissä näkyy, kun viet hiiren osoitinta linkin päälle. Katso alla olevasta linkistä lisämääritteitä, jotka voidaan lisätä ankkuriin.

Kuinka muokata hyperlinkkiä

Mitä tahansa hyperlinkkiä voidaan muokata muuttamalla URL-osoitteen osoitetta. Jos muokkaat HTML-sivua tekstieditorilla (esim. Muistiolla), etsi linkit href ja vaihda se uuteen paikkaan. Jos käytät WYSIWYG-, CMS- tai online-editoria, siirrä osoitin linkin kohdalle ja yritä käyttää pikanäppäimiä Ctrl+L tai Ctrl+K. Jos kumpikaan näistä pikanäppäimistä ei toimi, sinun on löydettävä painike tai vaihtoehto, jolla linkkiä voidaan muuttaa tai päivittää.

Hyperlinkin muokkaaminen Dreamweaverissa

Voisimme esimerkiksi muokata hyperlinkkiä Dreamweaverissä tekemällä jokin seuraavista.

  1. Etsi linkki koodinäkymästä ja muokkaa href-tekstiä osoittamaan uuteen sijaintiin.

tai

  1. Siirrä osoitin rakennenäkymässä sen hyperlinkin kohdalle, jota haluat muokata.
  2. Paina pikanäppäintä Ctrl+L tai Ctrl+K pikanäppäinasetuksistasi riippuen. Osoita uuteen paikkaan. Jos pikanäppäin ei toimi, napsauta tiedostovalikosta Muokkaa ja valitse Linkki ja sitten Vaihda linkki.

Recent Articles

spot_img

Related Stories

Stay on op - Ge the daily news in your inbox

[tdn_block_newsletter_subscribe input_placeholder="Email address" btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#0d42a2" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]