Coding in HTML/CSS/JavaScript: Introduction to HTML Structure and
Elements
Welcome to our HTML/CSS/JavaScript course! In this lesson, we'll explore
the fundamental structure of HTML documents and introduce you to some
basic HTML elements.
The Backbone of Web Content
HTML (HyperText Markup Language) is the backbone of web content,
providing the structure and meaning to web pages.
Understanding HTML Tags and Elements
Before we dive into the structure of an HTML document, let's clarify some
important terminology:
HTML Tags
These are the building blocks of HTML. Tags are enclosed in angle
brackets, like <p> or
<div>. They serve as a kind of roadmap through your code, providing a clear
structure and hierarchy to the document.
HTML Elements
An element is the entire construct, including the opening tag, the
content, and the closing tag. For example,
<p>This is a paragraph</p>
is a complete paragraph element.
The use of tags and elements in HTML is one of its strengths, making it
easier to understand the layout and organization of the content.
HTML Document Structure
Every HTML document follows a basic structure. Let's look at a simple
example:
(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph on my web page.</p>
</body>
</html>
This example shows the basic structure of an HTML document. Let's break
it down:
<!DOCTYPE html>: Declares
that this is an HTML5 document.
<html>: The root element
of the HTML page.
<head>: Contains meta
information about the document.
<title>: Specifies a title for the document, which appears in the browser's
title bar or page's tab.
<body>: Defines the
document's body, which contains all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
Basic HTML Elements
Now, let's explore some common HTML elements you'll use frequently:
(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<h2>About Me</h2>
<p>This is a paragraph about me. I'm learning HTML!</p>
<h2>My Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Ice Cream</li>
<li>Sushi</li>
</ul>
<h2>A Cool Image</h2>
<img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDJ8fG1vdW50YWlufGVufDB8fHx8MTY1Mzk0NDk4Ng&ixlib=rb-1.2.1&q=80&w=150&h=150" alt="Lovely Mountain">
</body>
</html>
This example demonstrates several key HTML elements:
Headings (<h1>
to <h6>): Used for titles and subtitles.
Paragraphs (<p>): Used
for blocks of text.
Links (<a>): Create hyperlinks to other pages or resources.
Images (<img>): Embed
images in your webpage.
Lists (<ul>, <ol>, <li>): Create unordered (bullet) or ordered (numbered) lists.
HTML Comments
While HTML is often self-explanatory due to its descriptive tags,
comments can be useful in certain situations. In HTML, you can add
comments like this:
<!-- This is a comment. It won't be visible in the browser.
-->
Comments are useful for:
-
Explaining complex structures
-
Marking the beginning and end of major sections
-
Leaving notes for yourself or other developers
Use comments judiciously to make your code more understandable without
cluttering it unnecessarily.
Practice and Experiment at OnlineGDB
Remember, practice is key to mastering HTML. We encourage you to
experiment with the code in our snippets and modify the code. To
make this even easier, we've prepared an interactive environment for
you. You can view and edit the code snippets in this lesson at
OnlineGDB, an free online integrated development environment
(IDE):
HTML Program 1 at OnlineGDB - Click here
HTML Program 2 at OnlineGDB - Click here
Fork the Program at OnlineGDB
These links will take you directly to OnlineGDB workspaces with the
code from this lesson pre-loaded. Initially, you'll see a read-only
version of the code that you can run. But to edit the program, please
do the following:
1. In OnlineGDB, click the "Fork This" button next to the "Run"
button.
2. This creates your own copy of the code that you can
edit.
3. Now you can run the code as-is, modify it, and see the
results in real-time.
By forking the code, you'll have your own workspace to experiment
freely. This hands-on practice is a great way to reinforce your
learning and explore HTML in depth. Don't hesitate to make changes and
see what happens – experimentation is key to understanding!
Ways to Experiment With the Code Snippets
Remember, the best way to learn HTML is by practicing. Try modifying the
code in our snippets:
1. Change the content of the headings and paragraphs.
2. Add more list items to the unordered list.
3. Try creating an ordered list using
<ol> instead of
<ul>.
4. Add another image (you can use "https://via.placeholder.com/150" as
the src for a placeholder
image).
In Our Next Lesson: CSS
In our next lesson, we'll dive into CSS and learn how to style our HTML
elements. Keep practicing, and happy coding!
Comments
Post a Comment