Tutorial + Free Template : From paper to html, create a simple Web Design in HTML

Discussion in 'HTML & Website Design' started by iulzi, Dec 19, 2010.

  1. #1
    In this Web Design Tutorial, from paper to Html, I will show you how to turn a Web Design from a paper, into a functional HTML and Css template.

    [​IMG]

    This tutorial is very simple, is for beginners, is for persons that want to learn HTML and CSS, in a simple way.

    This is a tutorial step by step, with File Structure and Template Structure, all this to be more easy for the beginners.

    Well, first of all , you need to take a look to the demo , to see what you’ll be able to create.

    Take a look : Demo

    I will show you how to resolve the errors for Internet Explore 7, is very simple.
    And of course we will create the template together, but if you don't have time to follow the tutorial , you can Download the Template for free.

    If you like the demo, and want to create your first template in HTML , or only to download the template, visit : http://tutorials.iulzi.com/from-paper-to-html-create-a-simple-web-design/
     
    iulzi, Dec 19, 2010 IP
  2. Aquarezz

    Aquarezz Notable Member

    Messages:
    3,009
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    225
    #2
    You often refer to style.cs instead of style.css. But it's a great tutorial otherwise, well explained. Good job! ;)
     
    Aquarezz, Dec 19, 2010 IP
  3. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks. I almost always forget something, thanks for telling me.
    In my opinion the tutorial is not well explained, but if I explain each code / style, the tutorial will never finish, and also, this have been my first tutorial.

    If you look at the new tutorials are better explained, the code is more clean. etc.
     
    iulzi, Dec 19, 2010 IP
  4. Aquarezz

    Aquarezz Notable Member

    Messages:
    3,009
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    225
    #4
    Previewing the post before publishing helps a lot, you can also ask someone else to read it for you before publishing ;) And well going from design to html is something you should learn by yourself in my opinion, but tutorials like these can help, so it's worth reading ;)
     
    Aquarezz, Dec 19, 2010 IP
  5. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I notice your sarcasm :D

    With what i know in this moment, I can create in html and css , whatever I whant / and whatever I see, and every template / theme I create, are from a paper.

    But , thanks for your nice comm.
     
    iulzi, Dec 19, 2010 IP
  6. facug

    facug Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Very useful, lets see what will come out :p
     
    facug, Dec 19, 2010 IP
  7. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thank you, Take a look to the ( create a Search Template in HTML ), have 4 parts,
    and comes with 4 pages ( index , search, add and contact ).

    Ok, now for this template "create a simple Web Design in HTML ", I create 4 more colors, and I put them in one file, you can download the zip file if you want.

    [​IMG]

    Take a look for the Demo / Download : http://tutorials.iulzi.com/store-free-template-5-in-1/
     
    iulzi, Dec 19, 2010 IP
  8. ronc0011

    ronc0011 Peon

    Messages:
    85
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Interesting I decided to look at this. I'm sitting here screwing around on this forum instead of working on creating a video on the same subject matter i.e. building web pages. I hate making videos but I really need to. It's intended to be used as another keyword search term for my website. The site is in a very competitive niche so I'm thinking ad some pages as support content and play off of the different focus of the support pages. Less competitive search terms

    What you say about never getting finished is correct. I've made a couple of runs at this and it has become obvious that this is going to take several videos.



    BTW I have some interesting stuff up on another site you might find interesting and maybe even useful. http://www.babblepfish.com/web/web1.aspx It touches on a number of topics and is in fact quite long.

    The site itself has pretty much gone to seed. I haven't done anything with it in a very long time so please excuse that.
     
    ronc0011, Dec 20, 2010 IP
  9. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Your comment for me seems a spam.
    It has nothing to do with the topic of this post.

    If you want to "get some visits for your website" open a new thread, and you can talk about your videos as much as you want.
     
    Last edited: Dec 20, 2010
    iulzi, Dec 20, 2010 IP
  10. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #10
    Dear friend,

    I encountered some errors:

    First: change <!--Menu---> to <!--Menu--> please ;) (otherwise error in W3C validator)

    Second: Correct this line:

    
    <input name="search" class="search" type="text" value="Start Searching ..." onfocus="if(this.value=='Start Searching ...'){this.value=''};" onbl"if(this.value=='') 
    {this.value='Start Searching ...'};"/> 
    
    Code (markup):
    to:

    
    <input name="search" class="search" type="text" value="Start Searching ..." onfocus="if(this.value=='Start Searching ...'){this.value=''};" onblur="if(this.value=='') 
    {this.value='Start Searching ...'};"/> 
    
    Code (markup):
    Third: <hr color="#0f0f0f"/> ... there is no color attribute, do it in CSS.

    That's it ;)
     
    CSM, Dec 20, 2010 IP
  11. ronc0011

    ronc0011 Peon

    Messages:
    85
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I apologize. I didn't intend it to be so. As I said I haven't done anything with that site in a very long time. The topic it covers is not building web pages so I didn't think it would interfere with your post. I only offered it because I thought you might find it interesting. There is nothing to buy from that site or in fact any way to buy or get involved with anything from that site. I only used the link because the content is so long it was the easiest way to show you.

    It was in effect an attempt to show you what you could be getting into when creating tutorials. They can become very long and involved.
     
    ronc0011, Dec 20, 2010 IP
  12. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    @CSM

    I know that erros , as I said was my first tutorial , with a few errors to .
    Look at the others tutorials, the last tutorials, and finds some errors, if you find.
     
    iulzi, Dec 20, 2010 IP
  13. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    @ronc0011

    I understand, forgive me but today I am not very fine, to say the things.
     
    iulzi, Dec 20, 2010 IP
  14. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    @CSM

    To criticize and find fault, are all very good, but to teach someone or do something, are a few, and "you my friend" you're not among them.

    I have a plugin and also am familiar with the websites to verify my template, you think that I don't know my "errors"?

    The tutorials are dedicated to novices, to find themselves some errors, not for the pros like you.

    But the fault of people like you, for a simple mistake like "<!-- ---->", better keep quiet.
     
    iulzi, Dec 20, 2010 IP
  15. ronc0011

    ronc0011 Peon

    Messages:
    85
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    No problem, I have learned over the years that the written word is not as forgiving as the spoken word and often it is too easy to "read" things into people's comments that they simply didn't intend.

    I do sympathize with the task you are undertaking. Having made a few runs at it myself I know how it can morph into something way bigger than you envisioned.

    You always find yourself trying to figure out what you can leave out, what is not immediately necessary to the point being made.

    Then there's the proof reading. You can read it a hundred times and still find errors.

    The up side is that it really helps you learn your topic much better.
     
    ronc0011, Dec 20, 2010 IP
  16. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    @ronc0011


    I agree with you, there are phrases and words,that depends as they say, you can interpret it differently, but imagine reading those sentences :D
    Thanks and sorry for my english / and the previous comment.
     
    iulzi, Dec 20, 2010 IP
  17. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #17
    Okay, so you think I can not teach people to do a XHTML layout? lol

    I just wanted to help, if you don't want any help... good, I won't bother you again or will visit your "templates site".

    Have a nice life, people like you do not belong to my friends (your arrogance is stupidity, you are only another "teacher").
     
    CSM, Dec 20, 2010 IP
  18. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I honestly I don't care what you can do (what matters is that you don't do it).
    To recive visits from people like you, I'm not interested, but thanks anyway (ironic)

    You only wanted to help? You just want to make clear, the pro that's you, that's all.

    Honestly, for someone your age, you had to have the facts straight before writing something (just a point of view) . Have a nice life to.
     
    iulzi, Dec 20, 2010 IP
  19. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #19
    Well, if you would read... if I just want to tell you "I am the king" I would never say "Dear friend" to you.

    I also never said "I am pro", where did you read that?

    You come here and post your "I have a tutorial, visit my site" and I am not sure if that's following the forums rules!

    
    I honestly I don't care what you can do (what matters is that you don't do it).
    
    Code (markup):
    Anyway, you do not know what I am doing and what I am not doing.

    
    To recive visits from people like you, I'm not interested, but thanks anyway (ironic)
    
    Code (markup):
    This is pure arrogance, my friend. I always try to help, I never said I am pro. Check my posts here and find the "I am pro" sentence.
     
    CSM, Dec 20, 2010 IP
  20. iulzi

    iulzi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    @CSM :D

    It seems you don't understand the indirect, I have to explain you, word with word, to understand?
    I'm talking about "you are a pro ", not saying what you've written, I'm talking about your attitude of the answers you give, and so on.


    I think you said goodbye, why you keep writing?
    You "start with forums rules!", If you have nothing to say about your critics. Stop writing in this thread.

    About forum rules, In this subforum of Web Design , I only have put a link to a small tutorial, to learn something and to get something for free ( this post is not for "kings :D" like you, is for novices to learn something and to get something for free.

    I ask nothing in return ( NOTHING ), my last theme, was full of images, and now I created another theme for my blog, I made it clean, without advertising, to not bother anyone, and to be my blog fast for everyone.

    And what I receive? Criticism from people like you, and you talk me about "forum rules". Good Luck
     
    iulzi, Dec 20, 2010 IP