تبلیغات
برترین وبلاگ آموزش برنامه نویسی - جلسه دوم آموزش html-
 
برترین وبلاگ آموزش برنامه نویسی
درباره وبلاگ


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

مدیر وبلاگ : محمدرضا اسماعیلی
موضوعات
نظرسنجی
سطح تدریس در این وبلاگ چگونه است؟







آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
بسم الله:

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

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

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

مسلما برای ایجاد و طراحی صفحه وب باید کد بنویسیم...

پایه صفحه ی وبمون رو(از این به بعد به صفحه وب میگم صفحه تا راحت باشیم)

کد زیر تشکیل میده:

<html>

<head>

<head/>

<body>


<body/>

<html/>

اگه دقت کنید میبینید که اینجا ما چهار تا تگ داریم(tag)...هر تمام کد های ما بین دو تگ html

 قرار میگیره...منظورم از دو تگ html اینه....تگ شروع <html>  و تگ پایان <html/>...اگه

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

نرم افزار note pad رو باز کنید و توش کد های زیر رو بنویسید:

<html>
<head>
<head/>
<body>
!hello world
<body/>
<html/>
بعد صفحه رو به اسم web1.html ذخیره کنید...پیشنهاد میکنم یه پوشه توی هر جایی که

 خواستید درست کنید و تمام فایل های تمرینتون رو اونجا ذخیره کنید..

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

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

 باز میکنه و اون گوشه hello world نوشته..

شما تونستید اولین صفحه وبتون رو بسازید...
برای راحتی کارتون یه ترفندی رو بهتون میگم...مرورگرتون رو ببندید..برنامه نوت پد رو هم ببندید...

برید جایی که صفحه رو ذخیره کردید...روی صفحتون دو بار کلیک کنید تا مرورگر بازش کنه...حالا روی فایلتون (همون صفحه web1.html) کلیک راست کنید و روی گزینه edit کلیک کنید..نوت پد صفحتون رو باز میکنه...حالا بجای hello world بنویسید abcdefg....حالا ctrl+s رو فشار بدید(یا از منوی file توی نوت پد گزینه save رو انتخاب کنید)..حالا برگردید به مرورگرتون و صفحه رو reload کنید..(f5 رو فشار بدید)..میبینید که تغییرات اعمال میشه..از این به بعد هم نوت پد و هم مرورگرتون رو باز نگه دارید و اینطوری کد بنویسید...

خیلی خوب..بریم سراغ چند تا تگ دیگه:

abcdefg این کد رو بنویسید...<b>abcdefg</b> رو قرا بدید...صفحه رو ذخیره کنید و مرورگرتون رو reload کنید...میبینید که نوشته ها ذخیم(زخیم...ضخیم...ظخیم) تر میشن..پس

 فهمیدید که هر نوشته ای بین تگ <b> قرا بگیره ضخامتش بیشتر میشه...

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

<i>
.....................
<strong>
.................
<h1>
.............
<h2>
...................
<h6>
.................
<pre>
..................
<area>
............
<article>
..............
<blockquote>
...............
<cite>
............
<em>
.............
<"hr size="10>
....................
خوب فعلا این تگ رو ببینید و تمرین کنید..نترسید یه موقع..فقط برا آشناییه...وگرنه شاید از نصفشون هم استفاده نکنیم...

یه چیزی رو همینطوری بهتون میگم...برا ده جلسه بعده ولی ببینیدش..بد نیست..

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

کد بالا رو توی نوت پد بین دو تگ body بنویسید و صفحه رو ذخیره کنید و نتیجه رو ببنیید...

خیلی خوب.....تمرینا یادتون نره...به امید دیدار...





نوع مطلب :
برچسب ها :
لینک های مرتبط :

       نظرات
بیست و نهم مهر 93
محمدرضا اسماعیلی
بیست و هشتم شهریور 96 04:15 ق.ظ
Wow, this piece of writing is good, my younger sister is analyzing
such things, therefore I am going to tell her.
سیزدهم مرداد 96 02:05 ب.ظ
At this time I am ready to do my breakfast, afterward having my breakfast coming
again to read other news.
سوم مرداد 96 08:52 ب.ظ
Thanks designed for sharing such a fastidious opinion, piece of writing is pleasant, thats why i have read it fully
بیست و پنجم اردیبهشت 96 02:43 ق.ظ
Hey very nice blog!
محمدرضا اسماعیلیhttp://www.mreweb.ir/
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر