آموزش کد نویسی
-
@m-an در آموزش کد نویسی گفته است:
صب کنید
پیشنهاد خیلی خوبیه
اما من فکر کردم برای اینکه راحت تره محیطش بهتره وگرنه براکت هم پیشنهاد خیلی عالیه !!!
-
لینک ها
لینک ها بنیادی ترین قسمت از شبکه ارتباط جهانی (www) هستند. بنابرین توصیه می شود که هزینه زمانی بیشتری برای این قسمت صرف کنید. ما هم سعی می کنیم با آوردن مثال های متنوع به شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها می توانند به عنوان لینک مورد استفاده قرار بگیرند.
مثال زیر را با هم بررسی می کنیم.
مثال 1) برای رفتن به سایت گوگل از سایت پارس کلاب کافی است که بر روی www.google.com کلیک کنید.انواع لینک (link) در html
-
لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند.
-
لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند.
-
لینک داخلی (Internal Links): لینک هایی هستند که به قسمتی همان صفحه ای که در آن هستید اشاره می کنند.
چگونه لینک html بسازیم؟؟؟
برای ساختن لینک کافی است از دستور <a>...</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>…<a> قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href مخفف "hypertext reference" استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و... می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.پس شکل کلی این دستور در زبان html به صورت زیر است:
<a href="url">متنی که به عنوان لینک شناخته خواهد شد</a>
<a href="url"><img src="" /></a>
<a href="">هر المانی که قرار است به عنوان لینک استفاده شود</a>
Global link - لینک سراسری یا جهانی :
ویراستار Notpade++ خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm یا html و با نام GlobalLink آن را ذخیره کنید.<html>
<head>
<title>My Page</title>
</head>
<body>
Click <a href="http://www.google.com">here</a> to go to google.
</body>
</html>
حال اگر با مرورگر صفحه مورد نظر را باز کنید نتیجه به صورت زیر مشاهده خواهد شد:
Click# here to go to google.
با فشردن کلمه here به سایت گوگل خواهید رفت , به همین سادگی.
Local link - لینک محلی:
قبل از اینکه به این مثال بپردازیم یک صفحه html بنام firstpage را در درایو c خود بسازید.سپس ویراستار NotPad++ را باز کرده و کد زیر را در آن تایپ کنید و آن را با نام Internallink و با پسوند htm ذخیره کنیدClick <a href="c:\ firstpage.htm">here</a> to go to firstpage.
حال اگر با مرورگر صفحه Internallink.htm را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!
Intrnal Link - پیوند داخلی:
برای اینکه به قسمت خاصی از صفحه وبی که در آن قرار داریم ، پیوند بر قرار کنیم یا به عبارت دیگر به قسمتی از همان صفحه html پرش کنیم، باید از صفت name از دستور<a>…</a> برای نام گذاری آن بخش استفاده کنیم.این نام از حروف تشکیل می شود که باید منحصر به فرد نیز باشد. مثلا قسمتی از صفحه را انتخاب می کنیم و در آن قسمت دستور <a name="mesale1">…</a> را می نویسیم حال برای مراجعه به آن بخش کافی است در پیوند داخلی که ایجاد می کنیم علامت # و بعد نامی که انتخاب کرده بودیم را می نویسیم. در این مثال باید بنویسیم <a href="#mesale1">…</a>. مثال کامل زیر بهتر به تشریح این موضوع خواهد پرداخت.<html>
<head>
<title>my page</title>
</head>
<body>
<h3><a href="#Chapter 1">Introduction</a></h2> <h3><a href="#Chapter 2">html text</a></h2> <h3><a href="#Chapter 3">html links</a></h2> <a name=" Chapter 1"> Introduction </a></br> <!-- Introdution متن مربوط به --></br> <a name=" Chapter 2"> html text</a></br> <!-- html text متن مربوط به --></br> <a name=" Chapter 3"> html links</a></br> <!-- html links متن مربوط به --></br>
</body>
</html>
در مثال بالا فرض کنید صفحه وبی داریم که شامل اطلاعاتی در مورد html است که به 3 فصل html links, html text ,Introduction تقسیم شده است که در بالای صفحه آمده اند. توضیح همه این فصل ها درهمین صفحه قرار دارد.
حال برای دیدن متن مربوط به html text کافی است بر روی لینک html text کلیک کنیم. با یاد داریم که این نوع پیوند ، پیوند داخلی نام دارد. پس 2 مرحله برای ایجاد پیوند داخلی داریم:1)نام گذاری بخشی که می خواهیم با لینک آن را ببینیم.
<a name="#Chapter 2">html text</a>2)ایجاد پیوند به بخش نام گذاری شده.
<a href="#Chapter 2">html text</a> -
-
لینک های رنگی بسازید:
برای اینکه لینک ها را در صفحه خود به صورت متمایز نمایش دهیم می توان برای آنها رنگ مشخص کرد.
دو حالت برای تعریف کردن رنگ لینک ها وجود دارد:
1)رنگ تمام لینک ها در صفحه به یک صورت تعریف شود.
2)برای بعضی از لینک ها رنگ متفاوتی تعریف کنیم.link,vlink,alink ؟!! یعنی چی؟
link: بیان کننده رنگ پیوند هایی است که تا کنون ملاقات نشده اند. استاندارد آن آبی (blue یا #0000FF) است.
vlink مخفف Visited Link :رنگ پیوند را پس از ملاقات شدن نمایش می دهد.استاندارد آن ارغوانی (purple - #800080) است.
alink مخفف Active Link :رنگ لینک را وقتی که ماوس بر روی آن قرار می گیرد ، مشخص می کند.استاندارد آن قرمز (red - #FF0000) است.یک رنگ برای تمام لینک های موجود در صفحه html
کافی است که در قسمت <body> از صفت های link,vlink,alink استفاده کنیم.
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
هر لینک یک رنگ
اگر بخواهیم رنگ یک یا چند لینک را در صفحه html ، متفاوت از بقیه نشان دهیم از یکی از دو روش زیر استفاده می کنیم.روش اول:استفاده از دستور font بین دستور <a href>…</a>باید به این نکته مهم توجه داشت که دستور font حتما باید بین <a href>…</a> قرار بگیرد.
Click <a href="http://www.webfocus.ir"> <font color="red">here</font> </a> to go to webfocus.
روش دوم:استفاده از خاصیت style در دستور <a>
Click <a href="http://www.webfocus.com" style="color: green">here</a> to go to webfocus.
با استفاده از یکی از دو روش فوق می توانید لینک ها یی با رنگ دلخواه تعریف کنید .
عضی رنگ های معروف:
Black, Aqua , Fushia, Blue, Gray, Green, Lime, Marron, Navy, Olive, Purple, Red,Silver,Teal,White,Yellow .نکته :به جای نوشتن اسامی رنگ ها, می توان از فرمت RGB استفاده کرد.که b,g,r به ترتیب مخفف blue,green,red هستند.که هر یک می توانند مقداری بین 0 تا 255 بگیرند. رنگ مورد نظر از ترکیب این رنگ ها به دست خواهد آمد. مثلا 187 017 142 رنگی مایل به بنفش خواد بود. البته اکثر طراحان ترجیح می دهند که این رنگ ها را در مبنای شانزده (hex) بیان کنند مثلا رنگ معادل مثال قبل در مبنای شانزده به صورت 8E11BB# نوشته می شود.
-
صفات مربوط به دستور پیوند (Link Attributes )
در مورد صفت های href وname به طور مفصل صحبت کردیم حال به توضیح صفت های دیگر این دستور می پردازیم.
صفت title : با استفاده از این صفت وقتی ماوس بر روی پیوند مورد نظر قرار می گیرد متنی که در جلوی این صفت نوشته شده ظاهر می شود.
مثال:<a href ="www.parsclub.net" title="for more learning html click here">learning html</a>
وقتی ماوس روی پیوندhml learning قرار می گیرد پیام for more learning html click here ظاهر می شود.
صفت tabindex : با استفاده از این صفت و مقدار دادن به آن در مرورگرهایی که ازاین صفت پشتیبانی می کنند ,روند انتخاب کردن پیوند را با استفاده از کلید Tab مشخص می کنیم.
مثال:<a href =" لينک tabindex="1">yahoo</a></br>
<a href =" لينک tabindex="3">google</a></br>
<a href ="http://parsclub.net" tabindex="2">webfocus</a>
با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند parsclub و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد.
حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن Tab مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند parsclub قرار می گیرد.صفت Target : به صورت پیش فرض, لینک ها در همان پنجره یا فریم ای که در آن هستید باز خواهند شد.با استفاده از صفت Target مثلا می توانید تعیین کنید که پیوند مورد نظر در یک پنجره جدید باز شود. با این صفت در بخش فریم ها بیشتر آشنا خواهیم شد.
-
سلام دوستان اینم اون تایپکی که میگفتم
میخوام اموزش کد نویسی در حد ساده بذارمرشتم ریاضی نیستم که
ولی اگه استقبال شد پیشرفته هم میذارم
فعلادر حد ساخت یه قالب ساده !
حالا دیگه اموزش رو کی میذارم خدا داند
@دانش-آموزان-آلاء_MILAD_
چه زبونایی میخوای بزاری؟!
و این کدایی که گذاشتی با یه سرچ ساده نمیاد؟چیز تازه بزار بعد کنکور بچه ها دنبالش برن
الان شاید یکی بیاد اصلا ندونه کد نویسی چیه
یه مقدمه چیزی هم میزاشتی:smiling_face_with_open_mouth_closed_eyes: -
_MILAD_
چه زبونایی میخوای بزاری؟!
و این کدایی که گذاشتی با یه سرچ ساده نمیاد؟چیز تازه بزار بعد کنکور بچه ها دنبالش برن
الان شاید یکی بیاد اصلا ندونه کد نویسی چیه
یه مقدمه چیزی هم میزاشتی:smiling_face_with_open_mouth_closed_eyes:AMIR_HOSSEIN1378 نوشتم اولش چیزای ساده !!
نگفتم چیز پیچیده ای میخوام بگم ! میخوام اونایی که دوس دارن وببلاگی داشته باشن ! حداقل خودشون یه قالب دلخواه خودشون درست کنند و از نوشتنشون لذت ببرم
میخوام اموزش کد نویسی در حد ساده بذارم
این خط اول اولین پست این تایپک بود !
هدف فقط یادگیری اینه که یه قالب ساده برای وبلاگ ساخته بشه تا راحت باشن و دلخواه خودشون باشه اون چیزی که میخوان !
وگرنه اون پیشرفته هاشو میتونن از هزار اموزش موجود استفاده کنند
ممنون از نظرت
:)
-
AMIR_HOSSEIN1378 نوشتم اولش چیزای ساده !!
نگفتم چیز پیچیده ای میخوام بگم ! میخوام اونایی که دوس دارن وببلاگی داشته باشن ! حداقل خودشون یه قالب دلخواه خودشون درست کنند و از نوشتنشون لذت ببرم
میخوام اموزش کد نویسی در حد ساده بذارم
این خط اول اولین پست این تایپک بود !
هدف فقط یادگیری اینه که یه قالب ساده برای وبلاگ ساخته بشه تا راحت باشن و دلخواه خودشون باشه اون چیزی که میخوان !
وگرنه اون پیشرفته هاشو میتونن از هزار اموزش موجود استفاده کنند
ممنون از نظرت
:)
_MILAD_ در آموزش کد نویسی گفته است:
ه که یه قالب ساده برای وبلاگ ساخته بشه تا راحت باشن و دلخواه خودشون باشه اون چیزی که میخوان !
اها اره دقیقا :smiling_face_with_open_mouth:
موفق باشی -
<html> <head> <link href="http://www.iconj.com/ico/4/u/4u624p37pf.ico" rel="shortcut icon"> <style> html::-webkit-scrollbar { background-color:##ddd; width:10px; } html::-webkit-scrollbar-thumb { background-color:#4d929a; } html::-webkit-scrollbar-thumb:hover { background-color:#32b1bf; } html::-o-scrollbar { background-color:##ddd; width:10px; } html::-o-scrollbar-thumb { background-color:#4d929a; } html::-o-scrollbar-thumb:hover { background-color:#32b1bf; } .text1 a { color:#ffff00; } .text1 a:hover{ color:#00ff00; } </style> <style> ::selection { background-color: #33a99d; color: #ffffff; } </style> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="expires" content="-1" /> <meta name="description" content="<-BlogTitle->" /> <meta name="keywords" content="" /> <title><-BlogTitle-></title> <base target="_blank" /> <style type="text/css" media="all"> @font-face { font-family: "Yekan"; src: url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.eot); src: url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.eot?#iefix) format("embedded-opentype"), url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.woff) format("woff"), url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.ttf) format("truetype"), url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.svg#BYekan) format("svg"); font-weight: normal; font-style: normal } body {background:url("http://s8.picofile.com/file/8358104142/footer.png"); font-family:Yekan; ; font-size: 12px; color: #333;} #Granny {width:750px;} a {text-decoration:none; color:#777; } a:hover {color:#7BAEA7;} #HeaderCont {color:#7BAEA7; direction: rtl; text-align:center; margin:10px; font-size:15px; font-weight:bold;} #HeaderimgCont {margin:10px;} #HeaderInn {direction: rtl; text-align:center; margin:20px; font-size:13px; } #MainAndSides {margin:5px;} #ASLI {width:75%; float:right; } #Top {color:;height:80px; width:50%; float:LEFT; box-shadow:1px 1px 4px 3px #eee; border:2px solid #ddd; padding-top:3px; padding-bottom:3px; margin-top:15px; margin-bottom:15px; } #Top1 {color:#7BAEA7;height:80px; width:50%; float:RIGHT; box-shadow:1px 1px 4px 3px #eee; border:2px solid #ddd; padding-top:3px; padding-bottom:3px; margin-top:15px; margin-bottom:15px; } .OnePost {direction: rtl; } .OnePost img {max-width:500px; -webkit-transition:1s; -moz-transition:1s; -o-transition:1s; } .TopPost {padding:5px; background:#3b8ecd; border:2px solid #FFF;border-radius:1em 1em 0em 0em; } .TopPost1 {padding:11px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 0em 0em; margin:5 ; text-shadow:1px 1px 4px #666666;} .TopPost2 {padding:5px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 4em 4em; margin:5 ; } .TopPost3 {float: left; padding:25px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 4em 4em; margin:5 ; text-shadow:1px 1px 4px #666666;background-image:url(http://s8.picofile.com/file/8319401342/bg29.png);} .TopPost8 {padding:5px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 4em 4em; margin:5 ; text-shadow:1px 1px 4px #666666;} .POSTB {padding:5px; box-shadow:1px 1px 1px 3px #eee; border:2px solid #ddd;margin:3.75px;background:#fff; text-shadow:1px 1px 5px #999999;} .BotPost {font-size:10px; background: #eee; box-shadow:1px 1px px 3px #eee; border:1px solid #ddd; direction: rtl; padding:5px; border-radius:0em 0em 0em 0em ; margin:1px; text-shadow:1px 1px 4px #999999;} .TitleHeaderPost {color:#fff; direction: rtl; text-align:center; font-size:13px; text-shadow:2px 1px 5px #000; } .PostTextBody {direction: rtl; padding:5px; font-size:12px; color:#333333; text-align:justify; line-height: 150%;text-shadow:1px 1px 4px #ededed; } .PermFooterPost {color:#777;} .PermFooterPost a {color:#777;} .PermFooterPost a:hover {color:#7BAEA7;} .PostSep {height:10px; } #SideLCol {width:25%; float: left; font-size:11px; margin-bottom:10px;border-radius:.25em .25em .25em .25em ;} #SideLCol .Box {direction: rtl; padding:4px; border:2px solid #ddd; border-radius:.25em .25em .25em .25em ;} .Box img {max-width:165px; margin-bottom:2px; border-radius:.25em .25em .25em .25em ;} #SideLCol a {color:#777;} #SideLCol a:hover { background:#F65D6F; border:3px solid #fff; color:#fff;border-radius:0.5em 0.5em 0.5em 0.5em;} #SideLCol .Sep {height:10px;border-radius:.25em .25em .25em .25em ;} #SideLCol .Title {max-width:1800px; margin-bottom:2px; border-radius:3em 3em 3em 3em ; font-size:11px; background-image:url(http://s8.picofile.com/file/8330459542/bg1.jpg); color:#fff; padding:5px; text-shadow:2px 1px 5px #257b86; } #SideLCol .Title1 {max-width:1800px; margin-bottom:2px; border-radius:3em 3em 3em 3em ; font-size:11px; background-image:url(http://s8.picofile.com/file/8330459568/bf2.jpg); color:#fff; padding:5px; text-shadow:2px 1px 5px #257b86; } <style> * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body { background-color: #555; } .pagination { list-style: none; display: inline-block; padding: 0; margin-top: 10px; } .pagination li { display: inline; text-align: center; } .pagination a { float: left; display: block; font-size: 14px; text-decoration: none; padding: 5px 12px; color: #fff; margin-left: -1px; border: 1px solid transparent; line-height: 1.5; } .pagination a.active { cursor: default; } .pagination a:active { outline: none; } .modal-1 li:first-child a { -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px; border-radius: 6px 0 0 6px; } .modal-1 li:last-child a { -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0; border-radius: 0 6px 6px 0; } .modal-1 a { border-color: #ddd; color: #4285F4; background: #fff; } .modal-1 a:hover { background: #eee; } .modal-1 a.active, .modal-1 a:active { border-color: #4285F4; background: #4285F4; color: #fff; } </style> </style> <style> body{font-family: yekan;} </style> <script src="http://cafe-webniaz.ir/abzar/webfont/yekan.js"></script> <!--کد نظرات بلاگفا--> <script type="text/javascript" language="javascript"> <!-- function GetBC(lngPostid) { var intTimeZone="12600", strBlogId="real-shadmehr", intCount=-1, strResult=""; try { for (i=0;i<BlogComments.length;i+=2) { if (BlogComments[i]==lngPostid) intCount=BlogComments[i+1] ; } } catch(e) {} if (intCount == -1) strResult="✉"; if (intCount == 0) strResult="✉"; if (intCount == 1) strResult="✉"; if (intCount > 1) strResult=intCount + "✉"; var strUrl = "/comments/?blogid=" + strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone; var strResult = "<a href=\"javascript:void(0)\" target=\"_self\" onclick=\"javascript:window.open('"+strUrl+"','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,width=500px,height=500px')\" >"+strResult+"</a>" ; document.write(strResult); } function OpenLD() { window.open('/links','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px'); return true; } // --> </script> <!--کد نظرات بلاگفا--> </head> <body> <center> <div id="Granny"> <div id="Granny"> <div id="HeaderCont"> </div> <div id="HeaderInn"></div> <style> .TAB {width:97%;padding:0.5%;margin:1%;height:212px;background:#fff;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;} /* تعویض عکس زمینه */ .TAB {background:#fff url(https://cdn.dribbble.com/users/548267/screenshots/4533399/landscape-study.jpg) no-repeat center;} </style> <div class="TAB"> </div> </div> <!-- ==================== ستون اصلی ==================== --> <div id="ASLI"> <BLOGFA> <div class="OnePost"> <a name="<-PostId->"></a> <div class="TopPost"> </div> <div class="PostB"> <-PostTitle-><div class="PostTextBody"><-PostContent-></div> <BlogPostTagsBlock><br>هشتگ: <BlogPostTags separator=", "><a href="<-TagLink->"><-TagName-></a></BlogPostTags></BlogPostTagsBlock> </div> <div class="BotPost"> <div class="PermFooterPost"> <BlogComment> <script language="javascript" type="text/javascript">GetBC("<-PostId->");</script> </BlogComment> | <-PostAuthor-> | <-PostDate-> | <-PostTime-> | <BlogExtendedPost><a href="<-PostLink->"> ادامه رو ببین </a> </BlogExtendedPost> </div> </div> </div> <div class="PostSep"></div> </BLOGFA> <!-- کد صفحه بندی صفحات ---> <ul class="pagination modal-1"> <li><a href="<-BlogPreviousPageLink->" class="prev" target="_parent" >«</a></li> <li><A href="ادرس وبت?p=1" target="_parent" >1</A></li> <li><A href="ادرس وبت ?p=2" target="_parent">2</A></li> <li><A href="ادرس وبت author-نام کاربری وبت .aspx?p=11" target="_parent" >11</A></li> <li><a href="<-BlogNextPageLink->" class="next" target="_parent">»</a></li> </ul> <!-- کد صفحه بندی صفحات بلاگفا ---> </div> <!-- =================== منوی کناری =================== --> <div id="SideLCol"> <div class="Title1"> <span data-balloon=" ! !" data-balloon-pos="right"data-balloon-length ="large">🌟 چرت و پرت </span></div> <div class="Box"> https://www.blogfa.com/help/Show.aspx?id=template </div><div class="Sep"></div> </div> </div></div> </center> </body> </html>
-
سلام دوستان اینم اون تایپکی که میگفتم
میخوام اموزش کد نویسی در حد ساده بذارمرشتم ریاضی نیستم که
ولی اگه استقبال شد پیشرفته هم میذارم
فعلادر حد ساخت یه قالب ساده !
حالا دیگه اموزش رو کی میذارم خدا داند
@دانش-آموزان-آلاء -
<html> <head> <link href="http://www.iconj.com/ico/4/u/4u624p37pf.ico" rel="shortcut icon"> <style> html::-webkit-scrollbar { background-color:##ddd; width:10px; } html::-webkit-scrollbar-thumb { background-color:#4d929a; } html::-webkit-scrollbar-thumb:hover { background-color:#32b1bf; } html::-o-scrollbar { background-color:##ddd; width:10px; } html::-o-scrollbar-thumb { background-color:#4d929a; } html::-o-scrollbar-thumb:hover { background-color:#32b1bf; } .text1 a { color:#ffff00; } .text1 a:hover{ color:#00ff00; } </style> <style> ::selection { background-color: #33a99d; color: #ffffff; } </style> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="expires" content="-1" /> <meta name="description" content="<-BlogTitle->" /> <meta name="keywords" content="" /> <title><-BlogTitle-></title> <base target="_blank" /> <style type="text/css" media="all"> @font-face { font-family: "Yekan"; src: url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.eot); src: url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.eot?#iefix) format("embedded-opentype"), url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.woff) format("woff"), url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.ttf) format("truetype"), url(http://up.ghalebgraph.ir/up/galebgraph/webfile/web/theme/05/fonts/SYekan.svg#BYekan) format("svg"); font-weight: normal; font-style: normal } body {background:url("http://s8.picofile.com/file/8358104142/footer.png"); font-family:Yekan; ; font-size: 12px; color: #333;} #Granny {width:750px;} a {text-decoration:none; color:#777; } a:hover {color:#7BAEA7;} #HeaderCont {color:#7BAEA7; direction: rtl; text-align:center; margin:10px; font-size:15px; font-weight:bold;} #HeaderimgCont {margin:10px;} #HeaderInn {direction: rtl; text-align:center; margin:20px; font-size:13px; } #MainAndSides {margin:5px;} #ASLI {width:75%; float:right; } #Top {color:;height:80px; width:50%; float:LEFT; box-shadow:1px 1px 4px 3px #eee; border:2px solid #ddd; padding-top:3px; padding-bottom:3px; margin-top:15px; margin-bottom:15px; } #Top1 {color:#7BAEA7;height:80px; width:50%; float:RIGHT; box-shadow:1px 1px 4px 3px #eee; border:2px solid #ddd; padding-top:3px; padding-bottom:3px; margin-top:15px; margin-bottom:15px; } .OnePost {direction: rtl; } .OnePost img {max-width:500px; -webkit-transition:1s; -moz-transition:1s; -o-transition:1s; } .TopPost {padding:5px; background:#3b8ecd; border:2px solid #FFF;border-radius:1em 1em 0em 0em; } .TopPost1 {padding:11px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 0em 0em; margin:5 ; text-shadow:1px 1px 4px #666666;} .TopPost2 {padding:5px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 4em 4em; margin:5 ; } .TopPost3 {float: left; padding:25px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 4em 4em; margin:5 ; text-shadow:1px 1px 4px #666666;background-image:url(http://s8.picofile.com/file/8319401342/bg29.png);} .TopPost8 {padding:5px; background:#fff; border:.5px solid #999999;border-radius:4em 4em 4em 4em; margin:5 ; text-shadow:1px 1px 4px #666666;} .POSTB {padding:5px; box-shadow:1px 1px 1px 3px #eee; border:2px solid #ddd;margin:3.75px;background:#fff; text-shadow:1px 1px 5px #999999;} .BotPost {font-size:10px; background: #eee; box-shadow:1px 1px px 3px #eee; border:1px solid #ddd; direction: rtl; padding:5px; border-radius:0em 0em 0em 0em ; margin:1px; text-shadow:1px 1px 4px #999999;} .TitleHeaderPost {color:#fff; direction: rtl; text-align:center; font-size:13px; text-shadow:2px 1px 5px #000; } .PostTextBody {direction: rtl; padding:5px; font-size:12px; color:#333333; text-align:justify; line-height: 150%;text-shadow:1px 1px 4px #ededed; } .PermFooterPost {color:#777;} .PermFooterPost a {color:#777;} .PermFooterPost a:hover {color:#7BAEA7;} .PostSep {height:10px; } #SideLCol {width:25%; float: left; font-size:11px; margin-bottom:10px;border-radius:.25em .25em .25em .25em ;} #SideLCol .Box {direction: rtl; padding:4px; border:2px solid #ddd; border-radius:.25em .25em .25em .25em ;} .Box img {max-width:165px; margin-bottom:2px; border-radius:.25em .25em .25em .25em ;} #SideLCol a {color:#777;} #SideLCol a:hover { background:#F65D6F; border:3px solid #fff; color:#fff;border-radius:0.5em 0.5em 0.5em 0.5em;} #SideLCol .Sep {height:10px;border-radius:.25em .25em .25em .25em ;} #SideLCol .Title {max-width:1800px; margin-bottom:2px; border-radius:3em 3em 3em 3em ; font-size:11px; background-image:url(http://s8.picofile.com/file/8330459542/bg1.jpg); color:#fff; padding:5px; text-shadow:2px 1px 5px #257b86; } #SideLCol .Title1 {max-width:1800px; margin-bottom:2px; border-radius:3em 3em 3em 3em ; font-size:11px; background-image:url(http://s8.picofile.com/file/8330459568/bf2.jpg); color:#fff; padding:5px; text-shadow:2px 1px 5px #257b86; } <style> * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body { background-color: #555; } .pagination { list-style: none; display: inline-block; padding: 0; margin-top: 10px; } .pagination li { display: inline; text-align: center; } .pagination a { float: left; display: block; font-size: 14px; text-decoration: none; padding: 5px 12px; color: #fff; margin-left: -1px; border: 1px solid transparent; line-height: 1.5; } .pagination a.active { cursor: default; } .pagination a:active { outline: none; } .modal-1 li:first-child a { -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px; border-radius: 6px 0 0 6px; } .modal-1 li:last-child a { -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0; border-radius: 0 6px 6px 0; } .modal-1 a { border-color: #ddd; color: #4285F4; background: #fff; } .modal-1 a:hover { background: #eee; } .modal-1 a.active, .modal-1 a:active { border-color: #4285F4; background: #4285F4; color: #fff; } </style> </style> <style> body{font-family: yekan;} </style> <script src="http://cafe-webniaz.ir/abzar/webfont/yekan.js"></script> <!--کد نظرات بلاگفا--> <script type="text/javascript" language="javascript"> <!-- function GetBC(lngPostid) { var intTimeZone="12600", strBlogId="real-shadmehr", intCount=-1, strResult=""; try { for (i=0;i<BlogComments.length;i+=2) { if (BlogComments[i]==lngPostid) intCount=BlogComments[i+1] ; } } catch(e) {} if (intCount == -1) strResult="✉"; if (intCount == 0) strResult="✉"; if (intCount == 1) strResult="✉"; if (intCount > 1) strResult=intCount + "✉"; var strUrl = "/comments/?blogid=" + strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone; var strResult = "<a href=\"javascript:void(0)\" target=\"_self\" onclick=\"javascript:window.open('"+strUrl+"','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,width=500px,height=500px')\" >"+strResult+"</a>" ; document.write(strResult); } function OpenLD() { window.open('/links','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px'); return true; } // --> </script> <!--کد نظرات بلاگفا--> </head> <body> <center> <div id="Granny"> <div id="Granny"> <div id="HeaderCont"> </div> <div id="HeaderInn"></div> <style> .TAB {width:97%;padding:0.5%;margin:1%;height:212px;background:#fff;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;} /* تعویض عکس زمینه */ .TAB {background:#fff url(https://cdn.dribbble.com/users/548267/screenshots/4533399/landscape-study.jpg) no-repeat center;} </style> <div class="TAB"> </div> </div> <!-- ==================== ستون اصلی ==================== --> <div id="ASLI"> <BLOGFA> <div class="OnePost"> <a name="<-PostId->"></a> <div class="TopPost"> </div> <div class="PostB"> <-PostTitle-><div class="PostTextBody"><-PostContent-></div> <BlogPostTagsBlock><br>هشتگ: <BlogPostTags separator=", "><a href="<-TagLink->"><-TagName-></a></BlogPostTags></BlogPostTagsBlock> </div> <div class="BotPost"> <div class="PermFooterPost"> <BlogComment> <script language="javascript" type="text/javascript">GetBC("<-PostId->");</script> </BlogComment> | <-PostAuthor-> | <-PostDate-> | <-PostTime-> | <BlogExtendedPost><a href="<-PostLink->"> ادامه رو ببین </a> </BlogExtendedPost> </div> </div> </div> <div class="PostSep"></div> </BLOGFA> <!-- کد صفحه بندی صفحات ---> <ul class="pagination modal-1"> <li><a href="<-BlogPreviousPageLink->" class="prev" target="_parent" >«</a></li> <li><A href="ادرس وبت?p=1" target="_parent" >1</A></li> <li><A href="ادرس وبت ?p=2" target="_parent">2</A></li> <li><A href="ادرس وبت author-نام کاربری وبت .aspx?p=11" target="_parent" >11</A></li> <li><a href="<-BlogNextPageLink->" class="next" target="_parent">»</a></li> </ul> <!-- کد صفحه بندی صفحات بلاگفا ---> </div> <!-- =================== منوی کناری =================== --> <div id="SideLCol"> <div class="Title1"> <span data-balloon=" ! !" data-balloon-pos="right"data-balloon-length ="large">🌟 چرت و پرت </span></div> <div class="Box"> https://www.blogfa.com/help/Show.aspx?id=template </div><div class="Sep"></div> </div> </div></div> </center> </body> </html>
_MILAD_ اینو که میبینید کد یه قالبه ! ساده برای بلاگفاست
که ایشون اکالیپتوس رفتن وارد یه تست کد انلاین کردن و دیدن چه شکلیه قالب !
خب بخوام بیشتر توضیح بدم این میشه که :
خب این قالبی که میبینید
هر قالبی کلا <html>
<head>
. body رو داره !
خب وقتی هم میخوان پایان اینارو مشخص کنند یه / میزنن اخرش
بین <head>
</head>
استایل میدن و
اونجایی که <body > هست اون استایل رو یجوری فراخوانی میکنند
خب تو قالب بالا میبینیند استایل هارو من معرفی مکیکنم
مثلا میگم برید اونجا تو استایل ها کد رو با توضیحات میذارم هومم اینجوری بهتره