Интернет-технологиялар

Тәжірибелік жұмыс 13

CSS – бұл стандартты болып табылады HTML. Тек HTML қолдана отырып, сіз өте құралдарында шектелетін болады. Арнайы - тегтер мен атрибуттар CSS HTML - құжаттарды енгізу қосылу сілтемелер қажет.
Сілтемелер атап жойылған Құрылғыны жылжытқан кезде түсін өзгертуге сілтемелер , бар, Сіз бұл меңзегенде мөлшері арттырады мәтін , кесте Құрылғыны жылжытқан кезде түсін өзгерту жасушалар , суреттер және мәтін , бір-біріне жүктейді - және тағы басқалар . Мұндай қалжыңдар CSS пайдаланып іске асырылуда.
Дәл қандай CSS жасалуы мүмкін:

пайдалану кеңейту үшін HTML
еркін веб-беттер мазмұнын басқару
Әр түрлі көрнекі әсерлер

Тағыда басқа

Мәнерлер файл жолын көрсету , бөлек файлда ұсынылған , және бұл файлды көрсетіңіз болуы мүмкін CSS:

Мәнерлер файл жолын көрсету , бөлек файлда ұсынылған , және бұл файлды көрсетіңіз болуы мүмкін <link>, Тегтің атрибуттары Кету <link>:
1 – href=”http://…” – стильдер файлының жолы
2 - rel="stylesheet" – , тұрақты қолайлы немесе балама қотару мәнер парағына ма көрсетеді. Бұл жағдайда құжатқа , тұрақты жиынтығы стильдер кестесі .

3 - type="text/css" – жүктелген ақпарат болып табылатын контент түрі, бұл жағдайда , бұл көрсетіңіз CSS.
Тегтерді ( құжатыңыздың элементтері ) , стильдер кестелерін пайдалану көрсетіңіз.
Мысалы , ( біз файл special.css сақталады ) кейбір стильдер кестесі осындай коды оны бар еді , бір -тармағында қызыл түсін орнатады (в файле special.css):

P.special {
color : red;
}

Алайда , бұл жағдайда , мәнер парағының сол тармақтардың мәтіннің емес, барлық блоктар ( < P> мәтін </ P> ) көрсетеді , қызыл түспен , ал сіз көрсеткен ғана блоктары болады.

<html>
<head>
<title> Құжат CSS</title>
<link href="special.css" rel="stylesheet" type="text/css">
</head>
<body>

<p class="special"> Осы тармақта , мәтін қызыл болуы тиіс.</p>
<p> Ал біз атрибутын пайдалану , оны көрсету жоқ, осы тармақта , жоқ, себебі class.</p>

</body>
</html>

Тегті пайдаланып тікелей сіздің құжатына стильдер кестесін < стилі > жүзеге асыру , сіз коды стиль кестелерін ( < стилі > мәнерлер коды </ стилі > ) қоюға , онда

<html>
<head>
<title> Құжат CSS</title>

<style type="text/css">
P.special {
color : red;
}
</style>

</head>
<body>

<p class="special"> Осы тармақта , мәтін қызыл болуы тиіс.</p>
<p> Ал біз атрибутын пайдалану , оны көрсету жоқ, осы тармақта , жоқ, себебі class.</p>

</body>
</html>

Скрипт - ол бағдарлама үшін механизмі , веб үшін арнайы бағдарлама. Объектілер мен CSS ретінде , сценарийлерді HTML бөлігі болып табылмайды , бұл біз арнайы тегтер мен төлсипаттарды пайдаланғаннан біздің құжатқа байлау басқа технологиялар бар. Сценарийлер (бағдарламалар) қарапайым болып табылады ( мәзір мен құралдар тақтасы жоқ жоғалту жаңа терезені ,

ашылмалы мәзірі , « алға және артқа » батырмасын басыңыз , және т.б.) және кешенді ( Қонақ кітабы , қарсы , форум , дауыс беру , чат , т.б. ).
HTML - құжатта сценарийлерді жүзеге асыру .

Сондықтан , CSS сценарий код жағдайда ретінде ерекше тег сценарий Сіздің HTML - құжаттың коды тікелей ендірілген болуы мүмкін :SCRIPT:

<html>
<head>
<title> скриптпен құжат </title>
</head>
<body>

<script type="text/javascript">
... скриптың коды...
</script>

</body>
</html>

