Peršokti prie turinio


Toggle shoutbox Diskusijos

@  Karolizas : (26 August 2019 - 12:24 PM) Esat nueikit i i mano postą
@  DiEvil : (25 August 2019 - 12:13 AM) Kaip suprantu, cia nei gyvos dvasios :D
@  DiEvil : (19 August 2019 - 12:15 PM) Ieskomas zmogus nusimanantis apie cs 1,6 serverius. Taipogi gal yra norinciu prisijungti prie komandos.. Palaciau i PM
@  r y a n a s. : (19 August 2019 - 08:51 AM) Yoo, sveiki
@  #Kenichi : (12 August 2019 - 10:12 AM) Kaip viskas pasikeitė po tiek laiko :D
@  Jessy_Torreto : (21 December 2018 - 11:22 PM) cs.fresko-chata.lt public 89.40.3.123:27015 užsukit
@  123 : (21 December 2018 - 12:14 PM) Sveiki, norime pranešti, kad Country-Life.lt forumas startavo, bei laukia taves!   - Renkamas direktorių prižiūrėtojas!   - Nori tapti žinomu, bei įgauti patirties tam tikrame poste? Aš jums siūlau prisijungti ir išbandyti save.   - Per diena surenkame ~35 žaidėjus ONLINE forume!  - Serverio startas jau sausį!   Projekto Informacija:  Forumas: www.Country-Life.lt✔️
@  123 : (21 December 2018 - 12:13 PM) Sveiki, norime pranešti, kad Country-Life.lt forumas startavo, bei laukia taves!   - Renkamas direktorių prižiūrėtojas!   - Nori tapti žinomu, bei įgauti patirties tam tikrame poste? Aš jums siūlau prisijungti ir išbandyti save.   - Per diena surenkame ~35 žaidėjus ONLINE forume!  - Serverio startas jau sausį!   Projekto Informacija:  Forumas: www.Country-Life.lt✔️
@  #Kenichi : (21 December 2018 - 11:36 AM) Reklamuoti šaukykloje griežtai draudžiama! Gausite ban'a 7 dienom.
@  Artur_Andrej : (11 November 2018 - 09:17 PM) Sveiki
@  #Kenichi : (10 November 2018 - 11:12 AM) https://discord.gg/F5H9twa
@  GGustaz : (03 November 2018 - 12:06 AM) Su kokia programa reikia daryti mapp darbus?
@  Aivarinis : (28 October 2018 - 12:39 PM) ������Malonu matyti, jog jūsų daugėja, bei į forumą matome vis naujesnių veidų, dėkojame jums jog padedate mums plėstis������  - Atėjo toji diena, kokios laukia didelė dauguma, pranešu pirmasias atrankas į mūsų komanda! ������  - Nori tapti žinomu, bei įgauti patirties moderavime? Aš jums siūlau prisijungti ir ižbandyti save. ������  Daugiau info forume: http://nlg.lt/index.....php…  Forumas: www.nlg.lt✔️ Sa:mp adresas: samp.nlg.lt✔️ TeamSpeak: ts.nlg.lt✔️
@  Aivarinis : (27 October 2018 - 07:42 AM) Malonu matyti, jog jūsų daugėja, bei į forumą matome vis naujesnių veidų, dėkojame jums jog padedate mums plėstis  - Atėjo toji diena, kokios laukia didelė dauguma, pranešu pirmasias atrankas į mūsų komanda!   - Nori tapti žinomu, bei įgauti patirties moderavime? Aš jums siūlau prisijungti ir ižbandyti save.   Daugiau info forume: http://nlg.lt/index.....php…  Forumas: www.nlg.lt✔️ Sa:mp adresas: samp.nlg.lt✔️ TeamSpeak: ts.nlg.lt✔️
@  Aivarinis : (25 October 2018 - 08:44 PM) Registruojamės - http://nlg.lt/
@  Aivarinis : (25 October 2018 - 08:43 PM) http://nlg.lt/
@  #Kenichi : (18 October 2018 - 05:41 PM) Kiek reklamerių :o
@  Aivarinis : (30 September 2018 - 09:52 PM) <3 Sveiki <3 noriu pristatyti nauja projekta kuris neseniai išėjo į saulės šviesa, tai yra NewLife.us.lt šio projekto komanda turi užsibrėže tikslų, kurios mes norime įgyvendinti. Šia savaite žadame dirbti visu pajagumu, per visa diena dėl žaidėjų naudos, norime startuoti spalio 6 dieną. Neseniai išėjo naujas atnaujinimas kurį galite pamatyti čia - http://newlife.us.lt/index.php… iš šio atnaujinimo galite pamatyti kaip šio serverio komanda stengiasi dėl žaidėjų. Šio metu vyksta atranka į Ban/Unban prižiurėtoją, ir PD direktorių.
@  Aivarinis : (30 September 2018 - 09:48 PM) http://newlife.us.lt/
@  Aivarinis : (30 September 2018 - 03:13 PM) <3 Sveiki <3 Noriu pristatyti samp serverį, kuris neseniai išlindo į saulės šviesą. Serveris yra dar nestartavęs bet turi forumą. Forume vyksta atrankos šio metu vyksta atranka į Admin/Vip prižiurėtoją, ir vyksta atranka į Policijos Departamento direktoriaus kėdę.  Šendieną išvysime 0.0.1 atnaujinimo versiją. Atnaujinimas bus tikrai geras tai tikrai galiu jum pasakyta, prie šio atnaujinimo buvo dirbama apie 3-4 dienas. http://newlife.us.lt/

