طراحی سایت - سئو سایت

طراحی سایت - سئو سایت - بهینه سازی سایت

طراحی سایت - سئو سایت

طراحی سایت - سئو سایت - بهینه سازی سایت

طراحی سایت - طراحی وب سایت - ساخت سایت- سئو سایت - بهینه سازی سایت -سئو و بهینه سازی سایت

۳ مطلب با کلمه‌ی کلیدی «آموزش html» ثبت شده است

  • ۰
  • ۰

آیا در آینده HTML6 نیز خواهیم داشت ؟ : دنیای طراحی وب دائما در حال پیشرفت و ارتقاء است . مثلا حدود ۱۰ سال پیش ، راه و روش هایی چون طراحی سایت ریسپانسیو ، یا تصاویر SVG (SVG Images) ، و یا حتی وب فونت ها (Web Fonts) ، … جزئی از فهرست مهارت های ضروری یک طراح وب سایت نبودند ، اما امروزه اینطور نیست و تمام این مهارت ها ضروری هستند و نقش مهمی در در ساخت یک وب سایت ایفا می کنند .

html6

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

یکی از پیشرفت های اخیر صنعت طراحی وب که تاثیر چشمگیری بر کار طراحی سایت داشته ، معرفی HTML5 است . این نسخه جدید از زبان نشانه گذاری ابر متن (HyperText Markup Language) عناصر ساختاریافته جدیدی از جمله ورودی فرم های جدید و تعدادی ویژگی پیشرفته دیگر که مناسب برای ساختن وب اپلیکیشن ها است ، مانند دخیره سازی لوکال ، drag and drop ، … را در اختیار طراحان وب سایت قرار داده است .

در سال های اخیر پس از آمدن HTML5 ، به ندرت طراحی را می یابید که از این نسخه جدید HTML استفاده نکند . حال پرسشی که مطرح است این است که ” آیا در آینده HTML6 نیز خواهیم داشت ؟ ” پاسخ این سوال هم بله و هم خیر است . در ادامه این مطلب به توضیح بیشتر درباره این موضوع خواهیم پرداخت .

حالت و مشخصات ساختار HTML

در سال های اخیر ، طراحان وب سایت HTML را با استفاده از امکاناتی که نسخه های جدید آن در اختیارشان قرار داده ، توسعه داده اند ( مانند HTML4 , HTML5 , …) . بنابراین ، وقتی نسخه جدیدی منتشر می شود که دارای ویژگی ها و امکانات پیشرفته و مورد نیاز طراحان وب نیست ، باید منتظر انتشار نسخه بعدی بمانند که این امر موجب به ثمر نرسیدن طرح مطلوب آن ها می شود .

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

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

پس تکلیف HTML6   در طراحی سایت چه می شود ؟

برگردیم به موضوع مقاله ، آیا HTML6 منتشر خواهد شد ؟ . علت اینکه در مقدمه مطلب گفتم جواب این سوال هم بله و هم خیر است ، این است که دیگر نسخه های بعدی این زبان به طور رسمی و شماره بندی شده منتشر نخواهند شد و امکانات جدید این زبان در آینده به طور آنی به آن اضافه و قابل استفاده خواهند شد . پس نبودن نسخه بعدی ، یعنی HTML6 ، به معنی توقف پیشرفت این تکنولوژی و نسخه HTML5 نیست .

در حقیقت ، تعدادی پیشرفت و تغییر اساسی در تکنولوژی HTML پس از آمدن HTML5 در سال های اخیر رخ داده است . این علت ” بله ” بودن آن پرسش است ، چرا که به طور حتمی پیشرفت های تازه زبان HTML همچنان جای بهبود و پیشرفت بیشتر پیدا کردن را دارد ، تنها دیگر برچسب شماره بندی شده (مثلا HTML6) بر روی پیشرفت های آتی این تکنولوژی نخواهد بود .

