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

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

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

طبق قولی که داده بودم ، آموزش طراحی وب رو از پایه شروع میکنم. خب یک سوالی که ممکنه توی ذهن خیلی ها بوجود بیاد اینه که برای طراحی وب از چه نرم‌افزارهایی استفاده میکنیم. من یک سری برنامه خدمتتون معرفی میکنم که اینهارو میتونید خیلی راحت گیر بیارید و نصب کنید. برای طراحی ظاهر سایتها معمولا از برنامه‌ی فوتوشاپ استفاده میکنیم. این نرم‌افزار خودش خدائی هست توی بحث گرافیک. حجمش بالاست و دانلودش کار راحتی نیست. توی خیلی از مجموعه های نرم افزاری موجود در بازار هم پیدا میشه. خب برای نوشتن کدهامون از برنامه های مختلفی میتونیم استفاده کنیم. به عنوان مثال برنامه هایی مثل دریم وی ایور ( Dreamweaver ) ، یا پی اچ پی دیزاینر و یا از همه ساده تر ، نُت پَد ۲ استفاده کنید. نُتپد دو خوبیش اینه که همه زبونهای برنامه نویسی رو پشتیبانی میکنه و جالبه که متن‌باز هست و فارسی هم هست! البته باید زبان فارسیش رو دانلود و نصب کنید. خیلی سادست. من همین رو پیشنهاد میکنم. خُب حالا میریم سره اصل مطلب.برای اینکه بتونیم وب‌سایت رو طراحی کنیم ، همونطور که قبلاً گفتم باید ابتدا زبان اچ تی ام ال ( HTML ) رو بلد باشیم. HTML خلاصه شده‌ی Hyper Text Markup Language هست. اچ تی ام ال یک زبان برنامه نویسی نیست. بلکه یک زبان نشانه گذاریست که از تگ‌ها به عنوان اجزای سازندش استفاده میکنه. یعنی مثلا از یک تگ ِ کاملا مشخص ، همیشه برای رسم جدول استفاده میکنیم ، یا از یک تگ مشخصه دیگه ، برای ایجاد فرم یا تیتر ، پاراگراف ، منوی آبشاری و …. استفاده میشه. با استفاده از اچ تی ام ال ، به وب سایتمون ساختار و شکل میدیم. میشه گفت دقیقا همون کاری رو میکنه که اسکلت یک ساختمون در حال ساخت انجام میده. انشالله توی متنهای بعدیم ، جلوتر میریم و میبینیم که چطور به این به اصطلاح اسکلت ، مما و رنگ و حالت میدیم. تگها در این زبان بین دو علامت قلاب مانند قرار میگیرن و معمولا به صورت جفت هستند. به مثالهای زیر توجه کنید:

<html></html>

<body></body>

<table></table>

<pre></pre>

<p></p>

<h1></h1>

همونطور کی میبینید ، همه‌ی این تگها ، به صورت جفتی آمدن. طریقه‌ی کار هم به این طورته که ما ابتدا تگ رو باز میکنیم   <p> و سپس میبندیمش<p/>. هرچیزی که بین این باز و بسته شدنه تگ قرار بگیره ، از چارچوبهایی که برای تگ تعریف شده تبعیت میکنه. تگها گاها میتونن تودرتو باشند. یعنی میتونیم در تگ p که بیانگر پاراگراف هست ، تگهایی برای تعریف تصویر ، تیتر ، جدول و … داشته باشم که ممکنه هرکدوم از اون تگها درونشون از تگهای دیگه ای بخوایم استفاده کنیم.

زمانی که یک صفحه وب رو طراحی میکنیم ، ابتدا باید به مرورگری که میخواد این صفحه رو به نمایش در بیاره ، بگیم که از چه زبان نشانه گذاری استفاده کردیم ، چه نسخه ای از اون زبان و یک سری اطلاعات جانبی دیگه که به مرور زمان یاد خواهیم گرفت. همونطور که در کدهای پائین میبینید ، ما در خط اول به مرورگر میگیم که داریم از زبان HTML نسخه‌ی ۴٫۰۱ استفاده میکنیم. نترسید. لازم نیست اینها رو به خاطر بسپرید. اگر از برنامه هایی مثل دریم وی ایور استفاده کنید ، وقتی یک سند جدید HTML بوجود میارید ، بسیاری از کدهایی که نیازهست رو خودش از قبل براتون نوشته. من نمونه هایی رو جهت معرفی در پائینه متن آوردم. ببینید:
برای HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

برای HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

برای HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

خب صفحات اچ تی ام ل رو با تگ HTML شروع میکنیم. و توی اون ، دو بخش اصلی و اساسی داریم. بخش اول مربوط به مرورگر و اعضای بسیار مهمی میشه که با تگ head تعریفش میکنیم. در این بخش ، اطلاعاتی مانند عنوان سایت رو قرار میدیم. بخش دوم که با تگ body تعریف میشه ، محتوائی هست که در صفحه ی مرورگر کاربران به نمایش در خواهد آمد. برای شروع یک پوشه توی کامپیوتر محترمتون درست کنید که از این به بعد ، توی این پوشه تستهامون رو انجام بدیم. یادمون باشه که فایلهای اچ تی ام ال رو با پسوند html ذخیره میکنیم. مثلا index.html یا web.html یا هر اسمی که دلتون میخواد ؛ اما با پسوند html !

