آموزش رایگان html - قسمت هشتم
لینک ها
در این درس شم یاد خواهید گرفت چطور در بین صفحات پیوند هایی را ایجاد کنید.
برای ساخت لینک (پیوند) چه چیزی نیاز است؟
برای ساخت پیوند شما باید از ان چیزی استفاده کنید که هنگام کدنویسی HTML استفاده می کردید: یعتی برچسب. یک برچسب ساده با یک مشخصه، شما را قادر خواهد کرد که به هر چیز و در هر کجا پیوند یا ارتباطی دهید. در اینجا مثالی از کد یک لینک است که می توانید مشاهده کنید:
مثال 1:
<a href="http://www.html.persianblog.ir"> Here is a link
to this weblog </a>
در مرورگر کد بالا باید شبیه این باشد:
Here is a link to this weblog
این عنصر بر کلمه anchor واقع است. و مشخصه href مخفف hypertext referenc ، به معنای ارجاع فوق پیوند می باشد، که مکانی را که معمولا پیوند، به یک آدرس یا یک فایل بروی اینترنت اشاره می کند، مشخص می کند.
در مثال بالا مشخصه href یک مقدار به نام “http://www.html.persianblog.ir” داشت، که آدرس کامل این وبلاگ است و url نامیده می شود. توجه کنید که http:// همیشه باید همراه آدرس باشد. جمله Here is a link to this weblog هم متنی است که در مرورگر به عنوان پیوند نشان داده می شود. فراموش نکنید که عنصر را با یک <a/> ببندید.
به من درباره پیوندها بین صفحات سایت خودم بگو؟
اگر شما می خواهید به ساختن پیوند بروی 1 سایت مبادرت کنید، شما لازم ندارید آدرس (url) کامل را برای سند مقصد املا کنید. برای مثال اگر شما دو صفحه ساختید (اجازه دهید آنها را page1.htm و page2.htm بنامیم) و آنها را درون یک پوشه ذخیره کردید، شما می توانید لینکی از یک صفحه به صفحه دیگر فقط با نوشتن نام فایل در کد پیوند، بسازید. با توجه به این توضیح یک لینک از page1.htm به صفحه page2.htm میتواند به صورت زیر دیده شود:
مثال 2:
<a href="page2.htm"> Click here to go to page 2 </a>
اگر page2.htm در یک زیرپوشه قرار داده شود (به نام subfolder)، لینک می تواند شبیه زیر باشد:
مثال 3:
<a href="subfolder/page2.htm"> Click here to go to page 2 </a>
در پیرامون شیوه دیگری، یک لینک از page 2 (در پوشه subfolder) به page1 باید مانند این باشد:
مثال4:
<a href="../page1.htm"> A link to page 1 </a>
“/..” به یک سطح بالاتر از موقعیت فایل از آنجایی که پیوند ساخته شده است، اشاره می کند. با پیروی کردن از یک سیستم مشابه، شما همچنین می توانید با نوشتن “/../..” به 2 (یا بیشتر) پوشه بالاتر اشاره کنید.
آیا شما متوجه این سیستم شدید؟ در عوض شما می توانید آدرس کامل را برای فایلتان تایپ کنید(URL).
به من درباره پیوند های داخلی درون یک صفحه بگو؟
همچنین شما می توانید لینک های داخلی درون یک صفحه بسازید. برای مثال جدول محتوایی در بالای صفحه که به هر بخش از متون زیر، پیوند خورده است. همه آن چیزی که به استفاده از آن نیاز دارید، یک مشخصه بسیار مفید بنام id (خلاصه identification) و نماد # است.
از مشخصه id برای علامت گذاری عنصری که شما می خواهید به آن پیوند دهید استفاده کنید. برای مثال:
<h1 id="heading1"> Headig 1 </a>
حالا شما می توانید یک پیوندی به آن برچسب، با استفاده از علامت # در مشخصه پیوند، بسازید. علامت # باید با نام id برچسبی که شما میخواهید به آن لینک دهید ادامه داده شود. برای مثال:
<a href="#heading1"> Link to heding 1</a>
همه با یک مثال واضح و روشن خواهد شد:
مثال 5:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link to heading 1</a></p>
<p><a href="#heading2">Link to heading 2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
در مرورگر، شبیه این مورد خواهد شد. (برای امتحان کارایی آنها، بروی دو پیوند کلیک کنید.)
(نکته: توجه کنید که یک مشخصه id باید با یک حرف شروع شود.)
من می توانم به هر چیر به غیر از اینها پیوند دهم؟
همینطور شما می توانید به یک آدرس ایمیل پیوند دهید. این کار تقریبا به شیوه یکسانی همانند وقتی که به یک سند پیوند می دهید انجام می شود.
مثال 6:
<a href="mailto:Ali@yahoo.com"> Send an e-mail to Ali </a>
در مرورگر شبیه زیر خواهد شد:
تنها فرق بین پیوند به یک ایمیل و پیوند به یک فایل این است که، در عوض تایپ آدرس سند، شما mailto: را تایپ می کنید که با یک آدرس ایمیل ادامه داده شده است. وقتی که روی پیوند کلیک می شود، برنامه پیش فرض نامه الکترونیکی شما، با یک نامه خالی آدرس دهی شده به یک آدرس ایمیل تعیین شده باز می شود. لطفا توجه کنید که این عمل فقط در صورتی کار می کند که یک برنامه خواندن ایمیل روی رایانه تان نصب شده باشد. می توانید امتحان کنید!
آیا مشخصه دیگری وجود دارد که من باید بدانم؟
برای ساخت پیوند، شما همیشه باید از مشخصه href استفاده کنید. به علاوه شما قادرید یک مشخصه title هم درون پیوند خود جای دهید.
مثال 7:
<a href="http://www.html.persianblog.ir/" title="Visit and
learn HTML"> html.persianblog.ir </a>
در مرورگر به شکل زیر است:
مشخصه title برای نوشتن یک توضیح کوتاه در مورد پیوند مورد استفاده قرار می گیرد. اگر شما بدون کلیک کردن، اشاره گر موس را روی لینک نگه دارید، شما متنی با عنوان “Visit and lesrn HTML” خواهید دید که نمایان خواهد شد.
دسته بندی : html
آموزش رایگان html - قسمت هفتم
ویژگی ها (Attribute)
شما می توانید به تعدادی برچسب، ویژگی یا مشخصه اضافه کنید.
ویژگی چیست؟
همانطور که احتمالا به یاد دارید، عناصر به سند html شما ساختار می دهند و به مرورگر نشان می دهند که شما چطور می خواهید وبسایتتان ارائه شود. (به عنوان مثال </br> مرورگر را برای ساخت یک خط افقی آگاه می کرد). در بعضی عناصر شما می توانید اطلاعات بیشتری اضافه کنید. از قبیل اطلاعاتی که ویژگی (Attribute) نامیده می شوند.
مثال 1:
1: <h2 style="backgroud-color:#ff0000">my website</h2>
ویژگی ها همیشه در برچسب ابتدایی یا باز، نوشته می شوند و با علامت مساوی (=) ادامه داده می شود و جزئیات ویژگی داخل علامت نقل قول (“) نوشته می شود. علامت نقطه ویرگول(;) هم بعد از هر ویژگی، برای جدا کردن دستورات سبک دهی متفاوت، مورد استفاده واقع می شود. ما بعدا به این موضوع بر خواهیم گشت.
مشخصات یک ویژگی چیست؟
تعداد زیادی ویژگی یا Attribute وجود دارند. اولینش را که شما یاد می گیرید استایل است. با ویژگی استایل، شما می توانید به سایتتان سبک دهید. برای مثال رنگ پس زمینه:
مثال:
1: <html>
2: <head>
3: </head>
4:
5: <body style="background-color:#ff0000;">
6: </body>
7: </html>
این کد صفحه را در مرورگر به طور کامل به رنگ قرمز نشان خواهد داد. بفرمایید و خودتان امتحان کنید. ما چند دقیقه دیگر با جزئیات بیشتر توضیح خواهیم داد که چطور سیستم رنگ کار می کند.
توجه کنید که تعدادی برچسب و ویژگی از تلفظ آمریکایی استفاده می کنند. برای مثال color به جای colour. این مهم است که کلمات با تلفظ همانند را به دقت استفاده کنید همانطور که ما در مثال های این اموزختار استفاده می کنیم. در غیر این صورت مرورگر قادر به درک صحیح از کد شما نیست. همچنین فراموش نکنید که همیشه علامت نقل قول (“) بعد از مشخصه یا ویژگی، را ببندید.
چطور صفحه به رنگ قرمز در می آید؟
در مثال بالا ما برای رنگ پس زمینه، کد #ff0000 را اتخاذ کردیم. این کد رنگ، برای رنگ قرمز است که هگزادسیمال نامیده می شود. هر رنگی برای خود معادل هگزادسیمال دارد. در اینجا چند مثال آورده شده است:
سفید: #ffffff
سیاه: #000000(صفر)
قرمز: #ff0000
آبی: #0000ff
سبز: #00ff00
زرد: #ffff00
یک کد رنگ هگزادسیمال شامل یک علامت # و شش حرف یا کاراکتر دیگر است. بیش از 1000 کد رنگ هگزادسیمال وجود دارد و تعیین آنها کار ساده ای نیست در صورتی که هر کد با یک رنگ ویژه گره خورده است.
شما همچنین می توانید از نام انگلیسی آن برای بیشتر رنگ های عادی استفاده کنید(white, bladk, red, blue, green, yellow).
مثال 3:
1: <body style="background-color: red;">
در مورد رنگ ها کافی است. اجازه بدهید به مشخصه ها(Attribute) برگردیم.
کدام برچسب ها می توانند از مشخصه ها استفاده کنند؟
مشخصه های متفاوتی می توانند به بیشتر عناصر اعمال شوند.
شما اغلب در برچسب هایی از قبیل body از مشخصات استفاده خواهید کرد، در صورتی که در بعضی برچسب ها به ندرت از مشخصه استفاده خواهیدکرد، برای مثال برچسب </br>. چون خط جداکننده معمولا عنصری بدون هر پارامتری برای تنظیم است.
درست، همانطور که تعداد زیادی عنصر وجود دارد، بنابراین تعداد زیادی هم مشخصه وجود دارد. بعضی مشخصه ها برای یک عنصر خاص مناسب هستند، در صورتی که انواع دیگر آن می توانند برای عناصر متفاوت مورد استفاده قرار گیرند. و برعکس، بعضی عناصر می توانند فقط شامل یک نوع از مشخصه باشند، در صورتی که دیگری می تواند شامل تعداد زیادی باشد.
این موضوع ممکن است کمی گیج کننده باشد اما وقتی شما با مشخصه های مختلف آشنا شدید ، در حقیقت خیلی منطقی است و شما به زودی خواهید دید چقدر آنها ساده هستند و چه مقدار امکانات برای ما فراهم می کنند.
این دوره آموزشی برای شما بیشتر مشخصه های مهم را معرفی می کند.
در حقیقت یک مشخصه، چه قسمتی از یک عنصر را شامل می شوند؟
معمولا یک عنصر شامل برچسب باز، با یا بدون یک یا چند مشخصه ،مقداری محتوا و برچسب بسته است. تصویر زیر را ببینید:
دسته بندی : html
آموزش رایگان html - قسمت ششم
اندکی عنصر یا برچسب بیشتر
آیا تا به حال ساخت تعدادی صفحه را مدیریت کرده اید؟ اگر نه، در اینجا یک نمونه مثال وجود دارد:
1: <html>
2:
3: <head>
4: <title>My Website</title>
5: </head>
6:
7: <body>
8: <h1>A Heading</h1>
9: <p>text, text, text, text</p>
10: <h2>subhead</h2>
11: <p>text, text, text</p>
12: </body>
13:
14: </html>
حالا چی؟
حالا وقت آن است که سومین عنصر یا برچسب جدید را یاد بگیرید.
به روش مشابهی که قبلا گفته شد، برای تاکید یک کلمه یا عبارت آن را بین برچسب های باز <em> و بسته <em/> قرار میدهیم. همچنین شما میتوانید با استفاده از برچسب باز <strong> و بسته <strong/> تاکید بیشتری بروی یک عبارت داشته باشید.
مثال:
1: <strong>Stronger emphasis.</strong>
که به شکل زیر در مرورگر نمایش داده می شود:
.Stronger emphasis
همچنین شما می توانید با استفاده از small نوشته خود را کوچکتر کنید.
مثال:
1: <small>This should be in small.</small>
که در مرورگر به این شکل نمایش داده می شود:
.This should be in small
می توان در یک لحظه از چند عنصر استاده کرد؟
شما تا زمانی که از روی هم افتادن برچسب ها جلوگیری کنید، می توانید به راحتی از چند عنصر یا برچست به طور همزمان استفاده کنید. این بهترین تصویر سازی با مثال است:
مثال:
اگر شما می خواهید روی یک متن کوچک عمل تاکید را انجام دهید، باید به این صورت عمل کنید:
1: <em><small>Emphasised small text</small></em>
این مورد اشتباه است:
1: <em><small>Emphasise small text</em></small>
اختلاف این مورد با اولی این است که ما اول برچسبی را بستیم، که اول باز کردیم. از این شیوه برای جلوگیری از گیج شدن خودمان و مرورگر باید اجتناب کنیم.
برچسب های بیشتر!
همانطور که در درس سوم اشاره شد، برچسب باز و بسته آنها، در یک عنصر قرار دارد. این برچسب ها که به اصطلاح برچسب خالی نامیده می شدند، به رویداد خاصی در متن مرتبط نیستند، اما برچسب های جدا کننده هستند. یک نمونه از این قبیل برچسب ها </ br> است که یک خطشکن اجباری را درست میکند.
مثال:
1: Some text<br /> and some more text in a new line
در مرورگر این گونه نشان داده خواهد شد:
Some text
and some more text in a new line
توجه کنید که برچسبی که نوشته شد، اختصاری از برچسب باز و برچسب بسته، همراه با یک فضای خالی و یک اسلش بود: </ br>
یکی دیگر از برچسب هایی که باز و بسته آن در یکی واقع شده است، </ hr> است. که برای رسم یک خط افقی مورد استفاده قرار می گیرد. (“hr” مخفف “horizontal rule” است.)
مثال:
1: <hr />
که شبیه این مورد در مرورگر خواهد شد:
مثال های دیگری که برچسب باز و بسته آنها در یکی واقع شده است ul , ol و li هستند. این برچسب ها برای ساخت لیست مورد استفاده قرار می گیرند.
ul مخفف unordered list و به معنای لیست بدون ترتیب است. این برچسب برای هر خط از بخش یک بولت می گذارد. ol مخفف ordered list و به معنای لیست ترتیبی، برای هر بخش یک شماره قرار می دهد. برای ساخت هر جزء در لیست از li استفاده می شود. گیج شدید؟ مثال را ببینید:
مثال: (لیست بدون ترتیب)
1: <ul>
2: <li>A list item</li>
3: <li>Another list item</li>
4: </ul>
در مرورگر به این شکل نشان داده خواهد شد:
-
A list item
-
Another list item
مثال: (لیست ترتیبی)
1: <ol>
2: <li>First list item</li>
3: <li>Second list item</li>
4: </ol>
در مرورگر به این شکل به نمایش در خواهد آمد:
-
First list item
-
Second list item
این تمامش بود؟
تا اینجا اینها تمامش بود. خوتان دوباره امتحان کنید و صفحات خودتان را با استفاده این هفت عنصر جدیدی که در این درس آموختید بسازید.
1: <strong>Stronger emphasis</strong>
2: <small>Small text</small>
3: <br /> Line shift
4: <hr /> Horizontal line
5: <ul>List</ul>
6: <ol>Ordered list</ol>7: <li>List item</li>
دسته بندی : html
آموزش رایگان html - قسمت پنجم
تا اینجا چه چیز هایی را یاد گرفتید؟
همیشه با الگوی پایه ای که در درس قبل ساختیم شروع کنید:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
در قسمت head یا سر صفحه همیشه عنوان صفحه یا title را بنویسید:
<title/>عنوان صفحه<title>.
توجه کنید که عنوان چطور در بالا سمت چپ مرورگر نشان داده میشود.
عنوان صفحه به طور ویژه مهم است. زیرا بوسیله موتور جست و جو (از قبیل گوگل) برای فهرست کردن سایت شما و نمایش در میان نتایج جست و جو استفاده می شود.
در قسمت بدنه یا body کد، شما محتوای واقعی سایت را می نویسید. شما از قبل در مورد بعضی عناصر مهم چیزهایی می دانید.
<p>Is used for paragraphs.</p>
<em>Emphasis text.</em>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>
به یاد داشته باشید تنها راه یادگیری html سعی و خطا می باشد. اما نگران نباشید، این روشی نیست که بتوانید رایانه تان را یا اینترنت را خراب کنید. بنابراین بسیار آزمون و آزمایش کنید. این بهترین راه برای یک تجربه بزرگ است.
مقصود و هدف ما چه فرضیه ای است؟
هیچ کس تنها با یادگیری مثال های این آموختار، طراح سایت ماهر و قابلی نمی شود. عامل دیگری که در رسیدن به این هدف نقش اساسی را ایفا می کند، تمرین و ممارست بسیار است که باید مد نظر قرار دهید.
بنابراین از آب عمیق بیرون آیید و روی دو پای خود بایستید. خوب… شاید هم نه. اما همراه هر آنچه که یاد میگیرید تمرین و امتحان را فراموش نکنید.
بنابراین مرحله بعدی چیست؟
خودتان تلاش کنید تعدادی صفحه درست کنید. برای مثال یک صفحه با عنوان (title) و یک سرتیتر، مقداری متن، یک زیر عنوان و مقداری بیشتر از متن بسازید. این کاملا طبیعی است که در صورتی که اولین وبسایتتان را می سازید به این آموزش ها نگاهی بیاندازید. اما بعدا ببینید که می توانید بدون مراجعه به منبعی، خودتان پیش روید؟
دسته بندی : html
آموزش رایگان html - قسمت چهارم
اولین وبسایت تان را بسازید
با آنچه که در درس های قبل یاد گرفتید، شما الان فقط چند دقیقه تا ساخت اولین وبسایتتان فاصله دارید.
چطور؟
در درس یک ما آن چیزهایی که برای ساخت یک سایت نیاز بود را به شما نشان دادیم: یک مرورگر و Noteped (یا هر ویرایشگر متن دیگر). چون شما در حال خواندن این متن هستید، پس از قبل مرورگر خود را باز کرده اید. تنها کاری که باید انجام بدهید این است که یک پنجره مرورگر اضافی باز کنید. (مرورگر را یک بار دیگر باز کنید.) بنابراین شما می توانید هم این آموختار را بخوانید و هم وبسایت جدیدتان را هم زمان ببینید.
همچنین Notepad را هم باز کنید. از طریق Accessories در زیر منوی Programs در منوی استارت.
من باید چه کار کنم؟
اجازه دهید با چیز های ساده شروع کنیم. چطور است راجع به یک صفحه ای که بگوید: “هورا! این اولین وبسایت من است”. شروع به خواندن کنید و به سادگی آن پی ببرید.
HTML ساده و منطقی است. مرورگر HTML را مثل وقتی که شما انگلیسی را میخوانید می خواند: از بالا به پایین و از چپ به راست. بنابراین یک سند HTML ساده با آن چیزی که باید اول بیاید شروع می شود، و با آن چیزی که باید در انتها بیاید به آخر می رسد.
اولین کاری که نیاز دارید انجام دهید، این است که به مرورگر بگویید که، شما با زبان HTML می خواهید با او گفت و گو کنید. این کار با برچسب <html> انجام می شود. بنابراین قبل از اینکه هر کاری را غیر از این انجام دهید، برچسب <html> را در اولین خط از سندتان در برنامه notepad تایپ کنید.
همانطور که ممکن است از درس های قبل به یاد داشته باشید، <html> یک برچسب باز است و باید زمانی که نوشتن کدهای html تان به پایان رسید، با برچسب بسته به اتمام برسد. بنابراین برای اینکه مطمئن شوید که برچسب بسته را فراموش نمی کنید، حال <htm/> را در دو خط پایین تر تایپ کنید و بقیه کدهای اچ تی ام ال را بین <html> و <html/> تایپ کنید.
مورد بعدی که سندتان به آن احتیاج دارد برچسب <head> است، که اطلاعاتی را در مورد صفحه آماده می کند. و <body> که محتوای سندتان در آن وجود دارد. به دلیل اینکه اگر HTML منطقی نباشد بی ارزش میشود، برچسب باز و بسته head، باید بالای برچسب باز و بسته body قرار گیرد.
سند شما باید مانند این به نظر برسد:
توجه کنید که ما چطور برچسب ها را با خطوط خالی (استفاده از کلید Enter) و تورفتگی ها (با استفاده از کلید Tab) ساختار بندی کردیم. در اصل اهمیتی ندارد که چگونه سند html تان را ساختار بندی می کنید. اما به شما و دیگر نویسندگان کد شما برای بازبینی بهتر کمک می کند. شدیدا پیشنهاد می شود که کدهای html را با یک شیوه شسته رفته با استفاده از فاصله ها و تورفتگی ها، ساختار بندی کنید. مانند مثال بالا.
اگر سند شما شبیه مثال بالا است، شما اولین وبسایتتان را ساختید. یک ساخت ویژه و احتمالا سایتی که از اول این آموزش به خواب هم ندیده اید. آن چیزی که شما ساختید قالب پایه ای برای همه ی اسناد HTML آینده تان خواهد بود.
تاکنون خوب بود، اما چطور محتوا را به سایت اضافه کنم؟
همانطور که پیش از این یاد گرفتید، سند HTML شما دو قسمت دارد. یک سرصفحه (head) و یک بدنه (body). در قسمت head شما اطلاعاتی راجع به صفحه می نویسید. در صورتی که Body شامل اطلاعاتی است که صفحه را تشکیل می دهد.
به عنوان مثال، اگر شما بخواهید یک عنوان به صفحه بدهید که در قسمت بالای برنامه مرورگر ظاهر می شود، این کار را باید در قسمت head صفحه انجام دهید. عنصری که برای عنوان استفاده می شود <title> است. مثلا عنوان صفحه را بین برچسب باز <title> و برچسب بسته <title/> بنویسید.
توجه کنید که این عنوان در خود صفحه نشان داده نمی شود. هر چیزی که می خواهید در صفحه نشان داده شود محتوا است و بنابراین باید در بین برچسب body اضافه شود.
به طوری که وعده داده شد، ما می خواهیم در صفحه بگوییم: “هورا ! این اولین سایت من است.” این متنی است که ما می خواهیم مکاتبه شود و از این رو به قسمت body تعلق دارد. بنابراین در قسمت body کد زیر را تایپ می کنیم:
حرف P در برچسب <p> مخفف paragraph به معنای پاراگراف است. که دقیقه معنای خود را می رساند.
سند html شما باید حالا شبیه این باشد:
کامل شد! شما به طور واقعی اولین وبسایت تان را ساختید.
در مرحله بعد شما باید این سند را بروی حافظه رایانه خود ذخیره کنید . در مرورگر خود باز کنید.
- در Notepad یا هر برنامه ویرایش متن دیگر از منوی File گزینه Save as را انتخاب کنید.
- در پنجره ای که باز می شود، از جعبه Save as type ، نوع All Files را انتخاب کنید. این مورد خیلی مهم است. در غیر این صورت شما یک سند متن ساده را خواهید داشت، نه یک سند HTMl.
- حال سند را به عنوان Page1.html ذخیره کنید. تمام شدن با “htm.” نشان می دهد که آن یک سند HTML است. “html.” هم نتیجه ای مشابه دارد. من همیشه از htm. استفاده می کنم ولی شما می توانید از هر کدام از این دو پسوند که ترجیح می دهید استفاده کنید. اهمیتی ندارد که این فایل را در کجای حافظه رایانه ذخیره کنید. تا زمانی که با یاد داشته باشید آن فایل را کجا ذخیره کرده اید، می توانید آن را دوباره پیدا کنید.
حالا به مرورگر می رویم:
- در منوی File دستور Open را انتخاب می کنید. (یا کلید های ترکیبی CTRL+O را فشار دهید.)
- در جعبه ای که ظاهر می شود بروی Browse کلیک کنید.
- حال فایل html را پیدا کنید و روی Open کلیک کنید.
تبریک! حالا باید در مرورگرتان “هورا! این اولین وبسایت من است.” را نشان دهد.
اگر می خواهید که شاهکارتان فورا بروی وب دیده شود، می توانید به درس 13 پرش کنید و چگونگی آپلود یک صفحه روی اینترنت را یاد بگیرید. در غیر این صورت صبوری کنید درس ها را به ترتیب بخوانید. سرگرمی تازه شروع شده است.
دسته بندی : html
آموزش رایگان html - قسمت سوم
الان شما برای یادگیری ماهیت HTML یعنی اجزاء آن آمادگی دارید. عناصر یا اجزاء، یک ساختاری به صفحه HTML ما می دهند و به مرورگر می گوید که چطور می خواهید سایت شما نمایش داده شود. معمولا عناصر یا برچسب ها شامل یک تگ ابدایی و مقداری محتوا و تگ پایانی می شوند.
برچسب ؟
برچسب ها (TAG) اصطلاحات خاصی هستند که شما از آنها برای علامت گذاری ابتدا و انتهای عنصر استفاده می کنید.
همه برچسب ها یک نوع فرم دارند: آنها با علامت کوچکتر از (>) شروع می شوند، و با علامت بزرگتر از (<) به اتمام می رسند.
معمولا دو نوع برچسب وجود دارد، برچسب باز کردن: <html> و برچسب بستن: <html/>. تنها اختلافی که بین برچسب باز و برچسب بسته وجود دارد، به اسلش (/) آن بر می گردد. شما محتوایتان را با گذاشتن بین برچسب باز و برچسب بسته، علامت گذاری می کنید.
HTML همگی پیرامون همین عناصر هستند. یادگیری HTML، یادگیری و استفاده از برچسب های مختلف است.
می توانی به من تعدادی مثال نشان دهی؟
خوب، عنصر em روی متن تاکید می کند. کلیه متون بین تگ باز <em> و تگ بسته <em/> در مرورگر به صورت تاکید شده هستند. (em مخفف emphasis به معنای تاکید است.)
مثال 1:
<em>emphsised text...</em>
در مرورگر به این صورت به نمایش در خواهد آمد:
emphasised text…
عناصر h1, h2, h3, h4, h5 و h6 برای سر تیتر ها استفاده می شود.(H مخفف heading می باشد.)، که H1 سطح اول است و معمولا بزرگترین متن است. H2 سطح دوم سرتیتر است و معمولا کمی کوچکتر است. و H6 ششمین است و در سلسمه مراتب سرتیتر ها کوچکترین متن می باشد.
مثال 2:<h1>This is a heading</h1>
<h2>This is a subheading</h2>
که در مرورگر به این صورت نشان داده خواهد شد:
This is a heading
This is a subheading
بنابراین من همیشه به تگ باز و تگ بسته احتیاج دارم؟
همانطور که می دانید در هر قاعده ای استثناء وجود دارد و در html استثنایی است که تعدادی عنصر هستند که هر دوی باز و بسته آن در یک برچسب وجود دارد. این عناصر که عناصر خالی هم نامیده می شوند، به هیچ رویداد ویژه ای در متن متصل نیستند ، اما بیشتر برچسب های مجزا کننده هستند. به عنوان مثال عنصر شکست خطوط که به این شکل است: </ br>
برچسب ها باید با حروف بزرگ نوشته شوند یا حروف کوچک؟
بیشتر مرورگر ها اگر شما برچسب ها را به صورت بزرگ یا کوچک یا ترکیبی از هر دو تایپ کنید، به این موضوع توجهی نمی کنند. <HTML>یا <html> یا <HtMl> معمولا یک نتیجه را شامل می شوند. هرچند شیوه رایج برای نوشتن برچسب ها استفاده از حروف کوچک است. بنابراین به نوشتن برچسب ها با حروف کوچک عادت کنید.
من این برچسب ها را باید کجا بگذارم؟
شما برچسب هایتان را درون یک سند HTML می نویسید. یک سایت شامل یک یا چند سند HTML می باشد. وقتی که شما در وب به گشت و گذار می پردازید، صرفا اسناد مختلف HTML را باز می کنید.
اگر شما درس بعدی را در 10 دقیقه دنبال کنید، اولین وبسایتتان را خواهید ساخت.
دسته بندی : html
آموزش رایگان html - قسمت دوم
HTML چیست؟
در این درس به شما یک ارائه ای مختصر از دوست شما، html داده خواهد شد.
html زبان مادری مرورگر شما است.
به عنوان خلاصه ای از تاریخچه، html در سال 1990 بوسیله دانشمندی به نام Berners-Lee ساخته شد. هدف از این کار ساده ساختن کار دانشمند ها از دانشگاه های مختلف برای دستیابی به منابع پژوهشی همدیگر بود. این پروژه حتی موفق تر از حد تصور Berners-Lee شد. با ساخته شدن اچ تی ام ال، او پایه ای از وبی که ما امروزه از آن آگاهیم را بنا نهاد.
Html زبانی است که نمایش اطلاعات مانند پژوهش دانشمندان را، بروی اینترنت مقدور ساخت. آن چیزی که شما هنگام بازدید از یک صفحه وب می بینید، نتیجه تفسیر مرورگر شما از کد های html است. برای دیدن کدهای html، از یک صفحه در اینترنت، به سادگی بروی view از منوی بالای مرورگر کلیک کنید، و گزینه source را انتخاب کنید.
برای افراد ناآشنا، کدهای html پیچیده به نظر می رسد، ولی این آموزش به شما در درک و فهم آن کمک خواهد کرد.
به چه دلیل من می توانم از html استفاده کنم؟
اگر شما میخواهید یک سایت درست کنید، راهی برای دور زدن html وجود ندارد. حتی اگر از برنامه های طراحی سایت، از قبیل دریم ویور یا فرونت پیج استفاده می کنید، دانش پایه ای از html می تواند برای ساده کردن فرایند و بهتر ساختن سایت ضروری باشد. خبر خوب این است که یادگیری و استفاده از اچ تی ام ال ساده است. بوسیله دو درس از الان، شما ساختن اولین سایتتان را یاد خواهید گرفت.
html برای ساختن وبسایت استفاده می شود. استفاده از آن خیلی ساده است.
اما html نماینده ای از چیست؟
html مخفف Hyper Text Mark-up Language است ، که بیش از قبل، شما نیاز دارید که در این مرحله چیزهایی بدانید. هرچند به ما اجازه دهید به منظور دسته بندی بهتر، جزئیات بیشتری را توضیح دهیم.
- Hyperمتضاد linear به معنای خطی یا طولی است. در زمان های خیلی قبل، زمانی که موش ها موجوداتی بودند که گربه ها آنها را تعقیب می کردند، برنامه های رایانه های به صورت خطی اجرا می شدند: زمانی که برنامه ای اجرا می شد یک خط آن اقدام می کرد و سپس به خط بعدی می رفت و به همین ترتیب. اما html متفاوت بود. شما می توانستید به هر کجا و در هر زمان که می خواستید بروید. برای مثال لازم نبود که به MSN.com بروید قبل از آنکه از HTML.NET بازدید کنید.
- Textبه معنای متن، خودش روشنگر موضوع است.
- Mark-upکاری است که شما با متون انجام میدهید. شما متن ها را با یک شیوه یکسان، برای برنامه ویرایش متون با سرتیترها، بولت ها و متن های ضخیم و غیره علامت گذاری می کنید.
- Language همان زبان html است. اچ تی ام ال از تعدادی کلمه انگلیسی استفاده می کند.
در این آموختار شما به اصطلاح (Extensible Hyper Text Mark-up Language) XHTML را به اختصار یاد خواهید گرفت. که یک شیوه ساختار بندی بسیار بهتر، برای نوشتن html است.
حال شما برای شروع کار ساخت وبسایت، می دانید که html (و Xhtml) چیست.
دسته بندی : html
آموزش رایگان html - قسمت اول
در درس اول شما با مختصری از ابزار هایی که برای ساخت یک وبسایت نیاز دارید آشنا خواهید شد.
به چه چیزی احتیاج دارید؟
به احتمال زیاد شما به ابزار هایی که نیاز دارید از قبل دسترسی دارید.
شما یک مرورگر دارید. مرورگر یک برنامه ای است که امکان جست و جو و باز کردن یک صفحات وب را به شما می دهد. شما همینک در حال دیدن همین صفحه درون یک مرورگر هستید.
این امر مهم نیست از کدام مرورگر استفاده می کنید. معمول ترین آنها اینترنت اکسپلورر است. اما مرورگر های دیگری از قبیل Opera و Mozilla Firefox هم می توانند مورد استفاده قرار گیرند.
ممکن است شما شنیده باشید یا حتی خودتان استفاده کرده باشید از برنامه هایی از قبیل front page, Dreamweaver یا حتی Microsoft Word که می توانند وبسایتی را طراحی کنند. این برنامه ها را همین حالا فراموش کنید! آنها در آموزش نحوه کدنویسی سایت به شما کمک زیادی نمی کنند.
در عوض شما به یک ویرایشگر متن ساده نیاز دارید. اگر از سیستم عامل ویندوز استفاده می کنید، می توانید از Notepad استفاده کنید. که معمولا در منوی Start و در زیر منوی Accessories قابل دسترس است.
اگر شما از ویندوز استفاده نمی کنید، می توانید از ویرایشگر های کد مشابه استفاده کنید. به عنوان مثال از Pico در لینوکس و TextEdit در مکینتاش.
Notepad یک برنامه ویرایش متن خیلی ساده است که برای کدنویسی بسیار خوب است، به دلیل اینکه با آنچه شما تایپ می کنید رابط کاربری ندارد. این به شما یک کنترل کاملی را می دهد. مشکل این نوع برنامه ها در مقابل نرم افزار هایی که ادعا می کنند می توانند وبسایتی را طراحی کنند این است که، آنها تعدادی وظیفه و عمل استاندارد دارند که شما می توانید آنها را انتخاب کنید. حداقل آن این است که هر آنچه که برای گنجاندن نیاز دارید درون این وظایف استاندارد موجود است. بنابراین این نوع برنامه ها (برنامه های ویرایش متن ساده) اغلب نمی توانند یک سایتی را عینا همانطور که شما می خواهید بسازند. یا حتی به طور رنج آور تغییراتی در کد های دست نوشته شما میدهند. با Notepad و یا دیگر برنامه های ویرایش متن ساده شما فقط خودتان از موفقیت و خطاهایتان تقدیر می کنید.
یک مرورگر و Notepad (یا هر ویرایشگر متن ساده) تنها چیزی هستند که در سراسر این سری اموزشی برای ساخت یک سایت به آنها احتیاج داریم.
آیا برای ساخت سایت باید به اینترنت متصل شد؟
شما نیازی به ارتباط به اینترنت ندارید. مگر اینکه این آموزش ها را بخوانید یا در صورتی که در حال آماده کردن سایتتان باشید.
اگر شما نمی خواهید به اینترنت متصل شوید، حال آنکه می خواهید این آموزش ها را بخوانید، شما می توانید از این نوشته ها پرینت بگیرید یا در حال خواندن این صفحات از روی صفحه نمایش اتصال خود را از اینترنت قطع کنید. شما می توانید سایت خود را بروی حافظه ی رایانه خود بسازید و پس از آماده شدن، آن را بروی اینترنت آپلود کنید.
و در آخر…
به درس بعدی بروید و قبل از اینکه به طور واقعی سرگرمی را در درس 3 شروع کنیم، درباره اچ تی ام ال مطالبی دیگر بخوانید.
دسته بندی : html
آموزش رایگان HTML - مقدمه
مردم اغلب فکر می کنند که ساخت یک سایت کار بی نهایت سختی است. قضیه از این قرار نیست! هر کسی می تواند چگونگی ساخت وبسایت را یاد بگیرد. و اگر شما به خواندن بقیه مطالب ادامه دهید، حتی می تونید در عرض فقط یک ساعت یک سایت برای خود بسازید.
از اعتقاد های دیگر که فقط یک اشتباه است، این است که برای ساخت یک سایت نرم افزار های گران و پیشرفته ای احتیاج است. این درست است که تعدادی نرم افزار وجود دارد که ادعا می کنند برای شما سایت طراحی می کنند. بعضی از آنها از بعضی دیگر دقیق تر هستند. اما اگر شما می خواهید این کار به نحو احسن انجام شود باید خودتان این کار را انجام دهید. خوشبختانه این کار هم ساده است و هم رایگان و از قبل تمام برنامه هایی که احتیاج هست را دارید.
کمک این آموزش این است که به شما یک مقدمه صحیح، آسان و کامل را برای چگونگی ساخت سایت می دهد. این خودآموز از صفر شروع به آموزش می کند و مطلقا از قبل به هیچ دانش برنامه نویسی احتیاج نیست.
آموختار تمام مطلب را نمی تواند به شما نشان دهد. بنابراین مقداری اشتغال و تجربه و آزمون مورد نیاز می باشد. اما نگرانی وجود ندارد، آموزش ساخت وبسایت بسیار مفرح است و زمانی که شما آن را مفید یافتید، رضایت زیادی را به شما خواهد داد.
اینکه شما چطور از این آموزش استفاده کنید به خودتان بستگی دارد. ولی ما به شما پیشنهاد می کنیم فقط یک یا دو درس را در روز مطالعه کنید و وقتی را برای آزمایش و تمرین بروی چیز های جدیدی که از هر درس یاد می گیرید بگذارید.
بسیار خوب! حرف زدن کافی است. اجازه دهید شروع کنیم!!!
دسته بندی : html
دوره جدید آموزشی HTML
با سلام خدمت شما خواننده گرامی.
امیدوارم که لحظات زندگیتان پر از سرور و شادی باشد. از آنجایی که تا به اینجا مقدمه ای از اهمیت و همچنین مبانی آموزش html گفته شد، دیگر وقت آن رسیده که گام در راه یادگیری گذاشته و مراحلی را با هم طی کنیم.
در این سری از آموزش اچ تی ام ال قصد دارم که یک نمونه از اموزش های خوب در اینترنت را برای شما به لحاظ ترجمه آماده کرده و در اختیار شما عزیزان بگذارم. سایت html.net آموختاری در حد قابل قبول آماده کرده است که من تصمیم دارم با آماده سازی این آموزش ها یک دوره از html را با همه به اتمام برسانیم. امیدوارم که مورد رضایت شما واقع گردد.
تمامی این دسته از آموزش ها در موضوعی به نام html .net گردآوری می شود که می توان گفت این کار برای سهولت یادگیری شماست. و همچنین دسترسی به این موضوع از طریق صفحه اصلی و یا تمام صفحات از منوی “موضوعات ” امکان پذیر است.
قابل ذکر است که در سری بعدی آموزش ها، با دسته بعدی از آموزش ها همراه ما باشید که همراه ما با خیلی از مسائل آشنا خواهید شد.
شاید بتوان گفت این اولین گام در جهت رضایت شماست و باشد که با پیشنهادات خود گام های اساسی تری را برای شما با هم برداریم. پس برای شروع کار با ما همراه باشید…
دسته بندی : html