بخش اول :
نگاه کلی
اچ تی ام ال چیست ؟
فهرست مطالب
به 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 با ما همراه باشید . فعلا .
پروژه‌ای در ذهن دارید؟
همین حالا مشاوره‌ی رایگان دریافت کنید.
مقالات مرتبط
آموزش سئو سایت وردپرس در طراحی سایت با وردپرس
آموزش سئو سایت وردپرس در طراحی سایت با وردپرس : همانطور که می دانید برای سهولت در کار طراحی سایت در دنیای وب تعداد زیادی سیستم مدیریت محتوا یا همان CMS (Content Management Systemm) وجود دارد که در این بین یکی از برجسته ترین آن ها ، سیستم مدیریت محتوای وردپرس (WordPress) می باشد که امروزه […]
طراحی ربات تلگرام آموزش زبان انگلیسی
طراحی ربات تلگرام آموزش زبان انگلیسی: امروزه استفاده از شبکه های اجتماعی تبدی به یکی از بزرگترین فاکتورهای بازاریابی اینترنتی شده است . یکی از بزرگترین شبکه های اجتماعی که در کشور کاربران بالایی دارد تلگرام می باشد از این رو بهترین موعیت برای بازاریابان اینترنتی فراهم شده تا با اشتفاده از تجربه بالای خود […]
نکات کلیدی در طراحی سایت فروشگاهی | فروشگاه اینترنتی
نکات کلیدی در طراحی سایت فروشگاهی | فروشگاه اینترنتی : طراحی سایت وب نوش متشکل از گروه طراحی حرفه ای در زمینه طراحی فروشگاه اینترنتی و طراحی سایت شرکتی می باشد. که دارای سابقه ای طولانی می باشند. برای پیاده سازی ایده های خود می توانید با مشاوره طراحی سایت وب نوش تماس بگیرید : […]