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

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

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

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

فصل دومYour First Web Pages

در این فصل شما می توانید اولین صفحه وب خودتان را خلق نمایید و با XHTM آشنا خواهید شد و مرحله به مرحله کارهای خود را در مرورگر تست میکنید .
بگذارید دقیق شویم ! طراحی وب سایتی که شما می بینید به سه لایه اصلی تقسیم می شود:

یادگیری این سه لایه شما را به یک طراح تبدیل میکند!
لایه اول لایه محتوی است که مانند شاسی ماشین است و شامل تگهای متفاوتی می باشد .لایه دوم لایه نمایش است که به عناصر HTML شکل و ظاهر می دهد و لایه سوم لایه رفتار است که حرکت و پویایی صفحات را شامل می شود.
چیزی که در این کتاب آموزش داده می شود مربوط به 2 لایه HTML و CSS است.
دیدن Source برنامه:
دیدن کد برنامه می تواند به یادگیری شما سرعت ببخشد البته باید در انتخاب وب سایت خود دقت نمایید تا اشتباه آنها مسیر یادگیری شما را تغییر ندهد. روش کار بدین صورت است که ماوس را درروی صفحه جایی غیر از تصاویر ببرید و کلیک راست کنید و view page source یا view source را بزنید.
باید صفحه ای مانند زیر در فایرفاکس ببینید:

یا در IE

عناصر اصلی یک صفحهHTML :

یک DocType
یک tag
یک tag
یک tag<br /> یک tag</div> <p>تو سورس پیداشون کنید. </p> <div><a rel="nofollow noopener noreferrer" href="http://www.writeage.com/images/design-web-11-b.jpg" target="_blank"><img loading="lazy" src="https://vmizban.ir/wp-content/uploads/2020/06/designweb11-1.jpg" border="0" alt="" width="380" height="293" /></a>برای دیدن تصویر واضحتر روی تصویر بالا کلیک کنید</div> <p>و حالا یک نمونه کد فقط شامل عناصری اصلی : </p> <div><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”<br /> “<a rel="nofollow noopener noreferrer" href="https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>“><br /> <html xmlns=”<a rel="nofollow noopener noreferrer" href="https://www.w3.org/1999/xhtml" target="_blank">XHTML namespace</a>“></p> <p><title>Untitled Document

حالا می خواهیم با تک تک این عناصر آشنا شویم :
داک تایپ DocType : Document Type Definition
اولین آیتم صفحه است بدون فاصله. این یک قانون است.
همانطوری که فایل word 2007 در نمایش در 2000 دچار مشکل می شود HTML ها با داک تایپ های متفاوت هم نمایش متفاوت در مرورگرها خواهند داشت.
در واقع این داک تایپ است که به مرورگر می گوید این سند از چه نوعی است و باید به چه ترتیب Render شود . نحوه رندر شدن و تفاوت های آنها باید در سطح حرفه ای تری مطرح شود.
داک تایپ ها هم در طول زمان به وجود می آیند یعنی مانند word نوع های جدیدی روی قبلی ها عرضه می شوند مانند HTML5 که به تازگی مطرح شده است.
برای دیدن داک تایپ های موجود به این آدرس برید Doctypes – SitePoint

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

به کدهای داک تایپ دقت نمایید: ما در این خط می گوییم نوع سند چیست و آدرسی که باید به این نوع سند در وب سایت کنسرسیوم جهانی وب World Wide Web Consortium یا W3C ، اشاره کند کدام است.
در حال حاضر دو نوع داکتایپ هستند که استفاده بیشتری دارند Transitional و Strict
همانطوری که گفتم فعلا دنبال تفاوت این داک تایپ ها نباشید به آن هم خواهیم رسید .
تاکید میکنم : اولین آیتم صفحه است بدون فاصله. این یک قانون است.

عناصر HTML :
قبل از این که عناصر HTML را شرح دهم باید با مفهوم تگ (tag) آشناشوید. تگ یعنی اسمی که میان این دو قرار گیرد و نام تگ همان متنی است که بین این دو قرار می گیرد

تگ HTML
تگ HEAD

تگ ها می توانند شامل چند attribute (ویژگی) باشند:

<html xmlns=”XHTML namespace ” dir=”rtl” >

dir یک نام attribute است و rtl ، value (مقدار) آن است که بین ” ” قرار گرفته است.

تگ ها به دودسته container و empty تقسیم می شوند.تگ های container شامل یک تگ بازشونده و یک تگ بسته شونده هستند به مثال بالا دقت نمایید HTML باز شده و بسته شده است. تگهای empty متفاوت هستند مانند مثال زیر


موارد استفاده دیگر:
• این تایتل در زمان مینیمایز کردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوکمارک کردن صفحه با این عنوان در لیست ما ذخیره می شود
• برای معرفی آن صفحه است
• برای موتورهای جستجو هم حائز اهمیت می باشد چیزی که در بهینه سازی وب سایت وب اسکالا هم استفاده شده است

عنصر meta :
متا تگ یک تگ empty است و برای دلایل متفاوتی استفاده می شوند اطلاعات اضافی که در مرورگر نمایش پیدا نمی کند . به طور مثال برای نام نویسنده ویا حق کپی رایت و یا نوع کاراکتر و ….
Css و javascript هم در head قرار میگیرند که بنا به نیاز استفاده میشوند البته برای جاوااسکریپت میتوان یک تفاوتهایی در طراحی های حرفه ای قائل شد. به طور مثال سورسی که در طراحی سایت فوق استفاده شده است را مشاهده نمایید. جاوا اسکریپت در پایین صفحه درج شده است.

عناصر body :
هرآنچه در body قرار می گیرد را می توان در خروجی دید: تیترها، پاراگراف ها, تصاویر و …….
در قسمت بعدی به طور عملی با هم یک وب سایت می سازیم!
ادامه دارد اگر مورد استقبال قرار گیرد!


(1) آموزش طراحی وب سایت از پایه و مراحل
آموزش طراحی وب سایت از پایه و مراحل طراحی سایت حرفه ای از مبتدی تا


(2) آموزش ساخت سایت رایگان مراحل طراحی سایت
آموزش ساخت سایت رایگان مراحل طراحی سایت حرفه ای با هاست بدون کدنویسی


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


(4) آموزش طراحی وب سایت از پایه - قسمت دوم
آموزش طراحی وب سایت از پایه - قسمت دوم - عصرنوشتن writeage


(5) آموزش طراحی سایت مشابه آپارات اشتراک
آموزش طراحی سایت مشابه آپارات اشتراک گذاری ویدئو با php - بخش


(6) آموزش طراحی سایت آموزش HTML و CSS برای صفر کیلومتر ها
آموزش طراحی وب سایت با HTML. برای شروع کار و آغاز طراح وب شدن لازم و ضروریه که اول از همه زبان html رو یاد بگیرید . زبان html برای ایجاد بدنه و ساختار اصلی صفحات وب به کار میره . شما از هر زبان برنامه نویسی مثل


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


(8) آموزش طراحی وب - قسمت دوم - Web Development Course - Part
13.06.2017 این دومین ویدیو از سری آموزشی طراحی وب هست. در این ویدیو ساختار کلی یک وبسایت سادرو با استفاده از html5 طراحی می


(9) آموزش Bootstrap 4 بر پایه یک پروژه عملی
آموزش Bootstrap 4 بر پایه یک پروژه عملی طراحی سایت با بوتسترپ


(10) آموزش طراحی وب با المنتور - قسمت دوم - همیار توسعه HamyarDev
در قسمت قبل به آموزش مقدماتی طراحی وب با المنتور پرداختیم. در قسمت اول آموختید که چگونه با افزونه صفحه ساز Elementor یک بخش یا سکشن ایجاد کنید چگونه بخش را به صورت دو یا چند ستونه طراحی کنید و با تنظیمات کلی یک بخش یا section

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

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

5 + 16 =

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