ایده پردازان
ایده پردازان
عبارت مورد نظر خود را جستجو نمایید
B2B bertonix content marketing dmark Google Ads host HTML ISP NLP PR pwconf startupgrind video marketing آداب اداری اثر مرکب احتیاط در ریسک کردن است! اخبار جعلی اخبار جعلی و کسب و کارها اخلاق در کار از خوب به عالی استارتاپ گرایند استخدام استراتژی اقیانوس آبی استراتژی های اثر بخش تبلیغات استرس استودیو ایده پردازان استوری اینستاگرام اشتراک‌گذاری محتوا افزایش دنبال کننده در اینستاگرام افزایش ممبر الوپیک انتقاد اندروید انگیزه ایجاد انگیزه در کارکنان ایده ایده های جدید برای توسعه‌ ی کسب و کار در اینستاگرام ایده پردازان ایده پردازم ایلان ماسک و ده قانون موفقیت او ایمیل مارکتینگ اینستاگرام اینستاگرام مارکتنیگ اینستاگرام مارکتینگ بازار ارز بازار بورس بازار سکه بازاریابی بازاریابی ایمیلی بازاریابی اینترنتی بازاریابی تلفنی بازاریابی در وکالت بازاریابی دیجیتال بازاریابی رویدادی بازاریابی سال ۲۰۲۰ بازاریابی محتوا بازاریابی مستقیم بازاریابی ویدیویی بازاریابی ویروسی بازاریابی چریکی بازیچه دست دیگران نباشید بحران کسب و کارها برتونیکس برنامه ایده پردازان برنامه نویسی برند سازی برندسازی شخصی بهانه بی بهانه بهینه سازی محتوا بهینه سازی موتور جستجو بهینه سازی گوگل بیت کوین تامین تجهیزات تبلیغات تبلیغات بازاریابی تبلیغات در گوگل تبلیغات کلیکی تجارت الکترونیک ترفندهای موفقیت تواضع توانمندسازی توسعه کسب و کار تولید محتوا تولید محتوای ویدیویی توییتر تپ‌سی تکنیک فروش تکنیک های وبلاگ نویسی تیزر تبلیغاتی تیم کوک و ده قانون موفقیت او جذب مشتری جعل خبر جف بزوس و ده قانون موفقیت او جلسات کاری جلسه حفظ تمرکز کارمندان حمایت خانواده موفق خرده فروشی خلاقیت خلق بهترین سال زندگی خودافشایی داستان های یک مدیر مارکتینگ دروغ رسانه ای ده قانون موفقیت بیل گیتس دورکاری دورکاری شرکت ها دیجیتال مارکتینگ دی مارک دینامیت موفقیت راه های بهبود نتایج جستجوی گوگل راهکارهای رشد کسب و کار راهکارهای مدیریتی رخت ایرانی رسانه های اجتماعی رشد شخصی رشد غیرمنتظره فروش رفتار سازمانی مثبت رهبران ارزش آفرین رهبری روان‌شناسی روان‌شناسی مدیریت روان‌شناسی کار روزمرگی ریسک سرمایه گذاری زبان بدن زندگی به همین سادگی سئو ساخت موشن گرافیک ساخت هویت تجاری سازماندهی ساماندهی سخنوری سرمایه سلامت سوپر مارکت شبکه های اجتماعی شبکه‌های اجتماعی شکست کسب و کار شیرینی صفحه اول گوگل طراحی سایت طراحی لوگو طراحی محیط طراحی گرافیک طوفان فکری عادت عادت های مثبت عملکرد شغلی فرسودگی شغلی فرهنگ سازمانی فروش فروشنده باهوش فروشگاه اینترنتی فریلنسر فناوری فینتک قدرت بیان قدرت زمان قدرت فروش قدرت مذاکره قرارداد لینکدین مارکتینگ مارکتینگ پلن مارک زاکربرگ متقاعد کردن مثبت اندیشی مثل یک بیلیونر فکر کنید مجموعه ی کارآمد محتوا محصول مدیریت مدیریت بحران مدیریت ریسک مدیریت زمان مدیریت منابع انسانی مدیریت پروژه مدیریت کسب و کار مزیت رقابتی مسئولیت‌پذیری مستر تیستر مشاغل بازاریابی مشاغل محلی مشتری مداری مصاحبه معرفی کتاب منابع انسانی منابع مالی مهارت های تخصصی موتور جستجوی گوگل موتورهای جستجو موشن گرافیک موفقیت موفقیت در بازار کار موقعیت شغلی میوه فروشی نوآوری در مدیریت نکات مهم برگزاری جلسات نیروی کار نیلپر هاست و سرور هدف هشتگ همدلی هوش اجتماعی هوش خلاق واتس آپ وب فارسی وبلاگ نویسی وب مارکتینگ وبینار وقت شناسی ویدئو مارکتینگ ویدیو ویدیو مارکتینگ ویروس کرونا ویروس کرونا و دورکاری ویژگی های لازم یک مدیر پاپکو پخش زنده پول سازی با بازاریابی اینترنتی پویایی پیتر دراکر و ده قانون موفقیت او چطور با هر شخصی صحبت کنیم چه کسی تغییر را کشت چک و سفته کارآفرینی کارآفرینی زنان کارافرینی کارمند بد قلق کافه تهرون کتابفروشی کرونا کرونا و اقتصاد کسب و کار کسب و کار آنلاین کسب و کار خانگی کسب و کار موفق کسب و کارها در کرونا کسب و کارهای اینترنتی کسب و کارهای زنانه کسب و کارهای کوچک کسب و کار کوچک کلانا کلمات کلیدی کمپین حمایت کسب و کار کمپین‌های تبلیغاتی کپی رایتینگ گاو بنفش گزارش گل فروشی یوتیوب
۱۳۹۶/۰۷/۱۸
2,180 بازدید
۲ دیدگاه
اشتراک گذاری

ده دوازده سال پیش زمانی که با اینترنت آشنا شدم کار وبلاگ نویسی خودم رو هم شروع کردم. وبلاگی داشتم برای دانلود انواع نرم افزار که از وب سایت های دیگه کپی می کردم و توی وبلاگ خودم میذاشتم. بازدیدکننده های اون وبلاگ هم دوستان و اقوامم بودن که مدام ازشون می خواستم برای دانلود نرم افزارها به وبلاگم مراجعه کنند و نظر بذارن و …

اگر شما هم وبلاگ نویسی کرده باشید حتما با واژه قالب آشنا هستید. قالب هایی بودن مخصوص وبلاگ ها که پر بود از کدهای HTML . من هیچوقت این کدهارو درک نمی کردم. تنها کاری هم که برای تغییر قالب باید انجام می دادیم کپی کردن حدودا ۱۰۰ خط کد توی قسمت قالب وبلاگ بود. با اینکه هیچ کاری نبود که بلد نباشم با کامپیوتر انجام بدم ولی هیچوقت سراغ یادگیری این موضوعات نمی رفتم. خیال می کردم خیلی دشواره که آدم بتونه این همه جملات عجیب و غریب رو حفظ کنه!

 

 

زمان می گذشت و من سایت ها و انجمن های زیادی رو راه اندازی می کردم. ولی با CMS های آماده که نیازی به دانش برنامه نویسی نداشت. همیشه هم ارتباطم با کدها در حد Copy و Paste کردن بود. حتی به خودم زحمت خوندنشون هم نمی دادم.

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

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

در قسمت های اول این دوره من به آموزش زبان HTML 5 خواهم پرداخت که پیش نیاز برنامه نویسی و طراحی هر وب سایتی ست.

 

HTML چیست ؟

قبل از هر چیز باید بدانیم HTML چیست و چرا پیش نیاز طراحی و برنامه نویسی وب به حساب می آید.

HTML مخفف Hyper Text Markup Language بوده و شاید بهترین ترجمه برای آن (زبان نشانه گذاری فوق متن) باشد.

 

نمونه کد نوشته شده به زبان HTML

 

همانطور که در مقدمه این دوره نیز ذکر کردم HTML زبان برنامه نویسی نیست و شما از آن فقط برای مشخص کردن اِلمان ها و نوشتن متن های وب سایت استفاده خواهید کرد. ولی باید این را بدانید که در نهایت از هر زبانی که برای برنامه نویسی وب سایتتان استفاده کنید ( مانند PHP ) در سمت سرور به HTML تبدیل میگردد تا برای مرورگرها قابل درک و نمایش باشد.

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

برای طراحی صفحات HTML شما نیاز به هیچ نرم افزار خاصی ندارید. کافیست ویرایشگر متن سیستم عامل خود را باز کرده و شروع به نوشتن کنید. در نهایت کافیست فایل را با پسوند .html ذخیره کنید.

نوشتن کد html در notepad

من هم برای شروع همین کار را کردم. در واقع برای برنامه نویسی نرم افزارهای مخصوصی وجود دارد، ولی این نرم افزارها به علت قابلیت Auto Complete (کامل کردن خودکار کد) باعث می شوند در شروع کار مغز ما تنبل شده و ساختار کلی نوشتن کدهارا فرا نگیرد.

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

 

حال در همین فایل شروع به نوشتن این کد ها کنید. (آن هارا کپی نکنید) !

 

<!DOCTYPE html>
<html>
      <head>
         <title>Document</title>
      </head>
   <body>
      <h1>Hello World!</h1>
   </body>
</html>

 

هر فایل HTML دارای ساختار مشخص و از پیش تعیین شده ای ایست که آن را توضیح می دهم.

در خط اول ما متنی داریم که در HTML به آن تگ می گوییم. این تگ به مروگر می فهماند که این فایل یک HTML از نوع HTML 5 می باشد که آخرین نسخه HTML است. بدون نوشتن این خط نیز مرورگرهای جدید متوجه HTML 5 بودن آن می شوند ولی بهتر است برای اجرای بدون مشکل در مرورگرهای قدیمی این خط کد را بنویسیم.

همان طور که می بینید هر تگ با > شروع می شود و در واقع نام تگ و پارامترها یا در واقع Attribute های هر تگ HTML درون آن نوشته شده و با < بسته می شود. ولی این نوع تگ ها در HTML تگ هایی هستند که درونشان هیچ فرزندی قرار نمی گیرد. در رابطه با والد و فرزند یا ( Child – Parrent ) در HTML توضیح خواهم داد. فقط این را بدانید که اکثر تگ های در HTML قابلیت این را دارند که تگ های دیگری را درون خودشان به عنوان فرزند یا Child داشته باشند.

خط بعد که شروع تگ HTML ماست به این صورت است‌ :

<html>

در واقع این تگ به این صورت نوشته می شود :

<html></html>

و تگ های بعدی به ترتیب در بین آن . به این معنی که برای باز کردن هر تگ در HTML آن را باز کرده و پس از نوشتن کدهای دیگر در آن تگ را می بندیم . در اینجا تگ های head و body فرزندان html هستند. شاید بپرسید پس تکلیف title و h1 چه می شود! بله درست حدس زدید. این تگ ها نوه html یا در واقع نسل دو تگ html ما محسوب می شوند. زیرا هر کدام فرزند تگ head و تگ body هستند .

شاید تا اینجا برایتان نام تگ ها جالب باشد. head و body ! سر و بدن ! به دقت به این تصویر نگاه کنید :

 

ساختار اچ تی ام ال

 

در تگ head هر فایل HTML در واقع تنظیمات و چیزهایی قرار داده می شود که قابل نمایش در مرورگر ما نیست. هر چه را در مرورگر می بینیم در تگ body قرار می گیرد.

حال فایل html خود را ذخیره کنید و آن را با مرورگر خود باز کنید. تبریک! شما اولین وب سایت خودتان را نوشتید.

در این سایت چه می بینید؟ یک Hello World بزرگ! در واقع از این به بعد یادگیری هر زبان رو با همین جمله آغاز خواهیم کرد.

در قسمت tab مرورگتان نیز کلمه Document را می بینید. سعی کنید این دو کلمه را تغییر داده و با مجددا فایل را باز کنید.

جالب است نه؟ تگ h1 که نوشته ایم به عنوان header یا تیتر به کار می رود. هر چه این تگ عدد کوچکتری (بین ۱ تا ۶) داشته باشد سایز آن بزرگتر خواهد بود. آن را هم تغییر دهید و یا کپی کنید و در خط های بعدی تگ های مختلفی بنویسید.

در این تصویر تمامی تگ های مورد استفاده در HTML را میبینید. برای نمایش کامل آن را ذخیره کنید.

 

پیشنهاد میکنم این تگ ها را نوشته و آن ها را هم تست کنید. البته اکثر آن ها چیزی برای نمایش ندارند.

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

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

تا جلسه بعد خدانگهدار.

 

 

پیوستن به خانواده ایده پردازان

مقالات مرتبط

مطالبی که شاید برای شما جذاب باشند

دیدگاه های شما

لطفا دیدگاههای خود را با ما در میان بگذارید

2 پاسخ به “دوره برنامه نویسی وب (معرفی HTML)”

  1. مرتضی گفت:

    بسیار عالی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *