How to write in HTML
Understanding HTML Basics
HTML, which stands for HyperText Markup Language, is a cornerstone technology used to create web pages. Think of it as the skeleton that gives every webpage structure. It's the first step in the journey of learning web development. In order to make this easy to understand, we can use the analogy of building a house. HTML could be seen as the bricks and mortar, the fundamental structure upon which everything else is built.
Writing Your First HTML Code
Let's start by creating a basic HTML page. This is simpler than it sounds. All you need is a plain text editor like Notepad or TextEdit.
Here's a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Here's what each part does:
<!DOCTYPE html>: This is a declaration that helps your browser understand the version of HTML the document is written in.<html>: This is the root element of an HTML page.<head>: This contains meta-information about the document that isn't displayed on the webpage itself.<title>: This defines the title of the document, which appears in the browser's title bar or tab.<body>: This contains the content that will be visible to web users when they visit your page.<h1>: This is a heading. HTML headings are defined with<h1>to<h6>, where<h1>is the largest and<h6>is the smallest.<p>: This is a paragraph. It's where you'll put most of the text on your website.
Nesting Elements
HTML elements can be nested, that's how we create complex web pages. Nesting simply means placing elements inside other elements. It's like Russian dolls where you have smaller dolls inside bigger ones.
Here's an example of nesting:
<body>
<div>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph inside a 'div' element.</p>
</div>
</body>
In the above example, both the <h1> and <p> elements are nested within the <div> element, which itself is nested within the <body> element.
Attributes in HTML
Attributes provide additional information about an HTML element. They are always specified in the start tag. For example, the "src" attribute in an <img> tag tells the browser where to find the image.
Here's an example:
<img src="mydog.jpg" alt="A picture of my dog">
In this example, "src" tells the browser where to find the image file, while "alt" provides alternative text for the image if it cannot be displayed.
Creating Links with HTML
The <a> tag is used to create links in HTML. It can be used in two ways: to create a link to another webpage or to create a link to another part of the same page (this is called an anchor).
Here's an example:
<a href="https://www.google.com">Visit Google</a>
In this example, "href" is an attribute that tells the browser where the link should go. The text between the opening <a> tag and the closing </a> tag is what users will see and click on.
Building Lists in HTML
Lists are a common element on web pages. HTML provides tags for creating both ordered lists (<ol>) and unordered lists (<ul>). Inside these list tags, you insert list item tags (<li>), one for each item in the list.
Here's an example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
In this example, we have an unordered list of three items: Coffee, Tea, and Milk. Each item is wrapped in an <li> tag, and the whole list is wrapped in an <ul> tag.
In conclusion, HTML is a straightforward language to pick up, and it is the foundation upon which all web development is built. By understanding the basics, you are well on your way to becoming a proficient web developer. Happy coding!