"HTML Formatting Tags "
HTML - Bold
Creating bold text can be
accomplished through the use of the <b> bold tag.
HTML Code:
<b>This text is entirely BOLD!</b>
Bold:
This text is entirely BOLD!
Place the bold tag inside other elements to highlight important words and
give feeling to your text.HTML Code:
<p><b>Don't</b> touch that!</p>
More Bold:
Don't touch that!
You may also use it to separate words from their meaning in a dictionary
fashion.HTML Code:
<p><b>Cardio:</b> Latin word meaning of the heart.</p>
Dictionary:
Cardio: Latin word meaning of the heart.
The idea here is to use the bold tag in quick formatting situations. It is
not a good idea to bold entire paragraphs or other elements simply because you
want the text to be larger or fatter. Use Cascading Style Sheets for font
styles and sizes.HTML - Headings
A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.HTML Code:
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>Place these lines into your HTML file and you should get what is displayed below.
Headings 1-6:
Headings
are
great
for
titles
and subtitles
Notice that each heading has a line break before and after each heading display. This is a built in attribute so to speak associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags.Essay Walkthrough
Let's tie together headings and paragraphs to form an essay. Copy(Highlight, then Ctrl C) or code the following in the body of your page or a new page. Or make your own essay paragraphs.HTML Code:
<h1 align="center">Essay Example</h1>
<p>Avoid losing floppy disks with important school/work projects...</p>
<p>For instance, let's say you had a
HUGE school or work project to complete. Off ...</p>
HTML Essay:
Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far by now) it is easy.For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.
Line Breaks
Line breaks are different than most of the tags we have seen so far. A line break ends the line you are currently on and resumes on the next line. Placing <br /> within the code is the same as pressing the return key in a word processor. Use the <br /> tag within the <p> (paragraph) tag.HTML Code:
<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>
Address:
Will Mateson
Box 61
Cleveland, Ohio
We have created a possible address for a letter head. The line break tag
will also come in handy toward the end of our letter.Box 61
Cleveland, Ohio
HTML Code:
<p>Sincerely,<br />
<br />
<br />
Kevin Sanders<br />
<i>Vice President</i></p>
Closing Letter:
Sincerely,
Kevin Sanders
Vice President
Kevin Sanders
Vice President
HTML Horizontal Rule
Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag.HTML Code::
<hr />
Use
<hr /><hr />
Them
<hr />
Sparingly
<hr />
Display::
Use
Them
Sparingly
HTML Code:
<hr />
<p>1. "The Hobbit", JRR Tolkien.<br />
2. "The Fellowship of the Ring" JRR Tolkien.</p>
Bibliography:
1. "The Hobbit", JRR Tolkien.
2. "The Fellowship of the Ring" JRR Tolkien.
As you can see, all this tag does is draw a line across your content, and
used properly, its results can be outstanding.2. "The Fellowship of the Ring" JRR Tolkien.
Create HTML Email
Making an HTML email link on your page is quick and simple. However, you should know that when you place your email on your website, it is very easy for computer experts to run programs to harvest these types of emails for spamming. If you are going to put your email link on a public website, be sure that you have anti-spam software!Another option to allow people to send you emails without exposing yourself to massive amounts of spam is to create an HTML form that gathers data from the user and emails it to your email account. We recommend the HTML Form Email that usually reduces the amount of potential spam.
HTML Email Tag
There actually is not a separate HTML tag for creating an HTML email link. Instead you use a standard HTML anchor tag <a> and set the href property equal to the email adddress, rather than specifying a web URL. This is probably confusing and may take a little while to get used to.HTML Code:
<a href= "mailto:abc@mail.com" >Email Example</a>
Email Link:
Additional HTML Email Code
By adding a couple extra goodies onto the email address in href you can have both the SUBJECT and the BODY of the email automatically populated for your visitors. This is great when receiving emails from a website to an email account that handles more mail than just from that one link on your site.By defining a uniform subject that people will automatically have when clicking the link you will be able to tell right away whether or not an email came from the website or from another source (as long as your visitors don't mess with the subject that you give them).
- Subject - Populates the subject of the email with the information that you provide.
- Body - Populates the body of the email with the information that you provide.
HTML Code:
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email
is from your website" >
2nd Email Example</a>
Complete Email:
HTML - Italic(s)
The italics tags should be used to highlight a key word or phrase. These
tags are not intended to to stylize or shape your font face. Rather, use them
to emphasize text or words.HTML Code:
Italic <i>tag</i>!
<em>Emphasized</em> Text!
Create a <blockquote>blockquote</blockquote>!
Format your <address>addresses</address>!
HTML Italics:
Italic tag!
Emphasized Text!
Create a blockquote!
Format your addresses!
Each of the above tags is generally interpreted by the browser in a similar
way. The two commonly used tags to place italics onto a website are <em>
and <i>. They are short and sweet.Emphasized Text!
Create a blockquote!
Format your addresses!
HTML Code:
<b>HTML</b>
<i>Hyper Text Markup Language</i>
or
<b>HTML</b>
<em>Hyper Text Markup Language</em>
HTML Dictionary:
HTML
Hyper Text Markup Language
or
HTML
Hyper Text Markup Language
As you can see, the output is the same regardless of what tag we used to
emphasize our definitions.Hyper Text Markup Language
or
HTML
Hyper Text Markup Language
HTML Bold and Italics
Both the <b> and the <i> tags can be placed within other elements to format your texts. They can also be used together to bold and italicize words or phrases. Nothing fancy here, just be sure you open and close the tags in the same order.HTML Code:
<p>Phillip M. Rogerson <b><i>MD</i></b></p>
Display:
Phillip M. Rogerson MD
This is brilliant when placing text links directly inside your paragraphs as
a reference to the user.HTML Code:
<p>Include several external
links throughout your texts as references to your viewers,
we will discuss
<a href="" target="_blank" title="Tizag Links">
<b><i>HTML Links</i></b>
</a>
in a later lesson.</p>
Format Links:
Include several external links throughout your texts as
references to your viewers, we will discuss HTML Links in a later
lesson.
As you can see, the code becomes quite complex as you begin to place more
and more tags on the board. Be assured that once you learn Cascading Style
Sheets the code will become simpler.HTML - Code <code>
The code tag allows you to specify some of your text as computer code. This simply changes the font face, size, and letter spacing to give the text the feel of being computer code.You may have noticed that nearly all of our examples thus far use the computer code tag when displaying each HTML Code example.
HTML Code:
This text has been formatted to be computer <code>code</code>!
Computer Code:
This text has been formatted to be computer
Use this tag to separate any computer code you wish to display on your
website. It is not always necessary, but the tag exists if you so desire.code!HTML - Code Links
Another use may be to separate links on your page and give them a unique look. This tag provides a very quick way to accomplish this.HTML Code:
<p>Feel free to search <code>Google</code>
for anything you wish to find on the internet.</p>
Code Links:
Feel free to search
Google
for anything you wish to find on the internet.HTML - <sup> Superscript
Superscripted text can be placed onto your website using the <sup> tag. You may id these tags for use with Cascading Style Sheets.HTML Code:
<p>This text is <sup>superscripted!</sup></p>
Superscript:
This text is superscripted!
HTML - Exponents
We may use the superscripting technique to express exponential expressions.HTML Code:
2<sup>3</sup> = 8
14<sup>x</sup>
Exponents:
23 = 8
14x
14x
HTML - Footnotes
You may have come across several texts where a referencing, superscripting directs your attention to the bottom of the page. These footnotes can also be created with the superscript tag.HTML Code:
<p>"It was a lover's tryst<sup>1</sup>."
<hr />
1. Secret meeting between lovers
Footnotes:
"It was a lover's tryst1."
1. Secret meeting between lovers
HTML - Subscript
Use the subscript tags to place subscripted text onto your websites.HTML Code:
<p>This text is <sub>subscripted!</sub></p>
Subscripted:
This text is subscripted!
HTML - Chemical Compounds
This tag allows for the creation of chemical compounds.HTML Code:
<p>H<sub>2</sub>0 - Water
<p>O<sub>2</sub> - Oxygen
<p>CO<sub>2</sub> - Carbon Dioxide
Chemical Compounds:
H2O - Water
O2 - Oxygen
CO2 - Carbon Dioxide
O2 - Oxygen
CO2 - Carbon Dioxide
HTML - Strikethrough
To place text onto your site that appears to be crossed out, we use the <del> tag.HTML Code:
<p>This text is <del>scratched</del> out!</p>
Strikethrough:
This text is scratched
out!
HTML - Check Off Tasks
Here's an example of a web developer checking off tasks as they are performed.HTML Code:
<ol>
<li>Clean my room</li>
<li><del>Cook Dinner</del></li>
<li><del>Wash Dishes</del></li>
</ol>
To Do List:
- Clean my room
Cook DinnerWash Dishes
No comments:
Post a Comment