در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ

با سلام و درود و عذر خواهی از بابت دیر آماده شدن قسمت دوم مباحث پیوسته HTML ، CSS ، Java Script ، در بخش قبلی با انواع تگ (tag) ها آشنا شدیم در ادامه میخواهیم به ادامه این تگ ها بپردازیم.

با آموزش این زبان در واقع شما پایه های ورود به وب خودتون رو مستحکم تر میکنید و آماده میشوید چگونه صفحات وبتون رو چگونه طراحی کنید ، برنامه های بسیار زیادی هستند که شما میتونید برنامه نویسی یا کد نویسی با HTML را با انواع برنامه ها شروع کنید مانند Html Pad یا Front Page یا حتی Note Pad اما برنامه های مختلف به ما کمک میکنند تا کد هامون رو سریع تر و دسته بندی تر بنویسیم من در این سری از آموزش ها بیشتر با برنامه front Page که در داخل بسته Office مایکروسافت موجود هست استفاده میکنم.

وقتی برنامه front Page را باز میکنید در ابتدا مانند تصویر زیر کد هایی را برای شروع خواهید دید و همینطور زمانی که علامت کوچکتر را تایپ میکنید پنجره ای یا منویی باز میشود به نام intellisense که این منو برای برنامه نویسان بسیار پر کاربرد و حیاتی می باشد مخصوصاً افرادی که با Visual Studio کار میکنند با intellisense آشنایی زیادی دارند ، خب به هر حال میبینید که در این منو تمام تگ هایی که ممکن است شما بخواهید از آن استفاده کنید لیست میشوند

آموزش HTML

زمانی که از یک تگ استفاده میکنید attribute های اون تگ برای شما به نمایش در می آید پس بنا بر این زمانی که ما برخی از تگ ها یا attribute ها را فراموش کردیم این منو یاد آور خوبی برای ما است.

قدم به قدم با HTML

پس از تایپ کد هامون همونطور که در قسمت قبلی دیدیم من از پسوند Htm یا HTML استفاده میکنم چون نیازی به رندر کرن نداره و صرفاً میخوام با مرورگر هایی مثل Mozilla یا IE به نمایش در بیان البته شما در سطح اینترنت پسوند های زیادی رو ممکنه مشاهده کنید مثل Asp , Jsp , Php , Mspx , Aspx , Prl اینها تماماً برنامه هایی هستند که اصطلاحاً سرور سایت هستند یعنی در داخل این تگ های HTML کد هایی دیگه ای هم مینویسن که این کد ها رو اون سروری که برای ما داره میفرسته اجرا میکنه و نیاز به رندر کردنش داره ، اما ما در این مبحث فعلاً بر پایه ترین مبحث یعنی HTML میخواهیم کار کنیم ، شاید کمی در قسمت قبلی توضیح داده باشم اما ترجیح میدم اینجا مفصل تر ادامه بدم و بگم تمام تگ های HTML داخل یک تگی قرار دارد به نام HTML پس از این تگ ما تگی داریم به نام Head که اطلاعات محتوایی رو برای ما در نظر میگیره اما برای کاربران چیزی رو به نمایش در نمیاره و اگر میخواهید در بالای مرورگر خودتون متنی رو به نمایش در بیارید میتونید در داخل این تگ از تگی دیگر به نام Title استفاده کنید که در داخل این تگ میتوان متنی قرار داد مثلاً عنوان صفحه یا اسم صفحه تا بالای مرورگرتون به نمایش در بیاد و هر آن چیزی که شما در صفحه مرورگر خودتون خواهید دید در تگی قرار داره به نام تگ Body و تقریباً تمام تگ هایی رو که در قسمت قبلی عنوان شد در داخل این تگ به کار گرفته میشوند.

اما تقریباً تمام برنامه نویسان به Comment گزاری عادت کرده اند باید بدونید این زبان نیز از کامنت گزاری پشتیبانی میکند و شما میتوانید برای کد های خودتون کامنت هایی رو در نظر بگیرید و این کامنت ها هیچ تاثیری در کد ها ندارند و فقط برای برنامه نویس یا کسانی که بعداً میخواهند کد ها را بخوانند مفید است تا بدانند کدام خط یا کدام تگ یا دستور چه وظیفه ای را دارد و برای درج کامنت از کد زیر استفاده میشود.

<body>
	   <!-- this is a comment -->
</body>

ادامه آشنایی با برخی از تگ ها

  • تگ <del>

اگر میخواهید در جمله ای که استفاده میکنید یک خط روی کلمه یا جمله تان کشیده شود از این تگ استفاده کنید

  • تگ <ins>

اگر میخواهید یک UnderLine یا یک زیر خط بر روی کلمه یا جمله تان که نمایانگر اضافه شدن یک متن است استفاده کنید از این تگ میتوان استفاده کرد در ادامه خروجی دستور زیر را در تصویر خواهید دید

<body>
	web site <del>itprogram</del>change name <ins>itpro</ins> my favorites
</body>

قدم به قدم با دستورات و تگ های HTML

  • تگ <ol>و attribute ای به نام type

در بخش قبلی در مورد تگ OL صحبت شد اما در این قسمت با استفاده از attribute ای به نام type که میتوان به دلخواه نام گزاری و شماره گزاری ها را ایجاد نمود در ادامه کد مورد نظر را خواهید دید و خروجی این تکه کد را در تصویر زیر مشاهده خواهید نمود.

<body>
		<ol type="I">
		<li>Major Point
		<ol type="A">		
		<li>Sub Point</li>
		
		<li>Sub Point</li>
		</ol>
		</li>
		
		<li>Major Point
		
		<ol type ="A">
		<li>Sub Point</li>
		<li>Sub point</li>
		</ol>
		</li>
		</ol>
</body>

اموزش HTML

  • تگ <dt> و <dd>

definition List ها وظیفه اشون اینه که تعاریف را مثل یک دیکشنری یا لیست یا ایندکس به ما نمایش میدهند و کار اصلی definition ها تعاریف هست dt مخفف definition terms هست که قرار هست توضیحات این قسمت داده شه و dd مخفف definition description دقیقاً پشت سر اون کلمه توضیحش داده خواهد شد (هر dt یک dd دارد) مثال زیر را دقت کنید:

<body>
<h1>Html Terms</h1> this is a sample test , this type of list lends itself most readily for use on web site.
<dl>
	<dt>Html</dt>
	<dd>Hyper Text Markup Language</dd>
	
	<dt>Attribute</dt>
	<dd>Identifies a characteristic of an element</dd>
	
	<dt>itpro</dt>
	<dd>the best web site</dd>
</dl>
</body>

آموزش tag در HTML

  • Entity : کارکتر هایی هستند کا ما نمی توانیم مستقیم توسط کیبورد آنها را تایپ کنیم پس به ناچار باید کد هایی را تایپ کنیم بگزارید entity ها را با یک مثال جامع جلو ببریم:

entity ها در HTML

البته تعداد این کارکتر هایی که به کد اسکی معروف هستند زیاد میباشد بنابر این میتوانید اطلاعات بیشتر را در لینک زیر دنبال کنید

  • تگ <blockquote> به همراه استفاده از تگ <br>

این تگ کمک میکند متن مربوطه کمی جلوتر از ما بقی متن ها به نمایش در بیاید که در ادامه تصویر کد زیر را مشاهده خواهید کرد.

<body>
<blockquote>
123<br>
456<br>
ABCD<br>
EFGH<br>
</blockquote>
</body>

آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ

این مباحث همچنان با حمایت های شما دوستان ادامه خواهد داشت.

نویسنده : فرهاد خانلری

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

#آموزش_قدم_به_قدم_html #مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #html_چیست #tag_ها_در_html #html_آموزش #استفاده_از_تگ_های_html #مبانی_آموزش_طراحی_وب
عنوان
1 آموزش HTML (اچ تی ام ال) قسمت 1 : انواع تگ رایگان
2 آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ رایگان
3 آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها رایگان
4 آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر رایگان
5 آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر رایگان
6 آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول رایگان
7 آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها رایگان
8 آموزش HTML (اچ تی ام ال) قسمت 8 : موجودیت ها و کارکتر های خاص رایگان
9 آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک رایگان
10 آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet رایگان
زمان و قیمت کل 0″ 0
2 نظر
davood_59

سلام فرهاد جان؛

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

همچنین فرهاد جان در این تکه از پاراگراف آیا اشتباه ننوشتی:

" ترکیب تگ های <ul> و <ol> " . مثالی که زدی برای این مورد دقیقا مثل مثال درس اول هستش، فکر کنم میخواستی یه تگ ul یا همون لیستهای نامرتب هم تو بدنه کد بذاری که فراموش کردی! یا من دارم اشتباه می کنم.

فرهاد خانلری

سلام داوود جان ممنونم از لطفت و اینکه اشتباه منو متذکر شدی.

ادغام کردنش رو فراموشم شد ولی اطلاح کردم اون قسمت مقاله رو.

مرسی.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....