Sivumallin koodi. Leveällä rungolla. Valinnaiset tagit HTML5:ssä
Oppitunti "HTML-sivun luominen" on omistettu hyvin yksinkertaisen verkkosivun asettelulle. Opit tallentamaan HTML-tiedoston oikein, asettamaan tarvittavan koodauksen HTML-sivun näyttämiseksi oikein selaimessa ja sijoittamaan tekstejä, luetteloita ja kuvia web-sivulle.
Tämän oppitunnin jälkeen opit jo luomaan ensimmäisen verkkosivusi, kuten kuvassa 1.
Kuva 1
1. HTML-dokumentin rakenne
HTML-tiedostoilla on tunniste .htm tai .html.
Tunnisteet yhdistetään yleensä pariksi: aloitus- ja lopputunnisteet. Alkukirjain -<>, lopullinen, Esimerkiksi
Ja
Parillista tagia kutsutaan myös kontti .
Joillakin tunnisteilla ei ole vaadittua tunnisteparia, tätä tagia kutsutaan yksittäinen
. Tällainen tagi suljetaan kirjoittamalla esimerkiksi oikea kauttaviiva ennen sulkevaa kulmasulkua
html-dokumentin rakenne näyttää tältä (Kuva 2).
Kuva 2
Kuvan 2 luettelon selitykset
Ensimmäisellä rivillä DOCTYPE-rakenne tarkoittaa yhtä web-sivun asettelustandardeista.
Tunnisteiden välissä
Ja
sisältää otsikkoosan. Se sisältää suunnittelun
Kuva 3
Ennätys tarkoittaa kyrillistä koodausta, jotta kirjaimet näkyvät oikein selaimessa. Jos koodausta ei ole määritetty, fontit voidaan joskus näyttää seuraavasti (Kuva 4)
Kuva 4
Sama sivu koodauksen lisäämisen jälkeen (kuva 5)
Kuva 5
Huomautus: koodauksen sijaan charset="windows-1251" voit käyttää koodausta charset=" utf -8" , jonka avulla voit luoda monikielisiä sivustoja, koska kaikki maailmassa olevat hahmot ovat läsnä siinä. Tässä tapauksessa sisään Muistilehtiö++ on välttämätön ennen asettelua ja tallentamistahtml-valitse tiedosto ylävalikosta Koodaukset - Koodaa UTF -8 ilman BOM (UTF-8 ilman tuoteluetteloa)
Nämä tiedot riittävät ensimmäisen asiakirjan luomiseen.
Harjoittelu 1
1. Luo kansio, anna sille nimi minuntalo. Kaikkien kansioiden ja tiedostojen nimet on luotava latinalaisilla pienillä kirjaimilla, Venäläisiä nimiä ei saa käyttää. Pidä nimet lyhyinä ja merkityksellisinä.
Kirjoitamme verkkosivun koodin Notepadiin. On parempi käyttää ei Windowsin mukana tulevaa Notepadia, vaan "edistyneempää", esimerkiksi Notepad++. Jakelu Muistio++ on kansiossa CD/levy.
2. Avaa Notepad++. Varmista, että ANSI-koodaus on asetettu, tehdäksesi tämän kohdan valikossa Koodaukset, aseta asento Koodaa ANSI:ksi.
3. Kirjoita koodi kuvan 2 luettelosta Notepad++:aan.
Kuvan 2 listauksessa oleva koodi toimii meille jatkossa mallina, jotta meidän ei tarvitse kirjoittaa HTML-dokumentin rakennetta joka kerta. Kopioi DOCTYPE-rakenne täältä (ei tarvitse muistaa tai muistaa sitä ulkoa).
4. Tallenna tiedosto nimellä template.html kansiossa minun taloni kentällä ollessaan Tiedostotyyppi Asentaa Kaikki tyypit(Kuva 6), muuten web-sivusi ei avaudu selaimessa.
Kuva 6
5. Suorita tallennuksen jälkeen sapluuna. html tuplaklikkaus. Tämän seurauksena tiedostosi näyttää tältä (Kuva 7).
Kuva 7
Jos et saa yllä olevan kuvan mukaista tulosta, se tarkoittaa, että koodissa on todennäköisesti virhe. Yksi väärä merkki riittää ja verkkosivu ei näy oikein. Tarkista koodi uudelleen kuvan 2 luettelosta.
6. Kansion sisällä minun taloni luoda kansion julkinen_ html. Tämä nimi on yleensä kansio, johon sivusto on tallennettu, kun sitä isännöidään todellisessa isännöinnissä (tätä kansiota voidaan kutsua myös nimellä www).
7. Tallenna tiedosto sapluuna. html kansiossa julkinen_ html uudella nimellä pää. html.
8. Kansiosta CD/ html_css_1 avaa tiedosto text_main.txt Notepad++:ssa ja avaa myös nimellä tallennettu tiedosto pää. html
9. Kopioi kaikki teksti tiedostosta text_main.txt ja liitä se tiedostoon pää. html ilmauksen "Web-sivun sisältö" sijaan. Tagissa
10. Tallenna muutokset ja esikatsele tiedostoa pää. html selaimessa. Näet muotoilemattoman tekstin. Selain ei edes tee lähdetekstissä olevia rivinvaihtoja (kuva 8).
Kuva 8
2. Muotoiluweb-merkitty sivutHTML
Tämä HTML-sivun luomisen opetusohjelma kattaa perustunnisteet, joita käytetään verkkosivun merkitsemiseen.
Tunnisteet on suunniteltu muotoilemaan verkkosivun tekstiä. Tunnisteiden listaa voi tarkastella tarkemmin kansiossa CD/HakemistoHTML hakemistossa html401_en.chm(ylävalikon kohdassa elementtejä).
Katsotaanpa joitain tunnisteita.
Elementit h 1, h 2, h 3, h 4, h 5, h 6
Asiakirjan rungon jäsentäminen tapahtuu elementin sisällä < kehon> käyttäen otsikoita, jotka määritetään elementeillä h1, h2, h3, h4, h5, h6.
Otsikkoelementit on paritettu, joten niissä on oltava aukko < h1> ja sulkeminen h1> tunnisteet.
HTML:ssä on kuusi otsikkotasoa: h1 (yläisin), h2, h3, h4, h5 ja h6 (alin). Otsikkoelementtien toiminnallisuus on samanlainen kuin tavalliset otsikotyylit tekstieditoreissa.
Näiden kuuden tunnisteen vaikutukset näkyvät alla olevissa kuvissa. Yhdessä kuvassa lähde(Kuva 9), toisaalta - näkymä selaimessa (Kuva 10).
Kuva 9
Kuva 10
Tekstin jakaminen kappaleisiin
Tag < s> asettaa kappaleen alun ja lisää välilyönnin kappaleen yläosaan - sisennyksen erottamaan tämän kappaleen edellisestä.
Pakota linjan katkaisu
Tag
voit rivittää kappaleen jäljellä olevan tekstin seuraavalle riville. Tämä on pariton tagi, ja toisin kuin kappaletunniste, se ei lisää riviväliä.
Harjoittelu 2
1. Muotoile otsikko "Arkkitehtuuriprojektien luettelo" käyttämällä tunnisteita
Ja
.2. Muotoile otsikko "Tulevan kodin projekteja" tagien avulla
Ja
.3. Muotoile otsikot "Taloprojektit" ja "Taloalueet" käyttämällä tunnisteita
Ja
.4. Jaa pääteksti kappaleisiin tunnisteen avulla
Käytä tunnistetta kahden ensimmäisen kappaleen sisällä
katkaista linja. Tämän seurauksena koodisi pitäisi näyttää tältä (Kuva 11).
5. Tarkastele tulosta selaimessa.
Kuva 11
Luettelomerkityt ja numeroidut luettelot
HTML-työkalujen avulla voit luoda mitä tahansa luetteloita: numeroituja (numeerisia ja aakkosllisia) ja luettelomerkeillä eri tyyppejä merkit.
Tag < ul>…ul> luo luettelomerkityn luettelon.
Tag < ol>…ol> luo numeroidun luettelon.
Yksittäinen luettelokohde sellaisena kuin se on
- , ja sisään
- Toteuta kuvassa 13 näkyvä koodi uuteen tiedostoon.
- Tallenna tiedosto kansioon minun taloni nimellä spisok_ vlozh. html. Tulos kuvassa. 13
- ehdoton;
- suhteellinen.
- kirjoita kansio kansio_2,
- kirjoita sitten kansio kansio_1,
- liitä sitten kuva.
- poistu kansiosta kansio_1,
- poistu kansiosta kansio_2,
- liitä kuva.
- poistu kansiosta kansio_1,
- poistu kansiosta kansio_2,
- mene kansioon kansio_3,
- mene kansioon kansio_4,
- liitä kuva pic.jpg
- poistu kansiosta kansio_1,
- poistu kansiosta kansio_2,
- poistu kansiosta kansio_3,
- kirjoita kansio kansio_4,
- liitä kuva pic.jpg.
- template.html
- main.html
- spisok_vlozh.html
- kansion sisälläminun talonisiellä pitäisi olla kansiojulkinen_ htmltulevan sivuston tiedostoilla
- seitsemän esimerkkiä suhteellisesta osoitteesta ja kaksi esimerkkiä kontrolliesimerkistä käytännön tehtävä 14
- avainsanat ja sivun kuvaus;
- linkit muihin tiedostoihin (*.css ja *.js).
- muodostetaan tunnisteen avulla <
li>
.
Harjoittelu 3
1. Luo numeroitu luettelo otsikon "Kotiprojektit" alle.
2. Luo luettelomerkitty luettelo otsikon "Taloalueet" alle. Koodisi näyttää tältä (Kuva 12).
Kuva 12
3. Tarkastele sivua selaimessa.
Listat voidaan upottaa sisäkkäin käyttämällä erilaisia merkkejä.
Esimerkki sisäkkäisestä luettelosta on esitetty kuvassa. 13
Harjoittelu 4
Kuva 13. Esimerkki sisäkkäisestä luettelosta
Fonttityylit
Tag … - mahdollistaa tekstin näyttämisen lihavoituina.
Tag … - voit näyttää tekstin kursiivilla.
Tag … - näyttää alleviivatun tekstin.
Esimerkiksi:
Tässä tapauksessa teksti tulee näkyviin lihavoitu kursiivi , mutta ei alleviivattu.
Ja tässä tapauksessa teksti kirjoitetaan lihavoitu alleviivattu kursivoitu .
Ala- ja yläindeksit
Tag < sub> Ja sub> voit alentaa tekstiä puoli riviä normaalin tekstin alapuolelle.
Tag < sup> Ja sup> voit nostaa tekstiä puoli riviä normaalin tekstin yläpuolelle. Näiden tunnisteiden välissä oleva teksti näkyy pienemmällä kirjasimella kuin tavallinen teksti.
Harjoittelu 5
1. Muotoile nimi myhouse.ru lihavoituna ensimmäisessä kappaleessa (Kuva 14).
Kuva 14
2. Muotoile ilmaus ”Yli 95 % hankkeista” alleviivatulla kursiivilla toisessa kappaleessa (Kuva 15).
Kuva 15
3. Muotoile yläindeksit neliömetriä käytettäessä (Kuva 16).
Kuva 16
4. Tallenna tiedosto. Katsele selaimen kautta. Verkkosivun tulee näyttää tältä (Kuva 17).
Kuva 17
3. Kuvien lisääminen
HTML-sivun luominen -artikkelissamme tarkastellaan kuvien sijoittamista verkkosivulle.
Tunnistetta käytetään kuvien lisäämiseen .
Tämän tunnisteen pakollinen attribuutti on src(englanninkielisestä SouRCesta - lähde). Se määrittää polun graafinen tiedosto, jonka kuvan pitäisi näkyä verkkosivulla.
Lisää kuva käyttämällä komentoa 
Esimerkiksi: "
kuva1.jpg"
alt="Kuva" />
!}
Alt-attribuutti on välttämätön, jotta verkkosivua katseltaessa estettyjen kuvien tilassa puuttuvan kuvan sijasta tulee alt-attribuutissa oleva kirjoitus. On myös suositeltavaa käyttää aina vaihtoehtoisia tekstejä, koska hakukoneet analysoivat niitä avainsanoina, kun haetaan kuvia.
Graafiset tiedostot voivat olla muodossa jpg, gif, png ja aina värimallissaRGB.
Harjoittelu 6
1. Liitä kotisivuille taloalueluettelon jälkeen kuvat mökkiprojekteista hanke_1.jpg Ja hanke_2.jpg kansiosta CD/html_css_1 . Voit tehdä tämän kopioimalla ensin nämä kaksi kuvaa kansioon, jossa main.html-tiedosto sijaitsee. Kuvan lisäyskoodi näyttää tältä (Kuva 18).
Kuva 18
2. Tarkastele tulosta selaimessa (Kuva 19).
Kuva 19
Periaatteessa tunnisteiden käyttöperiaateHTMLpitäisi olla selkeä. Niitä käytetään saman periaatteen mukaisesti: jos tunniste on kontti, niin on avaus- ja sulkemistunniste. Jos tagi on yksittäinen, sulkevaa tagia ei ole, tässä tapauksessa oikea kauttaviiva kirjoitetaan ennen sulkevaa kulmasulkua, esim.< br/>. Olipa tagi kontti tai yksittäinen, voit aina katsoa teknisistä tiedoistahtml401_ru.chm elementit-osiossa.
4. Osoittaminen sivuston sisällä
Ensimmäisellä oppitunnillamme, HTML-sivun luominen, tutkimme HTML-osoitteen käsitteitä.
Harkitse osoitusvaihtoehtoja, kun haluat sijoittaa kuvia html-tiedostoon, joka saattaa sijaita sivuston eri kansioissa.
Osoitteita on kahdenlaisia:
Ehdoton osoitus (käyttäen tietokoneen asemien nimiä) ei käytetty(Kuva 20)
Kuva 20
Käytetty suhteellinen osoitus - osoitus asiakirjassa tai asiakirjajoukossa yhdellä palvelimella. Jos haluat viitata sivuston tiedostoon, sinun on kerrottava selaimelle, mitä polkua sen tulee käyttää haluttuun tiedostoon pääsemiseksi.
|
Esimerkki 1 Kuva sijaitsee samassa kansiossa kuin HTML-dokumentti (Kuva 21). Eli kuva ja HTML-tiedosto ovat samalla tasolla tiedostojärjestelmä ja HTML-dokumentti voi liittää kuvan välittömästi. Tässä tapauksessa kuvan lisääminen verkkosivulle näyttää tältä.
Kuva 21 Käytännön tehtävä7 Toteuta esimerkki 1 (luo kansio, doc.html-tiedosto, ota mikä tahansa kuva). Kuva |
|
Esimerkki 2 Kuva kuva. jpg on kansiossa kansio_1 . HTML-dokumentti sijaitsee kansion_1 ulkopuolella. Nuo. Sivuston tiedostojärjestelmässä HTML-dokumentti sijaitsee yhden tason korkeammalla kuin kuva (kuva 22). Sinun on syötettävä kansio kansio_1 ja liitettävä kuva
Kuva 22 Käytännön tehtävä8 Toteuta esimerkki 2 (luo kansio, doc.html-tiedosto, ota mikä tahansa kuva). Kuva on lisättävä doc.html-verkkosivulle. |
|
Esimerkki 3 Kuva kuva. jpg on kansiossa kansio_1 , joka vuorostaan sijaitsee kansiossa kansio_2 . HTML-dokumentti sijaitsee näiden kansioiden ulkopuolella (Kuva 23). Siten HTML-dokumentti on kaksi tasoa korkeampi kuin kuva. Välttämätön:
Kuva 23 Käytännön tehtävä9 Toteuta esimerkki 3 (luo kansiot, doc.html-tiedosto, ota mikä tahansa kuva). Kuva on lisättävä doc.html-verkkosivulle. |
|
Esimerkki 4 kansio_1 . Kuva sijaitsee kansion_1 ulkopuolella. Nuo. HTML-dokumentti sijaitsee yhden tason alempana kuin kuva (kuva 24). Sinun on poistuttava kansiosta_1 ja liitettävä kuva. Kansion jättäminen on osoitettu rakenteella ../ (kaksi pistettä ja vinoviiva oikealle).
Kuva 24 Käytännön tehtävä10 Toteuta esimerkki 4 (luo kansio, doc.html-tiedosto, ota mikä tahansa kuva). Kuva on lisättävä doc.html-verkkosivulle. |
|
Esimerkki 5 HTML-dokumentti sijaitsee kansiossa kansio_1 , joka puolestaan sijaitsee kansiossa kansio_2 . Kuva on näiden kansioiden ulkopuolella. Siten HTML-dokumentti sijaitsee kaksi tasoa alempana kuin kuva (kuva 25). Välttämätön: Koska sinun täytyy poistua kahdesti, suunnittelu ../ toistettu kahdesti.
Kuva 25 Harjoittelu 11 Toteuta esimerkki 5 (luo kansiot, doc.html-tiedosto, ota mikä tahansa kuva). Kuva on lisättävä doc.html-verkkosivulle. |
|
Esimerkki 6 (Kuva 26) Välttämätön:
Kuva 26 Harjoittelu 12 Toteuta esimerkki 6 (luo kansiot, doc.html-tiedosto, ota mikä tahansa kuva). Kuva on lisättävä doc.html-verkkosivulle. |
|
Esimerkki 7 (Kuva 27) Välttämätön: Koska sinun täytyy poistua kolme kertaa, suunnittelu ../ toistettu kolme kertaa.
Kuva 27 Harjoittelu 13 Toteuta esimerkki 7 (luo kansiot, doc.html-tiedosto, ota mikä tahansa kuva). Kuva on lisättävä doc.html-verkkosivulle. Siten riippumatta siitä, kuinka monta kertaa sinun täytyy poistua, laitamme rakenteen ../ niin monta kertaa, ja jos astumme sisään, luettelemme matkan varrella havaittujen kansioiden nimet. |
/
>
/
>
/
>
Harjoittelu 14
1. Luo html-dokumentti ja lisää siihen kuva niin, että kuvan polku on seuraava.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Kehitä oma esimerkkisi kuvan lisäämisestä html-dokumenttiin siten, että se sisältää ja poistu kansioista ja Sisäänkäynti kansioihin. Esimerkin tulee olla erilainen kuin kaikki yllä olevat esimerkit.
Tämän aiheen loppuun saattamisen seurauksena sinun pitäisi luoda seuraavat tiedostot:
Monia kieliä on keksitty, mutta HTML on yksi erikoisimmista ja suosituimmista kielistä. Siihen liittyy monia muita keskeisiä kehityssuuntia ohjelmoinnissa. Paljon tulee mahdolliseksi, kun kehittäjän mielessä on tietoa merkintäkielestä - HyperText Markup Language (HTML).
Pohjimmiltaan HTML:ssä ei ole mitään monimutkaista, ja muutamassa minuutissa kuka tahansa, joka on kaukana ohjelmoinnista ja Internetistä, voi luoda HTML-sivun Notepadissa. Huomion arvoinen esimerkki, yksinkertaisuus, joka on todella kaikkien saatavilla.
yleinen kuvaus
HTML-tiedosto on yksi sivuston sivu, vaikka tästä voidaankin väittää, mutta se tosiasia, että yksi tiedosto muodostaa yhden sivun, on aluksi selvää.
HTML-tiedosto alkaa DOCTYPE-otsikolla, joka osoittaa, että tiedostotyyppi on HTML. Kaikki sivuelementit (tunnisteet) on merkitty kulmasuluissa. Jokainen pari ("<» и «>") sisältää yhden HTML-tunnisteen. Yleensä HTML-tunnisteet tulevat pareittain, eli jokaiselle "tunnisteelle" on "/tag". Molemmat on suljettu kulmasuluissa. On olemassa yksittäisiä tunnisteita, joista suosituin on "br/" - siirtyminen seuraavalle riville.
Tiedoston suurin tagi on itse HTML, joka sisältää vain kaksi tunnistetta: HEAD ja BODY. Ensimmäisessä tehdään erilaisia kuvauksia, linkit muihin sivulla tarvittaviin tiedostoihin, jotka voivat olla olemassa PHP-skriptit ja JavaScript. Toinen tallentaa sivun sisällön. Myös tagien ja skriptien muodossa.
Yksinkertainen HTML-sivu
Esimerkki tällaisen sivun luomisesta on alla artikkelissa. Katsotaanpa sitä huolellisesti.
PÄÄ-osio
Päätarkoitus - yleinen kuvaus sivuja ja yleisiä skriptejä, vaikka jälkimmäinen on melko suhteellinen käsite. Yleensä vain kahdelle asialle annetaan tässä merkittävä merkitys:
Sivun sisällön näyttämisen kannalta tämän osion sisältö on vain välillisesti tärkeä, koska se osoittaa: jossain muissa tiedostoissa on CSS-sääntöjä muiden kielten tunnisteille ja skripteille.
HTML-sivulla on sivu, joka näytetään, kun vierailija siirtää hiiren välilehdelle, jossa sivu on auki. Tämä tärkeä pointti, koska se tekee sivusta huomattavasti esillepantavamman, helpommin sanottavan, luettavalla tekstillä allekirjoitetun.
META-tunnisteet ovat tärkeitä Internet-ohjelmoinnissa yleensä, mutta kun haluat luoda HTML-sivun Notepadissa, ei kannata sotkea esimerkkiä tarpeettomilla rakenteilla.
Jos komentosarjoihin on ryhdyttävä, kun HTML-tieto on vakiintunut, Cascading Style Sheets tulee käsitellä välittömästi. CSS-tiedostot sisältävät erityisesti suunnittelusääntöjä HTML-tunnisteet.
BODY-osio
Itse asiassa esimerkki HTML-sivusta on BODY-osio. Tässä on kaikki tiedot, kaikki sivuston sivun sisältö. Kaikki tiedot esitetään tagien ja komentosarjojen muodossa, esimerkiksi JavaScript-koodin tai PHP-ohjelmien osien lisääminen.
On tärkeää ymmärtää, että esimerkki HTML-verkkosivusta selaimessa ja sama esimerkki tekstieditorissa, erityisesti Notepadissa, eivät ole sama asia. Ensimmäisessä tapauksessa meillä on valmis HTML-teksti, jossa kaikki skriptit suoritetaan. Esimerkiksi PHP teki oman osansa ja muodosti tarvittavat tagit oikeisiin paikkoihin koodinsa sijaan. JavaScript on myös täyttänyt tehtävänsä, vaikka siitä on vielä keskusteltava erikseen.
HTML on tageja, ei skriptejä. Viime kädessä selain näyttää vain sivun sisällön, vain sen tunnisteet. Siellä ei ole PHP-koodia.
JavaScript on erityisasemassa, sen huolenaiheena on palvella sivua paitsi lataushetkellä (ylikuormitus), myös silloin, kun sivu on vierailijan selaimessa ja hän tutkii sitä.
Alla on yksinkertainen esimerkki (vain BODY-osio).
Ja vierailijan selaimessa se näyttää tältä:
Koodi ei täsmentänyt, miltä selaimen näyttämien elementtien pitäisi näyttää. Kaikki näkyvä tyyli on CSS-säännöissä. Tässä tapauksessa Mcss/scPhpWordRW.css-tiedostossa, joka oli linkitetty (katso HTML-sivun ensimmäinen esimerkki).
Toisin kuin HTML, CSS-teema on yksinkertaisempi, sääntöjä on hyvin saavutettavissa ja niiden määrä on pieni, kun esimerkki HTML-sivun luomisesta ei vaadi muuta kuin muistilehtiötä. Kaikki on hyvin saatavilla välittömään hallintaan:
Tämä osoittaa kuinka yksinkertaisesti scLogo_vDoc-tunniste on kuvattu, ja tämä kuvaus on sellainen, että normaalitilassaan tagi näyttää kuvan vDoc-logo.png ja kun hiiri on sen päällä, näytetään vDoc-logo-h.png.
HTML-kuvausten rakenne
Kieli ei tarkoita mitään rakennetta ja syntaksin käsite on tässä hyvin suhteellinen. Muuttujia ei ole, mutta mahdollisuuksia on paljon. Hypertekstin perusta on, että on elementti (tunniste), jolla on välttämättä nimi.
Nimiparin tapauksessa nimi koostuu itse nimestä (tagName) ja kulmasuluista (“<» + tagName +«>"), jos me puhumme tunnisteen alusta ja ""jos sen loppu on tallennettu.
Esimerkki HTML-sivusta, joka kuvaa attribuutteja, on alla tekstissä.
Tunnisteella voi olla attribuutteja, jolloin ne sijoitetaan välilyönnillä tagin nimen jälkeen ennen sulkevaa kulmasulkua ">". Attribuutit, jos tunnisteella on niitä, kirjoitetaan vain tunnisteen alkuun. Tunnisteen sisällöksi katsotaan se, mikä on tagin alun ja sen lopun välissä.
HTML:n avulla voit kuvata lohko- ja rivielementtejä. Ensimmäiset vievät tietyn alueen selainikkunassa, ne voidaan sijoittaa ehdottomasti, eli haluttuun paikkaan HTML-sivun näyttöalueella, ja niillä on tietty koko.
Sisäiset elementit näytetään yleensä yhdessä säikeessä, eli ne näytetään näytöllä sellaisina kuin ne on määritelty sivutiedostossa. Kokonaiskulun näyttöön voidaan vaikuttaa, kun sivu latautuu. Lohkoelementtien sijoitteluun, näkyvyyteen ja muihin ominaisuuksiin voidaan vaikuttaa milloin tahansa JavaScript-koodin avulla.
Yksinkertaisten elementtien lisäksi HTML tarjoaa taulukoiden ja lomakkeiden kuvauksen. Näillä elementeillä on suuri kysyntä "jokapäiväisessä verkkosivustojen rakentamisessa".
Taulukon kuvaus: tunnisteet TABLE, TR, TD
TABLE-tunnisteen avulla voit luoda taulukon, määrittää tietyn määrän TR-rivejä ja tietyn määrän TD-soluja jokaiselle riville. Toisin kuin tavallinen taulukkorakenne, HTML-merkinnän erityispiirteiden vuoksi taulukkomuotoilu rajoittuu tähän ilmoitukseen, joten jos kehittäjä haluaa suorakaiteen muotoisen taulukon, jossa sarakkeiden lukumäärä kaikilla riveillä on sama, hänen on tarkkaile tätä itse.
HTML:n periaatteellinen kanta on tehdä kaikki, mikä on määritelty, mutta ei mitään, mitä ei ymmärretä. Joissakin tapauksissa sarakkeiden lukumäärä taulukon jokaisella rivillä ei ole niin tärkeä, mutta jos sinun on yhdistettävä soluja pysty- tai vaakasuunnassa, sinun on laskettava kaikki erittäin huolellisesti.
Esimerkki HTML-sivusta, joka kuvaa yksinkertaista taulukkoa, näkyy selvästi artikkelissa.
Tässä näkyy taulukko, jossa on kolme riviä kolmella sarakkeella, ja ensimmäisellä rivillä käytettiin TD-tunnisteen sijasta TH-tunnistetta - sarakkeen otsikkoa. Nämä kaksi tunnistetta eivät eroa toisistaan, mutta on täysin mahdollista käyttää ensimmäistä taulukon ensimmäisen rivin erottamiseen, ja CSS:ssä voit liittää TH:hen oman tyylisi, joka erottaa sen muista TD:istä.
Lomakkeen kuvaus: tagit FORM, INPUT
Lomakkeet ovat HTML-tunnisteiden suosituin osa. Lomakkeiden avulla voit siirtää tietoja. Itse asiassa sivu itsessään on tiedon tulos, mutta lomake on sen syöttö.
Esimerkki HTML-sivusta, joka kuvaa yksinkertaisen lomakkeen:
Lomakkeiden käyttämiseen on monia muita vaihtoehtoja, mutta nämä ovat tärkeimmät mahdollisuudet. Voit määrittää syöttökenttiä, määrittää niille suunnittelun ja käsittelijät analysoimaan käyttäjän syöttämiä tietoja. Voit määrittää piilotettuja kenttiä ja lähettää taustatietoja sivulta. Voit määrittää tiedonsiirtopainikkeita, joiden napsauttaminen käynnistää tiedonsiirtoprosessin.
HTML:n käyttö
Hypertekstikielen tunteminen on työtä missä tahansa Internet-ohjelmoinnin erikoisalalla, mutta jos sinun on kirjoitettava ohjelmia PHP:llä tai JavaScriptillä, sinun on osattava HTML + CSS täydellisesti.
PHP-kieli mainittiin edellisessä esimerkissä. PHP toimii palvelimella, joten tällä lomakkeella oleva sivu lensi palvelimelta selaimeen täytettyinä. Erityisesti INPUT-tunnisteessa mainittu TestOnBlur-toiminto (onblur-tapahtumakäsittelijä) sai kaikki parametrit tekstikenttinä.
JavaScript toimii selaimessa, ja jotta painike lähettää tiedot takaisin palvelimelle toimisi oikein, eli rakenne: onclick=jQuery("#to").val("cart"), sinulla on oltava käsitys ei vain siitä, mitä jQuery on, vaan myös mikä on #to, val, cart. Tarkemmin sanottuna sinun on tiedettävä perusHTML-tunnisteet ja yleiset säännöt soveltamalla niihin CSS-tyylejä.
Tämä riittää nopeasti parantamaan pätevyyttäsi kaikissa Internet-ohjelmoinnin erikoisaloissa.
Hei rakkaat blogin lukijat. Tämän artikkelin avulla aloitamme perusasioiden oppimisen HTML-kieli.
Tiedät varmaan jo, että Internetin pääkieli on hypertekstin merkintäkieli HTML (Hypertext Markup Language). Tässä artikkelissa opimme HTML:n peruskäsitteet ja opimme luomaan yksinkertaisia WEB-sivuja.
Aloitetaan tärkeimmästä, katsotaan kuinka se toimii World Wide Web- Internet. Verkkosivujen tuottamiseksi luot HTML-kielellä kirjoitettuja tiedostoja ja sijoitat ne verkkopalvelimelle. Tämän jälkeen mikä tahansa Internet-yhteydellä varustettuun laitteeseen asennettu selain, oli se sitten tietokone, puhelin tai tabletti, löytää verkkosivusi.
verkkopalvelin- Tämä on tavallinen tietokone, jossa on erityinen ohjelmisto Internet-yhteydellä. Se kuuntelee jatkuvasti selaimilta tulevia web-sivuja, kuvia, ääni- ja videotiedostoja koskevia pyyntöjä. Saatuaan pyynnön jollekin näistä resursseista palvelin etsii sen ja lähettää sen selaimelle.
Selain- Tämä erikoisohjelma, joka on tarkoitettu esimerkiksi verkkosivustojen selaamiseen Internet Explorer. Selaimella selaat verkkosivustoja napsauttamalla linkkejä. Jokainen tällainen napsautus saa selaimen tekemään HTML-sivua koskevan pyynnön verkkopalvelimelle, vastaanottamaan vastauksen ja näyttämään sivun ikkunassaan. Juuri kun sivu tulee näkyviin, HTML-kieli alkaa toimia, ja se kertoo selaimelle kaiken verkkosivun rakenteesta ja sisällöstä. Komentojen käyttäminen - tunnisteet HTML kertoo selaimelle, mistä tekstin kappaleet alkavat, mikä osa tekstistä on otsikko ja mihin taulukoita ja jopa kuvia lisätään. Ja tagit ovat sanoja esimerkiksi kulmasuluissa
,
