Personal home page for a court interpreter

Question

Could someone please review my code? It seems too convoluted. I am just starting to learn to go from blog to hosting.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style id="page-skin-1" type="text/css"><!--
/*
-----------------------------------------------

----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#666">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right">
*/
/* Use this with templates/template-twocol.html */
body {
background:#3e006a;
margin:0;
color:#80ff00;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:#9fff3f;
text-decoration:none;
font-size/* */:/**/small;
font-size: /**/small;
}
a:visited {
color:#9fff3f;
text-decoration:none;
font-size/* */:/**/small;
font-size: /**/small;
}
a:hover {
color:#80FF00;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width: 850px; align: center; border: 1px solid #c1a1ff; margin-left: 45px; margin-right: 0px; margin-top: 10px; margin-bottom: 10px
border:1px solid #80FF00;
align: center
}
#header-inner {
background-position: center;
margin-left: 0px;
margin-right: 0;
}
#header {
margin: 5px;
border: 1px solid #80FF00;
text-align: center;
color:#80FF00;
}
#header h1 {
margin:5px 5px 0;
padding:0px 0px
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 220% Verdana, sans-serif;
}
#header a {
color:#80FF00;
text-decoration:none;
}
#header a:hover {
color:#80FF00;
}
#header .description {
margin:0 5px 5px;
padding:0 0px 0px;
max-width:870px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% Verdana, sans-serif;
color: #ca80ff;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:1px;
text-align:LEFT;
font: normal normal 99% Verdana, sans-serif;
}
#main-wrapper {
width: 950x;
align: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow:
}
#sidebar-wrapper {
width: 0px;
float: RIGHT;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:normal normal 77% Verdana, sans-serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#e5c0ff;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#80FF00;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#80FF00;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:#80ff00;
}
.post p {
margin:0 0. 0em;
line-height:1.6em;
}
.post-footer {
margin: 0em 0;
color:#e5c0ff;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 77% Verdana, sans-serif;
line-height: 1.4em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid #80FF00;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #e5c0ff;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: #FFFFFF;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {align: left
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
padding-left:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: right;
margin-top: 0;
margin-right: 50px;
margin-bottom: 5px;
margin-left: 0;
padding: 10px;
border: 1px solid #80FF00;
}
.profile-data {
align: left
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: <font color="#FFFFFF" size="1">;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
float: right;
margin-left: 100px;
}
.profile-textblock {
align: left
margin-left: 100px;
Font: <font color="#FFFFFF" size="1">
margin-left: 100px;
line-height: 1.6em;
}
.profile-link {   float: right;
margin-left: 100px;
font: <font color="#FFFFFF" size="1">;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer 1{
width:400px;
clear:both;
margin:0 auto;
font: <font color="#E1C4FF" size="1">;
padding-left:2px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
#footer 2 {
width:200px;
clear:both;
margin:0 auto;
font: <font color="#E1C4FF" size="1">;
padding-right:1px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

--></style>
<meta content="revealTrans(Duration=1.0,Transition=3)" http-equiv="Page-Enter" />
<meta content="revealTrans(Duration=2.0,Transition=2)" http-equiv="Page-Exit" />
<meta content="revealTrans(Duration=1.0,Transition=3)" http-equiv="Site-Enter" />
<meta content="revealTrans(Duration=2.0,Transition=2)" http-equiv="Site-Exit" />
<meta content="Spanish interpreter,translator,interpreter,California and  federal court certified interpreter,federal court interpreter, [federal court interpreter] Los Angeles certified interpreter,California court interpreter,California court interpreter,[California court interpreter],Federal spanish interpreter,[Federal spanish interpreter] certified spanish interpreter, [certified spanish interpreter] Federal court certified spanish interpreter,[Federal court certified spanish interpreter] California certified spanish interpreter &quot;California certified spanish interpreter&quot; [California certified spanish interpreter] Los Angeles certified spanish interpreter,[Los Angeles certified spanish interpreter] Los Angeles federal spanish interpreter [Los Angeles federal spanish interpreter],Federal Court Certified Spanish Interpreter, California Federal Court Certified Spanish Interpreter, certified court interpreter, Spanish court interpreter,translating,interpreter,interpreting,interpretation,conference interpreter,conference interpreting,conference interpretation,simultaneous interpreter,simultaneous interpreting,simultaneous interpretation,consecutive interpreter,consecutive interpreting,Oz6F8Tkmp57T7vqDcvEty3FX8z0,consecutive interpretation," name="keywords" />
<meta content="Teri Szucs provides professional Spanish language interpreting and translation services for legal, medical, and other professional needs, including conferences, broadcasting, trials and depositions. Teri Szucs is federally certified and forms part of the select group of Spanish interpreters in Los Angeles who are also certified by the United States." name="description" />
<meta content="index,follow" name="robots" />
<meta content="1 days" name="revisit-after" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=d!=void 0?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var e=new c;a.jstiming={Timer:c,load:e};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));g==null&&a.gtbExternal&&(g=a.gtbExternal.pageT());g==null&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var f=0;if(b.offsetParent){do f+=b.offsetTop;while(b=b.offsetParent)}b=f;b<=750&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
 })();</script>
<meta content="true" name="MSSmartTagsPreventParsing" />
<meta content="Microsoft FrontPage 6.0" name="generator" />
<!--[if IE]>
<script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<script type="text/javascript">(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=d!=void 0?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var e=new c;a.jstiming={Timer:c,load:e};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));g==null&&a.gtbExternal&&(g=a.gtbExternal.pageT());g==null&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var f=0;if(b.offsetParent){do f+=b.offsetTop;while(b=b.offsetParent)}b=f;b<=750&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
 })();</script>
<meta content="true" name="MSSmartTagsPreventParsing" />
<link href="http://federalcourtinterpreter.blogspot.com/favicon.ico" rel="icon" type="image/x-icon" />
<link href="http://federalcourtinterpreter.blogspot.com/" rel="canonical" />
<link rel="alternate" type="application/atom+xml" title="Federal and California Court Certified Spanish Interpreter - Atom" href="http://federalcourtinterpreter.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Federal and California Court Certified Spanish Interpreter - RSS" href="http://federalcourtinterpreter.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Federal and California Court Certified Spanish Interpreter - Atom" href="http://www.blogger.com/feeds/8126847722872063846/posts/default" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<!--[if IE]>
<script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
<title>template</title>
    <link rel="Stylesheet" type="text/css" href="Css/Style.css"
<style type="text/css">
</head>
<body style="text-align: center">

<blockquote>
                    <blockquote>
                        <p>&nbsp;</p>
                        <p></p>
                        <div id="outer-wrapper">
                            <div id="wrap2">
                                <div id="header-wrapper">
                                    <div class="header section" id="header">
                                        <div class="widget Header" id="Header1">
                                            <div id="header-inner">
                                                <div class="titlewrapper">
                                                    <h1 class="title">Federal and California Court 
                            Certified Spanish Interpreter </h1></div>
                                                <div class="descriptionwrapper">
                                                    <p class="description">
                                                    <span>Teri Szucs has made her 
                            love of languages her career. My Interpretations 
                            offers professional interpretation services in 
                            California, out of state and abroad. Teri is 
                            federally certified and forms part of a select group 
                            of interpreters also certified by the United States 
                            Courts.</span></p></div></div></div></div></div>
                                <div id="navibar-wrapper">
                                    <div class="navibar_section section" id="navibar_section">
                                        <span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Georgia, serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">
                                        <div align="center">
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            <p style="margin-top: 0px; margin-bottom: 0px">&nbsp;</p>
                                            </span>
                                            <span class="Apple-style-span" style="color: #80FF00; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">
                                        </div></span>
                                        <div class="widget HTML" id="HTML12">
                                            <div class="widget-content">&nbsp;</div>
                                            <div class="clear"></div>
                                            <span class="widget-item-control">
                                            <p>&nbsp;</p></span>
                                            <div class="clear"></div></div>
                                    </div>
                                    <body>
                                    <style>
<!--
p {
margin:0;
padding:0;
}
-->
</style>
                                    <p></p>
                                    <p></p></div>
                                    <span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Georgia, serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">
                                    <div align="center">
                                        <table border="2" cellpadding="3" cellspacing="3" height="37" id="table9">
                                            <tr>
                                                <td align="center" height="27">
                                                <p align="center" style="margin-top: 0px; margin-bottom: 0px; ">
                                                <font><i>
                                                <font class="Apple-style-span">
                                                <font style="color: rgb(128, 255, 0); font-weight: 700; ">
                                                <u>
                                                <a href="http://myinterpretations.com/">
                                                <font color="#80FF00">Home</font></a></u></font></font></i></font></td>
                                                <td height="27">
                                                <p align="center" style="margin-top: 0px; margin-bottom: 0px; ">&nbsp;</td>
                                                <td height="27" style="color: rgb(102, 255, 153); ">
                                                <p align="center" style="margin-top: 0px; margin-bottom: 0px; ">&nbsp;</td>
                                                <td height="27">
                                                <p style="margin-top: 0px; margin-bottom: 0px; ">
                                                <font><i>
                                                <a class="navitabs" title="TooltipText3" href="new_page_1.htm">
                                                <font style="color: rgb(128, 255, 0); font-weight: 700; ">
                                                Contact Teri</font></a></i></font></td>
                                            </tr>
                                        </table></div></span>
                        </blockquote>


</body>

</html>

VirtuosiMedia · Accepted Answer · 2011-10-02 04:02:42Z

It's a start, but there are a number of things that could be improved:

Your CSS and JavaScript should almost always be in separate files.
Most of your CSS looks okay, but you might find it easier to read if you indented the properties.
The comments between CSS properties like font-size/* */:/**/small; aren't necessary.
Your CSS font declaration, font: <font color="#E1C4FF" size="1">; is incorrect. You should be using color:#E1C4FF; font-size:14px; (or whatever size you need).
You really don't need most of those meta tags.
Using inline CSS like <p style="margin-top: 0px; margin-bottom: 0px"> </p> is almost always discouraged.
Likewise, you shouldn't need all of those paragraph tags to create a break in your layout. Just set the margin or padding of whatever element you need.
I've never seen anything like the commented out variable definitions before, but they aren't necessary. Also, explaining that bordercolor means border color is a little redundant.
You have multiple script tags throughout the header. If you're going to have inline JavaScript, try limiting it to a single tag.
I'm not sure why you have another body tag in the middle of your HTML, but you only need one. You can also get rid of the font tags and just apply a CSS class if it needs to be different.
There is a lot of extra markup throughout, including a lot of empty tags. I haven't loaded this in a browser, but I suspect that you could do with a lot less and still get the same effect.

It's great that you're coming here looking to learn. Code like this will only start you on the wrong path and it will be difficult to maintain in the long run, but kudos for seeking improvement. I honestly think you would benefit from relearning the basics of HTML and CSS to start and then eventually adding some JavaScript. Specifically, look for some articles on CSS layouts and best-practices. Good luck!

Thank you. You answered a question on stackexchange.com, I wanted to thank you. Now I am self-taught and barely at that. I would like to know how much you would charge me for a lesson so I can apply your answer to my work in progress. Between what I know and what I need I would probably need an hour.Thank you. — Mindkind, Commented Oct 2, 2011 at 6:04

Eric Harms · Accepted Answer · 2013-05-09 05:01:21Z

3

It appears most of it is location independent and over scoped. For example:

.post h3 {

}

I would suggest doing this. It follows B.E.M naming conventions and will be easier for you to read.

.post
{

}

.post__title
{

}

Remember, think small. Make everything reusable. Skin it with conjoining classes.

answered May 9, 2013 at 5:01

Eric Harms

2811 silver badge4 bronze badges

Add a comment |

Steve -Cutter- Blades · Accepted Answer · 2011-10-02 12:47:12Z

It looks like your CSS is dynamic, though I can't place the language on sight. Using one codebase for multiple sites is great, but giving a custom look and feel can be a challenge sometimes. In your scenario, every page request has to a) get the style data, b) evaluate the style data, and c) return the style data in the document, adding precious bits to the downstream. That's a lot of unnecessary overhead on both the front and the back end of the request.

What I've done in the past is write the site's style definitions to an external file. They don't change their styles that often, but when they do, just regenerate the stylesheet. At the webroot (or some virtual directory somewhere) I have a folder titled 'sitespecific', with subfolders by site id. Each subfolder has a set structure of subfolder, containing assets specific to that site (images, scripts, css, etc). Then you have a default naming convention for certain files (site.css, header_banner.png, common.js, etc) so that they can easily be referenced:

<link rel="stylesheet" type="text/css" href="/sitespecific/%siteid%/css/site.css" />

It gets easy after that. One of the big advantages here is that the web server can now cache requests to the stylesheet. It's no longer dynamically generated on each request, removing the overhead. And housekeeping becomes a little easier. A site cancels, or doesn't make payments, you archive their sitespecific content to a zip file, off server, for the next six months. Flip a bit flag in the db to 'deactivate' them.

The downside? You'll need a way to regenerate every site's stylesheet on command. If you make a change to core styles, or add some new class that requires definition, you have to have a way to push that change to all or your sites.

Thank you, I am a newby, just learning how to go from blog posts to writing from scratch, in other words, over my head. I have tried to separate the stylesheet and link it using <link... but nothing happens, the new page is white and not styled. Could you dumb down your answer a bit. I have five pages, they all work but they are hardly neat programming. — Mindkind, Commented Oct 2, 2011 at 22:50

Stack Exchange Network

Personal home page for a court interpreter

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged
optimization
beginner
html
css
or ask your own question.

Hot Network Questions

Personal home page for a court interpreter

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged optimizationbeginnerhtmlcss or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
optimization
beginner
html
css
or ask your own question.