186 lines
6.2 KiB
HTML
186 lines
6.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Webdev Speedrun - HTML</title>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
We are inside a div
|
|
<div>
|
|
<p>I am a Paragraph inside another div</p>
|
|
<h1>This is a H1</h1>
|
|
<h2>This is a H2</h2>
|
|
<h3>This is a H3</h3>
|
|
<h4>This is a H4</h4>
|
|
<h5>This is a H5</h5>
|
|
<span>I am a Span</span>
|
|
</div>
|
|
<div>
|
|
<p>Here is a Link</p>
|
|
<a href="/">I am a link to home</a>
|
|
</div>
|
|
<div>
|
|
<p>Here is an Image:</p>
|
|
<img src="https://source.unsplash.com/random/300x300" />
|
|
</div>
|
|
<div>
|
|
<p>Here is an unordered list:</p>
|
|
<ul>
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
<li>Item 3</li>
|
|
</ul>
|
|
|
|
<p>Here is an ordered list:</p>
|
|
<ol>
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
<li>Item 3</li>
|
|
</ol>
|
|
</div>
|
|
<div>
|
|
<p>Here is a Table:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Header 1</th>
|
|
<th>Header 2</th>
|
|
<th>Header 3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<p>Here is a Form:</p>
|
|
<form>
|
|
<div>
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="name" />
|
|
</div>
|
|
<div>
|
|
<label for="email">Email:</label>
|
|
<input type="email" id="email" name="email" />
|
|
</div>
|
|
<div>
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" name="password" />
|
|
</div>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</div>
|
|
<div>
|
|
<p>Here are various different Input Types:</p>
|
|
<div>
|
|
<label for="button">Button:</label>
|
|
<input type="button" id="button" name="button" />
|
|
</div>
|
|
<div>
|
|
<label for="checkbox">Checkbox:</label>
|
|
<input type="checkbox" id="checkbox" name="checkbox" />
|
|
</div>
|
|
<div>
|
|
<label for="color">Color:</label>
|
|
<input type="color" id="color" name="color" />
|
|
</div>
|
|
<div>
|
|
<label for="date">Date:</label>
|
|
<input type="date" id="date" name="date" />
|
|
</div>
|
|
<div>
|
|
<label for="datetime-local">Datetime-local:</label>
|
|
<input type="datetime-local" id="datetime-local" name="datetime-local" />
|
|
</div>
|
|
<div>
|
|
<label for="email">Email:</label>
|
|
<input type="email" id="email" name="email" />
|
|
</div>
|
|
<div>
|
|
<label for="file">File:</label>
|
|
<input type="file" id="file" name="file" />
|
|
</div>
|
|
<div>
|
|
<label for="hidden">Hidden:</label>
|
|
<input type="hidden" id="hidden" name="hidden" />
|
|
</div>
|
|
<div>
|
|
<label for="image">Image:</label>
|
|
<input type="image" id="image" name="image" />
|
|
</div>
|
|
<div>
|
|
<label for="month">Month:</label>
|
|
<input type="month" id="month" name="month" />
|
|
</div>
|
|
<div>
|
|
<label for="number">Number:</label>
|
|
<input type="number" id="number" name="number" />
|
|
</div>
|
|
<div>
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" name="password" />
|
|
</div>
|
|
<div>
|
|
<label for="radio">Radio:</label>
|
|
<input type="radio" id="radio" name="radio" />
|
|
</div>
|
|
<div>
|
|
<label for="range">Range:</label>
|
|
<input type="range" id="range" name="range" />
|
|
</div>
|
|
<div>
|
|
<label for="reset">Reset:</label>
|
|
<input type="reset" id="reset" name="reset" />
|
|
</div>
|
|
<div>
|
|
<label for="search">Search:</label>
|
|
<input type="search" id="search" name="search" />
|
|
</div>
|
|
<div>
|
|
<label for="submit">Submit:</label>
|
|
<input type="submit" id="submit" name="submit" />
|
|
</div>
|
|
<div>
|
|
<label for="tel">Tel:</label>
|
|
<input type="tel" id="tel" name="tel" />
|
|
</div>
|
|
<div>
|
|
<label for="text">Text:</label>
|
|
<input type="text" id="text" name="text" />
|
|
</div>
|
|
<div>
|
|
<label for="time">Time:</label>
|
|
<input type="time" id="time" name="time" />
|
|
</div>
|
|
<div>
|
|
<label for="url">Url:</label>
|
|
<input type="url" id="url" name="url" />
|
|
</div>
|
|
<div>
|
|
<label for="week">Week:</label>
|
|
<input type="week" id="week" name="week" />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |