HTML Lexicon
HTML (HyperText Markup Language) is the foundation of web development, providing the structure for all web pages. To create effective and well-structured websites, it’s essential to familiarize yourself with the key components of HTML. This lexicon will guide you through important terms and concepts, equipping you with the knowledge you need to start building your own web pages confidently.
HTML (HyperText Markup Language)
HTML is the standard markup language used to create web pages. It structures the content on the web, defining elements like headings, paragraphs, links, images, and more.
Elements
Elements are the building blocks of HTML. They are defined by tags and can contain attributes that provide additional information about the element. Example:
<p>This is a paragraph.</p>
3. Tags
Tags are used to create elements in HTML. They typically come in pairs: an opening tag and a closing tag. Example:
<h1>This is a heading</h1>
4. Attributes
Attributes provide additional information about an element. They are included in the opening tag and come in name/value pairs. Example:
<a href="https://www.example.com">Visit Example</a>
5. Headings
Headings are used to define the structure of your content. HTML provides six levels of headings, from <h1>
to <h6>
, with <h1>
being the most important. Example:
<h1>Main Title</h1>
<h2>Subheading</h2>
6. Paragraphs
Paragraphs are defined using the <p>
tag and are used to group together related sentences. Example:
<p>This is a paragraph of text.</p>
7. Links
Links are created using the tag, allowing users to navigate to other pages or websites. Example:
<a href="https://www.example.com">Click here to visit Example</a>
8. Images
Images are embedded using the <img>
tag, which requires the src
attribute to specify the image file path. Example:
<img src="image.jpg" alt="Description of image">
9. Lists
HTML supports ordered (<ol>
) and unordered lists (<ul>
), with list items defined by the <li>
tag. Example:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Sample HTML Page
Here’s a simple example of a complete HTML page that incorporates some of these elements:
<!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 sample paragraph on my first HTML page.</p>
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="A sample image">
<h2>My Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>Ice Cream</li>
</ul>
</body>
</html>
Index: Getting Started with HTML
Finding a Good HTML Editor
Using a dedicated code editor, like VSCodium or Visual Studio Code, can significantly enhance your HTML coding experience. Code editors come equipped with features such as syntax highlighting, auto-completion, and tag closing, making it easier and more efficient to write and edit your HTML. While a simple text editor will work in a pinch, it lacks these helpful tools, which can slow down your workflow and increase the chances of errors.
Steps to Create Your First HTML Page
- Create a Directory
- Start by creating a new directory (folder) on your computer where you’ll store your HTML project files. This will help keep your work organized.
- Create the
index.html
File- Inside your new directory, create a file named
index.html
. This will be the main file for your web page.
- Inside your new directory, create a file named
- Copy the Provided Template
- Copy the HTML template provided in this lexicon and paste it into your
index.html
file. This gives you a solid foundation to build upon.
- Copy the HTML template provided in this lexicon and paste it into your
- Start Adding Elements
- Begin adding HTML elements to your file as explained in the lexicon. Experiment with different tags, attributes, and content to customize your page.
- Save Your Work Regularly
- Make sure to save your changes frequently. It’s also a good practice to save incremental versions of your file (e.g.,
index_v1.html
,index_v2.html
, etc.). This allows you to revert to earlier versions if needed, making it easier to track changes and improvements.
- Make sure to save your changes frequently. It’s also a good practice to save incremental versions of your file (e.g.,
- Run Your HTML File in a Local Browser
- To view your HTML page, open your
index.html
file in a web browser. You can do this by double-clicking the file or right-clicking and selecting “Open with” and choosing your preferred browser.
- To view your HTML page, open your
Next Steps: Exploring CSS
Once you’re comfortable with HTML, the next step is to enhance your web pages with CSS (Cascading Style Sheets). CSS allows you to style your HTML elements, giving your site a more polished and visually appealing look. Stay tuned for our upcoming guide on getting started with CSS!