Archive for November, 2009
Dark Code View for Dreamweaver
Nov 28th
If you stare at dreamweaver for hours upon hours each day, as I do, the default color scheme with the white background can get hard on the eyes. In the past I tried change the background color to black to give my eyes a break, but the code colors were then hard to see so I ended up switching back.
That was until last weekend when I came across this dark code view for Dreamweaver. I’ve now installed it on three of my computers and I am really liking it. I recommend checking it out.
Advanced CSS – Part #1
Nov 27th
Now that we have all of the Basics of CSS down pat, we can move onto more advanced methods of writing and implementing style sheets!
Today we’re going to talk about grouping and nesting selectors and dimensions.
Grouping and Nesting
You might find yourself with selectors having the same values inside of your internal or external style sheet. Maybe it is about a specific link within a certain area of your web site, heading elements, or just about anything else you would want to group.
Grouping
Grouping allows us to apply multiple properties and values to multiple selectors but in a condensed fashion.
Let us assume we have some code:
h1 {color:#ff9300;} h3 {color:#ff9300;} span {color:#ff9300;} p {color:#ff9300;}
So we have everything within the h1, h3, span, and p elements is the color #ff9300. Since all of these elements have a common property we can group these elements like this:
h1, h3, span, p {color:#ff9300;}
This space saver will have the same effect but on multiple selectors. The single color property will be applied to all of these html elements. Note: grouping elements will apply all properties and values to the grouped elements. Example:
html, body, p, span, a:link, { margin: 0; padding: 0; font:verdana, "Times New Roman", sans serif; color:#ff9300; }
This means margin:0; padding:0; font:verdana, “Times New Roman”, sans serif; and color#ff9300; will be applied to all of those selectors.
Nesting
Nesting will allow you to apply styles to a selector within a selector. Consider the following:
#fancy p { background-color:#000; font-weight:700; text-decoration:none; color:#ff9300; }
So we have our ID selector with an additional selector after it. So if we have something with the ID selector such as:
<div id="fancy"> <p>Some fancy text here</p> </div>
It is saying everything within the fancy ID that is inside of any p element will have all of those properties and values. We have used this type of nesting in previous CSS tutorials.
Dimensions
We covered the width and height properties in the box model tutorial. We going to introduce a few new properties that we can use to further control how tall/wide an element is.
The Height property will set the height of the element and the Width property will set the width of the element. Consider the following code:
h2, h3 { height:100px; width:300px; }
This will set all h2 and/or h3 elements to w height of 100px by 300px regardless of how much space it is taking up on the page. These two elements will always be this height. What if we wanted those two elements to be within a certain area of space?
Properties
- width – defines width (will always be)
- height – defines height (will always be)
- max-width – defines max width (cannot be bigger than)
- min-width – defines min width (will not be smaller than)
- max-height – defines max height (cannot be taller than)
- min-height – defines min height (will not be shorter than)
The last four properties are new to us. So let us improve on the previous code!
h2, h3 { max-height:100px; max-width:300px; }
Given the code above, this will set the h2 and h3 elements to be no larger than 100px by 300px but can also be 0px by 0px if the element is empty (has no content).
Although it seems like this property would be somewhat useless, there has been situation where something a web page wasn’t working the way I wanted it to. Perhaps the top navigation menu was wrapping when I resized the browser windows and I wanted the entire page to keep its consistency. I would use a max-width and min-width property to define the space, lo and behold it worked!
For a very comprehensive overview of the above tutorial, please download advanced-part1.zip (66.7KB)
Setting up your cPanel email in gmail
Nov 26th
cPanel accounts come with webmail clients like RoundCube, Horde, and Squirrel Mail. But you also have another free option, gmail. It takes a bit of setting up, but it’s well worth it for all the great features that gmail provides. Here are the steps to get it all set up:
- Create a Gmail Account. If you don’t already have a google/gmail account, create one here. Your gmail account name does not matter in this case. It will only be used by you, for logging in. The people to whom you send emails to will only see your cPanel address.
- Auto forward your emails to Gmail. Login to your cPanel email account at www.yoursite.com/webmail. Go to “Email Forwarding” and click “Add Forwarder”. You will need to forward your emails to your gmail address.
- Set up sending from your cPanel Address. Now login to your gmail account. Click “Settings” in the upper right hand corner. Then go the “Accounts and Settings” tab. Next to where it says “Send Mail as” click the “Send mail from another address” button.
- A new window will pop up. Enter your name and your cPanel email address. Go to the next step.
- Select “Send through Gmail (easier to set up).” Go to the next step.
- Click the “Send Verification” button.
- Go back to your gmail inbox. You will have a new email from gmail. Open the email and click the link.
- Head back to gmail and again click “Settings” in the upper right hand corner. Then go the “Accounts and Settings” tab. You should now see your cPanel email address listed. Next to your newly added email address click the “Make Default” button.
You’re done! Now you can test sending emails to your cPanel email address. If everything was setup correctly, they will immediately show up in your gmail account. When you click reply it will automatically reply from your cPanel address. ENJOY!
Basics of CSS Part – #8
Nov 23rd
Today we’re going to continue our journey into the Box Model. If you aren’t familiar with this box model, you should read about it!
Padding
Padding — defines the space between the element border and element content and will be the same color as the background color of the element.
If we recall that in the box model we have margins > borders > padding > content so Padding is tertiary. Let’s assume you have an HTML paragraph element:
<!--No Padding--> <p style="background-color:#fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <!--With padding--> <p style="background-color:#fff; padding:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
So what is different from the first line and the second line? The first line is without padding so the white background only fills to the end of the text instead the width of the box. The second line, however, spreads across the entire width of the box and it is a padding of 10px on all sides.
Padding works in very similar ways as the margin property except the margins are always invisible and the padding is based on the background of the element you are adding padding to.
Properties
Like margins, there are five possible properties we can use. They are the following:
- padding-bottom
- padding-left
- padding-top
- padding-right
- padding
The first four properties define individual sides for padding. For example, if you wanted to adjust the bottom and right padding for a certain element you could use the following:
p.element { padding-bottom:3px; padding-top:7px; }
This will change the bottom bottom padding of the element by 3px and the top padding of the element by 7px. Example:
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Remember that padding is basically an extension of the background of an element and you also need to take into account any other elements (whether above, below, left or right) that might get in the way of this padding. In theory, you could make an entire HTML and CSS website using only margins, borders, padding, and content.
Values
- em, px, pt – numeric values e.g. 1em, 15px, 2pt
- percent % – percent of the containing element e.g. 10% of 500px is 50px.
span.padding { padding-top:2em; padding-bottom:10px; padding-right:16%; }
All of the above are valid ways to define padding of our span element and class of padding.
Padding – All Inclusive
The all inclusive padding property works the same exact way as the all inclusive margin property. This singular padding property will define padding how ever we need it to using one property instead of writing out each side.
padding:15px 30px 45px 60px;
- top padding – 15px
- right padding – 30px
- bottom padding – 45px
- left padding – 60px
This example has four values for the padding property. The values start with padding-top and then go clockwise to padding-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it’s like looking at the clock at every 90° angle you get top, right, bottom, left.
padding:15px 30px 45px;
- top padding is 15px
- right and left padding is 30px
- bottom padding is 45px
This might come as a surprise to us because you would think they would group the Top and [bottom and left] segments separately, however; we can see in this example that the padding-top is 15px and the padding-bottom is 45px. The left and right padding is grouped together because they just belong together. If someone asks, “when I say a word you think of something that is opposite to that” and they ask, “up” you’ll probably say “down” off the bat.
padding:15px 30px;
- top and bottom padding 15px
- right and left padding 30px
This might be more evident since there are only two values here. Naturally, we’d think Top and [right and left] so the top and bottom padding will have a value of 15px whereas the right and left padding will have a value of 30px.
padding:15px;
- top, right, bottom, and left padding is 15px
One single value for the padding property will set all padding to that value, in our case 15px.
Web Design Tip #3 – Make your website lean and clean.
Nov 21st
3.1 Optimize the page loading time
Images can really make a website look nice when used correctly, but nothing is more annoying than waiting for images to load when they are a way larger size than they need to be. The html width and height attributes let you re-size images, but the user still has to download the original image no matter how you re-sized it with the width and height attributes. Instead re-size your images to the correct size before embedding them into your webpage.
3.2 Don’t make an entire site using flash or java.
Some people think it’s okay to make their entire website just using flash. Flash can be a great thing browser embedded videos or games, but when people start making entire websites using flash, it just becomes annoying. You have to wait for the flash application to download and load before you can use it. And then once you finally get into it, you have all these extravagant animations that may look nice, but can just get annoying when you are trying to find what you’re looking for. Also, flash is unsupported on many mobile browsers like safari on the iPhone/iPod touch, so these users won’t be able to see your website at all.
Basics of CSS – Part #7
Nov 16th
Today we’re going to continue our adventure about the box model. We covered the box model and the margin property but we still need to cover padding and border properties!
If we recall that margin > border > padding > content… Margins are always invisible, Borders can be any color we’d like them to be, and padding will be the same color as the background-color of the element.
Border Property
The border property defines the border around an element. Using this border property we can have a border around anything we’d like. We can have the following properties:
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border – all-inclusive
Consider the following code:
p.top-border { border-top-color:#ff9300; border-top-style:solid; border-top-width:1px; }
So this would only apply to p elements with the class attribute of “top-border”, we know that much! This particular element would have a top border of #ff9300 (Atomicpages orange!), a border-style of solid (there are no breaks or spaces), and a border width of 1px since we want it to be thin.
This is how it would look like if we tried this. The more we type the longer the border becomes. It almost appears as if the text above is really being underlined but this is the border-top property.
For every border property there exists a short-hand way of adding styles to our borders. We can very well type border-top-width, border-top-style, border-top-color every instance we want to use this. We know exactly what the border is doing without having to guess or anything. This can take time, however. We can shorten the example above by doing the following:
p.border-ex {border-top:width style color;} /*Syntax*/ p.top-border {border-top:1px solid #ff9300;}
This is far more efficient and a much faster way of adding border styles to our elements! It is more confusing and might take some time to get used to. If you’re comfortable using the long-hand method then stick to what you’re comfortable with. If you prefer short-hand methods then use those, bear in mind that the short-hand method does exist and it readily available.
border-width
The first value/property we should define in our border should be the width of our border. There are built in values that we can use or we can define our own. Here are the values we can have:
- thin — approx. 1px
- medium — default value
- thick
- px, em, pt, etc
This is a thin border, This is a medium border, This is a thick border,
This is a border with 15px as the value..
Why we would want a border with 15px is beyond me, but for the sake of this example it is fine.
border-style
There are a lot of styles for borders, here are the styles you can have:
| Values | Description |
|---|---|
| none | Specifies no border |
| hidden | Specifies a hidden border |
| solid | A solid border |
| inset | 3D inset border, effects depends on border-color value |
| outset | 3D outset border, effects depends on border-color value |
| dotted | a dotted border |
| dashed | a dashed border |
| groove | 3D groove border, effects depends on border-color value |
| double | a double border |
That is a lot of styles indeed! We won’t go over every single style in this tutorial. I will, however, add a downloadable that contains all of these styles! Note: the 3D style borders, it depends all on the color you pick. Some colors will look nice and some color will not look nice at all!
border-color
The border color property works the same as the background-color property. You can choose any color you would like your border to be. You may use built in colors (e.g. reg, green, blue), HTML Color Codes, or RGB Values to use your colors.
border-color:red; /*Color value*/ border-color:#ff9300; /*Hex Value*/ border-color:rgb(51, 255, 0); /*Decimal Value*/
All-Inclusive
The all-inclusive border property works the same as most other all-inclusive properties. It saves time but makes the code a little more confusing. The syntax you should use is like the following:
border:width style color; border:1px solid #ff9300;
If you want to see all of the examples and additional explanations download border.zip (3.24KB) for that additional info!
The Basics of PHP – Part 3
Nov 14th
Welcome to part 3 of these basics of PHP tutorials. In this part, we are going to learn how to make if statements.
The syntax for an if statement look like this:
1 2 3 | if (condition) { //Run this code if condition is true } |
Where it says “condition” we insert a Boolean expression, an expression that either has a value of true or false. If the condition is true, the code inside the brackets will be executed. Here’s an example:
1 2 3 | if (3 > 2) { //This code would run because 3 is greater than 2 } |
The Boolean expression 3>2 would return true, because 3 is greater than 2. Since it is true, the code inside the brackets would be executed. After the code in the brackets is executed, it would continue executing any code after the closing bracket.
Now consider this:
1 2 3 | if (2 > 3) { //This code would not run because 2 is not greater than 3 } |
The Boolean expression 2>3 would return false, because 2 is not greater than 3. Since it is false, the code inside the brackets would be skipped and any code after the ending bracket would continue on being executed.
Of course there are many other comparison operators besides > that you can use as well.
- > returns true if the value to the left is greater than the value to the right.
- >= returns true if the value to the left is greater than or equal to the value to the right
- < returns true if the value to the left is less than the value to the right.
- <= returns true if the value to the left if less than or equal to the value to the right.
- == returns true if the value to the left is equal to the value to the right.
- != returns true if the value to the left is not equal to the value to the right.
We can use variables for comparison as well.
1 2 3 | if ($value == $value2) { print "$value equals $value2"; } |
You can add another block of code called “else” that executes if the condition is not true.
1 2 3 4 5 | if ($value == $value2) { print "$value equals $value2"; } else { print "$value does not equal $value2"; } |
You can even add more blocks of code that execute if the initial condition statement is false, but another condition is true:
1 2 3 4 5 6 7 | if ($value == $value2) { print "$value equals $value2"; } elseif ($value < $value2) { print "$value is less than $value2"; } else { print "$value is greater than $value2"; } |
You can also combine multiple conditional statements into one.
1 2 3 4 5 | if ($value == $value2 && $value2 == $value3) { print "$value, $value2, and $value3 are all equal" } elseif ($value == $value2 || $value2 == $value3) { print "$value is equal to $value2 and/or $value2 is equal to $value3" } |
A statement consisting of two statements joined by && will only return true if both statements are true.
A statement consisting of two statements joined by || will return true if either of one of the two statement is true, or if both are true.
Basics of CSS – Part #6
Nov 14th
Today we’re going to talk about the margin property in CSS! You should familiarize yourself with the box model if you aren’t already.
Margin Property
As we see in the box model, the margins are always transparent and always surround the padding which surrounds the border which surrounds the content — margin > border > padding > content.
Properties
There are five possible properties you can use with margin:
- margin-left
- margin-right
- margin-top
- margin-bottom
- margin
The first four options allow you to have different values for any side with the code being clear as day. Consider the following:
p.indent { color:#ff9300; border:1px solid #fff; margin-left:25px; margin-top:10px; margin-bottom:30px; margin-right:15px; }
We have a class called “indent” which is turning the text the color #ff9300 (AtomicPages Orange), this element will also have a border that is 1px in width, solid, and pure white in color. This will also have a left margin of 25px, a top margin of 10px, a bottom margin of 30px, and a right margin of 15px. That means the p element will be confided to those specifications. These values can be virtually anything you would like them to be.
Values
As with most if not all CSS properties. The margin property can contain multiple values.
- auto — the browser determines the margin. Different browsers means different results!
- em, px, pt
- %
In the above code example we used pixels as the unit. You can use em, px, pt, or any other unit you really want to use. The most common units are px and em.
Margin — All Inclusive
Using the single margin property will allow you to define all values of a margin that you want instead of typing out margin-top, margin-left, etc. This all inclusive property is pretty nifty if you’re working and you’re on a roll and whatnot. It can contain one to four values.
margin:15px 30px 45px 60px;
- top margin – 15px
- right margin – 30px
- bottom margin – 45px
- left margin – 60px
This example has four values for the margin property. The values start with margin-top and then go clockwise to margin-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it’s like looking at the clock at every 90° angle you get top, right, bottom, left.
margin:15px 30px 45px;
- top margin 15px
- right and left margin 30px
- bottom margin 45px
This might come as a surprise to us because you would think they would group the Top and [bottom and left] segments separately, however; we can see in this example that the margin-top is 15px and the margin-bottom is 45px. The left and right margins are grouped together because they just belong together. If someone asks, “when I say a word you think of something that is opposite to that” and they ask, “up” you’ll probably say “down” off the bat.
margin:15px 30px;
- top and bottom margins 15px
- right and left margins 30px
This might be more evident since there are only two values here. Naturally, we’d think Top and [right and left] so the top and bottom margins will have a value of 15px whereas the right and left margins will have a value of 30px.
margin:15px;
- top, right, bottom, and left margins 15px
One single value for the margin property will set all margins to that value, in our case 15px. If you wish to see this property and the values in action download margins.zip (3.11KB).
Basics of XHTML Part – #3
Nov 11th
As with the CSS tutorials, the XHTML tutorials are cumulative and dependent on each other. That being said, if you didn’t read the Basics of XHTML Part 2 you may read it now or read on. Something interesting happens here, however. This is where we begin learning specific attributes, other neat HTML elements, and including styles into our HTML.
Styles
We won’t get into great detail about the style attribute but we will cover the basics! Recall that attributes is additional information about an HTML element. This style attribute is one that we can place on ANY HTML element that you know!
content <a style="text-decoration:underline;" href="url">Click here</a> <img style="height: 15px; width: 15px;" src="image.jpg" alt="img" /> <p style="margin-left:25px;">content</p>
So we have a wide variety of elements and each of them has the style attribute which is defining additional information for that particular instance in which it is used. If you know a little about External and/or Internal Style Sheets, this style attribute (commonly referred to as Inline CSS) has priority over External and Internal Style Sheets. So if you have a style that defines the width and height of an image and you want to override that you would use this style attribute. Consider the following code:
<html> <head> <style type="text/css"> .img { border:none; width:100px; height:25px; } </style> </head> <body> <div class="img"> <!--This will NOT work--> <img src="image url" alt="img" width="50" height="25" /> <!--This will work--> <img src="image url" style="width: 50px;" alt="img" /></div> </body>
The first question you might as is why didn’t we not define the height inside of the style attribute? The answer is simple, it is redundant! Since we want to keep the height 25px (at least for this example) is it perfectly legal to leave it out since the height is inherited from the class=”img”.
If you wish to read more about Inline CSS then Click here. If you wish to read more about CSS then read about it here
Hyperlinks and Anchors
I believe we talked about hyperlinks in the Basics of XHTML and we covered atributes in the Basics of XHTML Part 2 so we know that..
<!--Syntax for hyperlink--> <a href="url">click here</a> <a href="http://www.atomicpages.net">Atomicpages.net</a>
href=”url” and href=”http://www.atomicpages.net/” is an attribute that is telling the browser where this link is. However, there are some conditions we need to be aware of…
- If you want to link to a website other than your own you MUST include a protocol such as http:// and then the address of the website.
- If you want to link inside of your website you may use relative links or absolute links.
As minimal as these two things that we need to be aware of are.. the http:// is absolutely necessary in the attribute for hyperlinks to work properly. here for no http:// is a link neglecting the http://. If you click on that link it will take you to the 404 Page Not Found Page.
Target Attribute
The only target attribute we really need to associate ourselves with is target=”_blank”.
<a href="url" target="_blank">link</a> <a href="http://www.atomicpages.net/" target="_blank">AtomicPages Hosting</a>
target=”_blank” will open that link in a new window or tab depending on your browser settings. Usually there are some rules that I follow.. If I am referring to a link within the same website in which I am writing on, I’ll do a standard link. If I am referring to a link outside of a website I am writing on I usually use the target=”_blank” attribute so it opens and the user can still easily access the content with the hyperlink. It’s all personal preference, however; not all people are thrilled by the idea of a new window or tab popping up and some people are irked when it doesn’t.
Name Attribute
Have you ever visited a website like wikipedia and click in an article and it moves you to a certain part of the page? If not then visit this wiki article on the thrilling history of HTML and in the contents click on a link. You’ll notice the url changed! Example:
<a href="http://en.wikipedia.org/wiki/HTML/">Wiki</a> <!--to--> <a href="http://en.wikipedia.org/wiki/HTML#HTML_version_timeline/">Wiki</a>
How in the world did they do that?! It is very simple actually! By using the name attribute of course! Consider the following:
<!--This labels the anchor--> <a name="label">content</a> <!--This calls the anchor--> <a href="#label">content</a>
So what’s exactly happening here? Isn’t there a style that says everything within a tags will be orange and underlined? Why isn’t there anything that is underlined and orange at the top except that one link to the Basics of XHTML Part 2? Is it there?
No! Since I wanted to avoid any changed text and I wanted to avoid using inline css (because it’s more work) I did the following:
<!--No content--> <a name="top"></a> <!--And to link the name attribute--> <a href="#top">Back to Top</a>
Relative Links
Relative Links are links to files on your server. For example:
<a href="hosting.php">Web Hosting</a> <a href="../index.php">Home</a>
This is perfectly legal to do and often is much better than using an absolute link. As long as the file that is referencing the file or address is within the same directory on your server it will still link properly. If you wish to go to one directory above to “link” a file then you use ../filename.
Absolute Links
Absolute Links are usually links to files beyond your server such as links to other websites. There are times when using an absolute link is necessary like to define an https:// protocol or maybe a address to a subdomain of your website or simply to another page that you know won’t move.
Basics of XHTML – Part #2
Nov 9th
As we covered in the Basics of XHTML, we have basics rules that we need to follow in order to correctly write XHTML and get the results we want.
<start tag>content</end tag>
We already learned some very basics XHTML elements that are very useful such as adding images and links to web pages.
<img src="image.gif" width=125" height="125" alt="image" /> <a href="index.html">Home</a>
HTML Attributes
- HTML Elements can have Attributes
- Attributes provide more info about the element
- Attributes are always defined in the start tag
The general syntax for these attributes is as follows:
<start tag attribute="value">content</ending tag> <a href="http://www.atomicpages.net">AtomicPages</a>
Given our basics syntax rules for attributes, we can see that the actual attribute is not inside double quotes but is within the starting tag. The value, however, is inside of double quotes. Please see Using Good Practices when Writing XHTML for additional details and tips for writing proper XHTML.
Common Attributes
Here is a list of some very common attributes.
<start tag class="class_name">content</end tag> <start tag style="inline css">content</end tag> <start tag id="id_name">content</end tag>
You can refer to ID v. Class and Basics for CSS for more details.
HTML Formatting
Whether we’re aware of it or not, there are ways to use HTML elements instead of using inline, ID, or class attributes of CSS. Basically, for simple formatting purposes, strong, emphasized , underlined, Big, etc.. There are ways to achieve these results without using Style Sheets. You can actually do some pretty crazy things with some seemingly arbitrary HTML elements.
Text Formatting
| Tags | Description |
|---|---|
| <b> | Bold Text |
| <strong> | Strong Text |
| <i> | Italic Text |
| <em> | Emphasized Text |
| <u> | Underlined Text |
| <s> | Deprecated, strikethrough text. Use <del>. |
| <strike> | Deprecated, strikethrough text. Use <del>. |
| <del> | Deleted Text |
| <ins> | Inserted Text |
| <sub> | Subscript Text |
| <sup> | Superscript Text |
| <big> | Big Text |
| <small> | Small Text |
So what do all of these insane tags do? Well, let’s start form the top!
- Bold and Strong are basically the same thing.
- Italic and Emphasized basically do the same thing.
- Underlines Text without the use of styles.
StrikeandStrikethoughdo the same thing but are depreciated1Deleted Textis the preferred way of creating “strikethough” text.- Inserted Text is an alternative way of creating underlined text.
- Subscript is subscript text probably used for mathematical notations.
- Superscript is superscript text probably used for mathematical notations.
- Big is a way of creating big text without styles.
- Small is a way of creating small text without styles.
Computer Text
| Tags | Description |
|---|---|
| <code> | Computer Code Text |
| <pre> | Preformatted Text |
| <samp> | Sample Computer Code |
| <tt> | Teletype Text |
| <kbd> | Keyboard Text |
| <var> | Defines a Variable |
- Basically, Code, Pre, Teletype, Sample Computer Text, and Keyboard Text all do the same exact thing: turn text monotype. The only difference these different elements would make is if you want to apply individual styles to them and use them in different ways.
- Variables is the only fancy element that does not make the text monotype but actually emphasized. This too can be made into almost anything we’d want via styles.
Quotes, Citations, etc
| Tags | Description |
|---|---|
| <blockquote> | Long Quotations |
| <q> | Short Quotations |
| <cite> | Cites something |
| <address> | Address Element |
| <abbr> | Abbreviation Element |
| <dfn> | Definition Term |
| <bdo> | Text Direction |
-
Generally you’ll see blockquote on forums or blogs somewhere, you’ll click “quote” and then a new window will pop up and you’ll see blockquote in HTML of BB Code form (usually). As you can see, using this blockquote element, our text is the same, however, the background is different to signify this long quote.
The “q” element is a short quote.
Notice how the “q” element is simply surrounded by double quotes to signify it’s existence as a short quote.- Cited text it different to let users know that whatever you are referring to is a cited source. You may want to utilize the “sub” and/or “sup” elements when using the “cite” element so you can create footnotes at the bottom of the web page.
-
The address element if for placing an address in
. The text is intentionally different for the specific use of an address. You can alter the styles of this element via CSS as usual.
- A definition term is more like a type of list. We will be covering this later on.
- This “bdo” element is basically useless unless you want to confuse your visitors.. This text will read from left to right. This text well read from right to left.(This text will read from right to left — it’s backwards!)
1. Depreciated — These are outdated HTML elements that have been replaced by more conventional, functional, and flexible alternatives. Though some browsers may support these elements, their continued support cannot be assumed; eventually these tags will become obsolete and browsers will not support their functionality.
A List of Depreciated Elements and their Alternatives
| Tags | Description | Replacement |
|---|---|---|
| <applet> | Inserts Applet | <object> |
| <basefont /> | Sets defaul font color and size | font style sheets |
| <center> | Centered Text | text-align:center; |
| <dir> | Directory List | <ul> |
| <font> | Font, color, and size of text | font style sheets |
| <isindex> | Adds search field | <form> |
| <menu> | Menu List | <ul> |
| <s> | Strike through text | <del> or style sheets |
| <strike> | Strike through text | <del> or style sheets |
| <u> | Underlined text | text-decoration:unerline; |
| <xmp> | Preformatted Text | <pre> |
