آموزش غیر از ویبولتینآموزش های عمومیانجمنبخش عمومی و مفید سایتعمومی

آموزش طراحی وب سایت از پایه قسمت سوم

آموزش طراحی وب سایت از پایه قسمت سوم
آموزش طراحی وب سایت از پایه قسمت سوم
آموزش طراحی وب سایت از پایه قسمت سوم

آموزش طراحی وب سایت از پایه – قسمت سوم

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

ساخت اولین صفحه وب سایت شما

در هر جای کامپیوتر که دوست دارید فلدری به نام my-first-webpage بسازید.
textEditor خودتان را که در جلسات قبل توضیح دادیم باز کنید کد زیر را در آن کپی کنید

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

The Most Basic Web Page in the World
content=”text/html; charset=utf-8″/>

The Most Basic Web Page in the World

This is a very simple web page to get you started.
Hopefully you will get to see how the markup that drives
the page relates to the end result that you can see on
screen.

This is another paragraph, by the way. Just to show how it
works.

از textEditor گزینه file>save as را بزنید پنجره ای مانند زیر نمایش می یابد:

مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود.
نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html
از منوی کشویی save as type گزینه all files را انتخاب نمایید
از منوی کشویی Encoding گزینه UTF-8 را انتخاب نمایید.

و حالا دکمه save را بزنید.
حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریک شما اولین صفحه وب خودتان را ساختید!


اهمیت UTF-8

این کاراکتر ست (Character Set) اجازه می دهد زبان های دیگر هم بتوانند به درستی صفحه شما را ببینند. فرض کنید یک کاربر کره ای که زبان انگلیسی ندارد بخواهد صفحه شما را ببیند ، این کاراکتر ست است که اجازه میدهد شما با مشکلی مواجه نشوید.

اولین آنالیز شما

یک مقایسه و یک آنالیز ساده بین کد شما و ظاهری که در مرورگر می بینید ، می تواند در یادگیری شما کمک شایانی کند:

زمان مناسبی است که در مورد 2 تگ p و h1 و البته عناصر دیگر صحبت کنیم.

تیترها و سلسله مراتب آن (H)

تیترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1 تا h6 وجود دارند.
از h1 برای مهم ترین تیتر از h2 برای تیتر کم ارزش تر و از h3 برای تیتر کم ارزش تر از h2 و به همین ترتیب تا h6

پاراگراف (p)
یک تگ بلاک و بسته شونده (container) است و برای یک بلوک متنی استفاده می شود این بدان معنی است که متن های خوتان را باید داخل این تگ قرار دهید.
لیست (list)
فرض کنید می خواهید لیست وب سایت های طراحی شده خودتان را نمایش دهید ، به لیستی که من درسایت خودم استفاده کردم یک سری بزنید.
اینجا:
و اما لیست ها دو گونه اند:

Ol-order list : برای لیست های ترتیبی
Ul-unorder list: برای لیستهای غیر ترتیبی

به مثال زیر دقت کنید:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Lists – an introduction
content=”text/html; charset=utf-8″/>

Lists – an introduction

Here’s a paragraph. A lovely, concise little paragraph.

Here comes another one, followed by a subheading.

A subheading here

And now for a list or two:

  • This is a bulleted list
  • No order applied
  • Just a bunch of points we want to make

And here’s an ordered list:

  1. This is the first item
  2. Followed by this one
  3. And one more for luck

و حالا خروجی کار رو در مرورگر ببینید تا تفاوت های دو نوع لیست را ببینید


ظاهر همه لیست ها به همین سادگی نیستند و امروزه در طراحی وب سایت حرفه ای استفاده زیادی دارد. برای نمونه می توانید به فوتر وب سایت شرکت طراحی سایت وب اسکالا نگاهی بیاندازید تا دیدتان نسبت به استفاده از این عنصر بازتر شود.
ادامه دارد اگر مورد استقبال قرار گیرد!


(1) فیلم آموزش پروژه محور طراحی وب با HTML5
فیلم آموزش پروژه محور طراحی وب با HTML5 و CSS3 قسمت 3 - میهن لرن


(2) ODIN CODE آموزش کامل ویدئویی ویرایش
ODIN CODE آموزش کامل ویدئویی ویرایش پوسته وب سایت وردپرس طراحی


(3) آموزش طراحی وب سایت از پایه قسمت اول
آموزش طراحی وب سایت از پایه قسمت اول آموزش طراحی سایت


(4) آموزش 0 تا ١00 طراحی وب با جوملا
آموزش 0 تا ١00 طراحی وب با جوملا دیتادیزاین


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


(6) آموزش طراحی وب سایت از پایه - قسمت سوم
آموزش طراحی وب سایت از پایه - قسمت سوم با سلام خدمت همه علاقه مندان به یادگیری. با توجه به استقبال شما عزیزان از این مقالات سعی می کنم با دقت و سرعت بیشتری به نوشتن ادامه دهم .


(7) آموزش طراحی وب با HTML - قسمت سوم
در آپارات وارد شوید تا ویدیوهای و کانالهای بهتری بر اساس سلیقه شما پیشنهاد شود وارد شوید


(8) آموزش طراحی سایت - از 0 تا 100 به همراه فیلم های رایگان
آموزش طراحی سایت با فیلم های فارسی رایگان. یکی از محبوب ترین آموزش ها آموزش طراحی سایت می باشد. این آموزش شما را به مهارتی می رساند که به راحتی می توانید درآمد چند میلیون تومانی در هر ماه برای خود بدست آورید.


(9) آموزش پنل وردپرس 2 - مرکز امنیتی
آموزش پنل وردپرس 2 - مرکز امنیتی سایبرتک - آموزش ایجاد یک نوشته در


(10) طراحی سابت بدون کدنویسی
طراحی سایت بدون برنامه نویسی 0 تا 100 طراحی سابت بدون کدنویسی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

15 − 9 =

دکمه بازگشت به بالا