سایت خود را بسازید ، به روش saalek110

saalek110 · Jan 19, 2024

رسیدیم به پست ۱۰۱ و صفحه ۶ تاپیک.

saalek110 · Jan 19, 2024

HTML:

<img src="boat.gif" alt="Big Boat" />

کد عکس در html

از تاپیک آمزش جامع html که سنجاق شده در تالار html فروم مجیدآنلاین

saalek110 · Jan 19, 2024

HTML:

 <form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" value="[email protected]" size="40" maxlength="50"  />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" />
<input type="reset" />
<input type="hidden" />

ار تاپیک جامع .. یک سری چیزهایی که در مورد فرم نگفتیم.

saalek110 · Jan 19, 2024

HTML:

 <a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:[email protected]">Send e-mail</a>A  named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

لینک و لینک با عکس و .... از تاپیک جامع.

saalek110 · Jan 19, 2024

HTML:

 <p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

مقاله ، خط بعد خط افقی و pre . این آحری فواصل را حفظ می کنه.

saalek110 · Jan 19, 2024

HTML:

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
  <textarea name="comment" rows="60" cols="20"></textarea>

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

saalek110 · Jan 19, 2024

HTML Layout

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

saalek110 · Jan 19, 2024

مرجع تگ های HTML

(در این پست تمامی تگ های html معرفی خواهند شد.
نکته جالب : بعد از این که این پست تمام شد به بررسی هر کدام از تگ ها میپردازیم.
که شامل : تعریف، کاربرد، پشتیبانی توسط مرورگرها و ... میپردازیم.)

تگ های اساسی :
 ........................................... توضیحاتی را به فایل در html اضافه میکند
<!doctype> ....................................... تعریف نوع سند
<body> ............................................ تعریف بدنه سند
<br /> .............................................. تعریف شکست خطوط
<hr /> ............................................... تعریف یک خط افقی
<p> .................................................... تعریف یک پاراگراف
<h1> to <h6> ................................... تعریف تیترها در HTML
<html> ............................................... تعریف یک سند HTML

تگ های قالب بندی متن :
<abbr> ............................................. تعریف حرف اختصاری
<acronym> ....................................... تعریف مخفف
<address> ........................................ اطلاعات تماس برای نویسنده/سند
<b> ................................................. تعریف متن برجسته
<bdo> ............................................. تعریف جهت متن
<big> ............................................... تعریف بزرگتر متن
<blockquote> ................................... تعریف نقل قول طولانی
<center> ........................................... توصیه نمیشود. تعریف متن در وسط
<cite> ............................................... معرفی استناد
<code> ............................................. تعریف کد متن کامپیوتری
<del> ................................................ تعریف حذف متن
<dfn> ............................................... معرفی تعریف
<em> ................................................ معرفی متن مورب
<font> .............................................. توصیه نمی شود. تعریف فونت، رنگ و سایز برای متن
<i> ..................................................... تعریف یک متن ایتالیک
<ins> ................................................. تعریف یک متن آندرلاین
<kbd> ................................................ تعریف متن صفحه کلید
<label> .............................................. تعریف برچسب برای عناصر ورودی
<pre> ................................................. تعریف نوشته تنظیم نشده
<q> .................................................... تعریف یک نقل قول کوتاه
<s> .................................................... توصیه نمی شود.تعریف یک متن خط خورده
<samp> ............................................... تعریف نمونه کد کامپیوتری
<small> ............................................... تعریف یک متن کوچک تر
<strike> ............................................... توصیه نمی شود.تعریف یک متن خط خورده
<strong> ............................................. تعریف متن قوی تر
<sub> ................................................. تعریف متن زیر نویس
<sup> ................................................. تعریف متن بالا نویس
<tt> ................................................... تعریف متن ماشین تحریر
<u> .................................................... توصیه نمی شود. تعریف متن underline
<var> .................................................. تعریف متغیر بخشی از متن
<xmp> ................................................. توصیه نمی شود. تعریف نوشته تنظیم نشده

