X
تبلیغات
صفحه اول تماس با ما RSS قالب وبلاگ
معرفی مطالب جالب با لینک منبع
معرفی مطالب جالب با لینک منبع
امین طیرانی پنجشنبه ۱۷ اسفند ۱۳۹۶


طراحی سایت در مشهد

فراگیری پباده سازی تارنما از اساس – نصیب دوم با درود سرویس تمامی دوست داران به يادگيري . با اعتنا به استقبال شما عزيزان از اين مقاله‌ها سعي مي كنم با اعتنا و سرعت بيشتري به نوشتن ادامه دهم .

بازهم اعلام مي كنم که ترجمه خط به خط کتاب ارائه نمی‌شود و چیزی که تحت عنوان برداشت فردی اینجانب یک  از کتاب می‌باشد در قالب مقاله ها آموزشی برای شما ابلاغ خواهد شد و مسلما با بازخوردی که از خواننده‌گان خواهم گرفت کیفیت فعالیت و نیز چنین وسعت عمل را ارتقاء خواهم بخشید . و البته ادامه یادگرفتن .

بهینه سازی سایت

فصل دوم


Your First Web Pages


در اين فصل شما مي توانيد اولين کاغذ اینترنت خودتان را اخلاق نماييد و با XHTM آشنا خواهيد شد و گام به گام كارهاي خویش را در مرورگر آزمایش ميكنيد .

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


design - web - 06 . gif

يادگيري اين سه لايه شما‌را به يك طراح تبديل ميكند!

لايه نخستین لايه محتوي است كه نظیر شاسي ماشين است و دربرگیرنده تگهاي متفاوتي مي باشد . لايه دوم لايه نمايش است كه به موادتشکیل دهنده HTML شكل و ظواهر مي دهد و لايه سوم لايه خلق و خوی است كه حركت و پويايي صفحه های را دربرگیرنده مي شود .

چيزي كه در اين كتاب یادگرفتن داده مي شود مرتبط با 2 لايه HTML و CSS است .


ديدن Source برنامه :



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

بايد برگه اي مثل زير در فايرفاكس ببينيد :


design - web - 07 . jpg

يا در IE

design - web - 08 . jpg


موادتشکیل دهنده اصلي يك صفحهHTML :


یک DocType

یک tag

یک tag

یک

” Content - Type content= ” text/html; charset=utf - 8″/>






درحال حاضر مي خواهيم با تك تك اين عنصرها آشنا شويم :

داك تايپ DocType : Document Type Definition

اولين آيتم ورقه است فارغ از مسافت . اين يك ضابطه است .

همانطوري كه فايل word 2007 در نمايش در 2000 در گیر مشكل مي شود HTML ها با داك تايپ هاي مختلف نیز نمايش متعدد در مرورگرها خواهند داشت .

در واقع اين داك تايپ است كه به مرورگر مي گويد اين مدرک از چه نوعي است و بايد به چه ترتيب Render شود . روش رندر شدن و تفاوت هاي آن‌ها بايد در تراز رشته اي تري مطرح شود .

داك تايپ ها نیز در حین زمان به‌وجود مي آيند يعني نظیر word جور هاي جديدي روي قبلي ها عرضه مي شوند مثل HTML5 كه به تازگي ارائه شده شده‌است .

براي ديدن داك تايپ هاي جان دار به اين نشانی بريد http : //reference . sitepoint . com/html/doctypes




“ - //W3C//DTD XHTML 1 . 0 Strict//EN ”

“ 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 ( اندازه ) آن است كه بين ” ” قرار گرفته است .

design - web - 09 . gif


تگ ها به دودسته container و empty تقسيم مي شوند . تگ هاي container دربرگیرنده يك تگ بازشونده و يك تگ بسته شونده میباشند به نمونه بالا اعتنا نماييد HTML گشوده شده و بسته شده‌است . تگهاي empty متعدد میباشند مثل نمونه زير


” images/test . jpg ” alt= ” test ” />

بهینه سازی سایت



تگ هاي empty را مي توان به طور container استفاده كرد ولي در داك تايپ هاي xhtml توصيه شده‌است كه تگ هاي empty را به به عبارتی شكل empty بنويسيم

در استفاده از تگ ها بايد دانيد كه از چه نوعي می‌باشند تا مدرک شما مبتلا error نشود بعنوان نمونه در صورتیکه تگ div را به طور empty بنويسيم مبتلا error می شویم .

نگران نباشيد كم كم همگی آن‌ها را خواهيد فراگرفت . بياييد همين حال حاضر تو اينترنت عبارت روبرو را کاوش كنيم :


empty tag in html


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






اين را گفتم كه هيچ وقت دنياي اینترنت و کاوش را فراموش نكنيد .

غير از داك تايپ ها تمامي موادسازنده کاغذ باطن تگ HTML است كه مشتمل بر 2 بخش مي شود head و body

عنصر HAED

اين يك تگ container است و در بالاي گواهی پیشین از body قرار مي گيرد و دربرگیرنده اطلاعاتي در باره کاغذ است نظیر title , meta , css و … . .




” Content - Type ” content= ” text/html; charset=utf - 8″/>



عنصر title :

يك تگ container است كه نوشته میانه آن در تیتر ( Title ) بالاي ورقه قرار ميگيرد :


به تایتل درسایت عبد دقت فرمائید :


design - web - 10 . gif

مورد ها استفاده ديگر :

• اين تايتل در حین مينيمايز كردن پنجره در taskbar windows قابل مشاهده است

• در طول بوكمارك كردن برگه با اين تیتر در ليست ما ذخيره مي شود

• براي معرفي آن کاغذ است

• براي موتورهاي کاوش نیز حائز اهميت مي باشد چیزی که در با صرفه سازی سایت اینترنت اسکالا نیز مستعمل شده‌است




عنصر meta :

متا تگ يك تگ empty است و براي دلايل متفاوتي استفاده مي شوند داده ها اضافي كه در مرورگر نمايش پيدا نمي كند . به صورت نمونه براي اسم نويسنده ويا حق كپي رايت و يا مدل كاراكتر و … .

Css و javascript نیز در head قرار ميگيرند كه سازه به نياز استفاده ميشوند ولی براي جاوااسكريپت ميتوان يك تفاوتهايي در پباده سازی های ماهر قائل شد . به صورت نمونه سورسی که در پباده سازی وبسایت فوق مصرف شده شده‌است را مشاهده نمائید . جاوا اسکریپت در ذیل کاغذ نوشته شده شده‌است .




موادسازنده body :

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

در نصیب بعدي به صورت عملي با نیز يك اینترنت سايت مي سازيم!


ادامه داراست در‌صورتی‌که موردپسند قرار گیرد!


ارسال نظر
نام شما :
آدرس وب سایت :
پست الکترونیک :
پیام شما :
کد امنیتی :