Computeronic|کامپیوترونیک
🔴آموزش HTML قسمت سوم: دوستان برای این که ما بتونیم سایتی رو بسازیم، نیاز به ادیتور داری چندین ادیتور داریم، از جمله : 🔻 1. نوت پد خود سیستم 🔻 2. Notepad++ 🔻 3. Vs Code 🔻 4. Dream Weaver 🔻 5. Atom 🔻 6. Sublime Text 🔻 7. .... ◽️در تمام ادیتورهایی که نام برده…
🔶آموزش HTML قسمت چهارم:
برچسب های HTML
همانطور که قبلا گفته شد HTMLیک زبان نشانه گذاری است و برای طراحی محتوا از برچسب های مختلفی
استفاده می کند. این برچسب ها در داخل علامت <> قرار گرفته اند،
به جز تعداد کمی از برچسب ها، بسیاری از آنها برچسب متناظر بستن را نیز دارند. به عنوان مثال<html>
دارای برچسب بستن </html>و <body>دارای برچسب بستن
</body>
می باشند.
مثال قبلی از داکیومنت HTMLاز برچسب های زیر استفاده می کنند👇👇👇👇
<!DOCTYPE>
🔴این برچسب نوع داکیومنت و ورژن HTMLرا تعریف می کند.
<html>
🟡این برچسب داکیومنت کامل HTMLرا احاطه می کند و اساسا شامل تیتر داکیومنت می شود که توسط
<head>
...
</head>
نمایش داده می شود و
بدنه ی داکیومنت نیز به وسیله ی برچسب های
<body>
...
<body>
نمایش
داده می شوند.
<head>
🟢این برچسب تیتر داکیومنتی را نشان می دهد که می تواند دیگر برچسب هایHTML،
مانند <title>،<link>
را در خود نگه دارد.
<title>
برچسب <title>
در داخل برچسب <head>استفاده می شود تا تیتر داکیومنت <title>
را ذکر کند.
<body>
🟠این برچسب بدنه ی داکیومنتی را نشان می دهد که دیگر برچسب های body> HTML> مانند <h1>, <div>, <p>را در خود دارد'
<h1>
این برچسب تیتر را نمایش می دهد.
#وب
#html
➖➖➖➖➖➖
🆔@Computeronic
برچسب های HTML
همانطور که قبلا گفته شد HTMLیک زبان نشانه گذاری است و برای طراحی محتوا از برچسب های مختلفی
استفاده می کند. این برچسب ها در داخل علامت <> قرار گرفته اند،
به جز تعداد کمی از برچسب ها، بسیاری از آنها برچسب متناظر بستن را نیز دارند. به عنوان مثال<html>
دارای برچسب بستن </html>و <body>دارای برچسب بستن
</body>
می باشند.
مثال قبلی از داکیومنت HTMLاز برچسب های زیر استفاده می کنند👇👇👇👇
<!DOCTYPE>
🔴این برچسب نوع داکیومنت و ورژن HTMLرا تعریف می کند.
<html>
🟡این برچسب داکیومنت کامل HTMLرا احاطه می کند و اساسا شامل تیتر داکیومنت می شود که توسط
<head>
...
</head>
نمایش داده می شود و
بدنه ی داکیومنت نیز به وسیله ی برچسب های
<body>
...
<body>
نمایش
داده می شوند.
<head>
🟢این برچسب تیتر داکیومنتی را نشان می دهد که می تواند دیگر برچسب هایHTML،
مانند <title>،<link>
را در خود نگه دارد.
<title>
برچسب <title>
در داخل برچسب <head>استفاده می شود تا تیتر داکیومنت <title>
را ذکر کند.
<body>
🟠این برچسب بدنه ی داکیومنتی را نشان می دهد که دیگر برچسب های body> HTML> مانند <h1>, <div>, <p>را در خود دارد'
<h1>
این برچسب تیتر را نمایش می دهد.
#وب
#html
➖➖➖➖➖➖
🆔@Computeronic
Computeronic|کامپیوترونیک
🔶آموزش HTML قسمت چهارم: برچسب های HTML همانطور که قبلا گفته شد HTMLیک زبان نشانه گذاری است و برای طراحی محتوا از برچسب های مختلفی استفاده می کند. این برچسب ها در داخل علامت <> قرار گرفته اند، به جز تعداد کمی از برچسب ها، بسیاری از آنها برچسب متناظر بستن را…
💛آموزش HTML قسمت پنجم:
برچسب های تیتر
هر داکیومنت با یک تیتر آغاز می شود. شما می توانید از اندازه های مختلف برای تیترهای خود استفاده کنید.
HTML
دارای شش سطح می باشد که از
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>
عناصر استفاده می کند.
در هنگام نمایش هر تیتر مرور گر یک خط قبل و یک خط بعد از تیتر اضافه می کند.
مثال
#وب
#html
➖➖➖➖➖
🆔@Computeronic
برچسب های تیتر
هر داکیومنت با یک تیتر آغاز می شود. شما می توانید از اندازه های مختلف برای تیترهای خود استفاده کنید.
HTML
دارای شش سطح می باشد که از
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>
عناصر استفاده می کند.
در هنگام نمایش هر تیتر مرور گر یک خط قبل و یک خط بعد از تیتر اضافه می کند.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Computeronic</h1>
<h2>Computeronic</h2>
<h3>Computeronic</h3>
<h4>Computeronic</h4>
<h5>Computeronic</h5>
<h6>Computeronic</h6>
</body>
</html>
این مثال نتیجه ای مثل عكس زیر را به دنبال دارد👇👇👇👇#وب
#html
➖➖➖➖➖
🆔@Computeronic
Computeronic|کامپیوترونیک
💛آموزش HTML قسمت پنجم: برچسب های تیتر هر داکیومنت با یک تیتر آغاز می شود. شما می توانید از اندازه های مختلف برای تیترهای خود استفاده کنید. HTML دارای شش سطح می باشد که از <h1>, <h2>, <h3>, <h4>, <h5>, <h6> عناصر استفاده می کند. در هنگام نمایش هر تیتر…
🟢آموزش HTML قسمت ششم:
برچسب پاراگراف
برچسبp به روش طراحی متن شما در پاراگراف های مختلف اشاره دارد. هر پاراگراف متن باید بین
برچسب بازکننده ی <p>وبستن
</p>
قرار بگیرد، همانطور که در مثال زیر مشاهده می کنید
<!DOCTYPE html
<html>
<head>
<title>Paragraph Example <title/>
</head>
<body>
<p>paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
</body>
</html>
برچسب شکست لینک
هرزمان که شما از عنصر </br> استفاده کنید، هر چیزی که آن را دنبال می کند از خط بعد شروع خواهد شد.
این برچسب نمونه ای از یک عنصر emptyمی باشد، زمانی که لازم نیست برچسبی را باز کنید یا ببندید چرا که
چیزی برای رفتن بین آنها وجود ندارد.
در بچسب </br>یک فضای خالی بین کاراکترهای brو اسلش جلوی آن وجود دارد. اگر شما این فضا را حذف
کنید، مرورگرهای قدیمی تر در اجرای خط شکست مشکل خواهند داشت، در حالیکه اگر اسلش را حذف کنید
برچسب </br>باقیمانده در HTMLمعتبر نمی باشد.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example < /title>
</head>
<body>
<p>
salam <br />
chetorin<br />
khoobim <br />
ok
</p>
</body>
</html>
#وب
#html
🆔@Computeronic
مثال بالا نتیجه ی زیر را تولید خواهد کرد
👇👇👇👇👇
برچسب پاراگراف
برچسبp به روش طراحی متن شما در پاراگراف های مختلف اشاره دارد. هر پاراگراف متن باید بین
برچسب بازکننده ی <p>وبستن
</p>
قرار بگیرد، همانطور که در مثال زیر مشاهده می کنید
<!DOCTYPE html
<html>
<head>
<title>Paragraph Example <title/>
</head>
<body>
<p>paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
</body>
</html>
برچسب شکست لینک
هرزمان که شما از عنصر </br> استفاده کنید، هر چیزی که آن را دنبال می کند از خط بعد شروع خواهد شد.
این برچسب نمونه ای از یک عنصر emptyمی باشد، زمانی که لازم نیست برچسبی را باز کنید یا ببندید چرا که
چیزی برای رفتن بین آنها وجود ندارد.
در بچسب </br>یک فضای خالی بین کاراکترهای brو اسلش جلوی آن وجود دارد. اگر شما این فضا را حذف
کنید، مرورگرهای قدیمی تر در اجرای خط شکست مشکل خواهند داشت، در حالیکه اگر اسلش را حذف کنید
برچسب </br>باقیمانده در HTMLمعتبر نمی باشد.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example < /title>
</head>
<body>
<p>
salam <br />
chetorin<br />
khoobim <br />
ok
</p>
</body>
</html>
#وب
#html
🆔@Computeronic
مثال بالا نتیجه ی زیر را تولید خواهد کرد
👇👇👇👇👇
Computeronic|کامپیوترونیک
🟢آموزش HTML قسمت ششم: برچسب پاراگراف برچسبp به روش طراحی متن شما در پاراگراف های مختلف اشاره دارد. هر پاراگراف متن باید بین برچسب بازکننده ی <p>وبستن </p> قرار بگیرد، همانطور که در مثال زیر مشاهده می کنید <!DOCTYPE html <html> <head> <title>Paragraph Example…
🛑آموزش HTML قسمت هفتم:
خطوط افقی
خطوط افقی برای بخش های شکست بصری یک داکیومنت استفاده می شوند. برچسب <hr>خطی از موقعیت
کنونی داکیومنت به حاشیه ی سمت راست ایجاد کرده و خط را طبق آن می شکند.
به عنوان مثال ممکن است تمایل داشته باشید بین دو پاراگراف خطی قرار دهید، همانطور که در مثال زیر ارائه
شده است
مثال
#html
➖➖➖➖➖➖➖
🆔@Computeronic
خطوط افقی
خطوط افقی برای بخش های شکست بصری یک داکیومنت استفاده می شوند. برچسب <hr>خطی از موقعیت
کنونی داکیومنت به حاشیه ی سمت راست ایجاد کرده و خط را طبق آن می شکند.
به عنوان مثال ممکن است تمایل داشته باشید بین دو پاراگراف خطی قرار دهید، همانطور که در مثال زیر ارائه
شده است
مثال
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line </title>
</head>
<body>
<p>computeronic</p>
<hr>
<p>computeronic</p>
</body>
</html>
نتيجه اين كد همانند تصوير زير است👇👇👇#html
➖➖➖➖➖➖➖
🆔@Computeronic
تجربيات يك برنامه نويس-آشنايي با زبانهاي برنامه نويسي و كاربردها
قسمت اول:HTML,CSS
🔶HTML:
يك زبان نشانه گذاريست و زبان برنامه نويسي محسوب نميشه.
در طراحی سایت به عنوان بدنه اصلی شناخته میشه و مثل اسکلت ساختمان می مونه و صرفا یه بدنه ای رو تشکیل میده بدون دیزاین.هدف HTML تعيين قالب، عناوين، پاراگراف‌ها و... مي باشد
🔷CSS:
در طراحی سایت کار دیزاین دهی و زیبا سازی سایت را به عهده داره و مثل رنگ و در و ... توی ساختمان می مونه و برای همچین کار هایی به کار میره. CSS مخفف Cascading Style Sheets مي باشد. اين زبان بِه نوعي رنگ متن، سبك ظاهر و اثربخشي سايت را كنترل مي كند. در اكثر مواقع از اين زبان بِه همراه يك زبان نشانه گذاري مثل HTML يا XHTML استفاده مي كنند.
با CSS مي توان تعيين كرد كه رنگ نوشته ها و فونت ها چطوري باشه، سايز ميان پاراگراف‌ها و جداول چطوري باشه و .........
👈مشاهده قسمت دوم
نويسنده : AliCode
⚠️مطالب مرتبط:
آشنايي با فرانت اند
مفهوم انتزاعي CSS و HTML
#برنامه‌نویسی
#وب
#html
#css
#AliCode
➖➖➖➖➖➖➖
🆔@Computeronic
قسمت اول:HTML,CSS
🔶HTML:
يك زبان نشانه گذاريست و زبان برنامه نويسي محسوب نميشه.
در طراحی سایت به عنوان بدنه اصلی شناخته میشه و مثل اسکلت ساختمان می مونه و صرفا یه بدنه ای رو تشکیل میده بدون دیزاین.هدف HTML تعيين قالب، عناوين، پاراگراف‌ها و... مي باشد
🔷CSS:
در طراحی سایت کار دیزاین دهی و زیبا سازی سایت را به عهده داره و مثل رنگ و در و ... توی ساختمان می مونه و برای همچین کار هایی به کار میره. CSS مخفف Cascading Style Sheets مي باشد. اين زبان بِه نوعي رنگ متن، سبك ظاهر و اثربخشي سايت را كنترل مي كند. در اكثر مواقع از اين زبان بِه همراه يك زبان نشانه گذاري مثل HTML يا XHTML استفاده مي كنند.
با CSS مي توان تعيين كرد كه رنگ نوشته ها و فونت ها چطوري باشه، سايز ميان پاراگراف‌ها و جداول چطوري باشه و .........
👈مشاهده قسمت دوم
نويسنده : AliCode
⚠️مطالب مرتبط:
آشنايي با فرانت اند
مفهوم انتزاعي CSS و HTML
#برنامه‌نویسی
#وب
#html
#css
#AliCode
➖➖➖➖➖➖➖
🆔@Computeronic
Media is too big
VIEW IN TELEGRAM
🌐آموزش مقدماتی HTML
(کاملا رایگان)
قسمت اول : ساختار کلی و طریقه نوشتن و ایجاد سند html
مشاهده ویدیو :
https://www.youtube.com/watch?v=uxkQ11FffGY&list=PLmyyM_MXTl_MYWF460lTE9SW7me1CC9Gt&index=1
👩🏻🏫مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
(کاملا رایگان)
قسمت اول : ساختار کلی و طریقه نوشتن و ایجاد سند html
مشاهده ویدیو :
https://www.youtube.com/watch?v=uxkQ11FffGY&list=PLmyyM_MXTl_MYWF460lTE9SW7me1CC9Gt&index=1
👩🏻🏫مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
Media is too big
VIEW IN TELEGRAM
آموزش مقدماتی HTML
(کاملا رایگان)
قسمت دوم : آشنایی با تگ ها قسمت اول
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
(کاملا رایگان)
قسمت دوم : آشنایی با تگ ها قسمت اول
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
Media is too big
VIEW IN TELEGRAM
آموزش مقدماتی HTML
(کاملا رایگان)
قسمت سوم : با آشنایی با تگ ها قسمت دوم
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
(کاملا رایگان)
قسمت سوم : با آشنایی با تگ ها قسمت دوم
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
Media is too big
VIEW IN TELEGRAM
آموزش مقدماتی HTML
(کاملا رایگان)
قسمت چهارم: آشنایی با تگ ها قسمت سوم
مشاهده ویدیو :
https://youtu.be/fHGVAhJoIDo
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
(کاملا رایگان)
قسمت چهارم: آشنایی با تگ ها قسمت سوم
مشاهده ویدیو :
https://youtu.be/fHGVAhJoIDo
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
Media is too big
VIEW IN TELEGRAM
آموزش مقدماتی HTML
(کاملا رایگان)
قسمت پنجم: آشنایی با layout کلی سایت
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
(کاملا رایگان)
قسمت پنجم: آشنایی با layout کلی سایت
مدرس : سرکار خانم بهبودی
#html
➖➖➖➖➖➖➖
🆔@computeronic
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
@Computeronic_Calculator_JS.jpg
339.4 KB
پروژه ماشین حساب با html,css,javascript
👨💻👩💻
پروژه ماشین حساب یکی از پروژه های جذاب و در عین حال ساده برای کسانی است که به تازگی به سمت برنامه نویسی وب روی آوردند و میخوان رزومشون رو تکمیل کنن!
حتما این پروژه رو داخل رزومتون داشته باشید😉
برای نمایش و قالب بندی دکمه ها و اعداد از html و به منظور خوشگل کردنشون از css استفاده شده.
برای اینکه دکمه ها قادر به انجام عملیات باشن هم از javascript استفاده کردیم.
تابع اصلی که ازش استفاده شده، تابع ()eval هست که کدهای JS رو حل میکنه و تابع ()display اعداد رو روی نمایشگر ماشین حساب نشون میده!
#وب #فرانت #html
#JavaScript #CSS
#برنامه‌نویسی
➖➖➖➖➖➖➖➖➖
🆔@Computeronic
🌐 Computeronic.ir
👨💻👩💻
پروژه ماشین حساب یکی از پروژه های جذاب و در عین حال ساده برای کسانی است که به تازگی به سمت برنامه نویسی وب روی آوردند و میخوان رزومشون رو تکمیل کنن!
حتما این پروژه رو داخل رزومتون داشته باشید😉
برای نمایش و قالب بندی دکمه ها و اعداد از html و به منظور خوشگل کردنشون از css استفاده شده.
برای اینکه دکمه ها قادر به انجام عملیات باشن هم از javascript استفاده کردیم.
تابع اصلی که ازش استفاده شده، تابع ()eval هست که کدهای JS رو حل میکنه و تابع ()display اعداد رو روی نمایشگر ماشین حساب نشون میده!
#وب #فرانت #html
#JavaScript #CSS
#برنامه‌نویسی
➖➖➖➖➖➖➖➖➖
🆔@Computeronic
🌐 Computeronic.ir
آموزش مقدماتی HTML
(کاملا رایگان)
قسمت بیست و یکم : آشنايي با تگ svg
👉 https://computeronic.ir/?p=301
مدرس : بهبودی
#html
#وب
➖➖➖➖➖➖➖
🆔@computeronic
🌐 computeronic.ir
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
(کاملا رایگان)
قسمت بیست و یکم : آشنايي با تگ svg
👉 https://computeronic.ir/?p=301
مدرس : بهبودی
#html
#وب
➖➖➖➖➖➖➖
🆔@computeronic
🌐 computeronic.ir
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
آموزش مقدماتی HTML
(کاملا رایگان)(قسمت پایانی)
قسمت بیست و دوم (پایانی) : سخنان پایانی و معرفی مسیر فرانت اند
👉 https://computeronic.ir/?p=301
مدرس : بهبودی
#html
#وب
➖➖➖➖➖➖➖
🆔@computeronic
🌐 computeronic.ir
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
(کاملا رایگان)(قسمت پایانی)
قسمت بیست و دوم (پایانی) : سخنان پایانی و معرفی مسیر فرانت اند
👉 https://computeronic.ir/?p=301
مدرس : بهبودی
#html
#وب
➖➖➖➖➖➖➖
🆔@computeronic
🌐 computeronic.ir
کامپیوترونیک مرجع آموزش های حرفه ای و فارسی
♨️ نحوه ساخت جعبه input suggestion در html
اگر هنوز html که اسکلت وبسایت هست رو یاد نگرفتی، پس بزن رو لینک و رایگان شروع کن!!
#وب #html
#برنامه‌نویسی
➖➖➖➖➖➖➖
🆔@Computeronic
🌐 Computeronic.ir
اگر هنوز html که اسکلت وبسایت هست رو یاد نگرفتی، پس بزن رو لینک و رایگان شروع کن!!
#وب #html
#برنامه‌نویسی
➖➖➖➖➖➖➖
🆔@Computeronic
🌐 Computeronic.ir
🍩 دونات فرانت اند!
فرانت اند،اون چیزیه که کاربر در سایت ما به اون نگاه میکنه و بهش دسترسی داره ساده تر بخواییم تعریف کنیم میشه همون طراحی و قالب سایت که کاربر در سایت می بینه!
مهارت هایی که باید در این زمینه بدانید مثل یک دونات شده که در اسلاید دوم قابل مشاهده است.
🔺 زبان‌های برنامه نویسی اصلی (HTML، CSS، JavaScript و TypeScript)
🔺اطلاعات کلی در مورد وب، امنیت وب و Policy های آن
🔺فریم‌ورک‌هایی که با آنها کار می‌کنیم ( Angular، React و Svelte, ..... )
🔺دانش UI/UX و Accessibility
🔺ابزارهایی که با آنها کار می‌کنیم (Git، ESLint، Webpack
و...)
يادگيري مهارت هاي فرانت ميتونه مثل خوردن يك دونات، شيرين و دلچسب باشه!😋🍩
تجربیات خودتون رو در زمینه ی فرانت اند در کامنت بنویسید!😃
میتونید پست کامل این مقاله رو تو صفحه اینستاگراممون ببینید😉
👈نمایش مقاله
#فرانت_اند #برنامه_نویس #برنامه_نویسی #کدنویسی #طراحی_وب #توسعه_دهنده #دولوپر
#programming #web #web_design #website #css #html
➖➖➖➖➖➖➖
🆔@Computeronic
🌐 Computeronic.ir
فرانت اند،اون چیزیه که کاربر در سایت ما به اون نگاه میکنه و بهش دسترسی داره ساده تر بخواییم تعریف کنیم میشه همون طراحی و قالب سایت که کاربر در سایت می بینه!
مهارت هایی که باید در این زمینه بدانید مثل یک دونات شده که در اسلاید دوم قابل مشاهده است.
🔺 زبان‌های برنامه نویسی اصلی (HTML، CSS، JavaScript و TypeScript)
🔺اطلاعات کلی در مورد وب، امنیت وب و Policy های آن
🔺فریم‌ورک‌هایی که با آنها کار می‌کنیم ( Angular، React و Svelte, ..... )
🔺دانش UI/UX و Accessibility
🔺ابزارهایی که با آنها کار می‌کنیم (Git، ESLint، Webpack
و...)
يادگيري مهارت هاي فرانت ميتونه مثل خوردن يك دونات، شيرين و دلچسب باشه!😋🍩
تجربیات خودتون رو در زمینه ی فرانت اند در کامنت بنویسید!😃
میتونید پست کامل این مقاله رو تو صفحه اینستاگراممون ببینید😉
👈نمایش مقاله
#فرانت_اند #برنامه_نویس #برنامه_نویسی #کدنویسی #طراحی_وب #توسعه_دهنده #دولوپر
#programming #web #web_design #website #css #html
➖➖➖➖➖➖➖
🆔@Computeronic
🌐 Computeronic.ir
👍4👎2❤1🔥1