Sunday 27 October 2024

Introduction to HTML

HTML stands for HyperText Markup Language. It's the standard language used to create and design webpages. Think of HTML as the building blocks of a webpage, providing the basic structure.

 

Key Points about HTML

1.   Markup Language: HTML is not a programming language; it's a markup language. This means it uses tags to define elements within a document. These tags tell the web browser how to display the content.

 

2.   Elements and Tags: HTML documents are made up of elements. Each element has a tag, usually consisting of an opening tag (like <tagname>) and a closing tag (like </tagname>). For example, <p> is a paragraph tag, and content inside it would be a paragraph.

 

Basic Structure

Every HTML document has a basic structure:

 

1.   <!DOCTYPE html>: This declaration defines the document type and HTML version.

2.   <html>: The root element of an HTML page.

3.   <head>: Contains meta-information about the HTML document (like its title, character set, etc.).

4.   <title>: Sets the title of the page (displayed in the browser tab).

5.   <body>: Contains the actual content of the page, like text, images, links, etc.

 

HTML file name conventions

When working with HTML files, there are some common conventions and best practices for naming your files to ensure consistency and compatibility across different systems and browsers.

 

1.   HTML files should always have the .html or .htm extension. .html is more commonly used today, but .htm was more popular in older systems. Example: index.html, about.html.

2.   It's a common practice to use all lowercase letters in file names. This helps avoid issues on different operating systems, as some are case-sensitive (e.g., Linux).

Example: contact.html instead of Contact.html

3.   Use Hyphens for Spaces: Use hyphens (-) instead of spaces or underscores (_) in file names. Hyphens improve readability and are better recognized by search engines.

Example: my-first-page.html instead of my_first_page.html or my first page.html

4.   Stick to letters, numbers, hyphens, and underscores. Avoid using special characters (like @, #, &, etc.) as they can cause issues in URLs and are harder to manage.

5.   Choose file names that describe the content of the page. While being descriptive, try to keep the names relatively short. Example: services.html instead of this-is-our-services-page.html

6.   The main entry point of your website is often named index.html. This is a standard naming convention, and web servers are configured to look for index.html as the default file to load when a directory is accessed.

 

index.html

<html>
	<head>
		<title>Hello World</title>
	</head>

	<body>
		<h1>Welcome to HTML Programming!!!!!</h1>
	</body>
</html>

 Open index.html page in a browser, you can see below html page.

Explanation of index.html page

<html> and </html> Tags:

These tags define the beginning and end of an HTML document. Everything inside these tags is considered part of the HTML content.

<html> tells the web browser, "Hey, this is an HTML document!"

 

<head> and </head> Tags:

The <head> section contains meta-information about the HTML document, like its title, character set, styles, and scripts. This information isn't directly displayed on the webpage but helps control how the page is presented.

 

In this example, we have a <title> tag inside the <head> section.

 

<title> and </title> Tags:

These tags define the title of the HTML document, which appears in the browser’s tab (not on the actual webpage). In our example, the title is "Hello World". When you open this HTML file in a browser, "Hello World" will be displayed in the browser tab.

 

<body> and </body> Tags:

This section contains the content that will be displayed on the webpage itself. Whatever is inside the <body> tags will be visible to users.

In this example, the <body> contains a heading.

 

<h1> and </h1> Tags:

<h1> is a heading tag. HTML has six levels of headings, from <h1> (the most important, largest heading) to <h6> (the least important, smallest heading). The text inside the <h1> tags, "Welcome to HTML Programming!!!!!", will be displayed as a large, bold heading on the webpage.

   

Previous                                                    Next                                                    Home

No comments:

Post a Comment