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

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

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

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

برای شروع دوره آموزشی ابتدا باید با نکات ابتدایی و ابزار مورد نیاز برای طراحی وبسایت آشنا بشیم ، برای این مورد جلسه نخست این دوره در سایت زوم لینک برگزار شده ، برای مطالعه مباحث مقدماتی پیشنهاد می کنیم جلسه اول رو از سایت زوم لینک (کلیک کنید) مطالعه کنید.پس از مطالعه بخش نخست مباحث جلسه دوم رو شروع می کنیم ، در جلسه دوم شما اولین صفحه اینترنتی خودتان را طراحی خواهید کرد. در این جلسه شما با 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 نشان می دهد ، همانطور که شما فایلی را در ورد ۲۰۱۰ نوشته و ذخیره می کنید ، اگر این فایل را در نرم افزار آفیس ۲۰۰۰ باز کنید ، نرم افزار قادر به اجرای فایل شما نیست در برنامه نویسی هم سعی می کنیم این موارد را رعایت کنیم .
در واقع این داک تایپ است که به مرورگر می گوید این برنامه نوشته شده از چه نوعی است و باید به چه ترتیب 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 نظرات

ارسال نظر

Time limit is exhausted. Please reload CAPTCHA.