# HTML
Tutorial from [[W3 Schools]] over [[HTML]]
First Quiz before tutorial: 25/40
## Tutorial
##### Introduction
- stands for Hyper Text Markup Language
- is the standard markup language for creating Web pages
- consists of a series of [[element|elements]]
[[web browser|web browsers]] read and display HTML documents
##### Basic Outline
`<!DOCTYPE html>` defines the document as HTML5, all HTML documents must start with this declaration
`<html>` root element
`<head>` contains meta info
`<title>` specifies a title for the page (shows in browser's title bar/page's tab)
`<body>` contains all visible content
`<h1>` defines large heading
`<p>` defines paragraph
visualization of page structure:
![[Pasted image 20231128193752.png]]
##### History
some highlighted notes
|Year | Version |
|---|---|
|1989| Tim Berners-Lee invented www |
| 1991| Tim Berners-Lee invented HTML |
|1995| Recommended: HTML 2.0|
|1997 | Recommended: HTML 3.2 |
| 2014 | Recommended: HTML5 |
##### File from scratch
Use either `.htm` or `.html` file extension - there is no difference.
Encoding "UTF-8" is preferred for HTML files
##### Basic Elements/Tags Details
###### `<!DOCTYPE>` declaration
- represents the document type
- helps browsers display web pages correctly
- must only appear once, at top of page (before any HTML tags)
- not case sensetive
- Declaration for [[HTML|HTML5]] is `<!DOCTYPE html>`
###### Headings
- defined with `<h1>` to `<h6>`, most to least important
###### Paragraphs
- defined with `<p>` tag
###### Links
- defined with `<a>` tag
- destination is specified in `href` [[attributes|attributes]]
- Example: `<a href="https://www.w3schools.com">This is a link</a>`
###### Images
- defined with `<img>`
- The source file (`src`), alternative text (`alt`), `width`, and `height` are provided as attributes
- Example: `<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">`
##### View HTML Source
Either:
- CTRL + U
- right-click, "View Page Source"
Can also inspect a specific HTML element by right-click that element and choose "Inspect"
- will see both [[HTML]] and [[CSS]]
- can also edit this
## Forms
## Graphics
## Media
## APIs
## Examples
## References