HTML SPACIAL TAGS
HTML Special Tags
HTML - Body
As we mentioned, the <body>
tag serves as the element containing all the content for the website. Tables,
lists, forms, paragraphs, and everything else must be placed within the body
element to ensure each element is displayed on your site.
HTML - Body Margins
Unique Attributes- leftmargin - Sets a left hand margin for your body element.
- topmargin - Sets a margin along the top of your body element.
HTML Code:
<body topmargin="50">
<body leftmargin="50">
Margin Example-1:
Top Margin
Margin Example-2:
Left Margin
HTML - Base Text
The text attribute sets the text color of all text contained within the body tags. Think of it as a means to set the color of your text, unless otherwise noted. Basically, you use these tags to set a base color scheme, which you can later modify through additional tags inside of the body.HTML Code:
<body text="red" >
or
<body text="rgb(255,0,0)" >
HTML - Base Links
Along the same lines, we may also specify base colors for visited or unvisited links. This method has deprecated, and we recommend that you use Cascading Style Sheets (CSS) instead.HTML Code:
<body link="white" vlink="black" >
or
<body link="rgb(255,255,255)" vlink="rgb(0,0,0)" >
Setting a baselink is a great way to ensure your viewers will not receive
the annoying error message that occurs with broken links.HTML - Music Codes
Inserting music onto a web page is relatively easy these days. In the past, multiple tags had to be used because browsers did not have a uniform standard for embedded media files. However, we're happy to announce that this is a problem of the past, and you will now have a much easier time than webmasters of the past.HTML - Embed
Music is inserted onto a web page with the use of the embed tag. There are other ways to link to music, but embed is now considered the standard for inserting media. Below is an minimalist example of the embed tag using the src attribute to define the media file's location.HTML Embed Tag Code:
<embed src="beethoven.mid" />
<p>Above is an embedded media player. To stop the music press stop/pause.</p>
Depending on what kind of media software you or your visitor has installed,
the above example will appear slightly different. To make your embedded player
display properly, change the attributes associated with display.HTML - Embed Attributes - Related to Display
To customize the appearance of the embedded media player, be sure to set the following attributes.- width - The width of the media player.
- height - The height of the media player.
- hidden - Determines if the media player is visible. If this value is set to "true", the media player will not be displayed. We recommend using this attribute only if you know that your visitors will not want the option to stop the music that is playing on your web page (The values are "true" or "false").
HTML Code:
<embed src="beethoven.mid" width="360" height="165" />
Embedded Music:
Usually, you do not want to mess with the width and height of the media player, as it can cause the media player to look rather distorted.HTML - Embed Attributes - Related to Functionality
To customize the functionality of the embedded media player, be sure to set the following attributes.- autostart - Allows media player to start automaticcaly (values are "true" and "false")
- loop - Sets whether or not the media file will repeat (values are "true" and "false")
- volume - Sets the volume of the media file (values range from "0" to "100")
HTML Code:
<embed src="beethoven.mid" autostart="false" loop="false"
volume="60" />
Customize Your Code:
HTML - Video Codes
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.HTML Code:
<embed src="http://www.your url/files/html/htmlexample.mpeg"
autostart="false" />
Mpeg Movie:
You may start and stop your movie files by either pressing the buttons at the bottom of the object or by single-clicking on the object itself. The movie can be restarted by double-clicking your mouse.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.
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://your url/pics/flash/motiontween1easy.swf">
motiontween1easy.swf</a>
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>
Embed YouTube Video:
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 - 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 - 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="your 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 - 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 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, your" />
</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 - 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.your url.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 - Revised Meta
The revised meta tag records when the last update was done to the site.HTML Code:
<head>
<meta name="revised" content="Happy New Year: 1/1/2003" />
</head>Don't forget to get a little meta with your pages!
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 - 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:
SubtitleThis paragraph would be your content paragraph...Here's another content article right here. |
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:
|
|
|
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:
|
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:
|
|||||
|
|
||||
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:
|
|||
|
|||
|
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.
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>
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.
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>
Frame Borders:
Here's a visual:
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:
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!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:
- 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")
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
|
¾
|
¾
|
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 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 - < <br />
Greater than - > <br />
Body tag - <body>
</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.Greater than - >
Body tag - <body>
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 type="text/javascript">
<!--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 type="text/vbscript">
<!--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 - <!-- Commenting Scripts -->
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:
<script>
<!--
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.
No comments:
Post a Comment