Adobe Dreamweaver CS6 Paragraphs & Line Breaks

In this lecture, our instructor, Candyce Mairs, discusses paragraphs and line breaks. She shows what paragraph and line break tags look like, and demonstrates how to select text and insert line break tags.

Paragraphs & Line Breaks

Notice the tag in the tag selector & which option is showing in the Format dropdown

A paragraph tag sets groups of sentences together on a web page

It is created by using the Enter/Return key on the keyboard

How can we place text directly beneath another line of text without the spacing?

You need to use a line break which is the <br> tag

You can create a <br> tag by choosing shift-enter/return on your keyboard

Fix the text so the 2 line break lines of text will be directly underneath one another

Place your cursor at the end of the line break line

Hit the delete key on the keyboard

That should bring the line up

Then choose shift-enter on the keyboard

The 2 lines of text should line up directly under one another

Paragraphs & Line Breaks

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

Transcription: Paragraphs & Line Breaks

I now want to talk about the difference between a paragraph and a line break in HTML and I have the Headings page open that I created in a previous lesson.0000

There is something I want to show you before we start with the paragraph piece and that is this little * up in the tab of my document within Dreamweaver.0013

What that tells me is that this page has been changed but it has not been saved since it was changed.0025

Anytime you see an * it means you have made a change to the page and have not yet done a save, so anytime you see that * the Save command should also be available.0033

When I Click Save you can see the * disappears and in my File menu the Save is now grayed out.0047

That is your little indicator think of that being OK, Dreamweaver says wait a minute you have not saved this and sometimes you do not want to save it, but that is the little indication that you have not saved it yet.0056

What I want to do is move on to a paragraph, so I have a heading6 set up here, I am just going to hit Enter or Return after it, now, when I do that you can see in the Format within the Properties panel it says Paragraph.0071

Note also there is a P tag down in the Tag selector area and if I open this up in Split view you can see that I have some characters in between P tags.0089

Anytime you hit Enter or Return on your keyboard Dreamweaver is creating a new paragraph for you, so let us move back into Design view, I will place my cursor there and I am going to say This is a paragraph.0103

And I will do that twice, so I will copy that, you can see the font is a little bit different, so let me do a copy and add another.0120

Now, I hit Enter again, so notice there is a space in between these two and it is literally a full space I can fit my cursor between the two.0132

That is what P tag does and if I move into Split view you can see there is a P at one end and a P at the other, this is known as an Opening tag, this is known as a Closing tag and a closing tag always has/, so every one of these is a closing tag in HTML.0143

And do not worry I would not get too deep into the code, but I think understanding headings and paragraphs and how to get your text directly underneath other text is important.0166

These are pure HTML pieces now let me copy that paragraph or both of them, so I will do a copy of that and I am going to hit Enter or Return and paste it in, so I have four paragraphs.0178

Now on this one I am going to change the word Paragraph, now in order to select a word in Dreamweaver I could go ahead and do it the hard way, which was that start and drag with my mouse to select it.0195

But there is a much quicker way if it is a single word I can double-click and it perfectly selects it and that is really handy for hyperlinks when you do not want to have extra space on either side of the word.0213

I am going to -- with that highlighted -- type again and say line break, so if it is highlighted in text, when I go to type it covers it up it deletes the old and adds what I want.0225

So, I am going to do the same thing here double-click the word Paragraph and just start typing line break.0240

Now, the reason I did that is I want to be able to not have a space between these two lines, so you can see it is a full cursor of space.0249

What if this was an address and I wanted my company name here, I wanted the address here and then I put the city and state down in this area.0260

Well I certainly cannot use a paragraph to do it or hitting Enter or Return on the keyboard because that is always going to add that extra space.0271

What you do instead is I am going to pull these two lines up together and show you how to put it directly underneath, now the fastest way to do this is to put your cursor after the first line and hit the Delete key.0280

You want to make sure you are deleting forwards, so on the Mac keyboard you do not want the key that has the little back arrow on it.0297

On the Mac keyboard you have two delete keys, so make sure that it is not the one with the back arrow that is actually a backspace key and when you are working in HTML and there is coding behind the scenes…0307

…Whether you delete forward using the regular Delete key or you delete backwards using the Delete key with the back arrow or the backspace, on the PC, can make a difference in the code you will end up deleting.0320

I put my cursor after it, I hit the Delete key, which is basically the forward delete on the keyboard, and it pulled both lines up together which is exactly what I want.0334

Let me close up the properties here so you can see this a little bit better.0346

Now in order to get that text directly below instead of hitting Enter or Return I am going to add Shift enter, so you want to use Shift enter or Shift return in order to put it directly below.0351

Let us take a look at the difference in the code when we do that, now this is a line break and I want to find this sentence in the code and we do not have too much code here so it is not too difficult right now, but as you add more content to your pages it gets a lot more difficult.0368

The fastest way to select it in the code especially if you're new to coding is select it in Design view, it is very simple to select and notice it highlights it in Code view.0387

And the Split view allows you to start to get a little bit familiar with the code that Dreamweaver's creating but this is a line break.0400

Now, notice I have a P tag here and I have a closing P tag down here and there is a PR in between, this is actually my line break this is what made the text go down to the next line.0409

Anytime you see a BR it stands for a break and what it does is it does not disrupt the formatting of the content it just changes it to the next line.0425

What a paragraph does is it can change the formatting of the content if you have that extra space.0438

What would happen is both of these sentences would still adopt my paragraph formatting because if I highlight them notice there is a P on one side and a P on the other.0446

Even though it is two lines of text they are both going to get that same paragraph formatting, but that is what's known as a line break and I get asked quite often cause most people can find the paragraph by hitting Enter or Return but they have trouble finding this as an option.0458

Enter or Return gives you a paragraph, Shift enter or Shift return places the text directly below the previous text with no space in between it.0479

So, that is the difference between a paragraph and a line break in HTML and how you can use shortcuts to create even one of them using Dreamweaver.0492

Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.