Tässä artikkelissa opit käyttämään HTML-koodia ensimmäisen verkkosivustosi kirjoittamiseen! Artikkeli tarjoaa havainnollistavia esimerkkejä paremman ymmärtämisen takaamiseksi. Tehdään heti varaus, että artikkeli on alun perin tarkoitettu niille, jotka ovat vasta aloittamassa HTML:n oppimista. Lisäksi lupaamme, että tämän artikkelin lukemisen loppuun mennessä luot taatusti ensimmäisen verkkosivustosi.
HTML on lyhenne sanoista HyperText Markup Language, eli tekstin järjestämiskieli.
Toisin kuin ohjelmointikielet (JavaScript, PHP jne.), jotka käyttävät komentosarjoja toimintojen suorittamiseen verkkosivustoilla, sekvensointikieli (HTML) käyttää tunnisteita verkkosivuston sisällön merkitsemiseen.
Aloitetaan HTML:n oppiminen tyhjästä
Aivan kuten englanti koostuu kirjaimista A, B, C jne., HTML koostuu omituisista "kirjaimista":,,
jne. Verkkovastaavat kutsuvat näitä omituisia HTML-kielen "kirjaimia" tunnisteiksi.
Seuraava on esimerkki HTML-tunnisteesta.
Tagit Luo alleviivaus tämän tekstin reunojen ympärille.
HTML-tunnisteet yhdistettynä CSS-kielityylien kanssa mahdollistavat verkkosivustojen nopean ja tehokkaan luomisen.
HTML:n paikka muiden kielten joukossa
Kuten tiedät, hyvä verkkosivustorakennettu vähintään viidellä kielellä.
Modernit verkkosivustot on rakennettu seuraavilla kielillä:
- HTML (rakenne ja järjestys).
- CSS (tyylisisältö).
- JavaScript (selaintoiminnot).
- PHP (palvelintoiminto).
- SQL (tietojen tallennus).
HTML on tärkein peruskieli, johon muut perustuvat. Siksi HTML:n oppimisen tulisi olla ensimmäinen askel kaikille, jotka oppivat rakentamaan verkkosivustoja verkossa.
Tagi
HTML-kieli on muuttunut vuosien aikana sen perustamisesta lähtien. Tällä hetkellä useimmat Internet-sivustot ovat siirtymässä kielen uusimpaan versioon - HTML5. Mutta jopa HTML5:ssä kielen perusteet pysyvät ennallaan.
HTML-sivun rakenne on kuin voileipä. Aivan kuten voileivässä on kaksi leipäviipaletta, HTML-dokumentissa on aloittava ja lopettava HTML-tagi.
Nämä tunnisteet, kuten leipä voileivässä, ympäröivät kaiken sisällä.
Tagi
Kun jatkat HTML:n oppimista, sinun tulee ehdottomasti tutustua tagiin. Suoraan ylätunnisteen sisällä on koko sivuston sisältö, tagi mukaan lukien. Tämä tunniste on pakollinen ja sisältää kaikki sen sivuston asetukset, jolle se on kirjoitettu. Nämä asetukset eivät näy sivuston vierailijoille, vain selaimet (Google Chrome, Mozilla Firefox jne.) näkevät ne.
Verkkosivun asetuslohko sisältää kaikki "renderöimättömät" elementit, joiden avulla selain näyttää sivustosi oikein verkossa.
Kaikki vaihtoehdotvoidaan määrittää tunnisteen sisällä, katsomme sitä, mutta hieman myöhemmin - kun sen aika koittaa.
Tagi
Tagi, kuten tagi, on tagin sisällä.
Tätä tunnistetta tarvitaan, jotta sivustossasi voidaan näyttää kaikki tiedot, jotka haluat näyttää.
Otsikot, kappaleet, taulukot, kuvat ja linkit ovat vain pieni osa elementeistä, jotka voidaan sisältää tunnisteen sisällä.
HTML-dokumentin perusrakenne:
… …
Ensimmäinen sivustosi
Nyt tiedät, että voit luoda verkkosivustoja HTML:n avulla ja että tähän käytetään perustunnisteita:
- . Piirtää verkkosivun rajat.
- . Sisältää asetukset verkkosivun näyttämiseksi selaimessa.
- . Sisältää kaikki verkkosivun elementit (kuvia, videoita, tekstiä ja niin edelleen), jotka haluat näyttää sivuston vierailijoille.
Muut tunnisteet, kuten,,, puhumme pian.
Olisi hienoa, jos lukija ei vain lukisi tätä artikkelia, vaan myös juoksi heti hiomaan taitojaan. Hioaksesi HTML-taitojasi sinun on luotava ensimmäinen verkkosivustosi, joka toimii testausalustana uusille taidoillesi.
On tunnettua, että matkapuhelinoperaattorit ("MTS", "MegaFon" ja niin edelleen) tarjoavat meille mobiilipalveluita. Samalla tavalla isännöintioperaattorit tarjoavat meille palveluita sivustojen luomiseen ja hallintaan. Luo verkkosivustosi siirtymällä minkä tahansa ilmaisen hosting-operaattorin sivustolle.
Vahvistettuja isännöintipalveluntarjoajia ovat BEGET orreg, esimerkiksi. Voit valita kenet tahansa.
Lyhyen rekisteröinnin jälkeen 24 tunnin kuluttua luodaan automaattisesti ensimmäinen Internet-sivustosi, joka näkyy koko maailmalle, ja voit aloittaa harjoittelun!
Moderni sivustorakenne
Nyt kun sinulla on sivustosi, tarkista, mitä tunnisteita tunniste sisältää ja miten ne järjestävät sivustojen tiedot.
Yllä oleva kuva on kaavamainen esitys rakenteesta, joka tuli HTML-kielen uusimman version - HTML5 - mukana. HTML5:n mukana tuli uusien tunnisteiden lisäksi myös verkkosivustojen rakentamisen merkitys. Kaikki kuvassa näkyvät tunnisteet sisältyvät päätunnisteeseen. Nämä tunnisteet auttavat sinua "hahmottamaan" sivustosi rakenteen ja antamaan sille merkityksen.
Esimerkiksi tunnisteiden sisään … on kätevää sijoittaa sivuston otsikko (tunnisteet) ja sivuston kuvaus (tunnisteet).
Sivuston valikko (linkit) on kätevä sijoittaa tunnisteiden sisään.
Tagien sisään on kätevää sijoittaa mikä tahansa suuri merkityksellinen tietolohko. Se voi olla useita artikkeleita, joista jokainen on "kääritty" tunnisteisiin tai valokuviin (tunniste) tai taulukoihin (tunnisteet
) ja paljon muuta.
Tagien sisään on kätevää sijoittaa kaikki tiedot, jotka eivät sovi.
Tagien sisään on tapana sijoittaa lisätietoja, kuten yhteystietoja, sivuston lisäosia ja niin edelleen.
Nyt olet siis hieman taitavampi siinä, mistä nykyaikaiset verkkosivustot on tehty. Otetaan esimerkkimyllerrys päässäni vaihtui oivalluksen kunnioituksella.
Joten, kun avaat tiedostonhallinnan isännöintioperaattorisi sivustolla ja löydät asiakirjan nimeltä index.php, kirjoita siihen sivustosi rakenne ikään kuin tyhjästä.
Ensimmäinen verkkosivustoni
Sivun otsikko
Sivun kuvaus
Linkki 1 | Linkki 2 | Linkki 3
Jonkun artikkelin otsikko
Tämä on lohko, joka sisältää mitä tahansa tietoa ja CSS:n avulla voit värittää tämän lohkon ja koko sivuston sisällöineen haluamallasi tavalla. © Kaikki oikeudet pidätetään
Muistatko, että sanoimme, että sivustolla on erilaisia asetuksia? No, tässä se on:
- Näytämme selaimille, että sivusto voi sisältää sekä venäjän että englannin merkkejä (muuten, kun avaat sivuston, näet kauhean krakozyabryn).
- tarkoittaa sivun nimeä, joka näkyy selaimen välilehdessä ja hakukoneessa ("Yandex", Google ja vastaavat).
Tietenkin ilman CSS-tyyliä sivustosi näyttää niukk alta (mustat kirjaimet valkoisella taustalla), mutta muista kirjoittaa ensimmäinen sivusi ensin HTML-kielellä.
Onnittelut! Olet juuri luonut ensimmäisen verkkosivusi omalle verkkosivustollesi! Siitä tulee mielenkiintoisempaa!
