HTML Learning Experience

Note: The browser automatically adds blank lines to and from the paragraph. (<p> is a block-level element)

Tip: Using an empty paragraph mark <p></p> to insert a blank line is a bad habit. Replace it with a <br/> tag! (But don't use <br/> tags to create a list)

Attention:

<br> or the <br/>

You may find that <br> is very similar to <br/>.

HTML elements with no end tags (closed tags) are not allowed in XHTML, XML, and future HTML versions.

Even if <br> has no problem displaying in all browsers, using <br/> is also a long-term guarantee.

External style sheet

An external style sheet is an ideal choice when the style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file.

<link rel="stylesheet" type="text/css" href="mystyle.css"> 

Internal style sheet

An internal style sheet can be used when a particular style is required for a single file. You can define an internal style sheet in the head section through the <style> tag.

<style type="text/css">body {background-color: red}p {margin-left: 20px}</style> 

inline style

Inline styles are used when special styles need to be applied to individual elements. The way to use inline styles is to use style attributes in related tags. Style properties can contain any CSS properties. The following example shows how to change the color and left margin of a paragraph.

style="color: red; margin-left: 20px">this is a paragraph</p>

HTML Hyperlinks (links)

A hyperlink can be a word, a word, or a group of words, or it can be an image that you can click to jump to a new document or to a section of the current document.

When you move the mouse pointer over a link in a webpage, the arrow changes to a small hand.

We create links in HTML by using the <a> tag.

There are two ways to use <a> tags:

1. Create a link to another document by using the HREF attribute-
2. Create a bookmark within a document by using the Name property

3. Using the Target property, you can define where the linked document is displayed.

   The following row opens the document in a new window:

   target="_blank">visit w3school!</a>

syntax for named anchors:

<a name= "label" > anchor (Text displayed on the page) </a>

Tip: The name of the anchor can be any name you like.

Tip: You can use the id attribute to override the Name property, and the named anchor is also valid.

Example

First, we name the anchor in the HTML document (Create a bookmark):

name="tips"> Basic considerations-Helpful tips </a>

We then create a link to the anchor in the same document:

href= "#tips" > Helpful tips </a>

You can also create a link to the anchor in another page:

href= "Http://www.w3school.com.cn/html/html_links.asp#tips" > Helpful tips </a>

In the above code, we add the # symbol and the anchor name to the end of the URL, and we can link directly to the tips of the named anchor.

Replace Text property (ALT)

The ALT attribute is used to define a string of prepared, replaceable text for an image. The value of the replacement Text property is user-defined.

alt="Big Boat">

When the browser fails to load the image, the replacement Text property tells the reader what information they have lost. At this point, the browser will display this alternative text instead of the image. It is a good practice to add alternate text attributes to the images on the page, which helps to better display the information and is useful for those who use a plain text browser.

Table and Border properties

If you do not define a border property, the table will not display a border. Sometimes this is useful, but most of the time we want to show the border.

Use the Border property to display a table with a border:

border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr></table>

Table header

The table header is defined using the <th> tag.

Most browsers display the header in bold text centered:

<table border= "1" ><tr> <th>Heading</th><th>Another Heading</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>

The browser appears as follows:

Heading	another Heading
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Empty cells in a table

In some browsers, table cells with no content are not displayed well. If a cell is empty (no content), the browser may not be able to display the border of the cell.

<table border= "1" ><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>< Tr> <td></td> <td>row 2, cell 2</td></tr></table>

The browser may display this:

Note: The border of this empty cell is not displayed. To avoid this situation, add a space placeholder to the empty cell to display the border.

<table border= "1" ><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>< Tr> <td>&nbsp;</td> <td>row 2, cell 2</td></tr></table>

Unordered list

An unordered list is a list of items that are marked with a bold dot (typically a small black circle).

The unordered list starts with the <ul> tag. Each list item starts at <li>.

<ul><li>Coffee</li><li>Milk</li></ul>

The browser appears as follows:

• Coffee
• Milk

Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.

Ordered list

Similarly, a sequence table is a list of items that are marked with numbers.

The sequence list starts with the <ol> tag. Each list item starts with the <li> label.

<ol><li>Coffee</li><li>Milk</li></ol>

The browser appears as follows:

1. Coffee
2. Milk

Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.

Use IFRAME as the target of the link

The IFRAME can be used as the target for the link.

The target property of the link must reference the Name property of the IFRAME:

Instance

name="iframe_a"target= "Iframe_a" >W3School.com.cn</a></p>

Background (backgrounds)

<body> a label with two configuration backgrounds. The background can be a color or an image.

Background color (Bgcolor)

The background color property sets the background to a color. The property value can be a hexadecimal number, an RGB value, or a color name.

bgcolor="#000000"bgcolor="rgb(0,0,0)"bgcolor="black">

The above code sets the background color to black.

Background (Background)

Background property sets the background as an image. The property value is the URL of the image. If the image size is smaller than the browser window, the image is copied throughout the browser window.

background="clouds.gif"background="http://www.w3school.com.cn/clouds.gif">

The URL can be a relative address, such as the first line of code. You can also make an absolute address, such as the second line of code.

Tip: If you're going to use a background image, you need to remember a few things:

• Whether the background image increases the load time of the page. Tip: Image files should not exceed 10k.
• Whether the background image matches the other images on the page.
• Whether the background image matches the text color in the page.
• Does the image look OK when it's tiled in the page?
• is the attention to the text distracting by the background image?

HTML Learning Experience