دوره آموزشی آنلاین و رایگان طراحی وبسایت بخش دوم

آموزش رایگان و آنلاین طراحی وبسایت

جلسه دوم : سایت زوم تک با همکاری سایت زوم لینک و صفحه دانستنی های کامپیوتر اقدام به برگزاری دوره آموزشی آنلاین و رایگان طراحی وبسایت نموده است ، در این دوره آموزشی با مباحث پایه طراحی وبسایت آشنا خواهیم شد.

آموزش رایگان و آنلاین طراحی وبسایت
آموزش رایگان و آنلاین طراحی وبسایت

برای شروع دوره آموزشی ابتدا باید با نکات ابتدایی و ابزار مورد نیاز برای طراحی وبسایت آشنا بشیم ، برای این مورد جلسه نخست این دوره در سایت زوم لینک برگزار شده ، برای مطالعه مباحث مقدماتی پیشنهاد می کنیم جلسه اول رو از سایت زوم لینک (کلیک کنید) مطالعه کنید.پس از مطالعه بخش نخست مباحث جلسه دوم رو شروع می کنیم ، در جلسه دوم شما اولین صفحه اینترنتی خودتان را طراحی خواهید کرد. در این جلسه شما با XHTMl آشنا خواهید شد و اولین صفحه اینترنتیتان را خواهید ساخت. برای یادگیری طراحی وبسایت شما باید سه لایه زیر را یاد بگیرید:

– Java Script به عنوان لایه رفتار

– Css به عنوان لایه نمایش

–  HTML به عنوان لایه محتوا

شما با یادگیری این سه مورد می تونید به طراحی وبسایت بپردازید ! جالب هست نه؟ خوب بریم سراغ ادامه آموزش :
اچ تی ام ال به عنوان لايه محتوایي وبسایت عمل می کندبرای بهتر فهمیدن موضوع وبسایت را به یک ماشین تشبیه کنید که اچ تی ام ال بدنه ماشین خواهد بود و شامل تگ هاي متفاوتي مي باشد. Css به عنوان لایه نمايش وبسایت عمل می کند كه به عناصر HTML شكل و ظاهر مناسب  مي دهد و اما Jacva Script این لايه در بحث طراحی وبسایت لایه رفتار نامیده می شود كه به صفحات سایت حركت و پويايي مي دهد.
دراین  دوره آموزشی  ما سعی می کنیم دو لايه  HTML و  CSS را به شما آموزش دهیم ، البته پس از پایان این دوره در مباحث پیشرفته سعی میکنیم به جاوا اسکریپت هم بپردازیم.

حالا می خواهیم به مطالبی در مورد کد نویسی ها بپردازیم ، برای این کار ابتدا می خوام شما رو بصورت عملی با کدها روبرو کنم ، هم اکنون وبسایتی که شما در اون این دوره آموزشی رو میگذرونید از کد هایی تشکیل شده ، من می خوام روشی رو برایتون آموزش بدم که سورس کد های سایت ما رو ببینید ، برای این کار روی قسمت خالی سایت زوم تک جایی که تصویری نیست راست کلیک کنید و حالا روی view page source یا view source کلیک کنید پنجره ای باز می شود که سورس کدهای سایت رو برای شما نشون خواهد داد. من در تصویر زیر همین کار رو انجام دادم:

view page source
view page source

عناصر اصلی یک صفحه HTML بصورت زیر است :

 یک تگ  DocType
یک تگ    <html>
یک تگ     <head>
یک تگ      <title>
یک تگ    <body>

خوب چرا منتظرید ، این تگ ها رو در view page source پیدا کنید . من پیدا کردم جاشونو در تصویر زیر براتون نشون می دم :

آموزش آنلاین طراحی وب

حالا می خوام یک نمونه کد که شامل عناصر اصلی یک صفحه اینترنتی است رو برای شما نشون بدم.

[box type=”Note” align=”aligncenter” ]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”>
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type   content=”text/html; charset=utf-8″/>
</head>
<body>
</body>
</html>

[/box]

