HTML & CSS

Parsa Hejabi

HTML

HTML

Hyper Text Markup Language

A markup language is a computer language that uses tags to define elements within a document. It is human-readable, meaning markup files contain standard words, rather than typical programming syntax. While several markup languages exist, the two most popular are HTML and XML.

0
 Advanced issue found
▲

Elements

Element attributes

Nesting elements

<p>My cat is <strong>very</strong> grumpy.</p>

Empty elements

<img src="images/firefox-icon.png" alt="My test image">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/avatar.png" alt="My test image">
  </body>
</html>
  • 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

Anatomy of an HTML document

Useful
HTML
tags

Images

<img src="avatar.png" alt="My test image">

Headings

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Paragraphs

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Lists

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

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

Links

<a href="https://www.parsahejabi.com">This is a link</a>

Button

<button>Click me</button>

Empty elements

<br> OR <br />

Attributes!

  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"
Made with Slides.com