آموزش html از ابتدا html اولیه برای مبتدیان به زبان ساده
آموزش html از ابتدا html اولیه برای مبتدیان به زبان ساده
06.04.2019جالب هست
مبانی HTMLحاوی قوانین اساسی زبان HTML، توضیح ساختار یک صفحه HTML، روابط در ساختار یک سند HTML بین عناصر HTML.
یک سند HTML یک سند متنی ساده است، می تواند به همان روشی که در یک ویرایشگر متن معمولی ایجاد می شود. (نوت بوک)، و به صورت تخصصی، با هایلایت کد (Notepad++، Visual Studio Code و غیره). یک سند HTML دارای پسوند .html است.
یک سند HTML از درختی از عناصر و متن HTML تشکیل شده است. هر عنصر در سند منبع با یک تگ شروع (باز کردن) و یک پایان (بستن) (به استثنای موارد نادر) مشخص می شود.
برچسب شروعنشان می دهد که عنصر از کجا شروع می شود، پایان - کجا به پایان می رسد. برچسب بسته شدنبا اضافه کردن یک اسلش / قبل از نام تگ تشکیل می شود:<имя тега> … имя тега>. بین تگ های شروع و پایان، محتوای تگ - محتوا قرار دارد.
تگ های منفرد نمی توانند محتوا را مستقیماً ذخیره کنند، به عنوان یک مقدار مشخصه، به عنوان مثال، یک برچسب نوشته می شود یک دکمه با متن ایجاد می کند دکمهداخل.
برچسب ها را می توان درون یکدیگر قرار داد، به عنوان مثال،
متن
. هنگام سرمایه گذاری، باید ترتیب بسته شدن آنها را رعایت کنید (اصل "ماتریوشکا")برای مثال، ورودی زیر نادرست است:
متن
.
عناصر HTML می توانند ویژگی هایی داشته باشند (جهانی، اعمال شده برای همه عناصر HTML، و مختص به خود). ویژگیها در تگ آغازین یک عنصر نوشته میشوند و حاوی نام و مقدار مشخص شده در فرمت ویژگی name="value" هستند. ویژگی ها به شما این امکان را می دهند که خصوصیات و رفتار عنصری را که برای آن تنظیم شده اند تغییر دهید.
هر عنصر می تواند چندین مقدار کلاس و فقط یک مقدار id داشته باشد. چندین مقدار کلاس با فاصله نوشته می شود،
. مقادیر کلاس و شناسه باید فقط شامل حروف، اعداد، خط تیره و زیرخط باشند و باید فقط با حروف یا اعداد شروع شوند.
مرورگر یک سند HTML را مشاهده میکند (تفسیر میکند)، ساختار آن (DOM) را میسازد و مطابق دستورالعملهای موجود در این فایل (سبکها، اسکریپتها) نمایش میدهد. اگر نشانه گذاری درست باشد، پنجره مرورگر یک صفحه HTML حاوی عناصر HTML - سرفصل ها، جداول، تصاویر و غیره را نشان می دهد.
فرآیند تفسیر (تجزیه)قبل از بارگیری کامل صفحه وب در مرورگر شروع می شود. مرورگرها از همان ابتدا اسناد HTML را به صورت متوالی پردازش می کنند، در حالی که CSS را پردازش می کنند و شیوه نامه ها را به عناصر صفحه مرتبط می کنند.
یک سند HTML از دو بخش - عنوان - بین تگ ها تشکیل شده است
… و محتوا - بین برچسب ها … .
ساختار صفحه وب
1. ساختار سند HTML
زبان HTML از قوانین موجود در فایل اعلان نوع سند پیروی می کند. (تعریف نوع سند یا DTD). DTD یک سند XML است که مشخص می کند کدام برچسب ها، ویژگی ها و مقادیر آنها برای یک نوع HTML خاص معتبر هستند. هر نسخه از HTML دارای DTD خاص خود است.
DOCTYPEمسئول نمایش صحیح صفحه وب توسط مرورگر است. DOCTYPE نه تنها نسخه HTML (به عنوان مثال html)، بلکه فایل DTD مربوطه را در وب نیز تعریف می کند.
...
عناصر درون یک تگ ، تشکیل یک درخت سند، به اصطلاح مدل شیء سند، DOM (مدل شیء سند). در عین حال، عنصر عنصر ریشه است.
برنج. 1. ساده ترین ساختار یک صفحه وب
برای درک تعامل عناصر یک صفحه وب، لازم است به اصطلاح در نظر گرفته شود "نسبت خانوادگی"بین عناصر روابط بین چندین عنصر تودرتو به روابط والدین، فرزند و خواهر و برادر طبقه بندی می شود.
جدعنصری که حاوی عناصر دیگری است. در شکل 1، جد همه عناصر است . در عین حال، عنصر
اجداد تمام برچسب هایی است که شامل آن می شود:
,
, ,
نسل- عنصری که در داخل یک یا چند نوع عنصر قرار دارد. برای مثال،
از نوادگان است ، و عنصر
فرزند هر دو است
و .
عنصر والد- عنصری که با سایر عناصر یک سطح پایین تر مرتبط است و روی درخت بالای آنها قرار دارد. شکل 1
و . برچسب بزنید
فقط والدین به .
عنصر کودک- عنصری که مستقیماً تابع عنصر دیگری از سطح بالاتر است. در شکل 1، فقط عناصر
,
,
و
عنصر خواهر- عنصری که یک عنصر والد مشترک با عنصر مورد نظر دارد که اصطلاحاً عناصر هم سطح هستند. شکل 1
و - عناصر هم سطح و همچنین عناصر
,
و
آنها با یکدیگر خواهر هستند.
1.1. عنصر
1.2. عنصر
فصل
...حاوی اطلاعات فنی در مورد صفحه: عنوان، توضیحات، کلمات کلیدی برای موتورهای جستجو، رمزگذاری و غیره. اطلاعات وارد شده در آن در پنجره مرورگر نمایش داده نمی شود، بلکه حاوی داده هایی است که به مرورگر می گوید که چگونه صفحه را پردازش کند.
1.2.1. عنصر
تگ بخش مورد نیاز
برچسب است . متن قرار داده شده در داخل این تگ در نوار عنوان مرورگر وب نمایش داده می شود. طول عنوان نباید بیشتر از 60 کاراکتر باشد تا به طور کامل در عنوان جای بگیرد. متن عنوان باید حاوی کامل ترین توضیحات در مورد محتوای صفحه وب باشد.
1.2.2. عنصر
تگ بخش اختیاری
یک تگ است . با استفاده از آن، می توانید توضیحاتی از محتوای صفحه و کلمات کلیدی برای موتورهای جستجو، نویسنده سند HTML و سایر ویژگی های ابرداده تنظیم کنید. عنصر می تواند شامل چندین عنصر باشد ، زیرا بسته به ویژگی های مورد استفاده، حامل اطلاعات متفاوتی هستند.
شرح محتوای صفحه و کلمات کلیدی را می توان به طور همزمان به چندین زبان، به عنوان مثال، در روسی و انگلیسی مشخص کرد:
با یک برچسب میتوانید فهرستبندی یک صفحه وب را توسط موتورهای جستجو غیرفعال یا مجاز کنید:
برای بارگیری خودکار صفحه پس از یک دوره زمانی مشخص، باید از مقدار refresh استفاده کنید:
صفحه 30 ثانیه دیگر بارگیری می شود. برای هدایت بازدیدکننده به صفحه دیگر، باید URL را در پارامتر url مشخص کنید:
جدول 2. ویژگی های برچسب
صفت
مجموعه شخصیت ها
رمزگذاری کاراکتر برای سند HTML فعلی را مشخص می کند:
محتوا
حاوی متن دلخواه است که مقدار مرتبط با ویژگی http-equiv یا name را بسته به مقدار آنها مشخص می کند.
http-equiv
اقدامات مرورگر را در این صفحه وب (معادل هدرهای HTTP) کنترل می کند. هنگام نمایش صفحه، مرورگر دستورالعمل های داده شده در ویژگی را دنبال می کند: default-style سبک ترجیحی برای استفاده در صفحه را مشخص می کند. ویژگی محتوا باید حاوی شناسه عنصر باشد ، که به یک شیوه نامه CSS یا شناسه عنصر اشاره دارد
با استفاده از عنصر . عنصر نیازی به تگ بسته شدن ندارد. این عنصر رابطه بین صفحه جاری و سایر اسناد را تعریف می کند. می تواند چندین عنصر از این قبیل در یک صفحه وجود داشته باشد. ورودی به این صورت خواهد بود:
جدول 4. ویژگی های برچسب
صفت
توضیحات، ارزش پذیرفته شده
متقاطع
مشخص می کند که آیا CORS (فناوری مرورگری که به یک صفحه وب اجازه دسترسی به منابع از دامنه دیگری را می دهد) باید هنگام واکشی تصویر از یک سایت استفاده شود یا خیر. ناشناس - در یک درخواست متقابل دامنه، مرورگر به طور خودکار یک سرصفحه Origin حاوی نام دامنه ای که درخواست از آن انجام شده است اضافه می کند. اگر سرور با هدر CORS Access-Control-Allow-Origin: * (یا نام دامنه به جای ستاره) پاسخ ندهد، بارگذاری تصویر مسدود خواهد شد. use-credentials - اگر سرور اعتبارنامه هایی را با Access-Control-Allow-Credentials ارائه ندهد: درست است، در این صورت بارگیری تصویر مسدود می شود.
href
ویژگی اصلی تگ، مقدار مسیر فایل با سبک است.
hreflang
زبان متن را در سند پیوند داده شده مشخص می کند.
رسانه ها
نوع دستگاهی را که قرار است منبع پیوند روی آن اعمال شود، مشخص می کند.
هیچ
یک متغیر رشته ای که به طور تصادفی تولید شده در سمت سرور، قوانین استفاده از سبک های درون خطی را برای محافظت از محتوا تعیین می کند. مقدار مشخصه یک رشته متن است.
رابطه
ویژگی رابطه بین سند جاری و سند ارجاع شده را تعریف می کند. جایگزین - پیوندی به همان سند اما در قالبی متفاوت (مثلاً صفحات قابل چاپ، ترجمه، آینه، RSS یا فید Atom)،
.
بایگانی نشان می دهد که سند پیوند شده دارای علاقه تاریخی است. پیوند می تواند به مجموعه ای از سوابق، اسناد و سایر مطالب اشاره کند. پیوند نویسنده به صفحه مربوط به نویسنده سند یا صفحه با مشخصات تماس نویسنده. نشانک ارجاع به نزدیکترین اجداد مقاله که پیوند است، یا به بخشی از مقاله که بیشترین ارتباط را با عنصر دارد، در صورتی که اجدادی وجود نداشته باشد. خارجی برای نشان دادن اینکه صفحه پیوند داده شده بخشی از این سایت نیست استفاده می شود. ابتدا پیوندی را به اولین سند در دنباله ای از اسناد مشخص می کند. پیوند راهنما به یک سند راهنما icon مسیر آیکون مورد استفاده برای سند فعلی را مشخص می کند. last پیوندی را به آخرین سند در دنباله ای از اسناد مشخص می کند. مجوز پیوندی به اطلاعات حق چاپ سند. next نشان می دهد که این سند بخشی از یک سری است و پیوند به سند بعدی در سری اشاره دارد.
nofollow نشان می دهد که لینک مورد تایید نویسنده صفحه نیست و یا اینکه لینک تجاری است. noreferrer مشخص می کند که هدر درخواست مشتری حاوی آدرس منبع درخواست نباید هنگام دنبال کردن پیوند ارسال شود. pingback آدرس سرور pingback را مشخص میکند که به وبلاگ اجازه میدهد تا به صورت خودکار سایتهایی را که به آن پیوند دارند اطلاع دهد. prefetch مشخص می کند که فایل ارجاع شده باید از قبل ذخیره شود. prev نشان می دهد که این سند بخشی از یک سری است و پیوند به سند قبلی در سری اشاره دارد.
جستجو نشان می دهد که سند ارجاع شده حاوی یک رابط جستجو و منابع مرتبط است. نوار کناری نشان می دهد که سند پیوند شده، در صورت امکان، در یک زمینه مرورگر اضافی نشان داده می شود، و برخی از مرورگرها، هنگامی که بر روی پیوند کلیک می شود، پنجره ای برای افزودن پیوند به نوار نشانک ها باز می شود. stylesheet یک مرجع به یک فایل خارجی است که به عنوان شیوه نامه برای این سند استفاده می شود. تگ نشان می دهد که برچسبی که هایپرلینک به آن منتهی می شود متعلق به این سند است. بالا نشان می دهد که صفحه بخشی از یک ساختار سلسله مراتبی است و این که هایپرلینک به یک منبع سطح بالاتر در ساختار منجر می شود.
اندازه ها
اندازه نمادها را برای نمایش بصری مشخص می کند. ویژگی sizes فقط همراه با rel="icon" استفاده می شود و می تواند مقادیر زیر را داشته باشد: widths height - فهرستی از اندازهها را مشخص میکند که با فاصلهها از هم جدا شدهاند، هر اندازه باید در قالب باشد - عرض ارتفاع (اندازه نمادها بر حسب پیکسل مشخص شده است)، به عنوان مثال:
; هر - نماد را می توان به هر اندازه بزرگ کرد.
عنوان
عنوان پیوند یا نام مجموعه شیوه نامه های جایگزین را مشخص می کند. مقدار مشخصه متن است.
نوع
نوع MIME سندی که به آن پیوند داده می شود را مشخص می کند. در این مورد، مقدار "text/css" را می گیرد.
1.2.5. عنصر
Таблица 5. Атрибуты тега
این تگبه شما امکان می دهد متن برنامه اسکریپت را از سایر اطلاعات موجود در صفحه جدا کنید. تگ SCRIPT باید شامل ویژگی زبان باشد که زبان را تعریف می کند و می تواند مقادیر زیر را بگیرد:
جاوا اسکریپت - کد جاوا اسکریپت؛
vbscript - کد VBScript.
ویژگی type همچنین می تواند نوع زبان را نشان دهد، اگرچه استفاده از آن اختیاری است. برای اینکه همه قوانین را زیر پا نگذارید، می توانید تعریف زیر را در داخل عنصر قرار دهید:
type="text/javascript"
یکی از جالب ترین ویژگی های اسکریپت نویسی، امکان تغییر محتوای یک صفحه در نتیجه اجرای برنامه است. اما این فقط یک ویژگی است، نه یک قانون. ویژگی defer (که ارزشی ندارد) می تواند برای "گفتن" به مرورگر استفاده شود که چنین تغییراتی ایجاد نخواهد شد. در برخی موارد، این به شما امکان می دهد سرعت بارگذاری صفحه را افزایش دهید.
از ویژگی های استاندارد، می توانید از ویژگی charset استفاده کنید.
برچسب اسکریپت ( یا تعدادی از این عناصر) را می توان در داخل یک عنصر HEAD یا داخل یک عنصر BODY قرار داد. اگر اسکریپت داخل عنصر BODY باشد، ممکن است برخی از مرورگرهایی که از عنصر SCRIPT پشتیبانی نمیکنند، کد برنامه را به صورت متن ساده درک کرده و روی صفحه نمایش دهد. برای جلوگیری از این اتفاق، کد اسکریپت به عنوان نظر وارد می شود:
- - -
همه چیز مرورگرهای مدرناین ترفند را بشناسید و کاراکترهای نظر را نادیده بگیرید. اگر نیاز به وارد کردن نظر در متن اسکریپت دارید، از نماد دیگری برای این کار استفاده می شود: دو اسلش // در ابتدای خط وارد می شود. کد برنامهاسکریپت در زمان بارگذاری صفحه اجرا می شود، یعنی. در حالی که محتوا هنوز روی صفحه قابل مشاهده است. در زیر نمونه ای از یک اسکریپت ساده ( نمایش یک پیام در یک پنجره).
- -
- - فقط یک فیلمنامه - - - -
این صفحه ساده، اما شامل یک اسکریپت یک خطی است. روش هشدار یک پیام را قبل از بارگیری نمایش می دهد. و تا زمانی که کاربر روی دکمه OK کلیک نکند هنگ خواهد کرد، دانلود ادامه خواهد داشت. ممکن است موردی وجود داشته باشد، برای مثال، صفحه در مرورگری مشاهده شود که از اسکریپت پشتیبانی نمی کند، برای این عنصر NOSCRIPT ارائه شده است. بینندگان مدرن محتوای آن را نادیده می گیرند. از این عنصر می توان به روش های مختلفی استفاده کرد. برای شروع، می توانید تبلیغی مانند این را در داخل آن نمایش دهید: مرورگر شما نمی تواند اسکریپت مورد نیاز برای مشاهده این صفحه وب را اجرا کند!» ثانیاً، در داخل عنصر، می توانید یک نسخه ساده شده از صفحه، بدون اسکریپت ایجاد کنید. ثالثاً، می توانید پیوندی به سند HTML دیگری ایجاد کنید. عنصر NOSCRIPT باید دارای یک تگ پایان باشد.
در اینجا ما با شما هستیم و اصول اولیه آن را در نظر می گیریم زبان وب-برنامه نویسی مانند HTML حتی پس از خواندن این مقاله کوتاه، از قبل یک ایده و حتی توانایی برنامه نویسی به این زبان دارید. موفق باشید!
تصمیم گرفتم به مبتدیانی که می خواهند در زمینه سایت سازی دانش کسب کنند بیشتر توجه کنم. این توسط معلم من تحریک شد، او اشتباهات زیادی در کتابچه راهنمای کار آزمایشگاهی مرتکب شد. من خیلی دوست دارم به منبعی که infa آموزشی از آن گرفته شده است نگاه کنم و چند خط از نظر خود را آنجا بگذارم. اما اکنون در مورد آن نیست. در اولین سخنرانی خود در مورد آن صحبت خواهم کرد
ساختار یک سند HTML چیست؟
برچسب بزنید نشان می دهد که ساختار سند html در حال شروع است، - که به پایان می رسد. بین تگ ها در بیشتر اطلاعات مرورگر و موتورهای جستجو ذخیره می شود. در برچسب ها شامل عنوان صفحه ما است. برچسب بزنید نشان می دهد که اطلاعات بیشتر برای کاربر در نظر گرفته شده است، estesstvenno می گوید که اطلاعات برای کاربر به پایان می رسد.
حالا بگذارید کمی توضیح بدهم. همه برچسب ها ( برچسب - عنصری از زبان نشانه گذاری فرامتن) به دو نوع «تک» و «بسته» تقسیم می شوند. علاوه بر این، برچسب ها با کاراکترهای زیر محصور شده اند <
و >
، آنها هستند که برچسب را متمایز می کنند از متن ساده html. برخی از ساده ترین تگ های "تک" را در نظر بگیرید:
- برچسبی که وظیفه پیچیدن به یک خط جدید را بر عهده دارد، در محلی که این تگ تنظیم شده است. بیایید با استفاده از این تگ به کد نگاه کنیم.
اولین سایت من
سلام به همه! و این اولین سایت من است.
نتیجه قابل مشاهده است.
- برچسبی که یک خط افقی می کشد. این تگ برای عناصر بلاک اعمال می شود، خط همیشه از یک خط جدید شروع می شود. دارای 5 ویژگی:
align - تراز خط را تعیین می کند. می تواند مقدار چپ، مرکز، راست را بگیرد.
color - رنگ خط را تنظیم می کند.
noshade - یک خط بدون جلوه های سه بعدی ترسیم می کند.
اندازه - عرض خط را تنظیم می کند.
عرض - عرض خط را تنظیم می کند.
با استفاده از تگ کد کنید :
اولین سایت من
سلام به همه! و این اولین سایت من است.
یک نمونه بصری قرار گرفته است.
یکی دیگر از برچسب های "تک" است . این تگ برای ذخیره اطلاعات در نظر گرفته شده برای مرورگرها و موتورهای جستجو استفاده می شود. موتورهای جستجو به دنبال برچسب های متا برای توضیحات سایت، کلمات کلیدی و سایر داده ها هستند. تعداد نامحدودی متا تگ مجاز است، همه آنها باید بین باشند و . پارامترهای هر متا تگ دارای شکل "name=value" است که با تعیین می شود کلید واژه هامحتوا, نامیا http-equiv. زیرا متا تگ ها برای ماشین ها هستند، هیچ تغییر بصری ایجاد نمی کنند، بنابراین من فقط کد منبع را می دهم:
این خط می گوید که سازنده صفحه فکر می کند که صفحه از رمزگذاری UTF-8 استفاده می کند. در HTML5 همه چیز ساده تر شده است، برای تعیین رمزگذاری، فقط خط زیر کافی است: