Sunday 1 December 2013

HTML - Scripts

There are two very popular scripting languages that are commonly used in HTML to make web pages come alive. JavaScript and VBScript are very useful scripting languages to know, if you have the time.

With HTML scripts, you can create dynamic web pages, make image rollovers for really cool menu effects, or even validate the data on your HTML forms before users submit their information. However, JavaScript and VBScript are very complicated compared to HTML. It may be simpler just to download someone else's scripting code and modify it for use on your web page (if they have given you permission to do so, of course!).

HTML Javascript Code

If you want to insert JavaScript code into your HTML, you are going to use the <script> tag. If you would like to know more about JavaScript, check out our JavaScript Tutorial. Below is the correct code to insert embedded JavaScript code onto your site.

HTML Code:

<!--script

***Some JavaScript code should go here***

-->

</script>

For JavaScript, you set the type attribute equal to "text/javascript", which is similar to the process of specifying CSS. We can also include a comment around the JavaScript code. This will prevent browsers that do not support JavaScript or have had JavaScript disabled from displaying the JavaScript code in the web browser.

HTML VBScript How To

To insert VBScript code onto your website, you must once again make use of the <script> tag. Below is the correct code to insert VBScript code onto your site.

HTML Code:

<!--script

***The VBScript code should go in this spot***

-->

</script>

For VBScript, you set the type attribute equal to "text/vbscript", which is similar to specifying CSS. We also include a comment around the VBScript code. This will prevent browsers that do not support VBScript or have had VBScript disabled from displaying the VBScript code in the web browser.

HTML -

Scripting languages such as JavaScript and VBScript must be commented out as well. You will learn that it is only once they are placed within the <script> tags that the browser executes the scripts without causing errors.

HTML Code:

<!--

document.write("Hello World!")

//-->

</script>

With this example, we are jumping far ahead. Just be sure you understand when to use comments and where to look for them. They are a very useful tool for any large HTML project.

Additional Spaces and <>.

Regardless of how many spaces you place between words, your web browser will only render a single space. To get around this, use the non-breaking space character entity.

HTML Code:

<p>Everything that goes up, must come &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; down!</p>

Spaces:

Everything that goes up, must come down!

In HTML, we use less than and greater than characters to create tags, so to use them on your website you will need entities.

HTML Code:

<p>
Less than - &lt; <br />
Greater than - &gt; <br />
Body tag - &lt;body&gt;
</p>

Less than Greater than:

Less than - <
Greater than - >
Body tag - <body>

Take a few minutes to view and play with the symbols listed in the Entities Table.

HTML Character Entities

An "entity" is a fancy term for a symbol. Several symbols, such as copyright, trademark, or foreign cash symbols, exist on your standard keyboard, so you need to display these characters using a different method.

There are three parts to every entity.

Each begins with a ampersand - &
Then the entities name - copy
And finally a semicolon - ;

Copyright:

Combine © to make - © - Copyright symbol.

Expect complications if you forget to include all three parts of an entity.

More Entities:

¢	Cent	¢	¢
£	English Pound	£	£
¤	Currency	¤	¤
¥	Yen	¥	¥
®	Registered Trademark	®	®
°	Degree(s)	°	°
±	Plus or Minus	±	±
¼	¼ Fraction	¼	¼
½	½ Fraction	½	½
¾	¾ Fraction	¾	¾

View a more complete list at: Entities Table

Noresize and Scrolling

It's possible to further customize the <frame> tag using the noresize and scrolling attributes.

HTML Code:

<html>
  <body>
    <frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
      <frame src="title.html" noresize scrolling="no">
      <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
        <frame src="menu.html" scrolling="auto" noresize>
        <frame src="content.html" scrolling="yes" noresize>
      </frameset>
    </frameset>
  </body>
</html>

Noresize and Scrolling:

Here's the Visual: Visual

noresize - Determines whether the frames can be resized by the visitor or not. (values "true" and "false")
scrolling - Determines whether scrolling is allowed in the frame or not (values "true" and "false")

We set the scrolling for our content frame to "yes" to ensure our visitors will be able to scroll if the content goes off the screen. We also set the scrolling for our title banner to no, because it does not make sense to have a scrollbar appear in the title frame.

Frame Name and Frame Target

How nice would it be to make each menu link load into the content page? We do this by naming each frame and setting the correct base target inside "menu.html".

HTML Code:

<html>
  <body>
    <frameset rows="20%,*">
      <frame name="title" src="title.html">
      <frameset cols="30%,*">
        <frame name="menu" src="menu.html">
        <name="content" src="content.html">
      </frameset>
    </frameset>
  </body>
</html>

HTML Code:

<html>
  <head>
    <base target="content">
  </head>
  <body>
    <!-- Content Goes Here -->
  </body>
</html>

Frame Target:

Here's the Visual: Visual

We first named the content frame "content" on our frame page, and then we set the base target inside "menu.html" to point to that frame. Our frame page is now a perfectly functional menu and content layout!

FrameBorder and FrameSpacing

You've probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing. These attributes appear within the frameset tag.

Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

frameborder="#" - Determines whether there will be a border.
border="#"- Modifies the border width.
framespacing="#" -Modifies the border width, used by Internet Explorer.

Here's an example of the same frameset without the borders.

HTML Code:

<html>
  <body>
    <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
      <frame src="title.html">
      <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
        <frame src="menu.html">
        <frame src="content.html">
      </frameset>
    </frameset>
  </body>
</html>

Adding a Banner or Title Frame

Add a row to the top for a title and graphics with the code as follows:

HTML Code:

<html>
  <body>
    <frameset rows="20%,*">
      <frame src="title.html">
      <frameset cols="30%,*">
        <frame src="menu.html">
        <frame src="content.html">
      </frameset>
    </frameset>
  </body>
</html>

HTML - Frames, Frames - A Generic Frame Page,

HTML - Frames

Frames allow for multiple .html documents to be displayed inside of one browser window at a time. This means that one page has no content on it, but rather tells the browser which web pages you would like to open. With the addition of CSS and PHP, frames have become outdated, but if you wish to use them, read on.

Frames - A Generic Frame Page

Frames are most typically used to have a menu in one frame, and content in another frame. When someone clicks a link on the menu, that link is then opened in the content page. Here is a classic example of a basic "index" frameset with a menu on the left and content on the right.

HTML Code:

<html>
  <body>
    <frameset cols="30%,*">
      <frame src="menu.html">
      <frame src="content.html">
    </frameset>
  </body>
</html>

Frame Set:

Here's the example: Frame Index

frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it.
frameset cols="#%, *" - The width that each frame will have. In the above example, we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself (70%).
frame src="" - The URL of the web page to load into the frame.

A good rule of thumb is to call the page which contains this frame information "index.html", as that is typically a site's main page.

HTML - Standard Layout

A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website.

HTML Code:

<table cellspacing="1" cellpadding="0" border="0"
 bgcolor="black" id="shell" height="250" width="400">
   <tr height="50">
      <td colspan="2" bgcolor="white">
         <table title="Banner" id="banner" border="0">
            <tr><td>Place a banner here</td></tr>
         </table>
      </td>
   </tr>
   <tr height="200">
      <td bgcolor="white">
         <table id="navigation" title="Navigation" border="0">
            <tr><td>Links!</td></tr>
            <tr><td>Links!</td></tr>
            <tr><td>Links!</td></tr>
         </table>
      </td><td bgcolor="white">
         <table title="Content" id="content" border="0">
            <tr><td>Content goes here</td></tr>
         </table>
      </td>
   </tr>
</table>

Basic Layout:

Content goes here

This approach is basic, yet organized. The code becomes complex rather fast, so you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less room there will be for error and debugging.

HTML Code:

<table id="shell" title="Shell" height="250" width="400"
 border="0" bgcolor="black" cellspacing="1" cellpadding="0">
   <tr height="50">
      <td bgcolor="white">
         <table title="banner" id="banner">
            <tr><td>Banner goes here</td></tr>
         </table>
      </td>
   </tr>
   <tr height="25">
      <td bgcolor="white">
         <table title="Navigation" id="navigation">
            <tr><td>Links!</td>
            <td>Links!</td>
            <td>Links!</td></tr>
         </table>
      </td>
   </tr>
   <tr>
      <td bgcolor="white">
         <table title="Content" id="content">
            <tr>
               <td>Content goes here</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Basic Layout 2:

Content goes here

The code is quite a lot to look at, SO break it up and organize it in your own way to make things easier for you.

HTML - Page Layouts and Templates

HTML - Page Layouts and Templates

HTML layout is very basic. Not many options exist with the body tag alone. Tables, on the other hand, are the bread and butter of HTML layouts. Any element may be placed inside of a table, including tables themselves!

HTML Code:

<table id="shell" bgcolor="black" border="1" height="200" width="300">
   <tr>
      <td>
         <table id="inner" bgcolor="white" height="100" width="100">
            <tr>
               <td>Tables inside tables!</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Tables inside tables:

Tables inside tables!

The white table (identified as inner) exists inside of the (shell) table, the black one. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts.

HTML - Div inside of Div

Placing <div> elements inside of other <div> elements allows these elements to be further subdivided.

HTML Div Subdivision:

<div id="myDiv" name="myDiv" title="Example Div Element" style="font-family:

Helvetica; font-size: 12pt; border: 1px solid black;">
  <div id="subDiv1" name="subDiv1" title="Subdivision Div Element"

style="color: #FF0000; border: 1px dotted black;">
    <h5>Section 1</h5>
    <p>This paragraph would be your content paragraph...</p>
    <p>Here's another content article right here.</p>
  </div>
  <br />
  <div id="subDiv2" name="subDiv2" title="Subdivision Div Element"

 style="color: #FF00FF;border: 1px dashed black;">
    <h5>Section 2</h5>
    <p>This paragraph would be your content paragraph...</p>
    <p>Here's another content article right here.</p>
  </div>
</div>

Divs Inside of Divs:

Section 1

This paragraph would be your content paragraph...
Here's another content article right here.

Section 2

This paragraph would be your content paragraph...
Here's another content article right here.

This concept is the foundation of which most web pages are now built. HTML documents that are properly divided and subdivided are easy to maintain and modify.

HTML - Div Element(s)

The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph element.

Group together text elements within a <div> tag to slice up HTML documents.

HTML Div Element Code:

<div id="myDiv" name="myDiv" title="Example Div Element">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

With these text elements now grouped together under a <div> element, we can alter the appearance of each underlying element collectively by applying a style attribute to the <div> tag.

HTML Div Element Code:

<div id="myDiv" name="myDiv" title="Example Div Element" style="color: #0900C4;

font: Helvetica 12pt;border: 1px solid black;">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

HTML Div Element in Action:

Subtitle

This paragraph would be your content paragraph...
Here's another content article right here.

Elements housed within a <div> tag acquire any styles or properties applied to the master div element. Therefore the paragraph and heading elements should now be rendered blue in a Helvetica font. In addition, we've applied a border to the <div> element just to help visualize the grouping of elements together.

HTML - Style Attribute

Understanding the HTML style attribute will provide you with a preview into the Cascading Style Sheet (CSS) world. In fact, the code we'll be using with style is indeed CSS code known as Internal CSS. CSS styling brings a whole new dimension to a website and offers endless customization of HTML elements and web page design.

When the style attribute was introduced into the HTML language along with CSS, a number of HTML attributes and tags became obsolete. Manipulation of the fonts and color of HTML elements is now accomplished through CSS styling, instead of stacking bulky formatting tags one inside the other.

HTML Style: Inline CSS:

<p id="contentParagraph" style="color: #0900C4;">
Here we've changed the font color of this paragraph to blue.
</p>

HTML Styling:

Here we've changed the font color of this paragraph to blue.

In the HTML Font lesson, we achieved similar results, but the code used to do so was cumbersome and inefficient.

HTML - Styling

As we mentioned, the values passed to the style attribute are actually CSS code. This means that we can go ahead and pass a series of values at once, changing several properties in one go. Simply separate each CSS attribute with a semicolon (;).

HTML Font Styling:

<p id="contentParagraph" style="font-family: Georgia ;

font-size: 12pt; color: #0900C4;">
Lorem ipsum dolor sit amet,

 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et

 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

 mollit anim id est laborum.
</p>

HTML Font Styling:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline CSS with the HTML style attribute offers a great way to improve the visual display of web elements and pages. With this new understanding of HTML and CSS, you're well on your way to mastering web design.

=================================

HTML - Revised Meta

The revised meta tag records when the last update was done to the site.

HTML Code:

-----------------------------

--------------------

HTML - Keyword Meta Tags

Keywords and/or phrases may be placed inside the keyword meta element. You should specify the most popular search terms you believe someone would use to reach your website. A few years back, you could spam this meta tag with any and every keyword possible to gain ranking on search engines. Now, however, repeated words, or words that do not pertain to the content of the site, will not benefit your search engine rankings.

HTML - Refresh and Redirect Meta

Later down the road, you may need to redirect traffic to another domain. A common reason might be that you have just purchased a better domain name and would like to retain your old visitors, yet still use your new domain. With the refresh meta tag, you will be able to redirect visitors to the website of your choice or simply refresh your own page to update dynamic content automatically.

For the refresh meta tag, the content attribute accepts two arguments separated by a semicolon (;). The first argument specifies the number of seconds between refreshes or redirection and the 2nd argument is a URL of where the browser will relocate.

HTML Redirect Meta Tag:

--------------------

<head>
<meta http-equiv="refresh" content="10; url=http://www.tizag.com" />
</head>

----------------------

The above code refreshes Tizag's home page every 10 seconds. A quick refresh may be necessary for news, stocks, or any other time-sensitive information. The most common use for this type of meta tag, however, is redirection. To redirect a viewer automatically, just change the URL to the new site, like shown below. This code will send your visitors to espn.com after landing at your site for five seconds.

HTML Page Refresh Meta Tag:

------------

<head>
<meta http-equiv="refresh" content="5; url=http://www.espn.com" />
</head>

HTML - Meta Tag Description

Search engines are the compasses of the web and help users navigate from site to site. Chances are, if you've used a search engine, you've probably seen the description meta tag in action.

Meta elements must be placed inside of the <head> element in order for them to be recognizable by web crawlers and bots. The <meta> tag generally requires the name and content attributes to be working together to present your web page in a good light.

HTML Code:

--------------

<head>
<meta name="description" content="Tizag contains webmaster tutorials." />
</head>

---------------

The description meta element allows the developer to summarize the content that can be found on the page and is often the first chance you'll have to attract visitors. These brief narratives and hooks are often the only opportunity you'll have to generate a lasting first impression.

HTML Code:

-----------------

<head>
<meta name="keywords" content="keyword, key keywords, etc" />
</head>

----------------

Separate each phrase/word with a comma to create large lists. An example of the keywords meta tag for Tizag.com would go something like this:

HTML Code:

-----------------

<head>
<meta name="keywords" content="HTML, XHTML, CSS, tutorials, tizag" />
</head>

-----------------

Keep in mind that driving traffic and having your site listed high in the search engine rankings is not as easy as placing keywords inside your meta element. The phrase "Search Engine Optimization (SEO)" was coined to describe the rigorous process involved in achieving rankings in search engines. While meta tags do play a small role in this process, they are by no means a one-stop shop for your SEO needs.

HTML - Meta Tags and Meta Data

Meta tags are used to supply information for search engines that will not be seen by the web surfer. These invisible units provide a flag for search engines to investigate and will then present that data to any potential users that stumble across your site through a search engine.

In the past, meta tags were the primary means for your site to be recognized by web spiders, but webmasters abused meta tags to improve their rankings in search engines. As a result, search engines have since modified their approach to keep results accurate. They now rely less on meta tags. Nevertheless, you should still include meta for those search bots that still do recognize them.

HTML - Embed Attributes

To customize the functionality of the embedded media player, be sure to set any of the following attributes.

