معماری
ضعیفبد نیستمتوسطخوبعالی (1 votes, average: 5٫00 out of 5)
Loading...

آموزش طراحی وب – قسمت دوم HTML

قدم دوم، یادگیری HTML

تا اینجا یادگرفتیم که چگونه اولین گام را جهت طراحی یک وب سایت برداریم، یعنی طراحی مکاپ آن در فتوشاپ. در مراحل بعد باید بیاموزیم که چگونه کدنویسی وب سایت خود را شروع کنیم تا بر روی وب قابل نمایش شود و کاربران بتوانند از آن استفاده کنند. ما در طول این آموزش بر خلاف روش آموزشی سایرین که یا بصورت پروژه محور تنهاست و یا فقط ارائه و اموزش سرفصل های زبان برنامه نویسی، آموزش خود را به شکل هم پروژه محور و هم آموزش سرفصل های زبان ها پیش خواهیم برد. و از آنجا که شاید برخی از کاربران ما دانشی در سطح مبتدی داشته باشند در این قسمت ما مروری بر HTML و سپس بررسی کامل سرفصل های HTML5 خواهیم داشت و در درس های بعدی بهمین ترتیب CSS3 و بوت استرپ را نیز خواهیم آموخت همراه با مثال و پس از اینکه بر روی اینها تسلط کامل پیدا کردیم از میان مطالبی که آموختیم شروع به طراحی سایت خود بصورت پروژه محور خواهیم کرد همانند قسمت پیش که آموختید چگونه وب سایت خود را در فتوشاپ طراحی کنید.

آموزش HTML
آموزش فارسی HTML

زبان HTML مخفف HyperText Markup Language می باشد که در سال 1989 تیم برنرزلی که با موسسه CERN همکاری داشت www را پیشنهاد داد و اولین نسخه اچ تی ام ال در سال 1991 منتشر شد که از سال های 1991 تا 1998 اچ تی ام ال از ورژن 1 به ورژن 4 توسعه داده شد. ساختار این زبان بر اساس کار با تگ ها(برچسب ها) می باشد و اچ تی ام ال همراه با CSS هسته فناوری ساخت صفحات وب هستند.

شما بعنوان کسی که قصد دارد طراحی سایت را یاد بگیرد و یا هر طراح وبی باید تسلط کاملی بر زبان های پایه ای وب یعنی HTML و CSS داشته باشد. در اینجا ما سرفصل های رسمی HTML5 جدیدترین نسخه اچ تی ام ال (استاندارد شده در سال 2014) را فرا خواهیم گرفت، برای اینکه براحتی بتوانید کد های خود را بنویسید قبل از اینکه سراغ آموزش کد نویسی برویم پیشنهاد میکنیم از یکی از نرم افزار های Adobe Dreamweaver، brackets، Notepad++، Sublime Text و یا نرم افزار دیگری که به کار با آن عادت دارید استفاده کنید. همچنین بهتر است بدانید برای اینکه بتوانید کامپیوتر خود را شبیه به یک سرور جهت داشتن بانک اطلاعاتی، سرویس دهنده وب و .. برای اجرای سایت و یا cms هایی نظیر وردپرس، جوملا بصورت محلی بکنید می توانید یکی از نرم افزار های Easy PHP و یا Xampp استفاده کنید.

در زیر نمونه کد معروف سلام جهان “Hello World” را مشاهده میکنید. این کد در همه زبان های برنامه نویسی و طراحی بعنوان اولین بخش آموزش قرار میگیرد تا هنرآموزان با ساختار کلی و ابتدایی ترین کد آن زبان آشنا شوند و همچنین بتوانند زبان های مختلف را بر این اساس باهم مقایسه کنند.

<!DOCTYPE html>

<html>

<head>

   <title>This is a title, Hello World</title>

</head>

<body>

   <p>Hello world!</p>

</body>

</html>

همانطور که در نمونه کد بالا مشاهده میکنید یک صفحه اچ تی ام ال با تگ ها نوشته می شود و در بالا مشاهده میکنید که این صفحه با تگ <html> شروع می شود و با تگ </html> بسته می شود، پس متوجه شدید که هرتگی که باز می شود بعد از نوشتن کد ها و یا مطالب مربوطه باید آن را ببندیم هرچند که بعضی از تگ ها که در جلوتر اشاره خواهیم کرد از این قانون بدورند و همچنین مشاهده کردید برای بستن یک تگ از /(اسلش) در ابتدای آن استفاده میکنیم.

در بین تگ های شروع و پایان html محل کد نویسی ماست، بعد از تگ <html> ما تگ <head> را مشاهده میکنیم که در بین این تگ باید کد هایی را بنویسم که در صفحه وب نمایش داده نمی شوند مثل متاتگ ها(کلمات کلیدی)، دیسکریپشن(توضیحات)، فراخوانی شیوه نامه آبشاری(سی اس اس)، کد های جاوا و.. که در زیر چند نمونه را می نویسیم:

 

<style>
body {background-color:yellow;}
p {color:blue;}
</style>

  • فراخوانی استایل سی اس اس

<link rel=”stylesheet” href=”mystyle.css”>

  • نوشتن متاتگ ها

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

<meta charset=”UTF-8″>

<meta name=”author” content=”MihanLearn”>

<meta http-equiv=”refresh” content=”30″>

  • نوشتن کدهای جاوا اسکریپت

<script>
function myFunction {
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
}
</script>

 

و پس از بستن تگ head ، تگ بعدی یا Body را باز میکنیم، در بین تگ بادی ما تگ ها و عناصری را ایجاد میکنیم و متن هایی را می نویسیم که میخواهیم در مرورگر وب نمایش داده شوند، در واقع اینجا قسمتی است که بیشتر وقتمان را باید روی آن بگذاریم تا آنچه میخواهیم کاربر مشاهده کند را طراحی کنیم.

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

تگ نمایش عنوان <title> : این تگ را ما بین تگ های <head> می نوسیم و هرچه را بین <title></title> بنویسیم در عنوان مرورگر نمایش داده می شود.

تگ های h1 تا h6 : این تگ ها اندازه متن را مشخص میکند که h1 بزرگترین و h6 کوچکترین اندازه می باشد. به مثال زیر توجه کنید.

<h1>Welcome to MihanLearn Training</h1>

<h2>Welcome to MihanLearn Training</h2>

<h3>Welcome to MihanLearn Training</h3>

<h4>Welcome to MihanLearn Training</h4>

<h5>Welcome to MihanLearn Training</h5>
<h6>Welcome to MihanLearn Training</h6>

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

تگ <p> : برای پاراگراف بندی متنی که در بین آن قرار گرفته بکار می رود.

تگ <a> : از این تگ برای لینک کردن یک متن یا عکس به صفحه ای دیگر استفاده میشود و شکل ان بصورت زیر است.

<a href=http://www.mihanlearn.net target=”_blank” title=”Training Video”>Mihan</a>

در بالا وقتی کاربر روی کلمه Mihan کلیک کند به ادرس سایت میهن لرن که مشاهده میکنید هدایت می شود همچنین با توجه به اینکه ما مقدار Target را _blank داده ایم در صفحه ای جدید لینک باز می شود و همچنین به دلیل مقدار دهی title وقتی اشاره گر ماوس را روی کلمه قرار می دهیم متن Training Video نمایش داده می شود.

تگ <img> : برای نمایش عکس ها در اچ تی ام ال ما از این تگ استفاده میکنیم. نحوه استفاده از ان به شکل زیر است.

<img src=”” alt=”” title=”” width=”150″ height=”200″>

مقدار src را باید برابر با ادرس مستقیم تصویر قرار دهیم مثلا http://mihanlearn.net/logo.jpg

مقدار alt را باید برابر با یک کلمه کلیدی در خصوص عکس قرار دهیم تا موتور های جستجو متوجه شوند این عکس چیست. بعنوان مثال اگر عکس ما یک گل است، نام انرا در اینجا بنویسیم “گل رز”، این نیز یکی از مواردی است که باید در سئو رعایت شود که در بخش مربوطه خواهیم گفت. بقیه صفات که مشخص است چه هستند.

تگ </br> : این تگ از آن دسته تگ هاست که نیازی به باز و بسته شدن ندارد و میتوانیم انرا بصورت <br> و یا </br> بنویسیم. کاربرد این تگ همان زدن کلید Enter می باشد چونکه در کد های اچ تی ام ال و یا در متنی که در صفحه اچ تی ام ال می نویسیم هرچه ما کلید اینتر را بزنیم و ذخیره کنیم صفحه را فاصله ای ایجاد نمی شود و هیچ تغییری بوجود نمی آید و راه حل مشکل استفاده از این تگ می باشد. با هر بار نوشتن این تگ در صفحه انگار یک اینتر میزنیم.

تگ <hr>: توسط این تگ می توانید یک خط افقی رسم کنید.

تگ <button>، ایجاد دکمه : توسط این tag میتوانید یک دکمه ایجاد کنید تا هنگامی که کاربر روی آن کلیک کند به صفحه ای دیگر هدایت شود یا یک پیام به او نمایش داده شود، بعنوان مثال در کد زیر مشخص کرده ایم که یک دکمه ایجاد شود و سپس با کلیک روی آن یک پیام به کاربر نمایش داده شود.

<button type=”button” onclick=”alert(‘Hello World!’)”> Click here </button>

تگ <b> و <strong> باعث درشت شدن متن یا Bold شدن ان می شوند. و همچنین تگ <i> متن را ایتالیک یا مورب میکند.

تگ توضیحات <!– –> : فرض کنید که کد های استفاده شده در قالبتان بسیار زیاد می باشد بهتر است برای اینکه در مراجعات بعدی جهت اصلاح یک بخش یا گسترش صفحه سر در گم نشوید و یا اگر بخواهید ادامه کار را به فرد دیگری واگذار کنید برای اینکه آن فرد متوجه شود دقیقا شما در هر قسمت چه کاری انجام داده اید توضیحات ان بخش را درون تگ توضیحات بنویسید، به مثال زیر توجه کنید.

<!–[if IE 8]>

…. some HTML here ….

<![endif]–>

کد بالا میگویید این قطعه کد برای اجرا در مرورگر اینترنت اکسپلورر 8 نوشته شده است.

 

حتما دوست دارید متن هایتان از حالت یکنواختی بیرون بیاید؟ پس بهتر است با استفاده از خاصیت Style به آنها رنگ و یا حالت مورد نظرتان را بدهید. به مثال های زیر توجه کنید.

<h1 style=”color:yellow”> This Text is Yellow </h1>

در بالا با استفاده از Style ما متن بین تگ های h1 را زرد رنگ کردیم و حالا به مثال زیر توجه کنید که ما همزمان چندین حالت را روی متن خود اعمال خواهیم کرد.

<p style=”color:yellow; Background-color:blue;text-align:center”> This is Sample Text </p>

مشاهده کردید که با استفاده از کد بالا ما رنگ متن خود را زرد، زمینه آنرا آبی و تراز آن را وسط چین کردیم. به همین شکل هر حالتی را میتوانیم اعمال کنیم، همچنین با استفاده از تگ <span> میتوانیم به یک قسمت خاص از متن استایل اعمال کنیم یعنی رنگ، فونت، اندازه و سایر موارد دلخواه خود را اعمال کنیم که با مشاهده مثال زیر متوجه خواهید شد

<h2>MihanLearn<span style=”color:red; font-size:larger”>biggest Persian Training</span>Site.</h2>

بخشی از متن که بین تگ span قرار گرفته است دارای رنگ قرمز و فونت بزرگتر می باشد.

ما به طور کامل استایل ها را در قسمت بعدی یعنی سی اس اس بررسی خواهیم کرد.

ضمنا بسته به اینکه قالب خود را میخواهید فارسی یا انگلیسی طراحی کنید می توانید از خاصیت dir در body خود استفاده کنید و انرا بصورت dir=”rtl” راست به چپ و یا dir=”ltr” چپ به راست مقدار دهی کنید.

جداول در HTML

در گذشته بر خلاف امروزه، کلا طراحی صفحات HTML با استفاده از جدول ها انجام می شد.

برای رسم یک جدول از تگ های Table, Tr, Td استفاده میکنید. لطفا به مثال های زیر توجه کنید.

<table border=”1″ style=”width:100%; background-color:yellow; color:blue” dir=”rtl”>

<tr>

<th>نام</th>

<th>نام خانوادگی</th>

</tr>

<tr>

<td>سعید</td>

<td>حکیمی نیا</td>

</tr>

</table>

در بالا می بینید که ما یک جدول با استفاده از تگ table ایجاد کردیم و با استفاده از تگ tr درون تگ table یک سطر از جدول را کشیدیم. همچنین با استفاده از تگ th درون تگ tr ما عنوان هر ستون از جدول خود را اینگونه مشخص کردیم تا عنوان ها وسط چین و درشت دیده شوند. در سطر بعد (tr) با استفاده از td به شکل عادی زیر مجموعه دو ستون بالا که ایجاد کردیم را نوشتیم و در نهایت جدولی به شکل زیر را مشاهده می کنیم.

tables in html

با استفاده از خاصیت colspan می توانیم 2 سطر یا ستون را یکی کنیم، مثال زیر را مشاهده کنید.

