Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.5 Horizontal Line, Blockquote, and Cite

In this lesson I'll show you how to add horizontal lines, as well as quotations or citations. Let's get started!

3.5 Horizontal Line, Blockquote, and Cite

Welcome back. In our last lesson we took a look at tables and we created a very basic pricing chart using a table. We even learned how to group for style using the table header, table body, and table footer. In this lesson we'll take a look at some other essential HTML elements like the block quote, horizontal line and break. Let's get started. So the first thing we'll do is add a horizontal line right under We sell widgets. Let's toggle into Sublime and right where we see that h1 We sell widgets, right below that we'll create a new line and just drop in an hr tag. That stands for horizontal line. And now if we save it and toggle over and refresh we see a nice horizontal line span the entire length of that main div. But now the problem is the table is right up against that line and I'd like to create some vertical spacing there. Typically we would do this in CSS but it's a good way to also introduce you to the line break tag. So let's do that now. I'm gonna toggle back into Sublime and right below that horizontal line tag, I'm gonna do a br which just stands for break. I'll actually do two of those. We'll go ahead and save that. Toggle back and refresh and we've got some much better spacing going on there now. Lastly, I'd like to be able to add a testimonial to the website. So, I'm going to toggle back to Sublime and I wanna add this testimonial below the table. So, I'm going to scroll all the way down until I find the very last closing table tag. And right before the closing div tag, I'm gonna create a blockquote. And inside this blockquote, I wanna create a very basic sample testimonial. Something like, These are the best widgets I have ever used. And now I need to attribute that. So just like you would if you were writing a professional essay, you want to cite that particular source. So I'm going to go ahead within the blockquote tag and add a cite tag. So right after used, I'm going to add a cite tag. And I'm going to have this citation come from Mr. John Q Customer. I'm going to save that and then I'm going to toggle back to Chrome and refresh. And we see that using the blockquote tag has naturally created an indent whereas everything else is slammed right up against that left red side bar. Using blockquotes has actually created a nice indent for us. Using the cite tag within blockquote has also given the Mr. John Q Customer part a nice italic look. And of course, we can make that look even better with some CSS down the road. But that's a little outside the scope of this training. So far we've learned how to add a horizontal line, create some great line spacing with breaks and add blockquote and citation to blockquote. In the next lesson, we'll take a look at how to actually let users put information into the website using forms. Thanks for watching.

Back to the top