Скрипт может быть вынесен и во внешний файл, из которого он будет подгружаться. Укажите путь к этому файлу, при помощи атрибута src:

<html>
<head>
<title> скриптпен құжат </title>
<script type="text/javascript" src="http://site.ru/put_k_sciptu/"></script>
</head>
<body>

<script type="text/javascript">
... код скрипта...
</script>

</body>
</html>

Барлық дерлік тегтері бірге пайдалануға болады арнайы төлсипаттары пайдаланып HTML - құжатта сценарийді жүзеге асыру .

<html>
<head>
<title> скриптпен құжат </title>
</head>
<body>

<a name="ist"></a>
<a href="ist2.html#ist" onclick='open("big.html", "displayWindow1", "width=780, height=540, status=no, toolbar=no, menubar=no");'><img src="small.gif"></a>

</body>
</html>

Нысаны элементтері суреттің астында әрбір drugom.Vvedite түсіндірме мәтінді орналастырыңыз:

Аты:<br>
<input type=text name=firstname value=" Сіздің атауын енгізіңіз " size="40" maxlength="20"><br><br>

Сіздің комментариден:<br>
<textarea name="comments"></textarea>

</form>

Биіктігі өрісін енгізіңіз (жолдар = жолдар саны) , ( жол сайын басылатын таңбалар cols = саны) өрісінің енін көрсетіңіз , түрінде пайда болады мәтінді теріңіз (<TEXTAREA> әдепкі мәтіні </TEXTAREA>).

<form action="mailto:vasya@mail.ru">

Ваше имя:<br>
<input type=text name=firstname value=" Сіздің атауын енгізіңіз " size="40" maxlength="20"><br><br>

Сіздің комментари:<br>
<textarea rows=7 cols=40 name="comments"> Сіздің комментарии енгізіңіз </textarea>

</form>

Батырмалардың екі түрі түрінде енгізіңіз: түймесін және ысыру түймешігін жіберіңіз. ( Электрондық пошта немесе скрипт өңдеу арқылы) ақпаратты жіберу үшін Button тегін пайдалану арқылы құрылады <INPUT> оның атрибуты type.

<form action="mailto:vasya@mail.ru">

сіздің атыңыз:<br>
<input type=text name=firstname value=" Сіздің атауын енгізіңіз " size="40" maxlength="20"><br><br>

Сіздің комментарии:<br>
<textarea rows=7 cols=40 name="comments"> Сіздің комментарии енгізіңіз </textarea><br><br>

<input type=submit>

</form>

Қалпына келтіру батырмасы ұқсас мәліметтерді орнатылған . Жоқ мәнді теріңіз Тек енгізіңіз submit, а reset:

<form action="mailto:vasya@mail.ru">

Сіздің атыңыз:<br>
<input type=text name=firstname value=" Сіздің атауын енгізіңіз " size="40" maxlength="20"><br><br>

Сіздің комментарии:<br>
<textarea rows=7 cols=40 name="comments"> Сіздің комментарии енгізіңіз </textarea><br><br>

<input type=submit> <input type=reset>

</form>

Атрибутын пайдалану оның стандартты жазулар ауыстырыңыз value:

Нысаны жұмыс істемейді , онсыз маңызды атрибуты ,:

<form action="mailto:vasya@mail.ru" method=post>

Сіздің атыңыз:<br>
<input type=text name=firstname value=" Сіздің атауын енгізіңіз " size="40" maxlength="20"><br><br>

Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments"> Сіздің комментарии енгізіңіз </textarea><br><br>

<input type=submit value="ОК"> <input type=reset value="Отмена">

</form>

Дайын формасын іздеу формасын алыңыз. Дайын нысанын бөлшектеуге.

Осы пішіні көрінеді сияқты Яндекс алынған Іздестіру формасы , сайт , Яндекс тіркелуі тиіс :

Коды түрінде қараңызшы:

action - және, демек, сценарий өңдеу қалдыру түрінде деректерді - 8081 / yandsearch : //www.yandex.ru : әрекетін = HTTP , бұл жағдайда , нысан деректерін өңдеу үшін жіберіледі көрсетеді http://www.yandex.ru:8081/yandsearch - Ол , атап айтқанда кезінде , іздеу қозғалтқыш Яндекс болып табылады.

Name - нысаны атауы , міндетті атрибуты . Әзірлеуші пішіннің атауын көрсетеді - веб , ол нысандарды өңдеу қателер , әйтпесе өзгерту қажет емес.

<INPUT> нысаны элементі болып табылады. Аты - элемент атауы , бірегей , міндетті . Мән - мәні , түрі - нысаны элементі түрі . , Ол мұндай жасырын элементтің қай түрі түсіну қалады , және бұл жасырын осындай ерекше бірақ қажетті бақылайды. Бұл жағдайда , сіз сайт http://narod.ru бойынша іздеу жүргізілетін болады , сіздің нысанын , өңдеуге болады сценарий үшін көрсетілген . Пайдаланушы осы ақпаратты көру үшін қажет емес.

Сіздің сайттың атын қамтуы қажет Тағы бір жасырын өріс , ( сервер атауы) .
Атрибут method для тега <FORM>.

Әдісі атрибут деректер құйма өңделетін болады қалай көрсетеді. Әдісі атрибуты тек екі құндылықтар GET мен POST болып табылады болуы мүмкін . Егер сіз әдісі көрсетсеңіз = сол әрекетті білдіреді + барлық мәндері ( мән ) бір үлкен splyusovany ішіне URL элементтері қалыптастыру, сценарий өңдеу үшін осы түрінде жіберіледі болады . , Ол алу Мұнда URL берілген:

action?name=value&name=value&name=value.

Сауалнама нысанын жасау .

Құжатта формуланы енгізіңіз:

Мәтін ұясын енгізіңіз (ФИО и е-майл):

Ақпаратты жіберуге және түймесін қалпына келтіру үшін түймесін енгізіңіз::

жасау "ауыстыру":

<b>Вы:</b>
еркек <input type=radio name="sex" value="man">
әйел<input type=radio name="sex" value="woman">
<br><br>

Элементтердің құсбелгілерін жасау "флажки":

Бұл нысаны элементтің коды:

<b>Какие фильмы вы любите смотреть?</b><br>
<input type=checkbox name="fiction" value="yes"> фантастику<br>
<input type=checkbox name="thriller" value="yes"> боевики<br>
<input type=checkbox name="adventure" value="yes"> приключенческие<br>
<input type=checkbox name="melodrama" value="yes"> мелодрамы<br>
<input type=checkbox name="documentary" value="yes"> документальные
<br><br>

Өз әрбір « туы » , құны ( мән ) арналған атауды көрсетіңіз - барлық « тулар » бірдей.

Жаңа элемент ашылмалы тізімін тегін пайдалану арқылы </ SELECT > < SELECT > . Тег < OPTION > пайдаланып ашылмалы тізім , түрі әр элемент .

Начало формы

<b> Сіз қай елге барығыңыз келеді?</b><br>
<select name="country">

<option value="france">Франция
<option value="USA">США
<option value="england">Англия
<option value="italy">Италия
<option value="australia">Австралия

</select>
<br><br>

Конец формы

Сондықтан енгізілген әрбір аты ашылмалы - біз < SELECT > тегінде үшін ғана сұраңыз , және ол бүкіл тізім қолданылады. Мән - біз әрбір тег < OPTION > ( тізім элементі ) сұраңыз. Тегті пайдаланып , бірнеше топқа оның ұпай бұзып , жаймасы ашылмалы тізімді өзгерту <OPTGROUP></OPTGROUP>:

Начало формы

<b> Сіз қай елге барығыңыз келеді?</b><br>
<select name="country">

<OPTGROUP label="Европа">
<option value="italy">Италия
<option value="france">Франция
</OPTGROUP>

<OPTGROUP label="Басқа">
<option value="USA">США
<option value="england">Англия
<option value="australia">Австралия
</OPTGROUP>

</select>
<br><br>

Конец формы

Тізімін жылжу Жаңа элемент.

<b> Сізге ұнайды осы актерлер:</b><br>
<select name="actor">

<option value="gorez"> тәкаппар Горец
<option value="rembo">Недоделанный Рембо
<option value="cowboy">Ковбой Шляпада
<option value="crybobby">Шерге Бобби
<option value="history">заңды тұлға

</select>
<br><br>

Мөлшері атрибуты бір уақытта көрінетін, жылжымалы тізімде жолдар санын көрсетеді. Өлшем = 4 - осы тізімдегі төрт көрінетін сызықтар бар. Соңында не болғанын қарап , пішін кодын элементтерін қосу. Соңында не болғанын қарап, пішін коды элементтерді қосу.