زاکربرگ : فیسبوک مدافع حقوق مسلمانان
December 10, 2015
علامت هایی از نسخه جدید System shock 3
December 11, 2015
امیدوارم این جلسه برای شما مفید واقع بشه. پس با مدیاسافت همراه باشید.
HTML را بااستفاده از Notepad یا هر ویرایش گر متن دیگری بنویسید.
HTML را می توانید با استفاده از ویرایشگرهای حرفه ای مانند Microsoft WebMatrix یا Sublime Text نوشت ؛ اما ما اعتقاد داریم که با استفاده از یک ویرایش گر ساده راه خوبی برای یادگیری است. بنابراین ویرایشگر Notepad برای این کار مناسب است.
برای ایجاد اولین صفحه ی وب خود 4 مرحله ی زیر را دنبال کنید :
مرحله ی 1 : Notepad را باز کنید
برای باز کردن Notepad مسیر زیر را دنبال کنید :
Start => All Programs => Accessories => Notepad
مرحله ی 2 : کدهای HTML را بنویسید
می توانید کدهای زیر را کپی کنید.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
مرحله 3 : ذخیره ی کدهای HTML
فایل را در کامپیوتر خود ذخیره کنید.
برای این منظور در منوی File گزینه ی Save را بزنید.
نام فایل را “Test.html” یا هر نام دیگری انتخاب کنید. پسوند فایل نیز باید htm یا html باشد .
برای پشتیبانی زبان فارسی Encoding را روی حالت UTF-8 قرار دهید.
حال دکمه ی Save را بزنید.
مرحله ی 4 : صفحه ی HTML را در مرورگر مشاهده کنید
فایلی را که با پسوند htm ذخیره کرده اید با مرورگر مورد علاقه ی خود باز کنید.
مثال های پایه ای در HTML
اگر در این مثال ها از تگ هایی استفاده شده است که شما آنها را هنوز یاد نگرفته اید ؛ نگران نباشید. چرا که در آینده حتما آنها را می آموزید.
اسناد HTML
- تمام اسناد HTML با یک اعلان نوع شروع می شود : <DOCTYPE html!>
- سند HTML ، خود با تگ <html> شروع و با تگ <html/> پایان می پذیرد.
- تمام قسمت هایی که ما در مرورگر می بینیم با بین 2 تگ <body> و <body/> قرار دارد.
حال به مثال زیر توجه کنید:
هدف از این مثال این است که شما به محتویات داخل دو تگ شروع و پایانی <body> و <body/> توجه کنید. در واقع ببینید که محتویات این تگ در مرورگر نشان داده می شوند. و همچنین هر تگی که باز می شود ، قطعا باید بسته شود.
نکته : منظور از تگ باز همان تگ ابتدایی (مثلا <body>) و از تگ بسته همان تگ پایانی (مثلا <body/>) است .
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
خروجی :
عنوان در HTML
در HTML تگ های <h1> تا <h6> به عنوان تگ های عنوان یا سر فصل شناخته می شوند.
مثال :
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
خروجی :
نکته : اگر خواستید کد یک صفحه ی وب ذخیره شده را ببینید و یا آن را ویرایش کنید فقط کافیست برروی آن کلیک راست کرده ، سپس برروی گزینه ی Open with رفته و پس از باز شدن برروی Notepad کلیک کنید.
پاراگراف در HTML
در HTML پاراگراف ها تا تگ <p> تعریف می شوند.
مثال :
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
خروجی :
لینک در HTML
لینک در HTML با تگ <a> تعریف می شود.
مثال :
<!DOCTYPE html>
<html>
<body>
<a href=”http://www.Mediasoft.ir”>This is a link</a>
</body>
</html>
خروجی :
- مقصد لینک را در صفت href مشخص می کنیم. دقت شود که لینک حتما باید داخل ” ” باشد.
- صفت برای ارائه ی اطلاعات اضافی درباره ی عناصر HTML استفاده می شود.
تصاویر در HTML
تصاویر در HTML با تگ <img> تعریف می شوند.
منبع فایل (src) ، متن جایگزین (alt) و عرض(width) و ارتفاع(height) به عنوان صفت برای تگ <img> تعریف شده اند.
مثال :
<!DOCTYPE html>
<html>
<body>
<img src=”Mediasoft.jpg” alt=”Mediasoft.ir” width=”150″ height=”100″>
</body>
</html>
خروجی :
- توضیحات مربوط به صفت ها در جلسات آینده حتما ارائه خواهند شد.
- تمامی مثال هایی که در این جلسه زده شد صرفا جنبه ی مفهومی داشته و تگ های <h1> ، <p> ، <a> و <img> در جلسات آینده مفصل مورد بحث قرار می گیرند.
پایان جلسه ی دوم
