web/lang/html.md

10 KiB
Raw Permalink Blame History

Html

Template

Template 0

<!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 !

<!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

<!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

<link rel="stylesheet" href="styles.css">

Semantic

Header

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

div

<header>
  <nav></nav>
</header>


<main>
<section>
    </section>
    <section>
        <article></article>
    </section>
    <aside></aside>
</main>


<footer>
    
</footer>

Table

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Form

Upload files

multiple files

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <button type="submit">Upload</button>
</form>

form


<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

<!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

<br>
<html lang="en"> <head>
<!-- * 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>

H1

H2

H3

H4

H5
H6

Parrafo

Negrita Italica Tachada Chiquita

Soy un boton

Link Link Index Link Index Link Index

Link en una nueva pagina

<!-- * 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>
</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>
<table>
		<tr>
			<th>#</th>
			<th>#</th>
			<th>#</th>
		</tr>

		<tr>
			<td>

			</td>
		</tr>
</table>
<table>
		<tr>
			<th>Mul</th>
		</tr>

		<tr>
			<td>

			</td>
		</tr>
</table>
<table>
    <caption>5 times table (5 × 025)</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>
<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>

<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>
<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>