• Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal

عضویت ویژه طلایی گارد ایران با تخفیف 50%

برای عضویت کلیک کنید

12 ارسال در این موضوع قرار دارد

سلام

در این تاپیک مجموعه آموزش‌های برنامه نویسی تحت وب با استفاده از زبان HTML قرار میگرد به آموزش ها دقت کنید.

لطفا اسپم ندید.

DeMoN، icelord، iranitarh و 4 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

اولین بخش از آموزشهای HTML:

 

مقدمه:

 

HTML زبانی است Hyper Text Markup Language که در اینترنت کاربرد دارد. و با پروتکل hypertext transfer protocol که مخفف آن http است  معمولا یک ارتباط مستقیم دارد.

قسمت های مختلفی که برای صفحات وب هستند هر کدام مشخص میکنند چه برنامه ای محتوای انها را ارائه میکند. اما اون چیزی که در طراحی صفحات شما ملاحظه میکنید HTML است.

 

برای نوشتن HTML برنامه های مختلفی هست. من از Notepad++ استفاده میکنم و در اینجا میتونید دانلود کنید.
 
من با مثال های که براتون میزنم همه چیز رو توضیح خواهم داد.
 
دستور<!DOCTYPE html>
 

این دستور اعلان را در ابتدای HTML و بالاتر از تگ باز <html> قرار دهید و دستور <DOCTYPE!> یک تگ HTML نیست بنابراین چیزی تحت عنوان تگ بسته هم ندارد؛ این دستور روشی است جهت فهماندن به مرورگر اینترنتی که  HTML ما با چه نسخه‌ای از HTML نوشته شده است و چه قانونی پای بندی دارد.

 

چند نمونه از <!DOCTYPE html>

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 5

<!DOCTYPE html>

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

<html>
کد
 </html>

نکته: برای بستن تگ هر قسمت از /> در تگ استفاده میکنیم.

 

در داخل HTML  ما دو تگ head و body را داریم.

 

head:

بخشی است که اطلاعات محتوای درون خودش دارد اما چیزی برای نمایش دادن به ما ارائه نخواهد کرد جز چند ایتم کوچک.

body:

هر چیزی که در صفحه وب به شما نمایش داده میشود در قسمت body نوشته شده.

 

برای مثال اواین سند HTML شما به این صورت می باشد.

<!DOCTYPE html>

<html>
<head>
  <title></title>
 </head>
 
 <body>
  GuardIran Security Team
 </body>
 </html>

در قسمت title عنوان صفحه یا سایت شما قرار میگرد و همیشه درون تگ head  میباشد.

  پایان جلسه اول

 

 

 

پسورد فایل ضمیمه:

guardiran.org

Notepad++.zip

alizm، wolf، aminasgary و 3 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

سلام

قسمت دوم آموزش

 

در قسمت body تیترهای مختلف رو مشخص کردم. برای نوشتن یک تیتر از تگ های heading استفاده میکنیم. تگ های heading از h1 که بزرگترین ساز است تا h6 که کوچکترین سایز باشد نمایش داده میشود.

<!DOCTYPE html>

<html>
<head>
  <title> Designate Headings </title>
 </head>
 
 <body>
 
  <h1> GuardIran Security Team </h1>
  <h2> GuardIran Security Team </h2>
  <h3> GuardIran Security Team </h3>
  <h4> GuardIran Security Team </h4>
  <h5> GuardIran Security Team </h5>
  <h6> GuardIran Security Team </h6>
 
 </body>
 </html>

در این قسمت تگ های که مربوط به text  هستند در اینجا آوردم.

 

</  br>:  هر جا که شما یک  </  br> بزارید در مرورگر شما متن به خط بعدی خواهد رفت. مثل enter زدن در یک document

 

<em>: تگی هست که برای تاکید استفاده میشود. مثلا برای نشان دادن تاکید روی بعضی از کلمات از تگ em استفاده میکنند.

 

<strong>: کلمات رو bold (کلفت) میکند.

 

<kbd>: نشان میدهد که یک element از کیبورد تایپ شده است.

 

<cite>: یک استناد کردن به یک متن یا یک سند.

 

<var>: نشان دهنده یک متغییر است.

 

<dfn>: نشان دهنده یک تعریف است.

 

<code>: قسمتی است که در آن کد قرار دارد , کدهای که اجرا نخواهند شد.

 

<samp>: نشان دهنده یک نمونه است.

 

<acronym>: نشان دهنده مخفف ها است.

 

<address>: نشان دهنده آدرس ها است.

<!DOCTYPE html>

<html>
<head>
  <title> Using Text Elements </title>
 </head>
 
 <body>
 
     The <em> Emphasuis element </em><br  />
     The <strong> Strong element </strong><br  />
     The <kbd> Keyboard element </kbd><br  />
     The <cite> Citation element </cite><br  />
     The <var> Variable element </var><br  />
     The <dfn> Definition element <dfn><br  />
     The <code> code element </code><br  />
     The <samp> Sample output element </samp><br  />
     The <acronym> Acronym element </acronym><br  />
     The <address> Address element </address><br  />
    
 </body>
 </html>
 

پایان

 

 

 

 

 

alizm، Mr.Vector، aminasgary و 2 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

 قسمت سوم آموزش :

 

در این بخش superscript  و subscript آموزش میدم.

 

superscript و subscript شما میتونید تو فرمول های ریاضی و شیمی مشاهده کنید.

 

بطور مثال وقتی میخوایم xبنویسید و میخوایم 2 بالا تر از x  باشه از superscript استفاده میکنیم و همچنین وقتی مخوایم O2 بنویسیم از  subscript استفاده میکنیم.

<!DOCTYPE html>

<html>
<head>
  <title> Superscript and Subscript </title>
 </head>
 
 <body>
 
   The <sup> Superscript </sup> and <sub> subscript </sub>
    
 </body>
 </html>
 


وقتی میخواین به یوزر نشون بدین کلمه ای خط خورده یعنی حذف شده متونید از تگ <del> استفاده مکنیم و قتی هم میخوایم نشون بدیم کلمه اضافه شده از تگ <ins> استفاده میکنیم.

<!DOCTYPE html>

<html>
<head>
  <title> Deleted and Inserted Text </title>
 </head>
 
 <body>
 
   The <del> deleted </del> or <ins> inserted </ins> Text
    
 </body>
 </html>
 

وقتی میخوایم فرمت متن دقیقا همونجوری باشه که نوشته شده از تگ <pre> استفاده میکنیم.

<!DOCTYPE html>

<html>
<head>
  <title> Preformatted Text </title>
 </head>
 
 <body>
 
   <pre> This is sample of preformatted text:
 Thirty days hath September,
        April, June, and November.
             All the rest have thirty one,
Save February and it has twenty eight. </pre>
    
 </body>
 </html>

 

پایان

 

 

 

 

 

 

Mr.Vector، aminasgary، l8qp و 6 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

 قسمت چهارم آموزش :

 

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

 

لیست ها Unordered List هستند و Ordered List

 

Unordered list در واقع بولت میخورن وقتی شما میخواهید متنی را با بولت نشان دهید از <ul> </ul> استفاده میکنید.

 

هر بولتی با یک لیست ایتمی شروع میشود. و درون تگ <li> </li> می باشد.

 

شکل بولت ها هم میتواند با استفاده از Type تغییر بدهید.

 

به مثال توجه کنید :

<!DOCTYPE html>

<html>
<head>
  <title> Unordered Lists </title>
 </head>
 
 <body>
      <ul>
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran </li>
		 
		 <li> Guardiran is here </li>
	 </ul>
	 
	 <ul>
	     <li type="square"> This supplies a square </li>
        
		 <li type="circle"> This supplies a circle </li>
		 
		 <li type="disc"> This supplies a disc </li>
     		 
	 </ul>
 </body>
 </html>
  

پایان

Mr.Vector، aminasgary، alizm و 6 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

قسمت پنجم :

 

Ordered List :

 

<ol> </ol> لیستی را نشان میدهد که با عداد مشخص شده .

<!DOCTYPE html>

<html>
<head>
  <title> Ordered Lists </title>
 </head>
 
 <body>
      <ol>
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran </li>
		 
		 <li> Guardiran is here </li>
	 
	 </ol>
 </body>
 </html>
  

نمونه کامل تری از ایتم های ordered lists :

 

قسمت type نوع شمارنده را مشخص می کند . ( بطور مثال از اعداد یونانی استفاده کند یا شماره )

start این امکان میده شمارنده از چه عددی شروع به نمایش کند.

<!DOCTYPE html>

<html>
<head>
  <title> Ordered Lists </title>
 </head>
 
 <body>
    <ol type="I" start="10">
	  
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran </li>
		 
		 <li> Guardiran is here </li>
	 
	  </ol>
	  
 <ol type="i" start="1">
			
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran </li>
		 
		 <li> Guardiran is here </li>
	 
	  </ol>
	  
	  
  <ol type="1" start="10">
			
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran </li>
		 
		 <li> Guardiran is here </li>
	 
	  </ol>
	    
  <ol type="A" start="10">
			
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran </li>
		 
		 <li> Guardiran is here </li>
	 
	  </ol>
	  
 <ol type="a" start="1">
			
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran </li>
		 
		 <li> Guardiran is here </li>
	 
	  </ol>
		
 </body>
 </html>
  

پایان

 

Mr.Vector، wolf، DeMoN و 2 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

قسمت ششم :

 

Outline :

 

ordered List شما میتونه ترتیب های مختلفی داشته باشه. همان طور که ملاحظه میکنید :

<!DOCTYPE html>

<html>
<head>
  <title> A Sample Outline </title>
 </head>
 
 <body>
    <ol type="I">
	  
	  <li>Major point
	 
	   <ol type="A">
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran is here </li>
	 
	  </ol>
	 </li> 
	  
	  <li>Major point
	  
 <ol type="A">
			
	     <li> Guardiran Security Team </li> 
		 
		 <li> Guardiran is here </li>
		 
	  </ol>
	 </li>
	</ol>
 </body>
 </html>
alizm، wolf، night_fury و 2 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

قسمت هفتم :

 

Definition Lists :

 

تعاریف را مثل یک دیکشنری یا لیست نمایش میدهند.

definition list را با تگ  <dl> </dl> نشان میدهند.

 

در داخل definition list دو تگ دیگر وجود دارد:

 

definition term :

 با تگ <dt> </dt> نشان میدهند.

همان کلمه ای که قراره توضیحش موجود باشد.

 

definition describtion:

با تگ <dd> </dd> نشان میدهند.

توضیحی که بعد از کلمه مورد نظر به ما میدهد.

<!DOCTYPE html>

<html>
<head>
  <title> Definition Lists </title>
 </head>
  <body>
         <h1>HTML Terms</h1> Perhaps the most versatile type of list is the definition list. Originally developed as a means of creating glossaries in a document, this type of list lends itself most readily for use on Web sites.
		     <dl>
			      <dt>HTML</dt>
				  <dd>HyperText Markup Language</dd>
				  
				  <dt>Element</dt>
				  <dd>Describes document content</dd>
				  
				  <dt>Attribute</dt>
				  <dd>Identifies a characteristic of an element</dd>
				  
				  <dt>Value</dt>
				  <dd>Gives details of a specific attribute</dd>
				  
			 </dl>


 </body>
 </html>
DeMoN، Mr.Vector، alizm و 3 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
مهمان
این موضوع برای عدم ارسال قفل گردیده است.

درباره ی ما

تیم امنیتی گارد ایران یک گروه مستقل است که قوانین آن با خط مشی جمهوری اسلامی ایران مغایرت ندارد. تیم امنیتی گارد ایران از سال 1393 فعالیت خود را آغاز کرد و هدف این تیم تامین امنیت سایت ها و سرورهای ایرانی است. تیم ما همیشه برای دفاع از مرزهای سایبری سرزمین عزیزمان ایران آماده است.