زبان HTML که در حال حاضر مورد استفاده قرار گرفته است ، در واقع دیگر HTML5 نیست ، اما چون این عبارت در بین طراحان وب سایت رایج و مصطلح شده است ، همچنان این واژه را برای بیان اینکه از به روزترین امکانات تکنولوژی HTML استفاده می کنند ، به کار می برند . بنا به همین دلیل ، هنوز در آگهی های اعلام فرصت های شغلی می بینید که برای استخدام یک توسعه دهنده قالب وب سایت (front-end developer) از عبارت ” مسلط به HTML5 ” استفاده می کنند و این مهارت را ضروری می دانند ؛ در صورتی که با توجه به مطالبی که تا اینجا درباره HTML گفته شد و همینطور در نظر گرفتن مدل فعلی توسعه آن پس از HTML5 که به مدل توسعه آنی تغییر یافته است ، ضروری دانستن داشتن مهارت به کار بگیری صحیح تکنولوژی HTML در طراحی و توسعه وب سایت بیانی صحیح و مناسب به ویژه در آگهی های استخدام و فرصت های شغلی است .

مطالعه بیشتر در زمینه تکنولوژی HTML در طراحی سایت

برای عزیزان علاقه مند به کار در زمینه وب و طراحی سایت ، برای شروع کار و یادگیری مهارت های پایه ای در این تخصص ابتدا فراگیری تکنولوژی HTML توصیه می شود . برای مطالعه درباره این زبان ، وب سایت رسمی و جهانی استانداردهای وب به آدرس www.w3.org توصیه می شود و جهت یادگیری اسکریپت های آن می توانید از وب سایت های آموزشی موجود در فضای وب ، مانند w3schools.com , beyamooz.com , codeacademy.com , … وسایر منابع آموزشی موجود به طور رایگان استفاده کنید .

  • reza saeidy
  • ۰
  • ۰

آموزش HTML

بخش اول :

نگاه کلی

اچ تی ام ال چیست ؟

 

 

آموزش html 

به html  خوش امدید !

Html  مخفف شده ی Hyper Text Markup Language است .

•    Hypertext:بر میگردد به اینکه کدام صفحات وب با هم لینک شده اند و سپس لینک در دسترس در صفحه وب HyperText نامیده می شود .

•    MarkupLanguage: به این معنی که شما از Html استفاده می کنید تا به آسانی محتوای متن را با تگ ها mark up  کنید ( برچسب بزنید ) که به مرورگر وب بگویید چگونه ساختار را نشان دهد .

ساختار وب :

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

ساختار وب مدرن

Html: ساختار

Php or similar: backend

Css: نمایش

cms: مدیریت محتوا

Javascript: رفتار

ساختار ابتدایی Document Html

اگرچه طی سالها ورژن های مختلفی از Html منتشر شده ، اما اصول مبتدی Html  تغییری نکرده است .

یک زبان Markup از تگ استفاده می کند .

برای مثال < p> یک تگ Html است ، برای تعریف یک پاراگراف به کار برده می شود .

تگ ها در اچ تی ام ال ۲  قسمت دارند .

۱) تگ باز یا آغازین         ۲ ) تگ بسته یا پایانی

Example 1

<p> I am a paragraph </p>

در مثال بالا <p> تگ باز است و p>/> تگ بسته .

تگ <Html>  هر برنامه ای که با زبان Html  نوشته می شود با تگ <Html> شروع و با تگ <Html/> پایان می یابد .

Example 2)
<html> …. </html>

تگ <head> بلافاصله پس از < html> با تگ <head> مواجه می شویم . این تگ تمام عناصری که نادیدنی هستند و به ساخت صفحه کمک می کنند را شامل می شوند .

Example3

<html>
<head>
</head>
</html>

تگbody>> در ادامه ی تگ <head> می آید . تمام عناصر قابل رویت از جمله سر تیترها ، پاراگراف ها ، لیست ها ، متن ها ، عکس ها و … فقط بخش کوچکی از عناصری هستند که در این تگ قرار می گیرند .

Example 4

<html>
<head>
</head>
<body>
<p> I am a paragraph </p>
</body>
</html>
تگ <title>  در نوار شرح ، نمایان کنید .
عنصر < title> در بدنه ی تگ < head>  قرار می گیرد .
Example 5)
<html>
<head>
<title>
Professorweb example
</title>
</head>
<body>
<p> I am a paragraph </p>
</body>
</html>

اولین صفحه html خود را بسازید
فایل های Html فایل های متنی هستند ، بنابراین شما از هر texteditor  یا برنامه ی ویرایش متنی میتوانید متنی میتوانید برای نوشتن اولین صفحه ی وب خود استفاده کنید .
برنامه های ویرایش متن متنوعی وجود دارند ، ما برای آغاز Notepad پیشنهاد می کنیم .

Example 5

<html>
<head>
<title>
My first example
</title>
</head>
<body>
<p> this is my first html code.</p>
</body>
</html>

کد بالا را در notepad وارد می کنیم .
فایلمان را با پسوند htm. یا .html ذخیره میکنیم ، برای مثال ما فایلمان را با نام first.html ذخیره میکنیم . حال می توانیم نتیجه را در مرورگر ببینیم .

اولین بخش html تموم شد
باتشکر از نگاه گرمتان  با ما همراه باشید .  فعلا …


بخش دوم :

اصول ابتدایی Html

تگ <br/>
با قرار دادن تگ <br/> در یک پاراگراف میتوانیم ادامه ی مطلب را به خط بعدی منتقل کنیم .

Example 6

<html>
<head>
<title>
My first example
</title>
</head>
<body>
<p> this is my first code with html tutorial ifeel that<br/> ilove be a programmer.</p>
</body>
</html>

نتیجه ی کد بالا :

تفاوت <br/> با پاراگراف های جداگانه :

Example 7

<html>
<head>
<title>
My first example
</title>
</head>
<body>
<p> this is a paragraph.</p>
<p>this is another paragraph.</p>
<p>this is<br/> a line break.</p>
</body>
</html>

همانطور که مشاهده می کنید تگ < br/> فقط ادامه ی مطلب را به خط بعد منتقل میکند در صورتی که تعریف پاراگراف جدید با تگ <p>  یک خط فاصله قبل و بعد از پاراگراف ایجاد میکند .

استفاده از تگ <h1><h2><h3><h4><h5><h6>  در طراحی سایت

این تگ برای عنوان گذاری به کار میرود ۶ سایز مختلف دارد . تگ <h1> بزرگترین و <h6> کوچکترین است . این تگ نیز یک سطر فاصله قبل و بعد از پاراگراف ایجاد میکند .

Example8
<html>
<head>
<title>
My first example
</title>
</head>
<body>
<h1>this is my first html code.</h1>
<h2>this is my first html code.</h2>
<h3>this is my first html code.</h3>
<h4>this is my first html code.</h4>
<h5>this is my first html code.</h5>
<h6>this is my first html code.</h6>
</body>
</html>

نتیجه کد بالا :

قالب بندی متنها  در آموزش Html:

عناصر قالب بندی :

در html عناصری مخصوص به قلم نوشته وجود دارند که با مثال آنها را معرفی میکنیم :

Example9

<html>
<head>
<title>
My first example
</title>
</head>
<body>
</p>
این یک متن معمولی است. <p>
</b></p>
این یک متن bold شده است. <p><b>
</big></p>
این یک متن بزرگ شده است. <p><big>
</i></p>
این یک متن به سبک ایتالیک است. <p><i>
</small></p>
این یک متن کوچک شده است. <p><small>
Strong text </strong></p> <p><strong>
<p><sub>  subscripted text</sub></p>
<p><sup> supscripted text <sup></p>
<p><ins>inserted text</ins></p>
<p><del> deleted text</del></p>
</body>
</html>
خط افقی <hr/>
Example10)
<html>
<head>
<title>
My first example
</title>
</head>
<body>
<p>this is my first html code.</p>
<hr />
<p> this is a paragraph</p>
</body>
</html>

دومین بخش آموزش html به پایان رسید .

با تشکر از نگاه گرمتان با آموزش html با ما همراه باشید
  • reza saeidy
  • ۰
  • ۰
اچ تی ام ال چیست ؟

 

طراحی سایت با html

 

به html  خوش امدید !

Html  مخفف شده ی Hyper Text Markup Language است .

•    Hypertext:بر میگردد به اینکه کدام صفحات وب با هم لینک شده اند و سپس لینک در دسترس در صفحه وب HyperText نامیده می شود .

•    MarkupLanguage: به این معنی که شما از Html استفاده می کنید تا به آسانی محتوای متن را با تگ ها mark up  کنید ( برچسب بزنید ) که به مرورگر وب بگویید چگونه ساختار را نشان دهد . 

ساختار وب :

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

ساختار وب مدرن

Html: ساختار   

Php or similar: backend

Css: نمایش 

cms: مدیریت محتوا

Javascript: رفتار