آموزش HTML – قسمت سوم

یکشنبه, ۲۸ام تیر , ۱۳۸۸ | ۱۰ دیدگاه

با سلام دوباره.

در ابتدا از تاخیر به وجود آمده در  ارائه قسمت سوم عذرخواهی می کنم.

با  تشکر از نظرات سازنده و دلگرم کننده شما به قسمت سوم این خود اموز می پردازیم. البته ذکر چند نکته قبل از خود آموز لازمه.

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

نکته دوم اینکه در قسمت های اینده سعی می کنیم با ارائه یک کار عملی به صورت WorkShop  با هم به جلو بریم .لطفا نظرات خودتون رو در مورد این پیشنهاد ارائه بدید.

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

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

آموزش HTML – قسمت سوم

Style ها

Style چیست ؟

یکی از مهمترین مباحث در زمینه طراحی و کد نویسی Style ها هستند به طور دقیقتر خصوصیات وتواناییهایی برای تگهای HTML می باشند و از اهمیت بسیار بالایی برخوردارند.

یاد گیری Style ها پیش نیازی برای یادگیری CSS می باشد.

Style ها ابزاری برای کنترل تمامی تگهای HTML در صفحه وب هستند. در اینجا به صورت کلی توضیحاتی در مورد Style ها و صفحات CSS داده خواهد شد و در آینده به صورت کامل با این کدها آشنا خواهیم شد.

Style ها به چندین روش درون صفحات وب نوشته می شوند.

· به صورت خطی و درون تگهای HTML .

· به صورت تگهای <Style> </Style> درون صفحات HTML .

· ویا بصورت صفحات و کدهای CSS .( برای یادگیری و توضیح در مورد کدهای CSS عجله نکنید ! )

برای آشنایی بیشتر با این موارد به ذکر چندین مثال می پردازیم.

style=”background-color:yellow”

style=”font-size:10px”

style=”font-family:Times”

style=”text-align:center”

اینها کدهایی هستند که درون تگهای HTML نوشته می شوند.

تغیر رنگ BackGround (پس زمینه ) با استفاده از Style ها.

خوب  ، برای شروع  به کدهای زیر توجه کنید.

<html>

<body style=”background-color:yellow”>

<h2>Look: Colored Background!</h2>

</body>

</html>

در قسمت body , ویا بدنه صفحه وب مشاهده می کنید که از یک Style خطی استفاده شده است. این کد باعث خواهد شد که پس زمینه و یا  Back Ground  صفحه وب شما با رنگ زرد نمایش داده بشه.

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

تغییر Font نوشته ها با استفاده از Style ها .

در اینجا مشاهده خواهید کرد که font  نوشته ها با استفاده از خصوصیات Style ها قابل کنترل می باشد.

<html>

<body>

<h1 style=”font-family:verdana”>A heading</h1>

<p style=”font-family:courier new; color:red; font-size:20px;”> A paragraph </p>

</body>

</html>

مشاهده می کنید در تگ <h1> , <p> این Style ها برای تغییر نوع font به کار رفته است.

تغییر نوع چینش نوشته ها  ( Text Alignment )

در اینجا مشاهده می کنید که با استفاده از Style ها نوع چینش نوشته ها را  کنترل می کنیم.

<html>

<body>

<h1 style=”text-align:center”>This is heading 1</h1>

<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.

</p>

</body>

</html>

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

در قسمت بعدی به HyperLink  ها و یا پیوندهای بین صفحات و یا تگهای <a> می پردازیم.

میتوانید این قسمت را در قالب قایل PDF دانلود نمایید

دانلود مثالها

Be Sociable, Share!


۱۰ دیدگاه


  1. جوک
    ۲۸ تیر ۱۳۸۸

    خیلی دوست دارم!




  2. سعید
    ۳۰ تیر ۱۳۸۸

    بیصبرانه منتظر آموزش CSS هستیم
    ممنون




  3. Murderer
    ۶ شهریور ۱۳۸۸

    سلام چرا من نمی کد بنویسم اه اه اه
    html

    body style=”background-color:yellow”

    h2>Look: Colored Background!Look: Colored Background!</h2

    این تیکه واسم مجهول هستش.چه ربطی داره؟

    نظر شما پیش از انتشار باید تایید شود.




  4. Murderer
    ۷ شهریور ۱۳۸۸

    سلامممممم
    من میخوام یه استایل خطی تو تگ img بنویسم.چه جوری؟
    این جوری
    img style=”image:align:center src=”hasan.gif” width=”100″ heigh=”50




  5. Heidi
    ۱۸ آبان ۱۳۸۸

    tashakor




  6. آرشام
    ۲۴ مرداد ۱۳۹۰

    عالی




  7. فاضل
    ۲۱ مهر ۱۳۹۰

    با عرض سلام و خسته نباشید،میخواستم بگم اگر میشه بعد از اتمام هر قسمت از این خودآموزها یک لینکی چیزی بذارید برای رفتن به قسمت بعدی.چون به نظر من اینطوری بهتر میشه و کاربران راحتتر میتونند به مطالب بعدی دسترسی پیدا کنند.
    بازهم به خاطر قرار دادن این خودآموزها روی سایتتون ازتون ممنونم.
    (امیدوارم که انتقاد پذیر باشید و خدای نکرده از این پیام من ناراحت و دلگیر نشید.)




  8. علیرضا
    ۲۲ بهمن ۱۳۹۰

    ممنون
    خسته نیاشی




  9. حسن
    ۷ اسفند ۱۳۹۰

    دارم دنبال میکنم.




  10. masih
    ۴ فروردین ۱۳۹۱

    مشتاق پی گیری هستم



دیدگاه خود را بنویسید