Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

HTML Page Code

  • HTML pages contain basic code that the page must have in order to be an html page
  • This code is necessary for the browser to display the page correctly
  • Click the Code view button
  • View the basic coding that Dreamweaver added to the page when we created a new page
  • As we add content to a web page, Dreamweaver is placing the content into HTML tags within the page
  • If you plan to work on the web, it is important to understand the code view
  • It is not necessary to understand code in order to use Dreamweaver, but it is important to understand code if you want to be able to troubleshoot code and work efficiently

HTML Page Code

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.

  • Intro 0:00
  • HTML5 Page 0:41
    • Change Default Doctype to HTML5
  • HTML5 Code 2:39
    • Head Section Code
    • Title Tag Code
  • Importance of Code View 4:16
  • Summary 5:12

Transcription: HTML Page Code

Welcome back to educator.com.0000

We are now going to take a look at creating a new page in Dreamweaver.0003

And what I want to do is familiarize you, just a tiny bit, with the code behind the scenes; this is what makes Dreamweaver unique as a product.0008

Dreamweaver is actually creating code behind the scenes, that you can actually view and we are going to take a look at that.0018

That is the code that the browser reads when it goes to display your webpage.0027

It is important to get an idea of what is behind the scenes, in most programs you do not have that opportunity, and it is all hidden from you.0032

Let us create a new HTML page, just click Create new HTML, right smack in the middle of that Dreamweaver interface and if I look at it in Design view you can see there is nothing there. 0041

But, if I look at it in Code view, what we are looking at is XHTML coding, which is the present standard for HTML, it is not exactly what we want to do if we are going to use a new website or create a new one from scratch.0057

What I want to do also is change this to the HTML5 DocType within Dreamweaver, so I am going to do that now, as well.0076

I will go in and I am going to click Edit, or in the Mac side click the Dreamweaver menu and go down to where it says Preferences.0086

And within the Preferences area there is a category called new document and you can see my default document type, right now, is XHTML.0098

And I just wanted to expose you to that as it is the present standard and most websites you move into, it is going to be XHTML.0109

But when we are building our travel website, we want to prepare for the feature, so we are going to do is use HTML instead, specifically HTML5. 0119

I am going to click this down arrow and say HTML5, click OK, and from now on, any new page I create will be HTML5.0132

I will close this one up, I am going to click that same item here, Create new HTML. 0144

This time, when I move in to the code, it is much more simplified, so, this is an HTML5 page and what is this code that must remain on my page, in order for my page to be viewed?0152

Well, it starts with a DocType and you can see this DocType is just playing HTML, so anytime you see DocType HTML, that means it an HTML5 page.0167

Now, we have an HTML tag at the top, we have one at the bottom and basically an HTML page it is like a person, they have a head and they have a body and so does our webpage.0181

So, here is the head section, and you can see within the head section we have a couple of items. 0195

The first one tells the browser what characters to use within the operating system in order to display the page, and we are using UTF-8, because it tends to translate into other languages a little bit easier than the old character set we used to use.0202

Also, there is a title on the page and you can see it says untitled document, here, now, it also says, untitled document up at the top of our Dreamweaver page.0221

If I go to change this, so let me just type in Travel, when I click off of it, you will see what Dreamweaver does, it is an example of specifically, what Dreamweaver is doing for you.0233

Whatever I put here ends up between the codes for the Title tag, on your webpage, so this is basically, what Dreamweaver is doing behind the scenes.0247

Even though it looks like nothing is happening, it really is underneath it all, and as you move forward and working in any program that deals with the web.0261

But Dreamweaver, specifically, we need to pay attention to what we are doing within the body of the page, because sometimes we can accidentally affect code on the page and things can change that we did not plan on changing.0272

And you will see that happen, I will make it happen, so you can begin to see how to correct some of these things that can happen.0288

Just remember CTR-Z or command Z is our friend, we can always go backwards and undo as long as we have not close the page, or done too many steps forward to make it really complicated to get back to that point.0295

So, that is just an overview of the code for an HTML page, you can see there is code here and we need to be picky about not deleting any code we do not understand, because sometimes you can have a problem with your page if you do that.0312

But, that is an HTML5 DocType we are going to be using moving forward in the course that is preparing for when HTML5 becomes a standard and browsers will support this type of DocType now, so it makes sense to go ahead and start using it.0328

That is a brief overview of HTML coding, specifically the coding Dreamweaver adds before we ever get to the webpage and we start adding our own content.0345