Class - Learn Web Design ( Part 1 )

Discussion in 'General Webmaster Support' started by DDRtists, Apr 19, 2007.

Thread Status:
Not open for further replies.
  1. ReVolver

    ReVolver Moderator Staff Member

    Ratings:
    +608 / 0 / -0
    Sign me up too! :p

    Edit: Are you going to assign a specific website where we need to upload our files and display our site?
     
  2. DDRtists

    DDRtists ɹoʇɐɹǝpoɯ ɹǝdns Staff Member

    Ratings:
    +413 / 0 / -0
    You don't really need a host unless you're going to do the PHP part. You can use save them as .html on your computer.

    I'll get to lession 1 in a few.
     
  3. undeadorcjerk

    undeadorcjerk The Ulitimate TheHelper.net Lurker

    Ratings:
    +220 / 0 / -0
    in a few turns into hours, hours turn into days, days into weeks, weeks into months. Pretty soon we will all be dead. DDRtists will be on his death bed and think "OH CRAP, i forgot to post lesson 1 for the Web Design Classroom." and then he will pass away.

    THE STORY IS SO SAD *cries*
     
  4. DDRtists

    DDRtists ɹoʇɐɹǝpoɯ ɹǝdns Staff Member

    Ratings:
    +413 / 0 / -0
    Nah, this weekend is busy.

    I WILL post it in the morning ( Pretty tired now ). My promise.
     
  5. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    Lol, the teacher is 3 days late!! :p
     
  6. DDRtists

    DDRtists ɹoʇɐɹǝpoɯ ɹǝdns Staff Member

    Ratings:
    +413 / 0 / -0
    Sorry.

    Lession 1 - About Yourself ( Basic HTML )

    A Basic HTML tag is formed between <>. For example, the font tag would be <font></font>. All HTML tags, if not self ending tags ( <lol /> )
    must have a ending tag ( </lol> ).

    With that down, you will be using the <table> tags the most today, as well as the <img /> tag.
    To Created a Table, you music first use the table HTML tag:

    Code:
    <table>
    
    After you have that down, you will need to know two more things about a table basic layout. First off, <tr> means "Table Row", and adds a row of data to the table. <td> means "Table Data", and adds data.
    <td> Tags must be inside of <tr> tags for them to work properly.

    Now with that down, lets create a basic Table.
    The red Tags are new to this part of the lesson.
    Code:
    <table>[color=red]
    <tr>
    </tr>
    </table>
    [/color]
    
    Okay, now with that down, you have a basic table. But wait, your table will not have any rows, or data on it. Lets assign some data!
    To add data, we just put <td> tags inside of the <tr> call. A table can have more than one <tr> call, and it will add more rows.
    Code:
    <table>
    <tr>[color=red]
    <td>Name</td>
    <td>Age</td>
    <td>Hobby</td>
    [/color]</tr>
    </table>
    
    In the last posted example, I've created 3 rows, "Name", "Age", and "Hobby". These are top row data that will be used to display the information about who you are. Most tables have a display row to tell you what the rows below them mean.

    With that there, continue to the next part!
    __________________________________

    IMG Tags

    The image tag is very basic, <img />

    Now, that won't display your image the way you want, to do that you must tell the tag where to look. To do this, you put the src field:
    Code:
    <img src="" />
    
    The SRC meaning the location on the internet where your picture is stored. This can also be locally, such as "picture.gif" if the file "picture.gif" is in the same directory as the html file.

    With both of that known, try this basic lession:

    Compile a small HTML page that contains information about yourself. Your page must include:

    1 Table with 3 columns and at least 4 rows of data.
    4 Different color fonts
    1 Image

    Due in 2 days, go. If you need help with basic HTML, check here:
    http://www.pageresource.com/html/index2.htm
     
  7. Pineapple

    Pineapple Just Smile.

    Ratings:
    +576 / 0 / -0
    I thought the point of this was for the teachers to teach. :D :p
     
  8. DDRtists

    DDRtists ɹoʇɐɹǝpoɯ ɹǝdns Staff Member

    Ratings:
    +413 / 0 / -0
    Haha, yeah. I'll update the post now.
     
  9. phyrex1an

    phyrex1an Staff Member and irregular helper Staff Member

    Ratings:
    +446 / 0 / -0
    Just as a note, what you are teaching is xhtml and not html. :)
     
  10. Andrewgosu

    Andrewgosu The Silent Pandaren Helper Staff Member

    Ratings:
    +711 / 0 / -0
    I think html is quite obsolete because of xhtml.:D
     
  11. hobo218

    hobo218 Meh

    Ratings:
    +75 / 0 / -0
    We just supposed to message you with our page?
     
  12. phyrex1an

    phyrex1an Staff Member and irregular helper Staff Member

    Ratings:
    +446 / 0 / -0
    >I think html is quite obsolete because of xhtml.
    I don't.
    Reason: IE (every version of it) doesn't support xhtml served as xml (as it should be served to be valid), it displays a 'download this document' menu instead of a rendered page when it encounters it. The only reason that pages that is written in xhtml does work in ie is because most people is serving the xhtml code with an invalid content-type (text/html).

    So, what most people call a xhtml-validated site is actually a page written in xhtml that is parsed as invalid html (because of the xml auto close tag <.../>) by every single browser out there. It is actually even worse, if a browser would render the page as xhtml it would most likely look completely wrong. There is a few things that people doesn't know about xhtml+css that is never noticed since the page is rendered as (invalid) html anyway.

    XHTML 1.0 strict = HTML 4.01 strict as xml
    I'd say that if ie starts to support xhtml then we maybe can take advantage of the cool xml stuff in a few years.
    With that said: I do write my pages in xhtml and serves it as text/html ^^

    Um, offtopic, I can go on for hours when talking html vs xhtml. Don't make me write more :p
     
  13. DDRtists

    DDRtists ɹoʇɐɹǝpoɯ ɹǝdns Staff Member

    Ratings:
    +413 / 0 / -0
    You can just post it, or PM, doesn't really matter.
     
  14. IKilledKEnny

    IKilledKEnny Guest

    Ratings:
    +0 / 0 / -0
    Well I read it, but I understood very little.

    What is a table and table row? What is table data? You didn't explain this.

    Can you give an example of using local picture?

    > 1 Table with 3 columns and at least 4 rows of data.
    4 Different color fonts

    You explained only table rows (and agian very briefly so I didn't understand what this is), so how am I supposed to know how to work with table columns?

    You didn't talk about fonts, you gave just at the start example of <font></font> nor did you talk about colors.

    How am I supposed to do this assignment with no knowledge about the things it is about?
     
  15. DDRtists

    DDRtists ɹoʇɐɹǝpoɯ ɹǝdns Staff Member

    Ratings:
    +413 / 0 / -0
    I provided everything you need. ;)

    1. <td> = column, <tr> = Row
    2. <font color=red> :rolleyes:
    3. Table Data is whatever is inside <td>...
     
    • Like Like x 1
  16. IKilledKEnny

    IKilledKEnny Guest

    Ratings:
    +0 / 0 / -0
    I guess the fact that I'm tired and not English speaker hurt my ability to read, thanks. :p Although I still don't understand what table is. How can I test my page?
     
  17. Pineapple

    Pineapple Just Smile.

    Ratings:
    +576 / 0 / -0
    a table. Open up word and you can make them they are those things made of boxes with text in them.
     
  18. New_U.S.

    New_U.S. ITS OVER 9000!

    Ratings:
    +124 / 0 / -0
    Kind of help but helpful

    btw - here how to change fonts/colors
    <FONT COLOR="red">I'm red!</FONT>
    <FONT SIZE="+2">I'm a big sentence now!</FONT>
     
  19. ReVolver

    ReVolver Moderator Staff Member

    Ratings:
    +608 / 0 / -0
    HTML:
    <html>
    <title>My Profile</title>
    <body>
    <table>
    <tr>
    <td>Name: Efren Palacios</td>
    <td>Age: 18</td>
    <td>Hobby: Programming</td>
    </tr>
    </table>
    </body>
    </html>
    I guess this is the first lesson.
     
  20. sqrage

    sqrage Moderator Staff Member

    Ratings:
    +508 / 0 / -0
    ,
     
Thread Status:
Not open for further replies.

Share This Page