Posts Tagged Basics

CSS–Advanced Topics

Alsalamo alekom .. we will continue what we started which is css reviews … so u have to check this links befour we start CSS Basics || and CSS Basics | Now we will talk about something advanced about CSS .. our topics will be

  • CSS – Cursor

  • CSS – Position

  • CSS – Layer

  • CSS – Display

CSS – Cursor

we will change cursor icon when we do action like “we are over text” we have many cursors like :

  • default – Display the normal mouse cursor

  • iconwait – The mouse icon to represent the computer “thinking”

  • crosshair – A cross hair reticletext – An “I” shaped icon that is displayed when selecting textpointer

  • A hand icon that you see when you hover over an
    HTML link-help

  • A question mark (usually)

Lets Try it now .. Just make Style tag and copy this :

 p { cursor: wait }
 h4 { cursor: help }
 h5 { cursor: crosshair }

and make your mouse over each one and see what happended 🙂 … and tell me

CSS Position

You will be able to manipulate the exact position of your HTML elements

Position Relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we can make it abit to right or to left , up , down or mix of them … i like “mix” remeber me “DevMix” 🙂 so the css code will be :

 

 h3 { 
 position: relative; 
 top: 15px;
 left: 150px;
 }
 p { 
 position: relative; 
 left: -10px;
 }

See this to understand more :

BeforeCSS    After Positioning

Position Absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the browser’s viewable area, so be sure you are measuring from that point.

CSS Code :

 h3 { 
 position: absolute; 
 top: 50px;
 left: 45px;
 }
 p{ 
 position: absolute; 
 top: 75px;
 left: 75px;
 }

CSS –  Layers

In CSS, each element is given a priority. HTML elements that appear later in the source code than others will have a higher priority by default. If there are two overlapping CSS positioned elements, the element with the higher priority will appear on top of the other. To manually define a priority, set the z-index value. The larger the value, the higher the priority the element will have.

CSS Code:

 h4{ 
 position: relative; 
 top: 30px;
 left: 50px;
 z-index: 2;
 background-color: #336699;
 }

 p { 
 position: relative; 
 z-index: 1; 
 background-color: #FFCCCC;
 }

CSS – Display

Display Block and Inline

are you bored from using <br/> tag ?? yes me too .. what will we so if we have ablock of links … wil we using <br/> tag alot and alot ?? no css will make it easy for you let’s have an example :

CSS Code:

 a { display: block; }
 p { display: inline; }

Display:

Developers Mix
Developers Mix

Developers Mix

Developers Mix

Developers Mix

    These Links     belong   to     DevMix blog

 

Display None (Hidden)

At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of JavaScript, you can create collapseable menus.This is a simple example of how to hide an element.

CSS Code:

p.show { display: block }
p.hide { display: none; }

HTML Code:

<p class="show">This paragraph is displayed correctly because 
it has a display value of "block".</p>

<p class="hide">This paragraph is hidden because 
it has a display value of "none". Why am I even
writing anything in here?</p>

Display:

This paragraph is displayed correctly because it has a
display value of “block”.

Finally

I hope add something new to ur knowleadge ,,, thanks for reading …
we wait your feedback ….. ohhh Dont Forget we will make articles
about CSS3 … Don’t Miss it 😀

By : Mohammed Gabrail

, , , , , ,

6 Comments

HTML5 — How came to be ?

HTML gone throughtoo manystepsto bein this form we will
talk about this as we can :
Must to know

In 1993, Dave Raggerr proposed HTML+ as an evolution of the HTML standard. the proposal was never implemented, and it was
superseded by HTML 2.0. HTML 2.0 was a“retro-spec
,” which means it formalized features already in common use. “this specification
brings together, clarifies, and formalizes
a set of features that roughly corresponds to the
capabilities of HTML in common use prior to June 1994.”
Dave later wrote HTML 3.0, based on his earlier HTML+ draft. Outside of the W3C’s ownreference implementation, Arena), HTML 3.0 was never implemented, and it was superseded by HTML 3.2, another “retro-spec”: “ HTML 3.2 adds widely deployed features such as tables, applets and text flow around images, while providing full backwards compatibility with the existing standard HTML 2.0.”
Dave later co-authored HTML 4.0, developed HTML Tidy , and went on to help with XHTML, XForms, MathML, and other modern W3C specifications. Let us imagine HTML not Changed from long time
they have its rules and all browser walk on there steps ,yes
lets say :

  • HTTP still exists. HTTP
  • successfully evolved from 0.9
    into 1.0 and later 1.1. And still it
    evolve
  • HTML still exists. that
    rudimentary data format — itdidn’t even support inline images!
    —successfully evolved into 2.0, 3.2, 4.0. HTML is an unbroken line
  • HTML has always been a conversation between browser
    makers, authors, standards wonks, and other
  • None of the browsers from 1993 still exist in any recognizable
    form. Netscape Navigatorwas abandoned in 1998 and rewritten from
    scratch to create the Mozilla Suite, which
    was then forked to create Firefox. Internet Explorer had its humble
    “beginnings” in “Microsoft Plus! for Windows 95,”
  • Some of the operating systems from 1993 still exist, but none of
    them are relevant to the modern web.
A TIMELINE OF HTML DEVELOPMENT FROM 1997 TO
2004

In December 1997, the World Wide Web Consortium (W3C) published HTML4.0 and promptly shut down the HTML Working Group

