آموزش Div و آموزش جدول بندی در html : دوره مجازی طراحی وب (جلسه 8)



visibility  
mode_comment   ۷۹

در این جلسه در مورد جدول ها و تگ های html که برای تقسیم بندی و بخش بندی صفحات وب هست، صحبت خواهیم کرد. تگ های معرفی شده در این جلسه بسیار مهم هستند و برای ایجاد ساختار اصلی صفحات وب استفاده میشن. پس حتما این جلسه رو با دقت ببینید و تمرین کنید .

عموم مطالب ارائه شده در این جلسه عبارتند از :

  • تگ <table> و کاربردهای آن
  • تگ <caption> و کاربردهای آن
  • تگ <th> و کاربردهای آن
  • تگ <tr> و کاربردهای آن
  • تگ <td> و کاربردهای آن
  • تگ <thead> و کاربردهای آن
  • تگ <tbody> و کاربردهای آن
  • تگ <tfoot> و کاربردهای آن
  • تگ <colgroup> و کاربردهای آن
  • تگ <col> و کاربردهای آن
  • تگ <style> و کاربردهای آن
  • تگ <div> و کاربردهای آن
  • تگ <span> و کاربردهای آن
  • تگ <header> و کاربردهای آن
  • تگ <hgroup> و کاربردهای آن
  • تگ <footer> و کاربردهای آن
  • تگ <section> و کاربردهای آن
  • تگ <article> و کاربردهای آن
  • تگ <aside> و کاربردهای آن
  • تگ <details> و کاربردهای آن
  • تگ <summary> و کاربردهای آن
  • تگ <dialog> و کاربردهای آن
info توجه

این مطلب یک جلسه از آموزش تصویری html5 و CSS3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش تصویری html5 و CSS3

comment دیدگاه کاربران
Massud Tarekhi replyپاسخ

سلام

خسته نباشید،فایلها چرا دانلود نمیشه

لقمان آوند

سلام
در حال انجام تغیرات در سرور سایت هستیم. لطفا چند ساعت دیگه اقدام کنید .
ممنون

Massud Tarekhi

علتش چیه که میخواین سرور سایتتون رو تغییر می دید.

لقمان آوند

در هفته های گذشته میزان بازدید و استقبال از سایت افزایش قابل توجهی داشته.
برای اینکه سایت سریع تر لود بشه و بتونه بازدیدهای بیشتر رو هندل کنه لازم شد که یه سرور با منابع قوی تر بگیریم تا تجربه کاربری بهتری رو داشته باشید.
الان انتقال انجام شده و شاید متوجه افزایش سرعت لود سایت شده باشید.
در روزهای آینده هم تغیرات دیگری رو خواهیم داشت که سون لرن رو بتونید با سرعت و کیفیت بهتری مرور کنید .
از شکیبایی شما سپاسگزارم.

itone

سلامو خسته نباشید :
استاد اوند سرور های قدرتمند رو از کجا تیه کنیم ک امنیت و سرعتش خوب باشه :>؟
مثل سون لرن

لقمان آوند

خوب شرکت های معتبری توی ایران هست که پیشنهاد می کنیم از اونها استفاده کنید. پارس پک خوبه …

رستم سوداگری replyپاسخ

سلام استاد آوند
ممکنه یک فایل از کلمات مخفف html تهیه کنید؟
مثلا تگ html مخفف چی هست و به چه معنایی.
ممکنه این کار زمان بر باشه اگر وقت داشتید حتما در پایان دوره یا ما بین جلسات این فایل رو تهیه کنید
به نظرم دونستن معنای تگ ها کمک زیادی در به کار بردن اون ها بکنه

لقمان آوند

سلام
تو فایل های جلسه 8 یه pdf خیلی خوب در این مورد براتون گذاشتم .

رستم سوداگری

خیلی ممنون از عملکرد سریعتون

Pouriya Ariyafar

ممنون استاد PDF خیلی خوب بود

لقمان آوند

خواهش می کنم
موفق باشید

امید فیروزه replyپاسخ

سلام استاد واقعا خسته نباشید …
ببخشید استاد میشه تمام تگ های HTML و CSS رو در قالب یک فایل PDF آماده کنید برای دانشجویان …
با تشکر

لقمان آوند

چشم، حتما
اسناد کمکی و لیست کاملی از این موارد رو در جلسات اینده به شما خواهیم داد …

امید فیروزه

مرسی ممنون

iimmaann replyپاسخ

سلام؛
جناب آوند قسمت Like تو نظرات غیرفعال شده

لقمان آوند

متشکرم
رفع شد …

neyvid replyپاسخ

دکتر آوند عزیز ممنون از زحماتت…خوشحالم دوستی مثل شما را پبدا کردم البته اگه قابل بدوتید..
امید وارم همیشه شاد و سربلند باشید….من که هنوز ندیدم فیلم ها را ولی دانلود کردم و گذاشتم سر صبر ببینم.متشکرم.
راستی ایمیل منم وقت کردی جواب بده..ممنونم

لقمان آوند

سلام و ممنون
چشم

منصور جواهر replyپاسخ

استاد شما جاوا هم بلد هستید ؟

لقمان آوند

بله
بیشترین زبونی (غیر از زبون های تحت وب) که کار کردم جاوا هست.

منصور جواهر

استاد شما فرشته نجات هستید واقعا
استاد توی Eclipse یا Netnbeans یا IntelliJ پنلی هست برای Swing مثل سی شارپ که بشه باهاش کار کرد میدونید منظورم چیه ؟ (یعنی عین سی شارپ بشه تکس باکس رو درگ کرد و کشید روی پنجره و با هندلر هاش باهاش کار کرد)
2- استاد من دوتا کد هست که کار نمیکنن یه نگاهی بهشون بندازیم یه دنیا ممنون میشم

1 – http://textuploader.com/6rsn
2 – http://textuploader.com/6rsb

استاد دانشگاهمون گیر داده قبل از شروع شدن دانشگاه باید جاوا رو کامل یاد بگیرم نمیشه هم رو حرفش حرف زد گفته اگه یاد بگیرم یه سال منو میندازه جلو اما چون من تو دانشگاه تهران C و C# رو خوندم احساس میکنم خیلی راحت جاوا

لقمان آوند

سلام
ممنون از لطفتون ولی متاسفانه باید بهتون بگم که من تو جاوا اصلا رابط کاربری کار نکردم و فقط برای حل مسئله، کارای آکادمیک و برنامه نویسی ها در سیستم هادوپ ازش استفاده می کنم .
لذا در بحث رابط کاربر در زبان جاوا واقعا بی تجربه هستم .
جاوا زبون فوق العاده ای هست که قطعا اگه یاد بگیرید ازش لذت می برید …

شیما منصوریان replyپاسخ

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

لقمان آوند

سلام
در حال انتقال سرور دانلود هستیم.
الان مشکل رفع شده …

رستم سوداگری replyپاسخ

سلام استاد آوند عزیز خسته نباشید
ازتون تقاضا داشتم در پایان فصل ده الی پونزده سوال که میتونه سخت ترین سوال ممکن درباره اون فصل باشه رو طرح کنید و داخل فایل ها قرار بدید. که با پاسخ دادن به اون سوال ها اطمینان خاطر پیدا کنیم که تمام مباحث رو متوجه شدیم

لقمان آوند

سعی می کنیم تمرین مناسب بهتون بدیم .
ممنون

Mehdi Zeynali replyپاسخ

سلام این تگ hgroup فک کنم حذف شده دیگه . فک کنم یه استفاده دیگه هم داشته که چون تو یه صفحه فقط میشه یه تگ h1 داشت با این تگ میشد بیشترش کرد که فک کنم حذفیدنش درسته؟

http://html5doctor.com/the-hgroup-element/

لقمان آوند

بله شما درست می فرمایید .
در رفرنسی که دادید گفته که این تگ مدتی هست که از html5 حذف شده .
ممنون از ذکر این مورد . (خود من هم اطلاع نداشتم)

Pouriya Ariyafar

سلام ممنون خیلی مفید بود

afshin hemmati replyپاسخ

سلام
امکانش هست پس از مشاهده تمام جلسات قالبی طراحی و براتون ارسال بشه تا اگه مشکلی داشتیم بگید؟
مثلا از تگ اشتباهی استفاده شده بود

مشکلی دارم که ممنون میشم راهنمایی کنید
بعضی از تگها یادم میره
یا وقتی میخوام شروع به کد نویسی کنم با ترس عجیبی مواجه میشم ( میترسم کدها طبق استاندارد نباشه

سوال بعدیم در مورد درج خصوصیت ها است ( هر خصوصیتی )
اگه اول target نوشته بشه مشکلی ایجاد میکنه از نظر استاندارد بودن کدها؟

a href=”#” target=”_blank” title=”title”>linklink</a

لقمان آوند

سلام
مشکلی نیست. در حد زمانم حتما قالبتون رو بررسی می کنم و نکتع نظراتم رو میگم بهتون.
ترس نداره! کد بزنید با توجه به مواردی که گفتیم. آخر سر یه وقت بزارید برای بررسی عیب های قالب و رفعشون کنید .
ترتیب مهم نیست . نگران این مورد نباشید .

بردیا راستین replyپاسخ

سلام ببخشید دوره جاواسکریپت رو کی برگزار می کنید ؟

لقمان آوند

بله ایشالله اواخر فروردین ماه …

mf4arman24 replyپاسخ

با سلام حضور دکتر آوند.
سوال؟!
اینکه به جای کد زیر از چه کد یا دستوری استفاده کنیم که تمامی یا بیشتر مرورگرها ساپورت کنه.

Copyright 1999-2014.
– by Refsnes Data. All Rights Reserved.
All content and graphics on this web site are the property of the company Refsnes Data.

===================
بشه یه چیز مثل لینک زیر درست کرد.
http://esam.ir/service/faq.aspx

لقمان آوند

متوجه نشده دقیقا چه کد و قسمتی منظورتون هست !

mf4arman24 replyپاسخ

ببخشید دکتر. اشتباه شد.
یه لیستی مثل لینک زیر:پرسش های متداول چطور میشه درست کرد که همه مرورگر ها بتونند نمایشش بدهند

http://esam.ir/service/faq.aspx

لقمان آوند

آها …
با جاوااسکریپت باید اینکارو بکنی.
ایشالله تو دوره مربوط به جاوااسکریپت پیاده سازیش می کنیم …

Amir Saleh

استاد مگه با تگ detail نمیشه اینکارو کرد

/http://www.hongkiat.com/blog/html5-details-summary-tags

لقمان آوند

بله میشه …
ولی هنوز همه مرورگرها پشتیبانی کاملی ازش نمی کنن …

Amir Saleh replyپاسخ

سلام استاد آوند عزیز

سپاس گذارم برای آموزش های خوبی که قرار دادید

فقط یک نکته اگر ممکنه اون کدی که توی stylish کروم دارین برای کپی صفحات w3schools هستش را قرار بدید

من وقت زیادی رو در مترو و اوتوبوس می گذرونم که خوندن اون مطالب مفید هست

لقمان آوند

خدمت شما:

Amir Saleh

ممنون مرسی

Amir Saleh replyپاسخ

یک سوال دیگه ای هم که داشتم الان ما برای ساخت منو و یا تمام این مستطیل هایی که صفحات رو به بخش

های جدا از هم تبدیل می کنند (مثل لینک های ویژه ، دوستان(+4) ، درباره ی ما ، اسلاید شو دوره ها ، پنجره

های تبلیغات) از nav یا div باید استفاده کنیم از لحاظ معنا گرایی

لقمان آوند

از div استفاده میشه معمولا .

رضا replyپاسخ

سلام استاد
یه سوال پیش اومده برام وقتی میفرمایین این لاین و بلاکی تفاوت این ها چیه باهم ؟
ممنون

لقمان آوند

توی دوره که توضیح دادیم . مگه ویدیوها رو کامل ندیدید ؟
به بخش css برسید توضیح داده میشه.

حمیدرضا replyپاسخ

سلام استاد این جلسه هم عالی بود.
یه سوال دارم ازتون. آیا تصویری که براتون آپلود کردم نتیجه استفاده از تگ section به همراه تگ های h1 هستش؟
چطور میشه به همچین چیزی دست پیدا کرد؟

http://s3.picofile.com/file/8195332184/Capture5.jpg

لقمان آوند

با inspector مرورگر می تونید سورسشو ببینید. اونجا گوگل از تگهای div و li و table و h3 استفاده کرده. h1 که طبیعتا نیست. چون نباید بیش از یک دونش توی صفحه وب باشه که در نتایج جستجو بیش از یک نتیجه رو داریم .

حمیدرضا

درسته. صحبتم این بود نمایش اون لینک ها نشانه گر سئو خوبه وبسایته . چی باعث میشه که موتور گوگل صفحات رو به این خوبی بشناسه و در نتایج جستوجو اونها رو به عنوان بخش های مهم وب سایت تفکیک کنه؟

لقمان آوند

اینو الان دقیقا نمی دونم
ما کار خاصی نکردیم برای اون بخش بندی ها. گوگل معمولا برای وبسایت ها معتبر و پربازدید چنین نحوه نمایشی رو ایجاد میکنه.
البته فکر کنم جایی تو وبمستر تولز هم بشه تغیراتی در این نحوه نمایش داد که الان یادم نیست …

Amir Th replyپاسخ

سلام خسته نباشید استاد
میخواستم ببینم یه منبع کامل واسه تگ های inline و blockایا تو فایل های جلسات گزاشتین اگر نزاشتین از کجا این تگ ها رو پیدا کنم؟با تشکر

لقمان آوند

لیست تگ های inline :
b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea
لیست تگ های بلاکی :
address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, nav, noscript, ol, output, p, pre, section, table, tfoot, ul, video

Amir Th

تشکر فراوان که اینقدر سریع پاسخگو هستین

Pouriya Ariyafar replyپاسخ

سلام استاد
ممنون برای این قسمت
عالی بود مثل همیشه
استاد عزیز یک سوال برام پیش اومد
شما با مرورگر گوگل کروم هم سایت w3school پیرینت میگرفتید تو ویدیو هم بود
منم اومدم قبل از این که کد stylish رو در گوگل کروم اضافه کنم گفتم یک پرینت بگیرم فرق قبل و بعد این کد stylish رو ببینم ولی متاسفانه قبل از وارد کردن این کد با این عکسی که پایین میذارم رو به رو شدم بعد از اضافه کردن کد stylish باز با همین مشکل رو به رو شدم. نوشته های به هم ریخته
گوگل کروم من اخرین ورژن هست میخواستم ببینم شما فکر میکنید مشکل از چی میتونه باشه؟
لینک عکس
ممنون از شما استاد عزیز

استاد یک سوال دیگه وقتی مثلا همین عکس های بالا رو لینک میکنم از کد targent=”_blank” استفاده میکنم و بعد از سیو میبینم اعمال نمیشه و وقتی ویرایش رو میزنم کد rel=”nofollow” جایگزین کد blank میشه
مشکل از چیه؟
ممنونم

لقمان آوند

سلام.
این اضافه کردن لینک و تغیراتش بوسیله سیستم ما انجام شده و حالت عادی اینطور نیست. یه سری محدودیت ها برای بخش کامنت گذاشتیم .
کد stylish وبسایت w3schools رو باید به روز کنید بر اساس تغیرات سایت. می تونید اینو جایگزین کنید :

Pouriya Ariyafar

سپاس استاد عزیز

Farhad Ashtari replyپاسخ

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

وحید صالحی

اگر هر تگ tr و محتوبیات درونش درون تگ tfoot قرار بگیره فرقی نداره که در کجای جدول باشه در زمان اجرا به آخرین سطر جدول منتقل میشه

میثم حمیدی replyپاسخ

سلام
برای تگ tr نمیشه بردر تعریف کرد؟
اگر بخوایم بدون اینکه برای تگ های td بردر بذاریم زیر هر سطر از جدول خط ممتدی بندازیم چکار باید کرد؟

لقمان آوند

اینو تست کن ببین جواب میده برات :
tr {outline: thin solid black;}

میثم حمیدی

البته همین فقط کفایت میکنه

حمیدرضا شریف replyپاسخ

یک مورد انتقادی :
در بخش آموزش html یک مورد مهم وجود داره که به شکل واضح توضیح داده نشده.
در رابطه با محدودیتها و ملاحظات استفاده از html5 با توجه به ساپورت مرورگرهای قدیمی ، به شکل مشخص توضیح داده نشد که کدام کدها استفاده ازشون به صلاح هست و کدامها نه یا حداقل برای من این مسئله بطور واضح مشخص نشد. یعنی من نفهمیدم که مثلا از attribute نامبر برای تگ input استفاده بکنم یا نه.
البته من خودم تحقیق کردم و جواب رو فهمیدم.
جوابی که بهش رسیدم این هست که از کدهای html5 فقط برای مفهومی کردن صفحه باید استفاده کرد و مواردی مثل type=color یا تگ dialog بهتر هست اصلا استفاده نشن چون باعث میشن وبسایت در مرورگرهای مختلف نمایش متفاوت و حتی مشکل داری داشته باشن.

لقمان آوند

سلام
بارها در دوره گفتیم که html5 رو معنا خیلی تاکید کرده و گفتیم جایی که معناگرایی مهمه از عناصر html5 در مکان صحیحش استفاده کنید. مواردی که گفتید تعدادشون خیلی زیاده. ما اشاره کردیم که برای اطلاع بیشتر به منبع ذکر شده مراجعه کنید و دقیقا بخونید …
ممنون از دیدگاهتون

حمیدرضا شریف replyپاسخ

من پیشنهاد میکنم برای هر دوره آموزشی یک بخش انتقادی قرار بدید و بعد از جمع آوری نقاط ضعف و کمبودها اونها رو با اضافه کردن ویدئوهای تکمیلی برطرف کنید.

لقمان آوند

سلام
در حین تهیه ویدیوها بازخوردها رو از کاربرا می گیریم و در ادامه کارمون اعمال می کنیم. این رویه رو داریم معمولا …

Atrian Web replyپاسخ

استاد آوند از شما خیلی ممنونم که با انرژی تمام و صادقانه بدون هیچ کم و کاستی آموزش می دهید. تمام آموزش های که شما تدریس کرده باشید را حتما میخرم ممنونم از زحماتتون خسته نباشید.
یا علی مدد

لقمان آوند

ممنون از لطفتون
از بابت رضایتتون خورسندیم

علی رضایی replyپاسخ

سلام استاد
شما یه مقدار توضیحات تکراری و تقریبا مشابه هم رو برای تگ های طبقه بندی مثل div و section و article و … دادید و گفتید که به عنوان یه پروژه به عهده ی خودتون میزارم تا تفاوتش رو متوجه بشید اما در جلسه ی بعدش توضیح ندادید . اگه ممکنه بفرمایید تفاوت این تگ ها چیه
بنده الان اصلا نمیدونم که چطوری باید یه سایت رو طبقه بندی کنم .
ممنون

لقمان آوند

سلام
همه از لحاظ ظاهری تقریبا به یه شکل می تونن استفاده شن.
تفاوتشون در معناگرایی در html5 هست. تو html5 دقیقا پیشنهاد میشه که section رو برای چی و کجا به کار ببرید که از لحاظ معنایی کاربردش درست باشه. برای article هم همینطوره .
منتهی div معناگرا نیست و برای هر نوع تقسیم بندی های موجود در صفحه میشه ازش استفاده کرد .

محیا ربانی آزاد replyپاسخ

سلام. از دیروز عصر نمی تونم فایل های آموزشی رو دانلود کنم. مشکلی پیش اومده توی سایت؟

وحید صالحی

به علت ترافیک بالای بازدید از سایت این مشکل بوجود آمده و انشالله تا امشب برطرف خواهد شد

itone replyپاسخ

سلام و عرض خسته نباشید
استاد توی این درس گفته شد تگ div واسه گروه بندی عناصر بلاکی هستش یعنی ما نمیتونیم تگ q رو توی این تگ بگذاریم و انو استایل دهی کنیم ؟؟؟؟
یعنی اگه این کارو بکنیم خطالی کد محسوب میشه ؟؟؟

لقمان آوند

بله میشه

رضا محب replyپاسخ

سلام
من سوالات را به ایمیل آقای لقمان آوند فرستادم جوابی نیامد تقریبا 1 ماه است سوالات را فرستادم و تلفن هم جواب داده نمی شود. باید چه کار کنم جواب سوالات داده شود؟
با تشکر از لطف شما

لقمان آوند

سلام
تلفن ها و ایمیل ها جواب داده میشند. ایمیلتون حتما نرسیده دستم چون روزانه پاسخ میدم ایمیل ها رو. مجددا ارسال کنید یا تماس بگیرید.

mohammad mhd replyپاسخ

سلام
اگه خواستیم تگ details رو که block tag هستش رو درون یک متن بکار ببریم باید چکاری انجام بدیم و سوال دوم که در ادامه سوال اول هستش اینه که اگه خواستیم در اجرا موقع کلیک کردن خروجی روی متن قرار بگیره مثل تگ dialog باید چکار کنیم البته من سعی کردم عرض اون رو کم کنم ودرون تگ p قرار بدم اما باز هم یه خط رو اشغال میکرد

mohammad meysam replyپاسخ

سلام و عرض خسته نباشید
ببخشید من نمیدونم کی باید از تگ section استفاده کنم و کی باید از تگ div استفاده کنم ممنون میشم اگه بهم بیشتر توضیح بدین.

Ali Azad replyپاسخ

سلام.
من اومدم فایل این جلسه رو دانلود کنم با این خطا مواجه میشم.
404 Not Found

امیرحسین حاجی محمدی replyپاسخ

سلام خسته نباشید!
تگ hgroup در HTML5 منسوخ شده! از چه تگی میشه استفاده کرد به جای این تگ؟

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.