چکیده مطالب HTML در یک نگاه
چکیده مطالب html در یک نگاه
خلاصه ای از مطالب ارائه شده در مورد HTML در زیر ارائه شده است. آنرا چاپ کنید، تا کنید و در مکانی امن قرار دهید.
تگ های اصلی یک سند HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
تگ عنوان در HTML
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
تگ های متن در HTML
<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>
تگ های فرمت بندی متن در HTML
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
<b>This text is bold</b>
<i>This text is italic</i>
<strong>This text is strong</strong>
<code>This is some computer code</code>
<b>This text is bold</b>
<i>This text is italic</i>
تگ لینک در HTML
Ordinary link:
<a href="http://www.example.com/">Link-text goes here</a>
Image-link:
<a href="http://www.example.com/"><img src="/URL" alt="Alternate Text" /></a>
Mailto link:
<a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید">Send e-mail</a>
Bookmark:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
<a href="http://www.example.com/">Link-text goes here</a>
Image-link:
<a href="http://www.example.com/"><img src="/URL" alt="Alternate Text" /></a>
Mailto link:
<a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید">Send e-mail</a>
Bookmark:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
تگ لیست های نامرتب در HTML
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<li>Item</li>
<li>Item</li>
</ul>
تگ لیست های مرتب در HTML
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<li>First item</li>
<li>Second item</li>
</ol>
تگ لیست های تعریفی در HTML
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
تگ جدول در HTML
<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
تگ تصویر در HTML
<img src="/URL" alt="Alternate Text" height="42" width="42">
تگ Styles در HTML
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
تگ iframe در HTML (صفحه ای داخل صفحه جاری)
<iframe src="/demo_iframe.htm"></iframe>
تگ فرم در HTML (ارسال اطلاعات به سرور)
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
کاراکترهای رزرو شده در HTML
< is the same as <
> is the same as >
© is the same as ©
> is the same as >
© is the same as ©
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 34711
دیدگاهها
سلام و وافعا خسته نباشید.
سایت کامل شما کار یادگیری من رو که از نظر زمان محدودیت دارم رو خیلی جلو انداخت. امیدوارم کارتون همینطور تداوم داشته باشه و مثل خیلی از سایتهای مفید دیگر ایرانی که به خاطر عدم حمایت کافی مجبور به توقف کارشون شدن ، نشین. من که به نوبه خودم سعی میکنم با خرید مجموعه های آموزشی شما هم به خودم و هم به این سایت بابت تداوم کارشون کمک کرده باشم.
الان من html رو تموم کردم. البته html5 رو هنوزشروع نکردم. میخوام بدونم اول html5 رو هم بخونم بعد برم سراغ css و css3 بهتره یا برای درک بهتره html5 (چون احتمالا کدهای css بیشتری توش خواهد اومد) اول سراغ css و css3 برم و بعد بیام html5 رو تکمیل کنم.؟
بعد 2 چیز دیگه:
1-من ویدئو آموزشی html رو خریداری کردم و تا آخر گذروندم. آیا برای html5 هم ویدئو جداگانه هست که باید تهیه کنم؟ اگر هست کجاست؟چون پیداش نکردم.
2-این بخش نظرات رو من توی ویدئو آموزشی شما خیلی بزرگتر می بینم. در حالی که اینجا موقع تایپ کردن فقط 2 خط قابل مشاهده هست. مشکلم در کجاست؟
ممنون
با عرض سلام و تشکر از شما دوست عزیز.
به نظر من نیاز نیست html5 رو جداگانه وقت بذارید. همینکه html رو گذروندید، تا حد خیلی زیادی جلو هستید. html5 کمی گستردهتر هست و چند تگ اضافه شده و همینطور بعضی از خصوصیات منسوخ شده که لابلای آموزشهای دیگه میتونید این موارد رو یاد بگیرید.
همینطور css و css3 جدا از هم نیست. شما css رو یاد بگیرید یا در واقع css3 رو شروع به یادگیری کنید.
در مورد بخش نظرات باید بگم که کلا اینطوری هست و مشکل از شما نیست.
سلام
ممنون از سایت عالیتون.من فکر می کردم html رو خوب بلدم اما نکته های خوبی از سایتتون یاد گرفتم و دید بازتر و تخصصی تری نسبت به اون پیدا کردم.
لطفا راجع به تگ زیر بیشتر توضیح دهید:<input type="hidden" />
سلام
یکی از استفاده های مهم تگ input با نوع hidden ذخیره کردن یک مقدار دلخواه در آن است. برای ذخیره کردن مقدار در تگ مذکور کافی است که ویژگی value آنرا با مقدار دلخواهتان تنظیم کنید.
اما شاید سوال کنید که انجام این کار در کجا کاربرد دارد ...!؟
همان طور که می دانید تگ بالا داخل تگ form قرار می گیرد و زمانی که کاربر اطلاعات فرم را پر می کند و روی دکمه "ذخیره" کلیک می کند، مقدار تگ input با نوع Hidden همراه با بقیه فیلدها، به سرور ارسال می شود و می توانیم بر اساس مقدار آن تصمیم بگیریم.
یک مثال خیلی ساده از کاربرد تگ مذکور تفاوت قائل شدن بین فرم "ایجاد" و "ویرایش" است. یعنی تصور بفرمایید که ما از یک فرم می خواهیم برای پیاده کردن حالت "ایجاد" و "ویرایش" استفاده کنیم، برای انجام این کار کافی است که تگ input از نوع Hidden را برای زمانی که در حالت "ایجاد" هستیم را با مقدار "Insert" و زمانی که در حالت "ویرایش" هستیم با مقدار "Update" تنظیم کنیم. بنابراین زمانی که اطلاعات فرم توسط کاربر تنظیم می شود و روی دکمه "ذخیره" کلیک می کند مقدار input از نوع Hidden نیز به سرور ارسال می شود و از مقدار آن متوجه می شویم که باید عملیات "Insert" یا "Update" انجام شود.
یکی دیگر از کاربردهای مهم تگ input از نوع hidden جلوگیری از نفوذ هکرها در برنامه است، یعنی شما می توانید زمانی که فرم "ایجاد" را به سمت کاربر ارسال می کنید، تگ مذکور را با یک مقدار Random تنظیم کنید، در ادامه باید مقدار در نظر گرفته شده سمت سرور نگهداری شود و در ادامه زمانی که اطلاعات توسط کاربر به سرور ارسال می شود، این دو مقدار یعنی مقدار نگهداری شده سمت سرور و مقداری که از سمت کاربر ارسال شده با هم مقایسه می شوند و اگر مساوی بودند عملیات "Insert" انجام می شود. به این ترتیب اگر هکری بخواهد فرم را به روش های نامتعادل به سرور ارسال کند، ما متوجه این موضوع می شویم و اجازه Insert از آن گرفته می شود.
هزاران بار ممنون. بنده به جای خودم و تمام کسانی که این مطالب را میخونن و به علت مشغله های زیاد نمیتونن کامنت بزارن از شما و تیم زحمت کش تون تشکر میکنم.
واقعا عالي بود ممنون بابت زحماتي كه خالصانه كشيدين .
سلام وعرض ادب
خدمت شما عرض کنم که خدا شما رو خیر بده و من واقعا از شما ممنونم.
یک سوال:بعد از خوندن html مقدماتی میتونیم بریم css؟
یا این که نیاز هست تا آخر html رو بخونیم؟
ممنون میشم اگه پاسخ بدین.
با سلام و تشکر.
اگر به مفاهیم html و تگ آشنا شدید، بله!!!
علت اینکه گفته میشه سلسلهوار باید دورهها طی بشه، به این خاطر هست که هر دوره پیشنیاز دورهی بعدی هست. در CSS شما باید با مفاهیم تگ و خصوصیات و ... آشنا باشید تا راحت بتونید زبان CSS رو درک کنید.
و الّا هیچ اجباری به رعایت این ترتیب نیست.
اقایون داداشام دمتون گرم زیر سایه مرتضی علی مستدام باشید خیلی عالی بود...
مرسی از شما استاد عزیز، خیلی استفاده کردم و بسیار مفید بود امیدوارم همیشه همین طور سلامت و بشاش و بامحبت باشید...
سلام و خسته نباشید خدمت تهیه کنندگان سایت فعال بیاموز
ان شاء آموزش های ارائه شده در مسیر خیر و خوبی استفاده شود که باقی الصالحات شما عزیزان به حساب بیاید.
سوال اول: قضیه این کاراکتر ها چیه؟
سوال دوم: تگ ها ی تهی هم باید با تگ پایان گذاشته شود و گرنه در برخی از مرورگر ها مشکل ایجاد می کند؟
سوال سوم : زمانی که html اموزش میدیدم قسمت هایی که از cssذکر شده بود به صورت گنگ می موند تا htmlتمام کنم و بخوام قسمت cssشروع کنم و این باعث می شه یه سری سوالات و ابهام ها بی جواب بمونه
سوال چهارم : قسمت های پایان بخش هر مبحث مثال خودتان امتحان کنید که همین بخش پر از نکته است و اگر این قسمت به عنوان تمرین فقط باشه و رد بشیم یه سری نکته ها رو از دست می دهیم
سایت بسیار عالی و قوی هست که گرچند طبق گفته دوستان برگرفته از یک سایت خارجی هست ولی این گیرایی و بازدهی که در این سایت هست در سایت خارجی این بازدهی رو به هیچ وجه نداره
یه پیشنهاد : برای قسمت هایی از آموزش فیلم تهیه کنید .
با تشکر فراوان از تنظیم کننده این سایت
در پناه حق
یازهرا
سلام
خسته نباشید
من هدفم یادگیری جاوا اسکریپت و ASP.NET هستش؟
ایا لازمه HTML , CSS را به طور کامل بخونم؟مگه این کدها تو سطح پیشرفته استفاده میشه؟
یکم توضیح بدین
سلام
پیشنهاد بنده آموش کامل CSS و HTML است.
توجه داشته باشید اگر قصد فراگیری ASP.NET MVC را دارید حتماً قبل از آن باید HTML و CSS و JavaScript و jQuery را بصورت کامل آموزش ببینید. یعنی بدون فراگیری آنها غیرممکن است که بتوانید پروژه ای را با تکنولوژیASP.NET MVC پیاده کنید. اما اگر می خواهید سمت ASP.NET Webform که یک پله از ASP.NET MVC پایین تر است بروید آموزش HTML و CSS کمرنگ تر می شود.
سلام. خسته نباشيد و دست مريزاد :)
خدمت شما عارضم كه نديده بودم سايت فارسي زباني رو با اين كيفيت و اين توجه به كاربر در امر برنامه نويسي واقعا خدا قوت.
باز هم ازتون ممنونم :))
يا علي.
ممنون از سایت خوبتون و من به کمک سایتتون و راهنمایی های شما تونستم html رو کامل یاد بگیرم و سراغ مباحث پیشرفته تر برم .
سلام
ضمن تشکر از شما بابت این سایت بسیار عالی
جناب پهلوان ، آیا سر فصل هایی رو که در آموزش html قرار دادید ، برای شروع مبتدی به متوسط بوده و یا کل مطلب لازم برای آموزش این درس و حرکت به سمت css بوده ؟
ممنون میشم راهنمایی کنید.
سلام، آموزش HTML ارائه شده در سایت بیاموز، شامل تمام مباحث مربوط به HTML، از مبتدی تا پیشرفته است و بعد از مطالعه این قسمت، براحتی و بدون هیچ مشکلی می توانید به CSS ورود کنید.
به نقل از امیر پهلوان صادق:
سلام مجدد
شرمنده من زیاد سول میپرسم ، بعد از مبحث HTML باید به Css برم یا که html 5 رو کار کنم ؟ شما چه ترتیبی رو پیشنهاد می کنید ؟
با تشکر
به نظر من باید ترکیبی از مهارت های لازم را یاد بگیرید.
مواردی که باید بدونید شامل:
طراحی صفحات وب: html , css, css3 , html5
اسکریپت نویسی سمت کلاینت: javaScript, jQuery
برنامه نویسی وب سمت سرور: php یا asp.net
پایگاه داده: microsoft sql server , ms access, mysql
ترتیب پیشنهادی:
css
javascript , jquery
php یا asp.net
sql یا mySql
و برای مباحث پیشرفته تر سراغ html5 و css3
در نهایت اگر به مبحث مدیریت محتوای جوملا نیز آشنا شوید که دیگه مهارتهاتون تکمیل می شه.
تشکر
یه دنیا ممنون از سایت خوبتون
خدا قوت جناب پهلوان
سایتتان عالی است
ای کاش یک انجمن هم داشت تا سوالات خودمون را مطرح می کردیم.
:)
ممنون، متأسفانه نفری برای پشتیبانی وجود نداره، اما ان شا الله به محض تأمین نیرو، این کار انجام خواهد شد.
سلام
با تشکر از زحمات شما .
پیروز و سربلند باشید
لذت بردم آقای صادق پهلوان :)
سلام خیلی خیلی ممنون بابت این آموزش ها ...
امیدوارم موفق باشید .
سلام
عااااااااااااااااااااااااااااااااااااااااااااااااااالی
ممنون
خسته نباشید و خدا قوت :-)
با سلام آموزش خیلی عالی بود، ممنون از سایت خوبتون