سلام دوستان، در پست قبل توضیحاتی درمورد وبسایت و زبان های تحت وب به خصوص زبان HTML داده شد، که مفاهیم اولیه برای طراحی وب بود که لازم است بدانید. در این پست قصد داریم تا ابزار های کار با زبان html را بررسی کنیم و شروع به کدنویسی می کنیم تا بتونیم یه وبسایت خوب طراحی کنیم...
برای شروع ما با برنامه Notepad (نت پد) زیاد کار داریم و نیاز به یه مرورگر هم داریم تا بتونیم خروجی وبی که نوشتیم رو مشاهده کنیم.
خوب اول برنامه Notepad رو باز کنید. حالا وارد کدنویسی میشیم...
اول در زبان HTML. باید بدونید که کدها یین علامت <> قرار می گیرد.
خوب اولین کدی که باید بنویسید، کد زیر می باشد که مثل یه تابلو هست که نشون میده ما با چه زبانی این کدهارو نوشتیم، درواقع مرورگر با این کد میفهمه که زبان کد های ما چیه.
<!DOCTYPE HTML>
خوب تابلو رو زدیم، درواقع اولین خط کد رو نوشتیم،
خوب حالا ما باید تگ html رو تعریف کنیم، تگ HTML. یعنی کدهایی که دربین این تکه کد نوشته میشه، مربوط به زبان html هست و مجزا از زبان های دیگه مثل CSS است.
تگ رو به این صورت تعریف می کنیم:
<!DOCTYPE HTML> (تابلو مشخص کننده نوع زبان)
<HTML> (تگ آغازی)
</HTML> (تگ پایانی)
همونطور که میبینید، دو تا تگ html تعریف کردم، یکیش تگ آغازی هست و یکیش تگ پایانی، که تمام کد های این زبان در بین این دو تا تگ نوشته میشه.
حالا میخوایم با ترتیب و چینش این زبان آشنا بشیم. در زبان html کد های ما بخش بندی میشه، درواقع به دوبخش تبدیل میشه، یکیش بخش سر کد هاست که head نامیده میشود و در این بخش کدهایی نوشته میشه که برای کاربران وب جنبه نمایشی نداره فقط اطلاعاتی از قبیل: تیتر و آیکون سایت و کلماتی که موتور های جستجو گر باید آنرا پیدا کنند و...
بخش دوم، بدنه وب هست که body نامیده میشه و کدهایی که در این بخش نوشته میشه جنبه نمایشی داره و برای نشون دادن چیزی به کاربر استفاده میشه و همچنین رنگ سایت و پس زمینه و متون سایت و... جزو این بخشه.
حالا ما باید تگ های این دوتا بخش رو بین تگ های html تعریف کنیم...
<!DOCTYPE HTML> (تابلو مشخص کننده نوع زبان)
<HTML> (تگ آغازی)
<head> (تگ آغازی بخش سرکدها)
کدهای بخش سر کد
</head> (تگ پایانی بخش سرکدها)
<body> (تگ آغازی بخش بدنه)
کدهای بخش بدنه
</body> (تگ پایانی بخش بدنه)
</HTML> (تگ پایانی)
خوب همونطور که میبینید، کدهای هر بخش بین تگ آغازی و پایانی همون بخش نوشته میشه و اگر خوب دقت کنید، میبینید که فرق تگ آغازی با پایانی فقط یه اسلش/ هست (که تگ پایانی اولش یه اسلش/ اضافه داره).
خوب تبریک میگم، شما با ترتیب و چینش کدها آشنا شدید و از این به بعد شروع می کنیم به کدنویسی این دوتا بخش.
و در پست بعدی از کدامون خروجی میگیریم و سایت خودمونو میبینیم... به امید دیدار...