/ ..::| آموزش جامع html از مقدماتی تا پیشرفته |::..
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 19

موضوع: ..::| آموزش جامع html از مقدماتی تا پیشرفته |::..

  1. #1
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR

    ..::| آموزش جامع html از مقدماتی تا پیشرفته |::..


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

    درود دوستان عزیز ویکی وی بی

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

    در صورت استقبال شما، قول آموزش css و php رو هم بهتون میدم

    چند نکته :

    1. از ارسال هرگونه پست در این تاپیک خودداری کنید

    2. سوالات خودتون رو از طریق پیام خصوصی مطرح کنید

    3. برای تشکر کردن فقط و فقط از دکمه تشکر استفاده کنید

    4. آموزش شامل 10 قسمت هست که سعی میکنم روزی یک قسمت رو قرار بدم

    5. در صورت کپی برداری کپی رایت ویکی وی بی ذکر بشه

    با سپاس فراوان


  2. نوين وردپرس تبلیغات شما

  3. #2
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR

    مقدمه


    آموزش شامل 10 قسمت به شرح زیر می باشد :

    ---------------------

    قسمت اول : تگ چیست؟ / چه چیزی احتیاج داریم ؟ / ساخت اولین صفحه وب / html یا htm / سرفصل و یا Head line / پاراگراف /

    پیوند و یا لینک ها / تصاویر /عناصر HTML / تگ های HTML تو در تو / تگهای پایانی را فراموش نکنید / عناصر HTML حرف بزرگ یا کوچک

    --------------------

    قسمت دوم : تواناییها و خصوصیات عناصر HTML / تگهای had line و یا سر فصلها / اهمیت تگهای head line / تگهای خط کشی و یا خط (line) /

    نوشتن تو ضیحات برای کد های HTML / گونه کد های HTML یک صفحه وب را ببینیم؟ / تگهای پاراگراف (paragraph) /

    تگ های شکستن خط (line breaks) / تگ های نوع نمایش نوشته ها /

    --------------------

    قسمت سوم : style ها / style چیست؟ / تغیر رنگ back Ground / پس زمینه با استفاده از style ها / تغییر font نوشته ها با استفاده از style ها /

    تغییر نوع چینش نوشته ها

    --------------------

    قسمت چهارم : link, Anchors , Hyper Link لینکها و یا پیوند ها / لینک های خارجی / لینک های داخلی / نشانه ها

    --------------------

    قسمت پنجم : وارد کردن تصاویر در صفحات html / تنظیم محل قرار گیری (align) / و alt چیست؟

    --------------------

    قسمت ششم : table ها / طول و عرض table ها / خصوصیات border/و align و یا چینش در سطرها و ستون ها / table های تو در تو /

    background color (رنگ پس زمینه جدول )

    --------------------

    قسمت هفتم : لیست ها

    --------------------

    قسمت هشتم : style sheet چیست؟ / نحوه استفاده از چگونه است؟/ آ شنایی با تگ Head و خصوصیات ان / تگ head چیست؟

    --------------------

    قسمت نهم : نگ meta چیست و نحوه تنظیم آن چگونه است ؟ / فواید تگ meta و نحوه تنظیم آن چگونه است ؟ /

    تفاوت مابین تگهای meta با خاصیت HTTP-EQULV و NAME ؟

    --------------------

    قسمت دهم : HTTP headers چیست ؟ / چگونگی استفاده از اسکریپت ها در صفحات وب / تگ <noscript> /

    --------------------

    10 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-12-2012 در ساعت 03:59 AM

  4. #3
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR

    قسمت صفرم


    درود

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

    فقط میخوام بهتون سایتی برای کدنویسی و مشاهده آنلاین نتیجه اون رو معرفی کنم

    البته شما میتونید توی notepad کدتون رو بنویسید و با فرمت .html ( یا .htm ) ذخیره کنید و با کلیک روی اون نتیجه رو در مرورگرتون مشاهده کنید

    ولی خوب این سایت همین امکان رو بدون دردسر در اختیار ما قرار داده

    شما از طریق لینک زیر به صفحه کد نویسی آنلاین این سایت هدایت میشین :

    http://www.w3schools.com/html/tryit....=tryhtml_intro

    خوب همونطور که میدونید باید کد رو در قسمت Source Code تایپ کنید و با کلیک کردن روی submit code نتیجه رو در قسمت result مشاهده کنید

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

    موفق باشید، سپاس

    9 نفر از اعضا پست MR.P3YM@N را پسندیده اند



  5. #4
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR

    .: قسمت اول :.

    --------------------------


    فهرست : تگ چیست؟ / چه چیزی احتیاج داریم ؟ / ساخت اولین صفحه وب / html یا htm / سرفصل و یا Head line / پاراگراف /

    پیوند و یا لینک ها / تصاویر /عناصر HTML / تگ های HTML تو در تو / تگهای پایانی را فراموش نکنید / عناصر HTML حرف بزرگ یا کوچک

    --------------------------

    تگ چیست؟

    تگها کلماتی هستند که به وسیله یک جفت علامت <> احاطه شده اند ماننده <html> و معمولا به صورت یک جفت میباشند مانند <b> و <b/>

    اولین تگ ( تگ ابتدایی) و دومین تگ (تگ انتهایی ) نامیده میشود . تگ ابتدایی تگ شروع و یا تگ باز و تگ انتهایی تگ پایانی و یا تگ بسته نیز نامیده میشود

    منظور از یک مرورگر وب مانند internet explorer و firefox وسیله ایست برای خواندن کد های HTML و ترجمه و نمایش آنها به صورت صفحات وب

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

    در زیر میتوانید نمونه ای از کد های HTML را ببینید :



    کد HTML:
    <html>
        <body>
                <h1> wikivb.ir </h1>
                <p> مرجع تخصصی و رایگان ویبولتین </p> 
       </body>
    </html>

    متن بین <html>و <html/> صفحه وب را مشخص میکند و متن <body> و <body/> قسمت قابل روت یک صفحه وب را نشان میدهد

    متن بین <h1> و <h1/> به صورت یک سر فصل نمایش داده مشود و متن بین <p> و <p/> به صورت یک پاراگراف نمایش داده میشود

    چه چیزی احتیاج داریم ؟

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

    کد نویسان حرفه ای از نرم افزار های front page و dream weaver و notepad++ برای تولید صفحات وب استفاده میکنن

    ساخت اولین صفحه وب

    برای شروع شما نرم افزار notepad خود را از ادرس accessories<program<start باز کنید و متن زیر را درون آن بنویسید

    تذکر خیلی مهم::: اگر میخواین HTML یاد بگیرین باید عادت کنید به تایپ کردن.متن زیر رو کپی نکنید.تا وقتی که خودتون تایپ نکنید چیزی یاد نمیگیرین


    کد HTML:
    <html>
        <body>
                <h1> this is my main page</h1> 
               <p>this is some test </p>
                <p><a href="http://wikivb.ir"> WIKIVB </a></p>
        </body>
    </html>

    ( اینجا به خاطر جلوگیری از به هم ریختگی کد ها انگلیسی نوشتم WIKIVB ، که شما میتونید فارسی بنویسید ویکی وی بی، مشکلی در کد ایجاد نمیکنه اما جایی که URL نوشته میشه قاعدتا باید انگلیسی باشه )

    پس از اتمام ، نوشته مورد نظر خود را با پسوند های htm و یا HTML با نام wikivb page1 ذخیره کنید

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

    10 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-13-2012 در ساعت 08:21 AM

  6. #5
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR
    ادامه آموزش قسمت اول ...

    htm یا html ؟

    برای ذخیره یک صفحه وب شما باید یکی از این پسوند ها را انتخاب کنید htm.html

    در عمل این دو پسوند تفاوتی با هم ندارند . htm یک پسوند قدیمیست و مربوط به زمانی است که پسوند ها از 3 حرف تشکیل میشوند ولی امروزه بهتر است از پسوند html استفاده کنیم

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

    برای یاد گیری بهتر از چندین مثال استفاده میکنیم

    سرفصل و یا head line


    کد HTML:
    <html> 
           <body> 
                 <h1> this is heading </h1>    
              <h2> this is heading </h2>   
                 <h3> this is heading </h3>   
         </body>
    </html>

    سرفصلها توسط تگ های <h1> تا <h6> علامت گذاری میشود

    پاراگراف

    کد HTML:
    <p> this is heading </p>      
    <p> this is heading  test </p>

    پاراگراف ها توسط تگهای <p> علامت گذاری میشود

    پیوند ها و یا لینک ها

    کد HTML:
    <a href="www.wikivb.ir"> WiKiVb.iR </a>

    link ها و یا پیوند ها توسط تگ <a> علامت گذاری میشود این تگ ها دارای نشانه هایی میباشد که در قسمت های بعدی توضیح داده خواهد شد .

    تصاویر


    کد HTML:
    <img src="wikivb.gif" width"104" height="142"/>
    تصاویر توسط تگ </img> علامت گذاری میشوند که دارای نشانه ها و تفاوت هایی با 3 تگ قبلی است که در ادامه توضیح داده میشود (ماننده نام و اندازه تصاویر )

    عناصر HTML

    عناصر HTML اجزاء سازنده یک مجموع HTML هستند .عنصر HTML یعنی هر چیزی که بین تگ ابتدایی و انتهایی وجود دارد

    تگ شروع تگ باز و تگ پایانی تگ بسته نیز نامیده میشود

    عناصر و یا اجزاء یک مجموعه HTML دارای نظام و قواعد خاصی هستند که تعدادی از انها در زیر گفته میشود


    عناصر HTML با یک تگ باز شروع می شود .

    عناصرHTML با یک تگ بسته به پایان میرسد.

    محتوای عناصر در بین تگهای ابتدایی و انتهایی قرار میگیرد.

    بعضی از عناصر HTML محتوایی ندارن .

    این عناصر در تگ ابتدایی بسته میشود ماننده </br>

    بعضی از عناصرHTML دارای مشخصات و توانایی هایی هستند.

    البته در مورد توانایی های و مشخصات عناصر HTML در ادامه به صورت کامل توضیح داده خواهد شد.

    تگهای HTML تو در تو

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

    این بدین معنا ست که تگی که جلو تر از همه تگها باز میشود باید در آخر همه آنها بسته شود برای درک بهتر این مطلب به مثال زیر توجه کنید



    کد HTML:
    <html>
            <body>
                  <p>  site wikivb.ir </p>
                     </body>
    </html>

    در این مثال تگ <html> در ابتدای همه تگها باز شده است و در انتهای همه انها با <html/> بسته شده . محتوای تگ <html> تگهای <body> و <p> هستند

    تگ <body> که بعد از آن باز شده قبل از ان با <body/> بسته شده است .

    محتوای تگ <body> که در واقع بدنه و قسمت قابل رویت یک صفحه HTML است در این مثال یک تگ <p> است در مورد تگ <p> هم این موضوع تکرار شده است

    تگ های پایانی را فراموش نکنید

    کد HTML:
    <p> taakforum.com


    .: پایان قسمت اول آموزش :.

    سپاس

    10 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-13-2012 در ساعت 08:31 AM

  7. #6
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR
    .: قسمت دوم :.

    --------------------------------------

    تواناییها و خصوصیات عناصر HTML / تگهای had line و یا سر فصلها / اهمیت تگهای head line / تگهای خط کشی و یا خط (line) / نوشتن تو ضیحات برای کد های HTML /

    چگونه کد های HTML یک صفحه وب را ببینیم؟ / تگهای پاراگراف (paragraph) / تگ های شکستن خط (line breaks) / تگ های نوع نمایش نوشته ها /

    --------------------------------------

    تواناییهای و خصوصیات عناصر HTML

    حالا به تفصیل به تواناییهای بعضی از عناصر HTML میپردازیم . هر عنصر HTML دارای تواناییها و خصوصیتهایی مباشد . این خصوصیت ها یک سری اطلاعات اضافه و تکمیلی در مورد هر عنصر HTML. اطلاعات در بین تگ های ابتدایی ماننده
    کد:
         <a href="http://www.wikivb.ir"> WiKiVb </a> 
    در اینجا شما نمونه ای از عناصر HTML به همراه توضیحاتی تکمیلی را می بینید که در بین یک جفت " " قرار گرفته است.

    تگهای head line و یا سر فصلها

    سرفصلها توسط تگهای h1 تا h6 علامت گذاری میشوند تگ h1 باعث ایجاد اندازه بزرگتری نسبت به h6 می شود



    کد:
    <h1> WiKiVb </h1> <h2> WiKiVb </h2> <h3> WiKiVb </h3> <h4> WiKiVb </h4> <h5> WiKiVb </h5> <h6> WiKiVb </h6>

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

    اهمیت تگ های head line

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

    تگهای خط کشی و یا خط (line)

    تگ </hr> برای کشیدن خط های افقی استفاده میشود



    کد:
    <h1> WiKiVb </h1> <hr/> <h2> WiKiVb </h2> <hr/> <h3> WiKiVb </h3> <hr/> <h4> WiKiVb </h4> <hr/> <h5> WiKiVb </h5> <hr/> <h6> WiKiVb </h6>
    نوشتن توضیحات برای کد های HTML

    این توضیحات باید به صورتی در درون کد های HTML قرار گیرد که توسط مرورگر ها خوانده نشود بنابر این توضیحات را به این صورت نوشته میشود
    کد:
    <!-- اينجا محل نوشتن توضيحات هست -->


    این نوشته ها توسط مرورگر ها خوانده نمی شوند علامت تعجب فقط در ابتدا قرار میگیرد و در پایان نمی اید

    چگونه کد های HTML یک صفحه وب را ببینیم ؟

    برای این کار شما میتوانید در صفحه مرورگر تان گزینه view را از نوار ابزار انتخاب کنید و سپس گزینه view source و یا source را انتخاب کنید در این حالت یک پنجره جدید باز میشود که کد های HTML را به شما نشان میدهد


    9 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-15-2012 در ساعت 05:34 PM

  8. #7
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR
    ادامه آموزش قسمت دوم ...

    تگ های پاراگراف

    پاراگراف ها توسط تگهای <p> علامت گذاری میشن


    کد:
    <p> this is a paragraph </p> <p> this is a another paragraph </p>

    مرورگر ها به صورت اتو ماتیک یک خط فاصله قبل و بعد از این تگ ها ایجاد میکنن باز هم این نکته را یاد آوری میکنم که تگ های ابتدایی و انتهایی را فراموش نکنید

    تگهای شکستن خط

    برای ایجاد شکست در یک خط و رفتن به خط بعدی و ایجاد فاصله از تگ </br> که یک تگ خالی است استفاده میکنیم این نکته قابل ذکر است که کلیه فاصله ها در بین تگهای html در هنگام نمایش توسط مرورگر از بین میرود



    کد:
    <p>    this is a <br/>    paragraph </p>
    به طور مثال فاصله ای که قبل از محتوای این عصر HTML وجود دارد در مروگر از بین میرود

    تگ های نوع نمایش نوشته ها

    تگ هایی ماننده <i> و <b> باعث میشوند که نوشته ها به صورت italic و یا bold نمایش داده شود این تگ ها را تگهای نوع نمایش میگویند


    کد:
    <p><b>this is a paragraph</b> </p> <p><strong>this is a paragraph</strong></p> <p><big>this is a paragraph</big></p> <p><em>this is a paragraph</em></p> <p><i>this is a paragraph</i></p> <p><small>this is a paragraph</small></p> <p> this is <sub> subscript</sub> and<sup>superscript</sup></p>



    .: پایان قسمت دوم آموزش :.

    سپاس

    6 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-16-2012 در ساعت 03:44 AM

  9. #8
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR
    .: قسمت سوم :.

    --------------------------------------

    style ها / style چیست؟ / تغیر رنگ back Ground / پس زمینه با استفاده از style ها / تغییر font نوشته ها با استفاده از style ها / تغییر نوع چینش نوشته ها

    --------------------------------------


    style ها

    style چیست ؟

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

    style ها به چندین روش درون صفحات وب نوشته میشود




    1. خطی و درون تگهای html
    2. تگهای <style></style> درون صفحات html
    3. صفحات خارجی با فرمت css



    برای آشنایی بیشتر با این موارد به ذکر چندین مثال می پردازیم .
    کد:


    کد:
    <p style="background-color:yellow"></p> <h1 style="font-size:10px"></h1> <p style="font-family:times"></p> <p style="text-align:center"></p>
    اینها کد هایی هستند که درون تگهای HTML نوشته میشود


    تغیر رنگ back Ground / پس زمینه با استفاده از style ها

    برای شروع به کد های زیر توجه کنید



    کد:
    <html> <body style="background-color:yellow"> <h2> look: colored background!</h2> </body> </html>
    در قسمت body و یا بدنه صفحه وب مشاهده میکنید که از یکی style خطی استفاده شده است این کد باعث خواهد شد که پس زمینه و یا background صفحه وب شما به رنگ زرد نمایش داده بشه برای مشاهده عملی این صفحه آن را با توجه به خود آموز های قبلی بسازید

    تغییر font نوشته ها با استفاده از style ها

    در اینجا مشاهده خواهید کرد که فونت نوشته ها با استفاده از خصوصیات style ها قابل کنترول است



    کد:
    <html> <body> <h1 style="font-family:verdana">A heading </h1> <p style="font-famile:courier new;color:red;font-size:40px;"> web site wikivb.ir </p> </body> </html>
    مشاهده میکنید در تگ <p> , <h1> این style ها برای تغییر نوع فونت به کار میرود

    تغییر نوع چینش نوشته ها

    در اینجا مشاهده میکنید که با استفاده از style ها نوع چینش نوشته ها را کنترول میکنیم


    کد:
    <html> <body> <h1 style="text-align:center"> wikivb </h1> <p>Ever wonder how airline jets navigate the Earth from 30,000 feet on a cloudy day? The road maps provided by Google Maps wouldn’t be that relevant after all. The fact is most flights use radio navigation or GPS to find their way, and the radio navigation beacons they use are often visible in Google’s aerial and satellite imagery. </p> </body> </html>

    با توجه به گستردگی در مورد style ها در اینجا به همین توضیحات اکتفا میکنیم و توضیحات بیشتر را در مورد style ها به خود آموز های بعدی موکول میکنیم


    .: پایان قسمت سوم آموزش :.

    سپاس

    5 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-18-2012 در ساعت 01:34 AM

  10. #9
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR
    .: قسمت چهارم :.

    --------------------------------------

    link, Anchors , Hyper Link لینکها و یا پیوند ها / لینک های خارجی / لینک های داخلی / نشانه ها

    --------------------------------------


    link, Anchors , Hyper Link لینکها و یا پیوند ها

    پیوند ها و یا لینک ها یکی از مهمترین اجزاء تشکیل دهنده صفحات وب هستند که دارای انوع مختلفی هستند . لینک ها توسط تگهای <a> دارای خصوصیات مختلفی هستند که در زیر به تعداد از انها اشاره میکنیم
    لینک ها را میتوان به سه قسمت زیر تقسیم بندی نمود:



    1. لینک های خارجی
    2. لینک های داخلی
    3. و نشانه ها



    لینک های خارجی

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

    به طور مثال:


    کد:
    <a href="http://www.wikivb.ir"> WIKIVB </a>
    این لینک از اجزاء مختلفی تشکیل شده است که توضیح خواهیم داد



    • این تگ دارای خصوصیاتی به نام href است که مقدار آن آدرس لینک مورد نظر برای اتصال و پیوند است
    • نوشته داخل این تگ برای بازدید کنندگان نمایش داده میشود که با کلیک بر روی ان وارد آدرس جدید میشود



    لینک ها داخلی

    لینک های داخلی نیز صفحه ما را به صفحات دیگر پیوند میدهند ولی اینبار این صفحات همگی جزئی از یک وب سایت هستند و از این لینک ها برای پیوند دادن صفحات داخلی یک وب سایت استفاده میشود
    در ظاهر کد های لینک های داخلی و خارجی تفاوتی با یک دیگر ندارند ولی تفاوت انها در نحوه ادرس دهی انها میباشد که تفاوت این لینک ها را مورد بررسی قرار میدهیم


    به طور مثال :

    فرض کنید که ما وب سایتی داریم که از دو صفحه index.HTML و aboutus.HTML تشکیل شده است
    ما میخوایم لینکی از صفحه اصلی ( index.html) به صفحه درباره ما(aboutus.HTML) که هر دوی انها از صفحات یک وب سایت هستند ایجاد کنیم . برای انجام این کار از کد های زیر درون صفحه index.html استفاده میکنیم



    کد:
    <a href="aboutus.html"> About us </a>
    ملاحضه میکنیم که در مقدار اقثب که همان آدرس صفحه میباشد خبری از http://www نیست و فقط اسم صفحه مورد نظر نوشته میشود
    برای توضیح این مطلب به نکات زیر توجه کنید :




    1. آدرس دهی به دو صورت relative و static انجام می پذیرد.
    2. در مثال بالا از ادرس دهی به روش relative استفاده شده است
    3. منظور از ادس دهی به روش relative وابسته این است که مقدار ادرس ما به نحو قرار گرفتن این دو صفحه نسبت به یک دیگر بستگی دارد



    برای توضیح بیشتر برای ساخت یک وب سایت ابتدا یک folder به نام وب سایت بسازید . نام فولد اختیاری است

    محل این فولد اهمیت چندانی ندارد حالا صفحات وبی را که ساخته اید داخل این فولدر قرار دهید در حال حاظر این دو صفحه وب ( index.HTML و aboutus.HTML) دارای موقعیت یکسان هستند یعنی هر دو داخل یک فولد قرار دارند
    این موضوع بسیار مهم است که این دو صفحه وب هر دو داخل یک فولد و یا پوشه قرار داشته باشد در غیر این صورت نحوه ادرس دهی متفاوت خواهد بود حالا برای ادرس دهی میتوان از کدهایی که در مثال بالا اشاره کرد

    در قسمت اینده توضیحات بیشتری در این مورد ارائه خواهیم داد

    6 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-21-2012 در ساعت 04:59 AM

  11. #10
    MR.P3YM@N آنلاین نیست.
    MR.P3YM@N
    مدير بازنشسته
    800نوشته1,604مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    24
    پسندیده است
    2,158 پست
    بلاگ
    1 پست
    میزان امتیاز
    1603
    ChatSupport.IR
    ادامه آموزش قسمت چهارم ...

    نشانه ها

    این نوع لینک ها و پیوندها داخل یک صفحه وب استفاده میشود . به طور مثال دیده اید که در بعضی از صفحات وب که به علت حجم زیاد مطالب ارتفاع زیادی دارند از گزینه های top و یا بالا برای راهنمایی کاربران به بالای صفحه استفاده میشود نحوه ادرس دهی در این نوع لینکها کمی متفاوت تر از دو حالت قبلی میباشد در این نوع ادرس دهی از یکی دیگر از خصوصیات تگهای <a> استفاده میشود به نام "name" این خصوصیت قابلیت نامیدن هر یک از تگ های html و یا در اینجا <a> را با نمهای دلخواه در اختیار ما قرار میدهد یکی از موارد استفاده این خصوصیات در این مثال مورد بررسی قرار میگیرد

    کد:
    <a name="label"> any content </a>

    در قسمت "label" می توانید نام مورد نظر خود را قرار دهید


    کد:
    <a href="#label"> any content </a>

    و در اینجا لینک مورد نظر را مشاهده میکنید . ملاحظه می نمائید برای مقدار href مقدار name در لینک اول همراه با علامت# در ابتدا قرار داده شده است

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

    کد:
    <a href="top"> top of page </a>

    و سپس در انتهای صفحه لینک زیر را قرار میدهیم / به مقدار خصوصیات href دقت کنید . حالا با کلیک بر روی این لینک به قسمت بالای صفحه خواهید رفت

    کد:
    <a href="#top"> top of page </a>
    .: پایان قسمت چهارم آموزش :.



    سپاس

    4 نفر از اعضا پست MR.P3YM@N را پسندیده اند


    ویرایش توسط MR.P3YM@N : 11-21-2012 در ساعت 06:25 PM
    تاک وب ، آژانس طراحی وب | تاک موزیک ، رسانه موسیقی ایران

    کامسونت، مرجع تخصصی پشتیبانی شبکه های اجتماعی و ارتباطی (آدرس جدید چت ساپورت)

صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی