https://virgool.ir/feed/@shmimab79fa2026-11-11 14:47:44https://files.virgool.ir/upload/users/83135/avatar/avatar.pnghttps://virgool.ir/@shmimab79https://virgool.ir/@shmimab79/css-jamhwbivbw47implementing CSS:و CSS نحوه نمایش عناصر HTML را روی صفحه ، کاغذ یا سایر رسانه ها توصیف می کند,CSS کار زیادی را صرفه جویی می کند. این می تواند طرح چند صفحه وب را به طور هم زمان کنترل کند.CSS را می توان به 3 روش به عناصر HTML اضافه کرد:وو Inline - با استفاده از ویژگی سبک در عناصر HTML Internal - با استفاده از یک عنصر <style> در بخش <head>   extrnal - با استفاده از یک فایل CSS خارجیInline CSS:از inline CSS برای اعمال یک سبک منحصر به فرد در یک عنصر HTML استفاده می شود.یک inline CSS از ویژگی سبک یک عنصر HTML استفاده می کند.<html><body><h1 style="color:blue;">This is a Blue Heading</h1></body></html>Intenal CSS:از internal CSS برای تعریف یک style برای یک صفحه HTML استفاده می شود.CSS داخلی در بخش <head> یک صفحه HTML ، در یک عنصر <style> تعریف شده است:<head> <style> body {background-color: powderblue;} h1   {color: blue;} p    {color: red;} </style> </head> Extrnal CSS:برای تعریف styleبرای بسیاری از صفحات HTML از an external style sheet استفاده می شود.با داشتنan external style sheet ، می توانید با تغییر یک پرونده ، ظاهر کل یک وب سایت را تغییر دهید!برای استفاده از an external style sheet ، در قسمت <head> صفحه HTML پیوندی به آن اضافه کنید:<head> <link rel="stylesheet" href="styles.css"> </head>Here is how the "styles.css" looks:body {   background-color: powderblue; } h1 {   color: blue; } p {   color: red; }BOX MODEL:CSS Margin:خاصیت حاشیه (فضا) خارج از مرز را تعیین می کند.مثالCSS Padding:یک padding (فضای) بین متن و مرز .CSS Backgrounds:از خصوصیات پس زمینه CSS برای تعریف جلوه های پس زمینه برای عناصر استفاده می شود.CSS background properties:background-colorرنگ پس زمینه را عوض میکندbackground-imageعکس برای پس زمینه با استفاده از url تعیین میکندbackground-repeatیک عکس1kb و کوچک را چند بار تکرار میکند و در پس زمینه تعیین میکندbackground-attachmentمشخص می کند که آیا تصویر پس زمینه باید پیمایش شود یا ثابت شود (با بقیه صفحه پیمایش نخواهد شد)background-positionمورد استفاده برای تعیین موقعیت تصویر پس زمینه.CSS Borders:به شما امکان می دهد style ، wietgh و color border یک عنصر را مشخص کنید.dotted - Defines a dotted borderdashed - Defines a dashed bordersolid - Defines a solid borderdouble - Defines a double bordergroove - Defines a 3D grooved border. The effect depends on the border-color valueridge - Defines a 3D ridged border. The effect depends on the border-color valueinset - Defines a 3D inset border. The effect depends on the border-color valueoutset - Defines a 3D outset border. The effect depends on the border-color valuenone - Defines no borderhidden - Defines a hidden borderShmim AbbasiShmim AbbasiThu, 12 Dec 2019 01:16:33 +0330https://virgool.ir/@shmimab79/html5-semantics-j4ifxcjq85a5و smantics عبارت است از بررسی معانی کلمات و اصطلاحات در یک زبان.Semantics elemants = عناصر با معنی.عناصر HTML معنایی به وضوح معنی آن را به روشی قابل خواندن توسط انسان و ماشین توصیف می کنند. عناصری مانند <header> ، <footer> و <article> همگی معنایی به حساب می آیند زیرا آنها به طور دقیق هدف از عنصر و نوع محتوای موجود در آنها را توصیف می کنند.عنصر معنایی به طور واضح معنی آن را هم برای مرورگر و هم برای توسعه دهنده شرح می دهد.نمونه هایی از عناصر معنایی: <form> ، <table> و <article> - به وضوح محتوای آن را تعریف می کند.html5بسیاری از وب سایت ها حاوی کد HTML مانند: <div id = "nav"> <div class = "header"> <div id = "footer">برای نشان دادن ناوبری ، سربرگ و پاورقی.و HTML5 عناصر معنایی جدید را برای تعریف قسمت های مختلف یک صفحه وب ارائه می دهد:HTMLT <section> elementعنصر <section> بخشی را در یک docoument تعریف می کند. "یک بخش یک گروه بندی موضوعی از مطالب است ، به طور معمول با عنوان."یک صفحه اصلی برای معرفی ، محتوا و اطلاعات تماس می تواند به بخشهایی تقسیم شود.<!DOCTYPE html><html><body><section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p></section><section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p></section></body> </html>HTML <article> element:عنصر <article> محتوای مستقل و حاوی خود را مشخص می کند.یک article باید به خودی خود معقول باشد ، و باید بتوان آنرا مستقل از بقیه وب سایت ها خواند.مثال:Forum postBlog postNewspaper articleHTML5 <header> Element:عنصر <header> یک عنوان برای یک docoument یا بخش را مشخص می کند.از عنصر <header> باید به عنوان ظرفی برای محتوای مقدماتی استفاده شود.می توانید چندین عنصر <header> در یک سند داشته باشید.عنصر <header> به طور کلی در بالای یک سند ، یک بخش یا یک مقاله یافت می شود و معمولاً شامل عنوان اصلی و برخی از ابزارهای جستجو و جستجو است.مثالHTML5 <footer> Element:عنصر <footer> پاورقی برای یک سند یا بخش را مشخص می کند.یک عنصر <footer> باید اطلاعاتی در مورد عنصر حاوی آن داشته باشد.یک پاورقی به طور معمول شامل نویسنده سند ، اطلاعات مربوط به حق چاپ ، پیوندهای مربوط به شرایط استفاده ، اطلاعات تماس و غیره است.اگر یک <footer> معمولاً در پایین یک سند ، یک بخش یا یک article یافت می شود. دقیقاً مانند <header> محتوا به طور کلی اطلاعات فراخوانی است ، مانند جزئیات نویسنده ، اطلاعات حقوقی و یا پیوندهایی به اطلاعات مرتبط. همچنین درج عناصر <section> در یک پاورقی نیز معتبر است.HTML5 <nav> Element:عنصر <nav> مجموعه ای از پیوندهای ناوبری را تعریف می کند.توجه کنید که همه پیوندهای یک سند نباید درون یک عنصر <nav> باشد. عنصر <nav> فقط برای لینک های اصلی پیوندهای ناوبری در نظر گرفته شده است.مثالHTML5 <aside> Element:عنصر <aside> مقداری از محتوا را جدا از محتویاتی که در آن قرار دارد تعریف می کند (مانند نوار کناری).محتوای <aside> باید مربوط به محتوای اطراف باشد.Shmim AbbasiShmim AbbasiTue, 10 Dec 2019 12:04:16 +0330https://virgool.ir/@shmimab79/class-id-qtbffwm5vwtyclass:با استفاده از صفت class در HTML میتوان استایلی معادل برای همه عناصری که نام class یکسانی دارند تعریف کرد.از ویژگی class HTML برای تعریف سبکهای برابر برای عناصر با نام classمشابه استفاده می شود.بنابراین ، تمام عناصر HTML با ویژگی classمشابه ، یک سبک را دریافت می کنند.صفت class هم میتوانیم در inline, blockاستفاده کنیم در CSS ، برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر دوره (.) بنویسید ، و به دنبال آن نام کلاس:<style> .city {  background-color: tomato;  color: white;  padding: 10px;} </style> <h2 class="city">London</h2><p>London is the capital of England.</p> <h2 class="city">Paris</h2><p>Paris is the capital of France.</p><h2 class="city">Tokyo</h2><p>Tokyo is the capital of Japan.</p>عناصر HTML می توانند بیش از یک نام class داشته باشند ، هر نام class باید با یک فاصله از هم جدا شود.مثالid: یک id منحصر به فرد برای یک عنصر HTML را مشخص می کند (مقدار باید در سند HTML بی نظیر باشد).مقدار id می تواند توسط CSS و JavaScript برای انجام برخی وظایف خاص برای عنصر با مقدار id خاص استفاده شود.در CSS ، برای انتخاب یک عنصر با یک id خاص ، یک علامت هش (#) بنویسید ، به دنبال آن شناسه عنصرمثالتفاوت بین id&classیک عنصر HTML فقط می تواند یک id منحصر به فرد داشته باشد که متعلق به آن عنصر واحد است ، در حالی که یک نام class می تواند توسط چندین عنصر استفاده شودShmim AbbasiShmim AbbasiMon, 09 Dec 2019 23:58:17 +0330https://virgool.ir/@shmimab79/blockinline-element-g1tixyhb8jswهر یک از تگ ها یا عناصر HTML بصورت پیش فرض بسته به نوع عنصر دارای یک حالت نمایش می باشند، بطور کلی حالت نمایش تگ ها یا عناصر در HTML به ۲ صورت میتونه باشه :نمایش بلاکی یا Blockنمایش درون خطی یا Inlineblock:عناصر بلاک همیشه در یک خط جدید اغاز میشوند و کل فضای محدوده خود را اشغال میکنند و کل عرض یک سطر رو به خودشون اختصاص میدهبرای مثال:<div><h1> - <h6><p><form><address><article><aside>.........برای نمونه inline:عناصر inlineدر خط حدید شروع نمیشوند وتنها اندازه طول خود جا اشغال میکنندبرای مثال:<span><a><img>برای نمونه<div>عنصر <div> یک عنصر block می باشد که می تواند به عنوان یک ظرف برای گروه بندی دیگر عناصر HTML استفاده شود.عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style, class برای بلاک هایی با محتوای زیاد استفاده شود. نمونه و برای استفاده از این المان در css از این دستور استفاده میکنیمdiv {  display: block;}<span>عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.عنصر <span> معنی خاصی ندارد.عنصر <span> هیچ صفت اجباری ندارد وقتی از آنها به همراه CSS استفاده کنیم عنصر <span> میتواند برای استایل دهی قسمتی از متن مورد استفاده قرار گیرد.هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style , classبرای بخش های متنی شکل، استفاده شود.نمونهShmim AbbasiShmim AbbasiMon, 09 Dec 2019 22:54:55 +0330https://virgool.ir/@shmimab79/html-form-c0p5gfy71pjuhtml form برای اینکه بتوانیم در صفحه وب خود همچین فرمی پیاده سازی کنیم باید با دستورات زیر اشنا شویم<form></form>فرم المانی است که برای جمع اوری ورودی از کاربر استform element:<input></input>یکی از مهم ترین المنت های فرم است که به شکل های مختلف پیاده سازی میشود و به متغییر typeوابسته استType Description <input type="text"> Defines a one-line text input field <input type="radio"> Defines a radio button (for selecting one of many choices) <input type="submit"> Defines a submit button (for submitting the form)برای "text" اول که یک خط وارد فایلد میکنیم شکل وب ما به این شکل میشود کلیکبرای radio button برای انتخاب یک گزینه از بین چند گزینه استفاده میشود کلیکو Submit یک button برای ارسال اطلاعاتی که در فرم وارد کردیم به یک سرور کلیکاینجا انواع مختلف input type هستند که میتوانیم درhtml از ان ها استفاده کرد<input type="button">به این شکل و با کمک صفت valueمیتوانیم یک مقدار قرار دهیم کلیک<input type="checkbox">برای انتخاب یک یا چندین گزینه از این صفت استفاده میکنیم<input type="color">یک فیلد رنگ است در فرم برای اینکه رنگ دلخواه انتخاب کنیم کلیک<input type="date">فیلدی است که تشکیل شده از تاریخ و تاریخ مورد نظر از کاربر میگیرد کلیک<input type="datetime-local">این فیلد ورودی تاریخ و زمان است بدون منطقه زمانی<input type="email">این فیلد از کاربر ورودی emailمیگیردو درصورتی خطایی در وارد کردن ایمیل باشد به ما خطا میدهد<input type="file">این قسمت فیلد انخاب پرونده . یک دکمه "مرور" برای بارگذاری پرونده استکلیک<input type="hidden">برای اینکه اطلاعاتی که میخواهیم وارد کنیم به شکل مخفی باشد<input type="image"><input type="month">به کاربر اجازه انتخاب سال و ماه را میدهد<input type="number">این فیلد برای ورودی عدد است و عدد از کاربر میگیرد ومیتواینیم محدودیت هایی درباره پذیرش عدد قرار دهیم کلیک<input type="password">فیلد وارد کردن پسورد است و پسورد را نمایش نمیدهد هنگام وارد کردن<input type="range">کنترلی را برای وارد کردن شماره ای که مقدار دقیق آن مهم نیست (مانند کنترل کشویی) تعریف می کند. دامنه پیش فرض از 0 تا 100 است. با این وجود ، می توانید محدودیت هایی را در مورد پذیرش اعداد با ویژگی های min ، max و مرحله تعیین کنید کلیک<input type="reset">یک دکمه است که کل اطلاعاتی که وارد فرم کردیم پاک میکند<input type="search">از یک فیلد سرچ در فرم استفاده میکند برای سرچ کردن <input type="tel">این غیلد برای وارد کردن شماره تلفن در فرم از ان استفاده میشود کلیک<input type="time">یرای انتخاب زمان بدون منطقه زمانی است <input type="url">فیلدی است ادرس urlباید در ان وارد کنیم<input type="week">این فیلد برا یانتخاب هفته و سال استaction Attribute:در تگ فرم action تعریف میشود و زمانی از ان استفاده میکنیم که فرم به سرور ارسال میشود<form action="/action_page.php">method attribute:این صفت روش post یا get را که هنگام ارسال داده ها باید استفاده شود مشخص میکند وقتی از get استفاده میکنیم داده های ارسالی در ادرس مرورگر قابل مشاهده هستند <form action="/action_page.php" method="get">/action_page.php?firstname=Mickey&lastname=Mouseوقتی ازpost استفاده میکنیم که میخواهیم داده های داده های شخصی ارسال کند و پیش فرض formحالت post است و محدودیتی در ارسال مقادیر بزرگ داده ندارد <form action="/action_page.php" method="post">The name attribute:در عنصر formعر فیلد وروردی باید در name مقدارش ارسال شود وگرنه اطلاعات وارد شده از کاربر به سمت سرور ارسال نمیشود<form action="/action_page.php"> First name:<br> <input type="text" value="Mickey"><br>  Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"></form>Fieldset:برای اینکه عنصر های مرتبط درفرم یک گروه قرار دهیم<fieldset></fieldsrt>و عنصر <legend> برای نوشتن کپشن یا هد یا عنوان برای گروه که تعیین کردیم است<form action="/action_page.php"> <fieldset> <legend>Personal information:</legend>    First name:<br> <input type="text" name="firstname" value="Mickey"><br>    Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </fieldset> </form>و خروجی ان به این شکل است Target attribute:برای اینکه نتیجه را اراِیه بدیم در یک پنچره جدید از این دستور استفاده میکنیم blank_<form action="/action_page.php" target="_blank">Shmim AbbasiShmim AbbasiFri, 06 Dec 2019 03:30:35 +0330https://virgool.ir/@shmimab79/html-part1-c9dk9zkmya1sHTMLزبان برنامه نویسی نشانه گذاری استاندارد برای ساخت صفحات وب از ان استفاده میشود • First basic pages • <!DOCTYPE html><head> <title>Title</title></head><body></body></html>این دستورات کلی وپایه برای اچ است <!DOCTYPE html>این تگ برای این است که دستور ما در اچ5 نوشته شده است وبه این معنی است که دستورات را به ابجکت قابل تفسیر برای مرورگرها تبدیل میکند و همه فایل های اچ با این فایل تایپ شروع میشوند , <head>در این تگ معرفی وفایل اچ و اینکه با چه زبان و استاندارد هایی باشد نوشته میشود </head>به معنی پایان تگ است <body></body>در این تگ دستورات قابل رویت و نمایش نوشته میشود که در مرورگر میتوانیم تن هارا ببینیم </html>به معنی پایان فایل اچ است و کل دستورات و تگ های قبل از این نوشته میشود و برنامه در این قسمت قابل اجرا است • Doctype & Basic Layout• Setting Up Live Server• Meta Tags & Search Engines اچ معمولا تشکیل میشود از تگ شروع و تگ پایان با محتوایی که در بین این دو تگ است که توصیف میکند<meta charset =”UTF-8”> این تگ برای این استفاده میشود که کارکتر ها رو این استاندارد زبان های مختلفی را ساپورت میکند و با ربان هایی که درربان اچ ازان استفاده میکنیم میتواند در صفحه وب تفسیر کند<meta name =”description” Content =”free web tutorials”><meta name =”keywords”Content =”HTML,CSS,XML,JavaScrip><meta name = “author content =”John doe “><meta name =”viewport” content =”width=device -width,intial-scale=1.0”>• Headings, Paragraphs & Typography<h1><h6>مهمترین سرفصل و اخرین سرفصل در این تگ ها مینویسند<h1> heading 1</h1><h2> heading 2</h2>...<h6> heading 6</h6> جستجو مهندسی(کلماتی و کارکترهایی هستن که وب ان ها را بفهمد) استفاده میکند از سرفصل دستورات و محتوا برای ضفحه وب وارد میکند<p> </p>المانی است برای معنی کردن پاراگراف است و اگه بخواهیم پاراگرافی را در صفحه وب به نمایش دهیم از این <br>این تگ تگ پایان ندارد و برای معنی کردن و در ان در پارگراف اشاره گر به خط بعد انتقال میابد <em></em>این تگ کلمه ها رو به شکل خط ایتالیک تبدیل میکند<strong></strong>این تگ ها کلمه هارو در پارگراف پررنگ تر میکند• Links, Images & Attributesبا لینک که همان هایپرلینک است که بااستفاده از ان و کلیک روی ان میتوان به فایل دیگه رفت <a href =http://................./> click on it</a>این تگ برای ایجاد لینک در صفحه وب است لینک محلی: ادرس های محلی ادرس های هستند که بدون http…شروع میشوند Attributesویژگی هایی که یک تگ میتواند داشته باشد Imagesبرای اینکه تصویری در صفحه وب خودمون درج کنیم از <img src=”address image” alt=”some name(اگه مشکلی در اتصال اینترنت یا لود کردن عکس باشد به جای ان این کلمه چاپ میکند)>• Lists & TablesTableاین تگ که برای اینکه به حالت جدول در بیاوریم اطلاعاتی که نوشتیم و این تگ منسوخ شده و زیاد از ان استفاده نمیشود <table></table>و برای نمایش هر ردیف یک جدول از تگ <tr>و برای هر هدر جدول از تگ <th>و برای اطلاعات جدول از تگ <td>Lists: Unorder list در ان لیست ترتیب ایتم ها مهم نیست<ul><li>…..</li><li>…..</li><li>…..</li></ul>Order listکه در ان ترتیب ایتم ها مهم است و ان ها را بصورت شمارگذاری نمایش میدهیم <ol><li>…..</li><li>…..</li><li>…..</li></ol> <ul style="list-style-type:disc;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul> • Coffee• Tea• Milkبا کمک اتربیوت استایل میتوان شکل علامت گذاری ایتم ها راعوض کرد<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol> A.CoffeeB.TeaC.Milkبا کمک اتربیوت تایپ میتوان نوع شماره گذاری ایتم هارا عوض کرد Shmim AbbasiShmim AbbasiThu, 05 Dec 2019 23:12:02 +0330