منابع مبتذل html. دستور العمل های HTML5: با مثال های عینی وارد کدنویسی HTML5 شوید. سیاست در زمینه ارتباط کار کمیته با طرف های خارجی و حفظ اسناد

کیست در دنیا شیرین تر از همه، همه سرخ و خواستنی؟ به هیچ چیز مبتذل فکر نکنید، منظور من فقط یک نسخه جدید از زبان نشانه گذاری است - HTML5. آخرین نسخه‌های مرورگرهای مدرن از قبل برخی از ویژگی‌های HTML5 را درک کرده‌اند، به این معنی که زمان آن رسیده است که از آن در پروژه‌های خود استفاده کنید.

در نگاه اول، HTML5 فقط یک نسخه جدید از زبان نشانه گذاری است. اما اکنون این اصطلاح به معنای چیز دیگری است. در نظر گرفتن HTML5 بدون ذکر همان CSS3 به سادگی مضحک است، زیرا توسعه برنامه های کاربردی وب واقعاً مدرن ضروری است. ما نباید جاوا اسکریپت را فراموش کنیم. این یک فراخوانی به API غنی توصیف شده در استاندارد HTML5 را اجرا می کند. با خلاصه کردن همه موارد فوق، یک تعریف خود را نشان می دهد: HTML5 مجموعه ای از فناوری ها / استانداردهای مدرن (JS، HTML5، CSS3 و غیره) است که برای توسعه برنامه های کاربردی وب استفاده می شود.

HTML5 به هیچ وجه به وجود نیامده است. توسعه آن در سال 2007 آغاز شد. یک گروه ویژه ایجاد شده از کنسرسیوم W3C مسئول فرآیند توسعه بود. اما بسیاری از ویژگی های HTML5 به عنوان بخشی از استاندارد Web Application 1.0 ابداع شد و از سال 2004 بر روی آن تمرکز کرد. بنابراین در واقعیت، HTML5 آنقدرها که در نگاه اول به نظر می رسد، فناوری جوانی نیست.

اولین نسخه پیش نویس مشخصات HTML5 در 22 ژانویه 2008 در دسترس قرار گرفت. سه سال می گذرد، اما نسخه نهایی مشخصات هنوز آماده نیست و بعید است در یکی دو سال آینده به موقع برسد. این لحظه غم انگیز توسعه دهندگان را ملزم می کند تا ویژگی های جدید را با دقت در پروژه های خود اعمال کنند. مشخصات به راحتی می تواند تغییر کند و همه مرورگرهای مدرن (FireFox 4، Google Chrome 10، IE9، Opera 11) به طور کامل از ویژگی های جدید پشتیبانی نمی کنند.

شما می توانید برای مدت طولانی در مورد تئوری HTML5 صحبت کنید، اما روبریک ما "Coding" نام دارد، بنابراین پیشنهاد می کنم در عمل امکانات استاندارد را احساس کنید. من زحمت ایجاد دستور العمل های فوق العاده اصلی را به خود ندادم، اما تصمیم گرفتم نمونه هایی از چیزهایی را ارائه دهم که واقعاً مفید هستند و می توانید و باید در حال حاضر در سایت های خود از آنها استفاده کنید. پس بزن بریم.

یکی از چیزهای خوب (احتمالاً نباید از نوشیدنی‌های انرژی‌زای زیادی استفاده می‌کردید، زیرا باید کلمه "تراشه" وجود داشته باشد - ed.) HTML5 توانایی استفاده از File API و Drag and Drop API بود.

با کمک آنها می توانید انتقال زیبایی از فایل ها از کامپیوتر کاربر به سرور را سازماندهی کنید. آیا به یاد دارید، قبلاً همیشه یک فیلد با دکمه "Browse" برای ارسال فایل وجود داشت؟ پس از فشار دادن آن، یک گفتگوی استاندارد انتخاب فایل ظاهر شد که در آن لازم بود فایلی را برای انتقال انتخاب کنید. برای فراخوانی این روش زبان راحت نمی چرخد. به خصوص در مورد افزودن چندین فایل به صف دانلود.

