How to code in HTML
Understanding HTML Structure
Before we dive into writing HTML code, it's crucial to understand the underlying structure. Think of HTML as the skeleton of a webpage. Similar to how our skeletal system gives our body structure, HTML gives the website its structure.
An HTML document is composed of several elements. Each of these elements, like the bones in our body, serves a unique purpose. The main elements include the <!DOCTYPE html>, <html>, <head>, and <body> tags.
<!DOCTYPE html> is a declaration that helps the web browser understand the version of HTML that the webpage is written in.
<html> is like the container that holds all other elements of the page.
<head> contains information about the webpage that isn't visible to users, like the title that appears on a browser tab.
<body> contains all the contents of the webpage that users see, like text, images, videos, etc.
Here's an example of what a simple HTML structure looks like:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Using HTML Tags
HTML tags are the building blocks of HTML. They are used to define the content and layout of the web page. For example, <p> is a paragraph tag used to define a paragraph, <h1> to <h6> are heading tags used to define headings, <img> is an image tag used to insert images, and so on.
Think of tags as the labels on your boxes when you're moving houses. They tell you (or in this case, the browser) what's inside the box (the content between the tags).
Here's an example of how to use HTML tags:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first HTML page.</p>
<img src="my_image.jpg" alt="My Image">
</body>
</html>
In this example, <h1> defines a heading, <p> defines a paragraph, and <img> inserts an image.
Creating Links and Lists
Links and lists are vital components of a webpage. Links allow users to navigate from one page to another, while lists help organize information.
Creating a link in HTML involves the use of the <a> tag. The href attribute within the <a> tag specifies the URL of the page the link goes to.
Creating lists involve the use of the <ul> or <ol> and <li> tags. <ul> creates an unordered (bulleted) list, while <ol> creates an ordered (numbered) list. <li> defines a list item.
Here's an example of how to create links and lists in HTML:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first HTML page.</p>
<a href="https://www.google.com">Click here to visit Google</a>
<h2>My favorite fruits:</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</body>
</html>
Wrapping Up
In this post, we've covered the basics of coding in HTML, including understanding its structure, using HTML tags, and creating links and lists. Remember, learning to code is like learning a new language. It takes time, practice, and patience. Don't be discouraged if you don't get it right the first time. Keep practicing, and before you know it, you'll be creating your own webpages from scratch!