HTML Tutorial for Beginners
Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure of a webpage and is the foundation of all websites.
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text.</p> </body> </html>
Basic HTML Structure
Every HTML document has these essential components:
<!DOCTYPE html>- Declares the document type<html>- The root element of an HTML page<head>- Contains meta information about the document<title>- Specifies a title for the document<body>- Contains the visible page content
Common HTML Elements
Headings
<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Third-level heading</h3> <!-- Goes up to h6 -->
Paragraphs and Text Formatting
<p>This is a paragraph.</p> <p>This text is <strong>bold</strong> and this is <em>italic</em>.</p> <p>This is <u>underlined</u> and this is <s>strikethrough</s>.</p>
Links
<a href="https://www.example.com">Visit Example.com</a> <a href="page2.html">Go to Page 2</a> <a href="#section2">Jump to Section 2</a> (internal link)
Images
<img src="image.jpg" alt="Description of image" width="200" height="150">Lists
Ordered List:
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
Unordered List:
<ul> <li>Item</li> <li>Another item</li> </ul>
Tables
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>
Forms
<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="Submit"> </form>
Semantic HTML5 Elements
Modern HTML includes semantic elements that describe their meaning:
<header>Page header content</header> <nav>Navigation links</nav> <main>Main content of the document</main> <section>A section of content</section> <article>Independent, self-contained content</article> <aside>Content aside from the main content</aside> <footer>Page footer content</footer>
HTML Attributes
Most elements can have attributes that provide additional information:
<a href="https://example.com" target="_blank" title="Visit Example">Link</a> <img src="photo.jpg" alt="Description" width="500"> <p class="intro" id="first-paragraph">Text</p>
Comments
<!-- This is a comment that won't be displayed --> <p>Visible content</p>
Complete Example Page
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My HTML Page</title> </head> <body> <header> <h1>Welcome to My Website</h1> <nav> <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#contact">Contact</a> </nav> </header> <main> <section id="home"> <h2>Home Section</h2> <p>This is the home section content.</p> <img src="welcome.jpg" alt="Welcome image"> </section> <section id="about"> <h2>About Us</h2> <p>Learn more about our company.</p> <ul> <li>Founded in 2020</li> <li>10 employees</li> <li>Based in New York</li> </ul> </section> </main> <footer> <p>© 2023 My Website. All rights reserved.</p> </footer> </body> </html>
No comments:
Post a Comment