آموزش مقدمه ای بر HTML: ساخت یک وب سایت نمونه کارها
Introduction to HTML: Build a Portfolio Website
یادگیری نحوه کدنویسی بسیار رایج است و به درستی هم همینطور است. همه از تا اسنوپ داگ آماده اند تا با دلهره خود آشنا شوند. اولین قدم برای راه اندازی وب سایت شما یادگیری HTML است.
هیچ دلیلی برای شروع یادگیری HTML وجود ندارد. در اینجا فقط چند مورد وجود دارد:
- استخدام یک توسعه دهنده یا کار با یکی از قبل؟ برخی از زبان و آنچه برای ایجاد یک وب سایت انجام می شود را بیاموزید تا بتوانید بهتر با آنها ارتباط برقرار کنید.
- آیا شما یک طراح وب هستید؟ ببینید چه چیزی باعث می شود طرح های شما در مرورگر زنده شوند.
- آیا در حال حاضر از یک چارچوب یا CMS برای انتشار محتوا یا وبلاگ خود استفاده می کنید؟ یادگیری HTML به شما این قدرت را می دهد که کد و طرح بندی خود را تغییر دهید.
- ساختن یک سایت از ابتدا سرگرم کننده و توانمند است!
من به شدت عاشق HTML هستم! ما بسیاری از تاریخچه رایانه را نادیده می گیریم و دقیقاً به چگونگی ترجمه محتوا به کد خواهیم پرداخت. هرچه افراد بیشتری از این دانش برخوردار باشند، محتوای عالی بیشتری را می توان در وب به اشتراک گذاشت. چه سایت فعلی یا آینده شما نمونه کار شما باشد، یک وبلاگ جدید عالی، یا تصاویر حیوانات خانگی شما، بی صبرانه منتظرم تا این کلاس را با شما به اشتراک بگذارم تا بتوانید مطالب خود را نیز به اشتراک بگذارید!
آنچه خواهید آموخت
- معرفی و راه اندازی پروژه. ما با اصول اولیه مانند ایجاد نقشه سایت و باز کردن اولین سند HTML شما شروع می کنیم.
- اصول HTML. شما از تگ های ضروری HTML برای ساختار صفحه خود، افزودن متادیتا و افزودن عناصر بدنه استفاده خواهید کرد.
- علامت گذاری محتوای ما. برای پیوست کردن مقادیر مختلف به محتوای خود، از نشانه‌های پیشرفته‌تر استفاده خواهید کرد.
- اتصال صفحات ما. برای ایجاد یک سایت کاملاً قابل پیمایش، همه صفحات خود را پیوند خواهید داد.
- کارهای پایانی. در نهایت، نکات عیب یابی را یاد خواهید گرفت تا مطمئن شوید که سایت شما به خوبی اجرا می شود.
آنچه خواهید ساخت
ما HTML را برای چهار صفحه وب سایت نمونه کارها ایجاد خواهیم کرد که دارای برخی از رایج ترین جنبه های یک نمونه کار آنلاین است که می تواند برای تعداد زیادی از موضوعات و حرفه های مختلف استفاده شود. ما محتوای مورد نیاز در هر صفحه و نحوه ترجمه آن به کد HTML را بررسی می کنیم.
این سایت فقط HTML خواهد بود، به این معنی که فقط متن بدون رنگ یا استایل زیبا. HTML بلوک های ساختمانی را برای بقیه فرآیند وب فراهم می کند. یک پایه قوی، مانند آنچه در این کلاس ایجاد خواهیم کرد، برای تمام مراحل آینده وب سایت نمونه کارها استفاده خواهد شد. پس از این، مراحل بعدی اضافه کردن طراحی و سبک با Cascading Style Sheets (CSS) برای افزودن پیتزا و شخصیت بیشتر به سایت شما است. اول از همه، و این همان چیزی است که ما در اینجا به آن نگاه خواهیم کرد و در حین انجام این کار کمی سرگرم خواهیم شد! ممکن است عکس هایی از گربه ها وجود داشته باشد یا نباشد.
یک سایت نمونه کارها فقط HTML معنایی ایجاد کنید.
تکلیف
تکلیف شما ایجاد یک سایت نمونه کارها فقط HTML معنایی است.
چرا؟ اگر صاحب کسب و کار کوچکی هستید، یادگیری HTML به شما کمک می کند تا با توسعه دهندگانی که استخدام کرده اید بهتر ارتباط برقرار کنید. اگر طراح وب هستید، یادگیری HTML به شما کمک می‌کند تا بهتر بفهمید طراحانتان چگونه زنده می‌شوند. اگر یک وبلاگ نویس یا بازاریاب هستید که قبلاً از یک چارچوب یا CMS برای انتشار محتوا استفاده می کنید، یادگیری HTML به شما این قدرت را می دهد که کد و طرح بندی خود را تغییر دهید. بیشتر از همه، ساختن یک سایت از ابتدا سرگرم کننده و توانمند است.
من درس ها، فایل ها و منابعی را ارائه کرده ام تا این پروژه را برای شما سرگرم کننده، منظم و آسان کنم. بنابراین، کدنویسی کنید، کارتان را با کلاس به اشتراک بگذارید، و بیایید یاد بگیریم!
قابل تحویل
یک سایت نمونه کارها فقط HTML معنایی ایجاد کنید و پیشرفت خود را در گالری پروژه کلاس آنلاین به اشتراک بگذارید تا با سایر دانش آموزان بازخورد تبادل نظر کنید. همانطور که در درس ها نشان داده شده است، سایت شما باید 4 صفحه باشد. یک پروژه تکمیل شده در گالری ممکن است شامل موارد زیر باشد:
- نقشه سایت
- رئوس مطالب/یادداشت ها
- دارایی های پروژه: کلمات، تصاویر، ویدئوها و غیره.
- تصاویری از ساختار HTML، از جمله ابرداده
- عکس های صفحه پیش نمایش مرورگر HTML
- تصاویر صفحه نمایش نهایی وب سایت معتبر، کاربردی و فقط HTML
منابع
- منابع، نمونه ها و موارد دیگر را گام به گام در زیر کاوش کنید.
هنگامی که این تکلیف را کامل کردید، برای کلاس Skillshare بعدی من آماده خواهید بود!
درس ها Lessons
-
علامت گذاری صفحه اصلی ما Marking up our Homepage
-
ساختار صفحه HTML HTML Page Structure
-
تریلر Trailer
-
به کلاس خوش آمدید! Welcome to Class!
-
عناصر سرفصل (H1-H6) Heading Elements (H1-H6)
-
HTML چیست؟ What is HTML?
-
ویژگی های HTML HTML Attributes
-
ابزارهای ما را جمع آوری کنید Gather our Tools
-
برچسب تصویر و مسیرهای فایل مطلق/نسبی The Image Tag and Absolute/Relative File Paths
-
برچسب های HTML و عناصر مشترک HTML Tags and Common Elements
-
انواع محتوای باقیمانده را به عنوان عناصر HTML شناسایی کنید Identify Remaining Content Types as HTML Elements
-
عنصر بدن Body Element
-
عیب یابی Troubleshooting
-
پیوندها Links
-
محتوای ما را به نشانه گذاری HTML تبدیل کنید Convert our Content into HTML Markup
-
تعریف محتوای پروژه ما Defining our Project Content
-
ایجاد و پیش نمایش صفحه اول ما Creating and Previewing Our First Page
-
فهرست عناصر List Elements
-
مراحل بعدی Next Steps
-
عنصر سر Head Element
-
آپلود محتوا در وب سرور Uploading Content to a Web Server
-
مسابقه Blockquote
-
موجودیت های HTML HTML Entities
-
عناصر درون خطی Inline Elements
-
صفحات جداگانه را با هم پیوند دهید Link Separate Pages Together
-
قالب بندی کد Code Formatting
https://donyad.com/d/f972ee
Jenn Lukas
توسعه دهنده و مشاور Front-end
یک مشاور و توسعه‌دهنده فریلنسر با استعداد چندگانه در فیلادلفیا و بنیانگذار Ladies in Tech. من برای می نویسم، ستون نویس .net magazine هستم و در آن مشارکت داشته ام. من در کنفرانس های مختلف از جمله SXSW، An Event Apart و CSS Dev Conference صحبت کرده ام.
تجارب گذشته من از ایجاد شبیه‌سازی‌های آموزشی نیروی دریایی گرفته تا رهبری تیم جلویی در Happy Cog به عنوان مدیر توسعه تعاملی است. من به عنوان یکی از نامگذاری شدم، و می‌توانید من را در توییتر در حال پست کردن اخبار مربوط به توسعه و گربه‌ها پیدا کنید. وقتی سایت‌هایی با بهترین استانداردهای وب ایجاد نمی‌کنم، HTML و CSS را برای پادکست Ladies in Tech آموزش می‌دهم.
نمایش نظرات