فایلی با این نام درست کردم: index.html کدهای زیر رو که توضیحاتی دربارشون خواهم داد درونش کپی کنید و ذخیره کنید. سپس روی فایل دوبار کلیک کنید و خواهید دید که فایل با مرورگرتون ( اینترنت اکسپلورر یا فایرفاکس یا … ) باز خواهد شد.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>عنوان سایت</title>

</head>

 <body>

 <h1>عنوان متن شماره یک</h1>

<p>اولین پاراگراف من در وب</p>

 </body>

</html>

در خط شماره یک ، همونطری که قبلا هم گفتیم ، باید داکتایپ مناسبی ارائه بدیم. در خط دوم ، با تگ html ، شروع کردیم. یعنی داریم همونطور که توی داکتایپ گفتیم که میخوایم html بنویسیم ، حالا هم شروعش کردیم. در خط چهارم ، تگ head رو باز کردیم و در خط هشتم بستیمش. بین این تگ ، عنوان سایت رو با تگی به نام title آوردیم. توی خط دهم تگ body رو شروع و در خط هجدهم بستیمش. میبینیم که بین این تگ ، ما از دو تا تگ h1 و p استفاده کردیم. تگ h1 بیانگر مهمترین عنوان متن ما هست و p تشکیل دهنده‌ی یک پاراگراف. تگ h1 که برگرفته از headline 1 هست ، مهمترین عنوان در صفحه رو تشکیل میده. ما میتونیم به کرات از این تگ استفده کنیم. ولی برای عنوانهایی که اهمیت اونها کمتر از بقیه عنوانهاست ، میتونیم از تگهای h2 یا h3 استفاده کنیم.

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

<a href="http://www.activemind.ir">این یک لینک است</a>

<a title="نمایش متن وقتی که موس روی لینک قرار میگیرد" href="http://www.activemind.ir">این یک لینک است</a>

<a target="_self" href="http://www.activemind.ir">این یک لینک است</a>
در این لینک وقتی روی اون کلیک میشه ، همین صفحه رو به صفحه جدید منتقل میکنه

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

عناوین
<h1>This is a heading</h1>
 <h2>This is a heading</h2>
<h3>This is a heading</h3>

پاراگراف
<p>This is a paragraph</p>
<p>This is another paragraph</p>

استفاده از افزونه ها در المنتها
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>

درج تصویر
<img src="url" alt="some_text"/>

رسم جدول
<table border="1">
 <tr>
 <td>ردیف اول ، سلول اول</td>
 <td>ردیف اول ، سلول دوم</td>
 </tr>
 <tr>
 <td>ردیف دوم ، سلول اول</td>
 <td>ردیف دوم ، سلول دوم</td>
 </tr>
 </table>

لیستهای شماره دار
<ul>
 <li>محمد رشیدی</li>
 <li>سعید اسماعیلی‌فرد</li>(این نام مشمول قانون کپی رایت است )
 </ul>

لیستهای بدون شماره
<ol>
 <li>محمد رشیدی</li>
 <li>سعید اسماعیلی‌فرد</li> (این نام مشمول قانون کپی رایت است )
 </ol>

فرم و اجزای آن:
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50"  />
 <input type="password" />
 <input type="checkbox" checked="checked" />
 <input type="radio" checked="checked" />
 <input type="submit" value="Send" />
 <input type="reset" />
 <input type="hidden" />

 <select>
 <option>Apples</option>
 <option selected="selected">Bananas</option>
 <option>Cherries</option>
 </select>

<textarea name="comment" rows="60" cols="20"></textarea>

 </form>

خب از این المنتها ، با توجه به توضیحاتی که دادم ، میتونید توی تگ body استفاده کنید. برای اینکه این موضوع ملموستر بشه ، لطفا کدها رو بین دو تا تگ Body قرار بدید و پس از ذخیره کردنش ، با مرورگرتون ببینید که چه چیزی تولید شده. فعلا با همین تمرین هایی داشته باشید. اگر هم سوالی بود بنده در خدمتم. توی نظرات بپرسید. انشالله جلسه بعدی زبان xhtml رو شروع میکنیم. چون کلا ما این زبان html رو آموزش دادیم که شما با زیرساختها آشنا بشید.

موفق و پایدار باشید.
با احترام ، محمد رشیدی

تمرکز موضوع: ,, نوشته شده در: ۲۴ مرداد ۱۳۸۹

درباره محمد رشیدی

من یک کارآفرین خلاق و جوان هستم. تحصیلات، تخصص و فعالیتم در حوزه وب و تجارت الکترونیک است. عاشقانه و با تمام وجود در این زمنیه تلاش و فعالیت میکنم. تفکری بلندمدت دارم. به کیفیت به شدت اهمیت میدهم. به عنوان یک مخاطب به موسیقی هم خیلی علاقه دارم. در ابعاد مختلف وب، برنامه نویسی حرفه‌ای میکنم و در سالهای اخیر، بخش بسیار زیادی از مطالعاتم در زمینه کسب و کار، داده کاوی، وب اپلیکیشن، طراحی رابط کاربری، کاربردپذیری و تجربه کاربر قرار گرفته است.
نظرات و دیدگاهها (13)
  1. مرسی که به قولتون عمل کردید و به این خاطر وقت گذاشتید . واقعا ممنون.
    متن را کامل نخوندم چون متون آموزشی را باید با دقت زیادی خوندش ، انشاالله فردا کامل و با دقت می خونم و نظر در مورد خود متن می دهم ولی در نگاه کلی قلم روان و زیبایی دارید خیلی خوب می شه باهاش ارتباط برقرار کرد

    خیلی ممنون از توجه شما

  2. سلام آقای مهندس
    ممنون که اطلاعاتتون را در اختیار ما قرار می دهید.من تازه می خواهم طراحی وب را شروع کنم. این کدها را باید در notpad2 (به پیشنهاد شما) وارد کنم؟من خیلی عجله دارم آموزشهای بعدیتون را کی می تونم استفاده کنم؟ اگر ممکنه من را راهنمایی کنید که چه کتابی را بخوانم یا چه دوره ای بروم و چه سایتهایی به من کمک می کنند؟
    کمال تشکر را از شما دارم.

    • سلام. وقت بخیر.
      من این آموزشها رو ادامه ندادم. چون واقعا سورسهای خیلی خوبی در اینترنت موجوده. برای همینم، به شما معرفی میکنم. شما با خوندن این متن، و احتمال متن قبلی (http://www.activemind.ir/design/i-want-to-be-a-web-designer-how-should-i-start.html) متوجه شدید که چه مسیری پیش روی شماست. بنا بر این، بهتره که در این مسیر گام بردارید:

      در خصوص طراحی سایت، به نظرم بهتره که یکم موضوع رو از الان روشن کنیم. ما دو مقوله اصلی و اساسی داریم یا بهتره بگم، نقشه مسیر اینه:

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

      • کدنویسی سمت کاربر ( استاتیک ) ( XHTML & CSS & JS )
      • کدنویسی سمت سرور ( داینامیک ) ( PHP, ASP )

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

      در بحث طراحی وب سایت، میتونید به یادگیری نرم افزارهایی مثل فوتوشاپ بپردازید و در کنارش، مفاهیمی مثل Usability و User Experience رو مطالعه کنید تا بتونید یک طراح واقعی وب باشید.

      در بحث کد نویسی و پیاده سازی وب سایت، بهتره برای شروع، از الان به این ترتیبی که میگم، مطالعه داشته باشید:

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

  3. باعرض سلام وخسته نباشید
    مطالب قابل توجهی روبیان کردین .اینکه خود ما بریم دنبال سوال ودنبال یادگیری واقعا باسواد میشیم.من هم این روش رو دارم .ولی یه سوالی که هست:وقتی خودمون میریم دنبال سوال،ودراینترنت جواب پیدانمیکنیم وازکسی میپرسیم واقعابه جای اینکه جواب درست بده دنبال هدف ماازسوال پرسیدنه.یااینکه به دنبال اینه بدونه ازکجا شروع کردیم.چی شد که این سوال ایجاد شد.باسوال وجواب های بیهوده سرعت پیشرفت رو ازما میگیرن ،چه کنیم؟؟؟

    • به نظرم، بهتره که یک پروژه رو برای خودتون در نظر بگیرید. یه سایتی که دوست دارید داشته باشید. هرچقدر هم سخت باشه، بهتره. بعد برید دنبالش تا یاد بگیرید. اینجوری بهترین راه یادگیری هست. چون هم اشتیاق به یادگیری دارید، هم اینکه با توجه به هدفتون و پروژه، سوالاتی پیش میاد که هم میتونید سرچ کنید، هم اینکه از دوستانتون بپرسید. کسی هم که وقتی سوالی میپرسید شما رو میپیچونه یا جواب نمیده، یا سواد نداره، یا مشکل داره. وقتی سوالاتتون به دنیای واقعی نزدیک باشه، زیاد نیاز به سوال کردن از افراد ندارید. در اینترنت همه چیز موجوده.
      موفق باشید

  4. فکر میکنم اساساهم که سرعت ما دریک کاری گرفته میشه،به دلیل اینه که ساختار مشخصی رومدنظرنداریم.اگر سوالات رو درقالب یه پروژه بیان بشه هم برای مطرح نمودن وهم یرای جست وجوکردن جوابش اراده داریم.وباوجودسختی هایش بیش تر مشتاق پیگیری میشیم…
    ولی واقعازمینه وب به جهت سنگین وپرمحتوا بودن گاهی ترسناک میشه البته این ترسناکی نشانه ضعف نیست.
    بالکه نشان از قشنگی زمینه وب هست که مسلماپشت کارواراده استواررومیطلبد…

پاسخ دهید

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


*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>