basicohtml - keblato/TutorialesTalleres-Angular GitHub Wiki
| Para realizar este tutorial por favor abra stackblitz |
|---|
HTML es un lenguaje de marcado estandarizado hipertexto Hypertext Markup Language, un sistema estandarizado para marcar archivos de texto y lograr una apariencia de fuente, color, gráficos y efectos de hipervínculos en las páginas Web.
Con las marcas (Tags) Html definimos la estructura del documento y con CSS definimos el estilo, por ejemplo;un color para el fondo, uno para el título, la font y el tamaño de la letra
Una vez en stackblitz ubique el archivo index.html y copie la siguiente estructura de código html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de la Página</title>
</head>
<body>
<h1>Encabezado nivel 1</h1>
<p>Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde humor of willekeurig gekozen woorden die nog niet half geloofwaardig ogen. etc.</p>
</body>
</html>La anterior estructura tiene la etiqueta raíz html y está dividido en dos secciones:
- Head: Contenedor con todas las etiquetas de configuración de estilos(css), archivos javascript y metadata del sitio como el título de la página y la codificación de caracteres utilizada.
- Body: Contenedor de todas las etiquetas visuales del sitio. Etiquetas como títulos, hipervínculos, imágenes, tablas, formularios, etc.
En el mismo archivo index.html dentro de la etiqueta adicione la etiqueta <style> junto con todo su contenido, tal como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de la Página</title>
<style>
body {
background-color: lightyellow;
}
h1 {
color: black;
text-align: center;
}
p {
font-family: times;
font-size: 12px;
}
</style>
</head>
<body>
<h1>Encabezado nivel 1</h1>
<p>Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde humor of willekeurig gekozen woorden die nog niet half geloofwaardig ogen. etc.</p>
</body>
</html>
La sintaxis básica de CSS consiste de un conjunto de reglas donde cada una está asociada con un elemento de marcado estándar y define las propiedades (color, amaño, etc.) del elemento. Del ejemplo anterior tenemos tres reglas: una para body, otra para h1 y otra para p.
En el ejemplo anterior todos los párrafos del documento tendrán el estilo de font-family igual a times y tamaño 12. Es posible hacer diferencias entre los mismos elementos definiendo un atributo llamado class de la siguiente forma:
En el CSS:
...
p {
font-family: times;
font-size: 12px;
}
p.centrado {
font-family: times;
font-size: 12px;
text-align: center
}
...
En el HTML:
...
<p>Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde humor of willekeurig gekozen woorden die nog niet half geloofwaardig ogen. etc.</p>
<p>Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde humor of willekeurig gekozen woorden die nog niet half geloofwaardig ogen. etc.</p>
<p class="centrado"> Lorem Ipsum komt uit de secties 1.10.32 en 1.10.33 van "de Finibus Bonorum et Malorum" (De uitersten van goed en kwaad) door Cicero, geschreven in 45 v.Chr. Dit boek is een verhandeling over de theorie der ethiek, erg populair tijdens de renaissance.</p>
...
Normalmente la estructura y el estilo también están separados a nivel de los archivos. Los estilos se definen en archivos .css y se incluyen en los html que los va a utilizar. Modificando el ejemplo anterior tenemos:
<html>
<head>
<meta charset="UTF-8">
<title>Título de la Página</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Encabezado nivel 1</h1>
<p>Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde humor of willekeurig gekozen woorden die nog niet half geloofwaardig ogen. etc.</p>
<p class="centrado"> Lorem Ipsum komt uit de secties 1.10.32 en 1.10.33 van "de Finibus Bonorum et Malorum" (De uitersten van goed en kwaad) door Cicero, geschreven in 45 v.Chr. Dit boek is een verhandeling over de theorie der ethiek, erg populair tijdens de renaissance.</p>
</body>
</html>
y el archivo style.css:
/* Styles go here */
body {
background-color: lightyellow;
}
h1 {
color: black;
text-align: center;
}
p {
font-family: times;
font-size: 12px;
}
p.centrado {
font-family: times;
font-size: 12px;
text-align: center
}
Una tabla HTML se define con la <table> etiqueta.
Cada fila de la tabla se define con la <tr> etiqueta. Un encabezado de la tabla se define con la <th> etiqueta. Por defecto, encabezados de la tabla están en negrita y centrado.
A los datos de cada celda/fila de la tabla se define con la <td> etiqueta.
Copiar el código en StackBlitz.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="datagrid">
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Copiar los siguientes estilos.
/* Styles go here */
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 3px 10px;
}
.datagrid table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
background-color: #006699;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
border-left: 4px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #E1EEF4;
font-size: 12px;
font-weight: normal;
}
.datagrid table tbody .alt td {
background: #E1EEF4;
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}Puede probar más ejemplos de tablas y grillas con: http://tablestyler.com
Ver en w3shools https://www.w3schools.com/html/html_forms.asp