Асосҳои Web дизайн
Забони қайди гиперматн HTML. HTML таҳрирҳо (редактор) барои чӣ лозим? Гиперҳаволаҳо. Муштариён ва серверҳои Интернет
Бо тараққии Интернет дар тамоми ҷаҳон талабот ба касби WEB дизайнер пайдо шудааст. WEB дизайнер (ороишгар) – шахси дорои завқи бадеӣ, донандаи технологияи Интернет буда, WEB – саҳифаҳо таҳия мекунад ва онҳоро дар WEB сайт муттаҳид месозад. Барои WEB дизайнер фақат донистани технологияи интернет кофӣ нест. Вай бояд дорои завқи баланди бадеӣ ва соҳиби маълумот бошад ва ҳамкори ӯ дар соҳаи полиграфия низ дорои чунин сифатҳо буданаш лозим. Фақат дар ҳамин сурат натиҷаи босифат гирифтан мумкин аст. Васоити барномавии муосир имкон медиҳад, ки ба ҳар гуна нозукиҳо эътибор надиҳад. Дар шумо парвози эҷодӣ пайдо шуду худро дар соҳаи WEB дизайн санҷидан мехоҳед, лекин HTML, CSS ва Java Script чист? Намедонед? Махсус барои шумо барномаҳои визуалии WEB муҳаррир таҳия шудааст, ки ба нозукиҳои технологияи интернет ва стандартҳо сарфаҳм нарафта дар Microsoft Word WEB – сайтҳо сохта метавонед. Dreamweaver MX, ки гуна (версия)-и охирини WEB редактори ширкати Macromedia мебошад.
Ин барномаи тавоноест, ки стандартҳои муосири интернетро доро буда, вазифаҳои мураккабро сабук мекунад.
Интернет чист?
Интернет – ин маҷмӯи шабакаҳои компютерии бо ҳам алоқамандест, ки дар асоси як стандарт кор мекунанд.
Web – саҳифаҳо чӣ тавр таҳия мешаванд?
Барои таҳияи Web – саҳифаҳо забони HTML (HyperText Markup Language-забони қайди гиперматн) лозим аст. Ин забон чидани фармонҳои махсус — тегҳоро, ки барои (форматирования) форматкунонӣ ва таъин кардани ин ё он унсури Web саҳифаҳо хизмат мекунад, муайян месозад. Тегҳои махсус барои ворид кардани тасвирҳои графикӣ, аудио ва видеоканалу дигар объектҳо хизмат мекунанд.
Саҳифаи тайёрро дида мебароем. Барои коди онро дидан саҳифаро дар блокнот мекушоем.
<HTML> <HEAD>
<TITLE> Web саҳифа <TITLE></HEAD><BODY>
<H1> Намунаи Web саҳифаҳо </H1>
<P>Ин Web – саҳифачаи соддаи дар блокноти стандартӣ таҳияшуда мебошад, ки дар Microsoft Internet Explorer тасвир меёбад.
</P><BODY></HTML> Бад менамояд. Лекин матн дар окнои Web – офарандаи расми 1.1. нағз намудор мегардад. Биёед онро муфассалтар дида мебароем.
<H1> Мисоли Web – саҳифа </H1> аст.
<P> Ин Web саҳифаи соддатаринест, ки дар стандарти Блокнот таҳия шуда, дар Microsoft Internet Explorer инъикос мешавад. <P> Шумо калимаҳоеро мебинед, ки дар қавси кунҷдори < > омадааст. Ин тегҳои HTML. Онҳо шаклдиҳии матнро супориш медиҳанд. Теги ибтидои фрагментро теги кушодашаванда ва теги охиринро теги русткунанда меноманд. Web – саҳифаиоддӣ.
Ин тегҳо нишон медиҳад, ки матн дар Web – офаранда чӣ хел менамояд.
Акнун тегҳоеро мебинем, ки Web – офаранда акс намекунад, вале бо мақсади хизматӣ истифода мешавад. Онҳоро тегҳои диданашаванда меноманд. Теги ҷуфти <BODY>…</BODY> барои ҷудо кардани Web – саҳифа, ҳамон қисме ки дар тирезаи Web –
офаранда акс меёбад, истифода мешавад.
Барои он ки барномаҳои гуногуни Web – офаранда ҳамон як Web саҳифаро нағз инъикос намояд, забони HTML бояд стандарткунонида шавад. Созмони махсус бо стандартизатсияи он ва дигар стандартҳои Интернет машғуланд. Ин созмон World Wide Consortium ё мухтасар, WWWC ном дорад. Ин номро чун «Кумитаи Умумиҷаҳонии анкабут» тарҷума кардан мумкин аст, онро нағзаш тарҷума кардан лозим нест. WWWC асарҳое, ки версияҳои гуногуни стандарти HTML-ро таҳлил мекунанд интишор мекунад.
Муштариён ва серверҳои Интернет.
Web – офаранда саҳифаро бо тамоми унсурҳои ба он ҷойшудаи зарурии графикию овозӣ ва видеотасвирҳо пурра ташаккул дода, ворид мекунад.
Лекин Web – саҳифаи дигар кас тартибдода чӣ тавр ба мизи кори Шумо оварда мешавад? Бо воситаи Интернет. Ҳамаи барномаҳои барои Интернет ба ду гурӯҳ ҷудо мешаванд: муштариён ва серверҳо. Барномаҳои серверҳо барои дастрас кардани барномаи муштарӣ имконият доранд. Агар ягон файл лозим шавад, муштарӣ ба сервер дархост мефиристонад. Сервер дархостро кор карда, ҷавоб медиҳад ё хатогиҳои дастнорасии маълумотро нишон медиҳад.
HTML муҳаррирҳо (редактор) барои чӣ лозим?
Ду намуди Web – муҳаррир: визуалӣ ва ғайривизуалӣ вуҷуд доранд. Чӣ хеле, ки мегӯянд, WYSIWYG ва но – WYSIWYG — муҳаррирҳо мавҷуданд. (WYSIWYG ё ин ки What You See Is What You Get — чиро ки мебинӣ, ҳамонро мегирӣ).
Редактори ғайривизуалӣ бо коди «хоми» HTML кор мекунад. Онҳо имконияти тез ворид кардани тегҳо, равшансозии синтаксисӣ, тафтиши дурустии коду ҳаволаи ҳосилшударо имконият медиҳад. Ба он аз ҷумла Arachnophilia тааллуқ дорад. Web – муҳаррирҳои ғайривизуалиро HTML — муҳаррир меноманд.
Муҳаррири визуалӣ имконияти бо худи Web – саҳифа кор карданро медиҳад. Барои чунин истифодабарандагон, ки дониши хуби HTML ва воситаҳои визуалии муҳаррирро якҷоя карданианд муҳаррирҳои гибридӣ вуҷуд дорад. Онҳо воситаҳои тавонои муҳарририи визуалӣ дошта, якбора ба коди HTML роҳ меёбанд. Ба қатори ин гуна редакторҳо Macromedia Dreamweaver дохил мешавад.
Дарси амали — лаборатории №1
Мақсад ва мундариҷаи мухтасари мавзўъ:Шиносоӣ бо тегҳои HTML. Кор бо таҳриргари матнии Блокнот
Якчанд тегҳои дар HTML истифода бурда шаванда
Ҷадвали 1.1.
| Тегҳо | Амалҳои иҷрошавнда |
| <html>… </html> | |
| <head>…</head> | |
| <title>…</title> | Гузоштани сарлавҳаи саҳифа |
| <p>…</p> | Гузоштани сарсатр <p align=”Left”>…</p> форматкунонӣ аз тарафи чап <p align=”Cеnter”>…</p> форматкунонӣ аз марказ <p align=”Right”>…</p> форматкунонӣ аз тарафи рост <p align=”Justify”>…</p> форматкунонӣ аз ҳар ду тараф |
| <br> | Гузаштан ба сатри нав |
| | Гузоштани символи ҷои холигӣ (пробел) |
| <h1>…</h1> | Гузоштани сарлавҳа |
| <pre>…</pre> | Форматкунонии тахминӣ |
| <!— | Гузоштани эзоҳ |
| <b>…</b> | Шрифтро ғафс кардан |
| <I>…</I> | Шрифтро курсив кардан |
| <U>…</U> | Ба зери шрифт хат кашидан |
| <strike>… </strike> | Аз мобайни шрифт хат кашидан |
| <sup>… </sup> | Навиштани индекси болоӣ |
| <sub>…</sub> | Навиштани индекси поёнӣ |
| <font face=”Arial”> | Интихоби стили шрифт |
| <basefont size = “?”> | Тағйир додани андозаи шрифти ҳамаи матни Web — саҳифа. Ба ҷои аломати “?” аз 1 то 7 меояд. |
| <font size=”?”> | Тағйир додани андозаи порчаи матни Web – саҳифа. Ба ҷои аломати “?” аз 1 то 7 меояд. |
| <body Text=”?”> | Интихоби ранги ҳамаи матни Web – саҳифа. Ба ҷои |
| аломати ? метавонед коди рангро гузоред.* | |
| <font color=”?”> | Тағйир додани ранги порчаи матни Web – саҳифа. Ба ҷои аломати ? метавонед коди рангро гузоред.* |
| <body bgcolor=”?”> | Тағйир додани манзари (фон) Web – саҳифа. Ба ҷои аломати ? метавонед коди рангро гузоред.* |
| <body Leftmargin= ”?”> | Гузоштани андозаи майдони саҳифа аз тарафи чап. Ба ҷои аломати ? андоза гузошта мешавад. Инчунин шумо метавонед аз тарафи рост, боло ва поён гузоред. (Rightmargin, topmargin, bottommargin) |
| <TT>…</TT> | Шрифти моновасеъгӣ (моноширинный) истифода бурдан |
| <blockquote>… </blockquote> | Дар саҳифа иқтибос (цитата) гузоштан |
| <LI>…</LI> | Пеш аз теги <OL>…</OL> ояд, рўйхати барақамтартибдодашуда таҳия месозад Пеш аз теги <UL>…</UL> ояд, рўйхати нишонагӣ таҳия месозад. |
| <img SRC>=”?” | Ба саҳифа гузоштани тасвир. Ба ҷои аломати ? метавонед номи файли тасвирро гузоред. |
| <body background> = “?” | Гузоштани тасвир ба манзари (фон) саҳифа. Ба ҷои аломати ? метавонед номи файли тасвирро гузоред. |
*Дар поён якчанд кодҳои ранг оварда шудааст
| Номи ранг | Коди он |
| Осмонранг (голубой) | #00FFFF |
| Сиёҳ (чёрный) | #000000 |
| Кабуд (синий) | #0000FF |
| Пуштӣ (розовый) | #FF00FF |
| Сурх (красный) | #FF0000 |
| Сабз (зеленый) | #00FF00 |
| Сабзи баланд (темно-зеленый) | #008000 |
| Сафед (белый) | #FFFFFF |
| Зард (желтый) | #FFFF00 |
- Таҳриргари матнии Блокнот-ро аз менюи Пуск-Программы –Стандартные – Блокнот интихоб намоед.
- Дар таҳриргари матнӣ ин кодро дохил намоед:
<html>
<head>
<title>My first Web Page</title>
<p> Ин Web – саҳифаи аввалини ман мебошад. Онро ман дар таҳриргари матнии Блокнот таҳия сохтам. </p>
</head>
</html>