نوشته ها و نظرات شخصی من درباره سایت یتااهو
قرار بود: هدف «یتااهو» معرفی و شناساندن دین زرتشتی با نگاهی متفاوت از گذشته باشدنوشته ها و نظرات شخصی من درباره سایت یتااهو
قرار بود: هدف «یتااهو» معرفی و شناساندن دین زرتشتی با نگاهی متفاوت از گذشته باشدبخش دوم: تگهای HTML،Source code،افزودن متن به صفحه
در مطالب قبل تا حدودی با مقدمات راه اندازی یک وب سایت آشنا شدید و آموختید تا هدفتان را با محتوای سایت هماهنگ کنید، همچنین به اهمیت طراحی هم پی بردید. اما حالا باید آماده باشید تا اولین گام را برای معرفی خودتان به عنوان یک طراح و برنامه نویس حرفه ای وب بردارید.
تگهای HTML
اولین چیزی که برای برنامه نویسی html باید بدانید، اینست که تگ html چیست و چه کاری انجام میدهد. تگهای html دو نوع هستند، تگهای آغازین و تگهای پایان دهنده. بطور کل تگها با دو علامت کوچکتر و بزرگتر، یعنی < > مشخص میشوند و بین این دو علامت کد html نوشته میشود، مانند:
<b>
این یک تگ آغازین است و کد داخل آن به مرورگر ما میفهماند که متن بعد از آن باید بصورت حروف ضخیم و bold به بیننده صفحه نشان داده شود و بلافاصله متن مورد نظر را مینویسیم و در آخر آن، تگ پایان دهنده که مرورگر بفهمد تا کجا این متن باید بصورت ضخیم نمایش داده شود،
<b> this is a bold text. </b>
همانطور که مشاهده میکنید، تگهای پایان دهنده دارای یک علامت Slash ( / ) میباشد.
اما کار این تگها چیست؟ مرورگرهای وب مانند اینترنت اکسپلورر، به علامتهای < > حساس هستند و به محض اینکه به آنها می رسند کد داخل آنها را خوانده و عملیات لازم را بر روی متن بعد از آن انجام میدهند تا به تگ پایان دهنده برسند. در حقیقت مرورگرها حکم مترجم را برای ما دارند و کلیه تگها ونوشته های داخل آنها را بصورت اطلاعات منظم و قابل فهم در قالب یک صفحه وب برای ما ترجمه کرده و به نمایش میگذارند. ما با وارد کردن تگهای مناسب، کنترل نمایش صفحه وب را در مرورگرها به کنترل خود در می آوریم پس باید یاد بگیرید که تگهای html را چگونه و در کجا بنویسید. زبان html هم مانند هر زبان دیگری ساختار و قواعد خاص خود را دارد که در صفحات بعد با آنها آشنا می شوید.
Source code
صفحات وب دارای مزیتی هستند و آن مشاهده کدهای Html در مرورگر است که شما براحتی می توانید تگهای عناصر تشکیل دهنده آن صفحه را ببینید و با نحوه قرار گرفتن و تکنیکهای بکار گرفته شده آشنا شوید. برای دیدن سورس کد یا همان کد تشکیل دهنده صفحه وب داخل منوی view در مرورگر می شوید و بر روی گزینه Source کلیک می کنید که بطور معمول برنامه Notepad باز شده و تگهای Html را نشان می دهد که در حال حاضر فهمیدن آنها برای شما مشکل است ولی در آینده نزدیک هیچ مشکلی برای درک کدها نخواهید داشت.
ساخت اولین صفحه وب
در این بخش شما اولین صفحه وب را خواهید ساخت تا سادگی زبان html را لمس کنید. برای شروع ابتدا برنامه Notepad ویندوز را باز کنید، البته می توانید از هر برنامه ویرایشگر متن استفاده کنید. سپس این تگها را بنویسید:
<Html>
</html>
این تگها به مرورگر وب میفهماند که از کجا کدهای html شروع و به کجا ختم میشوند. پس بقیه تگها را ما باید بین این دو وارد کنیم. تگها را ما به دو دسته تقسیم میکنیم: تگهای قسمت سر head و تگهای قسمت بدنه body ، بدین صورت:
<Html>
<head>
</head>
<body>
</body>
</html>
فرق این دو قسمت در اینست که هر اطلاعاتی داخل تگهای قسمت سر head نوشته شود در صفحه مرورگر نشان داده نمیشود ولی در قسمت بدنه body هر اطلاعاتی وارد شود در صفحه نمایش داده میشود.
خب دوستان این ساختار کلی و اسکلت بندی یک صفحه وب هست که باید همیشه آنرا در نظر داشته باشید. حالا یک متنی بین تگهای بدنه body وارد کنید، مثلاً
<Html>
<head>
</head>
<body>
this is my first page!
</body>
</html>
نامگذاری و ذخیره کردن فایل
الان کدنویسی ما تکمیل شد و باید این فایل متنی را ذخیره کنیم تا بتوانیم در مرورگر وب خود امتحانش کنیم. ابتدا منو File را باز کنید و گزینه Save as را انتخاب کنید، یک پنجره برای آدرس دهی و نامگذاری آن فایل باز میشود که آدرس جایی که باید ذخیره شود را مانند My Documents وارد کنید سپس در پایین پنجره باز شده در قسمت File Name اسم فایل را بنام First page وارد کنید و دقت کنید تا در آخر این اسم یک نقطه بگذارید و پسوند html را بنویسید و دکمه Save را بزنید تا فایل متنی ما بصورت یک فایل html ذخیره شود.
حالا به سراغ فایل ذخیره شده میرویم، اگر در سیستم عامل ویندوز اینکار را انجام داده اید، آن فایل باید آیکون مرورگر اینترنت اکسپلورر را داشته باشد، روی فایل کلیک کنید تا باز شود، همانطور که مشاهده میکنید مرورگر وب شما باز میشود تا اطلاعات آن صفحه را نمایش دهد. اگر داخل صفحه فقط نوشتهایی که بین تگ body وارد کرده اید را می بینید پس باید به شما تبریک بگویم و از این به بعد باید به خودتان بیشتر توجه کنید. اگر هم غیر از آن می بینید یا چیزی مشاهده نمیکنید، مراحل گفته شده را دوباره انجام دهید.
افزودن متن به صفحه
همانطور که دربخشهای قبل گفته شد، هرمتنی را بین تگهای <body>وارد کنید بعد از ذخیره آن فایل با پسوند.html یا.him و هنگام نمایش فایل در مرورگر آنرا مشاهده خواهید کرد که متن مورد نظر با تنظیمات مرورگر نمایان خواهد شد. ولی ما با استفاده از تگهای این عنصر کنترل نمایش نوشته ها را بدست خود میگیریم تا همان چیزی که مورد نظر ما است نشان داده شوند. تگهای متن را میتوان به دو دسته تقسیم کرد، تگهای اولیه که بیشتر وظیفه خط بندی، پاراگراف بندی و یا تنظیمات در ارتباط با متن را به عهده دارند و تگهایی که شکل و آرایش حروف را کنترل میکنند که به آنها formatting می گویند. بهتر است که Notepad یا هر برنامه ویرایشگر متن را که دارید باز کنید و هر کدام از این تگها را امتحان کنید تا کاربرد آنها در ذهن شما جای گیرد.
<Bra>
برای خط بندی از این تگ استفاده میشود و متن بعد از آن به یک خط پایین تر منتقل میشود که نیازی به تگ پایان دهنده هم ندارد.
<p></p>
پاراگراف بندی متن را به عهده دارد و فاصله بیشتری را نسبت به <bra> بین خطوط ایجاد میکند. این تگ دارای خصوصیت align= " " میباشد که محل قرارگیری پاراگراف را در یک سطر کنترل میکند و با کلمات "left", "center", "right", "justify"مقداردهی میشود.
<p align="left">...</p>
<Center></center>
همانطور که از اسمش پیداست متن بین این دو تگ در وسط یک سطر قرار خواهد گرفت، البته این تگ را برای عناصر دیگر وب نیز میتوان بکار برد.
<pre></pre>
مرورگرها فاصله هر کلمه را در حد استاندارد نشان میدهند و اگر شما بخواهید که یک متن با فاصله های زیادی نمایش داده شود یعنی آنطور که میخواهید نشان داده شود از این تگ استفاده میکنید.
<h1></h1>
به این تگHeading می گویند و برای مشخص کردن سرفصلها و تیترها بکار میرود. این تگ از عدد یک تا شش درجه بندی دارد که عدد یک بزرگترین حد و شش کوچکترین حد حروف را نمایش میدهند. در ضمن دارای خصوصیت " "=align میباشند و با left, center , right مقداردهی میشود.
<hr>
این تگ روی خود متن کاری صورت نمیدهد و فقط با ترسیم یک خط افقی آنها را از هم جدا میکند که دارای خصوصیات زیر میباشد.
Width=" "طول خط را کنترل میکند که هم با عدد در مقیاس پیکسل و هم با درصد میتوان مقدار دهی کرد.
Align=" “که محل قرار گیری خط در یک سطر را کنترل میکند.
Color=" "رنگ خط که میتوانید اسم رنگ یا کد هگز رنگ را بنویسید.
Size=" “این خصوصیت ضخامت خط را تعیین میکند که هرچه عدد بزرگتر باشد ، ضخامت بیشتر است. بصورت پیش فرض خط دارای سایه میباشد و اگر خصوصیت no shade را به تگ اضافه کنید دیگر سایه را نشان نمیدهد.
<div></div>
این تگ کاربرد فراوانی برای مدل دادن به متن دارد و مانند تگ <br> آن قسمت از متن را جدا میکند وبه خط بعد منتقل میکند . خصوصیت style=" " در این تگ توانایی اعمال یک الگوی خاص در آن قسمت از متن را میدهد. بطور مثال هر گاه کاربر نشانگر موس را روی آن متن برد ، نوشته های ما خط دار شود، البته هر نوع Style که تعریف شود همان را بکار میبرد. در بخش Style Sheets درست کردن الگوها را توضیح خواهم داد.
<span></span>
این تگ هم مانند تگ بالا میباشد با این تفاوت که مخصوص یک کلمه یا حتی یک حرف میباشد چون مانند div متن را از بقیه جدا نمیکند و دارای خصوصیت style=" “میباشد که بر فرض هنگام قرار گرفتن موس روی یک کلمه زمینه آن رنگی شود.
<marquee></marquee>
متن بین این دو تگ متحرک خواهد شد و دارای خصوصیات زیر میباشد، البته این تگ ممکن است در همه مرورگرها عمل نکند ولی در مرورگر اینترنت اکسپلورر (IE) مشکلی برای نمایش ندارد. خصوصیات این تگ عبارتند از :
Align=" "محل قرار گرفتن متن را تعیین میکند که با کلمات top, middle, bottom مقدار دهی میشود.
behavior=" "این خصوصیت نحوه حرکت متن را کنترل میکند که آنرا برابر با scroll اگر قرار دهیم، متن بصورت متناوب از یکطرف صفحه وارد و از طرف دیگر خارج میشود و اگر برابر با alternate قرار دهیم ، متن از صفحه خارج نمیشود و در عرض مرورگر حرکت میکند، همچنین اگر برابر با slide باشد ، متن از یکطرف وارد صفحه شده و در طرف دیگرمیایستد.
bgcolor=" " رنگ زمینه آن تگ را مشخص میکند که یا نام رنگ یا کد هگز آنرا مینویسید.
direction=" "جهت ورود متن به صفحه را کنترل میکند و با کلمات left, right, top, down که از چپ ، راست، بالا و پایین میتواند وارد شود.
height=" "ارتفاع کادر marquee را به عدد در مقیاس پیکسل یا به درصد تعیین میکند.
hspace=" "حاشیه چپ و راست را کم وزیاد میکند.
loop=" "تعداد چرخش متن را کنترل میکند.
scrolldelay=" " سرعت حرکت متن را تعیین میکند.
vspace=" " حاشیه بالا و پایین متن را مشخص میکند.
width=" " عرض کادر را کنترل میکند.
<-- !.....-->
از این تگ برای افزودن نظریه یا هر نوشته دیگری که نمیخواهید در مرورگر نمایش داده شود و یا عملی را انجام دهد استفاده میکنید که بجای نقطه چین هر متنی را میتوانید وارد کنید .
<bdo></bdo>
این تگ فقط مخصوص مشخص کردن متن ازطرف چپ یا راست که دارای خصوصیت dir=" " میباشد و با ltr یعنی از چپ به راست و rtl یعنی از راست به چپ مقدار دهی میشود.
