Tag Archive
3D 3dprinting android ant BigData bitcoin Browsers C/C++ cryptocurrency CSS dd ddrescue dogecoin DOS editors find Games Git hadoop html html5 Java Linux litecoin node perl Postgres Programming Python scripting Shell SQL Swing TOTK Utilities utilization vi Video Web Web Design Wifi Windows Wordpress XML Zelda
HTML: Basic HTML5 page
This is where I start coding my web pages. This is a simple framework for an HTML5 web page. The DOCTYPE has been simplified and is supported by all major browsers even if they do not fully support the current HTML5 tags.
<!DOCTYPE html> <html> <head> <title>My Sample HTML5 web page</title> </head> <body> This is my sample web page. </body> </html>
How to include Javascript on a web page
There are three ways to include Javascript files on a website. You can use scripts placed in the head element, scripts placed within the body element or you can include an external file.
The <script> tag is used to contain the Javascript code when you are placing it within the web page.
Example of code within the <head> tag:
<!DOCTYPE html>
<html>
<head>
<title>Javascript in Head tag</script>
<script language="javascript" type="text/javascript" >
document.write("Hello, World!");
</script>
</head>
<body>
</body>
</html>
When you are expecting to output directly into the page it is helpful to place the script in the
<body> tag.
<!DOCTYPE html>
<html>
<head>
<title>Javascript in Body tag</script>
<script>
</script>
</head>
<body>
<script language="javascript" type="text/javascript" >
document.write("Hello, World!");
</script>
</body>
</html>
And when you are including an external script like jQuery or a custom script, you will use an
tag in the head with a src identifier to specify the file. Where you might reference the file in an onload or some other scripting within the page.
<!DOCTYPE html> <html> <head> <title>Javascript in External file</script> <script language="javascript" type="text/javascript" src="somefile.js" > </script> </head> <body onload="callsomefile();" > </body> </html>
There is also the possibility that someone will have turned off Javascript and this is where the <noscript> tag can be used to either display the site designed with no scripting involved or inform the user that they cannot use the site unless Javascript is enabled.
XML: Characters that require replacement
I was generating some html based e-mails and due to some changes I made in the text, my mail stopped being sent. I found that it was not liking some of the characters that were being placed in my generated emails. I tried some of the standard replacemnt methods, but found that the XML file was the issue. The Greater than(>) and less than (<) and the Amersand(&) and the apostrophe(') and the quote(") all have special meaning to XML and can cause these issues. Once I replaced the following characters in my email variable, my e-mails began to flow again. Here is a table of the characters and their XML representations that can be used for replacement:
| Name | Character | XML replacement |
| Ampersand | & | & |
| Apostrophe | ' | ' |
| Greater Than | >r | > |
| Less than | < | < |
| Quote | " | " |
This is by no means the complete list of replacements. This is only that characters that were needed by the calls to Java Mail that my program was using.
CSS: Background properties
These are the individual background properties in CSS.
background-color background-image background-repeat background-attachement background-position
The background-color property specifies the color of the element. This can be useful to specify if someone has turned images off and you want a non-default view of your content. You can use a hex value (#RRGGBB), a shortcut hex value (#RGB) or a named color (red, green,blue).
background-color: #fffffff;
The background-image specifies an image to place in the background of an element. Remember that the image should be supported by as many browsers as possible. This means using jpeg, pngs or gifs, not tifs or proprietary image formats.
background-image: url(images/someimage.gif)
The background-repeat property specifies how an image should display within an element. You can have it repeat across (repeat-x), repeat downwards (repeat-y) or not repeat (no-repeat).
background-repeat: repeat-x;
The background-attachmemnt attribute is used to specify if an image should scroll (scroll) with the page, be fixed (fixed) to the page or inherit position from a parent element (inherit).
background-attachment: fixed;
The background-position attribute is used to specify the starting position of an image. This can be useful if you are using a sprite to speed up loading times. The background-position attribute can take a Xpx Ypx argument, an X% Y% argument, named arguments(left top, right bottom,…) or inherit from the parent.
background-position: 50% 50%;
Here is an example of the use of these:
body {
background-color: #ffffff;
background-image: url(images/someimage.gif);
background-repeat: no-repeat;
background-attachment: fixed ;
background-position: left top ;
}
You can also use a short cut method to the background property.
.imagebox {
background: #ffffff url(images/someimage.gif) no-repeat fixed right top;
}
HTML: How to use an external StyleSheet
There are two ways to include an external stylesheet. Using a <link> tag in the <head> section of your web page or using the @import tag in a <style> section. The @import tag can also be placed inside a CSS file to include other CSS files.
Example of an externally linked stylesheet named anyname.css
<head> <link rel="stylesheet" type="text/css" name="anyname.css" href="url" media="all"> </head>
The name field is the filename and can be set to any path that is available to your Web Server. The media type can be specified in the link tag.
An example of a @import statement to include a CSS file:
<style>
@import('anyfile.css');
</style>
You can also specify the type of stylesheet with the @import statement:
@import('anyfile') screen;
@import('anyfile') print;
The @import statement is not understood by many older browsers, Netscape 4 ignores them completely and Internet Explorer 4 requires you to use parenthesis, even though they are optional. Luckily, there should be very few people still using these browsers and this is a useful technique to not include features that would not work in those browsers.
The @import directives must be the first items in your CSS. Even comments should not appear before these statements.
Internet Explorer versions 4-7 have the limitation that they do not like specifying the type on the @import line. I have not researched if this is the case with versions 8 and above.
Html: how to use an internal stylesheet
In order to use an internal stylesheet, place the following in the <head> section of your html document.
<style type="text/css" media="all"> <!-- Place your css here --> </style>
The <!– –> (xml style comment) is so that older browsers, though very unlikely, will not get confused by the CSS code within the page.
The media=”all” entry tells the rendering engine which style sheets to use, in this case “all” means to use it for all rendering engines.