بخش اول :
نگاه کلی
اچ تی ام ال چیست ؟
به 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 با ما همراه باشید