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

آموزش طراحی وب سایت | جلسه پنجم | شروع HTML

سلام خدمت تمامی دوستان و همراهان طرح سوم. در جلسه قبلی آموزش طراحی وب سایت به معرفی و آشنایی با کدهای سورس 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 به این مبحث بطور کامل می پردازیم .

 

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

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

 

نویسنده


Avatar

مهرداد کشمیری

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