autostart - Controls the media's ability to start without prompting (values are "true" or "false")
hidden - Controls whether or not the play/stop/pause embedded object is hidden or not (values are "true" or "false"; hide your embeded media if you just want background noise)
loop - Controls the ability of the media to continuously play (values are "true" and "false")
playcount - Sets a playcount which means the media will repeat itself x number of times, instead of continuously as with the loop attribute above (a playcount of "2" will repeat the video twice)
volumn - Sets a numeric value for the loudness of your media (values are "0" through "100")

=============================================

HTML - YouTube Videos

YouTube videos can be included in HTML documents, and Google offers the code to do so right on the same page as the video itself!

The code offered by YouTube includes a small handful of parameters that help customize the embedded video object, and if you dive deep enough into the code, you will be able to identify the <embed> element and see the src attribute pointing to the URL of the media file.

YouTube Video Code:

-------------------

<object width="425" height="344"><param name="movie"

value="http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1">
  </param><param name="allowFullScreen" value="true">
  </param><param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1"

type="application/x-shockwave-flash" allowscriptaccess="always"

allowfullscreen="true" width="425" height="344">
  </embed>
</object>

-------------------

About HTML

About HTML

HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and</h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, further tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.

Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, e

Video files, including YouTube videos, are embedded into an HTML document using the <embed> tag. The src attribute defines what video file to embed into the page. The <embed> tag does not require a closing tag. Here is a look at the <embed> tag with a global URL. Notice that its controls, including Play, Stop, Pause, and volume, are already included.

-----------------------

<embed src="http://www.tizag.com/files/html/htmlexample.mpeg"
 autostart="false" />

---------------

HTML - Video Media Types

Flash (.swf) and MOV (.mov) file types are also supported by the <embed> tag.

.swf - Macromedia's Flash file types - very high compression, great for the web!.
.wmv - Microsoft's Window's Media Video file types - good quality, variable compression.
.mov - Apple's Quick Time Movie format - good quality, variable compression.
.mpeg - the accepted standard for web movie files created by the Moving Pictures Expert Group - good quality, variable compression.

The list above outlines some of the most common "internet-ready" video files. Macromedia's .swf and .mpeg formats may be the best options for use with the web because the high compression rate of these file types reduces file size and expedites the download/buffering periods for your page visitors.
You may also simply place the URL of your media files into the href attribute of an anchor tag, much like the concept of "thumbnailing" images.

HTML Code:

------------

<a href="http://www.tizag.com/pics/flash/motiontween1easy.swf">
motiontween1easy.swf</a>

------------

Flash Media:

motiontween1easy.swf

=========================================================

Pages

Labels

Free HTML Software

Popular Posts

Blogger news

About

Sunday 1 December 2013

HTML - Scripts

Additional Spaces and <>.

HTML Code:

Spaces:

HTML Code:

Less than Greater than:

HTML Character Entities

Copyright:

More Entities:

Noresize and Scrolling

HTML Code:

Noresize and Scrolling:

Frame Name and Frame Target

HTML Code:

HTML Code:

Frame Target:

FrameBorder and FrameSpacing

HTML Code:

Adding a Banner or Title Frame

HTML Code:

HTML - Frames

Frames - A Generic Frame Page

HTML Code:

Frame Set:

HTML - Standard Layout

HTML Code:

Basic Layout:

HTML Code:

Basic Layout 2:

HTML Code:

Tables inside tables:

HTML - Div inside of Div

HTML Div Subdivision:

Divs Inside of Divs:

Section 1

Section 2

HTML - Div Element(s)

HTML Div Element Code:

HTML Div Element Code:

HTML Div Element in Action:

Subtitle

HTML - Style Attribute

HTML Style: Inline CSS:

HTML Styling:

HTML - Styling

HTML Font Styling:

<p id="contentParagraph" style="font-family: Georgia ;

HTML Font Styling:

HTML - Revised Meta

HTML Code:

HTML - Keyword Meta Tags

HTML - Refresh and Redirect Meta

HTML Redirect Meta Tag:

HTML Page Refresh Meta Tag:

HTML - Meta Tag Description

HTML Code:

HTML Code:

HTML Code:

HTML - Meta Tags and Meta Data

HTML - Embed Attributes

HTML - YouTube Videos

YouTube Video Code:

HTML Code:

------------

------------

Flash Media:

Blogger templates

Blog Archive