DEV Community

Cover image for Introduction and HTML Tutorials: Building the Websites #1
Zahir Hadi Athallah
Zahir Hadi Athallah

Posted on • Updated on

Introduction and HTML Tutorials: Building the Websites #1

Introduction to HTML

HTML (Hypertext Markup Language) is a markup language used to build web pages. In this article, we will introduce HTML to you and provide basic tutorials on how to use HTML tags to create the structure and basic content of web pages. Additionally, we will provide some simple examples to clarify these concepts.

What is HTML?

HTML is a markup language used to structure and display web pages. HTML web pages consist of elements organized using HTML tags. Each HTML tag provides instructions to the browser on how to display that element to the user.

Basic HTML Tutorials

  • Basic Structure of an HTML Page

Every HTML page should start with the <html> tag and end with the </html> tag. The content of the web page is typically divided into two main sections: the <head> and the <body>. The <head> section contains metadata about the web page, such as the page title, links to CSS or JavaScript files, etc. The <body> section contains the content that will be displayed on the web page.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to my web page!</h1>
    <p>This is an example paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Creating Headings and Paragraphs

You can use HTML heading tags (<h1> to <h6>) to mark up headings on your web page. The <p> tag is used to create paragraphs.

Example :

<h1>This is a web page title</h1>
<h2>This is a subheading</h2>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
Enter fullscreen mode Exit fullscreen mode
  • Creating Lists

You can create lists using the <ul> (unordered list) tag for unordered lists or the <ol> (ordered list) tag for ordered lists. Each item in the list is placed between <li> tags.

Example :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
  • Adding Images

You can display images on web pages using the <img> tag. You need to provide the src attribute, which contains the URL or path to the image you want to display.

Example :

<img src="image.jpg" alt="Image Description">
Enter fullscreen mode Exit fullscreen mode
  • Creating Links

To create links to other web pages, use the <a> tag. You need to provide the href attribute, which contains the URL or path to the target web page.

Example :

<a href="https://www.example.com">Visit Example Website</a>
Enter fullscreen mode Exit fullscreen mode
  • Formatting Text

HTML provides tags to format text, such as bold, italic, and underline. You can use the <b> tag for bold, <i> tag for italic, and <u> tag for underline

Example :

<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
Enter fullscreen mode Exit fullscreen mode

Closing:

HTML is the foundation of web development, and understanding its basics is crucial for anyone interested in building websites. In this article, we introduced HTML and provided tutorials on essential HTML tags and attributes, Happy coding!

Top comments (0)