website coding
advertisement
Text Color - Embedded Styles:
<html>
<head>
<style type="text/css">
.different-text-color { color: green; }
</style>
</head>
<body>
<p>Normal text color
<span class="different-text-color">different text color</span>
normal text color</p>
</body>
</html>
Text Color - Inline Styles
<p>Normal text color <span style="color:green">different text color</span> normal text
color <span style="background-color:yellow">different background color</span></p>
Background Color
<!-- Codes by Quackit.com -->
<div style="background-color:yellow;width:200px;">
<p>HTML background code is limited, CSS background code is much better!</p>
</div>
<p><a href="http://www.quackit.com/html/codes/color/">HTML color</a></p>
Background Image
<div style="background-image:url(/pix/smile.gif);
background-repeat:repeat;
width:200px;
height:200px;">
<p>HTML background code is limited, CSS background code is much better!</p>
</div>
<p><a style="font-size:10px;"
href="http://www.quackit.com/web_graphics/free_website_graphics/free_website_backg
round_patterns.cfm">Background Patterns</a></p>
Fixed Background Image
<div style="background-image:url(/pix/smile.gif);
background-repeat:repeat;
background-attachment:fixed;
overflow:scroll;
width:200px;
height:100px;">
<p>HTML background code is limited, CSS background code is much better!
example shows how a background image can be set to a fixed position
- even though its containing block scrolls.</p>
</div>
<p><a style="font-size:10px;"
href="http://www.quackit.com/web_graphics/free_website_graphics/free_website_backg
round_patterns.cfm">Website Backgrounds</a></p>
Backgrounds for the Whole Page
<html>
<head>
</head>
<body style="background-color:#eeeeee;">
...content goes here...
</body>
How to embed an audio file
<embed name="lostmojo"
src="/web_design/lostmojo.wav"
width="300"
height="90"
loop="false"
autostart="false" />
How to preload a sound file
<embed name="lostmojo"
src="/web_design/lostmojo.wav"
loop="false"
autostart="false"
hidden="true"
mastersound />
How to link to a music file
Listen to a sample of <a href="/web_design/lostmojo.wav">Lost Mojo</a>
HTML5 <video> Tag
<video src="/video/pass-countdown.ogg" width="300" height="150" controls>
<p>If you are reading this, it is because your browser does not support the 'video'
element. Try using the 'object' element listed further down the page.</p>
</video>
HTML <object> Tag
<object width="425px" height="360px" >
<param name="allowFullScreen" value="true"/>
<param name="wmode" value="transparent"/>
<param name="movie"
value="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t
=1,mt=video,searchID=,primarycolor=,secondarycolor="/>
<embed
src="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,
mt=video,searchID=,primarycolor=,secondarycolor=" width="425" height="360"
allowFullScreen="true" type="application/x-shockwave-flash"
wmode="transparent"/>
</object>
Linking to a video file
<a
href="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825"
>Watch this video</a>
Web Server Support for MIME Type
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Step 2. Making a Base
<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website.net</title>
</head>
<body>
</body>
</html>
Let me break it down for you.
<!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" dir="ltr" lang="en-US">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website.net</title>
</head>
<body>
</body>
</html>
Step 3. CSS, Anyone?
<link type="text/css" href="style.css" rel="stylesheet" />
Step 4. Laying it out there
body {
padding: 0px;
margin: 0px;
background: url('images/background.gif') repeat-x #369abc;
text-align: center;
}
padding: 0px; margin: 0px; background: url('images/background.gif') repeat-x #369abc;
text-align: center;
<div id="menu">
<div class="main">
1. Menu
</div>
</div>
#menu {
}
.main {
}
#menu {
background: #2c3133;
height: 25px;
padding: 20px 10px 10px 10px;
text-align: left;
border-bottom: 5px solid #4b889d;
}
.main {
width: 1000px;
margin: 0px auto;
text-align: left;
}
<div class="main">
<div>
2. Header
</div>
<div id="content1">
3. Content Area 1
</div>
<div id="content2">
4. Content Area 2
</div>
<div id="warning">
&nbsp;
</div>
<div id="leftcontent3">
5. Content Area 3 Left
</div>
<div id="rightcontent3">
5. Content Area 3 Right
</div>
<div id="footertop">
<img src="images/topfooter.gif" alt="" />
</div>
<div id="footer">
6. Footer
</div>
</div>
#content1 {
width: 629px;
background: #8e1743;
float: left;
border-top: 2px solid #a3d1e1;
}
#content2 {
width: 371px;
background: #242729;
float: left;
border-top: 2px solid #a3d1e1;
}
#warning {
background: url('images/warning.gif') repeat-x;
border-bottom: 1px solid #c7be84;
height: 60px;
}
#leftcontent3 {
float: left;
width: 530px;
padding: 10px;
background: url('images/bottomleft.gif') bottom left no-repeat
#ffffff;
}
#rightcontent3 {
float: left;
width: 430px;
padding: 10px;
background: url('images/bottomright.gif') bottom right norepeat #ffffff;
}
#footertop {
margin: 50px 0px 0px 0px;
}
#footer {
background: url('images/bottomfooter.gif') bottom no-repeat
#1d1e19;
padding: 0px 10px 10px 10px;
}
Step 5. Add a bit more detail
font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold; font-size: 14px;
background: url('images/menu.gif') repeat-x #2c3133;
<span class="selected">home</span> &emsp; &emsp; &emsp; floppy disks &emsp;
&emsp; &emsp; history &emsp; &emsp; &emsp; services &emsp; &emsp; &emsp;
contact us
.selected {
background: center bottom url('images/selected.gif') no-repeat;
display: block;
float: left;
height: 39px;
}
<img src="images/logo.gif" alt="" />
<img src="images/purple.gif" alt="" />
height: 198px; font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold; color: #fff;
float: right; width: 1000px;
<span class="blacksel">The Purpose</span> <span class="nonselb">How We Do
It</span> <span class="nonselb">We Love You</span>
.blacksel {
background: url('images/blacksel.gif') repeat-x;
display: block;
padding: 23px;
height: 22px;
}
.nonselb {
display: block;
padding: 23px;
}
#warning {
background: url('images/warning.gif') repeat-x;
border-bottom: 1px solid #c7be84;
float: right;
width: 960px;
height: 20px;
padding: 20px;
color: #5d5520;
font-family: Georgia, "Times New Roman", Times, serif;
}
color: #ffffff; font-family: Tahoma, Geneva, sans-serif; font-size: 14px;
&emsp; home &emsp; &emsp; floppy disks &emsp; &emsp; API &emsp; &emsp;
contact &emsp; &emsp; about &emsp; &emsp; business &emsp; &emsp; terms &emsp;
&emsp; privacy &emsp; &emsp; blog &emsp; &emsp; status &emsp; &emsp; twitter
&emsp; &emsp; more &emsp; &emsp;
Styling the Search
<div class="searchbar"> <div class="floatl"> <img src="images/leftsearch.gif" alt="" />
</div> <div class="floatls"> <form action=""> <input type="text" value="Search for
Something here.." class="search" /> </form> </div> <div class="floatl"> <img
src="images/rightsearch.gif" alt="" /> </div> </div>
.searchbar {
float: right;
}
.search {
background: url('images/searchbg.gif') repeat-x;
width: 200px;
border: 0px;
height: 16px;
padding: 10px;
position: relative;
bottom: 10px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #858585;
}
.floatl {
float: left;
position: relative;
bottom: 10px;
}
.floatls {
float: left;
}
The final code
<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website.net</title>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="menu">
<div class="main">
<span class="selected">home</span> &emsp; &emsp; &emsp;
floppy disks &emsp; &emsp; &emsp;
history &emsp; &emsp; &emsp;
services &emsp; &emsp; &emsp;
contact us &emsp; &emsp; &emsp;
<div class="searchbar">
<div class="floatl">
<img src="images/leftsearch.gif" alt="" />
</div>
<div class="floatls">
<form action="" method="get">
<input type="text" value="Search for Something
here.." class="search" />
</form>
</div>
<div class="floatl">
<img src="images/rightsearch.gif" alt="" />
</div>
</div>
</div>
</div>
<div class="main">
<div>
<img src="images/logo.gif" alt="" />
</div>
<div id="content1">
<img src="images/purple.gif" alt="" />
</div>
<div id="content2">
<span class="blacksel">The Purpose</span>
<span class="nonselb">How We Do It</span>
<span class="nonselb">We Love You</span>
</div>
<div id="warning">
Warning
</div>
<div id="leftcontent3">
5. Content Area 3 Left
</div>
<div id="rightcontent3">
5. Content Area 3 Right
</div>
<div id="footertop">
<img src="images/topfooter.gif" alt="" />
</div>
<div id="footer">
&emsp; home &emsp; &emsp;
floppy disks &emsp; &emsp;
API &emsp; &emsp;
contact &emsp; &emsp;
about &emsp; &emsp;
business &emsp; &emsp;
terms &emsp; &emsp;
privacy &emsp; &emsp;
blog &emsp; &emsp;
status &emsp; &emsp;
twitter &emsp; &emsp;
more &emsp; &emsp;
</div>
</div>
</body>
</html>
style.css
body {
padding: 0px;
margin: 0px;
background: url('images/background.gif') repeat-x #369abc;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
}
#menu {
background: url('images/menu.gif') repeat-x #2c3133;
height: 25px;
padding: 20px 10px 10px 10px;
text-align: left;
border-bottom: 5px solid #4b889d;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-weight: bold;
font-size: 14px;
}
.main {
width: 1000px;
margin: 0px auto;
text-align: left;
}
#content1 {
width: 629px;
background: #8e1743;
float: left;
border-top: 2px solid #a3d1e1;
}
#content2 {
width: 371px;
background: url('images/blackbg.gif') repeat-x #2e3335;
float: left;
border-top: 2px solid #a3d1e1;
height: 198px;
font-size: 16px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #fff;
}
#warning {
background: url('images/warning.gif') repeat-x;
border-bottom: 1px solid #c7be84;
float: right;
width: 960px;
height: 20px;
padding: 20px;
color: #5d5520;
font-family: Georgia, "Times New Roman", Times, serif;
}
#leftcontent3 {
float: left;
width: 530px;
padding: 10px;
background: url('images/bottomleft.gif') bottom left no-repeat
#ffffff;
}
#rightcontent3 {
float: left;
width: 430px;
padding: 10px;
background: #fff;
background: url('images/bottomright.gif') bottom right norepeat #ffffff;
}
#footertop {
margin: 50px 0px 0px 0px;
}
#footer {
background: url('images/bottomfooter.gif') bottom no-repeat
#1d1e19;
padding: 0px 10px 10px 10px;
color: #ffffff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
}
.selected {
background: center bottom url('images/selected.gif') no-repeat;
display: block;
float: left;
height: 39px;
}
.blacksel {
background: url('images/blacksel.gif') repeat-x;
display: block;
padding: 23px;
height: 22px;
}
.nonselb {
display: block;
padding: 23px;
}
.searchbar {
float: right;
}
.search {
background: url('images/searchbg.gif') repeat-x;
width: 200px;
border: 0px;
height: 16px;
padding: 10px;
position: relative;
bottom: 10px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #858585;
}
.floatl {
float: left;
position: relative;
bottom: 10px;
}
.floatls {
float: left;
}
The web page I got all of this off
http://www.quackit.com/html/codes/html_video_codes.cfm
