HTML BASICS AND ADVANCED
CODE
TUTORIAL
Certainly! Here's a basic HTML code template to get you started:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<img src="image.jpg" alt="My Image">
<a href="https://www.example.com">Visit Example Website</a>
</body>
</html>
```
Let's go through the different parts:
- `<!DOCTYPE html>`: This declaration defines the document type and should be placed at the beginning of every HTML document.
- `<html>`: The root element of an HTML page.
- `<head>`: The head section contains metadata and other information about the document.
- `<title>`: This tag specifies the title of the page that appears in the browser's title bar or tab.
- `<body>`: The body section contains the visible content of the web page.
- `<h1>`: Heading element, used to define the main heading.
- `<p>`: Paragraph element, used to define paragraphs of text.
- `<img>`: Image element, used to insert images into the page. The `src` attribute specifies the image source, and the `alt` attribute provides alternative text for the image.
- `<a>`: Anchor element, used to create hyperlinks. The `href` attribute specifies the URL that the link points to.
You can modify this template to suit your needs by adding or removing elements, changing the text, or adjusting attributes.
___________________________________________________________________________________
ADVANED LEVEL
advanced elements and features:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<style>
/* CSS styles go here */
</style>
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Your Page Heading</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>Section Heading</h2>
<p>This is a sample section.</p>
<img src="image.jpg" alt="Sample Image">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email">
<input type="submit" value="Submit">
</form>
</section>
<article>
<h2>Article Title</h2>
<p>This is a sample article.</p>
</article>
<footer>
<p>© 2023 Your Website. All rights reserved.</p>
</footer>
</body>
</html>
```
In this example, additional features include the following:
- A meta tag for specifying the character encoding and viewport settings.
- The inclusion of an external JavaScript file using the `<script>` tag. Make sure to replace "script.js" with the actual file path.
- An image element using the `<img>` tag, where you should replace "image.jpg" with the path to your desired image file.
- A simple form with input fields for name and email, as well as a submit button.
- An `<article>` element for a standalone piece of content within the page.
Feel free to modify this code to suit your specific needs, and don't forget to replace "Your Page Title" with your desired title.
Let me know if you have any further questions!
THANKS FOR READ ARTICLE