HTML y CSS
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
Ejemplo 1: Estructura Básica
Copiar el código en plunker.
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>
Código CSS
<!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 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:
y el archivo style.css:
Ejemplo 2: Tablas y Grillas:
Copiar el código en plunker.
Código HTML
<!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>
Código CSS
/* 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
Ejemplo 3: Forms
Ver en w3shools https://www.w3schools.com/html/html_forms.asp
Bootstrap
Es un framework de código abierto que es desarrollado por un equipo de desarrolladores de Twitter. Sirve para construir componentes de interfaz usuario a partir de HTML, CSS, y Javascript. Contiene una serie de templates para crear botones, formas, barras de navegación y otros componentes de interfaz.
En el siguiente ejemplo tenemos una página html sin ningún estilo particular. Por favor copie el código en plunker para ver la página:
Ahora, remplazamos el tag head para agregarlos estilos de bootstrap, por: