Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Can I set font size and colour in one line in HTML?

Options
  • 10-03-2014 9:11pm
    #1
    PizzamanIRL
    Registered Users Posts: 5,148 ✭✭✭


    I just started learning HTML today. I thought the following code would set my title size to 5 and colour red but I'm getting a blank page when I load it. What's the problem with it?

    It's an exercise. I'm not actually making a recipe :)
    <HTML>

    <HEAD>

    <TITLE><FONT COLOR="Red" SIZE="5"><U>A Recipe for Tomato Sauce</FONT></U></TITLE></HEAD>

    </HTML>


Comments

  • Options
    #2
    mad turnip
    Registered Users Posts: 710 ✭✭✭mad turnip


    the title tag is for the page name? Up where you see tabs. You will want to have the recipe information in the <body> tag.


  • Options
    #3
    PizzamanIRL
    Registered Users Posts: 5,148 ✭✭✭PizzamanIRL


    Ah I was treating title as the heading on the page. Sorted now thanks.


  • Options
    #4
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Take the time to learn html and css at the same time. html for content and css for presentation. Also throw in learning how to do semantic markup. You'll be grateful in no time. If you style typefaces the way you are now, you'll end up having to do a load of unnecessary unlearning of what are nowadays bad practices.

    Then you'll get to redoing the above as 2 files ideally something like:

    recipe.html 
    <html>
<head>
<title>A Recipe for Tomato Sauce</title>
<link rel="stylesheet" type="text/css" media="screen" href="style1.css" />

</head>

<body>

<h1>A Recipe for Tomato Sauce</h1>

<p><strong>Ingredients</strong></p>
<ul>
<li>Ingredient 1
<li>Ingredient 2
</ul>
<p>Instructions text</p>



</body>
</html>

    style1.css 
    body {font-family: sans-serif; background-color: #FFF; color:#000;}
h1 {font-size:20px; color: #333399;}
li {margin:12px;}
p strong {color:#339933;}


  • Options
    #5
    PizzamanIRL
    Registered Users Posts: 5,148 ✭✭✭PizzamanIRL


    Great, appreciate that. I just created those two files to see how it works. At least I was told early in my study about learning css along with HTML.


  • Options
    #6
    oscarBravo
    Technology & Internet Moderators Posts: 28,791 Mod ✭✭✭✭oscarBravo


    On a point of order, semantic markup would be more like:
    ...
<h1>A Recipe for Tomato Sauce</h1>

<h2>Ingredients</h2>
<ul>
<li>Ingredient 1
...


  • Advertisement
  • Options
    #7
    ThrowinShapes
    Registered Users Posts: 63 ✭✭ThrowinShapes


    oscarBravo wrote: »
    On a point of order, semantic markup would be more like:
    ...
<h1>A Recipe for Tomato Sauce</h1>

<h2>Ingredients</h2>
<ul>
<li>Ingredient 1
...

    This is important to keep in mind as well. Just remember that the tags you choose should describe the content :)


  • Options
    #8
    PrzemoF
    Registered Users Posts: 1,931 ✭✭✭PrzemoF


    OP, Just in case you have not seen this one: http://www.w3schools.com/
    You can edit & test code examples in the browser.


  • Options
    #9
    PizzamanIRL
    Registered Users Posts: 5,148 ✭✭✭PizzamanIRL


    PrzemoF wrote: »
    OP, Just in case you have not seen this one: http://www.w3schools.com/
    You can edit & test code examples in the browser.

    I saw that name pop up a lot when I was googling HTML stuff. Thanks


  • Options
    #10
    Dermot Illogical
    Registered Users Posts: 3,131 ✭✭✭Dermot Illogical


    Also http://www.codecademy.com have a html/css module.


  • Options
    #11
    Graham
    Moderators, Society & Culture Moderators Posts: 17,642 Mod ✭✭✭✭Graham


    tricky D wrote: »
    Then you'll get to redoing the above as 2 files ideally something like:

    recipe.html 
    <html>
<head>
<title>A Recipe for Tomato Sauce</title>
<link rel="stylesheet" type="text/css" media="screen" href="style1.css" />

</head>

<body>

<h1>A Recipe for Tomato Sauce</h1>

<p><strong>Ingredients</strong></p>
<ul>
<li>Ingredient 1
<li>Ingredient 2
</ul>
<p>Instructions text</p>



</body>
</html>

    style1.css 
    body {font-family: sans-serif; background-color: #FFF; color:#000;}
h1 {font-size:20px; color: #333399;}
li {margin:12px;}
p strong {color:#339933;}

    Or ideally if you're pedantic you'll close the li tags.


  • Advertisement
  • Options
    #12
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Lesson: posting code on phone in pub produces sloppy markup.


  • Options
    #13
    internet_user
    Registered Users Posts: 973 ✭✭✭internet_user


    Dermot Illogical wrote: »
    Also http://www.codecademy.com have a html/css module.

    I've found this website to be great, almost finished the course on html/css, which one should i do after it? javascript?


  • Options
    #14
    Dermot Illogical
    Registered Users Posts: 3,131 ✭✭✭Dermot Illogical


    internet_user wrote: »
    I've found this website to be great, almost finished the course on html/css, which one should i do after it? javascript?

    It depends on what interests you most. If client-side development is what you're interested in then I suppose JavaScript jQuery and APIs would be the natural progression.
    Python/Ruby/PHP if you're more interested in server-side stuff. I started using it for the python course but will probably go through all the courses. I did the HTML/CSS one as a refresher as I haven't done anything in that area in a long time.


  • Options
    #15
    internet_user
    Registered Users Posts: 973 ✭✭✭internet_user


    Dermot Illogical wrote: »
    It depends on what interests you most. If client-side development is what you're interested in then I suppose JavaScript jQuery and APIs would be the natural progression.
    Python/Ruby/PHP if you're more interested in server-side stuff. I started using it for the python course but will probably go through all the courses. I did the HTML/CSS one as a refresher as I haven't done anything in that area in a long time.

    As a total beginner, which would you recommend? I'm currently in first year in college(not doing anything IT related) so have a good bit of spare time, and the whole computing thing interests me..doing the HTML/CSS course on codecademy was the first IT related thing I've tried.


  • Options
    #16
    Dermot Illogical
    Registered Users Posts: 3,131 ✭✭✭Dermot Illogical


    internet_user wrote: »
    As a total beginner, which would you recommend? I'm currently in first year in college(not doing anything IT related) so have a good bit of spare time, and the whole computing thing interests me..doing the HTML/CSS course on codecademy was the first IT related thing I've tried.

    Do as many as you can. It's all good. But JavaScript is probably the logical next step. Then jQuery > PHP > JavaScript APIs.


Advertisement