آموزش طراحی قالب از صفر - جلسه دوم تگ های html 1

دسته بندی: آموزش
زمان مطالعه: ۴ دقیقه
۰۹ تیر ۱۳۹۱

خوب چون قول داده بودم که آموزش رو از صفر شروع کنم ممکنه یه سری حوصلشون سر بره اشکالی نداره من سریع سعی می کنم بنویسم تا اونایی که یه چیزایی بلدن هم استفاده کنن درضمن توصیه می کنم همه کامل بخونن ممکنه یه سری نکات ریز رو ندونن بعد بعدا که ازش استفاده می کنم نفهمن چی می گم. خوب قبل از شروع برنامه نویسی باید بفهمیم تگ چیه؟ هر زبانی قواعد خودش رو برای حرف زدن داره به زبان عامیانه اگر بخوام بگم اون کلماتی که تو زبان برنامه نویسی استفاده میشه رو تگ می گن بهش خوب حالا می خوایم با زبان HTML وبرخی از تگ های اون و کاربرد هاش آشنا بشیم قبل از اون بگم که به نظر من خوبه که از نرم افزار notepad++ برای برنامه نویسی تحت وب استفاده کنین چون هم عالیه هم کم حجم

*نکته : برای اینکه به برنامه بفهمونیم حرفمون کی تموم میشه باید تا یه جایی حرفمون رو بزنیم بعد بهش بگیم خوب الآن حرفم تموم شد!واسه همین تقریبا همه ی دستورها یه تگ آغازین دارن و یه تگ پایانی!اگر گیج شدین اشکالی نداره بیاین جلو متوجه می شین زبان HTML با تگ شروع میشه و با تگ تموم میشه کلا کافیه قبل از حرف اول هر تگ / اضافه کنیم تا اون تگ به یه تگ پایانی تبدیل بشه.سعی کنید هرچیزی که میگم رو از همین الآن توی نرم افزار کدزنیتون حالا چه اینی که من گفتمه یا چه نوت پد خود ویندوزه یا هرچیزه دیگه ای بزنید و تست کنید یعنی تا اینجای کار برناممون شده:

<html>

</html>

خوب حالا برنامتون رو سیو کنید با اسم index.html همونطور که میبینید یه فایل با همین اسم ساخته می شه که اگه روش کلیک کنید تو مرورگرتون باز میشه حالا توی صفحتون چی میبینید؟هیچی!چرا؟چون ما صرفا به مرورگر فهموندیم می خوایم به زبان HTML باهاش حرف بزنیم اما هنوز حرفی نزدیم که نشونمون بده!یک برنامه به زبان HTML از دو بخش تشکیل شده بخش HEAD و بخش BODY

-بخش HEAD جایگاه اسم صفحه ، کلیدواژه ها و امثال اینهاست

-بخش BODY هم همونطور که از اسمش پیداست بخش بدنه ی سایته و قالب در اینجا شکل میگیره

خوب بخش HEAD و BODY هم مثل تگ اولمون با اسم خودشون شروع می شن و با تگ پایانیشون تموم میشن!

*نکته : تگ HEAD قبل از تگ BODY قرار می گیره حالا اگه برناممون رو ادامه بدیم اینطوری میشه

<html>
<head>
</head>
<body>
</body>
</html>

خوب اگه ببینید اسم صفحمون الآن آدرس فایلمونه فرض کنید الآن می خوایم اسم صفحمون رو به "اولین برنامه ی من" تغییر بدیم،همونطور که گفتم نام صفحه از مواردیه که توی بخش HEAD قرار می گیره برای اینکا از تگ TITLE استفاده می کنیم یعنی الآن کدمون میشه:

<html>
<head>
<title>اولین برنامه ی من</title>
</head>
<body>
</body>
</html>

حالا اگه سیو کنید و صفحتون رو باز کنید میبینید که احتمالا اسم صفحه عوض شده ولی یکسری حروف مثل حروف چینی داره نمایش داده میشه این ایراد از انکودینگ هست برای رفع اون اگر از نوت پد دیفالت استفاده می کنید هنگام سیو زیر جایی که اسم فایل رو می نویسید انکودین رو به UTF8 تغییر بدید و اگر از نوت پد ++ استفاده می کنید از تب های بالا روی تب پنجم انکودینگ Encoding کلیک کنید و UTF8 روانتخاب کنید.

خوب حالا صفحتون رو دوباره باز کنید میبینید که این اتفاق افتاده و اسم صفحه درست شده! حالا یکم هم با بخش BODY کار کنیم تا بحث زیاد طولانی و خسته کننده نشه

بعضی از تگ هارو میشه یکسری توضیحات هم جلوشون دربارشون داد یکی از این تگ ها تگ BODY هست و یکی از توضیحات این تگ بکگراند یا عکس پشت زمینه صفحه هست فرض کنید می خوایم بکگراند صفحمون همین بکگراند  7LEARN باشه حالا کدمون میشه:

<html>
<head>
<title>اولین برنامه ی من</title>
</head>
<body background="https://7learn.com/wp-content/themes/L7theme/images/bgm.png">
</body>
</html>

حالا اگه صفحتون رو ببینیدبکگراند صفحتون همین شده فقط با یه مشکل اینکه بکگراند در کل صفحه تکرار شده که برای بعضی از بکگراندها لازمه اما برای بکگراند ما نه اینجا به یکی دیگه از توضیحات تگ BODY می رسیم و اون استایل هست استایل نحوه قرارگیری اشیاء رو اصولا بیان می کنه که کار زبان CSS هست که در آینده راجع بهش توضیح خواهیم داد.این توضیحات استایل برای بکگراند سه حالت داره:

style="background-repeat:repeat-x"
style="background-repeat:repeat-y"
style="background-repeat:no-repeat"

*نکته : اگر هیچ کدوم رو انتخاب نکنید و درکل استایلی تعریف نکنید بصورت عادی هم در طول و هم در عرض عکستون تکرار میشه

یعنی کدی که می می خوایم الآن میشه این که فقط در محور x ها تکرار بشه:

<html>
<head>
<title>اولین برنامه ی من</title>
</head>
<body background="https://7learn.com/wp-content/themes/L7theme/images/bgm.png" style="background-repeat:repeat-x">
</body>
</html>

حالا اگه نگاه کنید پس زمینه مون درست شده و فقط یه مشکلی مونده اونم رنگ صفحه هست که سفیده اینجا باید از توضیحات سوم تگ BODY استفاده کنیم که BGCOLOR هست و رنگ صفحه رو مشخص می کنه شما می تونید دو جور رنگ بدید یا مثلا بنویسید bgcolor="blue" مثلا یا مث کد زیر که کد نهاییمون هست کد هگز رنگ رو بدید کد نهایی این جلسه:

<html>
<head>
<title>اولین برنامه ی من</title>
</head>
<body bgcolor="#dddddd" background="https://7learn.com/wp-content/themes/L7theme/images/bgm.png" style="background-repeat:repeat-x">
</body>
</html>
نویسنده
محمدسینا معراجیان هستم متولد خرداد 1374 دانشجوی برق و الکترونیک ،نه ساله که در زمینه وب و طراحی فعالیت دارم و امیدوارم بتونیم باهم پیشرفت کنیم...

نظرات کاربران

فاطمه

ای خدااااااااااااا
من خیلی فتوشاپ بلد نیستم . خیلی غصه خوردم نتونستم از آموزشهاتون بهره ای ببرم 🙁
بازم ممنون

elen

مرسی بنظر من عالی بود،حرف نداشت 😳 😳 😳 😳

نام...
نام...

لقمان آوند

کدتون رو برام بفرستید تا تغیرات رو توش اعمال کنم .

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل