چکیده مطالب 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:
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 ©
سایت کامل شما کار یادگیری من رو که از نظر زمان محدودیت دارم رو خیلی جلو انداخت. امیدوارم کارتون همینطور تداوم داشته باشه و مثل خیلی از سایتهای مفید دیگر ایرانی که به خاطر عدم حمایت کافی مجبور به توقف کارشون شدن ، نشین. من که به نوبه خودم سعی میکنم با خرید مجموعه های آموزشی شما هم به خودم و هم به این سایت بابت تداوم کارشون کمک کرده باشم.
الان من 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 قرار دادید ، برای شروع مبتدی به متوسط بوده و یا کل مطلب لازم برای آموزش این درس و حرکت به سمت 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
در نهایت اگر به مبحث مدیریت محتوای جوملا نیز آشنا شوید که دیگه مهارتهاتون تکمیل می شه.
خدا قوت جناب پهلوان
ای کاش یک انجمن هم داشت تا سوالات خودمون را مطرح می کردیم.
:)
با تشکر از زحمات شما .
لذت بردم آقای صادق پهلوان :)
امیدوارم موفق باشید .
عااااااااااااااااااااااااااااااااااااااااااااااااااالی
ممنون
خسته نباشید و خدا قوت :-)