آموزش مقدماتی HTML – جلسه اول

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

برنامه های مورد نیار برای کدنویسی Html :

۱- برنامه ای برای نوشتن کدهای Html مثل notepad ( پیشنهاد ما برای شما برنامه  ++notepad )

۲- برنامه ای برای نمایش نتیجه کد نویسی (مرورگر وب) ترجیحا موزیلا

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

<html>


</html>

نکته مهم : مرورگر، تگ های HTML را نمایش نمی دهد، اما از تگ های HTML استفاده می کند تا محتوای صفحه را تفسیر کند.

 

داخل تگ html از دو قسمت اصلی تشکیل شده است

۱- قسمت head : از این قسمت برای فراخوانی لینک های خارجی و گذاشتن برخی تگ ها استفاده میشود مثل تگ ( title ). این قسمت اc سایت برای موتورهای جست جو و برای مرورگرها بسیار مهم میباشد ولی در zاهر سایت دخالتی ندارد. قسمت head  همچنین برای سئو سایت نیز بسیار کلیدی می باشد که در مطالب بعد به آن اشاره خواهد شد. برای ایجاد این قسمت تگ head  را مانند html باز و بسته کنید.

۲- قسمت body : این قسمت برای نمایش سایت می باشد و هرآنچه که در این قسمت قرار بگیرد ( عکس ، فیلم ، متن ، لینک و… ) به کاربر نمایش داده می شود.برای ایجاد این قسمت تگ  body را مانند html باز و بسته کنید.

 

<html>
<head>


</head>
<body>


</body>
</html>

تگ های مهم برای قسمت HEAD :

۱- تگ title : عنوانی که در تب مرورگر نمایش داده می شود درج می شود و نتایج موتور های جستجو بر اساس محتویات عنصر title گزارش می شود. ضروری است و نیاز است که همیشه نوشته شود.

<title>عنوان سایت</title>

۲- تگ link : برای ارتباط با یک فایل خارجی مثل فایل css .

<link rel="stylesheet" type="text/css" href="solutionz/mystyle.css" />

۳- تگ meta : اطلاهاتی در مورد فایل hml ما می دهد البته برای ماشین های جست و جو. برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده استفاده می شوند. مهم ترین meta ها برای سایت keywords و description می باشد.

<meta name="description" content=”سلوشنز راهکارهای مبتنی بر آی تی" >
<meta name="keywords" content="سلوشنز,راهکار," >

۴- تگ Style : از این تگ برای استایل دهی در قسمت head مورد استفاده قرار می گیرد


<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

تگ های مورد استفاده در body :
تک های بسیار زیادی برای استفاده در قسمت body وجود دارد که هرکدام کاربرد مخصوص به خود را دارند و یادگیری آن نیاز به زمان دارد. ما برخی از تگ های پر کاربرد را برای شما آماده کرده ایم.

۱- تگ div : شما می توانید با استفاده از این تگ صفحه وب را تقسیم بندی کنید. مثل قسمت footer , header, و..
۲- تگ p : برای ایجاد یک پاراگراف در صفحه به کار می رود .
۳- تگ a : برای ایجاد یک لینک به کار می رود .
۴- تگ b : برای توپر کردن نوشته ( Bold ) به کار می رود .
۵- تگ br : برای ایجاد یک خط جدید به کار می رود .
۶- تگ blockqute : برای ایجاد یک نقل قول به کار می رود .
۷- تگ h1تاh6 : برای ایجاد انواع تیترها در نوشته به کار می رود .
و…

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

 

<html>
<head>


</head>
<body>

<div>
< b > سلوشنز راهکارهای مبتنی بر آی تی < /b >
< a href="http://solutionz.ir/" > Click< /a >
< p >سلوشنز راهکارهای مبتنی بر آی تی < /p >

< h1 >  header 1 < /h1 >
< h2 >header 2 < /h2 >
< h3 >  header 3 < /h3 >
< h4 >header 4< < /h4 >
< h5 >header 5 < /h5 >
< h6 > header 6 < /h6 >
< blockqute >
  سلوشنز راهکارهای مبتنی بر آی تی
< /blockquote >
</div>

</body>
</html>

در مطالب بعدی به صورت تکمیلی تمامی قسمت هارا آموزش خواهیم داد

نگارش و انتشار توسط ابراهیم عادلی

فعال در زمینه های : طراحی رابط کاربری UI ، توسعه و طراحی وب ، تولید محتوی مارکتینگ گوگل

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.