HTML & CSS
Parsa Hejabi
HTML
HTML
Hyper Text Markup Language
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"
HTML & CSS
By Parsa Hejabi
HTML & CSS
This slide was used for an HTML and CSS tutorial made on April 13th.
