Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

HTML Style

I am red

I am blue

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

style="property:value;"

property is a CSS property. The value is a CSS value. 

 HTML Background Color

The background-color property defines the background color for an HTML element:
This example sets the background for a page to lightgrey:

Example

<body style="background-color:lightgrey;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color

The color property defines the text color for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

 HTML Text Size

The font-size property defines the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style="text-align:center;">Centered Heading</h1>
<p>This is a paragraph.</p>

Chapter Summary

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

Let's test yourself with Khmer-WEB exercises!

HTML Style

by on 2:26 AM
HTML Style I am red I am blue The HTML Style Attribute Setting the style of an HTML element, can be done with the style attribute . The HTML...
at No comments:
Labels:
Must The HTML <p> element defines a paragraph.

Example

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML Display

You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed.
Any number of spaces, and any number of new lines, count as only one space.

Example

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

<p>This is a paragraph
<p>This is another paragraph
The example above will work in most browsers, but do not rely on it.

Forgetting the end tag can produce unexpected results or errors.

HTML Line Breaks

Must The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a para<br>graph with line breaks</p>
The <br> element is an empty HTML element. It has no end tag.

The Poem Problem  

This poem will display as one line:

Example

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

The HTML <pre> Element

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Example

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

HTML Paragraphs

by on 2:21 AM
Must  The HTML <p> element defines a paragraph . Example < p > This is a paragraph < /p > < p > This is another par...
at No comments:
Labels:

Write HTML Using Notepad or TextEdit

HTML can be edited by using professional HTML editors like:

  • Microsoft WebMatrix
  • Sublime Text
  • Adobe Dreamweaver 
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.

Step 1: Open Notepad

  • To open Notepad in Windows 7 or earlier:
  • Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.
  • To open Notepad in Windows 8 or later:
  • Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Notepad

Step 3: Save the HTML Page

  • Save the file on your computer.
  • Select File > Save as in the Notepad menu.
  • Name the file "index.html" or any other name ending with html or htm.
  • UTF-8 is the preferred encoding for HTML files.
  • ANSI encoding covers US and Western European characters only.

View in Browser

Open the saved HTML file in your favorite browser. The result will look much like this:

View in Browser

HTML Editor

by on 2:16 AM
Write HTML Using Notepad or TextEdit HTML can be edited by using professional HTML editors like: Microsoft WebMatrix Sublime Text Adobe Drea...
at No comments:
Labels:

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

Bold Text

LAnything that appears within <b>...</b> element, is displayed in bold as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a bold typeface.

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a italicized typeface.

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a strikethrough typeface.

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example

<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a monospaced typeface.

Superscript Text

The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

Example

<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a superscript typeface.

Subscript Text

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

Example

<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a subscript typeface.

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
This will display following result:
I want to drink
cola
wine

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
This will display following result:
I want to drink
cola
wine

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a big typeface.

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
This will display following result:
The following word uses a small typeface.

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> | 
<a href="/about/contact_us.htm">CONTACT</a> | 
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
This will display following result:
CONTENT ARTICLES
Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows

Example

<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
This will display following result:
This is the example of span tag and the div tag alongwith CSS

These tags are commonly used with CSS to allow you to attach a style to a section of a page.

HTML Formatting

by on 2:12 AM
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the...
at No comments:
Labels: