آموزش جامع html-xhtml

[Milad-Ku]

درود و عرض ادب.

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

سه ویژگی برجسته این آموزش :

1. طبق تجربه شخصی خودم خیلی از دوستان صرفا یکسری چیزها رو حفظ کردن و حتی نمیدون که دستورهایی که استفاده میکنند مخفف چه کلماتی هستند. در این آموزش سعی میکنم تا حد امکان روی مخفف ها و کلمات تخصصی زبان انگلیسی تمرکز کنم. که دوستان بدونن دستوری که استفاده میکنن مخفف چه کلمه ایه که بیشتر متوجه کاربردش بشن.
2. در بخش پیشگفتار بخوبی به مخاطب توضیح داده میشه که برای طراحی وب باید از کجا شروع کنه. و چرا باید این آموزش رو بخونه.
3. آموزش از بخش مقدمه شروع میشه ! باتوجه به اینکه دوستانی که در این انجمن هستند آشنایی با مرورگرها، هاست و... دارن توضیحات اضافی رو حذف، و مفاهیم کلی و اصطلاحات پایه ای این زبان در بخش مقدمه نوشته میشه. و پس از مقدمه آموزش بصورت جدی شروع میشه.
4. این آموزش چون تو انجمن منتشر میشه طبیعتا داری محیط تعاملی هست و تا حد امکان به زبانی ساده و روان توضیح داده خواهد شد.

نکات قابل توجه قبل از شروع آموزش :

• لطفا به هیچ وجه هیچ پستی در این تاپیک ارسال نکنید و سوالات خودتون رو در این تاپیک نپرسید. اگر سوال یا موردی هست از طریق تلگرامم که در امضام هست در تماس باشید. اگر تلگرام ندارید لطفا بسازید ! اما تاپیک رو خراب نکنید.
• درصورتی که از کیفیت آموزش راضی بودید از دکمه تشکر استفاده کنید و درصورتی که راضی نبودید و احساس میکنید نیازی به این آموزش نیست از زدن روی دکمه تشکر خودداری کنید .... چون بنده صرفا از طریق تعداد تشکرها میتونم بفهمم که چقدر استقبال میشه و یا کیفیت هر پست آموزشی در چه حد هست. پس لطفا اگر حس کردید که این تاپیک و یا پست ها مفیده شما هم واکنشتون رو فقط از این طریق بیان کنید.
• اگر دوستان استقبال کردن و سوالات زیاد بود نهایتا یک تاپیک فقط برای سوال پرسیدن در مورد این آموزش میزنم که بجای تلگرام اونجا بپرسید شاید سوال فرد دیگه ای هم باشه.
• روزانه با صرف 30 الی 45 دقیقه می تونید در مدتی کوتاه یک زبان کدنویسی رو بخوبی یاد بگیرید و اگر سوال هم بود طبق چهارچوب بالا بپرسید.
• در این آموزش مختصری هم از CSS آموزش داده خواهد شد اما پس از اتمام این آموزش تاپیک هایی در خصوص آموزش جامع CSS(تا حد امکان کاربردی توضیح داده خواهد شد) ایجاد میشه.
• طبیعتا این آموزش بر اساس HTML 5 هست و آموزش ها تمرین عملی هم خواهند داشت.
• دوستان هر درخواستی اعم آموزش اختصاصی و.... دارن بخاطر محدودیت های انجمن از طریق پیام خصوصی اقدام نکنند و صرفا از طریق تلگرام در تماس باشند.
• اشتراک در موضوع : درصورتی که مایل بودین طبق عکس زیر از نوار ابزار بالای همین پست میتونید در این تاپیک مشترک شید و با هر بروزرسانی تاپیک رو در پنلتون ببینید.

تشکر که وقت گذاشتید

[Milad-Ku]

پیشگفتار

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

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


√ اگر هدف شما این باشد که یک طراح خوب،
√ اگر هدف شما این باشد که یک آفرین موفق و ماهر باشید،
√ اگر هدف شما این باشد که یک وبمستر ماهر با قدرت حل مشکلات باشید،
√ و اگر هدف شما ارتقا از نویسندگی به وبمستری، البته با ویژگی های ذکر شده باشد،
هیچ راهی به غیر از آموختن دانش فنی ندارید !

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

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

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

[Milad-Ku]

مقدمه : آشنایی با مفاهیم و اصطلاحات پایه ای


آشنایی با HTML-XHTML
​HTML مخفف Hyper Text Markup Language است. یعنی، زبان نشانه گذاری فرا متنی.
HTML در خلال دهه 90 میلادی شکوفا شد و تابحال چندین نسخه مختلف از HTML معرفی شده است که هر نسخه ضعف های نسخه قبلی را برطرف یا بهبود بخشیده و همچنین امکانات جدیدی را به خود اضافه کرده است. در حال حاضر آخرین نسخه از HTML نسخه 5 است که در تاریخ 22 ژانویه 2008 معرفی شد. که بهترین و محبوب ترین نسخه ی این زبان است.
در این آموزش HTML5 را بر اساس استانداردهای XHTML خواهید آموخت.

XHTML ترکیب دو زبان HTML و XML می باشد. که یک استاندارد را به نام XHTML ایجاد می کند.
تمام آموزش های این جزوه بر اساس استاندارد های XHTML می باشد.
برخلاف بسیاری از آموزش های دیگر فعلا به مقایسه HTML و XHTML نمی پردازم. زیر این تفاوت ها معمولا در استانداردها و بخش فنی است که در پایان این جزوه، هنگامی که تقریبا بر این زبان اشراف پیدا کردید در توضیحی که خواهم داد خود می توانید تفاوت های این دو را در یابید. بهتر است بدون هیچ وقفه ای به خواندن ادامه توضیحات بپردازید ... .


سخت افزار و نرم افزارهای مورد نیاز
خوشبختانه HTML لزوما نیازی به سخت افزار و یا نرم افزارهای خاصی ندارد و شما می توانید با حداقل مشخصات سخت افزاری و همچنین به وسیله برنامه notepad ویندوز، کدنویسی را شروع کنید.!
اما بسیاری بخاطر امکانات و گرافیک بهتر، از نرم افزارهایی نظیر ++notepad و Dreamwaver استفاده می کنند. پیشنهاد بنده برای شروع آموزش استفاده از برنامه نوت پد ویندوز یا نرم افزار ++notepad است.

+نرم افزار مورد نظر خود را باز کنید و ادامه آموزش را دنبال کنید.

مفاهیم و اصطلاحات پایه ای
این زبان مبتنی بر دو نوع داده است :

1. محتویات : ساده ترین و البته مهم ترین نوع داده در صفحات وب، content یا همان محتویات است. که معمولا شامل مطالب نوشتاری (متن - text) و گرافیک ها میشه. که البته در مطالب پیش رو بیشتر به نحوه کار کردن روی محتویات خواهیم پرداخت.
2. دستورالعمل ها (برچسب ها - Tags) : این بخش حساس ترین و بحث اصلی در زبان کد نویسی است. شما با استفاده از دستورالعمل ها که در HTML معمولا به نام Tag یا همان برچسب شناخته می شود، به محتویات سایت، فرمت و ساختار می دهید. که در این بخش و بخش های پیش رو کار اصلی، قالب بندی و کار کردن روی محتویات با استفاده از دستورالعمل ها (برچسب ها - Tags) صورت میگیرد.

برچسب ها دو نوع هستند :

1. یکسری از برچسب ها مشخصا روی بخش خاصی از محتویات، ساختار یا عملی را اعمال میکنند. به عنوان مثال می توان، فرمت های مختلفی را روی متن ها اعمال کرد نظیر : پر رنگ کردن، زیر خط دار کردن و..... . همچنین می توان به یک بخش از متن لینک داد. که در اینجا مشخصا دستورالعمل از یک جای مشخص تا یک جایی که مد نظر داریم اعمال می شود. هدف این نوع برچسب ها (دستورالعمل ها) اعمال ساختار یا فرمت خاصی روی محتویات است
2. اما برچسب نوع دوم به یک بخش خاص از محتویات وابسته نیست. یعنی مشخصا نیازی به بخشی از محتویات نیست که برچسب ها ساختار خاصی را روی آن اعمال یا آن را تغییر فرمت دهند. به عنوان مثال می توان یک شکست سطر انجام داد یا یکسری کلمات کلیدی به صفحه اضافه کرد و.... .

• برچسب های نوع اول را که حتما باید دو طرف محتویاتی که نیاز به تغییر فرمت یا اعمال ساختار دارند را مشخص کرد، برچسب های دو طرفه (tow sided) می نامند.
• برچسب های نوع دوم که که وابسته به محتویات نیستند و نیازی به مشخص کردن محدوده اعمال دستورالعمل نیست، را برچسب های یک طرفه (one sided) می نامند.

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

مثال (1) :

<strong> Milad-Ku </strong>

این برچسب فرمت توپر را بروی کلمه Milad-Ku اعمال میکند و از آنجا که ممکن است پس از این کلمه، کلمات دیگری نیز وجود داشته باشند، نیاز است که کلمه مورد نظر را مشخص کرد. یعنی در یک جا برچسب (دستورالعمل) باز شود و در جایی دیگر نیز بسته شود.

مثال (2) :

<br />

همانطور که میبینید این برچسب هم از لحاظ باز و بسته بودن و هم از لحاظ ساختار با برچسب مثال قبل متفاوت است.
زیرا این برچسب صرفا یک عمل شکست سطر را انجام می دهد. و به محتوا وابسته نیست. در واقع به شما امکان می دهد ادامه متن را از سطر بعدی شروع کنید. و معادل همان Enter در برنامه های واژه پرداز است.

در برچسب های یک طرفه ابتدا یک > باز می شود و سپس دستورالعمل نوشته می شود و پس از آن یک فاصله و بعد تگ را میبندیم. مانند :

<tag />

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

<tag> ... </tag>

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

<a href="http://google.com" target="_blank">Milad-Ku</a>

در دستور فوق پس از برچسب اصلی یعنی a ،که دستورالعمل لینک دهی است، کلمه href قرار دارد که به عنوان خاصیت آدرس لینک را مشخص میکند و مقدار آن پس از یک علامت مساوی (=) در داخل کوتیشن مارک ها یعنی همان علامت (" ") قرار می گیرد. پس از این خاصیت، خاصیت target وجود دارد که مشخص کننده نحوه باز شدن لینک است که در مقدار آن _blank قرار دارد که مشخص میکند لینک در پنجره ای جدید در مرورگر باز شود.

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

برای برچسب های دو طرفه :

<tag attribute="value" attriubute2="value2"> content </tag>

برچسب های یک طرفه :

<tag attribute="value" attriubute2="value2" />

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

ساختار صفحات وب
معمولا هر کدنویسی، قبل از شروع کار، در نرم افزار کدنویسی (نت پد یا....) صفحه را به سه قسمت تقسیم می کند :

1- ابتدا یک برچسب دو طرفه به نام html که مشخص کننده نوع زبان کدنویسی یا برنامه نویسی است. که تمام کدها و برچسب در داخل این برچسب نوشته می شود.

<html>
...
<html>

در مثال فوق سه نقطه (...) نشان دهنده محتویات و برچسب های احتمالی است.

2- سپس قسمت Header که می توان گفت قسمت معنوی سایت است. !
قسمتی که کلمات کلیدی و توضیحات و عنوان سایت و... در این قسمت تعریف می شود. و معمولا چیزی از این قسمت در بدنه سایت ظاهر نمی شود. همچنین این بخش در داخل برچسب دو طرفه html نوشته می شود. زیرا این برچسب جزو زبان HTML است و طبیعی است که زیر مجموعه قسمت <html>….</html> باشد.

<html>

<head>
...
</head>

</html>

در مثال فوق سه نقطه (...) نشان دهنده محتویات و برچسب های احتمالی است.

3- و نهایتا قسمت Body یا بدنه که اکثرا برچسب و تمام ساختاربندی های محتویات در این بخش انجام می شود.
این بخش پس از قسمت Header قرار دارد و زیر مجموعه برچسب <html>….</html> است یعنی بین برچسب آغازین و پایانی HTML نوشته می شود.
در نهایت خروجی مورد نظر از این بخش بندی به شکل زیر است :

<html>
 
<head>
...
</head>
 
<body>
...
</body>
 
</html>

در مثال فوق سه نقطه (...) نشان دهنده محتویات و برچسب های احتمالی است.

نحوه خروجی گرفتن از کدها
برای خروجی گرفتن از کدها، از طریق منو روی گزینه فایل و سپس روی گزینه save کلیک کنید.
حال در بخش file name اسم دلخواه فایل را نوشته و سپس پسوند فایل را نوشته که باید .html باشد.
در قسمت encoding نیز برای اینکه متن های فارسی هم پشتیبانی شوند گزینه utf-8 را انتخاب کنید.
مانند تصویر زیر :

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

<html>
<head>    <title>test page</title></head>
<body>    <strong>This is a test page</strong></body>
</html>

حال فایلی را که ذخیره کرده اید را باز کنید.
باید نتیجه ای که مرورگر خود مشاهده میکنید مثل تصویر زیر باشد :

[Milad-Ku]

فصل 1 : کار کردن با متن و لینک

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

ایجاد یک پاراگراف
برای ایجاد یک پاراگراف از عنصر p که مخفف paragraph است، استفاده می شود. یعنی تگ باز <p> در ابتدای پاراگراف، و همچنین تگ بسته <p/> نیز در انتهای متن، یک پاراگرف را ایجاد می کند.
مثال :

<p> ....... </p>
<p> ....... </p>

در مثال فوق، هر پاراگراف به صورت یک قطعه متن ظاهر شده و بین دو پاراگراف یک فاصله اضافی ایجاد می شود تا از یکدیگر جدا شوند.

شکست خطوط
شکست خطوط در تمام متون جهت خواناتر شدن متن یک ضرورت است. این عمل از طریق برچسب یکطرفه br ایحاد می شود.
برچسب br مخفف کلمه break است.
مثال :

Row 1 <br /> Row 2

در متن فوق، Row 1 در یک سطر و Row 2 در سطر بعد قرار خواهد گرفت.

ایجاد تیتر
در html ، شش سطح تیتر وجود دارد. که تفاوت هر سطح از این شش سطح در بزرگی آنهاست که هر اندازه از تیترها معمولا در جایگاه های خاصی استفاده می شود.
تیتر سطح 1 بزرگترین تیتر است و طبعا تیتر سطح 6 کوچکترین سطح تیتر است.
برای ایجاد هر تیتر از برچسب دو طرفه h استفاده می شود. h مخفف کلمه heading است.
مثال :

<h1> header 1 </h1>
<h2> header 2 </h2>
<h3> header 3 </h3>
<h4> header 4 </h4>
<h5> header 5 </h5>
<h6> header 6 </h6>

در مثال فوق هر تیتر از 1 تا 6 به ترتیب از بزرگ به کوچک نوشته شده است.
✍ هر تیتر علاوه بر افزایش سایز فونت، متن را توپر میکند.

توپر کردن متن
وقتی میخواهید متن را توپر باید از برچسب دو طرفه strong استفاده کنید. البته در نسخه های قبل html از متن برچسب دو طرفه b نیر استفاده میشد. که البته هنوز هم گاها از این برچسب استفاده میشود. اما بهتر است از برچسب های html 5 استفاده کنید. پس پیشنهاد بنده همان strong است.
مثال :

<strong> Milad-Ku </strong>

ایتالیک کردن متن
ایتالیک یا کج کردن متن توسط برچسب em که مخفف Emphasis است، استفاده می شود.
مثال :

Milad-Ku
<em> Milad-Ku </em>

متن خط خورده
شاید در بسیاری از سایت های نرخ ارز دیده باشید که نرخ قبلی خط خورده و نرخ جدید در جلوی آن نوشته می شود.
متون خط خورده کاربردهای متفاوتی دارند که برای ایجاد حالت خط خوردگی متن از برچسب strike استفاده می شود.
مثال :

<strike> 1$ = 900 T </strike>

تغییر فونت و...
در نسخه های پیشین html یکسری برچسب ها جهت انجام کارهایی نظیر تغییر فونت وجود داشت اما در HTML 5 دیگر از برچسب های قدیمی استفاده نمی شود و این دسته از کارها به css واگذار شده است که در فصل های پیش رو نحوه اعمال این تغییرات را به وسیله css توضیح خواهم داد.


ایجاد لینک
لینک ها یکی از عناصر پرکاربرد در وب و کدنویسی هستند که هسته اصلی وب را تشکیل می دهند.
لینک ها توسط برچسب دو طرفه a ایجاد میشوند. a مخفف کلمه anchor است.
ادرس مدنظر توسط خاصیت href تعیین می شود.
مثال :

<a href="http://google.com"> Milad-Ku </a>

خاصیت های این برچسب در فصل های پیش رو بیشتر مورد بررسی قرار خواهد گرفت.

انواع لینک
در کدنویسی از دو نوع لینک دهی استفاده میشود.
لینک دهی مطلق (absolute) : در این نوع لینک دهی که معمولا لینک مورد نظر در سرور دیگر و یا در سایت دیگر قرار دارد باید برای آدرس هر فایل از لینک کامل استفاده شود.
لینک دهی نسبی (relative) : اما در این نوع لینک دهی که فایل مورد نظر حتما در خود همان سرور و سایت قرار دارد می توان آدرس فایل ها را نسبت به پوشه و آدرس کنونی نوشت.

✍ توجه :
اگر در کنار صفحه html که در حال نوشتن آن هستیم فایلی به نام test.pdf باشد تنها کافیست در لینک دهی اسم فایل را بنویسیم.
اما اگر فایل در پوشه ای باشد که در کنار همین فایل است تنها اسم پوشه و یک / (اسلش) را نوشته و سپس اسم فایل را مینویسیم
و همچنین اگر فایل در مسیری قبل از پوشه ای که این فایل html در آن است باشد، ابتدا عبارت /.. را نوشته و سپس اسم فایل را مینویسیم.
به مثال های زیر توجه کنید :
به فایل test.pdf که در کنار همین صفحه html قرار دارد لینک میدهیم :

<a href="test.pdf"> test </a>

به فایل test.pdf که در پوشه ای به اسم folder در کنار همین صفحه html قرار دارد لینک میدهیم :

<a href="folder/test.pdf"> test </a>

به فایل test.pdf که در یک پوشه قبل تر از پوشه ای است که این صفحه html در آن قرار دارد لینک میدهیم :

<a href="../test.pdf"> test </a>

در فصل های پیش رو بیشتر در مورد لینک ها بحث خواهیم داشت.


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

<html>
<head>
<title> test page </title>
</head>
<body>
<h1> HTML </h1>
<br />
this is a test page <br /><strong> milad-ku </strong>
<a href="http://google.com"> Google </a>
</body>
<html>

نتیجه :

[saeed.spore]

ممنون مفید بود

[Milad-Ku]

ممنون مفید بود

درود
تشکر بابت لطفتون
ممنون میشم دوستان سعی کنن بجای پست، صرفا به دکمه تشکر اکتفا کنن.
بازم ممنون بابت لطفتون.