628 lines
10 KiB
Markdown
628 lines
10 KiB
Markdown
# Html
|
||
|
||
## Template
|
||
|
||
**Template 0**
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
<body>
|
||
|
||
<form action="" method="get">
|
||
|
||
<input type="text" name="" id="">
|
||
<button type="button"></button>
|
||
</form>
|
||
|
||
<style></style>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
**Template !**
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title></title>
|
||
</head>
|
||
<body>
|
||
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
|
||
**Template 2**
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title></title>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<header>
|
||
<nav>
|
||
|
||
</nav>
|
||
</header>
|
||
|
||
|
||
<main>
|
||
<section>
|
||
</section>
|
||
<section>
|
||
<article></article>
|
||
</section>
|
||
</main>
|
||
|
||
|
||
<footer>
|
||
|
||
</footer>
|
||
|
||
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## Import
|
||
|
||
|
||
**CSS import**
|
||
```html
|
||
<link rel="stylesheet" href="styles.css">
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## Semantic
|
||
|
||
**Header**
|
||
|
||
|
||
```html
|
||
<h1></h1>
|
||
<h2></h2>
|
||
<h3></h3>
|
||
<h4></h4>
|
||
<h5></h5>
|
||
<h6></h6>
|
||
```
|
||
|
||
**div**
|
||
```html
|
||
<header>
|
||
<nav></nav>
|
||
</header>
|
||
|
||
|
||
<main>
|
||
<section>
|
||
</section>
|
||
<section>
|
||
<article></article>
|
||
</section>
|
||
<aside></aside>
|
||
</main>
|
||
|
||
|
||
<footer>
|
||
|
||
</footer>
|
||
```
|
||
|
||
|
||
## Table
|
||
|
||
```html
|
||
<table>
|
||
<tr>
|
||
<th></th>
|
||
<th></th>
|
||
<th></th>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
### Form
|
||
|
||
## Upload files
|
||
|
||
`multiple files`
|
||
|
||
```html
|
||
<form action="upload.php" method="post" enctype="multipart/form-data">
|
||
<input type="file" name="files[]" multiple>
|
||
<button type="submit">Upload</button>
|
||
</form>
|
||
```
|
||
|
||
|
||
**form**
|
||
|
||
```html
|
||
|
||
<form method="POST" enctype="multipart/form-data">
|
||
<input type="file" name="file">
|
||
<button type="submit">Upload & Get Hash</button>
|
||
</form>
|
||
|
||
<form>
|
||
</form>
|
||
|
||
<input type="date" required>
|
||
<input type="date">
|
||
<input type="time">
|
||
<input type="email">
|
||
<input type="tel">
|
||
<input type="color">
|
||
<input type="range">
|
||
<input type="number">
|
||
<input type="submit" value="Submit">
|
||
|
||
|
||
<input type="email">
|
||
<input type="tel">
|
||
<input type="range">
|
||
|
||
<input type="submit" value="Submit">
|
||
|
||
<form>
|
||
<input type="date" required>
|
||
<input type="date">
|
||
<input type="time">
|
||
<input type="email">
|
||
<input type="tel">
|
||
<input type="color">
|
||
<input type="range">
|
||
<input type="number">
|
||
<input list="facultades" name="facultad">
|
||
<datalist id="facultades">
|
||
<option value="Ingeniería de Sistemas">
|
||
<option value="Ingeniería Civil">
|
||
<option value="Ingeniería Industrial">
|
||
</datalist>
|
||
</form>
|
||
|
||
```
|
||
|
||
### General
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Titulo</title>
|
||
|
||
<!-- * Posicionamiento web | Palabras cables-->
|
||
<meta name="keywords" content="Contenido,Contenido2,Contenido3">
|
||
|
||
<!-- * Describir la pagina -->
|
||
<!-- * Entre 70 a 140 carracteres -->
|
||
<meta name="description" content="Descripcion del contenido">
|
||
|
||
<!-- * El author de la pagina -->
|
||
<meta name="author" content="El autor de la pagina">
|
||
|
||
<!-- * Copyright -->
|
||
<meta name="Copyright" content="La empresa inc.">
|
||
|
||
<!-- * Indexada o no -->
|
||
<meta name="robots" content="index">
|
||
<meta name="robots" content="noindex">
|
||
|
||
<!-- * Ni idea que es -->
|
||
<meta name="robots" content="follow">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- * index.html -->
|
||
<!-- * Comentario en HTML -->
|
||
|
||
<!-- * Titulos con valor semantico -->
|
||
<h1>H1</h1>
|
||
<h2>H2</h2>
|
||
<h3>H3</h3>
|
||
<h4>H4</h4>
|
||
<h5>H5</h5>
|
||
<h6>H6</h6>
|
||
|
||
<!-- * Typos de textos -->
|
||
<p>Parrafo</p>
|
||
<b>Negrita</b>
|
||
<i>Italica</i>
|
||
<strike>Tachada</strike>
|
||
<small>Chiquita</small>
|
||
|
||
<!-- * Salto de linea -->
|
||
<br>
|
||
<br>
|
||
|
||
<!-- * Botton -->
|
||
<button atributo="valor">Soy un boton</button>
|
||
|
||
<!-- * Links -->
|
||
<a href="#">Link</a>
|
||
<a href="index.html">Link Index</a>
|
||
<a href="../">Link Index</a>
|
||
<a href="./index.html">Link Index</a>
|
||
|
||
<a href="./index.html" target="_blank">Link en una nueva pagina</a>
|
||
|
||
<!-- ? Listas -->
|
||
|
||
<!-- * Lista desordenada -->
|
||
<ul>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
</ul>
|
||
|
||
<!-- * Lista ordenadas -->
|
||
<ol>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
</ol>
|
||
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### Deprecate
|
||
|
||
```html
|
||
<br>
|
||
```
|
||
|
||
|
||
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Titulo</title>
|
||
|
||
<!-- * Posicionamiento web | Palabras cables-->
|
||
<meta name="keywords" content="Contenido,Contenido2,Contenido3">
|
||
|
||
<!-- * Describir la pagina -->
|
||
<!-- * Entre 70 a 140 carracteres -->
|
||
<meta name="description" content="Descripcion del contenido">
|
||
|
||
<!-- * El author de la pagina -->
|
||
<meta name="author" content="El autor de la pagina">
|
||
|
||
<!-- * Copyright -->
|
||
<meta name="Copyright" content="La empresa inc.">
|
||
|
||
<!-- * Indexada o no -->
|
||
<meta name="robots" content="index">
|
||
<meta name="robots" content="noindex">
|
||
|
||
<!-- * Ni idea que es -->
|
||
<meta name="robots" content="follow">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- * index.html -->
|
||
<!-- * Comentario en HTML -->
|
||
|
||
<!-- * Titulos con valor semantico -->
|
||
<h1>H1</h1>
|
||
<h2>H2</h2>
|
||
<h3>H3</h3>
|
||
<h4>H4</h4>
|
||
<h5>H5</h5>
|
||
<h6>H6</h6>
|
||
|
||
<!-- * Typos de textos -->
|
||
<p>Parrafo</p>
|
||
<b>Negrita</b>
|
||
<i>Italica</i>
|
||
<strike>Tachada</strike>
|
||
<small>Chiquita</small>
|
||
|
||
<!-- * Salto de linea -->
|
||
<br>
|
||
<br>
|
||
|
||
<!-- * Botton -->
|
||
<button atributo="valor">Soy un boton</button>
|
||
|
||
<!-- * Links -->
|
||
<a href="#">Link</a>
|
||
<a href="index.html">Link Index</a>
|
||
<a href="../">Link Index</a>
|
||
<a href="./index.html">Link Index</a>
|
||
|
||
<a href="./index.html" target="_blank">Link en una nueva pagina</a>
|
||
|
||
<!-- ? Listas -->
|
||
|
||
<!-- * Lista desordenada -->
|
||
<ul>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
</ul>
|
||
|
||
<!-- * Lista ordenadas -->
|
||
<ol>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
<li>Esto es una lista</li>
|
||
</ol>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|
||
|
||
```html
|
||
<table class="database-data">
|
||
<tr class="tr-head">
|
||
<th>#</th>
|
||
<th>Nombre</th>
|
||
<th>Apellido</th>
|
||
<th class="test">Email</th>
|
||
<th>Edad</th>
|
||
<th class="test">Carrera</th>
|
||
<th class="a">Acciones</th>
|
||
</tr>
|
||
<tr class="database-no-data display-none">
|
||
<td class="database-no-data" colspan="7">
|
||
No hay resultados.
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
```html
|
||
<table>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>#</th>
|
||
<th>#</th>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
|
||
```html
|
||
<table>
|
||
<tr>
|
||
<th>Mul</th>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
```html
|
||
<table>
|
||
<caption>5 times table (5 × 0–25)</caption>
|
||
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">n</th>
|
||
<th scope="col">5 × n</th>
|
||
<th scope="col">Result</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">0</th>
|
||
<td>5 × 0</td>
|
||
<td>0</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">1</th>
|
||
<td>5 × 1</td>
|
||
<td>5</td>
|
||
</tr>
|
||
<!-- repeat rows -->
|
||
</tbody>
|
||
</table>
|
||
```
|
||
|
||
|
||
```html
|
||
<table>
|
||
<caption>@Model.msg</caption>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">n</th>
|
||
<th scope="col">Left</th>
|
||
<th scope="col">Right</th>
|
||
<th scope="col">Result</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach (var row in Model.rows)
|
||
{
|
||
<tr>
|
||
<th scope="row">@row.N</th>
|
||
<td>@row.Left</td>
|
||
<td>@row.Right</td>
|
||
<td>@row.Result</td>
|
||
</tr>
|
||
}
|
||
</tbody>
|
||
</table>
|
||
|
||
```
|
||
|
||
|
||
```html
|
||
<table>
|
||
<caption></caption>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">#</th>
|
||
<th scope="col">#</th>
|
||
<th scope="col">#</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
@foreach (var row in Model.rows)
|
||
{
|
||
<tr>
|
||
<th scope="row">@row.N</th>
|
||
<td>@row.Left</td>
|
||
<td>@row.Right</td>
|
||
<td>@row.Result</td>
|
||
</tr>
|
||
}
|
||
</tbody>
|
||
</table>
|
||
|
||
```
|
||
|
||
|
||
```
|
||
@{
|
||
Layout = null;
|
||
@model Laboratorio201.Models.WS.MulTable.MulTable
|
||
}
|
||
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
<head>
|
||
<meta name="viewport" content="width=device-width" />
|
||
<title></title>
|
||
</head>
|
||
<body>
|
||
<div>
|
||
<form action="/Home/Index" method="post">
|
||
<input type="number" name="val" placeholder="10" />
|
||
<button type="submit">Send</button>
|
||
</form>
|
||
@if (String.IsNullOrEmpty(Model.msg) || Model.msg == "Error parse: try a number")
|
||
{
|
||
<h2>Tabla de mul</h2>
|
||
|
||
if (Model.msg == "Error parse: try a number")
|
||
{
|
||
<p>@Model.msg</p>
|
||
}
|
||
}
|
||
else
|
||
{
|
||
<h2></h2>
|
||
|
||
|
||
<table>
|
||
<caption>@Model.msg</caption>
|
||
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Mul</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
@foreach (var row in Model.result)
|
||
{
|
||
<tr>
|
||
<th scope="row">Table:</th>
|
||
<td>@row</td>
|
||
</tr>
|
||
}
|
||
</tbody>
|
||
</table>
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
<style>
|
||
h1 {color:red;}
|
||
p {color:blue;}
|
||
</style>
|
||
|
||
|
||
class="fixed"
|
||
<style>
|
||
table.fixed {
|
||
table-layout: fixed;
|
||
width: 100%;
|
||
}
|
||
|
||
table.fixed th,
|
||
table.fixed td {
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
```
|