انجمن پارسی لند
بازگشت   پارسی لند > برنامه نویسی > PHP, ASP & ASP.Net, Html, Css, Perl, Python > Html

سایت پارسی لند | Parsiland Forums




  

آموزش html 9 دی 1387   #1 (لینک)
GodMaster


GodMaster آواتار ها

Administrator
 
GodMaster آنلاین نیست.

آموزش html آموزش html

آموزش HTML (بخش اول)
تاريخچه
در سال 1992 در دانشگاه مينه سوتا سيستمی به نام web به وجود آمد که دارای دو ويژگی خاص بود.
1.Graphic, Multi Media
2.Hyper Text (فقط کليک کردن و در سايت حرکت کردن )
صفحات اين سيستم توسط برنامه ای به نام HTML ساخته شد.
همچنين برای رد و بدل کردن اطلاعات:


(HTTP ( Hyper Text Transfer Protocol
HTML Web page


•HTML يک text عادی و در حقيقت زبانی برای مارک کردن فايلهای text به يکديگر می باشد که آن را با TAG مشخص کرده و به صورت < tag name > می نويسند.

فرمت کلی يک فايل HTML:
يک فايل HTML از دو بخش Body و Head ،تشکيل می شود. شکل ساده يک فايل HTML به صورت زير است.


< HTML >
< HEAD >
< TITLE > This is the title< /TITLE >
< HEAD/ >

This is the body
< BODY/ >
< HTML/ >


نمايش صفحه ای که دارای HTML بالاست...
همان طور که می بينيد، در بالای صفحه حاصل،متن نوشته شده در قسمت Title و در بدنه اصلی صفحه متن ما نوشته شده است.

تگ HEAD
در برچسب HEAD از برچسب به نامهای TITLE و BASE و META استفاده می شود.


< HEAD >
< TITLE > < /TITLE >
< META > < /META >
< BASE >
< HEAD/ >


TITLE:
برای تعيين لقب صفحه (چيزی که در قسمت Status Bar ديده می شود
META:
1- برای تعيين نام و منبعی که برنامه توسط آن نوشته شده.
2- بهنگام کردن صفحات web توسط اين برچسب انجام می شود.
3- انتقال به يک صفحه ديگر web در زمان معيين.
مثال برای حالت اول: در اين حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و google و ...) از META استفاده می کنيم:


< META name="keyword"{اجباری} content="Hedayat, students,zahiri,yaghoubi,schoolnet") >
< META name="description"{اجباری} content="This is Hedayat high school" >


مثال برای حالت دوم و سوم:


< META name="vali "{دلخواه} http_equiv="refresh" content="زمان بر حسب ثانيه" >


با اين برچسب صفحه web بعد از 1 دقيقه بهنگام (refresh) خواهد شد.
در مثال بالا اگر در قسمت content به صورت زير عمل کنيم صفحه web بعد از 60 ثانيه به http://www.parsiland.com خواهد رفت:


Content="60; URL= http://www.parsiland.com"


BASE:
برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.


< BASE href="آدرس" >
< BASE href="http://www.schoolnet.ir/~zahiri/index.htm" >


نکته مهم: در برنامه نويسی HTML برچسب ها به دو صورت با پايان و بی پايان نوشته می شوند.
1.< TAG >…………………………………< /TAG > با پايان
2.< TAG > بی پايان


تگ BODY
قسمت دوم يک فايل HTML را Body تشکيل می دهد که دارای Attributeهای زير می باشد.

< BODY bgcolor = “رنگ پس زمينه صفحه”
background = “آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گيرد. “
topmargin = “يک فضای خالی بالای صفحه بر حسب پيکسل ايجاد ما کند”
leftmargin = “يک فضای خالی سمت چپ صفحه بر حسب پيکسل ايجاد ما کند”
text ="color” رنگ متن را مشخص می کند
link = “color”


alink = “color” ( active link)
vlink = “color” ( visited link) >



این مطلب با زحمات کاربرای این سایت جمع آوری شده است
اخلاق حکم می کند در صورت برداشت از سایت منبع را ذکر کنید!

__________________



ویرایش توسط GodMaster : 9 دی 1387 در ساعت 04:02.
 

آخرین ارسال GodMaster
موضوع انجمن آخرین نویسنده پاسخ نمایش تاریخ آخرین نوشته
دانشمندان mit ابزار پیش‌بینی تعاملی مبتنی‌بر یادگیری ماشین توسعه دادند دانشمندان کامپیوتر GodMaster 0 205 12 تیر 1398 12:22
3 ترفند جالب تفریحی در کامپیوتر برای سرگرمی و شوخی با دوستان ترفند هاي ويندوز GodMaster 0 192 12 تیر 1398 12:17
بررسی لومیکس g9 پاناسونیک دوربین عکاسی پاناسونیک GodMaster 2 209 12 تیر 1398 12:08
Fedora Workstation 30 x86/x64 لینوکس فدورا لينوكس GodMaster 0 208 12 تیر 1398 12:03
Kali Linux 2019.2 سیستم عامل تست نفوذ کالی لینوکس لينوكس GodMaster 0 29 12 تیر 1398 12:02
openSUSE 42.3 x64 + 15.1 x64 توزیع لینوکس لينوكس GodMaster 0 46 12 تیر 1398 12:00
دانلود درایور پرینتر Samsung SCX-3200 درایور پرینتر GodMaster 0 223 12 تیر 1398 11:57
درایور HP LaserJet Pro MFP M130 - اچ پی درایور پرینتر GodMaster 0 85 12 تیر 1398 11:55
دانلود درایور EPSON Perfection 3200 درایور سخت افزار ها GodMaster 0 45 12 تیر 1398 11:54
دانلود درایور برای اسکنر EPSON Perfection 1670 درایور سخت افزار ها GodMaster 0 37 12 تیر 1398 11:53


آموزش html 9 دی 1387   #2 (لینک)
GodMaster


GodMaster آواتار ها

Administrator
 
GodMaster آنلاین نیست.


آموزش HTML (بخش دوم)

آشنايي با برخي تگها
Font:
با اين برچسب می توانيم مشخصات متن را به دلخواه خود درآوريم و فرمت کلی آن به صورت زير است.

< FONT> ........< /FONT >
اين تگ دارای Attributeهای زير می باشد:
1.color: رنگ متن
2.size: اندازه متن
3.face: نوع متن
مثال: می خواهيم کلمه Schoolnet را با فونت نازنين و با اندازه normal و رنگ آبی بنويسيم.
< HTML >
< HEAD >
< / HEAD >

< FONT size = "3" color ="blu e" > Schoolnet < /FONT >
< /BODY >
< /HTML >
نمايش صفحه ای که دارای HTML بالاست...
همانطور که می بينيد متن ما به رنگ آبی درآمده و اندازه آن نيز 3 شده است.

نکته: اگر بخواهيم اندازه را نسبی مشخص کنيم يعنی نسبت به آنچه که قبلا بوده به صورت زير عمل می کنيم:
Size = +2
BOLD:
اول و آخر متن مورد نظر قرار گرفته و آنرا Bold می کند.
< B > text … < /B >
ITALIC:
اول و آخر متن مورد نظر قرار گرفته و آنرا Italic می کند.
< I > text … < /I >
UNDERLINE:
اول و آخر متن مورد نظر قرار گرفته و آنرا Underline می کند.
< U > text … < /U >
ANCHOR:
در HTML بوسيله تگ < a > … < /a > می توانيم يک متن يا عکس را به صفحه ای ديگر پيوند دهيم (Hyper link).مهمترين Attribute در اين تگ، href می باشد.
فرمت کلی اين تگ به صورت زير است.
< a href = “ URL” > text /image < /a >
مثال: در جمله click here to go to zahiri home page کلمه zahiri را به آدرس index .html لينک کنيم:
< BODY >
< p >
click here to go to
< a href = "http: //www.schoolnet.ir" > schoolnet < /a >
home page
< /p >
< /BODY >

نمايش صفحه ای که دارای HTML بالاست...
همانطور که می بينيد کلمه مورد نظر به آدرسی که می خواهيم ، لينک شده است
تگهايی که به وسيله آنها متن را فرم بندی می کنيم:
PARAGRAPH

… < /P >: در اين تگ همه موضوعات آن در يک خط نوشته شده يا يک پاراگراف ايجاد می شود که در صورت بوجود آمدن پاراگراف در زير خط اول، خط دوم را با فاصله زياد می نويسد.برای حل اين مشکل از تگ < B R > استفاده می کنيم.
تگ < P > دارای يک Attribute است:

< A align = " left /center/right" >

BREAK
< BR >: اين تگ از تگهايی است که پايان ندارد و آن را هر کجا که قرار دهيم کلمه بعدی را در يک خط پائين تر ولی با کمتر می نويسد.

NO BREAK
… < /NOBR >: اگر بخواهيم در آخر خط شکستگی نداشته باشيم بين دو بخشی که شکسته می شود از اين تگ استفاده می کنيم.
مثال: a2< /NOBR >
a, 2 را هرگز از هم جدا نمی کند.
HEADING
در HTML دارای شش نوع HEADING هستيم.
< H1> … < /H1 > بزرگترين
< H2 > … < /H2 >
.
.
< H6 > … < /H6 > کوچکترين
خود اين تگها خاصيت راست چين و چپ چين و يا وسط چين شدن را هم دارند که برای فعال کردن آن از روش زير استفاده می کنيم.
مثال: < H2 align=”center” > vali < /H2 >
HR
تگ < HR > برای ما تک خط افقی سه بعدی ايجاد می کند و دارای Attributeهای زير می باشد.
< HR align="left/center/right" width =”طول خط بر حسب پيکسل يا درصد”
size=”ضخامت خط بر حسب پيکسل”
noshade: با نوشتن اين کلمه خط سه بعدی نمی شود .
color=”رنگ خط” >
PRE
در HTML هر چيزی را که بين تگ < PRE > … < /PRE > به هر صورتی که بنويسيم با همان شکل در صفحه وب نشان می دهد.
مثال:
< PRE > Vali
Ali …
Reza a b cd
< / PRE >
اين توشته ها در صفحه وب به اين صورت ديده خواهد شد.
همانطور که می بينيد دقيقا همان طور که متن در HTML، نوشته شده است در صفحه اصلی ديده می شود.
DIV:
برای ما يک بلوک در متن ايجاد می کند.
مثال style="color:red" > … … < /DIV >
استفاده ديگر برای تعيين Direction می باشد که سمت نوشتن را از راست به چپ يا چپ به راست می کند.
< DIV dir="rtl/ltr" > … … < /DIV >
rtl = right to left
ltr = left to right
از Attributeهای اين تگ خاصيت align می باشد:
< DIV align=”left/center/right” > … … < /DIV >
در قديم از تگهای ديگری نيز برای ويرايش متن استفاده می کردند که اکنون بيشتر آنها منسوخ شده اند واستفاده ای ندارند.
در زير به برخی از آنها اشاره می کنيم:
< e m > … < /e m >: دقيقا کار تگ < I > … [ / i ] را می کند ولی نشان می دهد که از نظر منطقی تاکيدی روی متن می باشد.
< s trong > … < / s trong >: دقيقا کار تگ < B > … [ / b ] را انجام می دهد.
< c ite > … < / c ite >: برای نوشتن اسم مقاله يا کتاب ( آنرا italic می کند)
< c ode > … < / c ode >: برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )
< k bd > … < / k bd >: ورودی های برنامه را با اين تگ می نوشته اند.(M.S)
< s amp > … < / s amp >: برای نوشتن مثال از اين تگ استفاده می شده.(M.S)
< v ar > … < / v ar >:متغييرها را Italic می کند.
< t t> … < / t t >: متن را Mono Scape می کند.( يک نوع Font است.)
< s trike > … < / s trike >: يک خط وسط متن داخل خود می کشد.

< S TRIKE > a bc < / S TRIKE >
که نتيجه کار چنين است.
< b lockquote > … < / b lockquote >:
< b ig > … < / b ig >: متن که بين آن باشد يک فونت درشتتر می نويسد.
< s mall > … < / s mall >: متن که بين آن باشد يک فونت کوچکتر می نويسد.
برای درست کردن توان و انديس دو تگ داريم.
مثال: برای نوشتن از دو تگ زير استفاده می کنيم.

a < S UB > 1 < / S UB >
a < S UP > 20 < / S UP >

… < / blink >: اين تگ فقط در NetScape کار می کند. متن يا عکس که داخل اين تگ قرار می گيرد در صفحه چشمک می زند.

__________________


 
آموزش html 19 بهمن 1389   #3 (لینک)
lover631


lover631 آواتار ها

كاربر جديد پارسی لند
 
lover631 آنلاین نیست.

پاسخ : آموزش html پاسخ : آموزش html

کد:
salam / khastam bebinam chetor mishe file psd(file photoshop)ro be htm tabdil kard?
سلام / میخواستم بدونم چطور فایل psd (فایل فتوشاپ) رو به html تبدیل کنم؟


ویرایش توسط Faulter : 19 بهمن 1389 در ساعت 18:04. دلیل: فینگیلیش بودن
 
آموزش html 19 بهمن 1389   #4 (لینک)
Faulter


Faulter آواتار ها

مدیر ارشد انجمن برنامه نویسی
 
Faulter آنلاین نیست.

پاسخ : آموزش html پاسخ : آموزش html

سلام, دوست عزیز قوانین رو رعایت کن.
  • به سوالات فینگلیش ترتیب اثر داده نخواهد شد!
اینبار پستتون فینگلیش باشه تایید نخواهد شد.


برای استفاده از عکستون در html ازدر نرم افزار فتوشاپ از منو file گزینه export رو انتخاب کن, اسم مورد نظرتو بده و format یا file type که زیر اسم هست رو روی jpg بزار. سپس با کد زیر عکستو بیار تو صغحه html

کد:
<img src="ax.jpg" alt="comment for pic">
توجه کن که عکست باید کنار فایل html باشه

__________________
دست خوش به معلمی که ریه ش از گچ پر شده و اینارو یاد ما داد.
 
آموزش html 19 بهمن 1389   #5 (لینک)
Administer


Administer آواتار ها

مديريت كل سايت
 
Administer آنلاین نیست.

پاسخ : آموزش html پاسخ : آموزش html

نقل قول:
نوشته اصلی توسط lover631 نمایش پست ها
کد:
salam / khastam bebinam chetor mishe file psd(file photoshop)ro be htm tabdil kard?
سلام / میخواستم بدونم چطور فایل psd (فایل فتوشاپ) رو به html تبدیل کنم؟
نمونه مثال های تبدیل عکس PSD به HTML:
http://graphic.cdwco.com/
http://www.cdwco.com

آموزشش رو بعدا میزارم واستون

__________________

امان از آن زمانی که بیفتد به روی نامه ام چشمان مهدی
دلش می گیرد و با چشم گریان بگوید این هم از یاران مهدی




 
برچسب ها
آموزش

  



کاربران در حال دیدن موضوع: 1 نفر (0 عضو و 1 مهمان)
 

(نمایش همه كاربراني كه از اين موضوع بازدید نمودند: 19 نفر
3am, Administer, ahmadmoradi, Anti, bahar252, Crouz, Faulter, ghazalak, GodMaster, hamerskaow, Hamid Tik Tak, itran720, jeevee, KHODAM2005, lover631, shahram3567, smahan, tallboy_sn, tami_amini
ابزارهای موضوع
نحوه نمایش امتیاز به این موضوع
امتیاز به این موضوع:

انتخاب سریع یک انجمن

دانلود فایل,مقاله, سورس کد

Powered by vBulletin, Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
All right reserved ©2009 - 2018, Parsiland.com
کپی برداری از این سایت به هر نحو ممنوع می باشد!