HTML beginner tutorial

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>

<h1>My Heading</h1>
<p>My paragraph.</p>

</body>
</html>
  • 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 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

HTML Headings

If you have documents with genuine headings, then there are HTML tags specifically designed just for them. HTML headings are defined with the <h1> to <h6> tags.

HTML Paragraphs

HTML paragraphs are defined with the <p> tag. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example:-

HTML Links

HTML links are defined with the <a> tag. HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. A link does not have to be text. A link can be an image or any other HTML element.

Example:

<a href=”https://www.medium.com”>This is a link</a>

HTML Images

HTML images are defined with the <img> tag.

  • src — Specifies the path to the image
  • alt — Specifies an alternate text for the image

Syntax

<img src=”url” alt=”alternatetext”>

HTML table

You can copy the following code into the body of your document and then we will go through what each tag is doing:

<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

HTML Lists

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:

Example:-

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

Example

How to visit the website live?

If you are using VS Code then read this blog.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Firdaus Jawed

Firdaus Jawed

237 Followers

Sophomore at NITP || web team member at IEEE NITP || design team, web team and tech team member at robotics club NITP || PR team coordinator at Hackslash NITP