DEV Community

loading...

HyperText mark-Up Language (HTML).

john909520 profile image John909520 ・4 min read

Introduction

What is Html? Hypertext Mark-up Language (Html) is the language for creating web pages and web applications. Hypertext means that the document can contain links that will take the user to a different part of the document or other pages once clicked. Mark-Up language refers to how computers talk to each other to control how text is presented and processed.
Html was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989.
Html uses tags and attributes to describe different types of content on your web applications
Tags mark the start of an Html element and they usually have backward and forward angle brackets.
Attributes on the other hand contain additional pieces of information. They take the form of an opening tag and the additional piece of information is placed inside.

WHY LEARN HTML

Html originally was created with the intent of defining the structure of documents e.g, headings, paragraphs, lists, etc., to facilitate sharing of scientific information between researchers.
Html is a crucial resource for web developers today, as it is widely used to format web pages with the help of the different available tags in the language.
Advantages of Learning Html:
• Create web sites
• Become a web designer
• Understand web

Applicattions Of HTML.

From the definition of Html above, we can with confidence refer to it as the language of the web. Below are some of the things that can be achieved by using Html:

  • Web Pages Development –Most of the web pages seen today on the web have been created with Html.
  • Internet Navigation – Html provides tags that are used to navigate from one page to another and are heavily used in internet navigation.
  • Responsive User interface - HTML pages nowadays work well on all platforms, mobile, tabs, desktop, or laptops owing to responsive design.

Tools Used To Write Html;

Html can not be written using word processors like Microsoft word, Rather we use Html editors. Below are some of the Html editors we use today;

  • Sublime Text 3
  • Notepad++
  • Komodo Edit

Writing Our First Html Page

`
We use the following tags to construct a basic Html page structure;

  • <!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is Html 5.
  • Html tag — This tag signals that from here on we are going to write in Html code.
  • head tag — This is where all the metadata for the page goes, stuff mostly meant for search engines and other computer programs.
  • body tag — This is where the content of the page goes. `
< !DOCTYPE html >
< html >
   < head >
      <title> This is document title</title>
   </head>  
   <body>
   </body>  
</html>
Enter fullscreen mode Exit fullscreen mode

Inside the head tag, there is the title tag that contains the name of the page as It will appear at the top of the browser's window.

Adding Content.

We add more content to our Html document in the body section of the document. We combine the use of other tags and attributes inside the body to create content that is visible to humans on the internet.

Adding Headings to Our Html Page.

We use different levels of heading tags to add headings into our Html document as shown below.

This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5
This is a heading 6

Adding More Text Into Our Html

We add text to our Html page by using the <p> tag. We place all our text in between the opening <p> and closing </p> tag. This tag is used to create a new paragraph.
For Example,

<!DOCTYPE html>
<html>
   <head>
      <title>This is our first html document</title>
   </head>  
   <body>
      <h1>This is a heading</h1>
      <p>Hello World!</p>
   </body>  
</html>
Enter fullscreen mode Exit fullscreen mode

Adding Links To Our Html Pages:

We add links to our pages by using the anchor <a> tag.
The anchor tag uses an attribute that contains an address to the page we are linking to.

The first part of the attribute contains the page that will open once the link is clicked.
The second part shows the text that will be displayed to the viewer of the page.

<!DOCTYPE html>
<html>
   <head>
      <title>This is our first html document</title>
   </head>  
   <body>
      <h1>This is a heading</h1>
      <p>Hello World!</p>
      <p><a href="https://shop.techsolsoftwares.com/blog/">Learn More On Our Blog</a></p>
  </body>   
</html>
Enter fullscreen mode Exit fullscreen mode

Adding Images to Our Html Page.

We add images to our Html page using the Image tag which also has an attribute element that points to the location of the image.

Creating a List of items on our Html Page;

Three different types of lists can be created on an Html page;

1 Ordered Lists – We use <ol> to define an ordered list. Inside the <ol> we create the list using <li> tag.

For example;

<ol> 
        -<li>An item </li>
        - <li>Another item </li>
        -<li>Another goes here </li> 
</ol>
Enter fullscreen mode Exit fullscreen mode

2 Unordered List - We use an unordered list tag to define an unordered list.

<ul> 
       - <li>An item </li>
       - <li>Another item </li>
       - <li>Another goes here </li> 
</ul>
Enter fullscreen mode Exit fullscreen mode

3 Definition List- We can include a definition list in our html page using <dl>. Inside the <dl> we will include the definition term <dt> and the definition <dd>.
For example;

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Conclusion:

In this article, we have defined Html, Discussed why it is important to learn and its applications. We have also covered some basic syntax to get us started before diving deep into it.

Discussion (1)

Collapse
jmanuel56 profile image
Jose Manuel Nerja

HTML to the power!

Forem Open with the Forem app