Here's a basic HTML5 tutorial that covers the essentials of HTML (Hypertext Markup Language). HTML is the standard markup language for creating web pages. It provides the basic structure of a web page and consists of a series of elements that define different parts of a document.
HTML Basics:
-
HTML Document Structure:
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> </head> <body> <!-- Content goes here --> </body> </html>-
<!DOCTYPE html>: Defines the document type and version. -
<html>: The root element of the HTML document. -
<head>: Contains metadata about the document, like character set and viewport settings. -
<body>: Contains the content of the document.
-
-
Text and Headings:
html<h1>This is a Heading 1</h1> <p>This is a paragraph.</p> <h2>This is a Heading 2</h2>- Use
<h1>to<h6>for headings. - Use
<p>for paragraphs.
- Use
-
Lists:
html<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>-
<ul>: Unordered list. -
<ol>: Ordered list.
-
-
Links:
html<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>-
<a>: Anchor tag for links. -
href: Attribute for the URL. -
target="_blank": Opens the link in a new tab. -
rel="noopener noreferrer": Best practice for security when usingtarget="_blank".
-
-
Images:
html<img src="image.jpg" alt="Description of the image">-
<img>: Image tag. -
src: Attribute for the image file URL. -
alt: Alternative text for accessibility.
-
-
Forms:
html<form action="/submit" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <br> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <br> <input type="submit" value="Submit"> </form>-
<form>: Form container. -
<label>: Label for form controls. -
<input>: Input fields.
-
Additional Resources (www.pixarik.com web templates and web design tools):
- MDN Web Docs - HTML Basics
- W3Schools HTML Tutorial
- HTML Validator: Validate your HTML code for correctness.
Remember, this is just a basic introduction to HTML. As you become more comfortable with HTML, you can explore more advanced features and learn how to integrate CSS (Cascading Style Sheets) and JavaScript to enhance the functionality and appearance of your web pages.