HTML Examples
HTML Basic Tag Examples
- A simple HTML file
- This example is a very simple HTML file that uses the fewest possible HTML tags. It demonstrates how content within the body element is displayed by the browser.
- Simple paragraph
- This example demonstrates how text in paragraph elements is displayed by the browser.
- More paragraphs
- This example demonstrates some default behaviors of paragraph elements.
- Poetry issue
- This example demonstrates some issues with HTML formatting.
- Line Break
- This example demonstrates the use of line breaks in HTML documents.
- Title
- This example demonstrates how to display the title tags in an HTML document.
- Centered title
- This example demonstrates a centered title.
- Horizontal line
- This example demonstrates how to insert a horizontal line.
- Hidden comments
- This example demonstrates how to insert hidden comments in the HTML source code.
- Background color
- This example demonstrates how to add a background color to an HTML page.
Example Explanation
HTML frame example
- Vertical frame
- This example demonstrates how to create a vertical frame using three different documents.
- Horizontal frame
- This example demonstrates how to create a horizontal frame using three different documents.
- How to use the <noframes> tag
- This example demonstrates how to use the <noframes> tag.
- Mixed frame structure
- This example demonstrates how to create a frame structure containing three documents, and mix them in rows and columns at the same time.
- Frame structure with noresize="noresize" attribute
- This example demonstrates the noresize attribute. In this example, the frame is not resizable. When you drag the mouse over the frame borders, you will find that the borders cannot be moved.
- Navigation frame
- This example demonstrates how to create a navigation frame. The navigation frame contains a list of links that target the second frame. The file named "contents.htm" contains three links.
- Inline Frames
- This example demonstrates how to create inline frames (frames within an HTML page).
- Jumping to a Specific Section Within a Frame
- This example demonstrates two frames. One frame sets a link to a specified section in another file. The section specified in the 'link.htm' file is identified using <a name="C10">.
- Navigating to a Specific Section Using Frames
-
This example demonstrates two frames. The left navigation frame contains a list of links, which target the second frame. The second frame displays the linked document. The links in the navigation frame point to the sections specified in the target file.
Example Explanation
HTML Form and Input Examples
- Text field (Text fields)
- This example demonstrates how to create a text field in an HTML page. Users can write text in the text field.
- Password field
- This example demonstrates how to create a password field in HTML.
- Checkboxes
- This example demonstrates how to create checkboxes in HTML. Users can select or deselect checkboxes.
- Radio buttons
- This example demonstrates how to create radio buttons in HTML.
- Simple dropdown list
- This example demonstrates how to create a simple dropdown list box in an HTML page. The dropdown list box is an optional list.
- Another dropdown list
- This example demonstrates how to create a simple dropdown list with a pre-selected value. (Translator's note: A pre-selected value refers to a preferred option that is pre-set.)
- Text area (Textarea)
- This example demonstrates how to create a text area (a multi-line text input control). Users can write text in the text area. The number of characters that can be written in the text area is unlimited.
- Create button
- This example demonstrates how to create buttons. You can customize the text on the button.
- Fieldset around data
- This example demonstrates how to draw a titled box around data.
Form example
- Form with input boxes and confirmation button
- This example demonstrates how to add a form to a page. This form contains two input boxes and a confirmation button.
- Form with checkboxes
- This form contains two checkboxes and a confirmation button.
- Form with radio buttons
- This form contains two radio buttons and a confirmation button.
- Send email from form
- This example demonstrates how to send an email from a form.
Example Explanation
HTML image example
- Insert image
- This example demonstrates how to display images on a web page.
- Insert images from different locations
- This example demonstrates how to display images from different folders or servers on a web page.
- Background image
- This example demonstrates how to add a background image to an HTML page.
- Align images
- This example demonstrates how to align images in text.
- Float image
- This example demonstrates how to float an image to the left or right of a paragraph.
- Adjust image size
- This example demonstrates how to adjust the size of an image to different dimensions.
- Display alternative text for images
- This example demonstrates how to display alternative text for images. When the browser cannot load the image, the alternative text attribute tells readers what information is lost. It is a good habit to add alternative text attributes to all images on the page.
- Make image link
- This example demonstrates how to use an image as a link.
- Create image map
- This example shows how to create an image map with clickable areas. Each area is a hyperlink.
- Convert image to image map
- This example shows how to set a common image as a image map.
Example Explanation
HTML Meta Information (meta) Example
- Document Description
- Information in the Meta element can describe the HTML document.
- Document Keywords
- Information in the Meta element can describe the keywords of the document.
- Redirect
- This example demonstrates: Redirecting users to another address when the URL has changed.
Example Explanation
