DEV Community

Alaguselvan T
Alaguselvan T

Posted on • Edited 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.
Syntax:<a href="https://www.google.com">Google</a>
-"Markup language" is a Computer language used to define the structure, formatting, or presentation of text/data using special symbols called tags.These languages are more readable than usual programming languages with strict syntax.

Examples of Markup Languages
HTML – used to create web pages
XML(extensible markup Language) – used to store and transport data

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

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

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

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

Image Tag:<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">

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

Example:

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

Ordered List<ol>: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

Division Tag<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)