آموزش مقدماتی HTML,XHTML,CSS و JavaScript
دنیای آی تی ، وبلاگ تودرتوآموزش مقدماتی HTML,XHTML,CSS و JavaScript
دنیای آی تی ، وبلاگ تودرتوآموزش مقدماتی HTML,XHTML,CSS و JavaScript
حالا اجازه دهید که عناصر <sup>,<sub>,<big>,<small>,<hr /> را مشاهده کنیم.شما می توانید چگونگی نمایش این عناصر در مرورگر را در شکل زیر مشاهده کنید.
عنصر <sup>
محتویات یک عنصر <sup> در بالا نویس نوشته می شوند.آن در نیمه بالایی ارتفاع کاراکتر های دیگر قرار می گیرد و همچنین اغلب کمی کوچکتر از بقیه متن ها مجاورش است.
Written on the 31 <sup> st </sup> February.
عنصر <sup> برای اضافه کردن معادله های نمایی و اضافه کردن پسوند st,nd,rd,th به تاریخ مفید است.هرچند که باید مطلع باشید که بعضی مرورگر ها نمی توانند بین خط و بالانویس و خط بالای آن فاصله زیادی ایجاد کنند.
عنصر <sub>
محتویات عنصر <sub> در زیر نویس نوشته می شوند.آن در نیمه پایین ارتفاع کاراکترهای دیگر نمایش داده می شود و اغلب کمی کوچکتر از کاراکترهای اطرافش است.
The EPR paradox <sub> 2 </sub> was devised by Einstein, Podolsky, and Rosen.
عنصر <sub> برای ایجاد یک زیر نگارش یا تبصره مفید است.
آموزش مقدماتی HTML,XHTML,CSS و JavaScript
فصل اول(ساختار اسناد برای وب)،بخش پنجم
مثال : ساختار پایه ای متن
حالا که شما عناصر پایه ای متن را ملاحظه کردید که برای فرم دهی به متن استفاده می شوند-عنوان ها و پارگراف ها – حالا سعی کنید که از اطلاعات خود استفاده کنید.
در این مثال،ما یک صفحه ایجاد می کنیم که Example Cafe’ نامیده می شود.ماتا آخر این آموزش بر روی این مثال کار می کنیم تا یک سایت کامل ایجاد کنیم.
1. اسکلت سند را اضافه کنید : عناصر <html> , <head> , <title> , <body> .
<html>
<head>
<title> Example Cafe - community cafe in Newquay, Cornwall, UK</title>
</head>
<body>
</body>
</html>
صفحه در عنصر <html> قرار دارد.عنصر <html> فقط می تواند شامل دو عنصر زیر مجموعه باشد : عنصر <head> , <body> . عنصر <head> شامل یک عنوان برای صفحه است، و شما باید از این عنوان نوع اطلاعات موجود در صفحه را نشان دهید.
ضمنا عنصر <body> شامل قسمت اصلی یک صفحه است-قسمتی که بازدید کننده واقعا آن را در مرورگر وب خود می بیند.
2. صفحه شما یک عنوان اصلی دارد و دو عنوان سطح 2،ساختار این عنوان ها به اطلاعات بر روی صفحه اضافه می شود:
<body>
<h1>EXAMPLE CAFE</h1>
<h2>A community cafe serving home cooked, locally sourced, organic food</h2>
<h2>This weekend’s special brunch</h2>
</body>
3. شما حالا می توانید صفحه را با برخی پاراگراف ها در پایین عنوان ها پر کنید :
فصل اول(ساختار اسناد برای وب)،بخش پنجم
ایجاد پاراگراف با استفاده از عنصر <p>
عنصر <p> راه دیگری برای ساختار متن شما ارائه می دهد.هر پاراگراف از متن باید در مابین تگ باز <p> و تگ بسته </p> قرار گیرد، مثل مثال پایین :
<p> Here is a paragraph of text. </p>
<p> Here is a second paragraph of text. </p>
<p> Here is a third paragraph of text. </p>
وقتی که یک مرورگر یک پاراگراف را نمایش می دهد،معمولا قبل از پاراگراف خط جدیدی را ایجاد می کند و فضای عمودی کمی به آن اضافه می کند، مانند شکل زیر :
عنصر <p> می تواند همه خصیصه های عمومی را دارا باشد و می تواند خصیصه align را نیز به آن اختصاص داد :
align , class , id , style , title , dir , lang , xml:lang
آموزش مقدماتی HTML,XHTML,CSS و JavaScript
فصل اول(ساختار اسناد برای وب)،بخش چهارم
ایجاد عنوان با استفاده از عناصر <hn>
مهم نیست که چه مقدار اسناد ایجاد کرده اید،بیشتر اسناد دارای یک عنوان در یک فرم هستند.روزنامه ها از تیتر استفاده می کنند، عنوان یک فرم،هدف آن فرم را به ما نشان می دهد.
در قطعه متن های طولانی،عنوان می تواند به ساختار سند کمک کند.اگر شما فهرست محتویات یک کتاب را مشاهده کنید،عنوان های مختلف هر فصل و ترتیب آنها را مشاهده می کنید که ساختار کتاب را تشکیل می دهند.
XHTML شش مرحله عنوان را ارائه می دهد، که به وسیله عناصر <h1>,<h2>,<h3>,<h4>,<h5>و <h6> استفاده می شوند.مرورگرها عنصر <h1> را بزرگتر از عنصر <h6> نمایش می دهند ( اگرچه شما در ادامه خواهید دید که CSS می تواند اندازه ها و سبک های هر عنصر را تغییر دهد).مراحل عنوان را در شکل زیر می بینید:
بیشتر مرورگرها محتویات عناصر <h1>,<h2> و <h3> را بزرگتر از اندازه پیش فرض متن ها در اسناد نمایش می دهند.محتویات عنصر <h4> شبیه اندازه پیش فرض متن، و محتویات عناصر <h5> و <h6> کوچکتر هستند مگر اینکه ساختار آنها را با استفاده از CSS تغییر دهید.
در اینجا مثال دیگری از چگونگی استفاده از عنوان ها دریک ساختار سند آورده شده است.جایی که عنصر <h2> قرار دارد زیر عنوان عنصر <h1> است( این مدل شبیه ساختار بخش های مختلف یک فصل کتاب است.).
<h1> Basic Text Formatting </h1>
<p> This section is going to address the way in which you mark up text.
Almost every document you create will contain some form of text, so this
will be a very important section. </p>
<h2> Whitespace and Flow </h2>
<p> Before you start to mark up your text, it is best to understand what
XHTML does when it comes across spaces and how browsers treat long sentences
and paragraphs of text. </p>
<h2> Creating Headings Using hn Elements </h2>
<p> No matter what sort of document you are creating, most documents have
headings in some form or other... </p>
در شکل زیر این کد را در مرورگر می بینید :
این شش عنصر عنوان می توانند از همه خصیصه های عمومی استفاده کنند.شما تا پایان این فصل با برخی ویژگی ها مثل :
align , class , id , style , title , dir , lang , xml:lang آشنا خواهید شد.
خصیصه align ( تراز کردن )
خصیصه align نشان می دهد که آیا عنوان در چپ،مرکز یا راست صفحه ظاهر شود ( پیش فرض آن چپ است ).این خصیصه می تواند سه مقدار داشته باشد که در جدول پایین نشان داده شده است.
این خصیصه مشخص شده که از خصوصیات نسخه های آینده HTML و XHTML حذف شود.شما تا پایان این آموزش چندین عنصر و خصیصه را خواهید دید که آنها نیز برای حذف از نسخه های آینده مشخص شده اند، و بهتر است که از استفاده آنها خوداری کنید.
آموزش مقدماتی HTML,XHTML,CSS و JavaScript
فصل اول(ساختار اسناد برای وب)،بخش سوم
یادگیری از طریق نگاه کردن به سورس کدهای وب سایت های دیگر
وقتی که HTML آمد،بسیاری از مردم یادگرفتند که چگونه با ویژگی خیلی ساده ای که وجود دارد صفحات خود را ایجاد کنند و شما این ویژگی را در بیشتر مرورگرهای رایج یافت می کنید _ توانایی نمایش سورس کدی که صفحه را ساخته است.
اگر شما به منو View در مرورگر خود بروید،و با توجه به نوع مرورگر خود یکی از گزینه های View Source یا Page Source را مشاهده کنید،شما باید کدی که صفحه را ایجاد کرده است،ببینید.
اگر شما بخواهید ببینید که چگونه نویسنده یک صفحه به برخی چیزها برروی صفحه دسترسی دارد،این خیلی فن ساده ای است.تصویر زیر چگونگی مشاهده سورس کد صفحه اصلی سایت تودرتو را نمایش می دهد(پنجره راست شامل سورس صفحه است)
عناصر برای فرم دادن به متن
شما حالا می دانید که یک صفحه XHTML (برخی زمان ها اسناد XHTML گفته می شود) از عناصری ساخته می شود که چگونگی ساختار محتوای آن را شرح می دهد.هر عنصر چیزهایی را که مابین تگ باز و بسته شده آن قرار دارد را شرح می دهد.همچنین تگ های باز شده می تواند شامل خصیصه هایی باشد که به چیزهای بیشتری را راجع به عنصر خاص شرح می دهد.
شما یادمیگیرید که به وسیله XHTML از چه عناصری می توانید استفاده کنید و این عناصر چه کارهایی را انجام می دهند و هر یک چه خصیصه هایی می توانند داشته باشند.
شما قبلا دیدید که هر سند XHTML با استفاده از عناصر ,و آغاز می شود.شما تا پایان این فصل با جزییات بیشتری راجع به عناصر آشنا می شوید،همچنین به برخی خصیصه ها اشاره می شود که خصیصه های عمومی (universal attributes) نام دارند ( به این اسم فراخوانی می شوند زیرا آنها می توانند بر روی هر عنصری ظاهر شوند).شما می توانید از عناصر زیر برای شرح ساختار متن خود استفاده کنید :
میانبرهای (shortcut) کیبرد برای اینترنت اکسپلورر و کاراکتر مپ (I
میانبرهای (shortcut) کیبرد برای اینترنت اکسپلورر (Internet Explorer)
· CTRL+B : باز کردن دیالوگ باکس Organize Favorites
· CTRL+F : باز کردن نوار جستجو (Search bar)
· CTRL+F : شروع برنامه Find
· CTRL+H : باز کردن نوار History
· CTRL+I : باز کردن نوار Favorites
· CTRL+L : باز کردن دیالوگ باکس Open
· CTRL+N : باز کردن مجدد مرورگر با آدرس مشابه صفحه
· CTRL+O : باز کردن دیالوگ باکس Open،شبیه CTRL+L
· CTRL+P باز کردن دیالوگ باکس Print
· CTRL+R : به روز کردن صفحه وب جاری
· CTRL+W : بستن پنجره جاری
میانبر های (Shortcut) کیبرد برای ویندوز
در این مقاله لیست میانبرهای کیبرد،که شما می توانید به وسیله ویندوز استفاده کنید ذکر شده است.
کلید های ترکیبی سیستم ویندوز
· F1 : راهنما
· CTRL+ESC : باز کردن منو Start
· ALT+TAB : سوئیچ مابین برنامه های بازشده
· ALT+F4 : خروج از برنامه
· SHIFT+DELETE : حذف آیتم بدون انتقال به Recycle Bin
· لوگو ویندوز+L : قفل کامپیوتر (بدون استفاده از (CTRL+ALT+DELETE
کلیدهای ترکیبی برنامه ویندوز
· CTRL+C : کپی
· CTRL+X : کات (cut)
· CTRL+V : پیست (past)
· CTRL+Z : برگرداندن آخرین عمل (undo)
· CTRL+B : ضخیم کردن متن (bold)
· CTRL+U : زیرخط (underline)
· CTRL+L : کج کردن متن (italic)
آموزش مقدماتی HTML,XHTML,CSS و JavaScript
فصل اول(ساختار اسناد برای وب)،بخش دوم
جدا کردن سر (Head) از بدنه (Body)
هر وقت که شما یک صفحه را در XHTML بنویسید،صفحه مابین تگ باز <html> و تگ بسته </html> است،همچون مثال قبل.داخل عنصر <html> دو قسمت اصلی صفحه وجود دارد:
· عنصر <head> : به عنوان سر(head) صفحه به آن مراجعه می شود،شامل اطلاعاتی درباره صفحه است(این محتویات اصلی صفحه نیست).برای مثال ممکن است شامل عنوان (title) و توضیحاتی راجع به صفحه باشد، یا جایی است که مرورگر بتواند دستورهای CSS را برای شرح چگونگی سند باید نمایش داده
شود را پیدا کند.آن ترکیبی از تگ باز <head> و تگ بسته </head> و هر چیز مابین این دو،است.
· عنصر <body> : به عنوان بدنه صفحه به آن مراجعه می شود،شامل اطلاعاتی است که شما عینا در پنجره اصلی مرورگر خود آن ها را مشاهده می کنید.ترکیبی از تگ باز شده <body> و تگ بسته شده </body> و هر چیزی که مابین این دو،است.
عناصر <html>,<head>,<body> اسکلت یک سند XHTML هستند و ساختمان هر صفحه وب بر روی آن ها ساخته می شود.
<head>
<title> Popular Websites: Google </title>
</head>
آموزش مقدماتی HTML,XHTML,CSS و JavaScript
فصل اول(ساختار اسناد برای وب)،بخش اول
شما برای یادگیری این آموزش نیاز به هیچ گونه اطلاع قبلی از زبان های برنامه نویسی و یا تجربه قبلی برنامه نویسی ندارید.برای پیاده سازی مثالهای این آموزش نیازی به برنامه خاصی ندارید،شما می توانید از یک ویرایشگر متن مثل NotePad ویندوز برای تایپ کدها استفاده کنید و یا می توانید از نرم افزارهای کدنویسی مثل Microsoft FrontPage یا Microsoft Expression Web استفاده کنید.در این تدریس،آموزش استفاده از هیچ گونه نرم افزاری مدنظر نیست، و فقط آموزش کدنویسی با دست و بدون استفاده از هیچ گونه نرم افزار کدنویسی مدنظر است.
غیر فعال کردن Show hidden files and folders
برای مشاهده فایلها و فولدرهای پنهان(hide)در ویندوز،شما باید به Folder Options بروید و از تب View زیر قسمت Advanced settings در زیر شاخه Hidden files and folders را پیدا کنید و حالت Show hidden files and folders را انتخاب کنید.اگر شما بخواهید که این گزینه غیر فعال شود و فایلهای و فولدرهای پنهان در ویندوز شما توسط افراد دیگر قابل مشاهده نباشد،گامهای زیر را انجام دهید.
ابتدا به منو استارت رفته و Run را اجرا کنید.در Run رجیستری ویندوز را فراخوانی کنید(با تایپ regedit در تکس باکس Run).پس از بازشدن رجیستری کلید F3 را بر روی کیبورد خود فشار دهید تا دیالوگ باکس جستجوباز شود.در داخل تکس باکس موجود showall را تایپ کرده و Keys را تیک بزنید.پس از پایان جستجو شما در سمت چپ پنجره فولدر SHOWALL را مشاهده می کنید و در سمت راست پنجره محتویات فولدر SHOWALL را مشاهده می کنید.در قسمت سمت راست CheckedValue را دابل کلید کنید و مقدار Value data آن را از یک به صفر تبدیل کنید و دکمه Ok را کلیک کنید.حالا گزینه Show hidden files and folders غیر فعال است.برای فعال کردن گزینه گامهای قبل را انجام دهید و این بار به مقدار صفر را به یک تبدیل کنید.