<table style=”width:100%”>

<tr>

<th>نام</th>

<th colspan=”2″>شماره های تماس</th>

</tr>

<tr>

<td>سعید</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

در کد بالا ما colspan را برابر با 2 قرار دادیم یعنی آن ستون به اندازه 2 ستون باشد و نتیجه کد بالا را در تصویر زیر می توانید مشاهده کنید.

table colspan in html

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

ایجاد فرم ها توسط اچ تی ام ال، تگ <form> :
کد زیر که یک فرم برای ورود نام و نام خانوادگی ایجاد میکند را باهم بررسی میکنیم.
<form action=”register.php” method=”GET or POST ?”>
Your Name: </br>
<input type=”text” name=”firstname” value=”Saeed”>
</br>
Your Family: </br>
<input type=”text” name=”Lastname” value=”h”>
</br>
Jensiyat:
<input type=”radio” name=”sex” value=”Male” checked> Male </br>
<input type=”radio” name=”sex” value=”Famle”> Famle </br>
<input type=”submit” value=”Submit”>
</form>
دیدید که با استفاده از تگ form یک فرم را ایجاد کردیم سپس برای ایجاد سایر عناصر مثل فیلد ورودی از تگ input و نوع text استفاده کردیم تا یک فیلد ورودی داشته باشیم و همچنین خصوصیت name برای جایی کاربرد دارد که فرم به انجا ارسال میشود یعنی همان صفحه ای که در action فرم مشخص میکنیم و value هم مقدار پیش فرضی که نمایش داده خواهد شد می باشد.
برای انکه از دکمه های رادیو یا همان گزینه های انتخاب بتوانیم استفاده کنیم باید در type مقدار radio را قرار دهیم و همچنین برای ایجاد دکمه ثبت باید نوع input را برابر با submit بگذاریم.
و اما دربالا در Method پست که مشخص کردیم، ما به دو روش GET یا POST می توانیم داده های خود را به صفحه ای که در Action فرم مشخص کرده ایم ارسال کنیم. در روش GET اطلاعات ارسالی در انتهای آدرس سایت دیده می شوند مثل موتور های جستجو که وقتی واژه ای جستجو میکنیم در انتهای ادرس نمایش داده می شود، به نمونه زیر توجه کنید:
action_page.php?firstname=Saeed&lastname=h
در روش POST اطلاعات ارسالی از فرم بصورت مخفی ارسال میشوند و در انتهای ادرس نمایش داده نمی شوند، معمولا از این روش برای فرم های حامل رمزعبور استفاده می شود.در نهایت فرم ما به شکل زیر خواهد بود.

forms in html

و اما درخصوص لیست ها در اچ تی ام ال، ما می توانیم 3 نوع لیست داشته باشیم:
– لیست های مرتب شده(Ordered List)
– لیست های نامرتب(Unordered List)
– لیست های تعریفی(Description List)

lists in html

طراحی یک لیست نامرتب:

<h2>ویژگی های اچ تی ام ال</h2>
<ul>
<li>سبک</li>
<li>قابل درک</li>
<li>آسان</li>
</ul>
در این نوع لیست همانطور که در تصویر بالا مشاهده میکنید یک عنوان نوشتیم مثلا ویژگی های اچ تی ام ال و سپس با تگ های li ویژگی ها را نام بردیم تا جلوی دایره نشان داده شوند، این دایره را توسط استایل سی اس اس می توانیم تغییر دهیم، مثلا به حالت مربع در آوریم :
list-style-type:square
یا بدون هیچ شکلی
list-style-type:none

در زیر نمونه یک لیست مرتب را خواهید نوشت، تفاوت لیست های مرتب با نامرتب در این است که لیست های مرتب بجای شکل های مختلف مثل دایره یا مربع در کنار انها شماره وجود دارد، هرچند که این نشانه ها را می توان به حروف انگلیسی یا رومی تغییر داد.
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
برای اینکه بجای شماره از حروف انگلیسی استفاده شود:
<ol type=”A”>
برای اینکه حروف رومی استفاده شود:
<ol type=”i”>

هم اکنون در زیر برایتان کد سومین نمونه از لیست ها در اچ تی ام ال، یعنی لیست های تعرفی را می نویسیم:
<h2>ویژگی های آموزش های میهن لرن</h2>
<dl>
<b><dt>کیفیت بالا</dt></b>
<dd>تمامی فیلم ها با بالاترین کیفیت ضبط شده و همراه پی دی اف و پکیج کامل ارائه می شوند</dd>
<b><dt>فارسی</dt></b>
<dd>مرجع کامل آموزش های فارسی</dd>
</dl>
این کد لیستی به شکل زیر را تولید خواهد کرد:

dl list in html

حالا که با لیست ها آشنا شدید میتوانید در قسمت های مختلف صفحه وب خود از آنها استفاده کنید، مثلا در ستون های کناری(دسته ها) که باید مرتب زیر هم قرار بگیرند و یا در متن های خود و.. میتوانید از انواع لیست های معرفی شده استفاده کنید. شکل زیر نمونه ای هست که با استفاده از لیست ها در اچ تی ام ال و سی اس اس می توانیم بوجود آوریم.

list in html

تگ div

این تگ، یکی از کاربردی ترین برچسب های html برای ایجاد صفحات و گروه بندی عناصر می باشد.
با تگ دایو و استایل دادن به آن توسط css میتوان براحتی یک صفحه وب شکل داد! در این تگ ما می توانیم از دو خاصیت style و یا class استفاده کنیم. بطوری که با استفاده از style همانجا و بصورت درون خطی میتوانیم کد سی اس اس مورد نظر را برای شکل دادن به دایو بنویسیم و با استفاده از class میتوانیم یک کلاس سی اس اس که نوشته ایم را فراخوانی کنیم. این دو خصوصیت تقریبا در تمامی تگ های اچ تی ام ال کاربرد دارند و استفاده می شوند ولی در اینجا چیزی که مشخص است کاربرد فراوانی دارند. نحوه نوشتن یک کلاس سی اس اس و فراخوانی آن را در درس بعد بررسی خواهیم کرد ولی اینجا برای اینکه با تگ دایو آشنا شوید یک مثال می نویسیم.

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:green;
color:yellow;
margin:20px;
padding:20px;
}
</style>
</head>

<body>

<div class=”cities”>
<h2>Qaen, Khorasan</h2>

<p>Qaen (Persian: قائن‎, also Romanized as Ghayen, Qayen or Ghaen) is a city in and the capital of Qaen County, in South Khorasan Province, Iran. Qaen is also called the <b>City of Saffron</b>. Saffron from Qaen is prized for its unique aroma and strong colour. The population at the 2006 census, was 32,474 in 8,492 families.</p>

<p>Qaen is a place of great antiquity and complex history. The present city, which lies in a broad valley, was founded in the 15th century on the site of an ancient city.</p>
</div>

<div class=”cities”>
<h2>Semnan</h2>

<p>Semnan (Persian: سمنان‎, also Romanized as Semnān and Samnān) is a city in and capital of Semnan Province, Iran. At the 2011 census, its population was 153,680 in 36,298 families. Semnan is located 216 kilometers east of Tehran.</p>

<p>Semnan (Semnani name: Seman) is located in the central northern portion of the Islamic Republic of Iran. The city of Semnan is a beautiful and unique municipality filled with recreational activities, historical and religious sites, festivals, gardens and parks, colleges and universities, and Semnani culture. </p>

<p>The city serves as the cultural and political capital of the Semnan Province. The city’s main souvenirs are daffodil flowers, Shirmal pastry, Kolucheh cookies, Glim rugs, and shortbread.</p>
</div>
</body>
(شکل بسته شده تگ ها بصورت <html/>می باشد که در ادیتور متن ما در اینجا بر عکس قرار می گیرد)</html>

در قطعه کد بالا ما در بین تگ style یک کلاس به نام شهر ها یا cities تعریف کردیم و ویژگی هایی مثل رنگ متن، زنگ زمینه، فاصله نسبت به اطراف و فاصله نسبت به داخل به آن دادیم. با این کار خواستیم هربار که این کلاس را در تگ div فراخوانی کنیم و درون تگ div اطلاعات شهر ها را قرار دهیم بصورت مرتب و کادر بندی شده اطلاعات نمایش داده شوند. شما حاصل کد بالا را می توانید در شکل زیر مشاهده کنید.

Div in html

به همین شکل با چینش عناصر کنار یکدیگر می توانیم یک صفحه وب را با کمک div و Style ها شکل دهیم مثلا یک کلاس بنام header می نویسیم برای قسمت هدر، یک کلاس به نام nav مینویسیم برای ناوبار، یک کلاس به نام content می نویسیم برای قسمت مطالب و.. سپس آنها را به کمک دایو در صفحه فراخوانی میکنیم که انشالله در فیلم آموزشی بصورت کامل بررسی خواهیم کرد و همچنین در قسمت مربوط به Css.

HTML5 Layout

حالا که با پرکاربرد ترین دستورات html آشنا شدیم باهم میرویم تا بعنوان مثال و تمرین یک صفحه ساده وب طراحی کنیم. قبل از شروع تمرین بهتر است برای اینکه نام رنگ ها را بدانید و بتوانید بر اساس آنها صفحه خود را رنگ بندی کنید بهتر است سری به لینک زیر بزنید که بصورت کامل تمام رنگ ها همراه با نام و کدشان ذکر شده اند. در صورتی که به اینترنت متصل نیستید هم نگران نباشید و نرم افزار فتوشاپ را باز کنید و قسمت انتخاب رنگ آن، رنگ موردنظر را انتخاب و کد آن را بردارید.

http://www.w3schools.com/html/html_colornames.asp

شکل زیر را مشاهده کنید، از یک هدر، سایدبار، کانتنت(مطالب) و فوتر تشکیل شده است.

create web page by html
Create web page by html

این صفحه وب ساده با استفاده از کد زیر شکل میگیرد.
<!DOCTYPE html>
<html>

<head>
<style>
#header{
width:100%;
height:100px;
background-color:green;
color:white;
padding:5px;
text-align:center;
}

#sidebar{
background-color:#e2e2e2;
color:black;
height:210px;
width:100px;
line-height:30px;
float:left;
padding:5px;
}

#content{
width:350px;
height:100%;
padding:10px;
float:left;
}

#footer{
width:100%;
height:20px;
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}

</style>
</head>
<body>
<div id=”header”> MihanLearn.NET </div>
<div id=”sidebar”>
Video Training</br>
Book Training</br>
Login
</div>
<div id=”content”>
<h2> Welcome To MihanLearn </h2>
<p>MihanLearn is a biggest site in iran and release persian video training for iranian’s in all around World. Welcome ..</p>
</div>
<div id=”footer”> CopyRight By MihanLearn.net </div>
</body>
</html>

برای مشاهده توضیحات کامل و جزئیات بیشتر، فیلم آموزشی این قسمت را از سایت میهن لرن دانلود و مشاهده کنید. خب قسمت دوم نیز به پایان رسید. در این قسمت ما با html و کاربردی ترین دستورات آن آشنا شدیم و توانستیم یک صفحه وب ساده را طراحی کنیم همچنین کمی هم متوجه شدیم سی اس اس چیست و چگونه کار میکند و بر این اساس متوجه شدیم اچ تی ام ال زبانی سازگار با همه زبان هاست! چراکه با CSS،جاوا،جی کوئری،پی اچ پی،پایتون و با همه و همه سازگار است و با آنها همکاری میکند!
در قسمت بعدی از html گذری خواهیم کرد به html5 که هم اکنون آخرین نسخه این زبان می باشد و دارای امکانات و قابلیت های بسیار بیشتری است. پس از اینکه قسمت بعدی با اچ تی ام ال 5 آشنا شدیم یعنی دیگر ما کاملا بر زبان html تسلط داریم و در این زمینه یک برنامه نویس بروز هستیم. بعد از این مرحله می رویم تا کاملا با Css و Css3 آشنا شویم و آنها را فرا بگیریم.

دانلود
دانلود

دانلود

مشاهده آنلاین

زمان : 1 ساعت

حجم : 114 مگابایت

 

دانلود رایگان آموزش طراحی وب – قسمت اول – طراحی سایت در فتوشاپ

دانلود رایگان آموزش طراحی وب – قسمت سوم – HTML 5

همچنین ببینید

آموزش افزایش امنیت وردپرس | Wordpress Security

آموزش وردپرس صفر تا صد – قسمت هفتم (امنیت وردپرس)

به نام خالق مهربان امیدواریم تا به این قسمت از مجموعه آموزش صفر تا صد …

6 دیدگاه

  1. سلام
    ببخشید اگه ممکنه راهنماییم کنید که دستور clear:both در چه مواقع استفاده میشه؟
    با تشکر

  2. خیلی خوب … دست شما درد نکنه.
    فقط اگه یه موسیقی ملایم در پس زمینه ی فیلم بذارید، (مانند قسمت اوّل) دیگه نور علی النور میشه.

  3. آقا سعید سلام
    پس فایل پی دی اف این و اون قبلیا کو ؟
    شما که قول دادید فایل پی دی افشون رو هم میزارید!

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *