Getting started with HTML

Posted on 05/09/2009 by

1



Acronym: This tag is used to display acronyms. This element is new in HTML 4 and has only been implemented by Internet Explorer.
<HTML>
<HEAD>
<TITLE>Using logical Styles.</TITLE>

</HEAD>

<BODY>

HTML is standardized by the
<ACRONYM TITLE = “World Web Consortium”>
W3C<ACRONYM>

</BODY>

</HTML>

INS: Styles text as inserted text; used to track document edits and changes. Rendered in Internet Explorer as Underlined. Currently only Internet Explorer implements <INS> by underlining the enclosed text.

Example: <HTML>
<HEAD>
<TITLE>

Using the &lt;&gt; Tag

</TITLE>
</HEAD>

BACKGROUND: Background images are a great way to spice up your web pages. The size is up to you. The recommended size is around 100 pixcles by 100 pixcles. The idea behind this is to let the browser “tile” or repeat the image, both, horizontally as well as vertically for filling the page. If your image has details and needs a lot of colors, then save it as a JPG file. Otherwise, you can save it in the form of a GIF file if you can reduce the colors to 256or below this and it’s not a very detailed document. Once you have your background image, you need to modify your <BODY> command to include the background. An example that uses “image.gif” as the background filename is given below.

<BODY BACKGROUND= “imag.gif”>

Backgrounds can either make or break your web page. Always keep your background images as small as possible so your page laods fast. If possible, make the opposite edges ”match up”. Keep the colors toned down since some colors may make it hard to read to the page’s text.

Example:   <BODY BACKGROUND= “image”.gif>

I like HTML Programming

</BODY>

So when you view it on the Internet Explorer Window it will just say: I like HTML Programming.

Background Color

<BODY> BGCOLOR+ “#009900”>
I like HTML Programming
</BODY>

The value for color is called Hexadecimal value.
This will give the same output, the only difference being that there will be green the color for the background of the web page. There are bascially 216 colors (websafe colors) that you can use on your website without having to worry about how they will look in various browers.
The color values from the color palettes that are available in someof the software’s like Photoshop, Fireworks ect.
Example:
108b%20Color%20picker
You can see all the color codes in the end.

Background Sound

This specifies background sound. The sound types allowed are audio, wave and midi files (*.mp3, *.wav, *.wma). The number of loops can also be specified. The file welcome. wav should be in the same folder as that of an image file.
<BGSOUND SRC=” welcome.wav” LOOP+10>Example:
214d01y

  1. New fades, volume envelopes, and editing tools for playlists and mastering
  2. Faster, RAM-based editing
  3. Loop creation tools
  4. Ducking DSP for lowering music in voice overs (hello, podcasters)
  5. Cross-synthesis, for mixing, convolving, vocoding, and modulation
  6. Updated interface, with global contrast controls (hello, Adobe suite on Windows), magnetic windows, new high-res meters.
  7. Integrates with iTunes, direct podcast uploads, and advanced playlist PQ support for those of you too pro to touch either iTunes or podcasts.

Meanwhile, on PC, Sony has beefed up Sound Forge. (Note that Adobe Audition, meanwhile, didn’t get a refresh in the new CS3 suite — though I don’t care, because Audition does everything I need it to.) The big feature: multichannel.

Text Properties: For texts, there are different attributes like Bold, Italic, Underline etc.

Bold Text
We can make the text bold.
<BODY>
I like HTML<B>Programming</BOLD>
</
BODY>
I LIKE HTML PROGRAMMING
STRONG
can also be used in place of B to make a text bold.

Italic Text
The same principle applies to italics.
<BODY>
I like HTML <I>Programming</I>
</
BODY>
I like HTML Programming

The following code will give an output with Underline, Bold and Italic text.
<BODY>
I<U>like</u><i>HTML</I><B>Programming</B>
</BODY>
I like HTML Programming

Font Size
We can change the font size easily in this way.
<BODY>
Something really <FONT>cool</FONT>
</BODY>

Then, specify a SIZE attribute.
<BODY>
I like HTML <FONT SIZE=6>Programming</FONT>
</BODY>
I like HTML PROGRAMMING

FONT
Every browser has a default font setting in terms of font name, size and color. Unless you’ve changed it, the default is probably Times New Roman with a siz of 12pt (which translates into 3 for our purposes) and it’s a black in colour. Ofcourse, we can specify font names other than the defaults such as ARIAL and COMIC SANS ms.

<BODY>
I LIKE HTML <FONT FACE= “ARIAL”>Programming</FONT>
</BODY>
I like HTML Prgramming

TEXT Formatting Tags.
<i></i>-italics
<b></b>-bold
<u></u>-underline
<big></big>-bigger text
<small></small>-smaller text
<sub></sub>-subscript
<sup></sup>-superscript
<font face>= “font name”></font>-to select a specific font
<font size=1></font>-font size, sizes 1-7
<font color= “color”></font>-font color.

Heading Tags
There is another tag for text called Heading. While these are a little obsolete in today’s graphic web environment, they are still handy to have in your toolbox. They come in sizes ranging from1-6. A heading should always be used in numeric order, say for example, after you’ve used an <H1> or and <H2> and not an <H3>. Heading text is a rendered in a bold format by Internet Explorer. It is to be given in the folowing manner.

<BODY>
<H1>Something really cool</H1>
<H2>Something really cool</H2>
<H3>Something really cool</H3>
<H4>Something really cool</H4>
<H5>Something really cool</H5>
<H6>Something really cool</H6>

</BODY>

Something really cool

Something really cool

Something really cool

Something really cool

Something really cool
Somrthing really cool

dw1

//

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver enables you to manipulate columns as well as rows and cells.

Dreamweaver displays the table width and the column width for each table column when the table is selected or when the insertion point is in the table. Next to the widths are arrows for the table header menu and the column header menus. Use the menus for quick access to some common table-related commands. You can turn the widths and menus on or off as necessary.

If you do not see a width for the table or for a column, then that table or column does not have a specified width in the HTML code. If two numbers appear, then the visual width as it appears in Design view doesn’t match the width specified in the HTML code. This can happen when you resize a table by dragging its lower right corner or when you add content to a cell that’s larger than its set width.

For example, if you set a column’s width to 200 pixels, then add content that stretches the width to 250 pixels, two numbers appear for that column: 200 (the width specified in the code) and (250) in parentheses (the visual width of the column as it’s rendered on your screen).

Advertisements
Posted in: Coding, Html