Website design for beginners

Discussion in 'HTML' started by ahodsdon@gmail.com, Jan 17, 2008.

  1. Guest

    Hello-

    I am trying to design and build a website dedicated to my sister. I
    have had the domain and web server for a little over a year now, and
    during this time I have accomplished very little. This is due, in
    part, to the difficulty in writing content, but it is more that I have
    been overwhelmed by the number of web design and proprietary tutorials
    that are all over the place. Frankly, every time I sit down to get
    some work done, I spend 6 or 7 hours reading a bunch of tutorials and
    accomplish very little and end up getting so confused that I give up.

    So, what I am asking is this: Does anyone here have any suggestions as
    to where I can find a decent tutorial, that will outline the initial
    process and what I should be doing? I have so far ended up with a pre-
    written forum, a different adobe photo gallery, and a home page. All
    of these look different, there is no central theme. i have tried
    using site.master pages, but that has not seemed to work and frankly
    CSS confuses me (at least I understand what it is supposed to, though
    implementing it seems to be a convoluted process).

    I want to be able to use all of the features that I assume I need, but
    I feel as though I get ahead of myself. Trying to learn SQL and PHP
    or ASP.NET (only because I am familiar with C#) seems way more
    complicated than I should be at, but I have yet to find a good
    comprehensive guide that will at least get me on the right track and
    let me know the first steps (i.e. web server file structure, what
    folders are for what, whether to use Linux or Windows, Visual Web
    Developer or Dreamweaver, or any editor at all.)

    Anyway, I haven't posted in a forum for quite some time, so I imagine
    I will get a RTFM response, but any help would be appreciated.

    Thanks
    , Jan 17, 2008
    #1
    1. Advertising

  2. Paul Guest

    <> ha scritto nel messaggio
    news:...
    > Hello-
    >
    > I am trying to design and build a website dedicated to my sister.


    Probably the site for your sister doens't need to be much complicated, so
    you could build it in a simple way using the knowledge you surely have.

    And about beeing a beginner...I am a beginner and autodidact surely more
    ignorant than you.,
    but I have written a personal ecommerce website that works very well, using
    only html and some css. And reading tutorials and reading this news group, I
    learn and improve my knowledge and correct my website in those wrong parts I
    didn't know how to do before.

    The same thing you could do: start simple, and improve after.
    Paul
    Paul, Jan 17, 2008
    #2
    1. Advertising

  3. dorayme Guest

    In article
    <
    m>,
    "" <> wrote:

    > Hello-
    >
    > I am trying to design and build a website dedicated to my sister. I
    > have had the domain and web server for a little over a year now, and
    > during this time I have accomplished very little.
    >
    >


    Perhaps we can all make one together for your sister? Let me
    start by contributing the following skeleton (which I expect to
    see up on your web server and a url provided so we can all
    continue on on this ode):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>My sister</title>
    <style type="text/css">

    </style>
    </head>
    <body>

    </body>
    </html>

    Now, what is it you want to actually say or show roughly? We
    could have it up and running in a few days if you co-operate.

    --
    dorayme
    dorayme, Jan 17, 2008
    #3
  4. Andrew H Guest

    On Jan 17, 3:09 pm, dorayme <> wrote:
    > In article
    > <
    > m>,
    >
    > "" <> wrote:
    > > Hello-

    >
    > > I am trying to design and build a website dedicated to my sister. I
    > > have had the domain and web server for a little over a year now, and
    > > during this time I have accomplished very little.

    >
    > Perhaps we can all make one together for your sister? Let me
    > start by contributing the following skeleton (which I expect to
    > see up on your web server and a url provided so we can all
    > continue on on this ode):
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <title>My sister</title>
    > <style type="text/css">
    >
    > </style>
    > </head>
    > <body>
    >
    > </body>
    > </html>
    >
    > Now, what is it you want to actually say or show roughly? We
    > could have it up and running in a few days if you co-operate.
    >
    > --
    > dorayme


    Dorayme-

    I have copied the above and will post it to my site ASAP, however, I
    am waiting for my ticket to be resolved and my site to be migrated to
    a Linux server. Frankly I like the idea of open source, and the
    dependability of Linux. As soon as the site is available, which I am
    hoping will be tonight, I will post that with a link to the site. I
    really appreciate the fact that you all have responded so quickly.

    As to content. I have an informational essay and I have some content
    that my family has provided. I will edit all of that by tomorrow
    also. Aside from that, all I am looking for right now is a photo
    gallery and maybe a forum, but really I am primarily concerned with a
    professional and respectful website that does not look like it was put
    together by a third grader (which is what I have now). I also wanted
    people to be able to post pictures to the gallery for approval and to
    comment below the pictures.

    Anyway, I am working from a library computer because my motherboard is
    fried and I cant fix it right now, so I will try and do this as soon
    as possible.

    Thanks Again
    Andrew H, Jan 17, 2008
    #4
  5. Andrew H Guest

    On Jan 17, 4:32 pm, Andrew H <> wrote:
    > On Jan 17, 3:09 pm, dorayme <> wrote:
    >
    >
    >
    > > In article
    > > <
    > > m>,

    >
    > > "" <> wrote:
    > > > Hello-

    >
    > > > I am trying to design and build a website dedicated to my sister. I
    > > > have had the domain and web server for a little over a year now, and
    > > > during this time I have accomplished very little.

    >
    > > Perhaps we can all make one together for your sister? Let me
    > > start by contributing the following skeleton (which I expect to
    > > see up on your web server and a url provided so we can all
    > > continue on on this ode):

    >
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">
    > > <html>
    > > <head>
    > > <title>My sister</title>
    > > <style type="text/css">

    >
    > > </style>
    > > </head>
    > > <body>

    >
    > > </body>
    > > </html>

    >
    > > Now, what is it you want to actually say or show roughly? We
    > > could have it up and running in a few days if you co-operate.

    >
    > > --
    > > dorayme

    >
    > Dorayme-
    >
    > I have copied the above and will post it to my site ASAP, however, I
    > am waiting for my ticket to be resolved and my site to be migrated to
    > a Linux server. Frankly I like the idea of open source, and the
    > dependability of Linux. As soon as the site is available, which I am
    > hoping will be tonight, I will post that with a link to the site. I
    > really appreciate the fact that you all have responded so quickly.
    >
    > As to content. I have an informational essay and I have some content
    > that my family has provided. I will edit all of that by tomorrow
    > also. Aside from that, all I am looking for right now is a photo
    > gallery and maybe a forum, but really I am primarily concerned with a
    > professional and respectful website that does not look like it was put
    > together by a third grader (which is what I have now). I also wanted
    > people to be able to post pictures to the gallery for approval and to
    > comment below the pictures.
    >
    > Anyway, I am working from a library computer because my motherboard is
    > fried and I cant fix it right now, so I will try and do this as soon
    > as possible.
    >
    > Thanks Again


    Hey-

    I just uploaded the above:

    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">
    > > <html>
    > > <head>
    > > <title>My sister</title>
    > > <style type="text/css">

    >
    > > </style>
    > > </head>
    > > <body>

    >
    > > </body>
    > > </html>


    to my website which is located @ www.jessicahodsdon.com

    So that is done as of now, hope this helps.
    Andrew H, Jan 17, 2008
    #5
  6. John Hosking Guest

    Andrew H wrote:

    <previous exchange with dorayme snipped>

    > Hey-
    >
    > I just uploaded the above:
    >


    <code from dorayme snipped again>
    NG Tip: you usually only need to quote stuff once.

    > to my website which is located @ www.jessicahodsdon.com
    >
    > So that is done as of now, hope this helps.


    It helps more if you type it as http://www.jessicahodsdon.com/ so that
    more newsreaders recognize it as a link.

    So I've gone there and, guess what? You've got a Web site! Congrats.

    Now you can change the <title> to something more globally enlightening
    than "My sister". And add some text just to see something, like:

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut
    consequat tellus nec tellus luctus fringilla. Suspendisse potenti.</p>

    And here's a contribution for you to put inside the <style> element,
    although at some point[1] you will probably want to move from embedded
    CSS like this to using an external stylesheet.

    html, body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 100%;
    background-color:#FFFFFF; color:#000000;
    padding:0px; margin:0px; }

    The most instructional thing you can do is tweak small things in your
    code (markup and CSS) and see the effect(s). So don't just accept the
    CSS above; add it to your page, view it in some browsers, then change it
    and see what happens.

    For example, a lot of folks don't care for serif fonts for long online
    texts. So try something like

    font:100% Arial, Helvetica, "Century Gothic", sans-serif;

    instead of the fonts I gave you at first. Try using different colors
    (especially if black-on-white isn't what you like). And so on.

    HTH. GL.

    [1] The point to start with an external stylesheet is probably when you
    get a second page for the site.

    --
    John
    Temporarily ignoring the UIP: http://improve-usenet.org/
    John Hosking, Jan 17, 2008
    #6
  7. dorayme Guest

    In article
    <
    >,

    Andrew H <> wrote:

    > On Jan 17, 3:09 pm, dorayme <> wrote:
    > > In article
    > > <
    > > m>,
    > >
    > > "" <> wrote:
    > > > Hello-

    > >
    > > > I am trying to design and build a website dedicated to my sister. I
    > > > have had the domain and web server for a little over a year now, and
    > > > during this time I have accomplished very little.

    > >
    > > Perhaps we can all make one together for your sister? Let me
    > > start by contributing the following skeleton (which I expect to
    > > see up on your web server and a url provided so we can all
    > > continue on on this ode):
    > >
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">
    > > <html>
    > > <head>
    > > <title>My sister</title>
    > > <style type="text/css">
    > >
    > > </style>
    > > </head>
    > > <body>
    > >
    > > </body>
    > > </html>
    > >
    > > Now, what is it you want to actually say or show roughly? We
    > > could have it up and running in a few days if you co-operate.
    > >
    > > --
    > > dorayme

    >
    > Dorayme-
    >
    > I have copied the above and will post it to my site ASAP, however, I
    > am waiting for my ticket to be resolved and my site to be migrated to
    > a Linux server. Frankly I like the idea of open source, and the
    > dependability of Linux. As soon as the site is available, which I am
    > hoping will be tonight, I will post that with a link to the site. I
    > really appreciate the fact that you all have responded so quickly.
    >
    > As to content. I have an informational essay and I have some content
    > that my family has provided. I will edit all of that ... Aside from that, all I am looking for right now is a photo
    > gallery and maybe a forum, but really I am primarily concerned with a
    > professional and respectful website that does not look like it was put
    > together by a third grader (which is what I have now). I also wanted
    > people to be able to post pictures to the gallery for approval and to
    > comment below the pictures.
    >
    > Anyway, I am working from a library computer because my motherboard is
    > fried ...
    >
    > Thanks Again


    O well, if you are having troubles with servers, with fried
    motherboards, with as yet unedited essays, and wanting fancy
    things like forums and user changeable content, please expect
    long delays.

    May I suggest that you could lower your aims to get going and
    just dismiss for now about anything more complicated till you
    have a nice something up and running?

    --
    dorayme
    dorayme, Jan 17, 2008
    #7
  8. dorayme Guest

    In article
    <
    m>,
    Andrew H <> wrote:

    > Hey-
    >
    > I just uploaded the above:
    >
    > to my website which is located @ www.jessicahodsdon.com
    >
    > So that is done as of now, hope this helps.


    What is the url to the website please? A url is in the form of
    http:// etc and please see that it appears on your browser,
    preferably a number of different browsers too.

    --
    dorayme
    dorayme, Jan 17, 2008
    #8
  9. On 2008-01-17, John Hosking wrote:
    ....
    > And here's a contribution for you to put inside the <style> element,
    > although at some point[1] you will probably want to move from embedded
    > CSS like this to using an external stylesheet.
    >
    > html, body {
    > font-family: Georgia, "Times New Roman", serif;
    > font-size: 100%;
    > background-color:#FFFFFF; color:#000000;
    > padding:0px; margin:0px; }
    >
    > The most instructional thing you can do is tweak small things in your
    > code (markup and CSS) and see the effect(s). So don't just accept the
    > CSS above; add it to your page, view it in some browsers, then change it
    > and see what happens.
    >
    > For example, a lot of folks don't care for serif fonts for long online
    > texts. So try something like
    >
    > font:100% Arial, Helvetica, "Century Gothic", sans-serif;
    >
    > instead of the fonts I gave you at first.


    Better still, don't specify a font family for the body text, and
    let the user's default (and presumably preferred) font be used.

    If I have my browser set so that the default font is Helvetica (or
    something similar in size) and a page is served with, e.g., Times
    New Roman, the text is smaller than is comfortable.


    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Jan 17, 2008
    #9
  10. dorayme Guest

    In article <>,
    "Chris F.A. Johnson" <> wrote:

    > On 2008-01-17, John Hosking wrote:
    > ...
    > > And here's a contribution for you to put inside the <style> element,
    > > although at some point[1] you will probably want to move from embedded
    > > CSS like this to using an external stylesheet.
    > >
    > > html, body {
    > > font-family: Georgia, "Times New Roman", serif;
    > > font-size: 100%;
    > > background-color:#FFFFFF; color:#000000;
    > > padding:0px; margin:0px; }
    > >
    > > The most instructional thing you can do is tweak small things in your
    > > code (markup and CSS) and see the effect(s). So don't just accept the
    > > CSS above; add it to your page, view it in some browsers, then change it
    > > and see what happens.
    > >
    > > For example, a lot of folks don't care for serif fonts for long online
    > > texts. So try something like
    > >
    > > font:100% Arial, Helvetica, "Century Gothic", sans-serif;
    > >
    > > instead of the fonts I gave you at first.

    >
    > Better still, don't specify a font family for the body text, and
    > let the user's default (and presumably preferred) font be used.
    >
    > If I have my browser set so that the default font is Helvetica (or
    > something similar in size) and a page is served with, e.g., Times
    > New Roman, the text is smaller than is comfortable.


    This guy is never going to get this site up if anyone suggests
    the least thing that is not needed. See how many concerns are
    crowding him already? I tend to agree with Chris on this because
    it is less to worry about for now.

    John's points are all fair enough though. Later we will hive off
    the CSS to external. The title point is not a bad one to start
    with though (see John's previous post). OP needs a nice short
    better than "My sister".

    But you have to admit, the site does not seem to have any obvious
    visual faults right at this moment. <g>

    --
    dorayme
    dorayme, Jan 17, 2008
    #10
  11. A-OK-SITE Guest

    On Jan 17, 5:24 pm, dorayme <> wrote:
    > In article <>,
    > "Chris F.A. Johnson" <> wrote:
    >
    >
    >
    > > On 2008-01-17, John Hosking wrote:
    > > ...
    > > > And here's a contribution for you to put inside the <style> element,
    > > > although at some point[1] you will probably want to move from embedded
    > > > CSS like this to using an external stylesheet.

    >
    > > > html, body {
    > > > font-family: Georgia, "Times New Roman", serif;
    > > > font-size: 100%;
    > > > background-color:#FFFFFF; color:#000000;
    > > > padding:0px; margin:0px; }

    >
    > > > The most instructional thing you can do is tweak small things in your
    > > > code (markup and CSS) and see the effect(s). So don't just accept the
    > > > CSS above; add it to your page, view it in some browsers, then change it
    > > > and see what happens.

    >
    > > > For example, a lot of folks don't care for serif fonts for long online
    > > > texts. So try something like

    >
    > > > font:100% Arial, Helvetica, "Century Gothic", sans-serif;

    >
    > > > instead of the fonts I gave you at first.

    >
    > > Better still, don't specify a font family for the body text, and
    > > let the user's default (and presumably preferred) font be used.

    >
    > > If I have my browser set so that the default font is Helvetica (or
    > > something similar in size) and a page is served with, e.g., Times
    > > New Roman, the text is smaller than is comfortable.

    >
    > This guy is never going to get this site up if anyone suggests
    > the least thing that is not needed. See how many concerns are
    > crowding him already? I tend to agree with Chris on this because
    > it is less to worry about for now.
    >
    > John's points are all fair enough though. Later we will hive off
    > the CSS to external. The title point is not a bad one to start
    > with though (see John's previous post). OP needs a nice short
    > better than "My sister".
    >
    > But you have to admit, the site does not seem to have any obvious
    > visual faults right at this moment. <g>
    >
    > --
    > dorayme


    Coppermine for photo gallery. Anyone can set up and use and it has
    all the features he needs..

    Daniel

    http://a-ok-site.com
    A-OK-SITE, Jan 18, 2008
    #11
  12. On Jan 17, 10:21 pm, John Hosking <>
    wrote:

    > Now you can change the <title> to something more globally enlightening
    > than "My sister". And add some text just to see something, like:
    >
    > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut
    > consequat tellus nec tellus luctus fringilla. Suspendisse potenti.</p>


    Note for the OP:
    All content, such as John's example paragraph, must be placed between
    the <body> and </body> tags of the skeleton code you've already been
    given.


    --
    AGw.
    AGw. (Usenet), Jan 18, 2008
    #12
  13. On Jan 17, 8:09 pm, dorayme <> wrote the
    following skeleton code:

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


    These two lines tell browsers that you're using version 4.01 Strict of
    the HTML specification, which is what all new web pages should be
    using (pace XHTML advocates).

    > <html>


    This tells the browser that the HTML code is now beginning.

    > <head>


    This tells the browser that what follows is the page header. All the
    stuff that goes here is informational and (the "title" element aside)
    is not displayed by the browser.

    > <title>My sister</title>


    This is the "title" element, and if you load your new skeleton page in
    your browser it should be obvious what the browser does with this!

    Note that if your page is bookmarked, this is what the browser will
    use as the default name for the bookmark.

    > <style type="text/css">


    This is telling the browser that you're using CSS to set out how you
    want your page to be displayed. All the CSS that you write will be
    going where I'm writing this, unless you set up a separate CSS file
    (which others here will no doubt explain how to do).

    > </style>


    And now you're telling the browser that you've stopped writing CSS,
    and have gone back to writing HTML.

    > </head>


    And now you've told the browser that you've finished giving it header
    information.

    > <body>


    Broadly speaking, this tag tells the browser that everything that
    follows is marked-up content. Your content will therefore go where
    I'm writing this.

    > </body>


    And now you've told the browser that you've finished giving it marked-
    up content.

    > </html>


    And now you've told the browser that you've finished writing HTML.


    Some further basic remarks:

    HTML is used to mark out a document's logical structure; CSS is then
    added to tell the browser how to display that document. In other
    words, HTML tells the browser that (eg) "this is a paragraph", while
    CSS tells it that "this paragraph is in Times New Roman, and is
    blue". If you don't use CSS then browsers will use their own default
    display settings, which (a) will look ugly to many people, (b) will
    differ between different browser vendors, and (c) can even vary
    between different versions (incl. platforms) of the same browser.
    Basically, browser defaults are there as a safety net, and should
    never be relied upon. Oh, and using CSS also allows you to do some
    more fancy sorts of layout design that would otherwise be impossible.

    An HTML document is broken down into "elements". Part of learning
    HTML is to learn what elements can be nested inside other elements,
    but the rules are generally pretty logical and easy to get the hang
    of; to give an example, a "p" element is a paragraph, so only occurs
    within the "body" element and not within the "head" element, because a
    paragraph is content, and content only goes inside the body.

    Elements are marked out using "tags". Some elements go in pairs, such
    as the <body> and </body> tags used to mark out the beginning and end
    of the body element. Others only have a single tag, such as the "img"
    element. Again, you'll find it easy to learn which are which, even
    though it's not always quite logical which elements get just one tag
    and which ones get both an "opening tag" and a "closing tag".

    Many elements also have "attributes", some of which are optional and
    some of which are compulsory; for example, the "a" (for "anchor")
    element is used to incorporate a link into your content, and naturally
    enough requires that you use an attribute to state what the link's
    destination URL is:
    <p>This is just some text I'm using as a dummy paragraph. If you
    include this paragraph in your skeleton code then you'll find that the
    word "<a href="http://news.bbc.co.uk">link</a> is in fact a hyperlink
    to the front page of the BBC News website. Note that I've done this
    using the "href" attribute of the "a" element, that there is no space
    on either side of the equals sign, and that the attribute's value is
    enclosed in quote marks.</p>

    Another very common element you'll be using is the "img" (for "image")
    element, which is simply used to include an image in your content.
    Here's an example:
    <img src="http://www.example.invalid/photo.jpg" width="40" height="60"
    alt="Text goes here for people who (for example) are using a non-
    visual browser" title="If users hover their mouse pointer over your
    photo and you want a tool-tip appearing with a description or other
    text, then it goes here">
    Obviously nothing will be displayed unless you've uploaded an image to
    your web server and have corrected the URL to point to it.
    Additional formatting information will be necessary to get the image
    in the correct position, and to get the text shuffling around it how
    you want.

    Another thing your page content will probably need is one or more
    headings, which can be placed in a hierarchy:
    <h1>This is probably going to be the very first thing in your content,
    and is roughly equivalent to the main headline on a newspaper's front
    page</h1>
    <p>You might then have some introductory text here.</p>
    <h2>You might then have a sub-heading here; for example, about the
    Republicans</h2>
    <p>Then you might have some text that relates to that sub-heading; for
    example, something talking about the Republican Party.</p>
    <h3>You might even have a sub-sub-heading; for example, about a
    particular Republican politician, or about a particular aspect of
    Republican policy</h3>
    <p>Naturally enough, your sub-sub-heading will have some text about
    it, which will go here.</p>
    <h2>You might then have another sub-heading here; for example, about
    the Democrats</h2>
    <p>And here goes the text that goes with the preceding sub-heading.</
    p>
    Note that in the above example, I've decided that a section of the
    content about the Republicans is logically equivalent to a section
    about the Democrats, so I've placed them at the same position on the
    hierarchy; ie, I've given them both an "h2" heading element. Sub-
    headings within those sections can then be given headings on the next
    level down the hierarchy, which in my example is "h3". How you decide
    to separate out your content is up to you, of course, although there
    should really only be one "h1" heading, and generally speaking you
    shouldn't really have gaps in the hierarchy (so you shouldn't jump
    from "h2" to "h4", for example).

    Finally, you can use comments in your code, like this:
    <p>This is some content</p>
    <!--This is a comment that won't be displayed in the browser-->
    <p>This is some more content</p>

    If you're already familiar with programming then you'll be familiar
    with "commenting out", which is a handy thing to use when
    experimenting with changes to your HTML.

    Hope this has helped just a little bit more!


    --
    AGw.
    AGw. (Usenet), Jan 18, 2008
    #13
  14. Andrew H Guest

    Wow, I really appreciate all of the responses I have received. I have
    updated the website, this time with a temporary homepage that links to
    the old photo gallery. I definitely need to work on the site layout
    today. it seems to me that everyone here is agreed on the fact that
    it is better to use plain text files to edit the pages? So I have
    been avoiding fancy editing programs. I have the basic idea I think,
    at least in terms of html. The CSS I understand on this basic level,
    but I know there are classes and tags and divs, but I suppose, as you
    have pointed out, that is neither here nor there at this time.

    I am still waiting to have my site moved, but I have been working on
    getting the basic layout up and running for now, working with tables,
    etc. I imagine my next move is to just put up the content first, in
    separate html files, and then link to them, or should I work on the
    theme for the first page and then add others later?

    I look forward to hearing from you

    On Jan 18, 5:46 am, "AGw. (Usenet)" <>
    wrote:
    > On Jan 17, 8:09 pm, dorayme <> wrote the
    > following skeleton code:
    >
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">

    >
    > These two lines tell browsers that you're using version 4.01 Strict of
    > the HTML specification, which is what all new web pages should be
    > using (pace XHTML advocates).
    >
    > > <html>

    >
    > This tells the browser that the HTML code is now beginning.
    >
    > > <head>

    >
    > This tells the browser that what follows is the page header. All the
    > stuff that goes here is informational and (the "title" element aside)
    > is not displayed by the browser.
    >
    > > <title>My sister</title>

    >
    > This is the "title" element, and if you load your new skeleton page in
    > your browser it should be obvious what the browser does with this!
    >
    > Note that if your page is bookmarked, this is what the browser will
    > use as the default name for the bookmark.
    >
    > > <style type="text/css">

    >
    > This is telling the browser that you're using CSS to set out how you
    > want your page to be displayed. All the CSS that you write will be
    > going where I'm writing this, unless you set up a separate CSS file
    > (which others here will no doubt explain how to do).
    >
    > > </style>

    >
    > And now you're telling the browser that you've stopped writing CSS,
    > and have gone back to writing HTML.
    >
    > > </head>

    >
    > And now you've told the browser that you've finished giving it header
    > information.
    >
    > > <body>

    >
    > Broadly speaking, this tag tells the browser that everything that
    > follows is marked-up content. Your content will therefore go where
    > I'm writing this.
    >
    > > </body>

    >
    > And now you've told the browser that you've finished giving it marked-
    > up content.
    >
    > > </html>

    >
    > And now you've told the browser that you've finished writing HTML.
    >
    > Some further basic remarks:
    >
    > HTML is used to mark out a document's logical structure; CSS is then
    > added to tell the browser how to display that document. In other
    > words, HTML tells the browser that (eg) "this is a paragraph", while
    > CSS tells it that "this paragraph is in Times New Roman, and is
    > blue". If you don't use CSS then browsers will use their own default
    > display settings, which (a) will look ugly to many people, (b) will
    > differ between different browser vendors, and (c) can even vary
    > between different versions (incl. platforms) of the same browser.
    > Basically, browser defaults are there as a safety net, and should
    > never be relied upon. Oh, and using CSS also allows you to do some
    > more fancy sorts of layout design that would otherwise be impossible.
    >
    > An HTML document is broken down into "elements". Part of learning
    > HTML is to learn what elements can be nested inside other elements,
    > but the rules are generally pretty logical and easy to get the hang
    > of; to give an example, a "p" element is a paragraph, so only occurs
    > within the "body" element and not within the "head" element, because a
    > paragraph is content, and content only goes inside the body.
    >
    > Elements are marked out using "tags". Some elements go in pairs, such
    > as the <body> and </body> tags used to mark out the beginning and end
    > of the body element. Others only have a single tag, such as the "img"
    > element. Again, you'll find it easy to learn which are which, even
    > though it's not always quite logical which elements get just one tag
    > and which ones get both an "opening tag" and a "closing tag".
    >
    > Many elements also have "attributes", some of which are optional and
    > some of which are compulsory; for example, the "a" (for "anchor")
    > element is used to incorporate a link into your content, and naturally
    > enough requires that you use an attribute to state what the link's
    > destination URL is:
    > <p>This is just some text I'm using as a dummy paragraph. If you
    > include this paragraph in your skeleton code then you'll find that the
    > word "<a href="http://news.bbc.co.uk">link</a> is in fact a hyperlink
    > to the front page of the BBC News website. Note that I've done this
    > using the "href" attribute of the "a" element, that there is no space
    > on either side of the equals sign, and that the attribute's value is
    > enclosed in quote marks.</p>
    >
    > Another very common element you'll be using is the "img" (for "image")
    > element, which is simply used to include an image in your content.
    > Here's an example:
    > <img src="http://www.example.invalid/photo.jpg" width="40" height="60"
    > alt="Text goes here for people who (for example) are using a non-
    > visual browser" title="If users hover their mouse pointer over your
    > photo and you want a tool-tip appearing with a description or other
    > text, then it goes here">
    > Obviously nothing will be displayed unless you've uploaded an image to
    > your web server and have corrected the URL to point to it.
    > Additional formatting information will be necessary to get the image
    > in the correct position, and to get the text shuffling around it how
    > you want.
    >
    > Another thing your page content will probably need is one or more
    > headings, which can be placed in a hierarchy:
    > <h1>This is probably going to be the very first thing in your content,
    > and is roughly equivalent to the main headline on a newspaper's front
    > page</h1>
    > <p>You might then have some introductory text here.</p>
    > <h2>You might then have a sub-heading here; for example, about the
    > Republicans</h2>
    > <p>Then you might have some text that relates to that sub-heading; for
    > example, something talking about the Republican Party.</p>
    > <h3>You might even have a sub-sub-heading; for example, about a
    > particular Republican politician, or about a particular aspect of
    > Republican policy</h3>
    > <p>Naturally enough, your sub-sub-heading will have some text about
    > it, which will go here.</p>
    > <h2>You might then have another sub-heading here; for example, about
    > the Democrats</h2>
    > <p>And here goes the text that goes with the preceding sub-heading.</
    > p>
    > Note that in the above example, I've decided that a section of the
    > content about the Republicans is logically equivalent to a section
    > about the Democrats, so I've placed them at the same position on the
    > hierarchy; ie, I've given them both an "h2" heading element. Sub-
    > headings within those sections can then be given headings on the next
    > level down the hierarchy, which in my example is "h3". How you decide
    > to separate out your content is up to you, of course, although there
    > should really only be one "h1" heading, and generally speaking you
    > shouldn't really have gaps in the hierarchy (so you shouldn't jump
    > from "h2" to "h4", for example).
    >
    > Finally, you can use comments in your code, like this:
    > <p>This is some content</p>
    > <!--This is a comment that won't be displayed in the browser-->
    > <p>This is some more content</p>
    >
    > If you're already familiar with programming then you'll be familiar
    > with "commenting out", which is a handy thing to use when
    > experimenting with changes to your HTML.
    >
    > Hope this has helped just a little bit more!
    >
    > --
    > AGw.
    Andrew H, Jan 18, 2008
    #14
  15. BobaBird Guest

    On Thu, 17 Jan 2008 13:38:47 -0800 (PST), Andrew H
    <> wrote:

    > I just uploaded ... to my website which is
    > located @ http://www.jessicahodsdon.com


    A few suggestions:

    The <h1> does not need to be part of the layout table. Put it by
    itself above <table> and delete that row/td. Keep it simple.

    Put your paragraphs within <p>...</p> markup. Only use <br> to force
    a new line without the default blank line, such as for your "designed
    by" note.

    The <img> is on the same site, so you can use a relative URL rather
    than specifying the whole thing. Also, for those who can't see the
    image, provide some alternate text that describes what they're missing
    (required for 4.01 Strict). Specifying the size of the img is
    optional, but allows the browser to reserve space for it before it's
    loaded.

    I see how the layout table keeps the text to the right of the photo,
    but you can get much the same effect without it. (Take this as
    showing you another way.)

    Start by clearing out all the table/row/td markup. Next, apply some
    in-line CSS to the image. (If you want all images to have this CSS,
    put it in your internal or external stylesheet instead.) First,
    "float:left" keeps the img on the left side, with the rest of the <p>
    on the right, then wrapping underneath as you add paragraphs. Then,
    to keep the text from touching the img and allow for easier reading,
    add "margin-right:1em". (An "em" is a unit of line /height/ that is
    frequently recommended for specifying width because it will adjust as
    the user adjusts the text size.)

    Link text should be descriptive of the destination.
    http://www.w3.org/QA/Tips/noClickHere

    Your page with revised markup:

    <body>

    <h1>In Loving Memory of Jessica Hodsdon</h1>
    <p><img style="float:left; margin-right:1em"
    src="images/jess_obit.gif" alt="Photo of Jessica" width="215"
    height="320">Jessica Hodsdon, after years of struggling ...</p>
    <p>Thank You,</p>
    <p>Andrew Y. Hodsdon</p>
    <p>Also please visit
    the <a href="http://photo.jessicahodsdon.com">Jessica Hodsdon photo
    gallery</a></p>
    <p style="clear:left;">Website Designed by Andrew Y. Hodsdon<br>
    </p>

    </body>

    The final <p> adds "clear:left;" to break the float and allows the <p>
    to be placed under the photo when there is not enough content to
    extend below it. (Or, if you keep the table, move this <p> below the
    table, but without the inline style, just like we moved <h1> above
    it.)
    --

    Charles
    BobaBird, Jan 18, 2008
    #15
  16. On Jan 18, 2:51 pm, Andrew H <> wrote:

    Friendly advice, to heed before someone says something rude to you:
    The standard on this newsgroup, and on most other "technical" groups,
    is to bottom post, not to top post.

    > Wow, I really appreciate all of the responses I have received. I have
    > updated the website, this time with a temporary homepage that links to
    > the old photo gallery.


    A couple of quick notes regarding the page as it currently is.

    Firstly, when using the "img" element the general advice is that you
    should always have a meaningful "alt" attribute. This provides text
    for those users who don't get to see your image, such as the blind.
    You may of course not consider this to be terribly important for a
    personal web page that may not get much traffic; but I mention it as a
    good habit to get into now, in case you find yourself creating other
    websites in the future.

    Secondly, you're (temporarily?) using an HTML table for layout; this
    can be a bit of a "religious" issue for professional web designers!
    Again, for a personal web page it's not really an issue, but using
    tables does have the disadvantage that it gets you thinking about
    layout in a particular way that (in my experience) makes learning good
    CSS more difficult when you're just starting out. Ideally you should
    only use a table for "tabular data" (basically, the sort of thing that
    would have rows and columns if you were writing it out with pen and
    paper).

    > I definitely need to work on the site layout
    > today. it seems to me that everyone here is agreed on the fact that
    > it is better to use plain text files to edit the pages? So I have
    > been avoiding fancy editing programs.


    If you want to learn HTML, then it's definitely better in my view to
    use a plain text editor, or perhaps a slightly more advanced text
    editor that has handy features such as syntax highlighting.

    If you do want to try out a particular piece of web design software,
    the first thing I'd do is see how well it copes with you manually
    editing your code (in the same way as you'd do using a text editor);
    you'd be surprised how many web design products either don't allow you
    to do this at all, or will add all sorts of weird proprietorial stuff
    to your code, or will even rewrite or reformat your code when opening
    a file (and before you use the program to edit it). Personally, I'd
    leave it a while before checking any of these software products out,
    though.

    > I have the basic idea I think,
    > at least in terms of html. The CSS I understand on this basic level,
    > but I know there are classes and tags and divs, but I suppose, as you
    > have pointed out, that is neither here nor there at this time.


    CSS works by you defining rules for how particular HTML elements are
    to be formatted. Using classes, ids, divs, and spans, gives you more
    flexibility to how that actually works in practice.

    Obviously it's useful to be able to distinguish between different
    examples of the same type of element (for example, you might want
    *this* paragraph to be blue, but *that* paragraph to be red), which is
    where the "class" and "id" come into things.

    Example HTML:
    <p class="foo">This is one example paragraph.</p>
    <p class="foo">This is another example paragraph.</p>
    <p class="bar">This is a different example paragraph.</p>

    You can have a CSS rule that applies to all paragraphs, like this:
    p {
    color: #0000ff;
    }

    That CSS will then make the text of all paragraphs (whether of class
    "foo", or "bar", or with no class at all) display in blue.

    On the other hand:

    p {
    color: #0000ff;
    }

    ..foo {
    color: #ff0000;
    }

    The above two CSS rules will make all paragraphs blue, except for
    those with a "class" attribute of "foo" (which will instead be red).

    The syntax for a CSS rule for an "id" attribute is slightly different
    (you use a "#" instead of a "."), and in the HTML document you can
    only use a given name for an "id" attribute just the once, whereas you
    can use the same "class" attribute ad infinitum. Probably for now
    it's best to stick with the "class" attribute, just to keep things
    simple.

    As for <div> and <span> elements, well you use these for when you need
    to format something in your HTML that doesn't already have a
    convenient element; for example, you might want to format a particular
    word in a different way from the rest of its containing paragraph:

    HTML:
    <p>This is an example paragraph. The word "<span id="fred">wibble</
    span>" will be formatted differently to the rest of this paragraph's
    content.</p>

    CSS:
    #fred {
    text-decoration: underline;
    }

    Using the above CSS rule, the word "wibble" will be underlined even
    though the rest of the paragraph won't be.

    The "span" element is used for defining in-line stuff you want to play
    with, whereas the "div" element is used for block-level stuff:

    HTML:
    <div class="introductory">
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>This is a third paragraph.</p>
    </div>
    <p>This is a fourth paragraph.</p>

    CSS:
    ..introductory {
    color: #ff0000;
    }

    The above CSS rule will make the first three paragraphs red, but the
    fourth one will be left alone.

    Basically your first step when coding should be to use HTML to mark
    out the logical structure of your document, and only after that would
    you add any necessary div or span elements that your CSS wouldn't
    otherwise work without. In my example above, you could get rid of the
    "introductory" div by instead using a class attribute with each of the
    three paragraphs; in other cases, though, it'll be a div or nothing.

    > I am still waiting to have my site moved, but I have been working on
    > getting the basic layout up and running for now, working with tables,
    > etc. I imagine my next move is to just put up the content first, in
    > separate html files, and then link to them, or should I work on the
    > theme for the first page and then add others later?


    I think the correct answer to that question is "whichever works best
    for you", and the only way of finding *that* out is to choose one and
    see how it goes! Learning theory is good, and "getting your hands
    dirty" is also good. A hundred professionals might do it one
    particular way, but they're them and not you.


    --
    AGw.
    AGw. (Usenet), Jan 18, 2008
    #16
  17. dorayme Guest

    In article
    <
    m>,
    "AGw. (Usenet)" <> wrote:

    > On Jan 17, 8:09 pm, dorayme <> wrote the
    > following skeleton code:
    >
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">

    >
    > These two lines tell browsers that you're using version 4.01 Strict of
    > the HTML specification, which is what all new web pages should be
    > using (pace XHTML advocates).
    >
    > > <html>

    >
    > This tells the browser that the HTML code is now beginning.
    >
    > > <head>

    [...]
    >
    > HTML is used to mark out a document's logical structure; CSS is then
    > added to tell the browser how to display that document. In other
    > words, HTML tells the browser that (eg) "this is a paragraph", while
    > CSS tells it that "this paragraph is in Times New Roman, and is
    > blue". If you don't use CSS then browsers will use their own default
    > display settings, which (a) will look ugly to many people, (b) will
    > differ between different browser vendors, and (c) can even vary
    > between different versions (incl. platforms) of the same browser.
    > Basically, browser defaults are there as a safety net, and should
    > never be relied upon. Oh, and using CSS also allows you to do some
    > more fancy sorts of layout design that would otherwise be impossible.
    >
    > An HTML document is broken down into "elements".


    [...]
    >
    > Hope this has helped just a little bit more!
    >


    I am certain this will help OP and also many others, it is good
    of you to have taken the trouble.

    I leave a quibble to last: Perhaps your "Basically, browser
    defaults are there as a safety net, and should never be relied
    upon." could be qualified to avoid the onerous responsibility
    that is then thrust on the author if he were really to start his
    CSS with

    * {margin: 0; padding: 0;}

    I don't think a newbie should be tempted down this road too early.

    --
    dorayme
    dorayme, Jan 18, 2008
    #17
  18. dorayme Guest

    In article
    <
    >,

    "AGw. (Usenet)" <> wrote:

    > On Jan 18, 2:51 pm, Andrew H <> wrote:
    >
    > Friendly advice, to heed before someone says something rude to you:
    > The standard on this newsgroup, and on most other "technical" groups,
    > is to bottom post, not to top post.
    >


    {and lots of good further advice from AGw... snipped here]

    Here is a suggestion for a look:

    <http://netweaver.com.au/alt/andrewHodson.html>

    --
    dorayme
    dorayme, Jan 18, 2008
    #18
  19. Andrew H Guest

    On Jan 18, 4:04 pm, dorayme <> wrote:
    > In article
    > <>,
    >
    > "AGw. (Usenet)" <> wrote:
    >
    > > On Jan 18, 2:51 pm, Andrew H <> wrote:

    >
    > > Friendly advice, to heed before someone says something rude to you:
    > > The standard on this newsgroup, and on most other "technical" groups,
    > > is to bottom post, not to top post.

    >
    > {and lots of good further advice from AGw... snipped here]
    >
    > Here is a suggestion for a look:
    >
    > <http://netweaver.com.au/alt/andrewHodson.html>
    >
    > --
    > dorayme


    I like the design you came up with dorayme, and AGw that discussion of
    CSS was helpful. I feel more confident that I am on the right track
    now and I thank you all for that. BTW am I bottom posting at this
    point? I am using google groups and I think I am posting correctly,
    but if not let me know.

    For that design, if I wanted to use that as say a theme and then
    create a number of pages with that template, would that require me to
    use that CSS style page, as opposed to the inline style?

    I have been using dreamweaver, but only to edit the html text (I find
    it is helpful to see the results of each change) and things seem to be
    going well.
    Andrew H, Jan 18, 2008
    #19
  20. On Jan 18, 9:29 pm, Andrew H <> wrote:

    > On Jan 18, 4:04 pm, dorayme <> wrote:
    >
    > > [snipped]

    >
    > BTW am I bottom posting at this point?


    Yes, that was bottom-posted! :)

    > I have been using dreamweaver, but only to edit the html text (I find
    > it is helpful to see the results of each change) and things seem to be
    > going well.


    I hope you've not forked out for it! But your approach to how you're
    using it is absolutely the right one; soon enough you'll start to
    understand what it's about, and can perhaps start to use some of its
    various features to speed up the stuff you'll already know how to code
    by hand.

    The main reason why beginners are generally warned off from
    Dreamweaver in particular is that its price is poor value for someone
    who isn't a professional; also, it won't make better websites for you
    just because it's a professional tool, in the same way that a really
    expensive camera won't (by itself) make a beginner photographer into a
    great artist. However, it's a pretty reliable product, so you're in
    safe hands, and by using it the way you are you'll be getting the most
    benefit out of it without suffering most of the pitfalls that plague
    other web design programs.


    --
    AGw.
    AGw. (Usenet), Jan 18, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.

Share This Page