لديك سؤال عن html , css ؟

0x256 (OP)

Sr. Member

Offline

Activity: 338
Merit: 337

لديك سؤال عن html , css ؟

May 08, 2020, 10:28:07 PM

Merited by SyGambler (4), OmegaStarScream (2), hugeblack (1), Heroshema (1)

السلام عليكم اعضاء مجتمع بيتكوين توك و شهر مبارك عليكم

لدي تجربة لاباس بها بالتعامل مع لغه هيكلة مواقع الانترنت html , و لغة التنسيق css
بما انه لدى اغلبنا وقت فراغ هذه الايام فاذا رغب احدكم بالسؤال عن نقطه ما او خاصية معينة يمكننا التحدث عنه
او اذا كنت احد هواه تعديل شكل المنتدى Grin

(اصبح هواية لكثره التلاعب) فسيكون الامر رائع

Ulven

Legendary

Offline

Activity: 1610
Merit: 1131

Re: لديك سؤال عن html , css ؟

May 11, 2020, 05:29:04 AM

حميل أخي التجزئة لقد عدت باكراً، نظرا للقوانين التنظيمية هنا في منطقتنا أصبح الخضوع للحجر بالقوة و الحبس و الغرامات هل جميع الدول العربية تعاني من ذالك؟
لنعود إلى سياق الموضوع أعتقد لتوضيح الفكرة أكثر يمكننا الإعتماد في هذا الخيط على تقديم تعاريف لبعض الأكواد ليزداد الموضوع جمالية و مفيد في آن واحد.
إذن يمكنك الإدلال هنا على هذه الأكواد التالية

Code:

<header></header>
<link></link>
<body></body>

يمكنك ذكر بعض الخصائص لكل من الأدوات، و سأقوم بإضافة مقترحات لاحقا إذا كان هناك تفاعل بهذا الموضوع. و يمكنني إضافة بعض التمارين المنزلية لاحقا.

0x256 (OP)

Sr. Member

Offline

Activity: 338
Merit: 337

Re: لديك سؤال عن html , css ؟

May 11, 2020, 07:58:28 PM

Merited by Ulven (1)

اهلاً اخي @Ulven
هناك مشكلة بسيطة بالمنتدى تظهر الاكواد من اليمين لليسار (باقسام RTL كالقسم العربي) لحل هذه المشكلة لزاماً علينا اضافة عنصر الاكواد [ code ] و [ code/ ] بداخل اكواد [ ltr ] و [ ltr/ ] كالتالي:

Code:

[ ltr]
[ code]
//your code here
[ /code]
[ /ltr]

قمت باضافة فراغات بداية كل كود لتفادي الاختلاط مع الاكواد الفعلية قم بمسح الفراغات بداية كل كود او يمكننا التحدث عن الموضوع بشكل عام و نظري بدون استخدام اكواد

نعود لموضوعنا انت محق الموضوع يحتاج لمقدمه تشرح التقنية و كيف ظهرت html لغة هيكلة مواقع الانترنت و الانترنت عموماً الصفحة التي نتواصل حالياً من خلالها بالمنتدى احد نتائج النهضة التقنية..

تابعت اليوم مقطع من برنامج وثائقي عن نشأت الانترنت ولد الانترنت نتيجه الحاجة لاتصال مجموعة من الاجهزة فالبعض يقول لغرض عسكري و الآخر لغرض بحثي بين طلاب الجامعات لتبادل البحوث و العلوم بين الاجهزة حينها لم يكن هناك بروتوكول متبع بين مختلف الاجهزة المصنعه فكل جهاز يتختلف عن الاخر بطريقة تعاملة مع المعلومات و لم يكن يستخدم هذه الاجهزة الا التقنين

بعد ذلك طور مهندس حواسيب "Tim Berners-Lee" طريقة لتنظيم صفحات الانترنت و الوصول و التنقل اليها عن طريق الروابط و استمر بالفكرة حتى تطوير لغة "HTML"
فبدلاً من قراءة محتوى بنسق و حجم واحد و اكوام من النصوص اضافت هذه اللغة امكانية اظهار بعض النصوص كعنوان و البعض الآخر كقائمة و تنظيم الصفحات كروابط بينها البين عن طريق متصفح الانترنت حينها كانت نقله نوعية للانترنت و تبادل المعلومات

