How to create a HTML document of your favourite flower?
HTML stands for HyperText Markup Language and it is the standard language for creating web pages and web applications. HTML uses tags to define the structure and content of a document. In this blog post, we will learn how to create a simple HTML document of your favourite flower using some basic HTML tags and attributes.
To create a HTML document, you need a text editor such as Notepad or Visual Studio Code. You can also use online tools such as CodePen or JSFiddle to write and run your HTML code. A HTML document has a .html or .htm extension and it consists of two main parts: the head and the body.
The head section contains information about the document such as the title, the character encoding, the style sheets and the scripts. The body section contains the actual content of the document such as text, images, links and forms. The head and the body sections are enclosed by the <html> and </html> tags, which indicate the beginning and the end of the document.
The first line of a HTML document is called the doctype declaration and it tells the browser what version of HTML the document is using. The most common doctype declaration for HTML5 is <!DOCTYPE html>.
The title of the document is specified by the <title> and </title> tags inside the head section. The title is displayed on the browser's tab or window and it is also used by search engines to index your web page.
The character encoding of the document is specified by the <meta> tag with the charset attribute inside the head section. The character encoding determines how the browser interprets the text in your document. The most common character encoding for HTML5 is UTF-8, which supports all languages and symbols.
The style sheets of the document are specified by the <link> tag with the rel, href and type attributes inside the head section. The style sheets define how the elements in your document are displayed on the screen. The most common type of style sheet for HTML5 is CSS (Cascading Style Sheets), which uses a separate file with a .css extension.
The scripts of the document are specified by the <script> and </script> tags with the src and type attributes inside the head or body section. The scripts add interactivity and functionality to your web page. The most common type of script for HTML5 is JavaScript, which uses a separate file with a .js extension or inline code between the <script> and </script> tags.
The content of the document is specified by various HTML tags inside the body section. Each tag has a name and may have one or more attributes that modify its behaviour or appearance. Some tags are self-closing, which means they do not need a closing tag, while others require a closing tag with a slash before the name.
For example, to display an image of your favourite flower on your web page, you can use the <img> tag with the src attribute that specifies the URL (Uniform Resource Locator) of the image file. The URL can be an absolute path that starts with http:// or https:// or a relative path that starts with ./ or ../ depending on where your image file is located in relation to your HTML file. You can also use other attributes such as alt, width and height to provide alternative text, resize or crop your image.
To display some text about your favourite flower on your web page, you can use various text formatting tags such as <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <u>, <s>, <sub>, <sup>, <mark>, <span> etc. These tags allow you to create paragraphs, headings, bold, italic, underline, strike-through, subscript, superscript, highlight or customise your text.
To create a link to another web page or resource related to your favourite flower on your web page, you can use the <a> and </a> tags with the href attribute that specifies the URL of the destination. You can also use other attributes such as target, title and id to open the link in a new tab or window, provide additional information or identify your link.
To create a list of facts or features about your favourite flower on your web page, you can use either an ordered list (<ol> and </ol>) or an unordered list (<ul> and </ul>) depending on whether you want to display numbers or bullets before each item. Each item in a list is enclosed by a list item (<li> and </li>) tag.
To create a table of data or comparison about your favourite flower on your web page, you can use the <table> and </table> tags to
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="flowers.jpg" width="107" height="90">
</body>
</html>
Output---
Post a Comment