در این دوره آموزشی با هم یک وبسایت شخصی با html5 و css3 را از پایه طراحی و کدنویسی میکنیم.

بخش اول : تعریف و نیازمندی وبسایت

بخش دوم : طراحی سایت در فتوشاپ

بخش سوم : کدنویسی وبسایت

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

بخش آخر : اضافه کاری ( درخواست های کاربران، چند خط با جاوا اسکریپت!).

بخش اول : در حال آماده سازی ، بزودی منتشر می شود.

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

توی این مطلب میخام آموزش افزودن متا تگ شبکه های اجتماعی یا تگ های Open Graph را به وبسایتتان را به اشتراک بگذارم. خب این تگ ها در سئو وب سایت شما نیز تاثیر دارند.

این متا تگ شبیه بقیه متا تگ ها بین دو تگ <head> و </head> قرار میگیرند. حتما از این تگ ها استفاده کنید!

ساختار این تگا به صورت زیر هست:

امروز میخواهم یکی دیگر از تگ های پرکاربرد html را معرفی کنم. تگ <table> یا جدول ؛ برای ایجاد جدول در صفحات اچ تی ام ال به کار میره!

بجای استفاده از صفت های مانند border در تگ جدول بهتر هست از css استفاده کنید.آموزش css و صفت های مربوط به تگ <table>.

برای افزودن سطر به جدول خود در صفحه html از تگ <tr> که مخفف کلمه ی table row میباشد استفاده میکنیم ، برای افزودن محتوا در سطر جدول از تگ <td> استفاده میکنیم که مخفف کلمه table data هست.

ساختار تگ <table> 

برای افزودن عکس به صفحه html خود می توانیم از تگ <img> استفاده کنیم. در مورد تگ عکس یا همون <img> بگم تگی هست که نیاز به بسته شدن نداره! و تو این تگ از صفت های (Attribute) ؛

alt = برای کاربرانی که به دلایلی نمی توانند عکس را مشاهده کنند یا عکس بارگذاری نمیشه ، مقدار این صفت برای کاربر بعنوان اطلاعات جایگزین نشون داده می شود!

src= مقدار این صفت برابرست با آدرس عکس مورد نظرمون. خب برای درک بیشتر مطلب به مثال زیر دقت کنید:

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

وقتی که کاربر وارد سایت میشه با خواندن مطالب متوجه این میشه که موضوع مطالب چی هست! اما موتورهای جست و جوگر همه مطالب سایت رو متن (text) در نظر میگیرند و اینکه مرتبط با چه موضوعی هست رو نمیتونند تشخیص بدهند. با استفاده از تگ های microdata به موتورهای جست و جوگر میفهمونیم که موضوغ مطلب چی هست! به عنوان مثال که این مطلب در مورد شخص هست یا یک محصول یا یک مکان و ...! این تگ ها در html5  استفاده میشه و شما میتونید توی سایت http://sechma.org (توسط همین سایت تعریف و استاندارد شده هست) ببینید.

چگونه از microdata استفاده کنیم ؟

بعنوان فردی که وبسایت طراحی میکنید و یا دارنده یه وبسایت هستید حتما اسم " متا تگ ها " رو شنیده اید و یا اینکه اهمیت نقش آن ها را در سئو وبسایت متوجه شده اید! در این پست میخام انواع مختلف متا تگ ها رو توضیح بدم.

 

متا تگ چیست ؟

تگ (بر چسب ) به معنی مخفف کلمه ای ست که برای شناسای یک شی به آن نسبت داده میشود.

تگ های متا بین تگ <head ...</head> قرار میگیرن و با کلمه meta شروع میشن! 


<head>
  <meta name="" content="">
</head>

انواع متا تگ ها

 

 

 

بخش دوم ساختار و اصول اولیه نوشتن کد های اچ تی ام ال

نرم افزار مورد نیاز :

 

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

همچین چیزی اصلا درست نیس!!! درسته که یه سری نرم افزارها هستن که کدنویسی را

راحتر میکنند و یه سری دیگر بصورت ویژوال کار طراحی رو انجام میدن! اما بطور کلی برای کد نویسی وب

شما به یک ویرایشگر متن به سادگی “نوت پد” ویندوز، به برنامه دیگری نیاز ندارید! و یا حداکثر برنامه های

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

 

 

اصول نوشتن کدهای html

 

اچ تی ام ال از شناسه ها یا همان تگ ها ساخته شده هست. خب این تگ ها چی هستند و به چه صورتی نوشته می شوند.

هر تگ اچ تی ام ال با علامت  کوچکتر ریاضی > باز می شود و با علامت بزرگتری < به پایان می رسد.       <تگ>

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

 

 

زبان HTML (اچ تی ام ال) اولین ، ساده ترین ، پرکاربردترین و مهم ترین زبان برای طراحی وب هست.

HTML یکی از محدود زبان هایی هست که مرورگرها قابلیت خواندن و معنی کردن آن رو به صورت مستقیم دارند.و کاربرد بیشتر زبان های مانند php و … هم در واقع برای مدیریت بهتر بر روی HTML است ، در واقع از همین نکته هم می شود از اهمیت این زبان با خبر شد

طراحی وب استاتیک و دینامیک

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

 

مشاهده عکس