ما فهمناه من النص اعلاه عن لغة html عبارة عن هيكل صفحات الانترنت اليوم يقوم المتصفح بفهم تلك الاكواد ليقوم بعرضها بالشكل المناسب حسب اعدادات كل متصفح من هنا ظهرت مشكلة آخرى فكل متصفح يعرض التاقات tags بشكل مختلف حتى ان بعض المتصفحات عملت تاقات خاصة بها مما جعل الامر فوضوي نتيجه لهذه المشكلة اتفق التقنين على معاير و اصدارات يتم اتباعها حتى تظهر المواقع بنسق مشابهه و لتفادي دعم المتصفحات

اخ @Ulven التاق الاول الذي قمت بنشرة <header> هو من الاصدار الخامس من لغة html تقريباً و هو مخصص لتضمين عناصر راس الصفحات الحديثة كشريط التنقل او الشعار ... اظنك تقصد <head>

التاق الثاني <link> تقريباً يستخدم لربط و اضافة ملفات خارجية بالصفحة كملفات css , ايقونة المفضلة ...

التاق الاخير <body> محتوى الصفحة و هو ما يظهر بالمستعرض او المتصفح و يحتوي عناصر الصفحة من نصوص و صور و فيديو و غيره ..

commandera

Member

Offline

Activity: 243
Merit: 71

Re: لديك سؤال عن html , css ؟

May 19, 2020, 12:17:34 AM

موضوع ابحث عنه بشده

ابي اعرف اهم مصطحات
html

اذكر مره جربت وسويت
head وعارف بقية الخطوات
<h> الكتابه </h>

لكن لما كتبت بالعربي وارسله حق صديق لي

يقول الكلام مخبط احرف غير معروفه

هل هناك كود مخصص للغه العربيه ؟
اين اضعه

0x256 (OP)

Sr. Member

Offline

Activity: 338
Merit: 337

Re: لديك سؤال عن html , css ؟

May 19, 2020, 03:02:55 AM

Quote from: commandera on May 19, 2020, 12:17:34 AM

لكن لما كتبت بالعربي وارسله حق صديق لي

يقول الكلام مخبط احرف غير معروفه

هل هناك كود مخصص للغه العربيه ؟
اين اضعه

سؤالك جميل جعلنا اقوم بالبحث اكثر سبب هذه المشكلة "ترميز المحارف" بالملف ليس الصحيح للغة العربية(خصوصاً عند استخدامك محرر بسيط كالمفكرة notepad)
تأكد عند حفظ الملف من اختيار utf-8 (ترميز عالمي يحتوي على اغلب اللغات العالمية من بينها اللغة العربية) بدل ترميز ANSI الذي لا يحتوي على حروف عربية و لا يدعمها
تحتاج ايضاً اضافة تاق </ meta charset="utf-8> بداخل تاق <head></head> لضبط ترميز محارف المستند لترميز يدعم اللغة العربية

مرجع مفيد: https://wiki.hsoub.com/HTML/meta

commandera

Member

Offline

Activity: 243
Merit: 71

Re: لديك سؤال عن html , css ؟

May 19, 2020, 03:29:36 AM

Quote from: 0x256 on May 19, 2020, 03:02:55 AM

Quote from: commandera on May 19, 2020, 12:17:34 AM

توقعت انه في شي مخصص للغه

سلمت يمناك ما قصرت

Ya3rob

Hero Member

Offline

Activity: 500
Merit: 500

Re: لديك سؤال عن html , css ؟

May 19, 2020, 01:14:06 PM

وعليكم من السلام ورحمة الله وبركاته
ليس لدي خبرة بلغات المواقع على الانترنت
ولكن من الجيد ان نرى بعض الخبرات هنا لتثقيف انفسنا احيانا ولو بمعلومات عامة ومختصرة

0x256 (OP)

Sr. Member

Offline

Activity: 338
Merit: 337

Re: لديك سؤال عن html , css ؟

June 20, 2020, 08:21:54 PM
Last edit: June 20, 2020, 08:49:42 PM by 0x256

لهواة تصميم المواقع عندكم موقع bitcointalk للتعلم عليه و تعديل الاستايل فرصه للتعلم و استكشاف بعض الحيل الجديدة احد هذه الحيل تعرفت عليها من الممارسة بتعديل المنتدى :]

الميزة هنا ليس كود جامد و يتطلب منك الكثير من التغيرات لتعديل لون خلفية مثلاً بل تستطيع تخصيص الشكل و الالوان حسب ذوقك عن طريق تغير قيمة اللون لمرة واحدة و يطبق على جميع العناصر المستخدم لذلك الخاصية المخصصة بما يشبه للمتغير اسم الميزة css custom properties ابحث عنها للتعرف اكثر استخدمت الميزة بالكود التالي مع العلم قمت بنشرة سابقاً بالاقسام الانجليزية لكن اظن لم اوصل الفكرة جيداً لذلك حذفت الكود حتى التأكد من خلوة من بعض الاخطاء ان كان هناك مهتمين هذا الكود ما لم لا مشكلة اعتبروة لرفع للموضوع و اعطى الاذن لمن يريد نشر الكود باللغة الانجليزية لعدم اتقاني لها

