HTML

HTML?

HTML is the standard markup language for creating Web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

Simple HTML Document

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

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

</body>
</html>

Explanation

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

HTML Links - Hyperlinks

  • 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.

Syntax : 

<a href="url">link text</a>

Example

<a href="https://app.revature.com">Visit our learning platform</a>

HTML Images

  • In HTML, images are defined with the <img> tag.
  • The <img> tag is empty, it contains attributes only, and does not have a closing tag.
  • The src attribute specifies the URL (web address) of the image:

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

HTML Lists

There are two types of lists in HTML :

  • Ordered List
  • Unordered List

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. 

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. 

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>