dle
HTML/XHTML pradþiamokslis - HTML ir CSS dizainas - Affiliate.lt

Jump to content


Photo
- - - - -

HTML/XHTML pradþiamokslis


  • Please log in to reply
1 reply to this topic

#1 kreoton

kreoton

    Senior Member

  • Members
  • 136 posts

Posted 09 May 2007 - 11:06 PM

Norintiems kurti puslapius, bet dar nesusidûrusiems su interneto technologijomis þmonëms kyla klausimas "Nuo ko pradëti?", atsakymas paprastas nuo HTML. HTML (HyperText Markup Language) yra papraðèiausias puslapio dizaino ir teksto stiliø formatavimas tam tikromis gairëmis (tags). Nesvarbu kaip ar kokiu bûdu (PHP, ASP ar kita) puslapis bus formatuojams, taèiau jûsø narðyklë gaus áprastà HTML arba XHTML kodà. Turbût jau pastebëjot kad vis paminiu XHTML ið tiesø XHTML ir HTML yra vienas ir taspats tik skirtumas tas kad XHTML laikosi grieþtesniø taisykliø, kaip kad visos gairës turi bûti uþdaromos.

HTML/XHTML dokumentai prasideda nuo gairës <html> ir uþsibaigia gaire </html> taèiau patartina prieð <html> gairæ nurodyti dokumento tipà DOCTYPE ðis paramëtras nurodo kokio tai tipo HTML dokumentas, plaèiau apie DOCTYPE galite pasiskaityti èia (Pastaba: DOCTYPE daþnai iðtaiso kaikurias tinklapio atvaizdavimo klaidas, tad reikëtø teisingai já pasirinkti).

Dar nemaþiau svarbi gairë yra <head> kurioje nurodomi ávairûs tinklaio parametrai kaip koduote, raktaþodþiai, tinklapio pavadinimas (matomas narðylës virðyje prie narðyklës logotipo) ir kita.

Toliau seka <body> dalis kurioje ir formuojamas HTML/XHTML dokumentas.

Kadangi supaþindinau su pagrindinëmis HTML dokumento dalimis pateksiu nedidelá pavyzdá ir já apraðysiu.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sveikas pasauli!</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<meta name="Keywords" content="raktazodis1, raktazodis2, raktazodis3" />
</head>
<body>
<h1>Sveikas pasauli</h1>

<p>Pastraipa</p>
<!--Tai komentaras-->
<ul>
<li><a href="http://www.affiliate.lt">Affiliate.lt</a></li>
<li><a href="http://www.google.lt">Google.lt</a></li>
</ul>

<br />

<img src="/kelias/iki/paveikslelio.jpg" width="100" height="150" border="0" alt="Tai matysis jei paveikslelio narsykle neras" />

<table width="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>Pirmos eilutes pirmas stulpelis</td>
<td>Pirmos eilutes antras stulpelis</td>
</tr>
<tr>
<td>Antros eilutes pirmas stulpelis</td>
<td>Antros eilutes antras stulpelis</td>
</tr>
</table>

</body>
</html>


Kaip matote dokumentas pradedamas nurodant dokumento tipà su DOCTYPE tai galima sakyt vienintelë gairë kurios nereikia uþdaryti. Toliau seka dokumento pradþios elementas <html> ir jis tesiasi iki dokumento pabaigos. <head> dalyje nurodþiau kad puslapis vadinsis "Sveikas pasauli" ir jis raðomas tarp <title> gairiø. Tiliau eina ávairios meta gairës jø yra ávairiø èia paminëjau tik daþniau pasitaikanèias. Pirmoji <meta> gairë nurodo, kad tinklapio koduotë yra windows-1257 (lietuviðka). Antraja meta gaire nurodau tinklapio raktaþodþius. Tikriausiai pamastëte, kad meta kaip ir neturi uþdaranèiu gairiø taèiau jûs klystate meta gairë kaip ir keletas kitø (img, br, hr ir kitos) paèios save uþsidaro t.y. baigiasi /> þenkliukais o ne áprastais > pvz.: <br />.

Pasibaigus head daliai pradedame tinklapio formatavimà tarp <body> gairiø. <h1> gairë naudojama tinklapiø antraðtei nurodyti, jø gali bûti iki 6 t.y. <h1>, <h2>, <h3>, ..., <h6>. Kuo maþesnis skaièius tuo antraðtë bus maþesnë.

Tekstas paprastai raðomas tarp <p> gairiø. Ðios gairës ápatinga savybë yra kad tarp jø raðomas tekstas yra ðiek tiek suformatuojamas, t.y. tarp dvieju pastraipu bus nedidelis tarpas.

Toliau matome komentara, komentarai nëra atvaizduojami atvaizduojant tinklapá narðyklëje, tad juose galite sau pasiraðyti.

Saraðai formuojami tarp <ul> arba <ol> elementø, jø skirtumas yra tas kad naudojant <ul> gairæ saraðo elementas prasidës kazkokiu tai simboliu (juodu ar baltu taðku), o naudojant <ol> gairæ saraðas bus formuojamas su skaièiais ar raidëmis. Saraðø elementai apraðomi tarp <li> gairiø, kaip ir pavaizduota pavyzdyje.

Bene svarbiausia gairë yra <a> (pavyzdyje tarp <li> gairiø) tai nuorodos apraðymo gairë be jos tikriausiai nëra nei vieno tinklapio. <a> gairë turi parametrà href="" kuriame ir áraðomas adresas kur ves nuoroda. (Pastaba: Nuoroda nebûtinai turi vesti á kita puslapá, nuoroda taip pat gali suaktyvuoti el. paðto adresus pvz.: <a href="mailto:info@affiliate.lt">Raðykite Affiliate.lt</a>).

<br /> gairë pradeda naujà eilutæ.

<img /> gairëje apraðomas paveikslëlis. Ði gairë turi sekanèius parametrus: src="" èia nurodomas kelias iki paveikslëlio, width="" - paveikslëlio plotis, height="" - paveikslëlio aukðtis, border="0" - rëmelio storis (paprastai matoma tik kai paveikslëlis yra tarp <a> gairiø), alt="" - tekstas kuris bus rodomas tik tada kai narðyklë neras paveikslëlio arba vartotojas bus iðjungæs paveikslëliø rodymà.

Paskutinis pavyzdþio elementas tai lentelës formavimas. Lentelës formatavimas visada prasideda gaire <table> kurioje yra ðie parametrai: width="100%" lentelës plotis, border="0" rëmelis, cellspacing="2" - tarpas tarp lentelës celiø, cellpadding="2" tarpas tarp celës rëmø ir teksto. Lentelës eilutë prasideda gaire <tr>. Eilutëje yra formatuojama lentelës celës arba kurios apraðomos <td>gairëmis.

Suformatavus dokumentà yra uþdaroma <body> ir </html> gairë.
ir dokumentas yra paruoðtas. Jei ðá pavyzdá iðsaugotumët savo darbastalye ir atidarytumët su narðykle pamatytumet kaip visa tai yra atvaizduojama.

Plaèiau pasimokyt apie ávairias HTML/XHTML gaires galit pasimokyt W3Schools.com tinklalapyje.

Sekanèioje pamokoje supaþindinsiu su CSS ir jo privalumais.

------------------------------------------
Affiliate.lt Kopijuojant butina nurodyti ðaltiná
Affiliate.lt staff

#2 Spetertoi

Spetertoi

    Junior Member

  • Members
  • Pip
  • 1 posts

Posted 06 July 2008 - 01:01 AM

Good health is over wealth.??? /?\./?\/\_?? I Hand You? __{^\_ _}_? )?}/^\??? A Rose...?/?/\_/^\._}_/?//?/ (?(__{(@)}\__}.//_/__A___A__wow gold____A__wow gold_A______A____?\__/{/(_)\_}?)\\ \\---v----V-----V--Y----v---Y-----??(? (__)_)_/?)\ \>???? \__/?? \__/\/\/




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users