In the world of web development, it’s like having a toolbox with various tools. HTML is one tool, and there are others like CSS for styling and JavaScript for making things interactive. You might also hear about languages such as Java, PHP, C, C++, Python – each serving a unique purpose. Think of HTML Fundamentals are as the backbone, providing the essential structure for a webpage. Learning it is a great first step in your web development journey. So, let’s dive into the basics of HTML Fundamentals and lay the foundation for creating awesome websites!
You can write HTML documents using simple text editors like Notepad or more advanced ones like Notepad++, Visual Studio, and many others. These tools allow you to create and edit the code that makes up a webpage. Just open the chosen editor, type in your HTML code, and save the file with an “.html” extension. Once saved, you can open the file in a web browser to see how your webpage looks. So, whether you’re using a basic editor or a more sophisticated one, the process of creating an HTML document is accessible and doesn’t require any fancy software.
1. HTML Definition:
HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications.
2. HTML Page Structure:
An HTML page has a standard structure. Here’s an example of code for you to see:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body> <!-- Content of the web page goes here --> </body>
</html>3. HTML Tags and Elements:
HTML tags are used to define elements on a web page. An element starts with a start tag, contains content, and ends with an end tag. Check out the next piece of code:
<p>This is a paragraph.</p>4. Style of Tag:
HTML tags can have attributes that define additional properties:
<a href="https://www.example.com">Visit Example</a>5. Basic HTML Tags:
Examples of basic tags, In this code example, look at the following.:
<h1>Heading 1</h1> <p>This is a paragraph.</p>6. Paragraph Tags:
Used to define paragraphs of text in the following code example:
<p>This is a paragraph.</p>
7. Characters Formatting Tags:
Tags to format text:
<strong>Bold Text</strong> <em>Italic Text</em>8. Image Tags:
Embedding images:
<img src="image.jpg" alt="Description">9. List Tags:
In HTML, lists are used to organize and display information in a structured way. There are two main types of lists: unordered lists (<ul>) and ordered lists (<ol>).
Unordered List (<ul>):
- An unordered list is used to represent a collection of items that do not have a specific order or sequence.It is created using the
<ul>tag, and each list item is defined using the<li>(list item) tag. - By default, the items in an unordered list are marked with bullets, but the style can be customized using CSS.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List (<ol>):
- An ordered list is used to represent a collection of items that have a specific order or sequence.
- It is created using the
<ol>tag, and like the unordered list, each list item is defined using the<li>tag. - By default, the items in an ordered list are numbered sequentially (1, 2, 3, …), but the numbering style can be customized using CSS.
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
10. Table Tags:
Creating tables:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
11. HTML Forms:
Collecting user input:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
12. Form Attributes:
In HTML, form attributes are used to define various properties and behaviors of HTML forms. Forms are a crucial part of web development, allowing users to input data that can be sent to a server for processing.
<form action="/submit" method="post">
<!-- Form content goes here -->
</form>
Here are some common form attributes:
- action: Specifies the URL to which the form data will be submitted.
<form action="/submit_form" method="post">
- method: Defines the HTTP method (usually “GET” or “POST”) used when sending form data to the server.
<form action="/submit_form" method="post">
- name: Assigns a name to the form, which can be used to reference it in scripts.
<form name="registrationForm" action="/submit_form" method="post">
13. Form Elements:
Examples of form elements:
<input type="text" name="username">
<textarea name="message"></textarea>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
14. HTML iframes:
HTML iframes (short for inline frames) are used to embed another HTML document within the current HTML document. An iframe acts like a window or a frame where the content of another webpage can be displayed. This allows you to include external content, such as a video, a map, or another webpage, seamlessly within your own webpage.
The <iframe> tag is used to create an inline frame. It has attributes that specify the source of the external content, its dimensions, and other properties. For example:
<iframe src="https://www.example.com"></iframe>Create a Website Using HTML:
Here’s a simple example combining the above elements into a basic website:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph introducing my website.</p>
<h2>Image Example</h2>
<img src="example.jpg" alt="An example image">
<h2>List Example</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h2>Form Example</h2>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<h2>Table Example</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
<h2>IFrame Example</h2>
<iframe src="https://www.example.com"></iframe>
</body>
</html>
