Verkkosivustot, blogit, web-sivut – meidän aikanamme jo tuttuja käsitteitä. Internetin kehittymisen myötä web-sivujen isännöintisivustoista on tullut uskomattoman suosittuja, eikä tämä ole yllättävää: joillekin ihmisille oma verkkosivusto on välttämättömyys, toisille se on miellyttävää viihdettä. Ensimmäisessä tapauksessa puhumme yleensä yrityksistä, yhteisöistä, yksityisyrittäjistä, kun he mainostavat mitä tahansa kysyttyä tuotetta tai palvelua. Toinen koskee bloggaajia.
Tämän lisäksi on Internetin käyttäjiä, jotka vain etsivät tietoa, lukevat blogeja, katsovat videoita ja niin edelleen.
Laadukkaan verkkosivuston luomiseen on monia vaihtoehtoja. Keskitymme web-ohjelmointiin HTML:n avulla.
Mikä on HTML
HTML on lyhenne sanoista Hyper Text Mark-Up Language. Englannista käännettynä tämä tarkoittaa "Hypertext Markup Language".
Toisin sanoen HTML on joukko koodeja, joilla voit luoda sivuston pääelementtejä, sen kehyksen, kutenkuinka sanat muodostuvat lauseista.
HTML-koodit on kirjoitettu yksinomaan latinalaisilla kirjaimilla, ja niitä kutsutaan tunnisteiksi, ja jokainen koodi on suljettu kulmasuluissa. Jotkin tunnisteet on yhdistetty pariksi, osa niistä on parittomia.
Paritettu tarkoittaa, että niitä on käytettävä pareittain. Esimerkiksi aloitustunniste osoittaa, mistä se alkaa verkkosivulla, ja sulkeva tagi osoittaa, mihin se päättyy. Jälkimmäinen eroaa edellisestä sillä, että avauskulmasulkeen jälkeen on vinoviiva. Esimerkiksi on avaustunniste,on sulkeva tagi.
Parittomat tunnisteet eivät tarvitse kumppania.
Monilla tunnisteilla voi olla attribuutteja – lisäelementtejä, jotka antavat sille tarkemman merkityksen. Esimerkiksi tunniste.
Missä HTML:ää käytetään
Perinteinen käsitys siitä, missä HTML:ää tarvitaan, on verkkosivustojen rakentaminen.
Käytännössä tämä saattaa riittää, koska HTML:n avulla voit luoda sivuston pääelementtejä, valikoita (mukaan lukien monitasoiset), asettaa taustan, lisätä tekstiä, kuvia, ääntä, videota, muokata fontteja ja paljon muuta.
On kuitenkin olemassa muita kieliä, joiden avulla voit lisätä mielenkiintoisempia ja usein tarpeellisia elementtejä verkkosivulle:
- CSS asettaa tyylit koko sivustolle ilman, että sinun tarvitsee jatkuvasti määrätä yksittäisten elementtien tyyliominaisuuksia tunnisteiden avulla - esimerkiksi tekstin väri ja fontti.
- Skriptikielen avulla voit kehittää ja upottaa sivustoon miniohjelmia (skriptejä)banaalit esteettiset asiat (linkin värin vaihtaminen hiiren päällä vietäessä) ja päättäminen toiminnallisiin (asiakkaiden sähköpostiosoitteiden, puhelinnumeroiden kerääminen).
- PHP:n avulla voit kehittää oman vieraskirjasi tai kommenttijärjestelmäsi.
Myös HTML:ää käytetään sähköpostien luomiseen jakelua varten.
Mikä on linkki
Niiden avulla voit siirtyä toiselle verkkosivulle sekä sivuston sisällä että sen ulkopuolella.
HTML-linkkejä käytetään yleisesti:
- Siirry ulkoiseen verkkoresurssiin.
- Siirry sivuston sivuilla.
- Siirry Google-lomakkeisiin.
Linkki lähteeseen HTML:ssä on myös usein merkitty, varsinkin kun kopioit materiaalia toiselta sivustolta, sinun on määritettävä kirjoittaja. Muussa tapauksessa kopiointi ilman tekijänoikeuksia voi kuulua tekijänoikeusloukkauksen, sisällön varastamisen ja takaiskun määritelmien piiriin. Lisäksi lainattujen, ei-ainutlaatuisten materiaalien käyttö heikentää hakukoneoptimoinnin suorituskykyä, ja linkin ilmoittaminen lähteeseen vähentää riskejä.
Linkkityypit
Klassisessa mielessä linkki on verkkoresurssin osoite, johon pääset napsauttamalla sitä.
Tämän lisäksi on hyperlinkkejä: tekstiä ja kuvia. Näissä tapauksissa HTML-linkki on "piilotettu" jonkin lauseen (sanan) tai kuvan alle, ja sen seuraamiseksi sinun on klikattava tekstiä tai kuvaa.
Muutyyppiset linkit:
- Käyttämätön - linkki, jota ei ole vielä napsautettu tietyn istunnon aikana. Jos esimerkiksi seurasit tätä linkkiä eilen, sammutit sitten tietokoneesi ja käynnistit sen uudelleen tänään, linkki on nyt taas käyttämätön, koska uusi istunto on alkanut.
- Aktiivinen - tässä tilassa linkki säilyy hyvin lyhyen ajan: linkin napsautuksen ja sen seuraamisen välinen aika.
- Käytynyt - linkki, jossa on jo vierailtu vähintään kerran yhden istunnon aikana.
Tavallisten tekstilinkkien kohdalla vieraillut linkit yleensä vaihtavat väriä, ellei toisin mainita.
Hyperlinkkikuva ei muuta ulkonäköään, käytiinpä siinä vai ei.
Tavallisen linkin lisääminen
Monet verkkoresurssit näkevät sivuston osoitteen linkkinä, tekevät siitä välittömästi napsautettavan ja korostavat sen värillä. Jos osoite lähetetään esimerkiksi messengerissä tai sähköpostitse, voit siirtyä sivustolle napsauttamalla sitä.
Jos luot sivuston itse HTML-koodilla, sinun on lisättävä linkki erityisellä tunnisteella. Se näyttää tältä: verkkosivuston osoite. HTML:n linkkiteksti on määritettävä kokonaisuudessaan protokollalla.
Kuinka lisäät tekstin hyperlinkin
Aiemmin sanottiin, että tekstihyperlinkki toimii samalla tavalla kuin tavallinen linkki, mutta näyttää esteettisemmältä: usein tarpeettoman pitkän sivustoosoitteen sijaan ilmaistaan sana tai lause. Esimerkiksi lauseessa "Etsi tietoa täältä" voit piilottaa linkinsana "täällä". Se korostetaan, ja sen napsauttaminen ohjaa käyttäjän haluamallesi sivustolle.
HTML-linkin tekemisestä on jo keskusteltu aiemmin. Voit lisätä tekstihyperlinkin käyttämällä samaa tunnistetta. Ainoa ero on, että sinun on määritettävä tunnisteiden väliin teksti, jonka alle linkki piilotetaan: näkyvä teksti.
Kuvan hyperlinkin lisääminen
Täällä on vähän monimutkaisempaa. Käytämme samaa tunnistetta, mutta tekstin sijaan sinun on määritettävä kuvan polku.
Polku on kuvan sijainti. Jos kuva (valokuva) sijaitsee tiedostonjakopalvelussa, sinun on määritettävä kaikki kansiot kuvan polulla kauttaviivalla. Voit myös lisätä linkin kuvaan, jos mahdollista.
tagilla
src:n lisäksi myös muut attribuutit ovat käytettävissä, jolloin voit säätää kuvan korkeutta, leveyttä ja sijaintia ja paljon muuta. Jotkut niistä:
- Src - määrittää kuvan polun.
- Lowsrc - identtinen edellisen määritteen kanssa, mutta määritetty huonolaatuisille kuville.
- Korkeus - kuvan korkeus.
- Leveys - sen leveys.
- Alt - kuvan kuvaus. Kun viet hiiren kuvan tai kuvan päälle, tässä määritteessä määritetty teksti tulee näkyviin.
- Border - määrittää kuvan ympärillä olevan reunuksen paksuuden.
Attribuutit määritetään tunnisteen jälkeen ja sisältyvät siihensen koostumus. Attribuutin jälkeen on ilmoitettava sen arvo. Esimerkiksi attribuuteille "height" tai "width" (korkeus, leveys) määrittää verkkosivulla olevan kuvan korkeuden. Mittayksikkö on pikseliä, ellei toisin mainita.
Se näyttää tältä: <a href="verkkosivun osoite"
. Nämä määritteet auttavat määrittämään kuvalle sopivan koon. Reuna auttaa luomaan näkymättömän reunuksen kuvan ympärille.
Yllä olevat attribuutit koskevat erikseen kuvan lisäystunnistetta. Esimerkki:.
Mitä ovat ankkurilinkit
Ankkurilinkkien luominen on erittäin hyödyllinen taito. Usein on tarpeen laatia web-sivu, jossa on pitkä tekstilohko tai useita alaosia yhdelle sivulle. Tässä tapauksessa voit heti aloittaa linkkien luettelosta tekstin tai verkkosivun alaosioon, ja kun napsautat niitä, käyttäjä siirtyy suoraan pyydettyyn osioon.
Ankkurilinkkien luominen vaatii enemmän attribuuttitunnisteiden käyttöä kuin muuntyyppiset linkit.
Ensin sinun on asetettava yleisarvo jokaiselle tietolohkolle tai tekstin alaosalle top-attribuutin avulla ja liitettävä se sitten vastaavaan linkkiin.
Niiden ominaisuudet ovat laajempia, joten on suositeltavaa ensin hallita yksinkertaisempien linkkien luominen ja sitten siirtyä ankkurilinkkien muodostamiseen.
Vinkkejä
Apua kokeneiltaohjelmoijat:
- Voit tehdä sen niin, että linkin tiedot näkyvät HTML-muodossa. Tätä varten alt-attribuutti, jota käytämme myös graafisissa elementeissä, voi olla hyödyllinen.
- Voit tehdä linkkiluettelon HTML:n avulla. Tästä voi olla hyötyä erityisesti ankkurilinkeissä sekä silloin, kun sinun on tehtävä luettelo verkkoresursseista, joita voi seurata linkillä suoraan nykyiseltä verkkosivulta.
- CSS:n ja JavaScriptin sekä joidenkin HTML-toimintojen avulla voit luoda tekstilinkkejä ja hyperlinkkejä eri tavalla kuin tavallisesti. Kun esimerkiksi viet hiiren linkin päälle, se voi muuttaa väriään ja palata edelliseen, kun kohdistin on pois siitä. Tämä voidaan tehdä mukautetulla JavaScript-skriptillä. Lisäksi linkin väriksi voidaan asettaa jokin muu kuin sininen vieraillulle tai violetti vieraillulle. Tämä on CSS:n tehtävä.
- Älä käytä linkkejä väärin. Verkkosivu, jolla on monia sopimattomia linkkejä, näyttää huolimattom alta ja huolimattom alta.
- Varmista, että käyttäjä ymmärtää, että kuvan sisältävä hyperlinkki on todellakin kuva, ei pelkkä kuva.
Johtopäätös
HTML-sivulle on erittäin helppo linkittää. On tärkeää noudattaa kaikkia tämän kielen pääkohtia, koska pienikin virhe voi johtaa siihen, että tulosta ei tule ja koodi ei toimi.
