Build Your Own Business Website header image

How to Read a Web Page Source File

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we demonstrate how to read a web page source file. By right click on a page and selecting the “View Page Source” it will show the HTML view-source of the page. From the view-source you can tell if the site was constructed well or not or if it’s missing important elements but you need to understand the code in order to tell what you are looking at.

We also look at the view-source of a typical WordPress page and explain the elements you see at the head of the source code and then review some of the other page elements.

Video Transcript

Yeah, you said how to read a view source to detect a site source for how it was created. So we’re just going to look at the view source of this sample site you put in here. Okay, come over here to the tools we’re using… Okay so here’s a site and to view the source, I just select the view page source and you can start off at the top of this. Notice that this person doesn’t have a meta descriptoin and they don’t have keywords but that doesn’t really matter. Although they say keywords but then they don’t put anything in it.

Let’s see, this is a very simple site but it is not in any way standards compliant.

How about now?

Hey, that’s great. I can hear you now.

It was the setting in WebEx.

There you go. So I’ve gotten to the part in here. What specifically did you want to know or did you want to be able to figure out about this? I can tell you in summary, this is a horrible website. In summary, it is horrible from an SEO standpoint and it’s also horrible because it uses very poor HTML for displaying it. That is, it displays everything in tables. It uses tables for layout which is… I mean, it hasn’t been done on a regular basis for 10 years and just clutters the whole page up with markup. You can see that there’s essentially nothing of use in here and all it is is table, cell, border, cell, padding…blah blah blah… width you know, without any content in it. And you come on down here to…

You don’t care what program was used to make it?

I’m just guessing it’s just straight HTML. No program at all.

Why do you say that?

Because it’s all tables. There are… you know, you wouldn’t do this. For example, it’s not a Dreamweaver site because Dreamweaver would never do that. It’s not…

That’s kind of one of the things… what I know is, how can you tell WordPress site made the site or Dreamweaver made the site or…

Well, there’s no… you can only tell by experience. You can tell because you can look at this and realize that it’s a very poorly structured site. No automatic site creation system is going to create such a poorly created site. So it’s not going to be Microsoft’s Expression Web. It’s not going to be Dreamweaver and it’s certainly not WordPress, just by virtue the fact that it’s all tables. So that leaves me to the conclusion that it must… it must have been created from scratch you know, using this straight HTML.

Like somebody in a college course…

Yeah sure or you know, somebody who learned about how to design websites 15 years ago and then never learn anything new. I mean, that’s what it looks like to me. I’ve certainly run into people who consider themselves to be experienced web designers but who still do their design work like this. But they just have you know, 1 year of experience 15 times rather than 15 years of experience.

This is just one example. All that I usually get out of view source is the keyword content… the keywords are that they’re using. I really don’t know how to interpret view source more than that and that’s what I was creating. It also would be nice to have different sites to compare to such as when you say Dreamweaver you know, what would a Dreamweaver site would look like and how can you tell.

Well you know, in order to interpret that kind of stuff, you pretty much have to be a web developer because what this is is just code. That’s what the source is. The source is the source code. So in order to understand the source code, you have to understand code. And there’s not really a… I mean, there’s nothing special beyond that. If you can… if you understand HTML, CSS, and php then you understand what’s going on here. And if you don’t, there’s no really other… no accessible way to understand it without learning that stuff. In particular, php is not really… you don’t see any php on an HTML page but you can see… you can tell when it’s been created by WordPress because a WordPress site… well, let’s look at DIY Themes for a second, look at their source.

So a WordPress website starts off with some very fundamental things… first off, a bunch of meta tags. Well, the very first thing it does is it gives you its HTML tag. And so when you looked at this view source, it said HTML with nothing right? It’s just HTML. Well, a properly constructed… well actually, this would be properly constructed if it was an HTML 5 site but obviously isn’t. But WordPress adds this kind of stuff to it. It adds the language. It adds the direction of the reading and it adds the standard that’s being used so you can test whether or not this thing meets the standard. And then it always gives a head profile. It always gives a content type in a meta description and then…

What does character set mean?

Character set? Character set is… UTF 8 is essentially the character set for the English language left to right you know, Romance languages… English, French, Spanish… all use UTF 8. I think there are other character sets for you know, some of the Slavic languages and for Norwegian and Swedish and stuff like that. But the character set just has to do with you know, what does a machine code of such and such nubmer mean and UTF 8 is one standard for interpreting the characters that are supposed to be represented by a certain piece of machine code.

So anyway, a typical of a WordPress site is all this kind of stuff happening inside of the head. And then typical of Thesis is stuff like a body class and… well, it’s really interesting though. Yeah well, so header area… they’ve got their own little bit of custom code that they add to tehsis here but header area is a standard Thesis HTML structure and… actually interestingly, this must be running on an old version of Thesis. It must not even be… this must be running on 1.5 or something because this is no content area rather than Thesis area. I’m guessing that this is an old version of Thesis running the DIY theme site. This just looks a little different like it normally would. But again, that’s something you gain by experience. There’s no you know, special flag telling you what’s going on.

And you can tell the WordPress theme that’s being used, the Genesis versus Thesis on a newer, updated versions?

Not necessarily. I can tell because I’m familiar with Thesis HTML but if we look at the Genesis theme… I’m actually not familiar with the Genesis HTML. But if we just look at their site for a second here, view page source. Again, here’s the… it’s got a doc type up here just like the DIY Themes doc type had, just like this does not have, right? It’s got a doc type. It’s got the HTML stuff. It’s got the profile information, the content type.

It said Genesis up there.

Yeah, but that’s… in its keywords, that’s in its title which doesn’t really tell you that… which doesn’t really tell you that it is Genesis-based. This does though you know, the shortcut icon here?, wp content, themes, studiopress. That tells you that that’s a Genesis and I guess the same thing would be true here. This tells you it’s Thesis. You look at the stylesheet, wp content, themes, thesis_18 style. So you can look at where the stylesheet comes from. That certainly will tell you what the theme is. I totally forgot about that when I told you you can’t necessarily tell. But you actually can tell by looking at wp cotnent and by looking at the stylesheet and the address of the stylesheet. Because the stylesheet is always stored you know, inside of the theme folder under themes. And so this whole stylesheet thing means this is clearly a WordPress site because it’s wp content. And it’s the Genesis theme because it’s inside of Studiopress inside of themes.

Any other questions about that?


Okay. Yeah, I mean, you can learn a lot by looking at the source as long as you know a little. You got to start off by having sort of an understanding of some of the basic… sort of concepts of HTML and especially as they apply to WordPress. But once you’ve developed that then it’s fairly easy to kind of work your way through a source like this and see what’s going on.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment