<script> Tag & Favicons
Overview of Script, Link, & Style Tags
- F04a - (5:35)
- Examples of script, link, and style tags: look at the source code of these web pages. (Note that the link and the style tags, which are also usually head tags, are covered in CSS training):
<script> Tag
- F04b - (2:31)
- script - A tag used for putting primarily JavaScript into an html file either directly into the code or by sourcing the code with a link to a discrete JavaScript file.
- The <script> element can be used almost anywhere inside an html document.
- The element can contain JavaScript code or a link to a JavaScript file.
- Sourcing a separate JavaScript file is the same as putting the actual code between the script tags.
- To insert JavaScript code:
- <script type="text/javascript">The JavaScript code goes in here</script>
- The location of the script determines where it will load.
- Code that needs to load before anything else needs to go in the head.
- To link to a JavaScript file, use the src attribute:
- <script src="example.js" type="text/javascript" charset="utf-8"></script>
- Note that there ought to be nothing between the opening and closing script tags when sourcing a JavaScript file.
- F04c - (4:08)
- Assignment:
- In this assignment, refer to the code covered in the prior section for proper syntax.
- Create a new folder and name it yourlastname_F04c.
- Create a new html file.
- Name it yourlastname_F04c.html
- Put script tags inside the body tags (not inside the head).
- Use the proper attribute for inserting JavaScript code, not for a link to a JavaScript file.
- Copy the source code from this file and paste it inside your opening and closing script tags.
- Change the name from Pablo Picasso to a favorite artist or musician of yours.
- Using Notepad or TextEdit, create a new text file and name it yourlastname_F04c.js (note the different file extension at the end .js which is used for JavaScript files) and save it in the same folder.
- Copy the same source code from step 6.
- Paste the code into the new .js file. Do not include the script tags, just paste the code.
- This time, change the name to a hero of your choosing.
- Save the JavaScript (.js) file.
- In your html file, after the closing script tag, put in opening and closing <p> </p> paragraph tags.
- Between the opening and closing paragraph tags put in the code needed to source your .js file.
- Save the html file.
- Open it in your browser. You ought to see the following, with the new names you used and whatever the current day and date is:
Adding a Favicon With a <link> Tag.
- F04d - (4:00)
- Linking to a favicon
- A favicon is the little logo you often see to the left of the address bar and also at times in your Favorites or Bookmarks menu.
- The term favicon represents the words favorite icon.
- In order to create one (this is not an exercise, just listing the steps that can be taken):
- Make a 16px by 16px image that will become the favorite icon.
- Make sure that it will look good at that very small size.
- Save the file in .png, .gif, or .jpg format.
- The file then needs to be converted into the special file format, .ico (for icon)
- Here are some of many favicon generators:
- You will get a file named favicon.ico
- That file ought to go in the root directory of your site, that is, the top level folder of your site.
- Note you can put a favicon.ico file in other locations at your site and give it a different name, but in the event that the link tag is not there to specify the location, browsers will look in the root ( / ) for it.
- There are other rules for where to put the ico file, how to name it, and so forth, that can depend on such factors as if you have a sub domain or if you want to have different favicons for different parts of your site.
- Then put this code into the head element:.
- <link rel="icon" href="/favicon.ico" type="image/x-icon" />
- For compatibility with IE also include this:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
- Some sites include the full url for the file:
<link rel="icon" href="http://www.domainname.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.domainname.com/favicon.ico" type="image/x-icon" />
- Here is more information about it from Wikipedia.