و كنت اتمنى وجود موضوع موحد عن هواة التعديل userstyle حتى يتشارك المجتمع هناك بموضوع واحد بدل نشر موضوع كل مرة بقسم meta حتى لا يكون الامر مزعج للاعضاء

الموضوع ليست بتلك الصعوية ان فهمت المبدء الاساسي فكل ما تحتاجة تحديد العنصر المطلوب و اضافة الخاصيات اللازمة

Code:

/* ----------------------------------------------------
    custom bitcointalk header 
    author: 0x256 ¯\_(ツ)_/¯
    author url: https://bitcointalk.org/index.php?action=profile;u=2680306
------------------------------------------------------*/

#smfheader, body > div.tborder+table, .tborder table#smfheader+table, table#upshrinkHeader2 {
    
/*---------------------------------------------------
custom your style by changing these values below 
---------------------------------------------------*/
    
/* header position: fixed or absolute */
    --header_position: fixed;

/* main colors */
    
    /*basic options*/
    --h_bgColor: #fff;
    --h_fColor: #000;
    --h_act_color: #3d7eba;
    
    
    /*additional options*/
    --logo_color: var(--h_fColor);
    
    --h_act_bgColor: var(--h_bgColor);
    
        /*header links on mouse hover */
    --h_bgColor_hover: var(--h_bgColor);
    --h_fColor_hover: var(--h_fColor);
    
    
    
    /* search input and button */
    --btn_bgColor: var(--h_act_color);
    --btn_fColor: var(--h_bgColor);
    
    --input_bgColor: var(--h_bgColor);
    --input_fColor: var(--h_fColor);
    --input_bColor: #ccc;
    
    /* end custom  */
    
    
}

/*overflow html page!*/
html {
/*     overflow-x: hidden; */
}

/* navbar */
body > div.tborder+table {
    position: var(--header_position);
    top: 10px;
    left: 160px;
}

/*change Bitcoin_Forum_color */
    table#smfheader td.catbg >span {
    color: var(--logo_color);
    
    
} /* separator between Bitcoin Forum and navbar */
table#smfheader td.catbg >span:after {
    content: "";
    border-right: 1px solid var(--h_fColor);
    padding-right: 8px;
    opacity: 0.15;
}


/*---------------------------------------------
    navbar
---------------------------------------------*/
/* remove navbar background */
.maintab_back, .maintab_active_back {
    background-image: none !important;
    padding: 0;
}
.maintab_first,
.maintab_last,
.maintab_active_first,
.maintab_active_last {
    display: none;
}

.maintab_active_back > a {
    color: var(--h_act_color) !important;
    background-color: var(--h_act_bgColor);
}

.maintab_back a:link, .maintab_back a:visited, .maintab_active_back a:link, .maintab_active_back a:visited {
    padding: 10px 6px !important;
    color: var(--h_fColor);
}
.maintab_back a:hover,
.maintab_active_back a:hover {
    opacity: 0.85;
    background-color: var(--h_bgColor_hover);
    color: var(--h_fColor_hover);
}
.maintab_back a:hover strong {
    border-color: var(--h_bgColor_hover);
}
/*---------------- end navbar --------------------*/

/* remove simple machines logo (smflogo) from header */
table#smfheader tr:first-child > td+td.catbg img {
    display: none;
}

/*  top bar */
table#smfheader {
    position: var(--header_position);
    top: 0; left: 0; right: 0;
    box-shadow: 0 0 5px 0 #aaa;
}

/*element up to header*/
body > div.tborder+table,
table#smfheader,
.tborder table#smfheader+table+table tr > td+td > form,
.tborder table#smfheader+table {
    z-index: 4;
}

table#smfheader tr > td.catbg {
    border: none;
    background-image: none;
    background-color: var(--h_bgColor);
}

table#smfheader tr > td.catbg:first-child {
    color: var(--h_fColor);
}

/*Messages notification*/
body > div.tborder+table tr > td > a > strong {
    background: #f22;
    padding: 0 4px;
    position: absolute;
    top: -2px;
    margin-left: -6px;
    color: #fff;
    border-color: var(--h_bgColor);
    border-style: solid;
    border-right: 3px;
    border-top: 3px;
    z-index: 1;
}