Nuotrauka

HTML + CSS per 30 dienų | #3diena - sąrašai


  • Please log in to reply
4 atsakymai į šią temą

#1 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

21 March 2017 - 07:50 PM

Sveiki, šiandien mokysimės padaryti sąrašą savo svetainėje. Kaip ir žinome, naršyklėse (ir išvis, tech. įrenginiuose) išskiriami du pagrindiniai sąrašų tipai. Tai registruotasis (su skaičiais) sąrašas:

  1. 1 eilutė

  2. 2 eilutė

  3. o čia šiaip koks nors sakinys

​O antrasis tipas yra neregistruotasis (be skaičių) sąrašas:

  • pirma eilutė

  • antra eilutė

  • ir čia taip pat koks nors sakinys

​Galbūt nepatikėsite, tačiau HTML kalboje padaryti nesvarbu kokio tipo sąrašą yra be galo lengva!

-----

Ką gi, pradėkime pamoką! Pirmiausiai prisiminkime kodą, kuriuo užbaigėme praeitą pamoką:

<!DOCTYPE html>
<html>
  <head>
    <title>Pirmoji svetainë</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Sveikas, Pasauli!</h1>
    <p> <strong>Čia</strong> <em>mano</em> tekstas</p>
  </body>
</html>

Paprastoje teksto redagavimo programoje turbūt parašytumėte taip (ir be abejo parašykite dabar!):

<body>
    <h1>Sveikas, Pasauli!</h1>
    <p> <strong>Čia</strong> <em>mano</em> tekstas</p>
    -Tai mano pirma sąrašo eilutė
    -O čia antroji sąrašo eilutė
  </body>

Dabar pamėginkite išsaugoti tokį kodą ir aišku atverti naršyklėje. Ką matote? Taip yra dėl to, kad HTML faile rašant tekstą negalioja ENTER paspaudimai naujai eilutei. T.y. jie nenulemia naujos eilutės Jūsų faile. HTML tai supranta kaip vieną ilgą eilutę. O dabar po pirmosios sąrašo eilutės įdėkite žymę, nukeliančia toliau einančius duomenis viena eilute žemiau. Ši žymė yra savaime užsidaranti ir ji atrodo štai taip: <br />. Po žymės įterpimo kodas turėtų atrodyti taip:

-Tai mano pirma sąrašo eilutė <br />
-O čia antroji sąrašo eilutė

Ir aišku kaip visada, po kodo redagavimo jį išsaugokite ir atverkite naršyklėje. Argi ne puiku? Tačiau ne, to sąrašu pavadinti negalime. Nors, iš dalies tai prilygsta sąrašui, ir jei Jums reikia būtent to, galite naudoti ir tokį, perdirbtą, sąrašo variantą. Tačiau jo tikrai nepanaudosite darant meniu. Nors, ir dėl to galima ginčytis ir sugalvoti kaip tai padaryti. Na, tęsiame darbą! Pridėkime ir trečią elementą prie mūsų daromo sąrašėlio. Ir mūsų kodo vaizdas:

-Tai mano pirma sąrašo eilutė <br />
-O čia antroji sąrašo eilutė
-Čia aš įterpiu trečiąją eilutę

Ir dabar kaip ir visada - išsaugome ir žiūrime naršyklėje. Prastai, tiesa?.. Kad vėl viskas būtų gerai, mums po antrojo sąrašo elemento reikia įterpti eilutės lūžio žymę <br />:

-O čia antroji sąrašo eilutė <br />

O aš pagalvojau, jog noriu, kad trečioji sąrašo eilutė būtų pasislinkusi dar toliau nuo visų kitų. Tam padaryti aš pridėsiu dar vieną eilutės lūžio žymę:

-O čia antroji sąrašo eilutė <br /> <br />

Ir vėlgi, išsaugome ir peržiūrime naršyklėje - na, ar ne puiku? :)

Iš tiesų, seniau taip buvo daromi HTML sąrašai. Tačiau tai tikrai gali smarkiai sulėtinti svetainės kodo pakrovimą. Aišku, aš jokiu būdu nesakau, kad nereikia nesinaudoti eilutės lūžiu, kai to tikrai reikia, tačiau sąrašams yra keletas patogesnių alternatyvų. Pradžiai, pamėginsime naudotis neregistruotu (be skaičių) sąrašu (žymė <ul>). Čia taip pat pateikiu vieną schemą, kuri tikiuosi, kad padės suprasti visą sąrašų veikimo principą (taip pat tikiuosi, kad mokat žemiau esančius angliškus žodžius):

c930977bfd8895c946a178eda8899c0e202.png

O dabar skubu išaiškinti šį paveikslėlį tiems, kas nesuprato iš nuotraukos - <ul> žymė apibrėžia, kiek vietos užims nenumeruotasis sąrašas. Žymė <li> tai žymė, kuri nurodo kiekvienos sąrašo eilutės turinį. Šiuo atveju žymė <ul> yra vadinama tėvine žyme, o <li> "vaikine". Dabar padarykime sąrašą, kuriame parašyti darbai, kuriuos reikės padaryti. Pvz.:

<body>
    <h1>Sveikas, Pasauli!</h1>
    <p> <strong>Čia</strong> <em>mano</em> tekstas</p>
    <ul>
      <li>Nueiti į parduotuvę</li>
    </ul>
</body>

Ir tradiciškai, kaip visada, išsaugome ir lekiame į naršyklę peržiūrai. Matome, kad mūsų sąrašas pasikeitė. Taškelis, esantis prie turinio, yra uždėtas pagal globalius nustatymus, kuriuos minėjau vakar, ir jis toks paliktas, nes neuždėti kiti nustatymai, pakeičiantys jį. Taip pat, kaip galime pastebėti, mūsų sąrašas yra atitrauktas nuo šono. O dabar pridėkime dar daugiau darbų - 

    <ul>
      <li>Nueiti į parduotuvę</li>
      <li>Apsipirkti</li>
      <li>Užsipilti kuro</li>
      <li>Parvažiuoti namo</li>
    </ul>

Ir aišku, išsaugome ir bėgame į naršyklę, pažiūrėti kaip atrodo mūsų sąrašas! Taip, dabar jau turime tikrą sąrašą su ženkleliais! O dabar šiek tiek pakeiskime svetainę: Ištrinkime paragrafo ir heading žymes bei jų turinius, ir vietoj jų įdėkime antraštę (žymė heading; lygis 1) Darbai, kuriuos turiu padaryti šiandien. Iš tiesų, jei mėgstate susidaryti tokius sąrašus,aš patarčiau juos daryti HTML kalboje, kad galėtumėte praktikuotis, ir be abejo, tai bus žymiai moderniau! O dabar pamėginkime padaryti numeruotąjį sąrašą. Vienintelis skirtumas yra vos viena raidė. Vietoj žymių

<ul>
<li>...</li>
</ul> 

Rašysime:

<ol>
<li>...</li>
</ol>

O dabar peržiūrėkime tai savo svetainėje! Tačiau šiam "reikalui" vėl grąžinkime neregistruotąjį sąrašą, nes tai yra paprasti darbai. Aišku ,jei aš rašyčiau straipsnį "Geriausi 5 būdai koduoti" aš be abejo naudočiau numeruotąjį/registruotąjį sąrašą. O dabar susipažinkime su dar vienu, taip vadinamu, "apibrėžimų" sąrašu. Jį apibūdinti gana sunku: nėra jokių ženklelių, prasideda prie pat puslapio šono, naudojamos žymės <dt>, <dd>, <dl>. Dabar sudėkime visų trijų tipų sąrašus palyginimui. Pirmiausiai sudėkime registruotąjį ir neregistruotąjį sąrašus:

<!DOCTYPE html>
<html>
  <head>
    <title>Pirmoji svetainë</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Darbai, kuriuos turiu padaryti šiandien</h1>
    <ol>
      <li>Nueiti į parduotuvę</li>
      <li>Apsipirkti</li>
      <li>Užsipilti kuro</li>
      <li>Parvažiuoti namo</li>
    </ol>
    <ul>
      <li>Nueiti į parduotuvę</li>
      <li>Apsipirkti</li>
      <li>Užsipilti kuro</li>
      <li>Parvažiuoti namo</li>
    </ul>
  </body>
</html>

Ir dabar pridėkime apibrėžimų sąrašą! Pirmiausia, parodysiu jo vieno naudojimą:

<dl> - nurodome kur prasideda mūsų apibrėžimų sąrašas
  <dt>Pagrindinė eilutė</dt> - Pagrindinė sąrašo turinio viena eilutė
    <dd>Pridėtinė eilutė</dt> - Pridėtinė pagrindinės eilutės eilutė
</dl> - nurodome kur baigiasi mūsų apibrėžimų sąrašas

Kiek painu, tiesa? Nieko, pasimokysime ir viskas bus "yzi". Ir kaip turėtų atrodyti mūsų puslapio kodas su visais trejais sąrašais:

<!DOCTYPE html>
<html>
  <head>
    <title>Pirmoji svetainë</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Darbai, kuriuos turiu padaryti šiandien</h1>
<dl>
  <dt>Pagrindinė eilutė</dt>
    <dd>Pridėtinė eilutė</dt>
  <dt>Pagrindinė eilutė</dt>
    <dd>Pridėtinė eilutė</dt>
  <dt>Pagrindinė eilutė</dt>
    <dd>Pridėtinė eilutė</dt>
  <dt>Pagrindinė eilutė</dt>
    <dd>Pridėtinė eilutė</dt>
  <dt>Pagrindinė eilutė</dt>
    <dd>Pridėtinė eilutė</dt>      	        	
</dl>
    <ol>
      <li>Nueiti į parduotuvę</li>
      <li>Apsipirkti</li>
      <li>Užsipilti kuro</li>
      <li>Parvažiuoti namo</li>
    </ol>
    <ul>
      <li>Nueiti į parduotuvę</li>
      <li>Apsipirkti</li>
      <li>Užsipilti kuro</li>
      <li>Parvažiuoti namo</li>
    </ul>
  </body>
</html>

Vėlgi, kalbant apie apibrėžimų sąrašą, jį galima smarkiai redaguoti pagal savo norus. Aišku, tam reikia CSS kalbos, kurią mokysimės kiek vėliau. Pradžiai mums reikia išmokti HTML pagrindus, o tada jau galėsime kalbėti apie kažką daugiau.  Taigi, šią kol kas ilgiausią pamoką jau ir baigsime.

Šiandien mes išmokome:

  • Padaryti neregistruotąjį sąrašą;

  • Padaryti registruotąjį sąrašą;

  • Padaryti apibrėžimų sąrašą;

  • Padaryti eilutės lūžį.

---

Moderatorių prašau temos nerakinti. Jei kyla klausimų, neaiškumų - susisiekite su manimi šioje temoje arba skype: living.indream1

Tikiuosi, kad Jums patiko ir laukiate kitos dienos pamokos! :)


Šį pranešimą redagavo benasrk: 21 March 2017 - 07:53 PM

  • 4

#2 ATSIJUNGĘS   Freddy

Freddy

23 March 2017 - 07:44 AM

Šaunuolis BenasK, tai kiek pagyvina forumą, kiek galėtum labiau paaiškint pradinį vaizda <body></body> kūrime, su <table> ir pnš. 


  • 0

#3 ATSIJUNGĘS   #Dissco

#Dissco

    Pgr. Administratorius

  • Administratorius
  • 278 Pranešimai

Narių medaliai

              

23 March 2017 - 02:07 PM

Šaunuolis BenasK, tai kiek pagyvina forumą, kiek galėtum labiau paaiškint pradinį vaizda <body></body> kūrime, su <table> ir pnš. 

Visa tai ir buvo pradėta forumo pagyvinimui, o dėl paaiškinimo, manau, tikrai kažkurioje pamokoje tai tikrai bus  :)


  • 0

Paveiksliukas


#4 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

23 March 2017 - 02:32 PM

Šaunuolis BenasK, tai kiek pagyvina forumą, kiek galėtum labiau paaiškint pradinį vaizda <body></body> kūrime, su <table> ir pnš.

Tikrai paaiškinsiu. Susisiek su manim skype ;)

Visa tai ir buvo pradėta forumo pagyvinimui, o dėl paaiškinimo, manau, tikrai kažkurioje pamokoje tai tikrai bus  :)

Vat dabar dar ir nežinau ar bus šitas dalykas :D
  • 0

#5 ATSIJUNGĘS   akitaa

akitaa

20 September 2019 - 09:03 AM

Thanks for the lesson.


  • 0




1 vartotojai(-ų) skaito šią temą

0 nariai(-ių), 0 svečiai(-ių) ir 0 slapti(-ų) nariai(-ių)


    Alexa (1)