آموزش کامل HTML

C0d3!Nj3ct!0n · 1 آبان، ۱۳۹۳

سلام

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

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

C0d3!Nj3ct!0n · 1 آبان، ۱۳۹۳

اولین بخش از آموزشهای 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

C0d3!Nj3ct!0n · 5 آبان، ۱۳۹۳

سلام

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

در قسمت 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>

پایان

C0d3!Nj3ct!0n · 9 آبان، ۱۳۹۳

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

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

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

بطور مثال وقتی میخوایم x²بنویسید و میخوایم 2 بالا تر از x باشه از superscript استفاده میکنیم و همچنین وقتی مخوایم O₂ بنویسیم از 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>

پایان

C0d3!Nj3ct!0n · 19 آبان، ۱۳۹۳

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

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

لیست ها 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>

پایان

C0d3!Nj3ct!0n · 26 آبان، ۱۳۹۳

قسمت پنجم :

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>

پایان

C0d3!Nj3ct!0n · 29 آذر، ۱۳۹۳

قسمت ششم :

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>

C0d3!Nj3ct!0n · 30 آذر، ۱۳۹۳

قسمت هفتم :

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>

ورود

آموزش کامل HTML

ارسال های توصیه شده

C0d3!Nj3ct!0n

لینک به دیدگاه

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

C0d3!Nj3ct!0n

لینک به دیدگاه

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

C0d3!Nj3ct!0n

لینک به دیدگاه

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

C0d3!Nj3ct!0n

لینک به دیدگاه

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

C0d3!Nj3ct!0n

لینک به دیدگاه

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

C0d3!Nj3ct!0n

لینک به دیدگاه

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

C0d3!Nj3ct!0n

لینک به دیدگاه

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

C0d3!Nj3ct!0n

لینک به دیدگاه

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

انجمن تیم امنیتی گارد ایران

شرکت گاردایران

شبکه های اجتماعی

نمادها

فعالیت ها

جریان فعالیت های من

Members Shop

اطلاعات مهم