# What can you do w/the page source?



## snoozy (May 10, 2002)

Okay, so let's say you come across a website that you like the layout and functionality of. If you pull up the page source and you have a page of all that HTML, what can you do with it? Can you copy and paste it into (?? some program that would display it) and be able to use it, replacing the content with your own, or replacing images with your own, using it as a template?


----------



## unregistered5595 (Mar 3, 2003)

If it is an *.html or *.htm, yes you can. You can also reuse javascript. 
To reuse the picture tags, you have to provide your own pictures to fit with those tags, or relabel the tags. It's a great learning tool.

The page source of an *.aspx or *.asp page will only give you parts of the page. An Asp page creates a page dynamically, usually pulling things from a database, presenting them when the page is displayed in a browser.

When you write an *.html or *.htm page, and display it in a browser (like MSIE or Netscape or Firefox), it presents as a webpage. (barring the errors or special ways each browser functions-they are not the same)

As an example, copy and paste the following text (html).


> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> 
> <html>
> <head>
> ...


Paste it in a text file, like in Notepad. Save the file as 'Example.html', save it to your desktop. Click on it and open in MSIE. There you have the basics (with lots of pictures that don't show because you don't have the pictures.) As you can see, I kept the images in a file called 'images'.
HTH


----------



## snoozy (May 10, 2002)

If I don't have wordpad, what can I use to paste it into? And then, how do I get firefox to display it?


----------



## snoozy (May 10, 2002)

I copy&pasted it into BlueVoda Website builder, which is a free program I downloaded sometime ago. Then I was able to preview it. You've got a pink background there, right? So then I went and C&Ped the page source of the homepage of the website I like, and when it displayed it came out like:



* Login
* |
* 1 800 401 8412
* |
* Contact Us
* |
* International Sites

Concur

* Products
* Why Choose Concur?
* About Us
* Community
* Support

* Product Tour
* Video Demo
* Webinar
* resource-center

* I Need To...

etc. Is this what they call CSS? It doesn't display with stuff in place like yours does.


----------



## Nevada (Sep 9, 2004)

snoozy said:


> Okay, so let's say you come across a website that you like the layout and functionality of. If you pull up the page source and you have a page of all that HTML, what can you do with it? Can you copy and paste it into (?? some program that would display it) and be able to use it, replacing the content with your own, or replacing images with your own, using it as a template?


Your graphic web page editor should have a way to display code, which is what the source displays. If you don't have an editor that can display the page being edited in both graphic or code formats, then you need to get an editor that can so you can insert snippets of code in your page easily.

If you need an editor that can do that but can't afford to spend a few hundred on software, then I suggest that you download and install Kompozer. It looks and works very much the same as Microsoft FrontPage, and can display the editor in both graphic and code formats, yet it's still free. Here's the download location.

http://kompozer.net/


----------



## Nevada (Sep 9, 2004)

snoozy said:


> Is this what they call CSS?


No, CSS stands for "Cascading Style Sheet". It's a way of changing the look (colors, fonts, sizes, etc.) of the page with a set of rules (the "style sheet"). The nice thing about CSS is that you can shift to another style sheet easily, since you simply point to a new style sheet to do that.

I don't use CSS because search engines are never really sure if a page with CSS is spoofing the search algorithm by making irrelevant keyword-rich text invisible. If you use CSS be conservative, or you may find yourself off the radar at Google.


----------



## Spinner (Jul 19, 2003)

That's a nice example of html, but to make your page a bit safer use the full address for every link. instead of simply putting "images/yourpicture.jpg" use the entire addy "http://www.yoursite.com/images/yourpicture.jpg" 

If you have a sidebar with links, you can use some kind of thing, I forget the name of it, that will automatically update when you change one page of html. (It might be CCS???) For example, I have over 500 pages on one of my sites. When I want to update the link-bar, I don't have to go to all the pages to change it. I simply put a link on each page to a master page for the link-bar, then when I need to update a link, I do it on the master page and it automatically changes the links on every page. It saves tons of time and potential mistakes in links. Clear as mud, right?


----------



## Nevada (Sep 9, 2004)

Spinner said:


> That's a nice example of html, but to make your page a bit safer use the full address for every link. instead of simply putting "images/yourpicture.jpg" use the entire addy "http://www.yoursite.com/images/yourpicture.jpg"


How does that make the page any safer? In fact, how does it make any difference at all? As long as the directory structure us uniform throughout the site I don't see the problem.


----------



## MoonRiver (Sep 2, 2007)

This is kind of related. There is a neat extension for Firefox called Web Developer that has all kinds of tools like view CSS, view source, validate CSS, validate HTML, DOM Inspector, etc. It is displayed as a menu bar at the top of the browser. https://addons.mozilla.org/en-US/firefox/addon/60

Rich


----------



## snoozy (May 10, 2002)

MoonRiver said:


> This is kind of related. There is a neat extension for Firefox called Web Developer that has all kinds of tools like view CSS, view source, validate CSS, validate HTML, DOM Inspector, etc. It is displayed as a menu bar at the top of the browser. https://addons.mozilla.org/en-US/firefox/addon/60
> 
> Rich


Oy! :stars: Now I have an added toolbar full of stuff! I don't suppose there is a way to hide it except when I want to use it?...


----------



## snoozy (May 10, 2002)

Nevada said:


> No, CSS stands for "Cascading Style Sheet". It's a way of changing the look of the page with a set of rules (the "style sheet"). The nice thing about CSS is that you can shift to another style sheet easily, since you simply point to a new style sheet to do that.
> 
> I don't use CSS because search engines are never really sure if a page with CSS is spoofing the search algorithm by making irrelevant keyword-rich text invisible. If you use CSS be conservative, or you may find yourself off the radar at Google.


OK, so if it is not CSS, what is it and why did it display like an outline and not as a webpage?


----------



## MoonRiver (Sep 2, 2007)

snoozy said:


> Oy! :stars: Now I have an added toolbar full of stuff! I don't suppose there is a way to hide it except when I want to use it?...


Just go to view - toolbars and unselect it.


----------



## snoozy (May 10, 2002)

MoonRiver said:


> Just go to view - toolbars and unselect it.


 Thank you! You're a genius! 

That said, it does look like a pile of useful tools. Are there any instructions hiding in there somewheres?


----------



## MoonRiver (Sep 2, 2007)

snoozy said:


> Okay, so let's say you come across a website that you like the layout and functionality of. If you pull up the page source and you have a page of all that HTML, what can you do with it? Can you copy and paste it into (?? some program that would display it) and be able to use it, replacing the content with your own, or replacing images with your own, using it as a template?


I think you can just go to File - Save Page As Web Page Complete (Firefox)


----------



## Nevada (Sep 9, 2004)

snoozy said:


> OK, so if it is not CSS, what is it and why did it display like an outline and not as a webpage?


Since it's just the text I'm not sure. It sort of looks like a navigation menu by the content. You may have left some code out, since they may be java commands.


----------



## rzrubek (May 13, 2004)

Spinner said:


> That's a nice example of html, but to make your page a bit safer use the full address for every link. instead of simply putting "images/yourpicture.jpg" use the entire addy "http://www.yoursite.com/images/yourpicture.jpg"
> 
> If you have a sidebar with links, you can use some kind of thing, I forget the name of it, that will automatically update when you change one page of html. (It might be CCS???) For example, I have over 500 pages on one of my sites. When I want to update the link-bar, I don't have to go to all the pages to change it. I simply put a link on each page to a master page for the link-bar, then when I need to update a link, I do it on the master page and it automatically changes the links on every page. It saves tons of time and potential mistakes in links. Clear as mud, right?


I use NetObjects Fusion (free version) and it has a feature called Master border that remains the same on all pages that works like you describe. It is great. You can set a different master border for some pages if you want, but I don't know how and don't care to find out right now. You can check out my website in my sig line and see what an amateur can due in only a couple of weeks (i'm a slow learner) Theres a link to netobjects right under the MP3 Lullabies amazon widget.


----------



## Spinner (Jul 19, 2003)

Nevada said:


> How does that make the page any safer? In fact, how does it make any difference at all? As long as the directory structure us uniform throughout the site I don't see the problem.


I'm not sure how it makes it safer. My web host told me to do that to prevent hackers from hacking the site. Something about a hacker being able to access files with incomplete addies. 

I guess it's possible he was being a PITA, but he was generally very helpful in teaching me to use cpanel and lots of goodies that came in my hosting package so I had no reason to not trust what he said. Since he told me that I've always used the full addy in all my internal links.


----------



## snoozy (May 10, 2002)

Nevada said:


> Your graphic web page editor should have a way to display code, which is what the source displays. If you don't have an editor that can display the page being edited in both graphic or code formats, then you need to get an editor that can so you can insert snippets of code in your page easily.
> 
> If you need an editor that can do that but can't afford to spend a few hundred on software, then I suggest that you download and install Kompozer. It looks and works very much the same as Microsoft FrontPage, and can display the editor in both graphic and code formats, yet it's still free. Here's the download location.
> 
> http://kompozer.net/


I downloaded it and unzipped it, and though the install wizard seemed to have installed it, it does not come up as a program -- only as a collection of files. Is there a trick to getting it to function?


----------



## Nevada (Sep 9, 2004)

snoozy said:


> I downloaded it and unzipped it, and though the install wizard seemed to have installed it, it does not come up as a program -- only as a collection of files. Is there a trick to getting it to function?


Kompozer doesn't come with an install routine. You unzip it to where you want the program files to reside, then when you want to run the program you double click on kompozer.exe to start it.

For convenience you can right-click on kompozer.exe and then select Send To and then Desktop, to place a shortcut on your desktop.


----------



## How Do I (Feb 11, 2008)

Spinner said:


> If you have a sidebar with links, you can use some kind of thing, I forget the name of it, that will automatically update when you change one page of html. (It might be CCS???) For example, I have over 500 pages on one of my sites. When I want to update the link-bar, I don't have to go to all the pages to change it. I simply put a link on each page to a master page for the link-bar, then when I need to update a link, I do it on the master page and it automatically changes the links on every page. It saves tons of time and potential mistakes in links. Clear as mud, right?


You may be thinking of PHP include? I use includes on one of my sites for the Header, Footer, Right Sidebar and Left Sidebar. Change one file (like, footer.php) and it is changed either site-wide or directory-wide.


----------



## unregistered5595 (Mar 3, 2003)

Snoozy, I use Homesite as an editor, though I can use Notepad as well. Any text editor will work for this. 
I like the code to be as simple as possible. The concur site you are using is FULL of java and css, which is unnecessary, at least, until you understand those added tags.
Yes the background is pink on the example I gave you.
Also, I always put my images in an image folder in the same directory as the html pages for all the sites I've designed. 
The more you play with HTML, the more you will learn. HTH


----------



## Gary in ohio (May 11, 2002)

Keep in mind the "PAGE SOURCE" is just the code to display the page. For example. You cant go to every page on the HT web site and have your own HT bbs running. There is back end code that generates the pages that you dont get in page source. Now if you want to capture a static page then page source can be usefull. It will also let you determine how a web site works. For example, I use page source as an insight into a web site so I can write CURL scripts to automate access to a web site or to have a computer access a web site for me.


----------



## snoozy (May 10, 2002)

Feather In The Breeze said:


> I like the code to be as simple as possible. The concur site you are using is FULL of java and css, which is unnecessary, at least, until you understand those added tags.


Is that why it displays like that?


----------



## snoozy (May 10, 2002)

Gary in ohio said:


> Keep in mind the "PAGE SOURCE" is just the code to display the page. For example. You cant go to every page on the HT web site and have your own HT bbs running. There is back end code that generates the pages that you dont get in page source.  Now if you want to capture a static page then page source can be usefull. It will also let you determine how a web site works. For example, I use page source as an insight into a web site so I can write CURL scripts to automate access to a web site or to have a computer access a web site for me.



What is "bbs" and "CURL script"?


----------



## Spinner (Jul 19, 2003)

How Do I said:


> You may be thinking of PHP include? I use includes on one of my sites for the Header, Footer, Right Sidebar and Left Sidebar. Change one file (like, footer.php) and it is changed either site-wide or directory-wide.


Yep, that's it. I use it for sidebars, headers & footers too, but I didn't go into a lot of detail about that earlier. Wow, I know php and didn't realize it.  

I've got several books on php, CSS, and other styles, but they are so "dry" and hard to read that I don't use them much. That one little piece of info made the investment in them worth it thou. That "include" has saved me hours and hours of updates.


----------



## Gary in ohio (May 11, 2002)

snoozy said:


> What is "bbs" and "CURL script"?


BBS is bulletin board system, (fourm like this one) and CURL is a command line URL program.


----------



## How Do I (Feb 11, 2008)

> What is "bbs" and "CURL script"?


There are several free bbs (bulletin board systems) scripts that you can use to run your own forum, similar to HT. HT, for example, uses vBulletin (see bottom of this page...vBulletin is far from free). phpBB is one of the more common free bbs.


----------



## Spinner (Jul 19, 2003)

I use netscape composer. The new versions don't have the composer in them. I downgraded to version 7.1 which includes a great WYSIWYG editor. WYSIWYG means "what you see is what you get". You can download it here. It comes with the browser. I don't use the browser, just the composer. To get to the composer, open the browser, then click on the "communicator" tab and click on "page composer". Once you get to composer, you can right click and put a shortcut on your desktop so it's easy to find later.

There are many free editors available. I downloaded a few from tucows.com in the past. They also have CSS & php editors that will put the code in for you. Lots of helpers are out there, it's just a matter of finding them and weeding thru them to find one that meets your needs and you like working with.


----------



## snoozy (May 10, 2002)

How is XHTML different from HTML?


----------



## How Do I (Feb 11, 2008)

snoozy said:


> How is XHTML different from HTML?


Very minimal differences. http://www.w3schools.com/XHTML/xhtml_html.asp


----------



## snoozy (May 10, 2002)

How Do I said:


> Very minimal differences. http://www.w3schools.com/XHTML/xhtml_html.asp


I see. I've bookmarked that link -- looks like a very helpful site. One thing -- what is a "root element"? I looked in the glossary, and it is not listed. Is it whatever resides between the initial and final html tags?


----------



## How Do I (Feb 11, 2008)

From the same page at the bottom:



> All XHTML elements must be nested within the <html> root element.




```
<html> (root or parent element)
<head> ... </head> (sub or child element)
<body> ... </body> (sub or child element)
</html>
```
Have to think of the code as a sort of filing cabinet. Also a good way to organize your website.


----------



## How Do I (Feb 11, 2008)

snoozy said:


> I see. _*I've bookmarked that link -- looks like a very helpful site.*_ One thing -- what is a "root element"? I looked in the glossary, and it is not listed. Is it whatever resides between the initial and final html tags?


You get pretty much every thing you need to learn to build a website from there. Go to the *home page* and check out the sidebars. A wealth of site building tutorials and examples, whatever your flavor!


----------



## Nevada (Sep 9, 2004)

snoozy said:


> I see. I've bookmarked that link -- looks like a very helpful site. One thing -- what is a "root element"? I looked in the glossary, and it is not listed. Is it whatever resides between the initial and final html tags?


You know, you can save yourself a mountain of work while producing great looking pages with advanced features if you start with a template. That's a page all ready for you to customize. They have them for just about every conceivable subject matter. Just search at Google for web page templates. Many are free, and many more are under $5.

To give you an idea, I used this template for a page I did for a local western folk singer. The template is only $2.95.

http://www.countrymanordesigns.com/lonesomecowboy.htm

Here's what the page looks like customized for the performer's needs.

http://desertbreezenv.com/

I always start with a template. By using templates I can take advantage of the artistic and programming skills of other professionals for a very small fee.


----------



## MoonRiver (Sep 2, 2007)

snoozy said:


> How is XHTML different from HTML?





> XHTML is a separate language that began as a reformulation of HTML 4.01 using XML 1.0.
> 
> XML began as a simplified subset of the Standard Generalized Markup Language (SGML), meant to be readable by people via semantic constraints; application languages can be implemented in XML. These include XHTML,[4] RSS, MathML, GraphML, Scalable Vector Graphics, MusicXML, and others.Wikipedia


What that means is that XML is a language for creating new languages. XHTML was created using the XML language as a replacement (or alternative) for HTML.

XHTML and CSS are the code you should use if you are doing your own coding. XHTML is much stricter than HTML about following syntax rules so using a syntax checker is a must. XHTML is also supported on more devices (such as cell phones).


----------

