loading...
 

شاپ کیپر

شاپ کیپر

  1. شاپ کیپر
  2. HTML-XHTML
با سلام
دوستان محترم همونطوری که قبلا به بعضی از دوستان قول دادم و از عنوان مشخصه در این تاپیک آموزش html-xhtml که بیشتر برای آماده سازی جهت طراحی وب سایت طبق استانداردها رو دارم که با یاری همکاران برای اوایل سال آینده (94) آموزشی تصویری در کنار آموزش مکتوب حاضر میشه که دقیقا با زمانی مصادف میشه که ما آموزشهای لازم جهت طراحی سایت رو در اینجا تکمیل کرده باشیم.
اما مشخصا باید آموزش ها با زبان ساده بیان بشه و همچنین قدم به قدم پیش بریم
قبل از آموزش و یادگیری کدها باید مفاهیمی که از اون مطالب باید درک بشه الزاما گفته بشه و همچنین این آموزش یک مزیت خیلی بزرگ البته از نظر شخصی خودم داره روی زبان انگلیسی و مخفف عبارتها بصورت جدی و مکمل کار میشه.
اما چندتا نکته در مورد تاپیک :
-ما هر شب رو یک بخش از آموزش میزاریم
-در بین آموزشهای هر بخش دوستان میتونن سوالاتشون رو بپرسن و وقتی که زمان رسیدن بخش بعد رسید دوستان باید لطف کنند سوالاتشون رو پاک کنند چون در این بین پاسخها کاملا داده میشن
-دوستانی که میخوان روی پروژه های کدنویسیشون که میخوان کد بشن آموزش ببین آموزش اختصاصیش در این تاپیک نمیگنجه و فقط روی یک پروژه طراحی کدنویسی تمرکز میشه نه مال هر کدوم از کاربران عزیز و آموزش بصورت تخصصی رو چندین قالب واسه کدنویسی آموزش چت و زنده میخواد که هزینه داره و در اینجا نمیگنجه.
-دوستان تا قبل از شروع شدن آموزشها که از فردا شب شروع میشه مواردی که نیازه بگن رو بگید تا مدنظر باشه و بعدش فردا شب تا ساعت 21 پستهاشون رو حذف کنند دوباره
اما باز هم یه توضیح میدم در مورد سوالات کاربرها اگر سوالی داشتین تا روز بعد قبل از ساعت 21 میتونن در تاپیک بگن هم خودم میتونم پاسخ بدم و هم همکاران عزیز و بعد هم لطفا راس ساعت 21 پست هاتون رو پاک کنید.

پیشاپیش تشکر از همه همکارانی که همکاری میکنند و با پیشنهادتشون فضای انجمن رو یه طراوت میدن.
مواردی که نیازه بگید که در پست اصلی بگم یا اصلاح کنم

دوستان 28 بهمن 1393 ساعت 20 یا نهایتا 24 اولین آموزش قرار داده شده و هر شب بصورت منظم به همین رواله

لطفا دوستان پستها رو پاک کنید تا آموزش رو ادامه بدم
درباره HTML-XHTML ,
زینب بازدید : 1 شنبه 28 دي 1398 زمان : ۱۰:۴۵ نظرات (0)
چگونه منبع HTML را ببینیم?

آیا شما تا حالا صفحه ای را دیده اید که از دیدن آن شگفت زده شده با شید وبگویید چگونه این کار را انجام داده اند؟
برای پیدا کردن آن بسادگی بروی گزینه view روی نوار ابزار کلیک کنید وگزینه source یا page source را انتخاب کنید.آن یک پنجره ای را باز خواهد کرد که به شما HTML واقعی آن صفحه را نشان خواهد داد.
برچسب های قالب بندی متن

برچسب ها توضیحات <b> متن را برجسته معرفی می کند <big> متن را بزرگ معرفی می کند <em> متن را مورب معرفی می کند <i> متن را مورب معرفی می کند <small> متن را کوچک معرفی می کند <strong> متن را برجسته معرفی می کند <sub> متن را زیرنویس دار معرفی می کند <sup> متن را بالانویس دار معرفی می کند <ins> قطعه متنی را که در متن اصلی جا داده شده معرفی می کند <del> قطعه متنی را که از متن اصلی حذف شده نشان می دهد <s> توصیه نمی گردد. به جای آن از <del> استفاده کنید. <strike> توصیه نمی گردد. به جای آن از <del> استفاده کنید. <u> توصیه نمی گردد.به جای آن از خواص Style استفاده کنید برچسب های خروجی کامپیوتر

