DEV Community

Alaguselvan T
Alaguselvan T

Posted on

Introduction To HTML

#webdev #beginners #tutorial #html

DAY 1
HTML-HyperText Markup Language
1.What is HTML?
- HTML is the standard markup language for creating Web pages.
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content

2.What is Hyper Text Markup Language?
-"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites
-"Markup languages" are computer languages that are used to structure, format, or define relationships between different parts of text documents with the help of symbols or tags inserted in the document. These languages are more readable than usual programming languages with strict syntax.

3.HTML Tags
-Tags act as commands that tell the browser how to format and display text or media.
-They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.
Example:<b> </b>

4.Basic Types of HTML Tags

<h1> to <h6>: Structure sections with headings, ranging from largest (<h1>) down to smallest (<h6>).
Example:<h3>This is heading 3</h3>

<p>: standard readable paragraphs.
Example:<p>This is a paragraph.</p>

<a>: Builds active hyperlinks using the mandatory href attribute.
Example:<a href="https://www.w3schools.com">This is a link</a>

<img>: Places images via the src attribute.self-closing tag without a closing partner.
Example:<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

<ul>-Unordered List:Generate lists,sets up bullet points

Example:

  <ul>
  <li>Chinchilla</li>
  <li>Capybara</li>
  <li>Quokka</li>
  </ul>
Enter fullscreen mode Exit fullscreen mode

<ol>-Ordered List:creates numbered rows.

Example:

  <ol>
  <li>Preheat the oven.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 20 minutes.</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode

<div>: Serves as a generic block-level container used for organizing layout segments and div used for styling and Layout
Example:

<div class="profile-card">
  <h2>Jane Doe</h2>
  <p>Web Developer based in New York.</p>
  <button>Contact Me</button>
</div>
Enter fullscreen mode Exit fullscreen mode

5.What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
Example:<tagname> Content goes here... </tagname>

6.Example of Html Document Structure

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information(data about data) about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

Top comments (0)