آموزش طراحی سایت رایگان

سعید رحیمی وبلاگ 21 آوریل 2019

خانه ⁄ وبلاگ ⁄ آموزش طراحی سایت رایگان

آموزش طراحی سایت رایگان

در این بخش آموزشی می خواهیم شما را با ساخت یک سایت ساده با زبان html 5 آشنا کنیم، توجه داشته باشید که در این آموزش تنها ما قصد داریم از html استفاده کنیم و طرح های گرافیکی بر روی آن ایجاد نمی شوند. این مقاله اختصاصی سایت دیبا ارتباط می باشد و تمامی منابع آموزشی این مقاله مختص به سایت می باشد و حق کپی رایت از این مقاله با ذکر منبع مجاز می باشد. برای ساخت سریع یک سایت همراه دیبا ارتباط باشید.

ساخت سایت بهمراه بوت استرپ 4

این مقاله در ارتباط با مقاله طراحی سایت با bootstrap می باشد پس اگر تاکنون این مقاله را مطالعه نکرده اید حتما بر روی لینک کلیک کرده و آن را مطالعه کنید. برای شروع کار ما باید از طریق سایت بوت استرپ آخرین ورژن آنرا نصب کرده باشیم. برای دانلود وارد سایت بوت استرپ می شویم. بعد از دانلود کردن آخرین نسخه این فریم ورک ما آنرا در یک پوشه می ریزیم. حال وقت آن رسیده است که یک فایل Html یا ایجاد کنیم. برای ساخت و مدیریت یک فایل ما می توانیم از IDE های مختلفی استفاده کنیم، که پیشنهاد ما برای شما تازه کار ها Notpad++ می باشد. بعد از نصب کردن این برنامه آنرا اجرا کنید و داخل آن محتوایی بنویسید و در انتها برای ذخیره کردن فرمت آنرا بر روی HTml یا Htm ذخیره کنید، بدین شکل فایل شما به یک صفحه وب تبدیل می شود.

آشنایی با تگ های اصلی html

بطور کلی ما برای ساخت یک صفحه وب حتما باید از تگ html استفاده کرده باشیم، توجه داشته باشید که ما دو نوع تگ داریم که می توانیم آنها را به تگ های تک خطه و یا چندین خطه تقدیم بندی کرده باشیم. در تگ های تک خطه ما می توانیم کد خود را تنها در یک خط اجرا کنیم اما در تگ های چندین خط این کد در خطوط مختلف می تواند اجرا شود، به اصطلاح به این تگ ها inline Element و Block Element گفته می شود. تگ html ما جز تگ های چند خطی به جساب می آید و از یک تگ شروع کنند و پایان دهنده تشکیل می شود : <html> – </html>

تگ های درونی Html

درون تگ html ما دو تگ اصلی دیگر تشکیل شده است که می تواند محتوای کلی سایت شما را نشان دهد. اولین تگ Head می باشد که یک شروع کنند و پایان دهنده دارد و به اصطلاح یک Inline Element می باشد. توجه داشته باشید که تمام جزییات داخل head می تواند به سئوی یک سایت کاملا تاثیر گذار باشد. در این بخش شما می توانید با موتور های جست و جوگر ارتباط برقرار کرده باشید که کد های مخصوص خود را دارند، در ادامه آموزش ها ما این کد ها را با شما آشنا خواهیم کرد. اما تگ بعدی Body می باشد، همانطور که از نام این تگ مشخص می باشد بدنه سایت محتوای اصلی و یا کاربردی سایت می باشد، شما هر آنچه درون این قسمت می نویسید به کاربران شما نمایش داده می شود.

پس در این قسمت آموختیم درون تگ html دو تگ اصلی Head و Body قرار دارد که وظیفه هرکدام برای شما شرح داده شد. اما درون تگ Head یک تگ مهم دیگر وجود دارد که می تواند عنوان سایت شما را به موتور های جست و جوگر و کاربران نمایش دهد. شما با نوشتن تگ Title می توانید عنوانی برای سایت خود در قسمت بالای مرورگر ها به نمایش بگذارید. این تگ بصورت باز و بسته می باشد و در وسط این کد شما می توانید عنوان فارسی و یا انگلیسی خود را وارد کرده باشید. استفاده کردن از کلمات کلیدی و کوتاه در این بخش می تواند برای شما مفید باشد و از نظر گوگل یک سئو در سرچ کاربران می باشد. در قسمت زیر شما با طرح اصلی یک صفحه Html آشنا خوهید شد.

<html>

<head>

<title>عنوان شما</title>

</head>

<body>

محل نوشتن کد های شما

</body>

</html>

تگ های اساسی در body

حال قصد داریم چندتا از تگ های اساسی در body را به شما آموزش دهیم، توجه داشته باشید که ما برای نوشتن یک کلمه هم باید یک تگ را ایجاد کنیم و در داخل آن متن خود را بنویسیم. بطور کلی ما برای نوشتن یک متن از تگ – استفاده می کنیم. در این قسمت p به معنای یک پاراگراف می باشد پس به شما بک ستون کامل می دهد تا بتوانید مطالب خود را در این پاراگراف بنویسید. ما در قسمت زیر یک مقال صحیح و غلط از این تگ را برای شما خواهیم زد.

1 ) سلام. من دیبا پی سی هستم => صحیح

2 ) <body>سلام. من دیبا پی سی هستم<body/> => نادرست

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

تگ لینک در Body

ما برای لینک دادن به مقادیر خود می توانیم از تگ <a> – </a> در کد های خود استفاده کرده باشیم، البته قابل گفتن است که شما برای لینک دادن به دیگر تگ های خود حتما باید تگ a را در بیرونی ترین تگ قرار دهید تا تگ های داخل بتوانند لینک موجود در a را بگیرند. اگر قصد داشتید تا تنها یک متن را لینک دار کرده باشید می توانید متن مورد نظر خود را وارد کنید تا لینک به شی خاص داده شود. در قسمت زیر مثال های کاربردی برای شما خواهیم زد.

1 ) <a>لینک دانلود</a>

2 ) <a>

لینک دانلود مستقیم

لینک دانلود غیر مستقیم

</a>

در گزینه دوم ما توانستیم تنها با وارد کردن یک تگ a به دو تگ P لینک بدهیم که کاری بسیار بصرفه در بهینه کردن کد های شما دارد. اما سوال پیش می آید که شما چگونه می توانید لینک های خود را به این تگ ها بدهید. این تگ ها دارای مقادیر خاصی می باشند که ما برای لینک دادن باید مقدار href را به عکس های خود اضافه کنیم.

<a href=”لینک شما”>Dibapc.com</a>

توجه داشته باشید که اگر شما یک لینک داشته باشید ولی در حال حاضر مقدار داخل href خالی است می توانید با مقدار # فضای خالی مانده این تگ را پر کرده باشید. بطور پیشفرض تمامی این لینک ها در همان صفحه بارگذاری می شود، اگر قصد دارید تا هدف شما صفحه ای دیگر در هنگام باز شدن باشد می توانید با نوشتن مقدار Target مسیر یابی جدیدی را ایجاد کرده باشید. در مثال زیر شما با وارد کردن مقدار _Blank می توانید این عمل را کرده باشید.

<a href=”#” target=”_blank” >لینک مستقیم</a>

نتیجه گیری

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

برای امتیاز به این نوشته کلیک کنید!

[کل: 0 میانگین: 0]

سیلندر

بسیار عالی حرف نداره واقعا
لذت میبرم

5 سال قبل

آموزش طراحی سایت رایگان

آموزش طراحی سایت رایگان

ساخت سایت بهمراه بوت استرپ 4

آشنایی با تگ های اصلی html

تگ های درونی Html

تگ های اساسی در body

تگ لینک در Body

نتیجه گیری

دیدگاهتان را بنویسید لغو پاسخ