حالا وقت آشنایی با تک تک این عناصر اصلی صفحه اینترنتی است ، از داک تایپ DocType  : Document Type Definition   شروع می کنیم ، این عنصر اولین عنصر صفحه هست همیشه بدون فاصله و موارد اضافی این یک قانون است !  داک تایپ در حقیقت نوع متن شما رو براساس ورژن HTML نشان می دهد ، همانطور که شما فایلی را در ورد 2010 نوشته و ذخیره می کنید ، اگر این فایل را در نرم افزار آفیس 2000 باز کنید ، نرم افزار قادر به اجرای فایل شما نیست در برنامه نویسی هم سعی می کنیم این موارد را رعایت کنیم .
در واقع اين داك تايپ است كه به مرورگر مي گويد اين برنامه نوشته شده از چه نوعي است و بايد به چه ترتيب Render شود . نحوه Render و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود. پس نگران نباشید در ادامه به این مباحث هم خواهیم پرداخت. در سطح مقدماتی نیازی به فهمیدن این موارد نیست!
داك تايپ ها هم در طول زمان به وجود مي آيند يعني مانند ورد نوع هاي جديدي روي قبلي ها ارائه می شود و ورژن های جدید جای قبلی ها را می گیرد  مانند HTML5  كه به تازگي مطرح شده است و جایگزین HTML های گذشته خواهد شد. برای مشاهده انواع مختلف داک تایپ می تونید به لینک reference.sitepoint.com/html/doctypes مراجعه کنید.

بیشتر بخوانید  مخفی کردن حالت آنلاین در اینستاگرام

[box type=”note” align=”aligncenter” ]

<!DOCTYPE  html  PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”>
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”></html>

[/box]

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

خوب بریم سراغ عناصر دیگر HTML :

البته قبل از رفتن به سراغ عناصر ابتدا باید با تگ آشنا بشیم ، تگ ، اسم یا کلمه ای است كه ميان اين دو  <> علامت قرار میگيرند و نام تگ همان متني است كه بين اين دو <> می باشد.

مثلا به نوشته <html> ، تگ اچ تی ام ال می گویند ، تگ ها دارای ویژگی های مختلفی هستند ، ویژگی یا attribute !

[box type=”note” align=”aligncenter” ]

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

[/box]

یکی از دستور ها و یا بقولی ویژگی ها در اچ تی ام ال  dir است dir يك نام  attribute است و rtl  ، value (مقدار) آن است كه بين ” ” قرار گرفته است. نکته داخل پرانتز :  rtl  برای نشان دادن راست چین بدون یک عنصر مورد استفاده قرار می گیرد.

تگ ها از دو مورد container و empty  تشکیل می شوند .تگ هاي container شامل يك تگ بازشونده و يك تگ بسته شونده هستندبرای مشاهده یک مثال به کد های بالا توجه کنید HTML  باز شده و بسته شده است. تگهاي empty  هم متفاوت هستند ه مثال های زیر توجه کنید:

[box type=”note” align=”aligncenter” ]

<img src=”images/test.jpg” alt=”test” /> <br/>

[/box]

تگ هاي empty  را مي توان به صورت container استفاده كرد اما در داك تايپ هاي xhtml این پیشنهادرو میدم بهتون كه تگ هاي empty را به همان شكل empty  بنويسيم ،در هنگام استفاده از تگ ها به این نکته توجه کنید كه از چه نوعي هستند تا کدهای شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty  بنويسيد، دچار error میشوید. یک نکته رو براتون مطرح کنم برای آموزش بهتر طراحی وب و در کل برنامه نویسی سعی کنید ، از منابع انگلیسی هم استفاده بکنید ، سخت نیست ، تنها کافی هست برای استفاده از اطلاعات دسته اول سوالاتتون رو در اینترنت جستجو کنید ، برای شروع برای یافتن اطلاعات بیشتر در مورد empty tag in html در گوگل جستجو کنید !

خوب برای این جلسه کافی هست در جلسه آینده با تگ های head و  body آشنا خواهیم شد. منتظر جلسه آینده باشید.

به این پست امتیاز بدید

نظرات در مورد : دوره آموزشی آنلاین و رایگان طراحی وبسایت بخش دوم

5 دیدگاه

دیدگاهتان را بنویسید

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