آموزش مقدماتی HTTP و CSS (جلسه 4: آشنایی با HTML - بخش ۲)
1398/02/09 17:57 , میلاد صاحب نظر

آموزش مقدماتی HTTP و CSS (جلسه 4: آشنایی با HTML - بخش ۲)

در جلسه قبلی  در مورد معناشناسی، عنصرهای <div> و <span>، ساختارها و سازماندهی صفحه درHTML صحبت کردیم. این جلسه در مورد چگونگی استفاده از ویژگی هایپرلینک است. در پایان این جلسه می‌توانید یک سایت کامل برای خودتان ایجاد کنید. با ما همراه باشید‌! 

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

ایجاد هایپرلینک‌ها

در کنار متن، یکی دیگر از اجزاء اصلی اینترنت، هایپرلینک نام دارد که به ما امکان لینک زدن از یک صفحه وب یا منبع به یک صفحه وب یا منبع دیگر را فراهم می‌کند. هایپرلینک‌ها در HTML با استفاده از anchor (یا<a>) که یک عنصر سطح inline است، ایجاد می‌شوند.

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

برای مثال، با کلیک کردن روی متن “MUG” (که درون عنصر anchor در کنار مقدار اتریبیوت href (که عبارت است از http://MUG.ac) قرار گرفته است)، کاربر به سایت MUG هدایت می‌شود.

<a href="http://MUG.ac">MUG</a>

 

نوشتن عنصرهای سطح block درون anchorها

عنصر anchor (یا<a>) ذاتاً یک عنصر inline است و با توجه به استانداردهای وب، عنصرهای سطح inline نمی‌توانند درون عنصرهای سطح block نوشته شوند. اما وقتی HTML5 معرفی شد، عنصرهای anchor (مخصوصاً این عنصرها) امکان نوشته شدن‌ درون عنصرهای سطح block، inline و هر سطح دیگری را به دست آوردند.

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

مسیرهای Reletive (نسبی) و Absolute (مطلق)

دو مورد از مرسوم‌ترین انواع لینک‌ها عبارت‌اند از لینک‌هایی که در یک وبسایت به سمت صفحات دیگر هدایت می‌کنند و لینک‌هایی که به سمت وبسایت‌های دیگر هدایت می‌کنند. این لینک‌ها با مقادیر اتریبیوت href آن‌ها شناخته می‌شوند که همچنین به آن‌ها مسیر نیز گفته می‌شود.

لینک‌هایی که به صفحات دیگر از یک وبسایت اشاره می‌کنند دارای یک مسیر نسبی (Reletive) هستند که مقدار اتریبیوت href آن‌ها شامل دامنه (com، .org، .edu. و غیره) نیست.

چون لینک به یک صفحه دیگر در همان وبسایت اشاره می‌کند، مقدار اتریبیوت href باید فقط شامل نام فایل آن صفحه باشد که این فایل دارای لینکی به سمت مثلاً صفحه about.html است.

اگر صفحه به یک مسیر یا فولدر متفاوت لینک شده باشد، آنگاه مقدار اتریبیوت href باید این مسیر را نیز نشان دهد. مثلاً اگر صفحه about.html درون دایرکتوری یا مسیر pages قرار داشته باشد، آنگاه مسیر نسبی به این صورت خواهد بود: pages/about.html.

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

 /http: //google.com

همان‌طور که مشاهده می‌کنید این مقدار با http شروع شده و شامل دامنه است (که در این مورد دامنه عبارت است از com.).

در مثال زیر، اگر روی متن “about” کلیک کنید، صفحه about.html درون مرورگر باز می‌شود. اما از طرف دیگر، اگر روی متن “google” کلیک کنید، صفحه /http://google.com درون مرورگر باز می‌شود.

<!-- Relative Path -->
<a href="about.html">About</a>

<!-- Absolute Path -->
<a href="http://www.google.com/">Google</a>

لینک کردن به یک آدرس ایمیل

معمولاً همه می‌خواهیم یک هایپرلینک به سمت آدرس ایمیلمان ایجاد کنید – برای مثال، یک متن هایپرلینک که بگوید “Email Me” که وقتی کاربر روی آن کلیک می‌کند، کلاینت ایمیل پیش‌فرض کاربر باز شود و وارد بخش ایجاد ایمیل شود.

در چنین حالتی، باید حداقل آدرس ایمیلی که قرار است کاربر به آن ایمیل ارسال کند پرشده باشد. اطلاعات دیگری همچون موضوع ایمیل و متن بدنه نیز می‌توانند پر شوند (البته بستگی به ایمیل ارسالی دارد).

برای ایجاد یک لینک ایمیل، مقدار اتریبیوت href  باید با :mailto آغاز شود و در ادامه آن آدرس ایمیلی که قرار است به آن ایمیل ارسال شود، نوشته می‌شود.

برای مثال، برای ایجاد یک لینک ایمیل به آدرس ایمیل MUG@yahoo.com، مقدار اتریبیوت href باید mailto:MUG@yahoo.com باشد.

علاوه بر این، موضوع، متن بدنه و اطلاعات دیگر نیز برای ایمیل ارسالی می‌توانند از قبل پرشده باشند. برای افزودن یک خط موضوع، باید بعد از آدرس ایمیل از پارامتر =subject استفاده می‌کنیم. اولین پارامتری که بعد از آدرس ایمیل قرار می‌گیرد باید با یک علامت سؤال (?) آغاز شود تا به مسیر هایپرلینک متصل شود.

برای اینکه کاربر بتواند درون خط موضوع چندین کلمه بنویسد، باید فضای آن با استفاده از 20% کدگذاری شود.

اضافه کردن متن بدنه نیز همانند اضافه کردن موضوع است، با این تفاوت که این دفعه در مقدار اتریبیوت href از پارامتر =body استفاده می‌شود. چون قصد داریم یک پارامتر را به یک پارامتر دیگر متصل کنید، باید از & برای مجزا کردن آن‌ها از یکدیگر استفاده کنیم.

همانند خط موضوع، فضاها باید با استفاده از 20% کدگذاری شود و line breakها هم با استفاده از 0A% کدگذاری می‌شوند.

به طور خلاصه، یک لینک به آدرس ایمیل MUG@yahoo.com با موضوع “reaching out” و متن بدنه “How Are You?” به مقدار اتریبیوت href زیر نیاز دارد:

mailto:MUG@yahoo.com?subject=Reaching%20Out%body=How%20are%20you

کد کامل به شکل زیر است:

<a href="mailto:MUG@yahoo.com?subject=Reaching%20Out&body=How%20are%20you">Email Me</a>

باز کردن لینک‌ها در یک پنجره جدید

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

برای اجرای عمل باز کردن یک لینک در یک پنجره جدید، از اتریبیوت Target با مقدار blank_ استفاده می‌کنیم. اتریبیوت target مشخص می‌کند که دقیقه لینک در کجا نمایش داده می‌شد و مقدار blank_ یک پنجره جدید را مشخص می‌کند.

برای باز شدن آدرس /http://MUG.ac در یک پنجره جدید، باید کد زیر را تایپ کنید:

<a href="http://MUG.ac/" target="_blank">MUG</a>

لینک زدن به بخش‌هایی از یک صفحه

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

برای این منظور، ابتدا باید یک اتریبیوت id در عنصری که می‌خواهیم به آن لینک کنیم ایجاد کنیم، سپس از مقدار آن اتریبیوت id درون اتریبیوت href که خودش درون یک عنصر anchor قرار دارد، استفاده می‌کنیم.

با الگو گیری از مثال لینک بازگشت به بالای صفحه، می‌توانیم یک مقدار اتریبیوت id در بالای عنصر <body> قرار دهیم. حالا می‌توانیم یک عنصر anchor با مقدار اتریبیوت href برابر با top# ایجاد کنیم، تا بتوانیم از بقیه قسمت‌های صفحه به بالای صفحه لینک بزنیم.

کد لازم برای لینک زدن در یک صفحه مشابه، چیزی شبیه به کد زیر است:

<body id="top">
  ...
  <a href="#top">Back to top</a>
  ...
</body>

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

تمرین

وقت آن است که سایت Styles Conference را  با ایجاد چندین صفحه که همه با استفاده از هایپرلینک‌ها به یکدیگر لینک شده‌اند، از یک سایت تک صفحه‌ای به یک سایت کامل تبدیل کنیم.

  1. کارمان را با قرار دادن متن “Styles Conference” درون عنصر <h1> که داخل عنصر <header> قرار دارد و سپس لینک کردن آن به صفحه html، آغاز می‌کنیم.

چون ما همین الان در صفحه index.html قرار داریم، ممکن است کمی عجیب به نظر برسد (حقیقتاً هم عجیب است)، اما چون هدر در صفحات دیگر هم تکرار شده است، منطقی است که در آن‌ها لینکی به سمت صفحه اصلی ایجاد کنیم.

<h1>
  <a href="index.html">Styles Conference</a>
</h1>
  1. برای اینکه کاربر را به سمت تمام صفحات مختلف سایت هدایت کنیم، باید با استفاده از عنصر <nav> در داخل عنصر <header> یک منوی جهت‌یابی ایجاد کنیم. قصد داریم صفحات مختص سخنگویان، برنامه‌ زمانی، محل برگزاری و ثبت‌نام ایجاد کنیم که در صفحه اصلی ما قرار می‌گیرند، پس باید برای همه آن‌ها لینک ایجاد کنیم.
<header>

  ...

  <nav>
    <a href="index.html">Home</a>
    <a href="speakers.html">Speakers</a>
    <a href="schedule.html">Schedule</a>
    <a href="venue.html">Venue</a>
    <a href="register.html">Register</a>
  </nav>

</header>

همچنین همان منوی جهت‌یابی که در عنصر <header> استفاده کردیم را برای عنصر <footer> نیز قرار می‌دهیم تا کاربر راحت‌تر بتواند در سایت پرسه بزند.

<footer>

  ...

  <nav>
    <a href="index.html">Home</a>
    <a href="speakers.html">Speakers</a>
    <a href="schedule.html">Schedule</a>
    <a href="venue.html">Venue</a>
    <a href="register.html">Register</a>
  </nav>

</footer>
  1. درون عنصر <section> که کنفرانس ما را معرفی می‌کند و دقیقه زیر هدر قرار دارد، باید همچنین یک لینک برای ثبت‌نام در کنفرانس نیز ایجاد کنیم. قرار دادن یک لینک در زیر پاراگراف عالی خواهد بود.
<section>

  ...

  <a href="register.html">Register Now</a>

</section>
  1. نباید فراموش کنیم که لینک‌ها را به تمام بخش‌های دیگر نیز اضافه کنیم تا از هر صفحه به صفحات دیگر دسترسی داشته باشیم. درون هر بخش، باید هر دو عنصرهای <h3> و <h5> را درون یک عنصر anchor قرار داده و به سمت صفحه مناسب لینک می‌کنیم.
    حتماً باید این کار را برای هر بخش انجام دهیم.
<section>

  <section>
    <a href="speakers.html">
      <h5>Speakers</h5>
      <h3>World-Class Speakers</h3>
    </a>
    <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
  </section>

  ...

</section>
  1. حالا باید چند صفحه جدید ایجاد کنیم. بنابراین فایل‌های html، schedule.html، Venue.html و register.html را ایجاد می‌کنیم و چون آن‌ها را درون یک فولدر نگهداری می‌کنیم، همه لینک‌ها باید همان‌طور که انتظار می‌رود عمل کنند.

برای اطمینان از اینکه تمام صفحاتمان ظاهر یکسانی داشته باشند، باید مراقب باشیم که همه این فایل‌های جدید دارای ساختار سند و عنصرهای <header> و <footer> مشابه فایل index.html باشند.

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

تصویر ۴.۱: صفحه اصلی سایت، پس از اینکه تمام لینک‌ها و جهت‌یابی‌های مختلف به آن اضافه شدند.

تصویر ۴.۱: صفحه اصلی سایت، پس از اینکه تمام لینک‌ها و جهت‌یابی‌های مختلف به آن اضافه شدند.

دمو و کد منبع

در زیر، می‌توانید وبسایت Styles Conference را در وضعیت فعلی‌اش مشاهده کنید و همچنین می‌توانید کد منبع وضعیت فعلی وبسایت را نیز دانلود کنید.

لینک مشاهده وبسایت Styles Conference                    کد منبع وبسایت Styles Conference
خلاصه

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

یک بار دیگر، مباحثی که در این دو جلسه پوشش دادیم را دوره می‌کنیم:

  • تعریف معناشناسی و بررسی اینکه چه اهمیتی دارند.
  • <div>ها و <span>ها و تفاوت بین عنصرهای سطح block و inline
  • اینکه کدام عنصرهای متن محور برای ارائه محتوای یک صفحه بهترین هستند.
  • عنصرهای ساختاری HTML5 و چگونگی تعریف ساختار و سازماندهی محتوا و صفحه.
  • چگونگی استفاده از هایپرلینک‌ها برای جهت‌یابی و هدایت بین صفحات وب و وبسایت‌های دیگر

امیدواریم که کم‌کم احساس خوبی به HTML پیدا کرده باشید. هنوز چیزهای زیادی برای آموختن وجود دارند، اما اساس و اصول اولیه برای HTML به پایان رسیدند. در دو جلسه آینده، به صورت دقیق CSS را بررسی خواهیم کرد.

با MUG همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات