Posted by ENJOY NEW TECHNOLOGY

Headings are important in HTML documents.

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

Example

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

Example

<!-- This is a comment -->

Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

Tuesday, May 10, 2011

Simple Text Formatting

These tags have not changed since HTML 4

Description	Example Syntax	Result
Bolded Text		Bolded Text
Italicized Text		Italicized Text
Deleted Text		~~Deleted Text~~
Big Text		Big Text
Small Text		Small Text
Subscript		H₂O
Superscript		3 x 10⁸
HTML Ignore
Hyperlink		Google
Email Hyperlink		mail@mail.com

CSS Text Formatting

These features must be used as arguments of the "style" argument of a "span" or "div" tag surrounding the text.

Attributes may be combined under style="" of the SPAN tag and seperated by a semicolon as such:

&lt;span style="attribute:value;attribute2:value"&gt;Text&lt;/span&gt;

Description	Attribute Syntax	Result
Underlined Text	text-decoration:underline	Underlined Text
Font Color	color:red	Red Text
Aligned Text	text-align:left/right/center	Text will be aligned to the left, right, or center
Change the Font	font-family:fontname	Text will be in style "fontname"
Font Size	font-size:200%	2x Size Text

Self-closing Tags

Tags that, by definition, contain nothing between the opening and closing tags must self-closewith a space and forward slash:

Images
Carriage Return
Horizontal Breaking Line

Useful Characters

This is a small list of characters that may be useful in the E-logs. For a more complete list, seeCharacter Chart.

Note:All characters are of the format: (ampersand)(charname)(semicolon).

Description	Syntax	Result
Function Symbol	&fnof;	ƒ
Greek Capital Letter	&(Lettername);	Δ yields Δ
Greek Lowercase Letter	&(lettername);	δ yields δ
Arrows	↑, ↓, ←, →, &crarr;, ↔	↑, ↓, ←, →, ↵, ↔
For All Symbol	∀	∀
Partial Differential	∂	∂
"There Exists" Symbol	∃	∃
Empty/Null Set	∅	∅
Nable Symbol	∇	∇
"Element of" Symbol	∈	∈
"Not an Element of" Symbol	∉	∉
"Contains as Member" Symbol	&ni;	∋
Radical Sign	√	√
"Proportional To" Symbol	&prop;	∝
Infinity Symbol	∞	∞
Angle Symbol	&ang;	∠
Integral Symbol	∫	∫
"Therefore" Symbol	&there4;	∴
"Similar to" Symbol	&sim;	∼
"Almost Equal to" Symbol	≈	≈
"Not Equal to" Symbol	≠	≠
"Equivalent to" Symbol	&equiv;	≡
"Less-than or Equal to" Symbol	≤	≤
"Greather-than or Equal to" Symbol	≥	≥
"Vector Product" Symbol	&otimes;	⊗
"Perpendicular to" Symbol	&perp;	⊥
"Much Greater Than" Symbol	»	»
"Much Less Than" Symbol	«	«
Degree Symbol	°	°
"Plus/Minus Error" Symbol	±	±
"Letter O with Slash" Symbol	Ø	Ø
No break space

How to Create Lists

Unordered list:

uses &lt;ul&gt; and &lt;/ul&gt; tags, and each list item must be inside &lt;li&gt; and &lt;/li&gt;

Example:

&lt;ul&gt; &lt;li&gt;List item&lt;/li&gt; &lt;li&gt;Second Iten&lt;/li&gt; &lt;li&gt;Third Item&lt;/li&gt; &lt;ul&gt; Yields:

List item
Second Item
Third Item

Ordered list:

uses &lt;ol&gt; and &lt;/ol&gt; tags, and each list item must be inside &lt;li&gt; and &lt;/li&gt;

Example:

List item
Second Item
Third Item

How to Create Tables

Simple data tables consist of three parts:

&lt;table&gt;, &lt;tr&gt; and &lt;td&gt;Where all elements are contained within the <table> tags, <tr> tags surround a row, and <td> tags surround a table cell's content. As an example, the code:

&lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt;Row 1, Cell 1&lt;/td&gt; &lt;td&gt;Row 1, Cell 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Row 2, Cell 1&lt;/td&gt; &lt;td&gt;Row 2, Cell 2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; Yields the table with a border (notice above the use of the border="1" attribute to create a border):

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Since CSS attributes may be added to almost any HTML tag using the style attribute, the W3C Online School should be consulted for further table formatting using CSS, such as font and cell background color, padding, and height/width settings.

BASIC HTML CH # 11

Posted by ENJOY NEW TECHNOLOGY

CSS is used to style HTML elements.

Look! Styles and colors

This text is 30 pixels high

Styling HTML with CSS

CSS was introduced with HTML 4, to provide a common way to style HTML elements.

CSS styling can be added to HTML in the following ways

in separate style sheet files (CSS files)
in the style element in the HTML head section
in the style attribute in single HTML elements.

Using the HTML Style Attribute

It is time consuming and not very practical to style HTML elements using the style attribute.

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself.

You can learn everything about styles and CSS in our

HTML Style Example - Background Color

The background-color property defines the background color for an element:

Example

<html>

<body style="background-color:yellow">

<h2 style="background-color:red">This is a heading</h2>

<p style="background-color:green">This is a paragraph.</p>

</body>

</html>

The style attribute makes the "old" bgcolor attribute obsolete.

Try it yourself: Background color the old way

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

Example

<html>

<body>

<h1 style="font-family:verdana">A heading</h1>

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

</body>

</html>

The style attribute makes the old <font> tag obsolete.

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

Example

<html>

<body>

<h1 style="text-align:center">This is a heading</h1>

<p>The heading above is aligned to the center of this page.</p>

</body>

</html>

The style attribute makes the old "align" attribute obsolete.

Deprecated Tags and Attributes

In HTML 4, several tags and attributes are deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML.

The message is clear: Avoid using deprecated tags and attributes!

These tags and attributes should be avoided:

Tags	Description
<center>	Deprecated. Defines centered content
<font> and <basefont>	Deprecated. Defines HTML fonts
<s> and <strike>	Deprecated. Defines strikethrough text
<u>	Deprecated. Defines underlined text
Attributes	Description
align	Deprecated. Defines the alignment of text
bgcolor	Deprecated. Defines the background color
color	Deprecated. Defines the text color

For all of the above: Use styles instead!

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example

<a href="http://www.w3schools.com/">Visit W3Schools</a>

which will display like this:

Clicking on this hyperlink will send the user to ' homepage.

Tip: The "Link text" doesn't have to be text. You can link from an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Note:The upcoming HTML5 standard suggest using the id attribute instead of the name attribute for specifying the name of an anchor.
Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">

Visit the Useful Tips Section</a>

Basic Notes - Useful Tips

Note: Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href="http://www.WORLDHACKERZ.TK/html/".

Tip: Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.

Tip: If a browser does not find the named anchor specified, it goes to the top of the document. No error occurs.

BASIC HTML CH # 13

Posted by ENJOY NEW TECHNOLOGY

Norwegian Mountain Trip

Try it Yourself - Example

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<img src="url" alt="some_text"/>

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.WORLDHACKERZ.TK" has the URL: http://www.WORLDHACKERZ.TK/images/boat.gif.

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat" />

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

Basic Notes - Useful Tips

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

BASIC HTML CH # 14

Posted by ENJOY NEW TECHNOLOGY

HTML Tables

Apples	44%
Bananas	23%
Oranges	13%
Other	10%

Try it Yourself - Examples

HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How the HTML code above looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

HTML Table Headers

Header information in a table are defined with the <th> tag.

All major browsers will display the text in the <th> element as bold and centered.

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How the HTML code above looks in your browser:

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

hack the world

HTML Headings

Example

Headings Are Important

HTML Lines

Example

HTML Comments

Example

HTML Tip - How to View HTML Source

BASIC HTML CH # 10

Simple Text Formatting

CSS Text Formatting

Self-closing Tags

Useful Characters

How to Create Lists

How to Create Tables

BASIC HTML CH # 11

Look! Styles and colors

Styling HTML with CSS

Using the HTML Style Attribute

HTML Style Example - Background Color

Example

HTML Style Example - Font, Color and Size

Example

HTML Style Example - Text Alignment

Example

Deprecated Tags and Attributes

BASIC HTML CH # 12

HTML Hyperlinks (Links)

HTML Link Syntax

Example

HTML Links - The target Attribute

Example

HTML Links - The name Attribute

Example

Basic Notes - Useful Tips

BASIC HTML CH # 13

Norwegian Mountain Trip

Try it Yourself - Example

HTML Images - The <img> Tag and the Src Attribute

HTML Images - The Alt Attribute

HTML Images - Set Height and Width of an Image

Basic Notes - Useful Tips

BASIC HTML CH # 14

HTML Tables

Try it Yourself - Examples

HTML Tables

Table Example

HTML Tables and the Border Attribute

HTML Table Headers

video

Labels

sponsers

Blog Archive