آموزش مقدماتی HTML,XHTML,CSS و JavaScript

دنیای آی تی ، وبلاگ تودرتو

آموزش مقدماتی HTML,XHTML,CSS و JavaScript

دنیای آی تی ، وبلاگ تودرتو

آموزش مقدماتی 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)

ادامه مطلب . . .