نوشته شده توسط : webtoolsplace

چرا باید سایت بسازیم؟

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

در سایت چه چیزهایی بگذاریم؟

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

چگونه باید سایت بسازیم؟

چگونه سایت بسازیم؟

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

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

دامنه آدرس سایت شما هست که منحصر به فرد است یعنی قبلا کسی نباید آن را گرفته باشد که با پسوندهای متفاوتی مثل .com   .ir   .net  .org  .info  میباشد

پس از خرید و اتصال این دو موقع ساخت سایت می باشد که شما می توانید به برنامه نویسان سایت خود را بسپارید که برای شما از صفر سایت رو متناسب با خواسته شما بالا بیارند و یا از cms های آماده مثل وردپرس و جوملا استفاده کنید که برای استفاده از آن باید فایل آن را در هاست خود نصب کرده و پس از آن با سی ام اس خود که معمولا نحوه ی استفاده از آن ها در وب موجود است سایت خود را ایجاد نمایید.

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



:: بازدید از این مطلب : 37
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه شنبه 10 مرداد 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

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

1- معماری سایت صحیح باشد.

2- سرعت سایتتان باید بالا باشد.

3- هاست سایتتان باید با کیفیت باشد و همیشه در دسترس باشد.

4- کاربر هدف را در سایت خود جذب کنید.

5- کلمات کلیدی مناسب برای سایتتان انتخاب کنید.

6- محتوای جذاب برای کاربران خود بنویسید.

7- در وب سایت خود از ویدئو ها استفاده کنید.

8- از شبکه های اجتماعی در کسب و کار اینترنتی خود استفاده کنید.

9- برای جذب لینک با کیفیت، استراتژی داشته باشید.

10- مشارکت کاربران در سایتتان را برنامه ریزی کنید.

11- عمر دامنه تاثیر زیادی در رتبه سایت شما در گوگل دارد.

12- از کلمه کلیدی در نام دامنه خود استفاده کنید.

13- کلمه کلیدی شما در اولین بخش دامنه باشد.

14- زمان انقضاء دامنه شما طولانی مدت باشد.

15- از کلمات کلیدی در subdomain استفاده کنید.

16- تاریخچه دامنه خود را قبل از ثبت آن حتما بررسی کنید.

17- وضعیت دامنه خود را از حالت مخفی خارج کنید.

18- از دامنه های ملی ir. برای راه اندازی سایتتان استفاده کنید.

19- از کلمه کلیدی سایتتان، در عنوان یا تیتر صفحه استفاده کنید.

20- کلمه کلیدی در ابتدای تیتر هر صفحه باشد.

21- کلمه کلیدی خود را در تگ توضیحات قرار دهید.

22- کلمه کلیدی خود را در تگ H1 هر صفحه به کار ببرید.

23- در محتوا نویسی هر صفحه بر روی کلمه کلیدی آن صفحه تمرکز کنید.

24- تعداد کلمات موجود در محتوای هر صفحه را جدی بگیرید.

25- چگالی کلمات کلیدی خود را در هر صفحه اندازه گیری کنید.

26- محتوای کپی داخل سایتتان قرار ندهید.

27- از تگ rel=canonical در صفحات سایتتان استفاده کنید.

28- به سرعت باز شدن سایتتان در مرورگر Chrome توجه کنید.

29- تصاویر موجود در سایتتان را بهینه کنید.

30- محتوای قدیمی سایتتان را بروز کنید.

31- کلمات کلیدی خود را در 100 کلمه اول به کار ببرید.

32- در محتوای سایتتان از تگ های H2 و H3 استفاده کنید.

33- ترتیب استفاده از کلمات در تیتر و صفحه را رعایت کنید.

چگونه رتبه سایت خود را در گوگل بالا ببریم؟

34- به سایت های با کیفیت لینک بدهید.

35- معمای داخل سایتتان را به وسیله لینک های خروجی حل کنید.

36- محتوا های ارائه شده در سایتتان را ویراستاری کنید.

37- از محتوای کپی برداری شده استفاده نکنید.

38- از میکرودیتا ها استفاده کنید.

39- تعداد لینک های خروجی سایتتان را کنترل کنید.

40- از مالتی مدیا ها در سایتتان استفاده کنید.

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

42- کیفیت لینک های داخلی سایت به مطالب اهمیت زیادی دارند.

43- لینک های غیر فعال را حذف کنید.

44- لینک های همکاری در فروش خود را طراحی و فعال کنید.

45- خطا های HTML سایتتان را رفع کنید.

46- بالا بودن اعتبار کلی سایت در لینک های داخلی سایتتان تاثیر دارد.

49- آدرس صفحات سایتتان نباید طولانی باشد.

50- مسیر صفحات سایتتان باید کوتاه باشد.

51- کاربران تعیین کننده رتبه سایتتان در گوگل هستند.

52- محتوا های سایتتان را دسته بندی موضوعی کنید.

53- مطالب سایتتان را تگ کذاری کنید.

54- کلمه کلیدی در آدرس سایتتان باشد بهتر است.

55- به منابع محتوای تولید شده در سایتتان لینک بدهید.

56- در محتوا های خود از bullet point ها استفاده کنید.

57- اولویت صفحات سایتتان را در نقشه سایت حتما تعیین کنید.

58- سایتتان را کاربر پسند و آسان طراحی کنید.

59- در استفاده از پارک دامین ها احتیاط کنید.

60- داخل سایتتان صفحه تماس با ما داشته باشید.

61- چیدمان محتوا را در هر صفحه رعایت کنید.

62- بروزرسانی کلی سایت را فراموش نکنید.

63- تعداد صفحات پر محتوای سایت بسیار مهم است.

64- نقشه سایتتان را فعال کنید.

65- همیشه در دسترس بودن سایتتان اهمیت بسیار زیادی دارد.

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

67- برای سایتتان SSL معتبر دریافت کنید.

68- داخل سایتتان صفحه قوانین و مقررات سرویس دهی داشته باشید.

69- متاتگ های تکراری را شناسایی



:: بازدید از این مطلب : 37
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه شنبه 10 مرداد 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

در قسمت‌های قبلی با نحوه اضافه کردن متن‌ها و عناوین و در آخر لینک‌ها به صفحات آشنا شدیم. حالا در این بخش قصد داریم تا عکس‌ها را نیز به صفحات خود اضافه کنیم؛ بدین ترتیب وجهه بهتری را از خود نمایش خواهند داد. با ما برای این آموزش همراه شوید.
اضافه کردن عکس:

مرحله اول: برای قرار دادن تصویر در صفحه, در اولین قدم تگ <img> را در ابتدای کد قرار می‌دهیم.

مرحله دوم: در این مرحله ما بعد از کلمه img, باید به نوعی به صفحه بگوییم که عکسمان کجا قرار دارد تا مرورگر بتواند آن را پیدا کرده و نمایش دهد. برای این کار ما به یک اتریبیوت نیازمند هستیم که این کار را برای ما انجام دهد. این اتریبیوت src نام دارد که در واقع حاوی آدرس (url) عکس ما در اینترنت است.

