website coding by ashrafp

VIEWS: 4 PAGES: 11

									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 no-
repeat #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 no-
repeat #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

								
To top