یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.
Document declaration tag
< html>
< head>
Document header related tags
< head>
< body>
Document body related tags
< body>
< html>
این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.
برچسب < title> در HTML
این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.
نمونه یک
HTML Title Tag Example
Hello, World!
برچسب < meta> در HTML
این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند
نمونه دو
HTML Title Tag Example
Hello, World!
برچسب < base> در HTML
این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد
این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.
نمونه چهار
HTML Title Tag Example
Hello, World!
برچسب< style>در HTML
این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.
نمونه پنج
HTML style Tag Example
Hello, World!
توجه:
برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.
برچسب< script>در HTML
این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.
Marquee در HTML یک قطعه اسکرولینگ می باشد که یا به صورت افقی در عرض متن ویا به صورت عمودی در پایین صفحه ی وب شما نمایش داده می شود، بستگی به تنظیمات دارد وتوسط برچسب < fmarquees>مربوط به HTML ایجاد می شود.
توجه:
ممکن است برچسب < marquees> در HTML توسط مرورگرهای زیادی پشتیبانی نشود، بنابراین توصیه می شود که به این برچسب تکیه نکنید، در عوض می توانید از javascript و CSS برای ایجاد چنین تاثیراتی استفاده کنید.
ترکیب ساده برای استفاده از برچسب< marquees> در HTML مانند زیر می باشد:
شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها. ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.
مثال:
در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.
نمونه یک
HTML Iframes
Document content goes here...
Document content also go here...
ویژگی های برچسب < iframe>
بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.
Attribute Description
src
این ویژگی برای نام گذاری فایلی استفاده می شود که باید در frame بارگذاری شود. مقدار آن می تواند هر URL باشد. برای مثال src="/html/top_frame.htm" فایل HTML موجود در مسیر html را بارگذاری خواهد کرد.
name
این ویژگی به شما اجازه می دهد تا یک frame را نامگذاری کنید. این ویژگی نشان می دهد که یک داکیومنت در کدام frame باید بارگذاری شود. هنگامی که می خواهید لینک هایی را در یک frame ایجاد کنید که صفحاتی را در یک frame دیگر بارگذاری می کند، که در این مورد دومین frame برای تشخیص خود به عنوان هدف لینک به نام نیاز دارد، در اینجا این ویژگی بسیار مهم است.
frameborder
این ویژگی مشخص می کند که آیا حاشیه های frame نشان داده شوند یا خیر. این ویژگی مقدار داده شده به ویژگی frameborder روی برچسب < frameset> را می گیرد، البته اگر مقداری مشخص شده باشد، این مقدار می تواند 1 (بله) و یا 0 (خیر) باشد.
marginwidth
این ویژگی به شما اجازه می دهد تا عرض فضای بین حاشیه های چپ و راست frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginwidth="10".
marginheight
این ویزگی به شما اجازه می دهد تا طول فضای بین بالا و پایین حاشیه ی frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10"
noresize
به طور پیش فرض هر frame را با کلیک کردن و درگ کردن روی حاشیه های آن می توانید تغییر اندازه دهید. ویژگی noresize مانع تغییر اندازه ی frame توسط یوزر می شود. برای مثال noresize="noresize".
scrolling
این ویژگی ظاهر نارهای اسکرول نمایان شده در frame را کنترل می کند. این ویزگی مقادیر "yes", "no" یا "auto"را می گیرد. برای مثال scrolling="no" به معنای نبودن نوارهای اسکرول می باشد.
longdesc
این ویژگی به شما اجازه می دهد تا یک لینک به صفحه ای حاوی یک توصیف طولانی از محتوای frame، ارائه بدهید. برای مثال longdesc="framedescription.htm"
یک صفحه ی وب می تواند لینک های متنوعی داشته باشد که شما را مستقیما به صفحات دیگر یا حتی بخش هایی خاص از یک صفحه ی ارائه شده می برد. این لینک ها هایپرلینک نامیده می شوند. هایپرلینک ها به بازدیدکنندگان اجازه می دهند تا با کلیک کردن روی لغات، اصطلاحات و تصاویر بین صفحات وب مسیریابی کنند. شما می توانید هایپرلینک ها را روی صفحه ی وب با استفاده از متن یا تصاویر موجود ایجاد کنید.
لینک کردن داکیومنت ها
یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.
این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید. Click following link
ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید.
Option Description
داکیومنت لینک شده را در یک پنجره یا تب جدید باز می کند. _blank
داکیومنت لینک شده را در همان چارچوب باز می کند. _self
داکیومنت لینک شده را در چارچوب اصلی باز می کند. _parent
داکیومنت لینک شده در کل بدنه ی پنجره باز می شود. _top
داکیومنت لینک شده را در یک targetframe نام گذاری شده باز می کند. targetframe
مثال:
برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.
این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی target را درک کنید.
Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body
استفاده از مسیر پایه
وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خلاص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.
مثال:
مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.
این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید. اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود
لینک شدن به بخشی از صفحه
می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد. نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید
<h1>HTML Text Links <aname="top">a>h1>
مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.
<ahref="/html/html_text_links.htm#top">Go to the Topa>
و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید.
شما می توانید لینک متنی ایجاد کنید تا فایل های قابل دانلود PDF، ZIP و DOC خود را بسازید. این کار بسیار ساده می باشد، فقط کافیست یک URL کامل از فایل قابل دانلود ارائه بدهید.
سلام با آموزش طراحی سایت در خدمت شما هستیم , درقسمت قبل آموزش HTMLفرم ها در Html را یاد گرفتیم , در قسمت یازدهم با ادامه آموزش طراحی سایت همراه باشید:
آموزش چند رسانه ای در HTML:
گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند. همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید.
مثال:
در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.
مرحله 1
ویژگی های برچسب < embed>
در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.
انواع ویدیوهای پشتیبانی شده
می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.
فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.
فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.
فایل های mov - فرمت Quick time movie در اپل.
فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.
مرحله 2
صدای زمینه
شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند. در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.
مرحله 3
این مثال یک صفحه ی خالی تولید خواهد کرد. این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند. اینترنت اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند: wav فرمت داخلی کامپیوترها، au فرمت داخلی برای کار ابزارهای Unix و MIDI یک کد برنامه گذاری جهانی برای موسیقی.
برچسب آبجکت در HTML
HTML 4 عنصر< object>را معرفی می کند که یک راه حل چند منظوره برای وارد کردن آبجکت عمومی ارائه می دهد. عنصر< object>به نویسندگان HTML اجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک کاربر، تعیین کند. در اینجا چند مثال در این رابطه می بینید.
مثال:
شما می توانید یک سند HTML را در خود سند HTML اجرا کنید.
شما می توانید یک سند java applet وارد سند HTML کنید.
مرحله 6
ویژگی classid تعیین می کند که چه نسخه ای از java plug-in استفاده شود. شما می توانید از ویژگی انتخابی codebase برای مشخص کردن چگونگی دانلود JRE استفاده کنید.
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTMLطراحی جدول را یاد گرفتیم , در قسمت هفتم با ادامه آموزش HTML همراه باشید:
آموزش List
اچ تی ام ال HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.
< ul>
لیست بدون ترتیب. این لیست آیتم ها را با استفاده از bullet های ساده لیست می کند.
< ol>
لیست منظم. این لیست از نمودارهای عددی مختلف برای لیست کردن آیتم های شما استفاده می کند.
< dl>
لیست تعریف. این لیست آیتم های شما را به همان روشی که در دیکشنری منظم شده اند، منظم می کند.
لیست های بدون ترتیب HTML
لیست بدون ترتیب مجموعه ای از آیتم های مربوط به هم می باشد که هیچگونه نظم و ترتیب خاصی ندارند. این لیست با استفاده از برچسب < ul>در HTML ایجاد می شود. هر آیتم در لیست با یک bullet مشخص می شود.
می توانید از ویژگی type برای برچسب < ul>استفاده کنید تا نوع bullet خود را مشخص کنید، که به طور پیش فرض یک دیسک می باشد. در زیر گزینه های ممکن را مشاهده می کنید.
در زیر مثالی را میبینید که در آن از < ul type="square">استفاده می کنیم.
نمونه دو
Beetroot
Ginger
Potato
Radish
در زیر مثالی را می بینید که در آن از < ul type="disc">استفاده کرده ایم.
نمونه سه
Beetroot
Ginger
Potato
Radish
در زیر مثالی را می بینید که در آن از < ul type="circle">استفاده کرده ایم.
نمونه چهار
Beetroot
Ginger
Potato
Radish
لیست های منظم HTML
اگر تمایل دارید آیتم های خود را به جای قرار دادن در یک لیست دارای bullet، در یک لیست عددگذاری شده قرار دهید، می توانید از لیست منظم HTML استفاده کنید. این لیست با استفاده از برچسب < ol>ایجاد می شود. شماره گذاری از یک شروع شده و برای هر لیست منظم عنصر بعدی با اضافه شدن یک عدد و به همراه برچسب< li>اضافه می شود. می توانید از ویژگی type برای برچسب < ol>استفاده کنیم تا نوع شماره گذاریمورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری به وسیله ی عدد انجام می شود. در زیر گزینه های ممکن را مشاهده می کنید.
- Default-Case Numerals.
- Upper-Case Numerals.
- Lower-Case Numerals.
- Lower-Case Letters.
- Upper-Case Letters.
در زیر مثالی را می بینید که در آن از < ol type="1">استفاده کرده ایم.
نمونه پنج
Beetroot
Ginger
Potato
Radish
در زیر مثالی را می بینید که در آن از < ol type="I">استفاده می کنیم.
نمونه شش
Beetroot
Ginger
Potato
Radish
در زیر مثالی را میبینید که در آن از < ol type="i">استفاده کرده ایم.
نمونه هفت
Beetroot
Ginger
Potato
Radish
مثال:
در زیر مثالی را می بینید که در آن از < ol type="A">استفاده کرده ایم.
Beetroot
Ginger
Potato
Radish
در زیر مثالی را می بینید که در آن از< ol type="a">استفاده کرده ایم.
نمونه نه
Beetroot
Ginger
Potato
Radish
ویژگی start
شما می توانید از ویژگی start برای برچسب < ol>استفاده کنید تا نقطه ی شروع شماره گذاری خود را مشخص کنید. در زیر گزینه های ممکن را مشاهده می کنید.
- Numerals starts with 4.
- Numerals starts with IV.
- Numerals starts with iv.
- Letters starts with d.
- Letters starts with D.
در زیر مثالی را می بینید که در آن از < ol type="i" start="4">استفاده می کنیم.
نمونه ده
Beetroot
Ginger
Potato
Radish
اچ تی ام ال HTML و XHTML لیست هایی به نام لیست های تعریف را پشتیبانی می کنند که در این لیست ها ورودی ها مانند ترتیب لغات در دیکشنری قرار می گیرند. این لیست یک روش ایده آل برای ارائه یک فهرست از معانی یا لیستی از اصطلاحات یا لیستی از نام ها و مقادیر می باشد. لیست تعریف از سه برچسب زیر استفاده می کند
< dl>-
شروع لیست را تعریف می کند.
مثال:
نمونه یازده
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
آموزش لینک های متنی
یک صفحه ی وب می تواند لینک های متنوعی داشته باشد که شما را مستقیما به صفحات دیگر یا حتی بخش هایی خاص از یک صفحه ی ارائه شده می برد. این لینک ها هایپرلینک نامیده می شوند. هایپرلینک ها به بازدیدکنندگان اجازه می دهند تا با کلیک کردن روی لغات، اصطلاحات و تصاویر بین صفحات وب مسیریابی کنند. شما می توانید هایپرلینک ها را روی صفحه ی وب با استفاده از متن یا تصاویر موجود ایجاد کنید.
لینک کردن داکیومنت ها
یک لینک با استفاده از برچسب < a>در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a>و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a>را می بینید.
این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید. Click following link
ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید.
مثال:
برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.
این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی target را درک کنید.
Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body
استفاده از مسیر پایه
وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خلاص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.
مثال:
مثال زیر از برچسب < base>برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.
ین مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید. اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود
لینک شدن به بخشی از صفحه
می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد. نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...>نام گذاری کنید
HTML Text Links
مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.
این مثال نتیجه ی زیر را تولید می کند. فقط رنگ لینک را قبل از کلیک کردن روی آن چک کنید، سپس رنگ ان را در هنگام فعال کردن و بازدید آن چک کنید.
دانلود کردن لینک ها
شما می توانید لینک متنی ایجاد کنید تا فایل های قابل دانلود PDF، ZIP و DOC خود را بسازید. این کار بسیار ساده می باشد، فقط کافیست یک URL کامل از فایل قابل دانلود ارائه بدهید.
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت پنجم با ادامه آموزش HTML ( آموزش ساخت جدول ) همراه باشید:
آموزش Table در HTML
جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table>ایجاد می شوند که در آن برچسب < tr>برای ایجاد ردیف ها و برچسب < td>برای ایجاد داده های سلول ها استفاده می شوند.
مثال:
نمونه یک
Row 1, Column 1
Row 1, Column 2
ویژگی های colspan و rowspan
اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.
در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.
نمونه پنج
Column 1
Column 2
Column 3
Row 1 Cell 1
Row 1 Cell 2
Row 1 Cell 3
Row 2 Cell 2
Row 2 Cell 3
Row 3 Cell 1
طول و عرض جدول
شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.
جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد. سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از
< thead>- برای ایجاد یک تیتر مجزا
< tbody>- برای نشان دادن بدنه ی اصلی جدول
< tfoot>- برای ایجاد یک پاورقی مجزا در یک جدول
یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر مختلفی باشد، اما ظاهر شدن برچسب های و قبل از زیاد مهم نیست.
مثال:
نمونه هشت
This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4
شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی استفاده کنید.
مثال:
در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.
اچ تی ام ال HTML5 یا زبان نشانه‌گذاری ابرمتنی۵ زبانی برای ساختن و ارائه ی محتوا برای شبکه جهانی وب است، این پنجمین تجدید نظر از استاندارد اچ‌تی‌ام‌ال است (در سال ۱۹۹۰ ایجاد و در سال ۱۹۹۷ به عنوان HTML4 استاندارد شده‌است) و تاکنون همچنان در دست توسعه‌است. اهداف اصلی اچ‌تی‌ام‌ال۵ بهبود این زبان به صورتی است که از جدیدترین فناوری‌های چند رسانه‌ای پشتیبانی کند در حالی که هم به راحتی توسط انسان‌ها قابل خواندن باشد وهم به طور مداوم توسط رایانه‌ها و دستگاه‌ها (مرورگرهای وب، تجزیه کننده‌ها و غیره) قابل درک باشد. اچ‌تی‌ام‌ال۵ در نظر دارد نه تنها HTML4 بلکه XHTML۱ و ۲HTML را نیز پشتیبانی کند. با پیروی از نسخه های قبلی اش HTML4.1 و XHTML1.1 ، اچ‌تی‌ام‌ال۵ یک پاسخ به استفاده مشترک اچ‌تی‌ام‌ال و XHTML بر روی شبکه جهانی وب، ترکیبی از ویژگی‌های معرفی شده توسط مشخصات مختلف و موارد معرفی شده توسط محصولات نرم‌افزاری مانند مرورگرهای وب است. مواردی که توسط کارهای مشترک ایجاد شده‌است. و هم چنین پاسخی به بسیاری ازخطاهای نحوی در مستندات وب موجود است. همچنین در تلاش است یکزبان نشانه گذاری یکتا تعریف کند که بتواند در دو قالب اچ‌تی‌ام‌ال یا XHTML نوشته شود.
احتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد.امروزه بسیاری از مرورگرها به شدت تمایل دارند که از HTML5 پشتیبانی کنند.
آموزش DocType:
اعلام نوع داکیومنت در HTML5 هم ساده و هم جالب می باشد. این کار به سادگی زیر میباشد:
بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:
برخی از آنها حتی در یک خط نوشته نمی شوند. این اولین دلیلی است که نشان می دهد کار طراحان وب با HTML5 راحت تر شده. یک صفحه ی HTML5 می تواند به سادگی زیر باشد:
HTML5 is rocks!
HTML5 Rocks!
آموزش مسائل سربرگ HTML:
اغلب اوقات در تیتر صفحات وب خو، نوع محتوا، جاوااسکریپت و مسیر فایل CSS را مشخص می کنیم، و باز هم زندگی با HTML5 ساده تر شده است. به جای در HTML5 می توان فقط از دستور زیر استفاده کرد:
در HTML5 اطلاعات "type=text/javascript"دیگر لازم نیستند، در عمل فقط اسکریپت بخش کاربر روشن می باشد.
