جلسه پنجم آشنایی با خواص ها در اچ تی ام ال (HTML Attributes)
مثال
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My
First Heading</h1>
<p>My
first paragraph.</p>
</body>
</html>
در دو حرف مشخص کننده حرف اول مشخص کننده زبان (en) واگر هم گویشی داشته باشد.
حرف دوم مشخص کننده گویش (US) است.
خواص عنوان یا title:
پاراگراف ها در Html با تگ <p> تعریف می شوند.
در مثال زیر به تگ <p> یه خواص عنوان با عبارت " About projeraygan.blogfa.com " تعریف کرده ایم.
<p title="About projeraygan.blogfa.com">
About projeraygan.blogfa.com is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP,
ASP, etc.
</p>
هر وقت موس را بروی پاراگراف حرکت دهید و نگه دارید عبارت تایتل ظاهر می شود.
خواص href یا خاصیت ها لینک
لینک ها در Html با تگ <a> مشخص شده و با خاصیت href آدرس اینترنتی آن مشخص می شود.
مثال :
<a href="http://www.projeraygan.blogfa.com ">This is a link</a>
در مورد این تگ در جلسه های بعدی بیشتر خواهیم گفت
خاصیت Size
عکس ها با تگ <img> تعیین می شوند.
و آدرس منبع و اصلی عکس هم به وسیله خاصیت (src) تعیین می شود.
و خاصیت ها (width) و (height) تعیین کننده سایز یا اندازه عکس هستند.
اندازه عکس به وسیله پیکسل تعیین می شوند
به طور مثال width="104" یعنی عرض عکس 104 پیکسل باشد.
در جلسه های بعدی در مورد تگ عکس بیشتر توضیح خواهیم داد.
خاصیت alt
وقتی که عکس رو یا هر چیزی دیگری رو توی صفحه بزاریم و زمانی مرورگر نتونست نشان دهد.
متن توی این خاصیت به جای عکس نشان داده خواهد شد.
مقدار این خاصیت قابلیت نمایش توسط مرور گر ها را دارد.
و به وسیله این خاصیب و با استفاده از بعضی برنامه ها افراد نابینا می توانند بدانند
که شما چه عکس یا چیزی را در این بخش قرار داده اید.
مثال
<img src="projeraygan.blogfa.com.jpg" alt="projeraygan.blogfa.com " width="104" height="142">
پیشنهاد ما : همیشه برای استفاده از نام خاصیت ها از حروف کوچک استفاده کنید.
در Html5 استفاده از حرووف کوچک الزامی نیست.
خاصیت عنوان را شما می توانید بصورت حروف کوچک یا بزرگ بنویسید مانند Title یا TITELE
البته ما توصیه کنیم که در Html4 و XHTML از حروف کوچک استفاده کنید
چون داری قانون سخت گیرانه تری هستند.
البته استفاده از حروف کوچک رایجتر است چون نوشتن آن استان است و
ما هم در تمامی مثال های این کتاب از حروف کوچک استفاده می کنیم.
پیشنهاد ما : همیشه از دابل کوتیشن در مقدار خاصیت ها استفاده کنید.
در استاندارد Html5 استفاده از دابل کوتیشن در مقدار خاصیت ها الزامی نیست.
مثال قبلی رو بصورت زیر هم میتونیم بنویسیم بدون کوتیشن
<a href=http://www.projeraygan.blogfa.com >
البته ما توصیه کنیم که در Html4 و XHTML از دابل کوتیشن استفاده کنید
چون داری قانون سخت گیرانه تری هستند.
گاهی وقت ها لازم است که شما از دابل کوتیشن استفاده کنید و گرنه ممکن است
نتیجه خوبی به دلیل فضای خالی بین نوشته ها مشاهده نکنید.
مثال :
<p title=About projeraygan.blogfa.com >
در مثال بالا فقط بخش اول کار یعنی About را نشان میدهد وقسمت دوم را نشان نمی دهد.
استفاده از دابل کوتیشن رایج است ولی اگر آن را حذف کنیم ممکن است با خطا مواجه شویم.
ما توصیه میکنیم که همیشه از دابل کوتیشن در مقدار خاصیت ها استفاده نمایید
تک کوتیشن یا دابل کوتیشن؟
استفاده از دابل کوتیشن در Html رایجتر است هرچند که ممکن است که تک کوتیشن
هم مورد استفاده قرار بگیرد
در اکثر جاها که به خاصیت ها یک مقدار می دهند آن را با دابل کوتیشن مشخص می کنند.
یا شاید لازم باشد که از تک کوتیشن استفاده کنند.
مثال
<p title='Siros "ShotGun" Babakhani'>
یا برعکس
<p title="Siros 'ShotGun' Babakhani">
خلاصه این جلسه:
· همه تگ های Html می توانند که خاصیت داشته باشند.
· خاصیت تایتل در تگ های Html به اطلاعات داده شده tool-tip اضافه میکند.
· و خاصیت href در لینک ها می توانست که آدرس را به ما نشان دهد.
· و خاصیت ها width و height اطلاعاتی در مورد اندازه عکس ها یا اشیا به ما می دهند.
· و خاصیت alt هم میتواند در مواقعی که عکسی نشان داده نمی شود متنی به جای آن نشان داده شود.
· و در این مجموعه آموزش ها ما همیشه از حروف کوچک در نام تگ ها استفاده میکنیم
· و همیشه در مقدر خاصیت ها هم از دابل کوتیشن استفاده می کنیم.
نحوه دانلود یک متن با استفاده از Asp.net
البته اولش باید از این یوزینگ استفاده کنیم
using System.Text;
StringBuilder sb = new StringBuilder();
string output = "siroos, si, babakhani,ba";
sb.Append(output);
sb.Append("\r\n");
string text = sb.ToString();
Response.Clear();
Response.ClearHeaders();
Response.AddHeader("Content-Length", text.Length.ToString());
Response.ContentType = "text/plain";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.AppendHeader("content-disposition", "attachment;filename=\"output.txt\"");
Response.Write(text);
Response.End();
که با استفاده از دستورات و قطعه کد های بالا امکان دانلود یک متن را در زبان برنامه نویسی Asp.net برای شما فراهم میکند و شما می توانید آن را بصورت یک فایل متنی Txt در کامپیوتر خود ذخیره نمایید.
نکته : تکه کد بالا فقط توانایی دانلود و ذخیره متن انگلیسی را دارد با استفاده از کد زیر شما میتوانید متن ها فارسی را هم در فایل متنی خود قرار دهید و آن را قابل دانلود برای کارهای خاصی نمایید.
دانلود یک فایل متنی فارسی با استفاده از Asp.net با زبان برنامه نویسی #C
ابتدا یوزینگ زیر را اضافه میکنیم.
using System.IO;
بعد تیکه کد زیر را به برنامه اضافه مکنیم تا امکان دانلود فراهم شود.
StringWriter oStringWriter = new StringWriter();
oStringWriter.WriteLine("siroos babakhani in tamrin/nخیلی ممنونم از اینکه این فایل را برای دانلود انتخاب کردید /n in tamrni anajm shod");
Response.ContentType = "text/plain";
Response.AddHeader("content-disposition", "attachment;filename=" + string.Format("txtfiles.txt"));
Response.Clear();
using (StreamWriter writer = new StreamWriter(Response.OutputStream, Encoding.UTF8))
{
writer.Write(oStringWriter.ToString());
}
Response.End();
با استفاده از تکه کد بالا امکان دانلود متن فارسی را در برنامه می توانید اضافه کنید.
نحوه کار با jSon
ذخیره یک فایل متنی در Json
برای کار با فایل json ابتدا آن فرمت و متن مورد نظر را با استفاده از تابع زیر تبدیل میکنیم
public static string ToJSON(this object obj)
{
JavaScriptSerializer Serializer = new JavaScriptSerializer();
return Serializer.Serialize(obj);
}
public static string ToJSON(this object obj, int recursionDepth)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
serializer.RecursionLimit = recursionDepth;
return serializer.Serialize(obj);
}
از دو تابع بالا برای تبدیل دیتا ها به فایل جی سان استفاده میکنیم
و نهایتا با استفاده از کدهای زیر آن را در مسیر مشخصی ذخیره میکنیم
var json=Context.District_FCH(null, null, Convert.ToInt32(drpRegionId.SelectedValue));
string jjs = ToJSON(json);
System.IO.File.WriteAllText(@"c:\path.txt", jjs);
که خط اولی دیتاهای موجود را با استفاده از استورپروسیژر از دیتابیس میخونه
و در خط دومی آن را به نوع جی سان و استرینگ تبدیل میکنه
و در خط سوم آن را به عنوان یک فایل در حافظه ذخیره میکند.
جلسه چهارم آشنایی با عناصر (HTML Elements)
سندهای Html به وسیله عناصر Html ساخته شده اند.
عناصر Html به وسیله تگ های شروع و تگ های پایان و محتویات آنها نوشته می شوند.
مانند <نام تگ > محتویات <نام تگ/>
همه ی عناصر Html با یک تگ شروع و با یک تگی پایان می گیرند.
مثال
<p>My first paragraph.</p>
تگ شروع |
محتویات عناصر |
تگ پابان |
<h1> |
My First Heading |
</h1> |
<p> |
My first paragraph. |
</p> |
<br> |
|
|
نکته: برخی از تگ های Html تگ پایانی ندارند یا با هیچ تگی بسته نمی شوند.
عناصر تودرتو در Html
عناصر Html می توانند که تودرتو تعریف شوند یعنی در داخل یک تگ تگ های دیگری را تعریف کرد
تمامی سند های Html شامل تگ های تودرتو هستند
در مثال زیر 4 تا عنصر Html و جود داره
توضیح مثال بالا
تگ <html> کل سند رو در برمگیره و اینکه کل سند Html را مشخص میکند
و با تگ <html>شروع می شه و با تگ </html> بسته میشود
و دیگر عناصر Html تگ <body> هستش
تگ <body> بدنه سند و یا اصل سند را مشخص می کند
و این تگ هم با <body>و با تگ </body> بسته میشود.
و تگ های بعدی <h1>و <p> هستند.
تگ <h1> برای مشخص کردن عنوان صفحه
و این تگ هم با <h1> شروع می شود و نهایتن با تگ </h1> بسته میشود. و محتویات آن شامل My First Heading. است.
همیشه تگ ها را ببندید
بعضی از عناصر html توی مرورگر به درستی نمایش داده می شوند حتی اگر هم آن تگ را نبندید.
مثال
مثال بالا توی همه ی مرورگر ها به درستی کار میکند چون بسته بودن تگ ها را به صورت اختیاری در نظر میگیرد.
هرگز شما این کار را نکنید. چون ممکن است خطا های غیر منتظره ای رخ دهد که پیدا کردن خطا در زمانی که پروژه بزرگ است سخت شود.
عناصر تکی Html
تگ هایی که هیچ گونه محتویاتی درون آنها نیست عناصر تک تگی می نامند.
تگ <br> نمونه ای از یک عنصر تک تگی است که نیازی به بسته شدن ندار و این تگ باعث ایجاد یه سطر جدید می شود.
عناصر تک تگی را می توان درون خود تگ آن را بست مثل <br />
در Html5 نیازی نیست که تگ های تکی را ببندیم. مگر اینکه شما خیلی سختگیر باشید و یا شاید شما بخواهید کد خود را برای XML خواناتر کنید.ولی ما توصیه میکنیم که تمامی عناصر Html را ببندید
نکته Html : استفده از حروف کوچک در تگ ها
تگ های Html حساس به حروف کوچک و بزرگ نیستند. تگ <P> بزرگ مثل تگ <p>کوچک است مثل هم اند
دراستاندارد Html5 نیازی به استفاده از حروف کوچیک نیست و شما می توانید از حروف بزرگ یا کوچک استفاده کنید.اما ما توصیه می کنیم در Html4 و Xhtml از حروف کوچک برای تگ ها استفاده کنید.
و در اکثر وب سایت ها نام تگ هه را از حروف کوچک استفاده میکنند و ما هم توصیه میکنیم که از حروف کوچک استفاده کنید.
جلسه سوم مثال های عمومی از Html (HTML Basic Examples)
نگران نباشدی اگه این مثال ها را یاد نگرفتید شما آنها را در جلسه های بعدی یاد خواهید گرفت.
همه سند های Html باید با تعریف <!DOCTYPE html> شروع شوند
و همچنین سند های Html باید با تگ <html> شروع شوند و با تگ </html>پایان بپزیرند.
و همچنین بخش قابل مشاهده از سند Html باید بین تگ <body> و </body> قرار بگیرند.
مثال:
عنوان یا تایتل ها در Html
در Html برای استفاده از عنوان ها از تگ ها <h1> تا <h6> استفاده می شود.
به این ترتیب که <h1> با فونت بزرگ و هرچقدر به <h6> نزدیکتر میشویم فونت ها کوچک می شوند.
مثال
<h1>This
is a heading</h1>
<h2>This
is a heading</h2>
<h3>This
is a heading</h3>
پاراگراف ها در Html
در Html برای استفاده از پاراگراف ها از تگ ها <P> استفاده می شود.
مثال:
لینک ها در Html
در Html برای تعریف یک لینک از تگ ها <A> استفاده می شود.
مثال:
<img src="picture.jpg" alt="Projeraygan.blogfa.com" width="104" height="142">
نکته : شما در مورد ویژگی ها یا attributes در جلسه های بعدی بیشتر یاد میگیرید.
آموزش Html جلسه دوم ویرایشگر های Html(HTML Editors)
کدهای Html را معمولا در محیط NotePad یا ویرایشگرهای قوی تر مثل NotPad++ می نویسند.
و همچنین می توانید از ویرایشگر های حرفه ای تری هم استفاده کنید.
مانند
هرچند که ما بهتون پیشنهاد میکنیم برای یادگیری Html از NotPad++ استفاده کنید. و بعد از اینکه کدها را نوشتید با فرمت html آن را ذخیره کنید تا شبیه یک صفحه اینترنتی شود.
هرچند که ما معتقدیم که ویرایشگر هر چقدر ساده تر باشه بهترین راه برای یادگیری است.
در زیر چهار روش برای ساخت اولین وب سایت با NotPad را برای شما آموزش می دهیم.
مرحله اول:
میحط Notpad را در ویندوز سون یا قدیمی تر باز کنید.
برای باز کردن میحیط NotPad بر روی Start (گوشه چپ صفحه نمایش) کلیک کنید و سپس منوی All Program را باز کنید و سپس برروی Accessories کلیک نمایید و از منوی باز شده بر روی Notepad کلیک کنید تا باز شود.
برای باز کردن محیط Notpad در ویندوز 8
برای باز کردن میحیط NotPad بر روی Start (گوشه چپ صفحه نمایش) کلیک کنید و سپس عبارت Notpad را تایپ نمایید.
مرحله دوم:
کدهای Html خود را در میحیط NotPad وارد نمایید.
مثلا میتونید کدهای زیر را در محیط آن کپی نمایید
مرحله سوم :
صفحه Html را ذخیره کنید
آن را بروی کامپیوتر خود ذخیره کنید برای این کار میتوانید از منوی فایل Save as را انتخاب کنید.
هنگامی که آن را ذخیره می کنید پسوند فایل را .htm یا .html انتخاب کنید. تفاوتی بین این دو وجود نداره و هردوشون یک کار را برای شما انجام میدهند.
مرحله چهارم:
نمایش صفحه Htmlدر مرورگر
بر روی فایل html دابل کلیک نمایید و بعد از دابل کلیک صفحه ای شبیه زیر مشاهده میکنید.
آموزش Html جلسه اول مقدمه(HTML Introduction)
من سیروس باباخانی هستم که در این بخش با آموزش Html در خدمت شما دوستان می باشم
امیدوارم بتونم دانش اندکم رو به نحوه درستی در اختیار شما دوستان قرار بدم.
نکته : کسی که برنامه نویسی تحت وب انجام میده باید زبان برنامه نویسی Html که پایه زبان برنامه نویسی تحت وب است رو بلد باشه.
Html چیست؟
HTML یک زبان نشانه گذاری برای توصیف اسناد وب (صفحات وب) است.
یک مثال از Html
حال به توضیح این کد می پردازیم
DOCTYPE مشخص میکنه که نوع سند از چه چیزی هستش
و محتویات سند های Html در بین تگ های <html>ر </html> قرا میگیرند
و متن ها و اسناد و تگ های هم بین تگ <body> و </ body> قرار میگیره
و تگ <h1> </h1> برای عنوان و تایتل صفحه به کار میرود
و تگ <p> و </p> هم برای ایجاد یک پاراگراف به کار می رود.
تگ های Html
تگ های Html در بین دو براکت قرار میگیرند مثل مثال زیر
<نام تگ > محتویات <\نام تگ >
تگ های Html معمولا به صورت جفت می آیند به طور مثال <p></p>
اولین تگ دوتایی تگ شروع است، تگ دومی تگی است که به کار تگ پایان میده
تگ پایانی شبیه تگ شروع است با این تفاوت که قبلش یه اسلش قرار می گیره
نکته :تگ اولی رو معمولا بهش مگن تگ شروع کننده و تگ دومی رو هم بهش میگن تگ خاتمه تگی که میبنده کل تگ رو
مرور گر ها:
اهداف یک مرور گر (Chrome, IE, Firefox, Safari) خواندن اسناد Html و نمایش آنهاست.
مرورگر ها تگ های Html را نشان نمی دهند فقط با آستفاده از آن نحوه نمایش صفحه را مشخص میکنند.
ساختار صفحه Html
در زیر تصویر ساختار Html را نشان میدهیم
<html>
</html>
|
نسخه های Html
از روزهای اولیه ای که دنیای وب به وجود آمد ، نسخه های HTML بسیاری وجود داشته است:
نسخه |
سال |
HTML |
1991 |
HTML+ |
1993 |
HTML 2.0 |
1995 |
HTML 3.2 |
1997 |
HTML 4.01 |
1999 |
XHTML |
2000 |
HTML5 |
2012 |
تعریف <!DOCTYPE>
تعریف <!DOCTYPE> به یک مرورگر کمک میکنه تا صفحه را به درستی نمایش دهد.
اسناد مختلفی بر روی وب وجود دارند. و یک مررورگر تنها می تواند صفحات Html را که نوع و ورژن آن را می شناسد به درستی نمایش دهد.
اشکال مشترک تعریف <!DOCTYPE>
در Html5 بصورت زیر است
<!DOCTYPE html>
در Html4 بصورت زیر است
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
و در Xhtml بصورت زیر است
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
تمامی آموزش ها و مثال ها این مجموعه با استفاده از Html5 است.