سلام دوستان
نظرتون چیه، اینجا شروع کنم به یاد دادن زبان های برنامه نویسی ساده، مثل HTML وCSS
هم برای بازار کار عالیه و هم می تونید به صورت فریلنسر فعالیت کنید و کلی کار هنری و طراحی و دولوپ وب انجام بدید.
فعلا با HTML شروع میکنم که نیاز به نصب هیچ چیزی رو کامپیوتر نداره و صرفا یه notepad میخوایم
با کمک HTML هرکس میتونه به سادگی یه وبسایت رو درست بکنه. زبان HTML برای یادگیری خیلی خیلی اسونه.
من مطمئنم که از یادگیریش واقعا لذت می برید
من تا حالا چندین بار شروع کردم html وcss کار میکنم یاد میگیرم ولی جلوتر نرفتم
خیلی دوست داشتم که ی نفر پایه پیدا میکردم تا php پیش میرفتم
فک نکنم تو نی نی سایت بشه
اول از همه یه کد خیلی ساده رو قرار میدم
خط اول نوشته DOCTYPE HTML! تو این خط ما تو برنامه مشخض می کنیم که نوع فایلی که میخواد اجرا بشه، از نوع HTML هست.
تو زبان HTML همیشه ما دو تا تگ داریم که با یکی شروع میکنیم و درنهایت با یه تگ می بندیم. مثلا برای شروع هر برنامه ی HTML ما با استفاده از تگ <html> فایلمون رو شروع می کنیم و در نهایت در انتهای فایل وقتی کارمون تموم شد با تگ <html/> کارمون رو تموم می کنیم.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
زبان HTML زبان بخش بخشی هست، مثلا یه بخش داریم به اسم head که تگ هاش به این شکله <head> و <head/>
معمولا meta information رو در یه صفحه ی HTML تو قسمت سر یا همون head قرار میدیم.
یه قسمت خیلی مهم توی HTML قسمت بدن هست یا همونbody که تگ هاش <body> و <body/> هست، معمولا پاراگراف ها، متن ها، شکل ها، لینک ها و ... رو در این بخش قرار میدن.
مثلا برای نوشتن پاراگراف، کافیه هر متنی که دوست دارید رو بین <p> و <p/> بنویسید و نتیجه رو ببینید.
دستت درد نكنه برامون زحمت ميكشى
برای عنوان ها ما میتونیم از سایز های مختلفی استفاده کنیم که سایزهاش از <h1> تا <h6> هست.
هر تگی یه سری ویژگی های خاص خودشو داره، یه سری تگ ها نیازی به بسته شدن ندارن، چون دارن یه کار ثابتی رو انجام میدن و میدونن باید خودشون کجا بسته بشن
مثل <hr> که یه خطر افقی می کشه، مثلا بین دو تا پاراگراف با قراردادن یه <hr> میشه یه خط بین دوپاراگراف کشید.
یا مثلا <br> که اگر بین متن بیاد، خط رو میشکونه و میاد ادامه رو از سطر بعد ادامه میده و اگر در متن به کار نره، صرفا یه اینتر میزنه و می اد پایین
برای قرار دادن عکس، مثل شکل بالا، همونجور که می بینید تگ با اسم img شروع شده که مخفف image یعنی عکس هست.
بعد نوشته src که مخفف source یا همون منبع هست، ما جلوی سورس، لینک اون عکس رو قرار میدیم.
بعد می بینید که نوشته alt که در واقع مخفف alternative text هست، زمانی که عکس ما بنا به دلیلی نمی تونه باز بشه یا لود نمیشه، این نوشته جای عکس میاد. فکر کنم زیاد دیدید جایی که عکس ها باز نمیشه نوشته image cannot be displayed
بعد می بینید نوشته width که منظور عرض تصویر به پیکسله و در ادامه اش هم height که ارتفاع عکس هست، تمامی این مقادیر رو میشه به صورت دستی داد و با هر سایزی که دوست دارید، عکس رو توی کد html تون قرار بدید.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
تفاوت <p> و <pre>
وقتی تو پاراگراف یا همون <p> متنی رو می نویسی، چه اینتر بزنی، چه نزنی، چه بینشون فاصله بدی چه ندی، خود کامپایلر میاد و هر چی هست رو پشت سرهم چاپ می کنه، بدون کمترین فاصله ای. اما وقتی از preformatted text یا همون <pre> استفاده می کنی، متن به همون شکلی که نوشته شده با هر اینتر یا فاصله ای، دقیقا به همون شکل چاپ میشه.
اما راهنما یا همون tooltip چی هست؟
تا حالا دیدید وقتی میرید روی یه نوشته یا یه متنی، یه نوشته ی کوچیک میاد زیر پوینتر موستون.
برای اومدن این نوشته کافیه وقتی دارید یه پاراگراف رو می نویسید جلوی پاراگراف مثل کد زیر بنویسید title و جلوش هر متنی که دوست دارید زیر اشاره گر موس بیاد رو تایپ کنید
<" ...اینجارو میگم که میشه هر چیزی تایپ کرد و در زیر اشاره گر میادش.. p title="I'm a tooltip>
Mouse over this paragraph, to display the title attribute as a tooltip.
<p/>
برای قرار دادن یک پیوند یا همون لینک، خیلی ساده از تگ a استفاده میشه. سپسبا استفاده از ویژگی href لینک مورد نظر رو جلوش قرار می دید و تگ a رو می بندید. بعد هر متنی که دوست دارید می نویسید و در نهایت از تگ خاتمه دهنده ی a استفاده می کنید.
با این کار مثل کد زیر، NiNi Site آبی رنگ میشه و زیرش یه خط می افته، وقتی هم که روش کلیک کنید وارد ادرسی که قرار دادید که اینجا نی نی سایته میشید.
<a href="http://www.ninisite.com"> NiNi Site </a>
