Header question...

Discussion in 'HTML & Website Design' started by tptnyc, Feb 24, 2008.

  1. #1
    From Newbie: How to get Header (purfumania..com) entered in this document. It only says Title and Title means name of one page document only. What coding and where to put and make Header then (purfumania..com)?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE>Quality Perfumes</TITLE>

    </HEAD>
    <BODY>
    We offer high quality perfumes at cheap prices..
    </BODY>
    </HTML>
     
    tptnyc, Feb 24, 2008 IP
  2. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #2
    are you using css if so:

    the css

    #header {
    background: url(yourimagefolder/yourimage.jpg) no-repeat;
    width: 770px;
    height: 250px;
    margin: 0 auto; <-this will center your header
    }

    the html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE>Quality Perfumes</TITLE>

    </HEAD>
    <BODY>
    <div id="header">
    </div>
    We offer high quality perfumes at cheap prices..
    </BODY>
    </HTML>
     
    HDaddy, Feb 24, 2008 IP
  3. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    #header {
    background: url(yourimagefolder/yourimage.jpg) no-repeat;
    width: 770px;
    height: 250px;
    margin: 0 auto; <-this will center your header
    }
    Thanks HDaddy.
    Yes, I am using css. At this point of time, I only want to use url in the header with no image, so what should be the coding for purfumia.com ?
     
    tptnyc, Feb 24, 2008 IP
  4. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #4
    do you mean...

    </HEAD>
    <BODY>
    <div id="header">
    <a href="index.html(or whatever extension you are using">Purfumia.com</a>
    </div>
    We offer high quality perfumes at cheap prices..
    </BODY>
    </HTML>

    But if you don´t apply styles for the header anchor tag, the font will be default font and size.
     
    HDaddy, Feb 24, 2008 IP
  5. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    HDADDY: Thanks again, two questions here:

    How to add styles then and secondly, although the Header is showing fine now without the image.jgg but do you think the header coding should come right up on the top?

    Here is what i have it now:

    <div id="header">
    <a href="index.html"><h1>Purfumia.com</a></h1>
    </div>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE>Quality Perfumes</TITLE>

    </HEAD>
    <BODY>
    We offer high quality perfumes at cheap prices..
    </BODY>
    </HTML>
     
    tptnyc, Feb 24, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    ^ never. Nothing should ever ever ever come before that !DOCTYPE declaration, not even a space!

    That part tells User Agents (like web browsers, screen readers, mobile phones) what this document IS.

    The stuff in the <head> give additional information.

    The only stuff that actually shows on the screen of the User Agent is between the <body> tags. Thus, for your header to be at the top of the page, it is perfect to do it Hdaddy's way:
    <doctype and head stuff...>
    <body>
    <div id="header">... etc

    Robots like teh googlies will look at the stuff in the <head> part, including your TITLE tags as well as the meta tag (if you have it) called "description" where you could put a short sentence describing this particular page.

    <meta name="description" content="this is where you buy perfumy thingies">
    (put whatever text makes sense to you).

    Styles: you say you are using CSS< but we don't know how much css you already know. What do you mean by styling? Do you mean removing the default look of a link (blue letters with an underline)?
     
    Stomme poes, Feb 24, 2008 IP
  7. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I have changed like this now: Is it ok, please let me know?
    Also how to remove blue underline in the header?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head><div id="header">
    <a href="index.html"><h1>Purfumia.com</a></h1>
    </div>
    <p></p>
    <title>Quality Fresh Roses Perfumes</title>

    <meta name="description" content="trusted source for buying quality rose perfumes">
    <style type="text/css">

    <body>
    blahh...blahhh...bllahh..
    </body>
    </html>
     
    tptnyc, Feb 24, 2008 IP
  8. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #8
    here´s what you should have before the body tag:

    you have to change the doctype to the one you are using. I use this one always.

    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta name="keywords" content=" the keywords you want to use"/>
    <link rel="stylesheet" type="text/css" href="thenameofthe.css" />
    <title>Your title</title>
    </head>
    <body>
    <div id="header">
    <a href="index.html"><h1>Purfumia.com</a></h1>
    </div>
    </body>
    </html>

    and for the css you could use

    #header a, a:hover, h1 {
    font: normal 1em Verdana;
    text-decoration: none;
    color: #fff;
    margin: 0;
    }

    and if you want the h1 to be bold just change normal to bold and color what you want it to be. And for the margin now the h1 should be on the left corner?

    I´m not sure if u can assign anchor tags and h1 at the same time but pros correct me if i´m wrong.
     
    HDaddy, Feb 24, 2008 IP
  9. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Here is new change now: But there are two things.
    First, if I cut and paste <style type="text/css">
    after the meta name, it gives me error.
    And even if i Use <link rel="stylesheet" type="text/css" href="thenameofthe.css" /> as suggested by HDADDY,
    I still get the error.
    But otherwise, as per the actual coding shown below with <style type="text/css"> coming after the <title></title> then it comes fine.
    So how should it appear?

    Secondly, I am still getting blue line under my URL, how to remove that?

    Actual Coding:

    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta name="rose perfumes" content="Quality Fresh Roses Perfumes"/>

    <html>
    <head><div id="header">
    <a href="index.html"><h1>Purfumia.com</a></h1>
    </div>
    <p></p>
    <title>Quality Fresh Roses Perfumes</title>
    <style type="text/css">
     
    tptnyc, Feb 24, 2008 IP
  10. os-vdo

    os-vdo Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The <style tag needs to be within the <head> tags, also you need to open & close the <a> tag inside the <h1> rather then how it is at the moment. This should work better:

    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta name="rose perfumes" content="Quality Fresh Roses Perfumes"/>
    <title>Quality Fresh Roses Perfumes</title>
    <style type="text/css">
     /* Your css code here */
    </style>
    <head>
    <body><div id="header">
    <h1><a href="index.html">Purfumia.com</a></h1>
    </div>
    <p></p>
    </body>
    </html>
    Code (markup):
    To remove the underline add some css like so:
    
    a {
     text-decoration:none;
    } 
    
    Code (markup):
     
    os-vdo, Feb 24, 2008 IP
  11. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks os-vdo and HDADDY, I got it right this time.
    I have 5 pages, so how does Header flow into all the pages, any specific linking/coding for this?
     
    tptnyc, Feb 24, 2008 IP
  12. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #12
    you have to put the

    <div id="header">
    <a href="index.html"><h1>Purfumia.com</a></h1>
    </div>

    to all the pages into the same position that it is in the index page. I usually finish the index page first, so it has all the coding....header, navigation, content, footer, etc. and then i just use save as to save the page for ex. contact.html, links.html etc.
     
    HDaddy, Feb 25, 2008 IP
  13. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thanks HDADDY once again. Nice idea. And about the footer, what coding should be used to flow into all pages?
     
    tptnyc, Feb 25, 2008 IP
  14. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #14
    put in your css file

    #footer {
    background: #FFF; or if you want a image then url(yourimagefolder/yourimage.jpg) no-repeat;
    width: whateveramountpx;
    margin: 0 auto;
    }

    html

    <div id="footer">
    texttexttext
    </div>

    put it last on the page before </body>

    how many pages you are going to have? you will have a hell of a time updating them if you have amounts of pages.
    for example if you add a new link to your navigation, you will have to put it one by one to all the pages.
     
    HDaddy, Feb 25, 2008 IP
  15. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Thanks HDaddy, its going to be about 10-20pages at least and I think I have to link them all this way only unless I learn some other better way here to do it.
    Now about generating css code, How do I do it? First of all, how to generate the css file itself, is there any tool?
     
    tptnyc, Feb 25, 2008 IP