کمی بعد، صنعتگران شروع به مجسمه سازی apploaders روی فلش کردند، که عملکرد بیشتری را ارائه می کرد، اما یک اشکال جدی داشت - نیاز به فلش نصب شده. علاوه بر این، در هر دو مورد، کاربر توانایی اضافه کردن فایل‌ها برای انتقال را با کشیدن و رها کردن ماوس روی صفحه نداشت.

اما فناوری Drag & Drop همیشه در سیستم استفاده می شود. من شخصاً همیشه می خواستم فقط فایل های لازم را انتخاب کنم و با کشیدن انگشت موش به صفحه پرت کنم. این بسیار راحت‌تر از جستجوی فایل با استفاده از یک گفتگوی استاندارد است.

HTML5 تنظیمات خود را انجام داده است و اکنون هیچ چیز مانع از سازماندهی یک Drag & Drop کامل برای انتقال یک فایل به یک صفحه نمی شود. کارمندان گوگل در جیمیل اولین کسانی بودند که این ویژگی را اجرا کردند. اگر از gmyla استفاده می کنید، احتمالاً متوجه منطقه ای شده اید که می توانید فایل ها را برای پیوست به نامه بکشید. من شخصاً به طور فعال از این تابع استفاده می کنم و اکنون به شما نشان خواهم داد که چگونه آن را برای پروژه خود فعال کنید. پروژه ما از سه فایل تشکیل شده است: sample.html، style.css و scripts.js. البته، می‌توانستیم خود را به یک فایل html محدود کنیم، اما پس از آن کد غیرقابل خواندن بود. نیازی به ترکیب HTML با JS یا CSS نیست. بهتر است همه چیز را به فایل تقسیم کنید و سپس با آرامش با آنها کار کنید. اول از همه، بیایید ساختار برنامه خود را آماده کنیم. یک فایل sample.html ایجاد کنید و در آن بنویسید:

فایل های خود را به اینجا بکشید

برای راحتی نوشتن کد جاوا اسکریپت، کتابخانه jquery را قرار دادم. پس از آن، ساختار سند html آینده را توضیح داد. رسوایی ساده است - ما باید فیلدی را که کاربر باید فایل‌ها را به آنجا بکشد و رها کند، توصیف کنیم. این فقط به یک ظرف div نیاز دارد. اگر اکنون صفحه را در یک مرورگر باز کنید، چیز خوبی نخواهید دید. برای اینکه فیلد ما به صورت بصری قابل مشاهده باشد، باید آن را با CSS استایل کنیم. فایل style.css را باز کنید و کد زیر را در آن بنویسید:

#جعبه(
عرض: 500 پیکسل
ارتفاع: 300px;
حاشیه: 2px خط چین #000000;
پس زمینه رنگ: #FCFFB2;
text-align: center;
رنگ: #3D91FF;
اندازه فونت: 2em
font-family: Verdana, sans-serif;

moz-border-radius: 8px;
-webkit-border-radius: 8px.
}
# برچسب (
موقعیت: نسبی;
بالا: 2%;
}

شناسه "box" محفظه آینده ما برای دریافت فایل ها است (کاربر باید اسناد را به این قسمت بکشد). برای اینکه کاربر از دست ندهد، منطقه را بزرگتر می کنم و خط چین را به عنوان گزینه کادربندی انتخاب می کنم - خطوط نقطه چین. خطوط معمولی نقطه چین خوب به نظر نمی رسند، بنابراین من بلافاصله مقادیر را برای ویژگی ها تنظیم کردم: -moz-border-radius و -webkitborderradius. اکنون می توانید صفحه ایجاد شده را در مرورگر باز کرده و نمای کلی را ارزیابی کنید.

با این حال، اگر اکنون سعی کنید چیزی را بکشید، هیچ اتفاق جالبی نمی افتد. فایل کشیده شده به سادگی در یک مرورگر وب باز می شود، و تمام. یک قطعه کوچک از کد جاوا اسکریپت به رفع این وضعیت کمک می کند:

$(document).ready(function() (

//افزودن کنترل کننده رویداد

Var mybox = document.getElementById("جعبه")

Mybox.addEventListener("dragent"، dragEnter، false);

Mybox.addEventListener("dragexit"، dragExit، false);

Mybox.addEventListener("dragover"، dragOver، false);

Mybox.addEventListener("drop"، drop، false);
});
تابع dragEnter(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
تابع dragExit(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
تابع dragOver(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
افت تابع (evt) (

Evt.stopPropagation();

Evt.preventDefault();

Varfiles = evt.dataTransfer.files;

varcount = files.length;

اگر (شمارش > 0)

HandleFiles (فایل)؛
}
تابع handleFiles(فایل ها) (

//اولین فایل را دریافت کنید

//اگر نیاز به کار با چندگانه دارید

//files، سپس در اینجا باید یک جستجو را سازماندهی کنید

فایل var = فایل ها;

Document.getElementById("label").innerHTML =
"Caught: " + file.name;

varreader = new FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(file);
}
تابع handleReaderProgress(evt) (

If(evt.lengthComputable)(

اگر (evt.loaded = evt.total) (

هشدار ("در حال بارگیری...");
}
}
}

در نگاه اول، ممکن است این کد دست و پا گیر و نامفهوم به نظر برسد، اما کسانی که حداقل کمی با جاوا اسکریپت و جی کوئری آشنایی دارند، باید فورا بفهمند که چه اتفاقی می افتد. در همان ابتدا اتفاقاتی را تعریف می کنم که وقوع آنها برایم جالب است. برای هر یک از آنها، من یک عملکرد جداگانه را توضیح می دهم. برای مثال، رویداد dragExit زمانی رخ می‌دهد که کاربر مکان‌نمای ماوس را از عنصری که در حال کشیده شدن است خارج می‌کند. اگر کاربر فایلی را کشیده باشد، تابع handleFiles() کنترل را به دست می‌گیرد.

در آن عمدا به اولین فایل (فایل ها) مراجعه می کنم و شروع به کار با آن می کنم. لطفاً توجه داشته باشید که کاربر می تواند چندین فایل را به طور همزمان بکشد. اگر برنامه شما باید بتواند چنین موقعیت هایی را مدیریت کند، آنگاه شمارشی از کل آرایه فایل ها را سازماندهی می کنیم. تابع handleFiles () جایی است که همه سرگرمی ها اتفاق می افتد.

ابتدا، در عنصر برچسب («فایل های خود را به اینجا بکشید» را به خاطر دارید؟) نام فایلی را که کاربر روی هات اسپات کشیده است نمایش می دهم و سپس با استفاده از یک شی از نوع FileReader () شروع به خواندن آن می کنم. می توانید در این مقاله بیشتر در مورد آن بخوانید: html5rocks.com/tutorials/file/dndfiles. در هر صورت، من یک کنترل کننده رویداد onProgress برای یک شی از نوع FileReader() تعریف می کنم. این رویداد هر بار که تکه ای از داده خوانده می شود فراخوانی می شود. در خود کنترلر، من یک شرط گذاشتم: اگر مقدار داده های بارگیری شده با اندازه فایل برابر باشد، خواندن با موفقیت انجام شد و می توانید یک پیام شاد نمایش دهید.

قبل از ظهور HTML5، مشاهده ویدیو در وب با استفاده از انواع فلش پلیرها انجام می شد. این بدان معنا نیست که تماشای یک ویدیو به این شکل ناخوشایند است. فقط مشکلات امنیتی (اخیراً Flash Player فقط مملو از آسیب پذیری ها شده است) و نیاز به نصب خود افزونه وجود دارد. استاندارد HTML5 یک راه حل زیبا ارائه می دهد - توانایی داخلی برای پخش محتوای ویدیویی و صوتی.

احتمالاً خیلی ها قبلاً حدس زده اند که من در مورد برچسب ها و . آنها به شما اجازه می دهند صدا و تصویر را مستقیماً در صفحه جاسازی کنید. تنها ناامیدی که باید با آن روبرو شوید مجموعه کدک های پشتیبانی شده است. افسوس که این مجموعه برای هر مرورگر متفاوت است، بنابراین احتمال زیادی وجود دارد که ویدیوی شما به طور کامل در کروم نمایش داده شود و کاربران فایرفاکس جنگل را ترک کنند. برای اینکه در چنین وضعیتی قرار نگیرید، توصیه می شود از یک شبکه ایمنی مراقبت کنید - پخش ویدیو با استفاده از پخش کننده فلش. در مورد nyashki (نه، از این گذشته، او کلمات را با هم قاطی نکرد، او برای اعتیاد به انیمه باید با الکتروشوک درمان شود - یادداشت لوزوفسکی) و در مورد مشکلات صحبت شد، حالا بیایید به تمرین برویم. برای نمایش پخش ویدیو، یک مثال ساده زدم:

اینجا باید ویدیو باشه اگر این متن را می بینید، مرورگر شما از استاندارد جدید پشتیبانی نمی کند.

لطفا توجه داشته باشید که در مثال برای برچسب، من ویژگی پوستر را مشخص کردم. در آن، من مسیر فایل گرافیکی را مشخص می کنم که باید بلافاصله پس از بارگیری صفحه نمایش داده شود - "فرست اول".

برای چه چیزی می تواند مفید باشد؟ همچنین، می توانید لوگوی شرکت/پروژه خود را به عنوان چنین تصویری درج کنید. تگ به همین ترتیب اعمال می شود. این به شما امکان می دهد چندین منبع را به طور همزمان برای یک فایل رسانه مشخص کنید. بنابراین، شما می توانید همان فایل را در فرمت های مختلف (ogg، mp3) ارسال کنید. اگر مرورگر کاربر کدک mp3 نداشته باشد، سعی می شود ogg را پخش کند. به نظر می رسد که از طریق دستکاری های ساده می توان مشکل سازگاری را حل کرد و مطمئن بود که کاربر قادر به تولید مجدد محتوا خواهد بود.

Geolocation API - یک رابط برنامه نویسی برای تعیین مختصات کاربر. بر اساس داده های به دست آمده، به راحتی می توان مکان کاربر را مثلاً در Google Maps علامت گذاری کرد. کجا می توان از این ویژگی استفاده کرد؟ بله خیلی جاها! به عنوان مثال، توسعه دهندگان سرویس میکروبلاگینگ محبوب توییتر از API Geolocation در رابط وب کلاینت توییتر استفاده می کنند. اگر کاربر اجازه دریافت اطلاعات مربوط به موقعیت مکانی خود را بدهد، شهری که در حال حاضر در آن قرار دارد به تمام توییت‌های او اضافه می‌شود.

من شک ندارم که اکنون شما با این سؤال عذاب می‌شوید: "GAPI اطلاعات مکان خود را از کجا می‌آورد؟". حتی فکر نکنید که ماهواره های جاسوسی و سایر موارد باند در این پرونده دخالت دارند. همه چیز بسیار ساده تر است - بسته ای از اطلاعات برای تجزیه و تحلیل مبتنی بر داده های مربوط به آدرس IP، نزدیکترین نقاط اتصال Wi-Fi، GPS (اگر دستگاه دارید)، شناسه سلول GSM و غیره است. اگر به تئوری و عمل به دست آوردن مختصات تقریبی از منابع ذکر شده در بالا علاقه مند هستید، به شما توصیه می کنم فایل را باز کنید ][ و مقاله Step را در مورد این موضوع پیدا کنید، جایی که او به طور کامل بخش نظری را تجزیه و تحلیل کرد و همچنین یک مرور کلی ارائه کرد. از نرم افزار مربوطه حال بیایید نمونه ای از استفاده از GAPI را بررسی کنیم. همه چیز بسیار ساده و واضح است:

if (navigator.geolocation) (
navigator.geolocation.getCurrentPosition(
عملکرد (موقعیت) (
document.getElementById("Latitude").innerHTML =
موقعیت.کوردها.طول عرض;
document.getElementById("طول جغرافیایی").innerHTML =
موقعیت.کوردها.طول جغرافیایی;
},
);
}

عرض جغرافیایی: ناشناخته

طول جغرافیایی: نامعلوم

قبل از تلاش برای بدست آوردن مختصات، باید مطمئن شوید که مرورگر از GAPI پشتیبانی می کند. اگر روش موقعیت جغرافیایی درست را برگرداند، پس همه چیز خوب است و می توانید سعی کنید مختصات را بدست آورید. برای این کار از متد getGurrentPosition شی ناوبری استفاده می کنیم. در صورت موفقیت، مختصاتی را دریافت می کنیم که مستقیماً به سند می رود.

هنگام توسعه برنامه های کاربردی وب، ما به استفاده از پایگاه های داده عادت داریم. MySQL، SQLite محصولاتی هستند که برای هر برنامه نویسی آشنا هستند. نسخه پنجم HTML هدیه دیگری را برای ما به ارمغان می آورد - توانایی استفاده از پایگاه داده SQLite مستقل. متوقف کردن!

معلوم می شود که تمام داده ها در رایانه کاربر ذخیره می شود؟ بله دقیقا. نیازی به فریاد زدن نیست که ایمن نیست. برای پروژه های خاص، این ویژگی ممکن است به خوبی مفید باشد. متأسفانه همه مرورگرها به شما اجازه کار با این پایگاه داده را نمی دهند.

به عنوان مثال، IE9 و FF4 هنوز چنین فرصتی ندارند، بنابراین شما فقط می توانید به طور عملی در گوگل کروم با تراشه آشنا شوید. من مثالی از کد واقعی نمی زنم، بلکه فقط اصل کلی عملکرد را نشان می دهم:

this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("ایجاد mytable اگر وجود ندارد" +
"checkins (شماره صحیح کلید اولیه asc، فیلد_شماره_یک رشته)"،
, function() ( console.log("درخواست با موفقیت انجام شد"); ));
);

با نگاه دقیق تر به مثال بالا، متوجه خواهید شد که به طور کلی، کار با پایگاه داده تعبیه شده دقیقاً مانند SQLite معمولی است: پایگاه داده را باز می کنیم، متن پرس و جو را آماده می کنیم و آن را اجرا می کنیم.

اینکه آیا از HTML5 در پروژه های خود استفاده می کنید یا نه به شما بستگی دارد. فکر کنم الان وقتشه اگر به طور حرفه ای در توسعه وب سایت مشغول هستید، در حال حاضر برای جاسازی ویژگی های HTML5 تنبل نباشید. البته، مراقبت از سازگاری را فراموش نکنید - هم از مرورگرهای مدرن و هم برای مرورگرهای قدیمی پشتیبانی کنید. شما هر آنچه برای این کار نیاز دارید دارید. سرعت خود را کم نکنید و سعی کنید پروژه های خود را از بقیه متمایز کنید. موفق باشید!

در طول این مقاله، من گفته‌ام که مرورگرهای مدرن در حال حاضر از مقادیر متفاوتی از ویژگی‌های HTML5 پشتیبانی می‌کنند. به همین دلیل است که باید مراقب باشید و سعی کنید از چیزهای بسیار عجیب و غریب استفاده نکنید. بلافاصله این سوال مطرح می شود: "چگونه می دانید که یک مرورگر خاص از کدام ویژگی های HTML5 پشتیبانی می کند؟" راه های مختلفی برای انجام این کار وجود دارد، اما مورد علاقه من کتابخانه کوچک جاوا اسکریپت Modernizr (modernizr.com) است.

این کتابخانه کاملاً رایگان توزیع می شود و هنگامی که آن را به پروژه خود وصل کردید، بلافاصله لیستی از ویژگی های HTML5 را که مرورگر شما پشتیبانی می کند نمایش می دهد. برای آزمایش عملکرد یک کتابخانه، لازم نیست فورا آن را دانلود کرده و به پروژه خود متصل کنید. شما فقط باید به وب سایت رسمی کتابخانه بروید و بلافاصله خواهید دید که واکر شما چه چیزی را پشتیبانی می کند و چه چیزی را پشتیبانی نمی کند. تصاویری از بازدید از سایت با استفاده از گوگل کروم و اینترنت اکسپلورر 9 را مشاهده کنید. علیرغم مقالات خوب برای شرکت و ستایش، واضح است که rpg مایکروسافت از ویژگی های کمتری نسبت به Google Chrome پشتیبانی می کند.

یکی از جالب ترین ویژگی های HTML5 امکان ساخت انیمیشن است. این با ترکیب HTML5 و CSS3 به دست می آید.

چنین انیمیشنی بسیار زیبا به نظر می رسد و در بسیاری از موارد می تواند جایگزین فلش شود. می توانم با اطمینان بگویم که خیلی زود نمی شود، زیرا اکنون تسلط بر Flash آسان تر از درک کدهای مبهم HTML5/CSS3 (IMHO) است. با این وجود، شما باید در مورد چنین قابلیتی بدانید. اکیداً توصیه می کنم از طریق لینک های زیر بروید و با چشمان خود دموهای زیبایی را ببینید که امکان انیمیشن را نشان می دهد.

• نسخه ی نمایشی خوبی که ویژگی های Canvas را نشان می دهد: feedtank.com/labs/html_canvas ;
• یک جعبه سه بعدی زیبا با نوار جستجوی داخلی از گوگل: ;
• با یک کلیک ماوس، صفحه با توپ پر می شود. کلیک های بیشتر - توپ های بیشتر. همانطور که صفحه را تا لبه پر می کنید - سعی کنید آنها را به شدت بکشید. خیلی خنده دار به نظر می رسد: mrdoob.com/projects/chromeexperiments/ball_pool ;
• فقط یک نسخه نمایشی عالی که ترکیبات شیمیایی مختلف را نشان می دهد. قطعا ارزش دیدن دارد: alteredqualia.com/canvasmol ;
• آیا تا به حال خواسته اید که احساس آسیب شناسی کنید و اسرار بدن انسان را کشف کنید؟

اگر بله، پس این لینک برای شما مناسب است. گوگل یک نسخه نمایشی عالی از ترکیبی از فناوری های WebGL، HTML5، CSS3 و Flash ساخته است. نتیجه این کوکتل یک برنامه تعاملی بود که بدن انسان را به صورت سه بعدی نشان می دهد که در آن می توانید ساختار اندام های داخلی را ببینید. وقتی برای اولین بار او را دیدم، نتوانستم آن را زمین بگذارم.

برای کمک به شما، مجموعه‌ای از منابع را گردآوری کرده‌ایم که به شما می‌گوید چه چیزی باید بدانید، به شما کمک می‌کند وقتی گیر کردید، و به شما کمک می‌کند مهارت‌های خود را در کمترین زمان ممکن گسترش دهید.

این برگه تقلب HTML فوق العاده مفید شامل یک لیست کامل از تمام عناصر HTML به همراه توضیحات، نمونه کد و پیش نمایش زنده است. می توانید برچسب ها را بر اساس حروف الفبا یا بر اساس دسته بندی سازماندهی کنید و حتی آن را به صورت PDF دانلود کنید تا بعداً به آن مراجعه کنید.

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

هنگامی که در سال 2007 راه اندازی شد، این سایت تماماً در مورد CSS بود. در حال حاضر "بسیار کمی گسترش یافته است، اما هنوز اطلاعات و آموزش های مفید زیادی در مورد CSS و HTML وجود دارد که می توانید در آنها گیر کنید. قطعا ارزش دیدن را دارد.

یادگیری CSS آسان است اما تسلط بر آن دشوار است. هری رابرتز" CSS Wizardry برخی از بهترین مقالات را در زمینه نوشتن CSSهای مقیاس پذیر و قابل نگهداری مانند متدولوژی BEM و refactoring (که از سخت ترین بخش ها هستند) دارد.

یکی از بهترین راه‌ها برای یادگیری HTML/CSS این است که نسخه‌های نمایشی جالبی را که کشف می‌کنید کالبدشکافی کنید، و بهترین قلم‌های سالانه CodePen برای این کار عالی هستند. دموها از جالب تا «حتی نمی‌دانستم ممکن است» متغیر است. رابط کاربری یکپارچه CodePen برای غواصی در کد نیز راحت است. در همین راستا، ممکن است دوست داشته باشید پست ما را نیز بررسی کنید.

HTML و CSS هر دو به طور مداوم در حال تکامل هستند. برای به‌روز ماندن با آخرین روش‌ها و ویژگی‌ها، این خبرنامه ایمیلی را توصیه می‌کنیم. این یک بار در هفته می آید، که اغلب به اندازه ای است که شما واقعا آن را بخوانید.

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

آخرین به روز رسانی در 09 نوامبر 2019، 06:54:54 (UTC/GMT +8 ساعت)

HTML مخفف Hyper Text Markup Language است که برای ایجاد صفحات وب و همچنین انواع دیگر اسناد قابل مشاهده در یک مرورگر وب استفاده می شود.

HTML استانداردی است که توسط کنسرسیوم وب جهانی مشخص و نگهداری می شود.

HTML از زمان اختراع خود، از طریق نسخه های مختلف تکامل یافته است. نسخه فعلی HTML HTML 4.01 است.

نسخه بعدی HTML HTML 5 است که در حال توسعه است اما توسعه دهندگان قبلاً شروع به استفاده از برخی از ویژگی های آن کرده اند.

در صفحات بعدی به طور مفصل به HTML 4.01 خواهیم پرداخت. با یادگیری آن، می توانید صفحات وب را خودتان ایجاد کنید.

کد HTML یک صفحه وب ساده

یک صفحه نمونه HTML این یک صفحه نمونه HTML است

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi vel lacus euismod egestas. در hac habitasse platea dictumst. در sagittis magna eu odio interdum mollis. Phasellus sagittis pulvinar facilisis. Donec vel odio volutpat tortor volutpat commodo. Donec vehicula vulputate sem، vel iaculis urna molestie eget. Sed pellentesque adipiscing Tortor, at condimentum elit elementum sed. Mauris dignissim elementum nunc، non elementum felis condimentum eu. In in turpis quis erat imperdiet vulputate. Pellentesque mauris turpis، dignissim sed iaculis eu، euismod eget ipsum. Vivamus mollis adipiscing viverra. Morbi at sem eget nisl euismod porta. Sed semper، tortor eu molestie iaculis، felis massa vestibulum massa، vitae suscipit arcu nunc quis ante. Phasellus aliquam elit در nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. قابلیت تعلیق Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan velit sed lacus pellentesque in gravida nunc ultrices. Aliquam varius scelerisque erat ut egestas.

HTML را از سایت یاد بگیرید

این یک صفحه نمونه HTML است

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi vel lacus euismod egestas. در hac habitasse platea dictumst. در sagittis magna eu odio interdum mollis. Phasellus sagittis pulvinar facilisis. Donec vel odio volutpat tortor volutpat commodo. Donec vehicula vulputate sem، vel iaculis urna molestie eget. Sed pellentesque adipiscing Tortor, at condimentum elit elementum sed. Mauris dignissim elementum nunc، non elementum felis condimentum eu. In in turpis quis erat imperdiet vulputate. Pellentesque mauris turpis، dignissim sed iaculis eu، euismod eget ipsum. Vivamus mollis adipiscing viverra. Morbi at sem eget nisl euismod porta. Sed semper، tortor eu molestie iaculis، felis massa vestibulum massa، vitae suscipit arcu nunc quis ante. Phasellus aliquam elit در nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. قابلیت تعلیق Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan velit sed lacus pellentesque in gravida nunc ultrices. Aliquam varius scelerisque erat ut egestas.

ویژگی های آموزش HTML w3resource

ما تمام عناصر یا برچسب های HTML 4.01 و ویژگی های آنها را پوشش داده ایم. زیرا این عناصر (یا برچسب ها) و ویژگی های HTML هستند که برای یادگیری HTML باید آنها را درک کنید. هنگام بحث در مورد برچسب یا عناصر HTML در آموزش های HTML خود، از ویژگی های زیر برای کمک به درک بهتر شما استفاده کرده ایم:

1. ما با یک توضیح واضح و ساده شروع کرده ایم.

2. ما یک Syntax داده ایم تا بتوانید نحوه نوشتن آن را به خاطر بسپارید.

3. کاربرد برای نشان دادن نحوه نوشتن آن در عمل.

4. ما نتیجه استفاده را نشان داده ایم.

5. از آنجایی که تگ های HTML ممکن است دارای تگ پایان باشند یا نداشته باشند تا عنصر را ببندند، ما همیشه نشان داده ایم که آیا تگ های Start و End مورد نیاز هستند یا خیر.

6. عنصر HTML به کدام دسته تعلق دارد، i.e. اگر برای متن یا برای عنوان یا برای ایجاد فرم ها و غیره باشد.

7. کدام عناصر دیگر یا چه نوع محتوایی که تگ HTML می تواند داشته باشد.

8. عناصر دیگری که تگ HTML ممکن است در آن قرار گیرد.

9. ویژگی های مختلف آن برچسب، توضیحات و نمونه های آنها.

10. نمونه ای از آن تگ HTML.

11. نتیجه آن مثال.

12. نمونه را در مرورگر مشاهده کنید.

13. چگونه آن برچسب در مرورگرهای مختلف به نظر می رسد.

تصمیم گرفتم این موضوع فعلی را ادامه دهم. من فهرستی از بهترین منابع html و css را برای کمک به شما در یادگیری این موارد گردآوری کرده ام. به یاد دارم زمانی که خودم به عنوان یک وب مستر شروع به کار کردم، واقعاً دلم برای چنین مجموعه ای از منابع باکیفیت و مفید تنگ شده بود.

ابتدا چند تعاریف:

Html (از انگلیسی "HyperText Markup Language" - زبان نشانه گذاری فرامتن) زبان نشانه گذاری استاندارد برای صفحات وب است.

Css (از انگلیسی "Cascading Style Sheets" - cascading style sheets) یک فناوری برای توصیف ظاهر یک صفحه وب است.

بدون دانش html و css، اجرای سایت شما بسیار مشکل خواهد بود - حتی یک شمارنده آمار یا همان بنر کار نخواهد کرد. آیا برای کمک به سراغ متخصصان نمی روید یا موضوع پشت سر موضوع در انجمن ها ایجاد نمی کنید؟ فقط باید بگیری و یاد بگیری.

با توجه به تجربه خودم می توانم بگویم که html و css را می توان در عرض 1 ماه یاد گرفت. البته، من در مورد ارتفاعات حرفه ای صحبت نمی کنم - اگر بخواهید خودتان به آنها خواهید رسید.

به نظر من بهترین راه برای یادگیری html و css و موضوعات دیگر از جمله ارتقای وب سایت این است که وب سایت خود را راه اندازی کنید و روی آن تمرین کنید. راستی، اولین سایتی که من برای بازی Counter-Strike ایجاد کردم رو می تونید ببینید که اون موقع به ساختنش علاقه داشتم. در اینجا نقشه ها و اسکرین شات های آنها است که توسط گلوباتور قدیمی در آن روزها ایجاد شده است، زمانی که او هنوز نمی دانست 10 تای برتر، TCI و PR چیست، و بی احتیاطی زیر نور خورشید می چرخید و نقشه های سه بعدی ایجاد می کرد. من این سایت را در یک ماه ایجاد کردم و html و css را به صورت عملی یاد گرفتم.

برای یادگیری html و css لازم نیست متخصص فنی باشید. به عنوان مثال، من به طور کلی یک انسان گرا هستم و در ریاضیات اصولاً "2" داشتم 🙂 . بنابراین هر کسی می تواند html و css را یاد بگیرد. منابعی که فهرست کرده ام نیز مناسب هستند تا در هر زمان بتوانید از آنها برای یافتن لحظه های مورد علاقه خود با استفاده از html و css استفاده کنید.

وب سایت هایی برای یادگیری html و css

من مجموعه ای از منابع مفید برای یادگیری html و css را از سایتی که خودم مطالعه کردم شروع خواهم کرد. این ها درس های Wild html هستند که توسط والنتینا آخمتزیانوا با نام مستعار Wild نوشته شده است. او تمام نکات لازم را چنان با نشاط و جالب بیان کرد که یادگیری html و css با کمک دروس او به یک تجربه هیجان انگیز تبدیل می شود. به هر حال، شما می توانید سایت مربوط به وبلاگ را مطالعه کنید. درس های Wild برای یادگیری html و css در سطح لازم برای کار به عنوان یک وب مستر کافی است.

آیا می توانید تصور کنید که اگر در موضوع فتوشاپ بیشتر پیشرفت کنم من چه کسی خواهم بود؟ من یک هیولای واقعی خواهم بود! اما من اینجا با SEO and vegetate تماس گرفتم و این حروف را با انگشتان پیچ خورده از سرما تایپ کردم 🙂 . شوخی می کنم، اینجا هم گرم است و غذا هم خوب است 🙂 .