جمعه ۲ تیر ۱۳۹۶
  • :
  • :

طراحان وبسایت

Your First Web Pages

webtarahan

در اين فصل شما مي توانيد اولين صفحه وب خودتان را خلق نماييد و با XHTM آشنا خواهيد شد و وهله به وهله كارهاي خود را در مرورگر تست ميكنيد .
بگذاريد دقيق شويم ! طراحي وب سايتی كه شما مي بينيد به سه لايه اصلي تقسيم مي شود:

يادگيري اين سه لايه شما را به يك طراح تبديل ميكند!
لايه اول لايه محتوي است كه مانند شاسي ماشين است حاوی تگهاي مفرق ي مي باشد .لايه دوم لايه نمايش است كه به عناصر HTML شكل ظاهر مي دهد لايه سوم لايه رفتار است كه حركت پويايي صفحات را حاوی مي شود.
چيزي كه در اين كتاب روش داده مي شود مربوط به ۲ لايه HTML و CSS است.

ديدن Source پروگرام :

ديدن كد برنامـه مي تواند به يادگيري شما سرعت ببخشد اما بايد در گزینش وب سايت خود دقت نماييد تا غلط آنها مسير يادگيري شما را تغيير ندهد. نحوه كار بدين صورت است كه ماوس را درروي صفحه جايي غير از تصاوير ببريد كليك راست كنيد و view page source يا view source را بزنيد.
بايد صفحه اي مانند زير در فايرفاكس ببينيد:

يا در IE
عناصر اصلي يك صفحهHTML :

یک DocType
یک

tag
یک tag
یک

tag

تو سورس پيداشون كنيد.

برای دیدن تصویر واضحتر روی عکس بالا کلیک بکنید

و هم اکنون يك نمونه كد تنها حاوی عناصري اصلي :

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

http://www.w3.org/1999/xhtml“>

هم اکنون مي خواهيم با تك تك اين عناصر آشنا شويم :
داك تايپ DocType : Document Type Definition
اولين آيتم صفحه است بدون فاصله. اين يك قانون است.
همان گونه ي كه فايل word 2007 در نمايش در ۲۰۰۰ دچار مشكل مي شود HTML ها با داك تايپ هاي مفرق هم نمايش مفرق در مرورگرها خواهند داشت.
در واقع اين داك تايپ است كه به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . روش رندر شدن فرق هاي آنها بايد در سطح حرفه اي تري بیان شود.
داك تايپ ها در طول وقت به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5 كه به تازگي بیان شده است.
جهت ديدن داك تايپ هاي موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

به کدهای داك تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي كه بايد به اين نوع سند در وب سايت كنسرسيوم جهان ي وب World Wide Web Consortium یا W3C ، اشاره كند کدام است.
در حال حاضر دو نوع داكتايپ هستند كه استفاده بيشتري دارند Transitional و Strict
همان گونه ي كه گفتم فعلا دنبال فرق اين داك تايپ ها نباشيد به آن خواهيم رسيد .
تاكيد ميكنم : اولين آيتم صفحه است بدون فاصله. اين يك قانون است.

عناصر HTML :
قبل از اين كه عناصر HTML را شرح دهم بايد با مفهوم تگ (tag) آشناشويد. تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد

تگ HTML

تگ HEAD

تگ ها مي توانند حاوی چند attribute (ویژگی) باشند:

http://www.w3.org/1999/xhtml ” dir=”rtl” >

dir يك نام attribute است rtl ، value (میزان ) آن است كه بين ” ” قرار گرفته است.
تگ ها به دودسته container و empty تقسيم مي شوند.تگ هاي container حاوی يك تگ بازشونده و يك تگ بسته شونده هستند به مثال بالا دقت نماييد HTML باز شده و بسته شده است. تگهاي empty مفرق هستند مانند مثال زير

”test”

تگ هاي empty را مي توان به صورت container استفاده كرد ولي در داك تايپ هاي xhtml توصيه شده است كه تگ هاي empty را به همان شكل empty بنويسيم
در مصرف از تگ ها بايد دانيد كه از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty بنويسيم دچار error می شویم.
نپرهزینه نباشيد كم كم تمام آنها را خواهيد آموخت . بياييد همين الان تو اينترنت جمله روبرو را جستجو كنيم :

empty tag in html

زياد عالی شما اين نتايج را پيدا كرديد :









اين را گفتم كه هيچ زمان دنياي وب جستجو را فراموش نكنيد.
غير از داك تايپ ها تمامي عناصر صفحه درون تگ HTML است كه حاوی ۲ بخش مي شود head و body
عنصر HAED
اين يك تگ container است و در بالاي سند قبل از body قرار مي گيرد حاوی اطلاعاتي در باره صفحه است مانند title, meta, css …..

عنصر title :
يك تگ container است كه متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :

به تایتل درسایت بنده توجه بکنید :

موارد مصرف ديگر:
• اين تايتل در زمان مينيمايز كردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوكمارك كردن صفحه با اين عنوان در ليست ما ذخيره مي شود
• براي معرفي آن صفحه است
• براي موتورهاي جستجو هم حائز اهميت مي باشد چیزی که در سئو وب سایت وب اسکالا نیز مصرف شده است

عنصر meta :
متا تگ يك تگ empty است و براي دلايل مفرق ي استفاده مي شوند اطلاعات اضافي كه در مرورگر نمايش پيدا نمي كند . به طور مثال براي نام نويسنده ويا حق كپي رايت و يا نوع كاراكتر و ….
Css و javascript هم در head قرار ميگيرند كه بنا به نياز استفاده ميشوند اما جهت جاوااسكريپت ميتوان يك فرق هايي در طراحی های پیشرفته قائل شد. به طور مثال سورسی که در طراحی سایت فوق مصرف شده است را مشاهده نمایید. جاوا اسکریپت در پایین صفحه درج شده است.

عناصر body :
هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و …….




پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

خرید vps خرید vps ارزان خرید سرور مجازی خرید سرور مجازی ارزان خرید وی پی اس خرید وی پی اس ارزان خرید فیلترشکن خرید vpn خرید vpn ارزان خرید vpn خرید vpn
سوپروب close
خرید بک لینک