وب سایت ها، وبلاگ ها، صفحات وب - مفاهیم از قبل آشنا در زمان ما. با توسعه اینترنت، سایت های میزبانی صفحات وب به طور باورنکردنی محبوب شده اند و این تعجب آور نیست: برای برخی افراد داشتن وب سایت خود یک ضرورت و برای برخی دیگر یک سرگرمی خوشایند است. در مورد اول، ما معمولاً در مورد شرکت ها، شرکت ها، کارآفرینان خصوصی صحبت می کنیم، زمانی که آنها هر محصول یا خدمات مورد تقاضا را تبلیغ می کنند. مورد دوم درباره وبلاگ نویسان است.
علاوه بر این، کاربران اینترنتی هستند که به سادگی اطلاعات را جستجو می کنند، وبلاگ ها را می خوانند، فیلم ها را تماشا می کنند و غیره.
برای ایجاد یک وب سایت با کیفیت، گزینه های زیادی وجود دارد. ما روی برنامه نویسی وب از طریق HTML تمرکز خواهیم کرد.
HTML چیست
HTML مخفف Hyper Text Mark-Up Language است. ترجمه شده از انگلیسی، این به معنای "زبان نشانه گذاری فرامتن" است.
به عبارت دیگر، HTML مجموعه ای از کدها است که با آن می توانید عناصر اصلی سایت، فریم آن، مانندچگونه کلمات از جملات ساخته شده اند.
کدهای HTML منحصراً با حروف لاتین نوشته می شوند و برچسب نامیده می شوند و هر کد در پرانتزهای زاویه ای محصور می شود. برخی از برچسب ها جفت شده اند، برخی دیگر جفت نشده اند.
جفت به این معنی است که آنها باید بدون نقص به صورت جفت استفاده شوند. به عنوان مثال، تگ باز نشان می دهد که از کجا در یک صفحه وب شروع می شود، و تگ بسته نشان می دهد که کجا متوقف می شود. دومی با وجود یک کاراکتر اسلش بعد از براکت زاویه باز با اولی متفاوت است. به عنوان مثال، تگ افتتاحیه،برچسب پایانی است.
برچسب های جفت نشده نیازی به شریک ندارند.
بسیاری از برچسب‌ها می‌توانند ویژگی‌هایی داشته باشند - عناصر اضافی که به آن معنای خاص‌تری می‌دهند. به عنوان مثال، برچسب.
جایی که HTML استفاده می شود
درک کلاسیک از جایی که HTML مورد نیاز است ساخت وب سایت است.
در عمل، این ممکن است کافی باشد، زیرا HTML به شما امکان می دهد عناصر اصلی سایت، منوها (از جمله موارد چند سطحی) را ایجاد کنید، پس زمینه را تنظیم کنید، متن، تصاویر، صدا، ویدئو، ویرایش فونت را درج کنید. و خیلی بیشتر.
با این حال، زبان‌های دیگری وجود دارند که به شما امکان می‌دهند عناصر جالب‌تر و اغلب ضروری‌تر را به یک صفحه وب اضافه کنید:
- CSS استایل‌ها را برای کل سایت بدون نیاز به تجویز مداوم ویژگی‌های سبک عناصر جداگانه با استفاده از برچسب‌ها تنظیم می‌کند - برای مثال رنگ و فونت متن.
- زبان اسکریپت به شما امکان می دهد برنامه های کوچک (اسکریپت ها) را توسعه دهید و در سایت جاسازی کنید.چیزهای زیبایی شناسی پیش پا افتاده (تغییر رنگ پیوند هنگام نگه داشتن ماوس روی آن) و پایان دادن به موارد کاربردی (جمع آوری آدرس ایمیل مشتریان، شماره تلفن).
- با PHP می توانید کتاب مهمان یا سیستم نظردهی خود را توسعه دهید.
همچنین HTML در ایجاد ایمیل برای توزیع استفاده می شود.
لینک چیست
آنها به شما امکان می دهند به یک صفحه وب دیگر، هم در داخل سایت و هم در خارج از آن پیمایش کنید.
پیوندهای HTML معمولا استفاده می شود:
- برای رفتن به یک منبع وب خارجی.
- برای حرکت در صفحات داخل سایت.
- برای رفتن به فرم های گوگل.
پیوندی به منبع در HTML نیز اغلب نشان داده می شود، به خصوص که هنگام کپی کردن مطالب از سایت دیگری، باید نویسنده را مشخص کنید. در غیر این صورت، کپی بدون ذکر منبع می تواند تحت تعاریف نقض حق چاپ، سرقت محتوا و نتیجه معکوس قرار گیرد. علاوه بر این، استفاده از مطالب قرض گرفته شده و غیر منحصر به فرد عملکرد سئو را کاهش می دهد و نشان دادن پیوند به منبع خطرات را کاهش می دهد.
انواع پیوند
در مفهوم کلاسیک، پیوند آدرس یک منبع وب است که می توانید با کلیک بر روی آن به آن بروید.
علاوه بر این، پیوندهایی وجود دارد: متن و تصاویر. در این موارد، لینک HTML زیر یک جمله (کلمه) یا تصویر "پنهان" می شود و برای دنبال کردن آن، باید روی متن یا تصویر کلیک کنید.
انواع دیگر پیوندها:
- Unvisited - پیوندی که هنوز در طول یک جلسه خاص روی آن کلیک نشده است. به عنوان مثال، اگر دیروز این پیوند را دنبال کردید، سپس رایانه خود را خاموش کردید، و امروز دوباره آن را روشن کردید، اکنون پیوند دوباره بازدید نشده است، زیرا جلسه جدیدی شروع شده است.
- فعال - در این حالت، پیوند برای مدت زمان بسیار کوتاهی ذخیره می شود: فاصله بین کلیک کردن روی پیوند و دنبال کردن آن.
- بازدید شده - پیوندی که قبلاً حداقل یک بار در طول یک جلسه بازدید شده است.
برای پیوندهای متنی معمولی، پیوندهای بازدید شده تمایل به تغییر رنگ دارند مگر اینکه طور دیگری مشخص شده باشد.
یک عکس هایپرلینک شده ظاهر خود را تغییر نمی دهد، چه بازدید شود یا نه.
چگونه یک پیوند معمولی درج کنیم
بسیاری از منابع وب آدرس سایت را به عنوان یک پیوند درک می کنند، بلافاصله آن را قابل کلیک کرده و آن را با رنگ برجسته می کنند. به عنوان مثال، اگر آدرس در پیام رسان یا ایمیل ارسال شده است، با کلیک بر روی آن، می توانید به سایت مراجعه کنید.
در صورت ایجاد سایت با استفاده از HTML، باید پیوندی را با استفاده از یک برچسب خاص وارد کنید. به این صورت خواهد بود: آدرس وب سایت. متن پیوند در HTML باید به طور کامل با پروتکل مشخص شود.
چگونه یک پیوند متنی درج کنیم
پیشتر گفته شد که یک پیوند متنی همان عملکرد یک پیوند معمولی را انجام می دهد، اما از نظر زیبایی شناختی دلپذیرتر به نظر می رسد: به جای آدرس سایت، که اغلب بی جهت طولانی است، یک کلمه یا عبارت نشان داده شده است. به عنوان مثال، در جمله "در اینجا برای اطلاعات جستجو کنید"، می توانید پیوند را در مخفی کنیدکلمه "اینجا". هایلایت شده و با کلیک بر روی آن کاربر به سایت مورد نظر هدایت می شود.
نحوه ایجاد پیوند HTML قبلاً بحث شده است. می توانید با استفاده از همان تگ یک لینک متنی وارد کنید. تنها تفاوت این است که شما باید بین تگ ها متنی را که لینک در زیر آن پنهان می شود مشخص کنید: متن قابل مشاهده.
نحوه درج ابر پیوند تصویر
اینجا کمی پیچیده تر است. ما از همان تگ استفاده می کنیم، اما به جای متن، باید مسیر تصویر را مشخص کنید.
مسیر مکان تصویر است. اگر تصویر (عکس) در یک سرویس اشتراک فایل قرار دارد، باید تمام پوشه های موجود در مسیر تصویر را از طریق یک اسلش مشخص کنید. همچنین می‌توانید در صورت امکان پیوندی به تصویر اضافه کنید.
برای تگ کردن
علاوه بر src، ویژگی های دیگری نیز قابل استفاده است که به شما امکان می دهد ارتفاع، عرض و مکان تصویر و موارد دیگر را تنظیم کنید. برخی از آنها:
- Src - مسیر تصویر را مشخص می کند.
- Lowsrc - یکسان با ویژگی قبلی است، اما برای تصاویر با کیفیت پایین مشخص شده است.
- ارتفاع - ارتفاع تصویر.
- عرض - عرض آن.
- Alt - توضیحات تصویر. وقتی ماوس را روی یک عکس یا عکس می‌برید، متن مشخص‌شده در این ویژگی ظاهر می‌شود.
- Border - ضخامت حاشیه اطراف تصویر را تعیین می کند.
ویژگی ها بعد از تگ مشخص می شوند و در آن گنجانده می شوندترکیب آن صفت باید با مقدار آن دنبال شود. به عنوان مثال، برای ویژگی های "height" یا "width" (height, width) ارتفاع تصویر را در صفحه وب مشخص می کند. واحد اندازه گیری پیکسل است، مگر اینکه طور دیگری مشخص شده باشد.
به این صورت خواهد بود: <a href="آدرس صفحه وب"
. این ویژگی ها به تنظیم اندازه مناسب برای تصویر کمک می کند. حاشیه به ایجاد یک حاشیه نامرئی در اطراف تصویر کمک می کند.
ویژگی های بالا به طور جداگانه برای تگ درج تصویر اعمال می شوند. به عنوان مثال:.
لینک های لنگر چیست
ایجاد لینک های لنگر یک مهارت بسیار مفید است. اغلب نیاز به چیدمان یک صفحه وب با یک بلوک متن طولانی یا با چندین بخش فرعی در یک صفحه وجود دارد. در این صورت می‌توانید بلافاصله با لیستی از لینک‌های زیربخش‌های متن یا صفحه وب شروع کنید و با کلیک بر روی آنها، کاربر مستقیماً به قسمت درخواستی مراجعه کند.
ایجاد پیوندهای لنگر به استفاده بیشتر از برچسب‌های ویژگی نسبت به سایر انواع پیوندها نیاز دارد.
ابتدا، باید مقدار کلی هر بلوک اطلاعات یا زیربخش متن را با استفاده از ویژگی top تنظیم کنید و سپس آن را با پیوند مربوطه مرتبط کنید.
ویژگی‌های آنها گسترده‌تر است، بنابراین توصیه می‌شود ابتدا بر ایجاد پیوندهای ساده‌تر مسلط شوید و سپس به ساخت پیوندهای لنگر بروید.
نکته
کمک از مجرببرنامه نویسان:
- می توانید آن را طوری بسازید که اطلاعات مربوط به پیوند در حالت شناور در HTML نمایش داده شود. برای این کار، ویژگی alt، که برای عناصر گرافیکی نیز استفاده می‌کنیم، می‌تواند مفید باشد.
- امکان ایجاد لیستی از پیوندها با استفاده از HTML وجود دارد. به‌ویژه، این می‌تواند برای پیوندهای لنگر، و همچنین زمانی که نیاز دارید فهرستی از منابع وب تهیه کنید که می‌تواند توسط پیوندی مستقیماً از صفحه وب فعلی دنبال شود، مفید باشد.
- با کمک CSS و جاوا اسکریپت، و همچنین برخی از توابع HTML، می توانید طراحی متفاوتی از پیوندهای متنی و لینک ها نسبت به معمول ایجاد کنید. به عنوان مثال، هنگامی که ماوس را روی یک لینک می‌برید، می‌تواند رنگ آن را تغییر دهد و زمانی که مکان‌نما از آن دور است، به لینک قبلی بازگردد. این را می توان با یک اسکریپت جاوا اسکریپت سفارشی انجام داد. علاوه بر این، رنگ پیوند را می توان روی چیزی غیر از آبی برای بازدید نشده یا بنفش برای بازدید تنظیم کرد. این کار CSS است.
- از پیوندها سوء استفاده نکنید. یک صفحه وب با پیوندهای نامناسب زیاد، درهم و شلخته به نظر می رسد.
- مطمئن شوید که کاربر متوجه شده است که پیوند با تصویر واقعاً یک تصویر است و نه فقط یک تصویر.
نتیجه گیری
پیوند دادن به یک صفحه در HTML بسیار آسان است. رعایت تمام نکات اصلی این زبان بسیار مهم است، زیرا حتی یک اشتباه کوچک می تواند منجر به این واقعیت شود که هیچ نتیجه ای حاصل نمی شود و کد کار نمی کند.