/* News bar */
body>.tborder {
    border: none;
    background-color: transparent;
    padding: 0;
}

body>.tborder table#smfheader+table,
body>.tborder table#smfheader+table+table {
    border-top: none !important;
    display: inline-table !important;
}
/*-----------------*/

/*remove background behind hello username ..*/
body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child,
body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child+td {
    background: none; border: none;
    background-color: var(--h_bgColor);
    padding: 0;
}


#upshrinkHeader td#variousheadlinks {
    background-color: #fff !important;
}

/*put search input on top header*/
.tborder table#smfheader+table+table tr > td+td > form {
    display: inline-block !important;
    position: var(--header_position);
    background: none; border: none;
    top: 4px;
    right: 21%;
    z-index: 4;
}

/* hide the extra search icon */
.tborder table#smfheader+table+table tr > td+td > form > a > img {
    display: none;
}
.tborder table#smfheader+table+table tr > td+td {
        padding: none;
}

/*after header*/
.tborder table#smfheader+table {
    border-bottom: none !important;
    position: var(--header_position);
    top: 0; right: 20px;
    width: auto;
    z-index: 4;
}

#upshrinkHeader2 {
    margin-top: 30px;
}

/* remove date and time from top bar */
table#smfheader + table > tbody > tr:first-child > td:last-child span {
    display: none;
}
/*-----------------------*/



/* search input and button
------------------------------------*/
#upshrinkHeader2 input[type="text"],
#upshrinkHeader2 input[type="submit"] {
    outline: none;
    border: none;
    padding: 4px 8px;
}

/* input */
#upshrinkHeader2 input[type="text"] {
    border: 1px solid var(--input_bColor);
    background-color: var(--input_bgColor);
    color: var(--input_fColor);
}
#upshrinkHeader2 input:focus {
    border-color: var(--btn_bgColor);
}

/* button */
#upshrinkHeader2 input[type="submit"] {
    cursor: pointer;
    background-color: var(--btn_bgColor);
    color: var(--btn_fColor);
}
#upshrinkHeader2 input[type="submit"]:hover {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) var(--btn_bgColor);
}
/*----------------------------------*/

/*remove search Form from top bar on screens less than 1000px (small screen) */
@media (max-width: 1000px) {
    .tborder table#smfheader+table+table tr > td+td > form {
        position: relative;
        top: 0;
        right: 0;
        z-index: 0;
    }
}

/*min  width #variousheadlinks*/
tr#upshrinkHeader td#variousheadlinks {
    min-width: 222px !important;
    max-width: 222px !important;
}

/*space before hellouser for avatar*/
table#smfheader+table tr > td.titlebg2:last-child {
    width: 62px;
}

/*first click: show user box mandatory*/
tr#upshrinkHeader[style="display: none;"] {
    display: block !important;
    right:0;
}

/*second click and startup: hide user box off the page*/
tr#upshrinkHeader {
    position: absolute;
    right: -400px;
}

/*when box hide show avatar in header */
tr#upshrinkHeader tr > td.windowbg > img,
tr#upshrinkHeader[style=""] tr > td.windowbg > img {
    width: 32px !important;    height: 28px !important;
    position: absolute !important;
    top: -30px;
    left: -200px;
}
/*eles back avatar in normal place*/
tr#upshrinkHeader[style="display: none;"] tr > td.windowbg > img {
    width: auto !important; height: auto !important;
    position: inherit !important;
}

لمن قام بالتجربة ارسل لنا تخصيصك Cheesy

فلربما تظهر بالوان فريدة كل ما عليك تغير قيم المتغيرات بالاعلى للقيم المطلوبة كمثال --h_bgColor يشير للون خلفية القائمة العلوية

احد مشاكل الكود اعلاه مثلاً هذا الجزء

Code:

html {
/*     overflow-x: hidden; */
}

عمل هذا الكود اخفاء العناصر الخارجة عن حدود الصفحة فاذا كان مثلا توجد عناصر اكبر من حجم الصفحة و تطلب تمرير شريط التمرير لن تكون مرئية لذلك قمت بتعطيلة حتى التأكد منه
كل هذا بسبب قائمة المستخدم لانها مبدئياً ظاهرة فلا حل بهذه الحالة عند استخدام css فقط الا عكس العملية اخفاء القائمة افتراضياً و اظهارها عند النقر على زر طوي القائمة لهذا السبب الايقونة معكوسة Grin

Pages: [1]

Bitcoin Forum > Local > العربية (Arabic) > النقاشات الأخرى > لديك سؤال عن html , css ؟

« previous topic next topic »