برچسب ها توضیحات <code> متن کد کامپیوتری را معرفی می کند <kbd> متن صفحه کلید را معرفی می کند <samp> متن نمونه مثال های کامپیوتری را معرفی می کند <tt> متن را بصورت ماشین نویس معرفی می کند <var> یک مقدار را معرفی می کند <pre> متن از پیش قالب بندی شده را معرفی می کند <listing> توصیه نمی گردد. به جای آن از <pre> استفاده کنید <plaintext> توصیه نمی گردد. به جای آن از <pre> استفاده کنید <xmp> توصیه نمی گردد. به جای آن از <pre> استفاده کنید برچسب های نقل قول ، کتیشن و توضیحات

برچسب ها توضیحات <abbr> یک کلمه مخفف را معرفی می کند <acronym> یک سرنام را معرفی می کند <address> یک عنصر آدرس را معرفی می کند <bdo> جهت متن را معرفی می کند <blockquote> یک کتیشن بلند را معرفی می کند <q> یک کتیشن کوتاه را معرفی می کند <cite> نقل قول را معرفی می کند <dfn> یک عبارت توضیحی را معرفی می کند
منبع : پورتال جامع فارسی زبانان
شارژ آنلاين با تخفيف : نسيم شارژ : شارژ ايرانسل و همراه اول با تخفيف
شارژ بر خط ايرانسل : ю يا
پورتال جامع فارسی زبانان - شارژ آنلاين ايرانسل
درباره HTML-XHTML ,
زینب بازدید : 1 جمعه 27 دي 1398 زمان : ۱۵:۵۰ نظرات (0)
سلام دوستان
کسی میتونه یه کمکی بهم بکنه و اسلاید شوز این سایت رو کدش رو بهم بده ؟
BoB Releases
من سرسش رو پیدا کردم ولی نمیدونم چرا پشت هم نشون نمیده . فایل سیستمی هم نداره چون من کل سرس سایت رو یه جای دیگه کپی کردم درست کار میکرد اسلاید شوز
کد: <!-- Featured Content Slider Started --> <script type=text/javascript> function startGallery() { var myGallery = new gallery($(myGallery), { timed: true, delay: 6000, slideInfoZoneOpacity: 0.8, showCarousel: false, slideInfoZoneSlide: false }); } window.addEvent(domready, startGallery); </script> <div class=fullbox_excerpt> <div class=fullbox_content> <div class=smooth_gallery> <div id=myGallery> <div class=imageElement> <h3>BoB Movies</h3> <p>Re-Encoded From Blu-Ray Source to Small Size 300MB , 480p High Quality Mkv Movies. Click Here....</p> <a class=open href=http://bobsrelease.blogspot.com title=BoB Movies></a> <img alt= class=full src=http://lulzimg.com/i22/48bffa.jpg/> </div> <div class=imageElement> <h3>The Fades</h3> <p>Paul is a young man who is haunted by apocalyptic dreams that neither his therapist or best friend, Mac, can provide answers for. Worse still, Paul is starting to see the Fades – the spirits of the dead – all around him. Theyre everywhere but they cant be seen, smelt, heard or touched by living beings. But now an embittered and vengeful Fade has found a way to break the barrier between the dead and the living and Paul,</p> <a class=open href=http://www.tvrage.com/The_Fades title=The Fades></a> <img alt= class=full src=http://i26.lulzimg.com/14ff20.jpg/> </div> <div class=imageElement> <h3>Ringer</h3> <p>Sarah Michelle Gellar stars as a woman who, after witnessing a murder, goes on the run, hiding out by assuming the life of her wealthy identical twin sister – only to learn that her sisters seemingly idyllic life is just as complicated and dangerous as the one shes trying to leave behind. Bridget is six months sober and starting to turn her life around when she is the sole witness to a professional hit. Despite the assurances of her FBI protector, Agent Victor Machado, Bridget knows her life is on the line. </p> <a class=open href=http://tvrage.com/Ringer title=Ringer></a> <img alt= class=full src=http://i25.lulzimg.com/1cf7eb.jpg/> </div> <div class=imageElement> <h3>The Secret Circle</h3> <p>"The Secret Circle" centers on Cassie Blake, a normal teenage girl whos mother dies in a fire. She moves in with her grandmother Jane to Chance Harbor, Washington. When she arrives, Cassie realizes that everyone knows more about her than she knows herself. When she gets to school, she meets a wide variety of friends including Diana, boyfriend Adam, a Loner named Nick and mean-girl Faye and her sidekick Melissa. Strange and frightening things begin to happen in the little town . </p> <a class=open href=http://tvrage.com/The_Secret_Circle title=The Secret Circle></a> <img alt= class=full src=http://i25.lulzimg.com/395f25.jpg/> </div> <div class=imageElement> <h3>Against the Wall</h3> <p>"Against the Wall" follows the trials and tribulations of Abby Kowalski (Rachael Carpani), a single Chicago police officer who finally scores her dream job as a detective; but it turns out a nightmare for her close-knit family of cops. As the newest hire in the departments Internal Affairs division, Abby suddenly finds herself at odds with her fellow officers, including her father and three brothers. She must now figure out how she can pursue her dream of being a detective while keeping her family intact. </p> <a class=open href=http://old.tvrage.com/Against_the_Wall title=Against the Wall></a> <img alt= class=full src=http://lulzimg.com/i24/875bd5.jpg/> </div> <div class=imageElement> <h3>The New Girl</h3> <p>Jessica Day is an offbeat and adorable girl in her late 20s who, after a bad breakup, moves in with three single guys. Goofy, positive, vulnerable and honest to a fault, Jess has faith in people, even when she shouldn’t. Although she’s dorky and awkward, she’s comfortable in her own skin. More prone to friendships with women, she’s not used to hanging with the boys – especially at home....Click Here For More Info</p> <a class=open href=http://tvrage.com/The_New_Girl title=The New Girl></a> <img alt= class=full src=http://lulzimg.com/i23/38a8f4.jpg/> </div> <div class=imageElement> <h3>Charlies Angels (2011)</h3> <p>Everyone deserves a second chance -- even a thief, a street racer and a cop who got in a little too deep. After all, the three women who solve cases for their elusive boss, Charlie Townsend, are no saints. Theyre angels... Charlies Angels. Theres Abby, a Park Avenue princess who became a world-class thief. Then theres Kate, a Miami cop who fell from grace, losing both her career and her fiancé. Finally theres Gloria, a disgraced army lieutenant who has a way with explosives. ....Click Here For More Info </p> <a class=open href=http://tvrage.com/Charlies_Angels title=Charlies Angels (2011)></a> <img alt= class=full src=http://lulzimg.com/i23/834bc7.jpg/> </div> <div class=imageElement> <h3>BoB Movies</h3> <p>Re-Encoded From Blu-Ray Source to Small Size 300MB , 480p High Quality Mkv Movies. Click Here....</p> <a class=open href=http://bobsrelease.blogspot.com title=BoB Movies></a> <img alt= class=full src=http://lulzimg.com/i22/f953b2.jpg/> </div> <div class=imageElement> <h3>Pan Am</h3> <p>Passion, jealousy and espionage... They do it all - and they do it at 30,000 feet. The style of the 1960s, the energy and excitement of the Jet Age and a drama full of ***y entanglements deliciously mesh in this thrilling and highly-original new series. In this modern world, air travel represents the height of luxury and Pan Am is the biggest name in the business. The planes are glamorous, the pilots are rock stars and the stewardesses are the most desirable women in the world....Click Here For More Info. </p> <a class=open href=http://tvrage.com/Pan_Am title=Pan Am></a> <img alt= class=full src=http://lulzimg.com/i23/a610c2.jpg/> </div> <div class=imageElement> <h3>Terra Nova</h3> <p>TERRA NOVA follows an ordinary family embarking on an incredible journey back in time to prehistoric Earth as a small part of a massive experiment to save the human race. In the year 2149 the world is dying. The planet is overdeveloped, overcrowded and overpolluted. With the majority of plant and animal life extinct, devotion to science has brought mankind to the brink of destruction, but has also provided its only hope for salvation...Click Here For More Info. </p> <a class=open href=http://tvrage.com/Terra_Nova title=Terra Nova></a> <img alt= class=full src=http://lulzimg.com/i23/1f4ada.jpg/> </div> <div class=imageElement> <h3>Once Upon a Time (2011)</h3> <p>Emma Swan knows how to take care of herself. Shes a 28-year-old bail bonds collector whos been on her own ever since she was abandoned as a baby. But when the son she gave up years ago finds her, everything will change. Henry is 10 years old now and in desperate need of Emmas help. Henry believes that Emma actually comes from an alternate world ... and is Prince Charming and Snow Whites missing daughter. According to his book of fairytales....Click Here For More Info </p> <a class=open href=http://tvrage.com/Once_Upon_a_Time title=Once Upon a Time (2011)></a> <img alt= class=full src=http://lulzimg.com/i23/1574c1.jpg/> </div> <div class=imageElement> <h3>I Hate My Teenage Daughter</h3> <p>Annie and Nikki are former high school outcasts whose pasts inform their current parenting styles. Annie, who was raised in an ultra-strict, über-religious household where she had little-to-no freedom, pretty much allows her daughter, Sophie, to do whatever she wants. Nikki, once an unpopular, overweight social pariah, has reinvented herself as a pretty Southern belle whose top priority is providing her daughter, Mackenzie, with the childhood she never had....Click Here For More Info </p> <a class=open href=http://tvrage.com/I_Hate_My_Teenage_Daughter title=I Hate My Teenage Daughter></a> <img alt= class=full src=http://lulzimg.com/i23/f16459.jpg/> </div> <div class=imageElement> <h3>Grimm</h3> <p>Remember the fairy tales your parents used to tell you before bedtime? Those werent stories -- they were warnings. Nick Burkhardt thought he prepared himself for the realities of working as a homicide detective until he started seeing things he couldnt quite explain. When his ailing Aunt Marie arrives, Nicks life turns upside down when she reveals they are descendants of an elite group of hunters, also known as "Grimms," who fight to keep the balance of humanity safe from the supernatural creatures of the world...Click Here For More Info </p> <a class=open href=http://tvrage.com/Grimm title=Grimm></a> <img alt= class=full src=http://lulzimg.com/i23/b5c5de.jpg/> </div> </div></div></div></div> <!-- Featured Content Slider End -->
درباره HTML-XHTML ,
زینب بازدید : 3 چهارشنبه 25 دي 1398 زمان : ۰۲:۱۵ نظرات (0)
با عرض سلام و ادب


برای سیستم لینکدونی (لینک باکس) پرشین اسکریپت یک قالب آماده شده که در ادامه می تونید دموی زنده اش رو ببینید.


پیش نمایش زنده:


لینکدونی گروه چیا

تصویر صفحه اصلی:




تصویر بخش لینک باکس:




تصویر برگه ارسال لینک:




دانلود سورس اسکریپت:


http://forum.persianscript.ir/topic/...8%AE%D9%87-21/


دانلود قالب چیا برای اسکریپت لینکدونی پرشین:


http://up.persianscript.ir/uploads2/7430-chiaa.zip


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


امیدوارم برای دوستان مفید باشه.
درباره HTML-XHTML ,
زینب بازدید : 2 چهارشنبه 18 دي 1398 زمان : ۰۴:۱۰ نظرات (0)
سلام دوستان
خواهش میکنم یکی جواب منو بده
یه چند تا سوال دارم هر کدوم رو بلد بودید بگید ممنون میشم.

+dtd چیه؟

+ کاربرد <footer> ,<header> , <wbr> ,<rp> , <rt> , <ruby> , <tt> , <time> , <var> , <label>
, <datalist> , <keygen> , <output> , <canvas> , <figure> , <figcaption> , <nav>
<menu> , <command> ,

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

+ لازمه برای شروع آموزش css اچ تی ام ال 5 رو فول باشم؟

+کی اینارو به کار میبریم؟

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
اصلا اینا چین؟
به چه کاری میان؟
درباره HTML-XHTML ,
زینب بازدید : 32 يكشنبه 03 آذر 1398 زمان : ۰۸:۲۰ نظرات (0)
چگونه از این کدها استفاده کنم ؟

برای نمایش هر یک از اشکال زیر به راحتی می توانید از کدهای زیر در قسمت <head> قالب و یا کدهای HTML سایت خود در کنار دیگر کدهای CSS سایت خود استفاده کنید و سپس در مکانی که دوست دارید آن شکل در سایت شما نمایش داده شود کافی است از کد زیر استفاده کنید.
1 <div id="name"></div>





توجه داشته باشید که بجای عبارت name در کد بالا باید از نام هر یک از اشکال زیر در کد HTML سایت خود استفاده کنید.

نمایش مربع و مستطیل با استفاده از CSS

ساده ترین شکلی که با استفاده از کدهای CSS می توانید تولید کنید شکل یک مربع و یا مستطیل در صفحات سایت شما است. در زیر کدهای CSS مربوط به ساخت یک چهار ضلعی را در صفحات وب مشاهده می*کنید.
1
2
3
4
5 #square {
width: 100px;
height: 100px;
background: #555;
}






تنها کافی است عرض ( width ) و طول ( height ) چهار ضلعی که می خواهید نمایش پیدا کند را در کد بالا وارد کنید.

نمایش دایره با استفاده از CSS

دومین شکلی که می خواهیم با استفاده از کدهای CSS در صفحات وب رسم کنیم شکل دایره است که در طراحی های شما می تواند یکی از پرکاربردترین اشکال باشد.
1
2
3
4
5
6
7
8
9 #circle {
width: 100px;
height: 100px;
background: #555;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}



توجه داشته باشید که کدهایی که در ابتدای آن ها از moz استفاده شده است برای نمایش این شکل در مرورگر فایرفاکس و کدهایی که در ابتدای آن ها از webkit استفاده شده است در حقیقت برای نمایش صحیح شکل در مرورگرهایی مانند گوگل کروم و … و کدی که در ابتدای آن o برای نمایش صحیح کد ها در مروگر اپرا ( Opera ) نوشته شده اند.

نمایش بیضی با استفاده از CSS

وقتی می خواهیم با استفاده از CSS در صفحات سایت خود یک بیضی رسم کنیم تمامی مراحل مانند زمانی است که می خواستیم شکل دایره را رسم کنیم با این تفاوت که عرض و یا طول شکل شما تغییر می کند و مقدار انحنای خط دور نیز باید تغییر بکند مانند کدهای زیر که مشاهده می کنید.
1
2
3
4
5
6
7
8 #oval {
width: 200px;
height: 100px;
background: #555;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}






با تغییر اعداد انتساب داده شده در کد بالا می توانید بهتر با رسم شکل بیضی در طراحی های وب آشنا شوید.

نمایش شکل مثلث با استفاده از CSS

در هنگام رسم یک مثلث با CSS می توانیم مثلث نمایش داده شده را مانند کدهای زیر به جهات مختلفی چرخش دهیم.
1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #555;
}



مثلث به سمت بالا




1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #555;
}


مثلث به سمت پایین



1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #555;
border-bottom: 50px solid transparent;
}




مثلث به سمت راست


1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #555;
border-bottom: 50px solid transparent;
}




مثلث به سمت چپ


همانطور که می بینید نمایش یک مثلث توسط کدهای CSS بسیار آسان و البته جذاب است.

نمایش شکل متوازی الاضلاع با استفاده از CSS

شکل متوازی الاضلاع نیز به ما کمک می کند در این آموزش شما را با متد جدید Skew آشنا کنیم که از آن برای تعیین انحنای درخواستی خود در رسم اشکال استفاده کنید مانند کد زیر
1
2
3
4
5
6
7
8 #parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #666;
}




باز هم پیشنهاد می کنم برای اینکه بهتر با متد Skew آشنا شوید مقدار درجه ورودی متد Skew را در کدهای بالا تغییر دهید تا متوجه شوید که چگونه انحنا را می توانیم بر اساس محور x تعیین کنیم.

نمایش ذوزنقه با استفاده از CSS

باز هم برای نمایش دادن شکل بعدی یعنی ذوزنقه مانند شکل مثلث از تنظیم خصوصیات مربوط به خط دور اشکال به صورت زیر استفاده می کنیم.
1
2
3
4
5
6
7 #trapezoid {
border-bottom: 100px solid #666;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}






رسم شکل ستاره با استفاده از CSS

با استفاده از کدهای زیر می توانیم یک ستاره ۶ پر را رسم کنیم.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 #starsix {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #666;
position: relative;
}
#starsix:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #666;
position: absolute;
content: "";
top: 30px;
left: -50px;
}






همانطور که می بینید با استفاده از after می توانیم تعیین کنیم که بعد از یک شی در صفحه وب ما چه چیزی می خواهیم نمایش داده شود و ما در کدهای بالا از این خاصیت برای رسم یک مثلث دیگر برعکس مثلث قبلی استفاده کرده ایم و با استفاده از position : relative توانسته ایم که این دو شکل را بر روی همدیگر نمایش دهیم که در نهایت شکل ستاره ۶ پر را می توانید در مرورگر وب هود مشاده کنید.

نمایش پنج ضلعی در صفحات وب با استفاده از CSS

حال برای نمایش یک پنج ضلعی معمولی در صفحات وب خود با استفاده از کدهای CSS زیر این کار را انجام می دهیم.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 #pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #555 transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #555;
}






در رسم این شکل نیز از before در کدهای CSS استفاده کرده ایم که دقیقاً برعکس after است.

نمایش یک قلب در صفحات وب با استفاده از CSS

یکی از دیگر اشکالی که ممکن است به آن در هنگام طراحی صفحات وب نیاز داشته باشید شکل قلب است که می توانید با رنگ های مختلف و تنها با نوشتن چند خط کد CSS در صفحات وب خود از آن استفاده کنید
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 #heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #666;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
} #heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}






البته برای تغییر اندازه نمایش این قلب می توانید با تغییر مقادیر در کدهای CSS بالا به راحتی شکل ظاهری و اندازه نمایش داده شده این قلب را تغییر دهید

نمایش حباب های گفتگو با استفاده از CSS

یکی دیگر از اشکالی که در بسیاری از سایت ها از آن در صفحات وب استفاده می شود شکل حباب گفتگو است که می توانید برای رسم این شکل نیز در صفحات خود از کد زیر استفاده کنید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 #talkbubble {
width: 120px;
height: 80px;
background: #666;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #666;
border-bottom: 13px solid transparent;
}
درباره HTML-XHTML ,
زینب بازدید : 9 جمعه 17 آبان 1398 زمان : ۱۵:۵۰ نظرات (0)
سلام . خدمت تمامی دوستان گرامی و عزیز انجمن ...

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


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

خوب حالا حرف اصلی


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

قصد دارم حالا یا یک سایتی یا اصلا توی همین انجمن آره اصلا توی خود همین انجمن چه کاری بهتر از خدمت به هم نوع خودش؟؟؟

قالب بنده میزنم و تمامی قالب های اختصاصی خود بنده رو

رایگان

خدمتتون تقدیم میکنم .. خوب میتونید کپی رایتش رو رعایت کنید میتونید نکنید چون رایگان میزارم و بنده هیچ دخالتی نمیکنم .....

یه مقدار سرم خلوت تر بشه شروع به زدن قالب های Html,css jQuery , Javascript میکنم و براتون رایگان میزارم استفاده کنید به سیستم دیگه ای تبدیل کنید چون واقعا امروز با بعضی سایتایی روبه رو شدم که قالب ها یک شکل و خوب


بنده هم با خدایی خودم دِینی داشتم میخوام اینطوری ادای دِین کنم

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

حدودا 25 تا قالب میزنم حالا بر اساس نیازتون میتونید توی پست بهم بگید چه قالبی نیاز دارید طبق رای بیشتر به اون زمینه قالب اونو براتون طراحی میکنم رایگان میزارم برای استفاده

خوب برای طراحی از همین الان میتونید بگید بنده نظراتو ببینم و براتون شروع کنم به زدن کد و رایگان بزارم خدمتتونم ... :x
درباره HTML-XHTML ,
زینب بازدید : 9 چهارشنبه 15 آبان 1398 زمان : ۲۳:۲۰ نظرات (0)
HTML سرواژه‌ٔ HyperText Markup Language و به معنای «زبان نشانه‌گذاری اَبَرمتن» است (که البته برخی آن را «زبان علامت‌گذاری فرامتن» ترجمه کرده‌اند).

اچ‌تی‌ام‌ال، سنگِ‌بنای وب است؛ یک زبان برای نشانه گذاری ابر متن که برای تدوین قالب و طراحی صفحه‌های وب به کار برده می‌شود. دستورالعملهای این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، به وسیلهٔ آنها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وِب، توصیف می‌شود.

هر یک از برچسبهای اچ‌تی‌ام‌ال، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند؛ مثلاً برچسبهایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند (Link) به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پرونده مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نامگذاری شده و محتویات آن از برچسبهای اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسبهای اچ‌تی‌ام‌ال هستند، تک‌تک آنها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال یک زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساختمندکردن اطلاعات و تفکیک اجزای منطقی یک نوشتار — نظیر عناوین، تصاویر، فهرستها، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ‌تی‌ام‌ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوریهای دیگری چون شیوه‌نامه‌های آبشاری است.

گفتنی است اچ‌تی‌ام‌ال شکلی از زبان دیگری بنام اس.جی.ام.ال است و «کنسرسیوم وب جهانگستر» آن را به عنوان استانداردی برای نشانه‌گذاری مستندات ابرمتنی برای عرضه در وب، تدوین کرده است.

درhtml سه نوع تگ وجود دارد: 1-تگ های یکه. مانند <HR>‎ که خط رسم می کند. 2- تگ هایی که شروع و پایان دارند. مثل: <head></head>‎ 3- تگ هایی که دارای ویژگی می باشند. مثل:<font face="arial" size="12">
منبع:ویکی پدیا
درباره HTML-XHTML ,
زینب بازدید : 10 دوشنبه 06 آبان 1398 زمان : ۰۹:۱۰ نظرات (0)
این آموزش و آموزش هایی که از این پس تولید خواهد شد حاصل بازبینی آموزش های قبلی و رفع اشکالات دوستان است و همچنین با بررسی نیاز های بازار کار، هم اکنون این اطمینان را به شما میدهیم با توجه به تجارب کسب شده از دوره های پیشین این دوره آموزشی که رایگان تقدیمان خواهد شد بهترین مجموعه آموزشی این زمینه خواهد بود و پس از مشاهده کامل آن شما در این زمینه خبره خواهید شد.


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

در این مجموعه چه خواهیم آموخت؟
همانطور که از عنوان مجموعه مشخص است در این مجموعه آموزشی قصد داریم بطور کامل جدیدترین ورژن زبان های HTML و CSS را به صورت عملی و کاربردی به شما آموزش دهیم تا به کمک این زبان ها بتوانید چهارچوب اصلی سایت خود را طراحی کنید. سپس در مجموعه ها و گام های بعدی به مباحث بعدی و برنامه نویسی خواهیم پرداخت. دقت کنید برنامه نویسی و طراحی متفاوت هستند که ما در اینجا از مبانی طراحی شروع کرده و به تدریج به مراحل پیشرفته تر می رسیم.
چگونه یک سایت کامل ایجاد می شود؟
هر وب سایتی که در اینترنت مشاهده می کنید می تواند یا پویا باشد و یا ایستا که اکثرا امروزه بصورت پویا (Dynamic) می باشد یعنی با کاربران تعامل دارد. وب سایت ها شامل دو بخش می باشند، مرحله اول: ظاهر سایت یا Front-end که به کاربران نمایش داده می شود، تک تک صفحاتی که شما از یک وب سایت مشاهده میکنید همین قسمت می باشد که دیزاین یا طراحی آن برعهده یک طراح صفحات وب است. اگر بخواهیم بطور استاندارد مراحل تولید صفحات وب را پیش برویم در اولین گام یک گرافیست که دارای خلاقیت است در نرم افزار های گرافیکی مانند فتوشاپ تمامی صفحات (مانند: صفحه اصلی، تیپ صفحات فرعی مثل تماس با ما، درباره ما، صفحه نمایش مطاب و ثبت نظرات، صفحه پنل کاربران، پنل مدیریت و..) را طراحی میکند و در قالب عکس آنها را به کد نویس می دهد که این عکس های طراحی شده را مکاپ می گویند، در واقع تک تک صفحات سایت در قالب عکس و دمو در اختیار مدیر پروژه یا مشتری قرار میگیرد تا درصورت تایید به کد نویس داده شود و کدنویسی که همان تبدیل عکس ها به صفحات وب است انجام شود. بطور کلی می توان گفت نقشه سایت در این مرحله مشخص و پیاده سازی میشود که این سایت قرار است چه کاری انجام دهد و چه امکاناتی داشته باشد. در مرحله کدنویسی طراح وب می تواند از زبان های HTML5، CSS3، جاوااسکریپت، فریم ورک هایی مانند بوت استرپ، جی کوئری و.. استفاده کند تا صفحات ریسپانسیو یا واکنشگرایی را خلق کند که در همه دیوایس ها قابل نمایش باشد. مرحله دوم: پس از اینکه طراحی صفحات سایت انجام شد (همان ظاهر سایت برای تمام صفحات) نوبت آن رسیده است که به این صفحات روح یا همان پویایی را بدهیم تا با کاربران خود تعامل برقرار کنیم چون فقط یک ظاهر تنها کافی نیست، سایت نیاز به امکانات و ارتباط با مخاطب دارد. در این مرحله که به آن برنامه نویسی سایت (برنامه نویسی تحت وب یا برنامه نویس Back-end) گفته می شود، امکان سنجی و پیش بینی می شود که برای این سایت با این امکانات از چه زبانی استفاده شود برای برنامه نویسی بهتر است تا پاسخگوی دائم بازدیدکنندگان باشد ضمن اینکه امنیت آن تامین شود. همچنین سروری که قرار است پس از برنامه نویسی به آن مراجعه کنیم مشخص می شود بعنوان مثال سرور ما قابلیت پشتیبانی از پایتون را خواهد داشت یا پی اچ پی و ایا چنین سروری را می توانیم با هزینه برآورد شده تهیه کنیم یا خیر که سایر جزئیات در فیلم آموزشی همراه این پی دی اف گفته می شود که از سایت میهن لرن قابل دانلود است. ضمنا ایجاد سایت علاوه بر دو بخش گفته شده شامل طراحی بانک اطلاعاتی هم می شود، چونکه می توان گفت بانک اطلاعاتی مربوط به هر دو پخش می باشد دیگر ما انرا بطور خاص در هیچ دسته بندی جای ندادیم و در طول اموزش ها اشاره خواهیم کرد، هر چند که در زمان برنامه نویسی آنرا ایجاد خواهیم کرد یعنی در مجموعه های بعدی.

دانلود قسمت اول
دانلود PDF
درباره HTML-XHTML ,
زینب بازدید : 7 شنبه 27 مهر 1398 زمان : ۱۳:۵۰ نظرات (0)
با سلام
دوستان من یک کد html نوشتم ولی یک مشکلی دارم
میخواهم که زیر هر عکس یک متن بزارم و متن دقیقا زیر و وسط قرار بگیره از اساتید کسی میتونه کمک کنه؟
ممنون میشم
این کد که من نوشتم
چیزی که من میخواهم >> http://up.crackingcore.org/uploads/145714004551131.png
کد: <html><head> <body bgcolor="#E6E6FA"> <title>Test</title> <meta charset="utf-8"> <h1>LeeSin</h1> <table style="line-height:10px"> <tr> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918699911.jpg" alt="LeeSin1" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918715052.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918718173.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918699911.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918715052.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918718173.jpg" alt="lee2" width="208" height="360" ></a></center></td> </tr> </table> <br><br><br> <br><br><br> <td><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918699911.jpg" alt="lee2" width="208" height="360" ></a></center></td> </body> </html>
درباره HTML-XHTML ,
زینب بازدید : 67 سه شنبه 10 ارديبهشت 1398 زمان : ۱۱:۳۵ نظرات (0)
سلام ؛
می خواستم از خدمت دوستان حرفه ای انجمن سوال کنم به چه شکل میشه این دو تا ارور رو رفع کرد ؛
Line 378, Column 209: Element link is missing required attribute property.

…#038;id=2&#038;_wpnonce=12c9942194&#038;ver=4.2 type=text/css media=all />

Attributes for element link:
Global attributes
href
crossorigin
rel
media
hreflang
type
sizes
Also, the title attribute has special semantics on this element. Line 379, Column 168: Element link is missing required attribute property.

…ns/yop-poll-new/css/yop-poll-public.css?ver=4.2 type=text/css media=all />

Attributes for element link:
Global attributes
href
crossorigin
rel
media
hreflang
type
sizes
Also, the title attribute has special semantics on this element. با سپاس
درباره HTML-XHTML ,
زینب بازدید : 32 دوشنبه 09 ارديبهشت 1398 زمان : ۲۲:۰۰ نظرات (0)

تعداد صفحات : 2

موضوعات
لینک دوستان
پیوندهی روزانه
  • آرشیو لینک ها
  • صفحات جداگانه
    آمار سیت
  • کل مطالب : 7
  • کل نظرات : 0
  • افراد آنلین : 5
  • تعداد اعضا : 0
  • بازدید امروز : 1,007
  • باردید دیروز : 1,429
  • بازدید هفته : 2,436
  • بازدید ماه : 12,024
  • بازدید سال : 1,063,486
  • بازدید کلی : 1,286,811