Öèòàòà ñîîáùåíèÿ Legionary
Html äëÿ íà÷èíàþùèõ ( ÷àñòü 2-àÿ)
Html äëÿ íà÷èíàþùèõ ( ÷àñòü 2-àÿ)
Ïðîäîëæàåì ïîïûòêó ðàçîáðàòüñÿ â html :-) Ïåðâàÿ ÷àñòü
ÒóÒ
Åñëè ïîìíèòå, â ïåðâîé ÷àñòè ìû òðåíèðîâàëèñü â ôîðìàòèðîâàíèè øðèôòîâ. Ó ñåáÿ æå íà "íàðîäå". Èçíà÷àëüíî âàì óæå áûëè äàíû êàêèå-òî òåãè â ðåäàêòîðå, à ñàìà "òðåíèðîâêà" âåëàñü ìåæäó òåãàìè
<body> è
</body>
Òàê âîò, òåïåðü ïðî ýòè "êëþ÷åâûå" òåãè, êîòîðûå äàþòñÿ èçíà÷àëüíî:
<html> è â ñàìîì íèçó çàêðûâàþùèé
</html> - ãîâîðÿ ïðîñòûì ÿçûêîì,- ýòîò òåã îáîçíà÷àåò, ÷òî çà "äîêóìåíò" ñîáñòâåííî ãîâîðÿ è ãäå åãî íà÷àëî è êîíåö. Ïðîïèñûâàòü åãî íàäî ( åñëè ñàìè ñîçäàåòå ñòðàíèöó ñ íóëÿ è áåç "íàðîäà",- íå çàáûâàéòå îá ýòîì).
<head> è çàêðûâàþùèé
</head> - òàê íàçûâàåìàÿ "ãîëîâà" äîêóìåíòà ( ñòðàíèöû ñàéòà). Ìåæäó ýòèìè òåãàìè ïèøóò íåêóþ "ñëóæåáíóþ èíôîðìàöèþ". Îá ýòîì êîíå÷íî åùå áóäåì ãîâîðèòü, íî ïîêà òàê. Ïëþñ ñîäåðæèìîå ðàñïëîæåííîå ìåæäó ýòèìè òåãàìè íå âèäíî ïîëüçîâàòåëþ íà ñòðàíèöå.
<title> è çàêðûâàþùèé
</title> - Çàãîëîâîê ñòðàíèöû, âîò è ïåðâûé ïðèìåð òàêîé "ñëóæåáíîé èíôîðìàöèè". Êàê âèäèòå, ýòè äâà òåãà íàïèñàíû èìåííî â "ãîëîâå" äîêóìåíòà ( ñìîòðåòü âûøå).
Ìåæäó ýòèìè òåãàìè ïðîïèñûâàåòñÿ íàçâàíèå ñòðàíè÷êè èëè åùå êàêàÿ-íèáóäü èíôîðìàöèÿ î ñîäåðæàíèè.  ðåçóëüòàòå, ïîëüçîâàòåëü ýòî óâèäèò â ñàìîì "âåðõó" áðàóçåðà, à òî÷íåå:
È íàêîíåö:
<body> è
</body> - òåëî äîêóìåíòà ( ñòðàíè÷êè ñàéòà). Ò.å. ìåæäó ýòèìè òåãàìè è ïèøåòñÿ âñÿ âèäèìàÿ ïîëüçîâàòåëþ ñòðàíè÷êà. Òóò è êàðòèíêè, è òåêñòû è ïð., ïð., ïð.,- âñå òî, ÷òî âû çàõîòèòå, ÷òîá óâèäåë ïîëüçîâàòåëü:-))
Òåïåðü ïðîñòîé ïðèìåð ñî âñåìè ýòèìè òåãàìè:
<html>
<head>
<title>Ìîÿ ïåðâàÿ ñòðàíè÷êà
</title>
</head>
<body>
Âñåì ïðèâåò!!!
</body>
</html>
Ýòî ìèíèìóì êîíå÷íî, íî ïðè âñåì ïðè òîì,- ýòî óæå ñòðàíè÷êà ñàéòà. Ïîëíîñòüþ ðàáî÷àÿ. Ïîïðîáóéòå âñå ýòî ñêîïèðîâàòü è âñòàâèòü â ðåäàêòîð íà íàðîäå. Òîëüêî â ïóñòîé, âñå ÷òî òàì áûëî èçíà÷àëüíî- óäàëèòå:-)
Òåïåðü, äóìàþ, ñòàëî áîëåå ìåíåå ïîíÿòíî, êàê íàïèñàòü ýëåìåíòàðíóþ ñòðàíè÷êó:-)
 ìîåì ïðèìåðå, ôðàçó "Âñåì ïðèâåò!!!" ìîæíî íàïèñàòü äðóãèì "øðèôòîì" ( ôîðìàòèðîâàíèåì øðèôòà). Æèðíûì, êóðñèâîì è ò.ä., òåìè âàðèàíòàìè, êîòîðûå ìû ðàññìàòðèâàëè â ïåðâîé ÷àñòè íàøåãî îáó÷åíèÿ. Ïîïðîáóéòå ñàìè. Âîò îäèí ïðèìåð. Êîãäà áóäåòå ïðîáîâàòü,- ñëåäèòå çà âåðíîé ïîñëåäîâàòåëüíîñòüþ òåãîâ:
<html>
<head>
<title>Ìîÿ ïåðâàÿ ñòðàíè÷êà
</title>
</head>
<body>
<strong><i>Âñåì ïðèâåò!!!
</i></strong>
</body>
</html>
Îñíîâó ðàññìîòðåëè. Òåïåðü åùå îäèí òåã âàì íà èçó÷åíèå:
Äëÿ íà÷àëà, åñëè êòî íå çíàåò ÷òî òàêîå ññûëêà:-)
Êàê âñåãäà ïðîñòûì ÿçûêîì - ññûëêà ýòî àäðåñ ñòðàíè÷êè ñàéòà. Ó íàñ åñòü òåëåôîíû,- ñ íîìåðàìè. Êâàðòèðû - ñ àäðåñàìè. Òàê âîò è ó ñòðàíè÷êè ñàéòà äîëæåí áûòü àäðåñ. Íàïðèìåð àäðåñ ñòðàíè÷êè çàïèñåé ìîåãî äíåâíèêà:
http://www.liveinternet.ru/users/legionary/
Íî ýòî ïðîñòî àäðåñ... íå î÷åíü óäîáíî ïîëüçîâàòüñÿ òàêèì îôîðìëåíèåì. Ãîðàçäî ëó÷øå, ÷òîáû àäðåñ áûë êëèêàáåëüíûì. Ò.å. ÷òîáû ïðè íàæàòèè íà íåãî êíîïêîé ìûøè, ïîëüçîâàòåëÿ ïåðåêèäûâàëî èìåííî íà ýòó ñòðàíè÷êó. Ò.å. âîò òàêîå îôîðìëåíèå:
http://www.liveinternet.ru/users/legionary/
Óæå ëó÷øå. Íî íå î÷åíü êðàñèâî. Ëó÷øå, ÷òîáû âìåñòî âñåãî ýòîãî àäðåñà áûë ïîíÿòíûé, íî òî÷íî òàê æå - "êëèêàáåëüíûé", òåêñò. Êîòîðûé õîòÿ áû áóäåò îáúÿñíÿòü,- àäðåñ ÷åãî èëè êîãî ýòî:-) Ïðèìåð:
Ìîé áëîã:-)
Çàìå÷àòåëüíî:-) Òåïåðü î òîì, êàê ñîçäàòü òàêóþ êëèêàáåëüíóþ ññûëêó â html. Êàê âñåãäà,- íàì ïîìîãóò òåãè:
<a href="Àäðåñ ñòðàíè÷êè(ññûëêà)
">Ôðàçà ïîäìåíà ( íàïðèìåð "ìîé äíåâíèê")
</a>
Îáðàùàåì âíèìàíèå íà çàêðûâàþùèé òåã
</a>.
Ýòî êîä ñàìîé îáû÷íîé ññûëêè. Íî åñòü ìíîæåñòâî äîïîëíåíèé ê êîäó âñòàâêè ññûëêè.
Ðàññêàæó î íåêîòîðûõ.
Îäíà è òà æå ññûëêà íà ñòðàíè÷êå ìîæåò ïðèíèìàòü îäíî èç òðåõ çíà÷åíèé:
1. - Ïðîñòî ññûëêà íà ñòðàíè÷êå
2. - àêòèâíàÿ ññûëêà. Ò.å. åñëè âû íàæàëè íà ññûëêó îíà ñòàíîâèòñÿ àêòèâíîé, ïîêà áðàóçåð íå ïåðåêèíåò âàñ íà óêàçàííóþ â ýòîé ññûëêå ñòðàíèöó.
3. - ïîñåùåííûå ññûëêè - ïðåäïîëîæèì íà ñòðàíè÷êå åñòü 3 ññûëêè, íà îäíó èç íèõ âû íàæàëè, âàñ ïåðåêèíóëî ïî àäðåñó... ïîñìîòðåëè ýòó íîâóþ ñòðàíè÷êó è âåðíóëèñü îáðàòíî ê òåì òðåì ññûëêàì. Òåïåðü, òà ññûëêà êîòîðóþ âû óæå íàæèìàëè ñòàíîâèòñÿ "ïîñåùåííîé"
Ê ÷åìó ýòî âñå?
 êîäå ñòðàíè÷êå ìîæíî ïðîïèñàòü öâåòà ññûëîê. Îòäåëüíî äëÿ ïðîñòîé, àêòèâíîé è ïîñåùåííîé.
Äëÿ ýòîãî èñïîëüçóåòñÿ äîïîëíèòåëüíûå ïàðàìåòðû íàøåãî òåãà
<body>.
À òî÷íåå:
LINK - ïðîñòî ññûëêà
ALINK - àêòèâíàÿ ññûëêà
VLINK - ïîñåùåííàÿ ññûëêà
Ò.å. ïèøåì ïðèìåðíî òàê -
ALINK="öâåò
"
Ò.ê. ýòî âñå ïàðàìåòðû òåãà
<body>, ïðîïèñûâàòü íàäî èìåííî â ýòîì òåãå. Ñìîòðèì ïðèìåð âñåé ñòðàíè÷êè ñ ïðîïèñàííûìè öâåòàìè äëÿ ññûëîê:
<html>
<head>
<title>Ìîÿ ïåðâàÿ ñòðàíè÷êà
</title>
</head>
<body link="red" vlink="#000000" alink="#ffffff" >
<strong><i>Âñåì ïðèâåò!!!
</i></strong>
</body>
</html>
Îñòàåòñÿ òîëüêî âñòàâèòü ñàìó íàøó ññûëêó â òåëî äîêóìåíòà:-))
Âîò ïðèìåð, êàê ýòî áóäåò âûãëÿäåòü
Ñòðàíè÷êà. Âèä êîíå÷íî íåêàçèñòûé, íî ïîêà òàê:-) Âñå åùå óçíàåì, íî ïîçæå:-)
Ñðàçó îãîâîðþñü, ýòî íå âñå "ïàðàìåòðû" ññûëêè, êîòîðûå ìîæíî çàäàòü, íî äëÿ íà÷àëà õâàòèò:-)
Íåìíîãî âåðíåìñÿ... Íàâåðíÿêà âîçíèêàåò âîïðîñ,- ÷òî ýòî çà öâåò òàêîé â êîäå
#000000?
Îòâå÷àþ:
Ýòî, ñêàæåì òàê - öèôðîâîå îáîçíà÷åíèå öâåòà. Ìàëåíüêèé ñîâåò, ÷òîáû óçíàòü îáîçíà÷åíèå òîãî èëè èíîãî öâåòà, ìîæíî èñïîòëüçîâàòü íàø ëþáèìûé ËèÐó;-)
Èäåì â íàñòðîéêè, â íàñòðîéêè äèçàéíà. È òàì ó êîãî- íèáóäü ïóíêòà æìåì "âûáðàòü öâåò", ñìîòðèì:

Ïîäâîäèì ìûøêó ê íóæíîìó öâåòó è ñìîòðèì åãî çíà÷åíèå:

Ëèáî â "ëèíåéêå" ïîäáèðàåì öâåò âðó÷íóþ äâèãàÿ ïîëçóíêè:
Òîëüêî ïîñëå âñåãî ýòîãî, êíîïî÷êó "âíåñòè èçìåíåíèÿ" íå íàæèìàéòå:-)) ×òîá äèçàéí ñâîé íå óáèòü:-))
Ïîêà âñå. Ïîíèìàþ, ÷òî äî èíòåðåñíîãî ìû åùå íå äîøëè, à î÷åíü õî÷åòñÿ:-) Íî íàäî ïîçíàâàòü âñå ïîýòàïíî:-)) Ïîñòðîèòü íîðìàëüíûé ñàéò áåç ññûëîê... íåëüçÿ:-(( Òàê ÷òî ýòî çíàòü òîæå íàäî:-)
Âñå, âñåì óäà÷è:-) Åñëè âîçíèêíóò âîïðîñû, ïèøèòå ëèáî
ÑÞÄÀ ëèáî â ëè÷êó:-))