Help with scripts.

[AbdulW87]

My cousin wants me to build a simple HTML website for his travel agency, website is just for information sake no online bookings or anything like that. i learned HTML from W3S and from time to time I look at the code of the different websites to see how professionals code the website.

I was at this one website and there were a lot of scripts in the head which confused me, can any one shed some light on them. maybe not extreme detail.

Code
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/document_iterator.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/find_proxy.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/get_html_text.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/global_constants.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/name_injection_builder.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/number_injection_builder.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/string_finder.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/change_sink.js"></script>
<meta name="document_iterator.js"><meta name="find_proxy.js"><meta name="get_html_text.js"><meta name="global_constants.js"><meta name="name_injection_builder.js"><meta name="number_injection_builder.js"><meta name="string_finder.js"><meta name="change_sink.js"><style charset="utf-8" type="text/css" id="AEEB20B6-2CBF-4F04-8C76-4B754DB03E30">SPAN.skype_pnh_container SPAN.skype_pnh_mark{ display:none !important;}@media screen{SPAN.skype_pnh_print_container_1338608775{ display:none !important;}SPAN.skype_pnh_container, SPAN.skype_pnh_container *{background-attachment: scroll !important;background-color: transparent !important;background-image: none !important;background-position: 0px 0px ! important;background-repeat: no-repeat !important;border: 0px none !important;border-color: #000000 !important;border-style: none !important;border-width: 0 !important;border-left: 0 none #000000 !important;border-top: 0 none #000000 !important;border-right: 0 none #000000 !important;border-bottom: 0 none #000000 !important;border-left-color: #000000 !important;border-left-style: none !important;border-left-width: 0 !important;border-top-color: #000000 !important;border-top-style: none !important;border-top-width: 0 !important;border-right-color: #000000 !important;border-right-style: none !important;border-right-width: 0 !important;border-bottom-color: #000000 !important;border-bottom-style: none !important;border-bottom-width: 0

P.S. whats up with the !important remark in the code

 

[Hoogle]

They are HTMl\ HTML5 sites but have Javascript plugings and widgets normally you can find the codes ie tere is 1 for skype So I assume somewhere on that site there is either a live skype feed or a way of contacting somebody directly through skype through there site usually saying if they are online or not etc.

an example would be
create an iframe and inder the source="" control embed this

<script type="text/javascript" src="http://www.auctionnudge.com/item_build/js/SellerID/odditalia/siteid/3/theme/columns/MaxEntries/6/grid_cols/2/grid_width/100%25/show_logo/1"></script><div id="auction-nudge-items" class="auction-nudge"></div>

this will be a script that will embed a live auction feed on ebay from the user odditalia so wheneve they post a new listing on ebay it will automatically embed all ther live listings directly on your web page.

The part with the scripts on top are to save you from having extra documents uploaded to your server for example PHP catch forms or CSS styling sheetes instead they are embedded into the original page.


So when you have an oblect that needs a script in your page the id will know to look for the script at top of the page.



Another example of a page like this is just like photoshop when you slice a psd top a website it creates the html and images etc

However if you do exactly the same thing design your wesite in Fireworks which is very similar to photoshop but it is photoshop for the web and then slice the document in fireworks it will create the scripts and better coding using things like java script and Jquery etc.

With Fireworks you can predefine simple things like you cant do in photoshop until you get into dreamweaver ie roll over buttons, drop down menus

So as they are not straight HTML coding it auto generates the relevant script and places it either on a seperate styling sheet to be uploaded with your website or if it is only minor scripts then it will place them directly in the html document.


However these scripts must be placed in between the <header /> tags and not in the <body />

 

[AbdulW87]

thanks for the info hoogle, unless i want some fancy things in my website i dont really need plugins right. seems like a dumb question but do these plugins use extra bandwidth. For example if i want to create a similar website to the W3S website, which is i think mostly plain HTML i dont need to install any scripts just Style sheets and basic coding will do.

 

[Hoogle]

yeah you will find if your using dreamweaver most things that need scripting dreamweaver will automatically do it even for rollover images etc.

Obviously the more interaction you have on your site the more bandwidth it takes, Especially if you are using widgets that communicate back to other sites ie the ebay listing example That communicates with the site that compiles the information so is downloading from there as soon as anyone logs in, That site is then downloading info from ebay so technically the user is using 3 X more bandwidth

 

[AbdulW87]

thanks a lot, you cleared up a lot of things for me.