Whitespace Udacity English Arabic

WhitespaceYouTube↗ IA↗(long shot)
Education 47.8K views 26 likes 4 dislikes 23 Feb 2015

Udacity 651K subscribers United States YouTube↗

Click to Play Video

Let's talk about whitespace for a moment. So, you may have

لنتحدث عن المساحة البيضاء للحظة. بالتالي، ربما تلاحظون

noticed when I was entering text in the, in the editor

عندما كنت أدخل النص في المحرر

before, that even though I put text on multiple lines, when

حتى قبل أن أضع نصًا على أسطر متعددة، عندما

I rendered it in HTML it rendered all on a single

عرضته في HTML قام بعرض الجميع في سطر

line. This is because in HTML all whitespace, new lines, tabs,

،واحد. هذا لأن في HTML جميع المساحات البيضاء، الأسطر الجديدة، علامات التبويب

spaces all turn into a single space. To force our HTML

المسافات كل هذا يتحول إلى مسافة فردية. لإجبار HTML

to have multiple lines we can use another tag called the

على احتواء أسطر متعددة يمكننا استخدام علامة أخرى تسمى

br tag. It looks like this. It is also a void tag,

،علامة br. ستبدو كذلك. وهي أيضًا علامة فارغة

stands for break, and it's a void tag. And

تشير إلى الفاصل، وتسمى "علامة فارغة". وتضعها

you put this after, after any lines that you want to

بعد أي سطر تريده أن

appear on multiple lines. Let's let's play around with

يظهر على أسطر متعددة. دعونا نجرِ بعض

this in the browser a little bit. Here we are

التعديلات في محرر متصفح قليلاً. ها نحن هنا

in the browser. Let's let's enter some text. We've

في المتصفح. لندخل بعض النصوص. لدينا

got this text that's really too long for one line,

،هذا النص الطويل للغاية بالفعل بالنسبة لسطر واحد

and when we render this, it appears as one line.

.وعندما قمنا بعرض هذا، ظهر كسطر واحد

Let's put a line break here. When I render this,

،هيا بنا نضع خطًا فاصلًا هنا. عندما أعرض هذا

it still appears as one line. If we

يستمر في الظهور كسطر واحد. إذا أردنا

want to render multiple lines, we can enter the br

تقديم أسطر متعددة، فيمكننا إدخال العلامة br

tag like here. No problem. And now we have a line break. And we can even enter

في هذا الجزء. لا توجد مشكلة. لدينا الآن خط فاصل. ويمكننا على الرغم من ذلك إدخال

multiple br tags if we want multiple line

علامات br متعددة إذا أردنا خطوطًا فاصلة

breaks. 'Kay? There we go. Two line breaks or

متعددة. 'جيد؟ لقد نجحنا. خطان فاصلان أو

two br's equals two line breaks. Cool, huh? Another

أو علامتا br واللتان تساويان خطين فاصلين. رائع، أليس كذلك؟ ثمة طريقة أخرى

way of doing line breaks is to use the

لوضع خطوط فاصلة هي استخدام

p tag. This stands for paragraph. This is not a,

علامة p. وهذا يشير هذا إلى فقرة. هذه ليست علامة

a void tag. So the p tag has content and

فارغة. تحتوي العلامة p على محتوى

it looks like this. So it's, that you know, because

وتبدو كما يلي. إذًا فهي نظرًا لكونها

it's not a void tag, it has a closing tag, and

،ليست علامة فارغة، فهي تضم وسم إغلاق

we have a opening tag. So you've got opening p,

،ولدينا وسم فتح. بالتالي لديك وسم الفتح p

content, closing p, and this will render as one paragraph.

.محتويات، علامة الغلق p، وهذا سيتم عرضه كفقرة واحدة

let's check this out in the browser really quick Okay.

.هيا بنا تحقق من ذلك في المتصفح بسرعة أليس كذلك

So we've got these two lines. Let's take a different approach.

.لدينا هذان السطران. إذن، دعونا نجرب نهجًا مختلفًا

I'm going to start this line with a paragraph tag,

،لذا،سأبدأ هذا السطر بعلامة فقرة

and we'll, we'll render this. Ah-ha. Now we've got a

وسنعرض هذا. رائع. لدينا الآن

line break here in our text. Now the font got

خط فاصل في النص. أصبح الخط الآن

bigger, and that's kind of a side effect of our,

أكبر، وهذا أحد أنواع التأثيرات الجانبية

of our HTML tool. It must be some sort of

لدى أدوات HTML. يجب أن يكون هذا أحد أشكال

style set on p. That doesn't normally happen. I'm going to

النمط المحدد على p. والذي لا يحدث عادة. سأقوم

wrap the, the bottom line with a paragraph as well.

.بتلخيص السطر السفلي بفقرة أيضًا

Okay. There we go. Now we've got two lines the

حسنًا. لقد نجحنا. لدينا الآن سطران

same kind of basic idea as we had before.

.من النوع ذاته للفكرة الرئيسية كما فعلنا مسبقًا

Now, we'll, we'll talk about why there's this extra space

والآن سنتحدث عن سبب وجود هذه المساحة الإضافية

in here even though there's no space between this

هنا على الرغم من عدم وجود مساحة بين

text up here. We'll come to that in a minute.

.هذا النص. سنعود إلى هذا في غضون لحظات

But first, quiz time. Take this text here. Hello,

لكن أولاً، حان وقت الاختبار. خذوا هذا النص هنا. مرحبًا بالجميع

everyone, we're using two lines now. And enter the HTML

نحن نستخدم سطرين الآن. وقوموا بإدخال HTML

to draw that as it's formatted here, with two lines.

.لرسم هذا كما هو منسَّق، بسطرين

And I want you to use the, the br tag.

.وأريد منكم استخدام، علامة br

Similar videos:

Correct URL Solution - Web Development
Udacity
5.2K views 1 likes 0 dislikes 23 Feb 2015100% match

Advanced String Substitution - Web Development
Udacity
5.5K views 1 likes 0 dislikes 22 Apr 2012100% match

Best Browser - Web Development
Udacity
14.9K views 7 likes 0 dislikes 23 Feb 2015100% match

HTML Basics
Udacity
16.5K views 75 likes 2 dislikes 16 Jul 2014100% match

Code Organization - Web Development
Udacity
7.2K views 25 likes 1 dislikes 27 May 2012100% match

More Handlers - Web Development
Udacity
9.1K views 9 likes 2 dislikes 22 Apr 2012100% match

Web 简介
 Udacity
25.7K views 60 likes 0 dislikes 23 Feb 2015100% match

Whitespace Solution - Web Development
Udacity
15.7K views 10 likes 1 dislikes 23 Feb 2015100% match

Inline Vs Block
Udacity
17.3K views 139 likes 5 dislikes 23 Feb 2015100% match

The Method Attribute - Web Development
Udacity
9.6K views 14 likes 8 dislikes 22 Apr 2012100% match

String Substitution - Web Development
Udacity
4.7K views 1 likes 0 dislikes 22 Apr 2012100% match

The Method Attribute - Web Development
Udacity
5.8K views 3 likes 0 dislikes 22 Apr 2012100% match

Best Browser Solution - Web Development
Udacity
9.6K views 22 likes 1 dislikes 23 Feb 2015100% match

Install Google App Engine
Udacity
7.1K views 40 likes 48 dislikes 17 Apr 2012100% match

Paragraph Tag - Web Development
Udacity
8.6K views 4 likes 0 dislikes 23 Feb 2015100% match

What Is Your Birthday? - Web Development
Udacity
5.3K views 4 likes 0 dislikes 22 Apr 2012100% match

Shopping List Take 1 - Web Development
Udacity
841 views 1 likes 0 dislikes 23 Feb 2015100% match

HTTP Responses - Web Development
Udacity
5.5K views 19 likes 0 dislikes 23 Feb 2015100% match

Making Links Solution - Web Development
Udacity
5.6K views 5 likes 0 dislikes 23 Feb 2015100% match

Entering Input - Web Development
Udacity
6.3K views 3 likes 0 dislikes 22 Apr 2012100% match

Bold Tag Solution - Web Development
Udacity
6.1K views 5 likes 0 dislikes 23 Feb 2015100% match

Adding Images
Udacity
12.9K views 36 likes 0 dislikes 23 Feb 2015100% match

Forms - Web Development
Udacity
6.2K views 16 likes 1 dislikes 22 Apr 2012100% match

App Server Architecture - Web Development
Udacity
14K views 52 likes 5 dislikes 27 May 2012100% match

User Input - Web Development
Udacity
7.7K views 3 likes 0 dislikes 22 Apr 2012100% match

Part 2 - Web Development
Udacity
643 views 2 likes 0 dislikes 07 May 2012100% match

Get Solution - Web Development
Udacity
4.9K views 5 likes 0 dislikes 23 Feb 2015100% match

Thing DB - Web Development
Udacity
6.8K views 34 likes 1 dislikes 27 May 2012100% match

Rot13 - Web Development
Udacity
9.3K views 46 likes 8 dislikes 23 Apr 2012100% match

Local Hosting - Web Development
Udacity
4.9K views 5 likes 0 dislikes 27 May 2012100% match

Settings Privacy About Contact Donate