Less than two months later, a separate W3C Working Group published XML 1.0 theW3C re-chartered the HTML Working Group to create this “suite of XML tag-sets.” their first step,

in December 1998, was a draft of an interim specification that simply reformulated HTML in XML without adding any new elements or attributes their next target was web forms.
In August 1999, the same HTML Working Group published
a first draft of XHTML Extended Forms.

A few months later, “ XHTML Extended Forms” was renamed “XForms” and moved to its own Working Group. that group worked in parallel with the HTML Working Group and finally published the first edition of XForms 1.0 in October 2003

In May 2001, they published the first edition of XHTML 1.1, that added only a few minor features on top of XHTML 1.0, but also eliminated the “Appendix C” loophole. Starting with version 1.1, all XHTML documents were to be served with a MIME type of application/xhtml+xml

EVERYTHING YOU KNOW ABOUT XHTML IS WRONG



Are you think that your document written in XHTML??, I think you are wrong.Browsers have always been “forgiving” with HTML. If you create an HTML page but forget the </head> tag, browsers will display the page anyway.You are supposed to nest tags hierarchically — closing them in last-in-first-out order — but if you create markup like <b><i></b></i>, browsers will just deal with it (somehow) and move on without displaying an error message.

By some estimates, over 99% of HTML pages on the web today have at least one error in them. But because these errors don’t cause browsers to display visible error messages, nobody ever fixes them. so you use the synatx Not the rules of XML, and if we do 99% of the Web-pages all over the world will not work !!

WHAT WORKING GROUP?

simply it was unofficial group of developers that focus in web applications at the beginning W3C ignored them but ….. !!
by October 2006, it was clear that the WHAT Working Group had picked up serious momentum, while XHTML 2 was still languishing in draft form, unimplemented by any major browser. In October 2006, TimBerners- Lee, the founder of the W3C itself, announced that the W3C would work together with the WHAT Working Group to evolve

HTML5w3c

Finally

One of the first things the newly
re-chartered W3C HTML Working Group decided was to rename “Web
Applications 1.0” to “HTML5.” And here we are, diving into HTML5

And here we are 😀 … at all i
know that post not technical as u expect but you have to know these
information
thanks for your reading and wait us soon with new
posts …. so so
nice …bye
by : Mohammed Gabrail

, , , , , ,

1 Comment

Python-study group

بسم الله الرحمن الرحيم

اولا انا هعرف بنفسي انا الطالب محمد جبريل – ثالثه حاسبات المنصوره – بلبس نضاره …. وان شاء الله هكون معاكم مع اول استدي جروب للفريق في شهر رمضان المبارك وهتكون عن البايثون .. وان شاء الله هكون معاكم يوم بيوم ولحظه بلحظه في اي سؤال او اي استفسار .. لان هدفنا كفريق اننا ننشر علم صح وننقل معارف ونرسخ مبادئ تهم كل واحد فينا .. اتمني بجد ان ربنا يوفقنا ونقدر نفيدكم بجد ولو بمعلومه … بس ايد لوحدها لا تصفق كل انسان وله ما له وعليه ما عليه يعني لازم تجتهد علشان تلاقي نتيجه ترضيك .. بالتوفيق للجميع ان شاء الله تقدروا تتابعونا عن

طريق البلوج دا

or

pythonawy

or

DevMix Group

or

DevMix Official Page

ان شاء الله الاستدي جروب هتبتدي من بكره وطبعا الناس اللي حجزت لازم تبعت تأكيد علشان نعمل حسابنا معانا وكمان المواعيد هتتبعت للناس علي الميل ان شاء الله … ويارب نكون عند حسن ظن حضراتكم

, , , , , ,

1 Comment

Event #3 materials and discussion

السلام عليكم ورحمة الله وبركاته

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

FeedBack For Event #3 for DevMix Team

Day Materials

#1 – C# fundamentals PART II – by Maha Elbasuony

#2 – Intro to Win. App. – by Mahmoud Farouk

#3 – Intro To Data Base – by Noha Mostafa

TEDxtalks for DevMix

#4 – What’s new in HTML5 – by Ahmed Yousef

#5 – Intro to Algorithms – by Eman Elma’asaray

 

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

شكرا لحضوركم جميعا – فى امان الله

🙂 🙂 🙂

, ,

1 Comment

Event #2 Some Basics & TED test

اليوم ده كان يوم من الايام اللى بنثبت فيها اساسيات وللتقريب فى المستويات بين كل الاعضاء باننا بدأنا نراجع مع بعض على بعض الاساسيات والمفاهيم الاساسية عشان لما نبدأ فى مشروع نشتغل على طول ونحس بتحسن … المهم عشان ماطولش عليكم دى الماتيريالز اللى اشتغلنا فيها فى اليوم ده واتمنى نلاقى تقييم من القراء ويكون هناك نقد بناء لصاحب البريزينتاشن

#1 –> C# fundamentals PART I – by Maha elbasuony

TEDx talks:

طبعا عملنا فى اليوم ده اول مرحلة من مراحل التدريب على العرض وما نسميه

public speaking

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

#2 –> Intro to cloud computing – by amar ashour

the related video of Google chrome Cloud OS

#3 –>Intro to how to make a presentation – by M.Ebrahim

#4 –> intro to python – by M.gebreel

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

, ,

3 Comments