تگ های استایل :
<style> ............................................... تعریف استایل برای اطلاعات سند
<div> ................................................ تعریف یک بخش از سند
<span> ................................................ تعریف یک بخش در سند

تگ های جدول :
<table> ............................................... تعریف یک جدول
<caption> ......................................... تعریف عنوان جدول
<td> ................................................... تعریف یک سلول در جدول
<th> ................................................... تعریف سلول هدر در جدول
<tr> ................................................... تعریف یک ردیف در جدول
<tbody> ............................................... تعریف گروه های بدنه سند در یک جدول
<tfoot> ............................................... تعریف گروه های مطالب بالا و پایین صفحه در جدول
<thead> .............................................. تعریف گروه های مطالب هدر در جدول
<col /> ............................................. تعریف مشخصه values برای یک یا چند ستون در جدول
<colgroup> ....................................... تعریف گروهی از ستون در جدول برای قالب بندی

تگ های لیست ( فهرست ) :
<ul> .................................................... تعریف یک لیست نامرتب
<ol> .................................................... تعریف یک لیست مرتب
<li> .................................................... تعریف لیست آیتم
<dd> ................................................ معرفی شرح اصطلاح در لیست تعریفی
<dir> ................................................ توصیه نمی شود. معرفی یک لیست دایرکتوری
<dl> .................................................. تعریف یک لیست تعریفی
<dt> ................................................. معرفی اصطلاح (مورد) در لیست تعریفی
<menu> ............................................. تعریف یک لیست منو

تگ های لینک :
<a> ................................................. تعریف یک لینک
<link /> .............................................. تعریف رابطه بین سند و منابع خارجی

تگ های عکس :
<area /> ........................................... تعریف یک فضا در کنار عکس/map
<img /> ............................................. تعریف یک عکس
<map> ............................................... تعریف نقشه یک تصویر

تگ های قاب :
<frame/> ......................................... تعریف یک پنجره (یک قاب) در یک قاب
<frameset> ....................................... معرفی مجموعه از قاب ها
<iframe> ........................................... تعریف فریم های درون خطی
<noframes> ....................................... تعریف یک محتوای فرعی برای کاربراینی که قاب ها را پشتیبانی نمیکنند.

تگ های فرم :
<input /> .......................................... تعریف کنترل ورودی
<form> ............................................. تعریف یک فرم ورودی برای کاربر در HTML
<textarea> ........................................... تعریف کنترل ورودی چند خط متن
<button> ......................................... تعریف دکمه
<select> .............................................. تعریف لیست انتخاب (لیست کشویی)
<optgroup> ........................................... تعریف گروهی از گزینه های وابسته در یک لیست
<option> .............................................. تعریف یک گزینه در یک لیست
<fieldset> ......................................... تعیین مرز در اطراف عناصر در فرم
<legend> ........................................... تعریف یک عنوان برای fieldset عنصر
<isindex> .......................................... توصیه نمی شود. تعریف شاخصه جست و جو در سند

تگ های اطلاعات meta :
<head> .............................................. تعریف اطلاعات یک سند
<meta /> ........................................... تعریف
<title> ................................................. تعریف عنوان یک سند
<base /> ......................................... معرفی آدرس پیش فرض و یا هدف به طور پیش فرض برای تمام پیوندها در صفحه
<basefont /> .................................... توصیه نمیشود. تعریف رنگ، فونت و سایز یک متن در سند

تگ های برنامه ها :
<script> ............................................... تعریف اسکریپت های سمت سرویس گیرنده
<noscript> ......................................... تعریف متناوب محتوا برای کاربرانی که کار پشتیبانی نمی کند اسکریپتهای سمت سرویس گیرنده
<object> .............................................. تعریف یک شیء جایگذاری شده
<param /> ............................................ تعریف یک پارامتر برای یک شیء
<applet> ........................................... توصیه نمیشود. تعریف یک applet جاسازی شده

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

آموزش جامع html

آموزش جامع html ( مقدماتی تا پیشرفته ) با سلام بالاخره نسخه PDF آموزش ها هم آماده شد. با تشکر از دوست خوبم مهدی (mehdi2477) که زحمت تهیه نسخه PDF رو کشیدن. برای دانلود روی عکس کلیک کنید و یا از فایل ضمیمه استفاده کنید. نکته! هر گونه کپی برداری تنها با ذکر نام مجید آنلاین و مولف محفوظ می باشد...

forum.majidonline.com

saalek110 · Jan 19, 2024

در پست اول اون تاپیک یک pdf جالب هست ۸۰ صفحه
آموزش html

جالبی اون اینه که کد html را گذاشته و روبروی اون نشون داده چطور اجرا میشه. خیلی عالیه.واقعا دستش درد نکنه.

saalek110 · Jan 19, 2024

من چیزهایی که درمورد css داشتم گفتم.
این pdf پست قبل هم html را خیلی جالب گفته....
کوئری ها را هم صفحه قبلی تاپیک گفتم. برای ارتباط با دیتابیس

saalek110 · Jan 19, 2024

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

من روش استفاده از css را در صفحات قبلی تاپیک گفتم و مقداری از تنظیمات رایج را هم گفتم، پس css هم می توانید استفاده کنید.

وظیفه من:
یکی از کمک های من ، کمک در استفاده از php و دیتابیس برای شماست. که مقداری گفتم.
و دیگری ، یک سری کمک های دیگر ، در یک سری مشکلات فنی مثل فارسی نویسی است.
و ساخت ادیتور سایت شما.

saalek110 · Jan 19, 2024

گام دوم معماری سایت شما:

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

شروع معماری:
من خودم یک پوشه در فایل منیجر خودم می سازم به اسم base ، که معادل پوشه htdocs شما میشه... پوشه htdocs پوشه ای است که حکم زمین صفر را برای شما داره و همه چیز اونجا بنا میشه.

saalek110 · Jan 19, 2024

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

کار پوشه tools چیه؟
یک سری ابزار من میگم می سازید ، داخلش می گذارید ،
برای کار با دیتابیس.
ابزار اول add text(در سایت نمونه ، من بعدا فایل add_text را به پوشه admin منتقل کردم و تقویم را گذاشتم در پوشه tools ، در جریان باشید):

لینک سایت نمونه:

http://saalek121.great-site.net/index.php

این فایل وسیله ای برای ذخیره یک سری کلمه و جمله فارسی داخل دیتابیس ، بهش میگیم add text...این جملات را می توانید بر در و دیوار سایت خود بزنید، مثل تابلوهای علائم راهنمایی رانندگی برای راهنمایی بازدید کنندگان سایت.
اسم تاپیک هست ساخت سایت به روش saalek110 ، شاید این روش غلط باشه ولی یک ساله من باهاش کار کردم و جواب داده. بعدا اگر روش درست تری دوستان مهندس و استاد خواننده تاپیک پیشنهاد دادند معماری را عوض می کنیم.

پس یکی از فایهای داخل پوشه tools اسمش add_text است ، بقیه فایلها را هم بعدا میگم.

یک فایل هم در همون htdocs دارید به نام index.php که صفحه اول سایت شماست و از اون صفحه لینک می دهید به صفحات دیگر. لینک دادن را اون pdf گفته ، در پستهای همین صفحه ۶ تاپیک هم من کدش را گذاشتم ، بزار باز اینجا بزارم....

HTML:

 <a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>

دو جور روش لینک دادن در کدهای بالا هست ، اولی یک متن برای کلیک هست ، و دومی یک عکس برای کلیک هست ، عکس را در پوشه images می ذارید.

پوشه دوم images:

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

saalek110 · Jan 20, 2024

ساب دومین دومی ها چه کار کنند؟

قبلا گفتم ساب دومین دوم می توانید بسازید، چون ساب دومین اولی که به شما می دهد ممکن است ش..یلثر باشه یا ازش خوشتان نیاید.
برای شما کنار پوشه htdocs یک پوشه با نام همون ساب دومین دوم که ساختید ایجاد میشه ، که اون پوشه هم خودش داخلش پوشه htdocs داره ، زمین صفر ساب دومین دومی ها میشه اون پوشه htdocs که داخل پوشه ساب دومین دوم است....
یعنی پوشه هایی که داریم بحث می کنیم مثل tools و images و فایل index.php می رود داخل اون پوشه.

saalek110 · Jan 20, 2024

حرف اول اسم پوشه ها باید کوچک باشد..
مثلا tools، images

. اگر هم اصرار بر حرف بزرگ دارید ، موقع آدرس دهی در کدها باید حرف بزرگ بنویسید.

یک پوشه هم بسازید برای فایل کانکشن و اون را داخل اون پوشه بزارید. اسم پوشه را base بزارید.
یک پوشه با نام css هم بسازید.
یک پوشه functions هم بسازید.
نتیجه نهایی فعلی این طوری شد:

اینها فایلها و پوشه های پوشه htdocs شما باید باشه.
داخل پوشه base فایل ccoonn.php را داریم.

saalek110 · Jan 20, 2024

کمی آموزش فایل منیجر هاست:

می توانید یک فایل را کپی کنید ، بعدش از ابزارهای پایین ، paste را در پوشه هدف بزنید.
تغییر نام فایل هم دارید...
می توانید یک فایل را کپی کنید ، و داخل همون پوشه بیاندازید ، که پسوند copy در ادامه اسم فایل جدید خواهد آمد... بعد فایل جدید را تغییر نام دهید. وقتی می خواهید یک تغییری ایجاد کنید و می خواهید فایل اول محفوظ باشه این کار را می توانید بکنید. مثلا برای تمرین.

saalek110 · Jan 20, 2024

دو نکته فارسی نویسی فکر کنم داریم:
اولی کد اول صفحه،
دومی تعیین نوع ستون های دیتابیس.

برای اولی این تکه را فعلا در اول کد خود داشته باشید قبل head :

HTML:

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl">
<meta charset="UTF-8">
<head>

اون خط dir= rtl یعنی جهت برابر است با right to left ، می دونید که زبان فارسی از راست به چپ نوشته میشه.
خط بعدی متا charset برابر شده با Utf-8 دقیق نمی دانم این خط لازم است یا نه. ولی شما بزارید باشه.

پس این شد نکته فارسی نویسی در کد.
نکته فارسی نویسی در دیتابیس را هم بعدا میگم.

صفحه index.php سایت من اولش این شکلی است:

PHP:

<?php
session_start();
?>
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl">
<head>

اون utf 8 را می بینید نداره... و ۳ خط اول هم می بینید که سسیون استارت داره.

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

saalek110 · Jan 20, 2024

سسیون چیه؟

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

PHP:

<?php
session_start();
?>
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl">
<head>

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

saalek110 · Jan 20, 2024

saalek110 · Jan 20, 2024

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

ساخت اولین جدول دیتابیس سایت:

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

یک فایل به نام add_text خواهیم ساخت که می زاریمش در پوشه tools ، که کارش افزودن عبارات فارسی به جدول texts در دیتابیس است.

خودش یک تمرین هم برای شما حساب میشه.

جدول text ۳ ستون داره ، طبق شکل بالا ، اولی از نوع int است ، توجهی به اون عدد ۱۱ جلویش نکنید، شما که int انتخاب کنی خوش اون عدد ۱۱ را جلویش می اندازد.
ولی برای ستون های دوم و سوم وقتی var char را انتخاب کردید تعداد کاراکتر را ۵۰ و ۶۰۰ انتخاب کنید.
در مورد ستون my_text چون قراره داخلش فارسی ذخیره شود ، colation اون مهم است. utf8mb4_persian_ci من اینو انتخاب کردم. شما هم همین را انتخاب کنید.

من خودم الان دارم جدول را می سازم ، یک عکس موقع ساخت می ذارم: