I have a question on HTML?

  • Thread starter Thread starter Trish
  • Start date Start date
T

Trish

Guest
How do you do two things to a word or a phrase. For example, if the word was pickle and i wanted to bold it and make it bigger, how would i do that?
 
nest the tags.

<b><h1>words</h1></b>

That is the old way of doing things, but it's the easiest way to do it when first learning. There are 6 universally support <h1> through <h6> with the lower number being the BIGGEST.

Now the new way would be to wrap this in span tags

<span id="headerText">Hello</span>

and then format it with a style sheet

<style type="text/css">
#headerText
{
font-weight:bold;
font-size:30px;
}
</style>

or instead of using the id attribute, which must be unique per page, set a class, and then use it over and over:

<span class="name">Jim</span>
<span class="name">Bobby</span>
<span class="name">Susan</span>
<span class="name">Jesse</span>

then in the stylesheet use
<style type="text/css">
.name
{
font-weight:bold;
font-size:30px;
}
</style>

note that we've now used the . (period) before the class, where we otherwise use the # (octothorpe) before the id. There are many CSS styles, the advantage of classes is consistency and ease of changing, if you have 30 names on a page, all you have to do to change them all is change the stylesheet.
 
Using HTML is easy:
pickle
<strong>pickle</strong> <!-- bold it -->
<strong><font size="4">pickle</font></strong> <!-- bold it and make it larger -->

Of course, the easiest would be to use CSS.
<!-- This part goes in your HTML before the closing HEAD tag (i.e. </HEAD> -->
<style type="text/css">
.my_emphasis {
***font-weight: 700;
***font-size: 2 em; /* you can use things like 15px to make sure the font doesn't change from 15 pixels */
}
</style>

<!-- Here the HTML in your BODY section -->
<div class="my_emphasis">pickle</div>

Why would the CSS be a better solution?

if later you want to italicize all of the items that you wanted the emphasis on, you could change it in one place.
So, to add italic to the "pickle", you would go into the CSS and add this line to the ".myemphasis" rule. "font-style: italic;". So the CSS would look like this:

<style type="text/css">
.my_emphasis {
***font-weight: 700;
***font-size: 2 em; /* you can use things like 15px to make sure the font doesn't change from 15 pixels */
******/* Likewise, you could also use percentages i.e. 150% to make it 50% larger text */
***font-style: italic;
}

But if you used HTML, you would have to go to each and every item that you wanted to change the emphasis to look like this:
<strong><em><font size="4">pickle</font></em></strong> <!-- bold it, and make the text italic, and make it larger -->
 
The options are:

1) <b> pickle </b>
2) <strong> pickle </strong>

In CSS:-

<span class="t"> pickle </span>

where, in the style sheet, we put,

.t {
font-weight:bold;
}


good luck
 
just stack them. It is highly recommended that you end the tags in the same order you started them. but you don't have to

for example:

I <b><font size="7">LOVE</b></font> pickles!

If you want to go further and change the color, add color="name of color" after size.

eg <font size="3" color="red">pickles</font>


If you want to experiment with html, you can open Notepad and enter the codes you want to try out, and then go to Save As. make sure All Files is selected and give your file a name and put.html at the end. e.g test.html. this will save it as a web page that you can look at in your browser.
 
You can use CSS (Cascading Style Sheets). Define a style first and apply it to the text you want to format. Ex:
define a css style inbetween head element
<style type="text/css" >
.bold-big {
font-weight:bold;
font-size:16px;
</style>
and then apply this style in body element.
I love my <span class=".bold-big">Friend<span>. So this way you can also reuse the style multiple times.
 
Back
Top