Your address will show here +12 34 56 78
آموزش طراحی وب سایت

سلام خدمت تمامی دوستان و همراهان طرح سوم. در جلسه قبلی آموزش طراحی وب سایت به معرفی و آشنایی با کدهای سورس HTML وب سایت ها پرداختیم . در این جلسه ساختار کلی و تگ های معروف HTML را توضیح می دهیم . امیدواریم تا این جلسه از آموزش طراحی وب سایت با طرح سوم راضی بوده باشید.

ساختار کلی HTML به این صورت می باشد :

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

 

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

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

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

اولين آيتم صفحه بدون فاصله است. اين يك قانون است.

همانطوري كه فايل word 2013 در نمايش در 2000 دچار مشكل مي شود HTML ها با داك تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.

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

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

براي ديدن داك تايپ هاي موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes

غير از داك تايپ ها تمامي عناصر صفحه داخل تگ HTML است كه شامل 2 بخش مي شود head و  body

عنصر HEAD

اين يك تگ container  است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css  و …..

عنصر  title :

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

عنصر meta  :

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

Css و  javascript  هم در  head قرار ميگيرند كه بنا به نياز استفاده ميشوند البته براي جاوااسكريپت ميتوان يك تفاوتهايي  در طراحی های حرفه ای  قائل شد.

عناصر body :

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

خب الان می توانید اولین کد خود را بنویسید و خروجی آن را مشاهده کنید. برای این کار ابتدا ویرایشگر خود را باز کنید و کد بالا را در آن کپی کنید. آن را با پسوند .html پوشه ای که قبلا درست کرده اید ذخیره کنید و با مرورگر خود فایل را باز کنید و خروجی که به شما می دهد تنها یک تگ عنوان و تگ پاراگراف می باشد.

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

<div class=”sampleclass” id=”number1”>text here</div>

همانطور که در کد بالا مشاهده می کنید تگ div تعریف شده است و در داخل آن محتوای متن text here قرار داده شده است. دو ویژگی id و class برای این تگ تعریف شده است که هر کدام مقدارهای خاصی اختصاص داده شده است. این مقدارها در کدهای CSS مورد استفاده است که بعدا در جلسات بعدی آموزش طراحی وب سایت با CSS به آن می پردازیم.

خب کدهای معروفی که در آغاز طراحی وب سایت باید بدانید، کد های زیر است :

Div

A

H1,h2,h3,h4,h5,h6

Img

P

Span

Meta

Link

Script

Ul

ol

Li

Style

تگ های بالا از جمله مهم ترین تگ های طراحی هستند. تگ های زیادی در طراحی وب سایت وجود دارند. ابتدا به معرفی این تگ ها می پردازیم …

تگ div :

این تگ برای وقتی استفاده می شود که می خواهیم چند المان را در داخل یک مجموعه قرار دهیم . بطور مثال این صفحه ای که مشاهده می کنید در قسمت بالای سایت یک هدر سایت قرار دارد در قسمت متن هایی که مشاهده می کنید یک قسمت اصلی سایت است و یک قسمت در پایین وب سایت هست که فوتر نام دارد. تمام این بخش ها را با کد div مشخص می کنیم.

تگ a :

این تگ برای تعریف کردن یک لینک به آدرس خاص استفاده می شود. دقت داشته باشید که برای درج کردن آدرس باید حتما از Attribute خاص ان استفاده کنید که در زیر توضیح داده شده است :

<a href=”http://tarhesevom.com “>click here</a>

در کد بالا یک تگ لینک تعریف شده است که در داخل آن ویژگی به نام href تعریف شده است. این ویژگی دارای مقدار یک لینک به آدرس وب سایت می باشد. با کلیک بر روی این المان لینکی که مقدار آن را وارد کرده اید در داخل صفحه مرورگر باز می شود.

 

تگ h :

تگ های عنوان از h1 شروع می شوند و معمولا تا h6 ادامه دارند. این تگ ها برای مشخص کردن عناوین از متن های پاراگراف قابل استفاده هستند . اختصاص 6 شماره برای این تگ برای این منظور می باشد که میزان اهمیت هر کدام مشخص شود . بطور مثال یک پایان نامه در فصل دوم (که می تواند تگ h1 باشد) دارای موضوعات کلی می باشد که هر کدام در این فصل از پایان نامه بعنوان زیر موضوع فصل مطرح می شوند . این عناوین موضوعات را با تگ h2 مشخص می نماییم و همینطور در لایه های زیرین موضوعات تگ های h3 و … تعریف می شوند.

 

تگ  img :

این تگ برای تعریف یک عکس در صفحه شما کاربرد دارد. فقط دو نکته رو دقت داشته باشید که تگ img تگی هست که پایان ندارد و برای تعریف عکس باید لینک عکس را ویژگی آن قرار دهید. بطور مثال :

<img class=”class1″ src=”http://tarhesevom.com/wp-content/uploads/2018/06/lastlogo.png”>

در کد بالا تگ عکس تعریف شده و برای آن ویژگی های کلاس و سورس عکس تعریف شده است که هر کدام مقدار خود را دارند و لینک عکس در ویژگی سورس تعریف شده است.

 

تگ P :

این تگ برای درج پاراگراف در صفحه استفاده می شود. بطور مثال :

<p>some text here</p>

 

تگ span :

این تگ عموما برای تغییر رنگ و یا فونت قسمتی از یک تگ پاراگراف استفاده می شود . بطور مثال :

<p>I Have <span style=”color:blue”>blue</span> eyes.</p>

در این کد تگ پاراگراف تعریف شده است که در داخل آن می خواهیم یک کلمه رنگ خاصی داشته باشد. آن کلمه با استفاده از تگ span می تواند ویژگی های خاصی داشته باشد که در این قسمت ویژگی style برای آن تعریف شده و در داخل آن مقداردهی برای رنگ المان داده شده است.


تگ meta :

این تگ برای تعریف اطلاعات متا در صفحه تعریف می شود . بعنوان مثال

  <meta name=”description” content=”tarhesevom Web tutorials”>

این تگ متا برای تعریف توضیحات صفحه اختصاص داده شده است. دارای دو ویژگی name و content می باشد.

 

تگ link :

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

<link rel=’stylesheet’ id=’dashicons-css’  href=’http://tarhesevom.com/test.css’ type=’text/css’ media=’all’ />

این تگ به فایلی در وب سایت ارجاع می کند و تمامی کدهای آن فایل را در صفحه بارگذاری می نماید. بعدا با فایل های CSS آشنا می شوید .

تگ script :

این تگ برای درج کدهای  javascript در صفحه کاربرد دارد.

 

<script>

document.getElementById(“demo”).innerHTML = 5 + 6;

</script>

 

با کدهای javascript بزودی آشنا می شوید .

 

تگ  ul :

این تگ برای ایجاد یک لیست استفاده می شود . توجه داشته باشید که بعد از تگ های ul و ol در داخل این تگ ها همیشه تگ های li قرار دارد.

تگ ol :

این تگ نیز برای ساخت یک لیست استفاده می شود با این تفاوت که تگ  ol خروجی کار که همان تگ های li در داخل این مجموعه باشد با بصورت شماره گذاری مرتب نشان می دهد. اما در کد ul تمامی المان های لیست همانند بولت گذار در ورد مشاهده می شوند و دارای عدد برای هر المان لیست نمی باشند.

تگ li :

این تگ در زیر مجموعه تگ های ul و ol کاربرد دارد و برای تعریف المان های لیست در این تگ ها استفاده می شود.

تگ style :

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

 

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

سوال و یا نظرات خود را در پایین این برگه درج کنید ، کارشناسان شرکت طرح سوم آماده پاسخگویی به سوالات شما هستند.

 

0

آموزش طراحی وب سایت
سلام خدمت تمامی دوستان و همراهان طرح سوم؛ تا قسمت های قبل آموزش طراحی وب سایت آشنایی با دامنه و هاست و نرم افزارهای کدنویسی رو یاد گرفتید. در این قسمت وارد کدنویسی طراحی وب سایت می شویم. خب در ابتدا باید این مطلب را بدانید که طراحی وب سایت و کدنویسی آن چند بخش دارد که در این جا قسمت هایی رو معرفی می کنیم بهتون و در کنار شما هستیم تا کاملا یک وب سایت داینامیک را طراحی کنید . قسمت اولی که باید یاد بگیرید کد های HTML است . HTML خلاصه شده Hypertext Markup Language هست . کلیه المان هایی که در این صفجه یا در هر صفحه وبی که مشاهده می کنید تماما کدهای HTML هستند . کدهای HTML همانند ستون های خانه و دیوار های آن هستند که ساختار اصلی وب سایت را تشکیل می دهند . قسمت بعدی کدنویسی ، دستورات CSS که خلاصه شده Cascading Style Sheets هستند که این دستورات اگر بخواهیم همانند سازی کنیم مثل طراحی داخلی و چیدمان وسایل خانه می باشند. طرز قرار گیری متن ها، عرض ها و نحوه قرار گیری منو ها ، رنگ ها و … تمام ساختار گرافیکی که مشاهده می کنید تماما در کدهای CSS تعریف می شوند . در کنار این کد ها دستورات Javascript نیز به کار می آیند تا امکانات تصویری و بعضا کدهایی برای قسمت های مختلف وب سایت در آنها درج کنید. عکس زیر خلاصه ای از این مطلب را نمایش می دهد :
design-web-06.gif
ابتدا به آموزش HTML و تگ های آن می پردازیم و سپس به آموزش کدنویسی CSS . چرا که شروع طراحی با کدهای HTML هستند و برای لباس پوشاندن به این کدها سراغ کدهای CSS می رویم . بعداز یادگیری این کدها سراغ کدهای داینامیک سازی می رویم که زبان برنامه نویسی PHP از این قسمت استارت می خورد . تمام قسمت هایی که می بینید توسط کدهای PHP داینامیک سازی شده اند و قابلیت بروزرسانی ، حذف و ایجاد مطالب و محتواها از داخل Backend سایت مدیریت می شوند. خب برای اینکه کمی با کدهای وب سایت آشنا بشید داخل همین صفحه ای که هستید دکمه های ctrl+U را فشار دهید . صفحه ای که باز می شود شامل تمامی کدهای HTML هست که در این صفحه ایجاد شده اند . در کدهای HTML ساختار خاصی وجود دارد که طبق این ساختار دستورات خوانده می شوند و برای کاربر به نمایش گذاشته می شوند . این ساختار همانند بدن انسان می باشد. یعنی کدهای HTML دارای یک مجموعه تگ بنام HTML هستند که داخل این تگ دو زیر مجموعه تگ HEAD و BODY وجود دارد . می توانید در صفحاتی که کدهای آن را باز می کنید این تگ ها را پیدا کنید. خب اصلا تگ چیست !؟ تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد. بطور مثال تگ HTML به این صورت نوشته می شود :اگر اندکی دقت کنید تمامی تگ ها تکرار می شوند و علامت / در کنار آنها در پایین تر قرار می گیرد. یعنی تمامی تگ ها با علامت <> شروع می شوند و با علامت </> بسته می شوند. می توانید در پایین صفحه بروید و پایان تگ را مشاهده کنید. خب تگ ها فقط به این چند نمونه تگ HTML ، BODY و HEAD ختم نمیشه. خیلی تگ های زیادی در طراحی وب سایت هست که یادگیری آنها بسیار واجب هست. تگ های معروف شامل تگ های عنوان به نام های h1,h2,h3,h4,h5,h6 هستند که تمامی این ها تگ های عنوان متن ها هستند. متن ها عموما در داخل تگ <p> قرار می گیرند . تگ های <div> نیر برای تعریف قسمت های مختلف وب سایت که تمام در داخل آن مجموعه تعریف می شوند کاربرد دارد. در آینده به معرفی تمام این تگ ها می پردازیم.
خب برای این جلسه فعلا فقط کافی است چندین وب سایت را باز کنید و با فشار دادن دکمه های CTRL+U کدهای سورس صفحه وب را مشاهده کنید. همین ! در قسمت های بعد به معرفی این تگ ها بصورت کامل می پردازیم . اگر سوالی داشتید در قسمت نظرات بپرسید تا در اسرع وقت کارشناسان ما جواب را ارسال کنند. 
0