Okay, let us just close up the head section right now by twirling this arrow back up and we will go over to the source code editor. Click on the source code editor button and we will take a look at the source code for this page.
Now, I am not going to go into any detail on the source code editor at all here because we have another lesson later on that explains to you all about how to use the source code editor. But I did not want to show you that, you can see your source code here, make edits here in to all kinds of fun stuff right in the source code editor. Let us take a look at the next button to the right which is called the outline editor. Click on that and we see something very interesting here. This is actually our HTML of the page in tag pairs. Some people do not realize just how powerful the outline editor is. I love the outline editor and I use it all the time.
You can expand an element by clicking on this arrow here or close it by clicking again. Now what is that exactly? Well this is showing me the contents of the head portion of my page. And as I go over anyone of these elements, they sort of highlight and I can go into these elements by clicking on them and getting in a greater detail as I click through.
]
Now an element is a tag, okay. So an HTML element is also known as a tag. So this is showing me my tags in tag sets. For example, if I close up the head portion and go into the body, here, I can clearly see I got a table. And inside my table I got table rows and inside my table rows I got table cells and inside my table cells I have a number of things. In fact, I can go here and I can press return on my keyboard to close this up and then press option return on the Mac or Alt return on the windows to expand the entire tree all at once.
So as I scroll down, I can clearly see the entire markup of the page, separated into a nice, clean tag sets. What you might not realize is that you can actually grab a whole tag and move it to a different location in the hierarchy. I am not going to do that right now because I do not want to mess up my page. In fact, I am going to do edit undo by pressing command Z on my keyboard to undo the change I just made.
Now notice that the markup tree down here at the bottom is still active even on this editing mode. So I am going to select table, it will pop me up here to the table tag and I want to show you some of the attributes of the table tag. Notice right now, we got some attributes already set with border, cell spacing, and cell padding. But if you wanted to add additional attributes here in the outline editor, you will click on this tiny little arrow right here to reveal all of the attributes that are available for that tag.
Now we can add more attributes simply by selecting one from the list. For example, background color. And here, we could add the value for the background color which is an attribute of the table tag. I do not want to add this right now so I will just press command Z or Ctrl Z on Windows to undo that.
Okay, one last thing about the outline editor and the source editor, both. Sometimes, people do not realize that you can use the objects from the objects pallet here in these editing modes. For example, I can grab a table from the objects pallet and drop it right into the outline editor. And again, I am going to undo by pressing command Z or Ctrl Z on Windows.