<img src="url"  / >

مرحله سوم: در آخرین مرحله تنها کافیست علامت / را در انتهای تگ img قرار دهیم, تا تصویر ما نمایش داده شود. همانطور که می‌بینید المان عکس بر خلاف المان‌های قبلی که خواندیم نیازی به یک تگ جداگانه برای بسته شدن ندارد. این بدین معناست که ما چیزی به اسم <img/> نداریم. پس همیشه علامت / را در همان تگ ابتدایی قرار می‌دهیم.

به مثال‌های زیر توجه نمایید:

 
نمونه

<p>تصویر شماره 1</p>

<img src="http://zoomit.ir/templates/ja_argo/images/logo4.png" />
نتیجه‌ای که مرورگر نمایش خواهد داد

تصویر شماره 1

 logo4

توجه داشته باشید که برای نمایش تصاویر در اینترنت باید حتما آن‌ها را در جایی آپلود کرده و آدرس کامل و دقیق آن‌ها را به همراه پسوند وارد نمایید.  فایل هایی که اسمشان دقیق نباشد یا فرمت عکس در آن ها نباشد به نمایش در نمی‌آیند. پس  zoomit.ir/ax.jpg یا zoomit.ir/ax.png صحیح است و  zoomit.ir/ax اشتباه است.

پیشنهاد: پیشنهاد می‌کنیم آدرس مستقیم عکس را از نوار آدرس مرورگر کپی کنید تا به طور کامل آدرس آن کپی شود.

اتریبیوت Alt:

یکی دیگر از اتریبیوت‌های تصاویر alt است که در واقع حاوی حرف یا نوشته‌ است. این نوشته در زمانی که عکس بارگذاری نمی‌شود به جای عکس نمایش در می‌آید. alt خصوصا در هنگامی که گوگل به دنبال جستجوی تصاویر است استفاده می‌شود.

هر چند گاهی برخی افراد چندان به اتریبیوت alt توجه نمی‌کنند، ولی این اتریبیوت نقش بسیار مهمی در طراحی صفحات وب و نتایج گوگل دارد؛ پس همیشه سعی کنید آن را خالی نگذاشته و با کلمات مرتبط پر نمایید.  همچنین alt برای معلولین یا افراد ناتوان و دستگاههای خواندن صفحه مثل braille تاثیر بسزایی دارد.

اتریبیوت alt را می‌توانید به صورت زیر بنویسید.
نمونه کد:

< img src="url" alt= "کلمه"  />

 تنظیم ابعاد تصاویر

 در حد امکان سعی کنید تصاویری که در صفحه استفاده می‌کنید سایز مناسبی داشته باشند؛ ولی در اچ تی ام ال می‌توانید تصاویر را با اندازه دلخواه بر حسب پیکسل (px) بزرگتر یا کوچکتر کنید. به مثال زیر توجه کنید.
نمونه

<img src = "(zoomit.ir/ax/html.jpg ) آدرس اینترنتی تصویر همانند  " style="width:256px ;  height:365px; "  />
نتیجه‌ای که مرورگر نمایش خواهد داد

1024px Spotify HQ 730x492

در اولین قدم, ما اتریبیوت Style را بعد از تصویرمان قرار داده‌ایم. سپس یکبار کلمه hieght را نوشته و بعد از علامت : طول تصویر را بر حسب پیکسل وارد می کنیم.  در مرحله بعد نیز  یکبار کلمه width را نوشته و عرض مورد نظر را بر حسب پیکسل وارد می‌کنیم.

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

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

راه دیگر برای تغییر ابعاد تصاویر آن است که آن‌ها را بدون اتریبیوت استایل بنویسید. در واقع استفاده از اتریبیوت استایل همیشه ضروری نیست و شما می‌توانید طول و عرض را به صورت مستقیم نیز استفاده کنید. بنابراین تصویر زیر نیز دقیقا همان کاری را انجام می‌دهد که در حین بکاربردن Style نشان داده شد.

<img src = "zoomit.ir/ax/html.jpg آدرس اینترنتی تصویر همانند"   width="256px"  height="365px"  />

نکته: توجه داشته باشید که کلمه px  که را که بعد از ابعاد داده شده در اتریبیوت های طول و عرض  در مثال بالا نوشته‌ایم، . این کلمه در واقع به مرورگر میگوید که ابعاد عکس شما بر اساسی اندازه گیری شده است. ما در اینجا ابعاد عکس را به صورت پیکسلی px مشخص کرده‌‌ایم پس واحد آن را بعد از آن یادداشت میکنیم. اهمیت این موضوع زمانی مشخص میشود که ننوشتن واحد اندازه‌ها در برخی موارد باعث بروز خطا در نتیجه شود. پس همیشه این موضوع را در طراحی صفحات وب خودتان رعایت کنید.
خلاصه قسمت پنجم:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

    در پنجمین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه قرار دادن تصاویر آشنا شدیم. قاعده کلی قرار دادن تصاویر </ " img src="url > است.
    در ادامه با اتریبیوت‌های مهم تصاویر از جمله alt بازگو کردیم که به شما در کسب نتایج بهتر در جستجوی گوگل کمک می‌کند.
    در آخر نیز نحوه‌ی تغییر سایز تصاویر توسط دو اتریبیوت طول (hieght) و عرض (width) فراگرفتیم.

نوبت شما

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



:: بازدید از این مطلب : 43
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

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

قرار دادن لینک در صفحه تگ <a>

;لینک‌ها یکی از پراستفاده‌ترین المان‌های اچ‌تی‌ام‌ال هستند و در واقع این لینک‌ها هستند که کاربران شما را به جایی که شما می‌خواهید هدایت می‌کنند. به مثال زیر دقت کنید:
نمونه کد

< a href  = "http://zoomit.ir"> متنی که به عنوان نماینده لینک در مرورگر نشان داده می شود</ a >
نتیجه‌ای که مرورگر نمایش خواهد داد

 

 متنی که به عنوان نماینده لینک در مرورگر نشان داده می شود

برای قرار دادن لینک در اچ تی ام ال مراحل زیر را طی می‌کنیم.

<a href= "آدرس لینک">   link name </a>

مرحله اول: برای اضافه کردن لینک به بخشی از صفحه, ابتدا علامت مخصوص آن، یعنی <a> را قرار داده‌ایم.

مرحله دوم: سپس یک کلمه دیگر به نام href را در کنار لینک قرار داده‌ایم که در واقع مقصد لینک شما را معین می‌کند.

مرحله سوم: در بین تگ‌های <a href="link"></a> کلمه یا متنی که قرار است  نماینده لینک در صفحه باشد را نوشته‌ایم.

مرحله چهارم:  در نهایت تگ a را  بسته‌ایم <a/>.

< a href  = "(URL)">  نام لینک مورد نظر </ a >

نکته: هر چند نیازی به دانستن این موضوع در این لحظه نیست ولی شاید دوست داشته باشید بدانید که کلمه href که در کنار کلمه a در تگ لینک قرار می گیرد چیست و چه نقشی دارد.

در واقع برخی تگ‌های اچ تی ام ال از جمله تگ لینک, عکس و بسیاری دیگر به صورت پیش فرض برای تعریف شدن و تکمیل شدن به یک مشخصه (Attribute) نیاز دارند که آن‌ها را توضیح می‌دهد و تکمیل می‌کند. در این مثال, کلمه href که مقصد لینک در تگ a را مشخص می‌کند یک صفت تکمیل کننده برای تگ a است.

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

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

    در قسمت چهارم از آموزش اچ تی ام ال, نحوه لینک گذاری در صفحات اچ‌تی‌ام‌ال را نیز آموختیم.
    تگ لینک به صورت <a/> متن لینک <"آدرس صفحه مقصد در لینک"=a href> نوشته می‌شود.

 نوبت شما

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



:: بازدید از این مطلب : 44
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

تگ عناوین (h)

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

 برای ایجاد یک عنوان بزرگ از تگ <h1/>  متن عنوان <h1> استفاده می‌گردد. همانطور که گفتیم تگ‌های h دارای شش گزینه هستند که به ترتیب از <h1> شروع و به <h6/>متن عنوان<h6> ختم می‌شوند. تگ <h1> از نظر اندازه بزرگترین اندازه را دارد و <h6> کوچکترین اندازه را. البته  ویژگی‌هایی همچون پررنگ بودن در همگی آن‌ها یکسان است.

نحوه استفاده از این تگ نیز همانند باقی تگ‌های HTML است. یک تگ شروع کننده و یک تگ تمام کننده که در خود یک / دارد. برای مثال:
نمونه کد

<h1>این عنوان با اندازه h1 است <h1/>

<h2>این عنوان با اندازه h2 است<h2/>

<h3>این عنوان با اندازه h3 است<h3/>

...

<h6>این عنوان با اندازه h6 (برای عناوین با اهمیت کمتر) است<h6/>
نتیجه‌ای که مرورگر نمایش خواهد داد
این عنوان با اندازه h1 است  
این عنوان با اندازه h2 است
این عنوان با اندازه h3 است

...
این عنوان با اندازه h6 (برای عناوین با اهمیت کمتر) است
 
اهمیت عناوین:

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

علاوه  بر این, ترتیب در استفاده از  عناوین هم مهم است. در واقع مهمترین مطالب با <h1> و مطالب زیر مجموعه و با اهمیت پایین‌تر با <h2> و به ترتیب کم اهمیت ترین عناوین‌ با <h6> نوشته می‌شوند.

پیشنهاد: از <h2> برای عناوین مهم استفاده کنید.
خلاصه قسمت دوم:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

    در سومین قسمت از سری آموزش HTML با نحوه ایجاد یک عنوان در صفحه اچ‌تی‌ام ال آشنا شدیم.
    در ادامه با انواع عنوان‌ها آشنا شدیم که از <h1> بزرگترین تا <h6> کوچکترین دسته بندی می‌‌شوند.
    همچنین متوجه شدیم که عناوین با شماره کمتر و ابعاد بزرگ‌تر باید برای موضوعات مهم و عناوین کوچک‌تر برای موضوعات کم اهمیت به کار روند.
    همچنین یادگرفتیم که گوگل در هنگام جستجو به عناوین و هدینگ‌ها نیز اهمیت می‌دهد.

نوبت شما:

از آنجا که هیچ کاری بدون تمرین کردن فایده ندارد، پس وقت آن رسیده تا خودتان دست به کار شوید و آنچه فرا گرفته‌اید را در ادیتور آنلاین زیر امتحان کنید. تنها کافی است کدهای اچ‌تی‌ام‌ال را در کادر HTML پاک کنید و نتیجه آن را در کادر preivew به صورت زنده ببینید. در ضمن نگران فراموش کردن نباشید! آموزش‌های زومیت همیشه در اختیار شما است.




:: بازدید از این مطلب : 42
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

 طراحی وب در نگاه اول کار سخت و پیچیده‌ای به نظر می‌آید. ولی اگر با یک همراه خوب و آموزش‌ بهتر این کار را شروع کنیم شاید بتوانیم با کمی پشتکار و تمرین، خودمان صفحات وب مورد نظرمان را به آسانی طراحی و اجرا کنیم.  زومیت برای شما عزیزان آموزش HTML را تدارک دیده تا شما را در شروع این راه یاری کند. پس با ما در دومین بخش از این آموزش همراه شوید.
آشنایی با تگ‌ها - پاراگراف یا <p>

فرض کنید که قصد طراحی یک صفحه دارید و برای این کار باید چند جمله‌ بنویسید. برای مثال می‌خواهید بنویسید که «من در حال یادگیری HTML از زومیت هستم». برای نوشتن جمله در اچ‌تی‌ام‌ال نیازمند ایجاد یک تگ پاراگراف که با <p> مشخص می‌شود، هستیم. همانطور که پیش از این نیز گفتیم، برای نوشتن تگ‌ها یک تگ ابتدایی داریم و یک تگ انتهایی. تگ <p> نیز از این قاعده مستثنی نیست و یک بار باز می‌شود،‌ بعد محتوا در بین آن قرار می‌گیرد و بعد بسته می‎‌شود. پس ما نیز برای نوشتن یک جمله باید از <p/>  جمله مورد نظر  <p> استفاده کنیم و محتویاتمان را بین آن‌ها بنویسیم.

 به مثال زیر نگاه کنید:
نمونه

<p>همه چی آرومه! </p>

<p>من به دنبال یادگیری طراحی وب با زومیت هستم</p>
نتیجه‌ای که مرورگر نمایش خواهد داد

همه چی آرومه!

 من در حال یادگیری طراحی وب با زومیت هستم

نکات دیگر در رابطه با تگ <p>...<p/>:

تگ Pre:  زمانی که یک تگ <p></p> مورد استفاده قرار می‌گیرد، اسپیس بین حروف یا متون دیده نمی‌شود. در واقع دو جمله زیر در حین نمایش هیچ تفاوتی نمی‌کنند، چرا که تگ <p></p> فاصله‌های اضافی را نادیده می‌گیرد و همه چیز را سر هم نشان می‌دهد.
نمونه

 <p>متن ما به صورت پشت سر هم به نمایش در می‌آید </p>

<p>متن         با               فا صله های               فراوان فرقی برای تگ پاراگراف                  نمی کند </p>

<pre>متن         با               فا صله های               فراوان در         این تگ دقیقا          به همان شکلی که نوشته می‌شوند    به              نمایش                 می‌آیند                  </pre>
نتیجه‌ای که مرورگر نمایش خواهد داد

متن ما به صورت پشت سر هم به نمایش در می‌آید

متن با فاصله های فراوان فرقی برای تگ پاراگراف ندارد.

متن         با               فا صله های               فراوان در         این تگ دقیقا          به همان شکلی که نوشته می‌شوند    به              نمایش                 می‌آیند                

همانطور که مشاهده کردید، در واقع در اچ‌تی‌ام‌ال اینتر زدن و اسپیس‌های اضافه در بین تگ P پاراگراف معنا ندارد و این تگ همه چیز را در کنار هم نمایش می‌دهد. پس برای نوشتن متنی که نمی‌خواهیم کلمات به هم پیوسته باشند و بین آن‌ها فاصله باشد، چکار باید کرد? برای این کار می‌توان از تگ<pre> </pre> به جای <p> </p> استفاده کرد. این تگ هر آنچه و با هر ترتیبی که بنویسید، همانگونه نمایش می‌دهد. از این تگ برای بسیاری از کارها از جمله نمایش یک کد در صفحه یا متون شعری استفاده می‌شود. همچنین این تگ معمولا با فونت Courier به نمایش در می‌آید.

تگ <br>: در واقع تگ <br> (بدون تگ پایانی و تنها با همین تگ و شمایل نوشته می‌شود) نقش اینتر در کیبورد را بازی می‌کند و متن را یک خط به پایین می‌برد. از این تگ می‌توان برای اینتر زدن در متن یا به طور کلی ایجاد یک خط جدید در هر المان اچ‌تی‌ام‌ال استفاده نمود.
نمونه

 <p>   قرار می‌گیرد به خط بعدی می‌رود  <br>  متنی که بعد از تگ بی آر </p>
نتیجه‌ای که مرورگر نمایش خواهد داد

متنی که بعد از تگ بی آر

قرار می‌گیرد به خط بعدی می‌رود.
خلاصه قسمت دوم:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

    در دومین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه ایجاد یک پاراگراف متن در صفحه اچ‌تی‌ام ال آشنا شدیم و دانستیم که برای نوشتن متن از تگ <p> </p> استفاده می‌شود.. در ادامه با تگ‌های جانبی متن همچون pre آشنا شدیم و فهمیدیم که در واقع این تگ‌ها بدین صورت نوشته می‌شوند:
    <pre> content </pre>.
    همچنین متوجه شدیم که تگ‌های pre متن را دقیقا همان صورتی که نوشته می‌شوند نمایش داده می‌شوند ولی تگ‌های p اسپیس و فاصله‌ها را در بین متن نشان نمی‌دهد و در عوض متن را به صورت یکپارچه نشان می‌دهد.

نوبت شما:

از آنجا که هیچ کاری بدون تمرین کردن فایده ندارد، پس وقت آن رسیده تا خودتان دست به کار شوید و آنچه فرا گرفته‌اید را امتحان کنید. ما برای راحتی هر چه بیشتر، یک ادیتور آنلاین در صفحه ایجاد کرده‌ایم که با کمک آن می‌توانید به تمرین اچ‌تی‌ام‌ال بپردازید. در ضمن نگران فراموش کردن نباشید! آموزش‌های جلسه قبل در کنار آموزش‌های بالا هر وقت که دوست داشته باشید،‌ در اختیار شما است.

پروژه این جلسه:

    یک جمله دلخواه را با کمک تگ‌های P بنویسید (برای تمرین بیشتر توصیه می‌کنیم که تگ‌های اصلی صفحه HTML که در سری اول برایتان بازگو کردیم را در ابتدای صفحه یادداشت نمایید.)  مثلا: <p> من در حال یادگیری اچ‌تی‌ام‌ال هستم<p/>
    حالا همین جمله را بار دیگر اما با اسپیس زیاد بین کلمات  و با کمک تگ p بنویسد! مثلا: <p>  من     به دنبال    یا دگیری برنامه                نویسی    هستم<p/>
    بار دیگر جمله را  با اسپیس زیاد بین کلمات  ولی با کمک تگ pre بنویسد! مثلا: <pre>  من  بدنبال   یا دگیری برنامه   نویسی  هستم<pre/>

تفاوت آن‌ها را به طور کامل درک کردید؟



:: بازدید از این مطلب : 43
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

 1. گمنام ثبت نام کنید

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

پسورد هایتان را برای اکانت هایی که دارید به روز رسانی کنید و مطمئن شوید که برای هر کدام از اکانت هایی که دارید پسورد قوی استفاده کرده‌اید. برای ساختن یک پسورد قوی می توانید از ترکیب حروف (حداقل یک حرف بزرگ) و عدد استفاده کنید، به خاطر داشته باشید که می توانید از کاراکتر های خاص (از جمله @ # $ % !) نیز استفاده کنید. از رمز عبورهایی که به راحتی قابل حدس زدن هستند به هیچ وجه استفاده نکنید.
3. تنظیمات حریم خصوصی خودتان را ارتقاء دهید

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

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

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

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

هیچ چیزی بر روی اینترنت به طور کامل امن نیست. هر کسی می تواند آنچه را که شما پست کرده‌اید ذخیره کند و یا اینکه آن را با دیگران به اشتراک بگذارد. پس به خاطر داشته باشید چیزی را که می خواهید ارسال کنید با دقت بیشتری انتخاب کنید. همیشه فرض کنید چیزی را که ارسال می کنید باقی خواهد ماند و حذف نمی شود. هیچ وقت چیزی را درمورد خودتان،خانواده تان یا دوستان تان، که خود شما یا آنها دوست ندارند عمومی شود را ارسال نکنید. همیشه از ارسال چیزهایی که لحظه ای به ذهنتان خطور می‌کند اجتناب کنید، و اینکه از ارسال چیزی که باعث پشیمانی و تأسف خوردن شما می شود خودداری کنید.
8. از عکس‌ها و آبروی‌تان محافظت کنید

اگر شخصی چیزی را ارسال کرده است که شما آن را دوست ندارید به آنها اجازه بدهید که بدانند این برای شما ناخوشایند است و از آنها درخواست کنید که آن را بردارد. به صورت منظم بخش "عکس هایی مربوط به خود" را چک کنید و ببینید که چه کسی آن را ارسال کرده است، همچین دیوار (wall) خودتان را بررسی کنید و چیزهایی که در آن برچسب خورده‌اید را ببینید. اگر فردی از حذف کردن چیزی که برای شما ناخوشایند است امتناع می کند، پس ضروری است تا او را بلاک کنید و یا اینکه آن را گزارش (report) کنید.
9. مراقب چیزی که بر روی آن کلیک می کنید باشید

اگر بر روی لینک هایی که از محتوای آن خبر ندارید کلیک کنید، آگاه باشید که هکرها می توانند با استفاده از این روش وارد اکانت شما شوند و یا اینکه می توانند ویروسی را از طریق آن پخش کنند. اگر فردی چیزی را برای شما ارسال کرد و این فایل غیر طبیعی به نظر برسد و یا اینکه برای شما ناآشنا باشد، یک پیام برای آنها ارسال کنید و از آنها در مورد این فایل توضیح بخواهید و به آنها این فرصت را بدهید که فکر کنند که شما می دانستید آنها قصد هک کردن شما را داشتند.
10. شناخت کامل از کاری که می‌خواهید انجام دهید را داشته باشید

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

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



:: بازدید از این مطلب : 43
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

 همانطور که می‌دانید، یکی از بنیادی‌ترین موضوعاتی که برای طراحی و استفاده از صفحات وب مورد استفاده قرار می‌گیرد زبان HTML است. اچ‌تی‌ام‌ال یا Hypertext Markup Language زبانی است که برای طراحی و چینش صفحات وب مورد استفاده قرار می‌گیرد. در واقع هر آنچه که شما در مرورگر خود در هنگام ورود به هر گونه وب سایتی مشاهده می‌کنید حاصل پردازش این کدها به همراه برخی زبان‌های دیگر توسط مرورگر شما است.
زبان‌ برنامه‌نویسی وب چیست؟

در واقع زبان‌های تحت وب به دو دسته کلی تقسیم می‌شوند. زبان‌های FrontEnd و زبان‌های برنامه‌نویسی Backend! همانطور که از نام این زبان‌ها نیز پیدا است هر کدام مربوط به یک وجه از ایجاد صفحات وب می‌شوند. زبان‌های بک‌اند زبان‌هایی هستند که برای ارتباط کاربر با سرور مورد استفاده قرار می‌گیرند و توسط کاربر دیده نمی‌شوند. در طرف دیگر زبان‌های فرانت‌اند زبان‌هایی هستند که توسط مرورگر اجرا می‌شوند و حاصل کار آن‌ها به صورت مستقیم در صفحه‌ی مرورگر نمایش داده‌ می‌شود. برای مثال یک فرم ثبت نام کاربر را در نظر بگیرید. در این فرم، فیلدهایی وجود دارد که به زبان اچ‌تی‌ام‌ال نوشته و توسط مرورگر نمایش داده می‌شود که شما می‌توانید این فرم‌ها را پر کنید. در واقع تمامی محتویاتی که روی مرورگر دیده می‌شود حاصل کار زبان‌های فرانت‌اند یا کلاینت ساید(سمت کاربر) است که مهم‌ترین آن‌ها HTML، CSS و JavaScript است.

اطلاعاتی که شما در این فرم‌ها پر می کنید قرار است که به سمت یک کامپیوتر که برای اجرای سرویس مورد نظر استفاده می‌شود و بدان سرور می‌گویند، فرستاده شده و پردازش شود. برای ارسال این اطلاعات و دریافت و پردازش بر روی اطلاعات، زبان‌های مربوط به سرور(سرور ساید) یا بک‌اند مورد استفاده قرار می‌گیرد. از جمله معروف‌ترین زبان‌های تحت سرور می‌توان به PHP، .Net، Node Js و ... اشاره کرد.

آموزش HTML - بخش اول: مفاهیم ابتدایی و آشنایی با زبان طراحی وب

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

<!DOCTYPE html>

<html>

<body>

<h1>این اولین عنوان صفحه اچ تی ام ال شماست</h1>

<p>این اولین پاراگراف اچ تی ام ال صفحه شماست</p>

</body>

</html>
نتیجه‌ای که مرورگر نمایش خواهد داد
این اولین عنوان صفحه اچ تی ام ال شماست

این اولین پاراگراف اچ تی ام ال صفحه شماست

اچ‌تی‌ام‌ال یا Hyper Text Markup Language نام زبان نشانه گذاری است که به شما در ایجاد صفحات وب کمک می‌کند. در واقع هر آنچه در مرورگر اینترنت به نمایش در می‌اید نتیجه این زبان است. خوشبختانه اچ‌تی‌ام‌ال زبان ساده‌ای است و یادگیری آن به معنای واقعی کلمه شیرین است.
ساخت یک سند HTML

ایجاد یک فایل اچ تی ام ال از آب خوردن نیز آسان‌تر  است. برای ایجاد فایل‌های اچ تی ام ال نه به برنامه خاصی نیاز دارید و نه به سیستم عامل بخصوصی. در واقع شما فایل‌های اچ‌تی‌ام‌ال را می‌توانید حتی به کمک نرم‌افزار نوت پد NotePad ویندوز نیز ایجاد کنید. با این وجود توصیه می‌کنیم برای راحت‌تر نوشتن کدها و همچنین فهم بهتر مطالب از نرم افزارهای ویرایش متن رایگان همچون ++Notepad یا Sublime Text استفاده کنید.

ما در این آموزش، به شما نحوه ایجاد یک فایل اچ تی ام ال را در برنامه ویرایش متن پیش فرض ویندوز، یعنی نوت پد Notepad آموزش می‌دهیم.

مرحله اول: در نسخه‌های قبل از ویندوز 8، بر روی دکمه Start ویندوز کلیک کنید. سپس از بخش All Programs وارد بخش Accessories شوید و از آنجا برنامه Notepad را اجرا کنید. در ویندوز 8 یا نسخه‌های جدیدتر نیز منوی استارت (گوشه سمت چپ صفحه) را کلیک کرده و کلمه Notepad را تایپ کنید تا برنامه در لیست روبرویتان قرار گیرد. حالا متن کدها را در فایل متنی که باز کرده‌ایم وارد می‌کنیم. در حال حاضر چون متنی را نمی‌دانیم هر چه دوست دارید در آن بنویسید و به مرحله بعدی بروید.

مرحله دوم: حالا وقت ذخیره فایل در قالب صفحه اچ تی ام ال است. برای این کار از منوی file در نرم افزار NotePad گزینه save As را انتخاب کنید. فایلتان را به نام دلخواه مثلا zoomit.Html تغییر دهید. توجه داشته باشید که حتما پسوند html. را بعد از نام دلخواهتان قرار دهید تا فرمت متن به یک سند اچ تی ام ال تبدیل شود.

مرحله سوم:‌ در این قسمت یک گزینه کشویی به نام encoding دیده می‌شود که بهتر است آن را روی UTF-8 قرار دهید.

مرحله پایانی: حالا فایلتان را در جایی که دوست دارید ذخیره کنید. با کلیک بر روی آن خواهید دید که فایل در مرورگر وب پیش فرض شما باز خواهد شد و همه چیز آماده شروع کد نویسی به زبان HTML است.

zoomit
 تگ‌ها (Tag):
نمونه

<body>

<h1>من تگ عنوان هستم و با اندازه بزرگ در مرورگر نمایش داده خواهم شد</h1>

<p>من تگ پاراگراف هستم و برای نمایش متن در مرورگر استفاده خواهم شد</p>

</body>
نتیجه‌ای که مرورگر نمایش خواهد داد
من تگ عنوان هستم و با اندازه بزرگ در مرورگر نمایش داده خواهم شد

من تگ پاراگراف هستم و برای نمایش متن در مرورگر استفاده خواهم شد

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

 <اسم تگ> متن یا هر چیز دیگر<اسم تگ به همراه علامت اسلش(/)>
<tagname> content </tagname>

به تگ اول opening tag و به تگ دوم Closing tag می‌گوییم. شما هر چه دوست دارید خطابشان کنید.

    نمونه یک تگ باز کننده (همان فارسی openning tag است): <html>
    نمونه یک تگ تمام کننده (معادل فارسی closing tag است): <html/>

قالب تگ‌های HTML به صورت بالا تعریف می‌شوند. یعنی در ابتدا نام تگی که قصد استفاده از آن را داریم,در بین < > می‌نویسیم، سپس محتوایی که می‌خواهیم نمایش دهیم را بین دو تگ ابتدایی و انتهایی نوشته  و در آخر المان را با علامت اسلش /  تمام می‌کنیم.

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

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

<h1>عنوان اول</h1>

<h2>عنوان کوچکتر</h2>

<P> پاراگراف اول</p>

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

 حالا که با پایه کدنویسی در اچ تی ام ال یعنی نوشتن تگ آشنا شدیم, نوبت آن رسیده است تا وارد نوشتن اولین صفحه اچ تی ام ال شوید.
یک صفحه ساده:

<!DOCTYPE html>

<html>

<title>  یادگیری اچ تی ام ال با زومیت</title>

<body>

<h1>  من تگ عنوان هستم </h1>

<p>  من تگ پاراگراف (متن) هستم  </p>

</body>

</html>

 اولین جمله هر سند اچ‌تی‌ام‌ال <!DOCTYPE html> است. این بخش در واقع به همه بیان می‌کند که ما در حال ایجاد یک صفحه HTML هستیم. پس  اولین کاری که انجام می‌دهیم، آن است که همین کلمه را در ابتدای سند می‌نویسیم. اگر نگاهی به صفحه ساده‌ای که برایتان مثال زدیم نیز بیندازید, در خط اول کلمه <!DOCTYPE html> را می‌بینید. پس بخاطر داشته باشید که ما همیشه آن را در اولین خط از کدهایمان قرار می‌دهیم.

دومین رکن اصلی هر صفحه HTML، همان <html> و <html/> است که برای شروع نوشتن زبان اچ تی ام ال از آن استفاده می‌کنیم. پس در قدم بعدی و بعد از <!DOCTYPE html> آن را می‌نویسیم. همه محتویات یک صفحه اچ تی ام ال را از این به بعد در بین این دو تگ نوشته می‌شود.

بین دو <html> و <html/> تگ‌های جدیدی با اسم <head> و <head/> قرار می‌گیرند. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر, nest می‌گویند.  تگ <head> و <head/>  در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه اچ‌تی‌ام‌ال است. مثلا می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت ارائه می‌کند. معمولا چیزهایی که در این بخش گفته می‌شود به صورت مستقیم در سایت شما نمایش داده نمی‌شوند.
حروف فارسی در وب:

یکی از کدهای مهمی که در این بخش قرار میگیرد، <"meta charset="UTF-8>  است. این کد در واقع با انکود صفحه مطابق با استانداردی است که برای نوشتن حروف فارسی ضروری است. پس اگر قصد نوشتن فارسی در صفحات دارید، حتما از این کد در بین تگ <head> و <head/> استفاده کنید.

در بین دو تگ <head> و <head/> علاوه بر کدهای متا، تگ جدیدی قرار می گیرد که عنوان صفحه شما خطاب می‌شود.این تگ همان <title> و <title/> است که یک عنوان برای صفحه اچ‌تی‌ام‌ال شما معین می‌کند و در نوار بالای مرورگر به عنوان اسم صفحه نشان می‌دهد. مثلا عنوان سایت ما "زومیت-دنیای فناوری" است.

حالا نوبت به نوشتن چیزهایی می‌رسد که قرار است در صفحه مرورگر مشاهده شوند. اینچنین چیزهایی که ما به آن‌ها المان‌های اچ‌تی‌ام‌ال می‌گوییم، در بین دو تگ <body> و <body/> قرار می‌گیرند. در واقع هر چه که در این تگ نوشته شود, به طور مستقیم در صفحه اچ تی ام ال دیده می‌شود چرا که این تگ  بدنه اصلی صفحه اچ‌تی‌ام‌ال را تشکیل می‌دهد. بعد از تگ <body/> معمولا کد دیگری قرار نمی‌گیرد و صفحه تمام می‌شود.

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

پیشنهاد زومیت: از آنجا که تگ‌هایی که در بالا با هم خوانده‌ایم، نقشی ثابت در صفحه اچ تی ام ال ایفا می‌کنند، می‌توانید همیشه یک کپی از آن‌ها را در صفحات جدید بچسبانید و تنها محتویات جدید را در بین تگ <html> </html> وارد کنید.  همچنین اگر قصد نوشتن کلمات فارسی را دارید، حتما کد  <"meta charset="UTF-8>  را در بین تگ <head> و <head/> قرار دهید.

همه مواردی که در بالا گفتیم را در قالب زیر به شما نمایش داده‌ایم تا بهتر متوجه ترتیب آن‌ها شوید. همچنین توجه داشته باشید که تنها قسمتی که در یک مرورگر دیده می‌شود، بخش سفید رنگ شکل زیر است که در برگیرنده محتویات تگ <body></body> است.
<html>
<head>
<title/>عنوان صفحه که در نوار بالای مرورگر نشان داده می شود<title>
<head/>
<body>
<h1/>من عنوان صفحه اچ تی ام ال هستم<h1>
<p/>من یک پاراگراف متن هستم <p>
<p/>من هم یک پاراگراف دیگر هستم<p>
<body/>
<html/>

 

خب تا به اینجای کار فکر می‌کنیم که برای شروع چیزهای بسیار خوبی آموخته‌ایم. در قسمت بعدی شما را با انواع تگ‌ نوشتن متن, آشنا خواهیم کرد. اما قبل از آن, بد نیست اگر خلاصه‌ای از آموزشی که در این مقاله یادگرفته‌اید را با هم مرور کنیم.
 خلاصه جلسه اول:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

    در اولین قسمت از سری آموزش HTML  با نحوه ایجاد یک صفحه اچ‌تی‌ام ال آشنا شدید.
    در ادامه با تگ‌ها و مفاهیم اولیه یک صفحه HTML آشنا شدید و الان می‌دانید که در واقع تگ‌ها بدین صورت نوشته می‌شوند:<tagname> content </tagname>
    یعنی یک بار تگ ما باز می‌شود و سپس دوباره بعد از آنکه کارمان تمام شد بسته می‌شوند و محتوای مورد نظر نیز در بین تگ باز و بسته نوشته می‌شود.
    همچنین فهمیدیم که در ابتدای هر صفحه اچ‌تی‌ام‌ال تگ‌های ثابت و مخصوصی وجود دارند که می‌گویند قصد ایجاد یک صفحه HTML داریم. این تگ‌ها عبارتند از  <doctype HTML!> و <HTML> و <head> و  <title> و <Body>. این تگ‌ها همیشه در صفحات قرار می‌گیرند.
    برای نمایش صحیح حروف فارسی در صفحه، حتما کد  <"meta charset="UTF-8>  را در بین تگ <head> و <head/> قرار دهید.

نوبت شما:

 وقت آن رسیده  آنچه فرا گرفته‌اید را در ادیتور آنلاین زیر امتحان کنید. تنها کافیست با دست‌‍‌های خودتان کدهای اچ‌تی‌ام‌ال را در کادر اول  نوشته و نتیجه آن را در کادر دوم به صورت زنده ببینید. در ضمن نگران فراموش کردن نباشید! آموزش‌های بالا همیشه در اختیار شما است.




:: بازدید از این مطلب : 41
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()
نوشته شده توسط : webtoolsplace


قابلیت Undo Send که می‌توان از ان به عنوان یکی از ویژگی‌های حیاتی جیمیل یاد کرد، یکی از ویژگی‌هایی است که برای مدت زمان طولانی بطور آزمایشی مورد استفاده کاربران بود. به تازگی گوگل این قابلیت را به تنظیمات اصلی نسخه وب جیمیل آورده است.

گوگل اولین بار ویژگی Undo Send  را در سال 2009 برای جیمیل معرفی کرد  و با توجه به این که مدت زمان زیادی از آن تاریخ می‌گذرد، بنابراین جای تعجب نیست اگر  متوجه نشده باشید که این ویژگی به صورت آزمایشی در جیمیل بوده است. در واقع این ویژگی در قسمت Labs جیمیل قرار داده شده بود و کاربران برای استفاده از ان باید بصورت دستی تیک مربوط به فعال‌سازی آن را می‌زدند.

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

اما از این به بعد شما قابلیت Undo Send را در تب General تنظیمات جیمیل خود مشاهده خواهید کرد. اگر پیش از این در قسمت Labs این قابلیت را فعال کره باشید این قابلیت بصورت پیش‌فرض برای شما فعال خواهد بود، در غیر این صورت برای فعال‌سازی آن لازم است که تیک گزینه‌ی Enable Undo Send را بزنید.

اضافه‌شدن رسمی گزینه‌ی Undo Send در شرایطی رخ می‌دهد که گوگل حدود یک ماه پیش نرم‌افزار موبایلی Inbox را برای استفاده عموم عرضه کرد و جالب این که اینباکس هم قابلیت Undo Send را دارد. آیا شما تابحال از  قابلیت Undo Send استفاده کرده‌اید

11 افزونه مفید و کاربردی برای مرورگر کروم

Jot

اگر جزء آن دسته از افرادی هستید که همیشه مشغول کار کردن بر روی مرورگر خود هستید، Jot می تواند کارهایتان را برای انجام دادن، به بهترین وجه ممکن فهرست بندی کند. فقط کافی است یک تب جدید را باز کنید و کارها و یادداشت های تان را به آن اضافه کنید تا بعدا به آن مراجعه کنید. این افزونه همچین دارای فونت‌های بزرگ و تصاویر پس زمینه زیبایی است که بسیار چشم نواز است.
DF YouTube .2

DF YouTube

فیلم های پیشنهادی که یوتیوب هنگام مشاهده یک فیلم نشان می دهد،اگر چه برای افرادی که به دنبال گذران وقت هستند می توانند لذت بخش هم باشند، اما برای افرادی که بر محتوای آموزشی و انجام پژوهش تمرکز دارند، آزار دهنده است. افزونه DFYouTube اطلاعات اضافی مانند فیلم های پیشنهادی، ویدئو های مرتبط با فیلم اصلی، نوار کناری لیست پخش و نظرات را براحتی مخفی می کند تا بتوانید بر روی کاری که می خواهید انجام دهید تمرکز داشته باشید.
VisualPing .3

VisualPing

هنگامی که سایت‌های مورد علاقه شما بروز رسانی می شوند، این افزونه هوشمند آن را به شما ایمیل می کند و شما را از به روز شدن سایت با خبر می کند. برای این کار کافی است که وارد سایت مورد علاقه تان شوید و بر روی دکمه این افزونه در نوار ابزار تان کلیک کرده و آدرس ایمیل خود را وارد کنید تا هنگام بروز شدن سایت ، به شما اطلاع بدهد.
UpTo .4

UpTo

با استفاده از UpTo ، شما می توانید به فهرست بسیار زیادی از تقویم ها دسترسی داشته باشید .این افزونه اطلاعات مختلفی از برنامه‌های ورزشی، برنامه های تلویزیونی، موسیقی‌ها، تاریخ برگزاری کنسرت ها و موارد بسیار بیشتر را به درون تقویم گوگل شما می‌آورد تا زندگی با برنامه‌ریزی بیشتر و بهتری داشته باشید.
Tab Snooze .5

image 9

اگر شما عادت دارید که تب های زیادی را بر روی مرورگر تان باز کنید و این باعث بی نظمی و شلوغی مرورگر‌تان می شود، با این افزونه می توانید همه آنها را ببندید و بعدا هر وقت که دوباره به آنها نیاز داشتید، آنها را برگردانید.
Spellbook .6

Spellbook

با این افزونه، شما می توانید همه bookmark یتان را در یک فولدر قرار دهید و با یک کلیک راست به همه آنها دسترسی پیدا کنید. همچنین با این شیوه ، دیگر نیازی به میانبر های صفحه‌کلید نخواهید داشت.
RSS Subscription .7

RSS Subscription

یکی از بهترین راه ها برای با خبر شدن از خبرهای جدید در وبسایت مورد علاقه‌تان، استفاده از افزونه RSS Subscription است، هنگامی که شما این افزونه را فعال کردید،دکمه RSS در نوار آدرس نمایان می شود که با کلیک کردن بر روی آن می توانید وبلاگ یا سایت مورد علاقه تان را وارد کنید و مشترک آن شوید.
mxHero .8

mxHero

این افزونه قابلیت های بیشتری را به جیمیل اضافه می کند. از جمله این قابلیت ها، ارسال زمان‌بندی شده ایمیل، حذف کردن پیام فرستاده شده و گزارش خوانده‌شدن ایمیل هستند.
crxMouse Chrome Gestures .9

crxMouse Chrome Gestures

با این افزونه، شما می توانید حرکات ( gestures ) خاصی را برای حرکت در میان وبسایت ها ایجاد کنید. هنگامی که شما با حرکت ماوس‌تان، gesture خاصی را انجام دهید، مرورگرتان عمل متناظر با آن حرکت را انجام می دهد. برای مثال شما می‌توانید با حرکت ماوس از سمت چپ به راست، یک تب جدید باز کنید و یا اینکه آن را ببندید.
PanicButton .10

http://zurl.ir/IF2e2

اگر شما دوست ندارید همکاران یا افراد خاصی، صفحاتی را که بر روی مرورگرتان باز کرده اید ببینند، PanicButton این کار را برای شما آسان می‌کند. با استفاده از این افزونه، شما می‌توانید همه صفحاتی را که باز کرده‌اید را مخفی کنید و بعداً همه‌ی آنها را باز گردانید. شما حتی می‌توانید برای آن یک میانبر بر روی کیبورد‌تان تعریف کنید.
11.Bonus: Chrome Visual Histor y

Bonus: Chrome Visual History

اگر دوست دارید بدانید مدت زمان آنلاین بودن شما، در چه وبسایت هایی سپری شده است می توانید از Bonus: Chrome Visual History استفاده کنید. این افزونه، تاریخچه‌ی مرورگر شما را به صورت نمودار به نمایش درآورده و مدت زمان سپری شده برای هر سایت را بر اساس روز، هفته، ماه، و یا بیشتر، نشان می دهد.



:: بازدید از این مطلب : 43
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()
نوشته شده توسط : webtoolsplace

امروزه شاهد رشد روزافزون حجم صفحات وب هستیم. با بالاتر رفتن کیفیت محتوای ارائه شده، هر ساله حجم متوسط صفحات وب افزایش می‌یابد، ولی توسعه‌دهنده حرفه‌ای کسی است که بتواند در عین حفظ کیفیت بالای محتوای وب‌سایت، حجم ان را کمینه نگه دارد. در ادامه به معرفی برخی از مهمترین ابزارهای سنجش حجم و سرعت دانلود صفحات وب می‌پردازیم.
تبلیغات
آیفون 7 با ضمانت نامه اصلی
پکیج آزمون بین المللی CCNA
آمادگی ورود به بازار کار

بدون یک ترازو نمی‌توانید از روند تاثیر رژیم غذایی خود آگاه شوید! در مورد صفحات وب نیز همین موضوع صدق می‌کند. امروزه میانگین حجم صفحات وب به بیش از 1.7 مگابایت رسیده و در سال 2013 رشد آن 32 درصد بوده است. اگر شما نیز توسعه‌دهنده وب هستید و هر روز از ابزار و ویجت‌های جدید در وب‌سایت خود بهره می‌برید، ابزارهایی که در ادامه معرفی می‌شوند را از دست ندهید. این ابزارها همگی رایگان بوده و استفاده از آنها فقط چند ثانیه به طول می‌انجامد.
1. Pingdom

web-page-analysis-1Pingdom یکی از محبوب‌ترین ابزارهای تحلیل صفحات وب است. این ابزار تمام اطلاعات ضروری در مورد صفحه وب مورد نظر شما را در اختیارتان قرار می‌دهد. این اطلاعات عبارتند از حجم صفحه، تحلیل کدها، رتبه عملکرد، پیشنهادهایی برای بهبود وضعیت و البته یک تایم‌لاین برای ثبت رکورد روند بهینه شدن وب‌سایت شما! در یک کلام بگوییم که اگر قصد دارید فقط از یک ابزار برای تحلیل صفحات وب خود بهره گیرید، آن انتخاب باید Pingdom باشد.
2. Firefox Web Developer Add-on

web-page-analysis-2کریس پدریک، شخصی است که از همان روزهای ابتدایی ارائه مرورگر فایرفاکس، تولبار Web Developer را معرفی کرد تا کاربران بتوانند به کمک آن حجم صفحات وب را چه در حالت فشرده و چه در حالت غیرفشرده مشاهده کنند. برای این کار کافی است از طریق منوی Information گزینه View Document Size را انتخاب نمایید.

توجه داشته باشید که افزونه Web Developer برای مرورگر کروم نیز وجود دارد، اما متاسفانه نسخه کروم آن از قابلیت ذکر شده بی‌بهره است!
3. GTmetrix

web-page-analysis-3این ابزار گزارشی مبتنی بر اطلاعات PageSpeed Insights گوگل و YSlow را به همراه اطلاعات کاربردی بیشتر مثل حجم کل صفحه و تعداد درخواست‌های ورودی در اختیار شما قرار می‌دهد. بسیاری از افراد از هر دو سیستم YSlow و PageSpeed Insights به طور جداگانه استفاده می‌کنند، ولی GTmetrix این مزیت را دارد که نتایج هر دو سیستم را به همراه اطلاعات بیشتر در اختیار شما قرار می‌دهد.
4. Google PageSpeed Insights

web-page-analysis-4این ابزار گوگلی حجم کلی صفحه و آمار سرعت آن را نشان نمی‌دهد، ولی به شما می‌گوید که چگونه می‌توانید نسخه دسکتاپ و موبایل وب‌سایت خود را بهبود بخشیده و ایرادات آن را برطرف نمایید.

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

web-page-analysis-5YSlow یک ابزار آنلاین متعلق به یاهو است که افزونه آن برای اکثر مرورگرها وجود دارد. این ابزار نیز همچون PageSpeed Insights گوگل، صفحات وب را ارزش‌گذاری نموده و نمره‌ای بین A (وقتی که شما تمام کاری که می‌توانستید را انجام داده‌اید) تا F (وقتی شما موفقیتی در بهبود اوضاع کسب نکرده‌اید) را با توجه به چند فاکتور مهم به آنها می‌دهد.
6. Browser Developer Consoles

web-page-analysis-6اگر نمی‌خواهید از ابزار جدیدی بهره گیرید، Firebug، Chrome Inspector، Firefox Web Developer و IE Developer tools، همگی تحلیلگران شبکه و پروفایلرهایی هستند که حجم صفحات شما را نمایش می‌دهند. توجه داشته باشید که هنگام استفاده از این ابزار با استفاده از کلیدهای Ctrl+F5 اطلاعات کش شده را پاک کنید.
7. PageScoring Website Speed Test

web-page-analysis-7اگر شما به یک ابزار ساده و سریع نیاز داشته باشید، Website Speed Test می‌تواند نیاز شما را برطرف نماید. این سرویس بر روی زمان دانلود متمرکز می‌گردد، ولی حجم فایل‌ها نیز در کنار زمان بارگذاری هر فایل نمایش داده می‌شود که می‌تواند برای شناسایی و جداسازی بخش‌های دارای مشکل کاربردی باشد.
8. Uptrends Speed Test

web-page-analysis-8Uptrends تمام قابلیت‌های سایر ابزارهای تست سرعت و حجم صفحات وب را دارا می‌باشد. اما چیزی که این ابزار را از بقیه متمایز می‌کند این است که این سرویس، امکان آزمایش پاسخ‌دهی صفحه از موقعیت‌های مکانی مختلف را ارائه می‌کند. در واقع می‌توانید انتخاب کنید که سایت شما از دید کاربر شهرهای مختلف جهان با چه سرعتی بارگذاری می‌گردد. همچنین گزارشی که این سرویس ارائه می‌کند نشان می‌دهد که هر یک از منابع از کدام دامنه‌ها ارائه می‌شوند تا میزان اثرگذاری CDN مشخص گردد.
9. Page Speed Tool

web-page-analysis-9این ابزار گزارشی تفصیلی از حجم فایل‌ها، عناصر مختلف، گروه‌های منابع و سرعت دانلود را در اختیار شما قرار می‌دهد. نکته مهم درباره این ابزار آن است که زمان بارگذاری محاسبه شده، فقط مربوط به کد HTML است، نه همه فایل‌ها. با این حال با استفاده از نمودار آبشاری که این سرویس در اختیارتان قرار می‌دهد، می‌توانید مجموع زمان بارگذاری صفحه را به دست آورید.
10. Web Page Analyzer

web-page-analysis-10اگر از سن و سال بالا و طراحی بنفش و نارنجی از مد افتاده آن صرف نظر کنید، Web Page Analyzer گستره وسیعی از آمار و ارقام حجم فایل‌ها و تخمینی از زمان دانلود برای مودم‌هایی با سرعت‌های مختلف (حتی مودم‌های 14.4K) را ارائه می‌کند!

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



:: بازدید از این مطلب : 41
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 23 ارديبهشت 1396 | نظرات ()

صفحه قبل 1 2 صفحه بعد