jueves, 1 de marzo de 2018

¿Qué es HTML?

HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

desarrollo web


Marcadores HTML

El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>,/). El HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir o hacer referencia a un tipo de programa llamado script, el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.


Elementos
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento> y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>. Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>. Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf» como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título «Marcado HTML» al principio de esta sección.

El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta).

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en GNU/Linux, el Bloc de notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.


Iniciacion a html


¿Qué es CSS?

Hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2 Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales, como las hojas de estilo auditivas.

iniciacion a css


Sintaxis

CSS tiene una sintaxis simple, y usa un conjunto de palabras clave en inglés para especificar los nombres de varias propiedades de estilo.
Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de declaración.


Selectores
Los selectores declaran qué etiquetas se le aplican los estilos que coincidan con la etiqueta o atributo señalados en la regla.

Los selectores pueden aplicarse a:

•Todos los elementos de un tipo, como los párrafos <p>
•Elementos seguidos de un atributo, en particular:
-id: un identificador único para la etiqueta.
-class: un identificador para anotar múltiples elementos.
Las clases y los ids son sensibles a las mayúsculas, comienzan con letras, y pueden incluir caracteres alfanuméricos y guiones bajos. Una clase aplica para cualquier número de elementos. Un id aplica para un solo elemento.


Herencia
La herencia es una característica clave en CSS; el cual se basa en la relación ancestro-descendiente para operar. La herencia es el mecanismo por el cual las propiedades no solo se aplican a un solo elemento, sino también a sus descendientes. La herencia se basa en el árbol del documento, el cual es la jerarquía de los elementos XHTML en una página basada en el anidamiento. Los elementos descendientes pueden heredar los valores de las propiedades CSS de un elemento ancestro.

id en html y css


Soporte por los navegadores web

Cada navegador web usa un motor de renderizado para renderizar páginas web, y el soporte de CSS no es exactamente igual en ninguno de los motores de renderizado. Ya que los navegadores no aplican el CSS correctamente, muchas técnicas de programación han sido desarrolladas para ser aplicadas por un navegador específico (comúnmente conocida esta práctica como CSS hacks o CSS filters). La adopción de nuevas funcionalidades en CSS son obstaculizadas por la ausencia de soporte en los navegadores mayoritarios.

class en html y css


Ejemplos:

•Esto se puede hacer en un bloc de notas o editor de texto como 'Sublime Text' o 'Aptana Studio' mientras los archivos se guarden con la extensión ‘nombre_archivo.html’ y ‘nombre_archivo.css’ que en este caso, lo llamaremos ‘cajas.css’ para que el documento HTML reconozca el estilo a ser usado.

►Vamos a encerrar dos textos en una caja cada uno, para eso dentro del 'body' que es el cuerpo de la pagina HTML hacemos dos 'divs' o divisiones separadas por un salto de línea (con la propiedad <br>.

►Para abir una etiqueta vamos a rodear el elemento por '<' y '>', por ejemplo <html>, y terminar con lo mismo pero antes de indicar el nombre escribimos '/', es decir...</html>.
Para que nuestra página esté vinculada a CSS escribiremos <link rel="stylesheet" type="text/css" href="cajas.css"> siendo ‘stylesheet’ hoja de estilos, 'href' la dirección por la cual invoca, en este caso está en la misma carpeta y se llama 'cajas.css'. siendo ‘link’ enlace a, ‘stylesheet’ hoja de estilos, ‘type=text/css’ documento con fuente de tipo hoja de estilos en cascada, ‘href=”cajas.css”’ será el documento ‘css’ ya guardado.



____________________________________________________

<html>
<!— comentario que no se ejecutara en la pagina -->
<!—inicio del documento 'html' -->

<head>
<!—inicio de la parte abstracta de la pagina -->

<title>cajas</title>
<!—titulo de la pagina -->

<link rel="stylesheet" type="text/css" href="cajas.css">

</head>
<!—Fin de la parte abstracta de la pagina -->

<body>
<!—Inicio de la parte concreta de la pagina -->

<div>
<!—Division -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<br>
<!—Salto de linea -->

<div id='div2'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<br>

<div class='div3'>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>

</html>
<!—Cierre de etiquetas con el signo ‘/’ antes del nombre de la etiqueta -->


____________________________________________________


►Muy bien, pero nos falta ver el contenido del archivo 'cajas.css' en el cual dentro de ambas divisiones le daremos una anchura (width) y altura (height), color de fuente, color de fondo, margen externo primero indicando la distancia hacia arriba y abajo, y luego la distancia hacia los costados, 'padding' que será la distancia del texto por dentro de la misma caja, 'border' que referencia el borde que marca la separación entre el 'div' y el resto del 'body'. Por ultimo, 'display in-line block' mostrara las cajas en forma de bloques en linea.

►Tambien estableceremos una forma de seleccionar desde el 'id' y la 'class' mostrados en el archivo HTML en el documento CSS, le agregaremos las mismas especificaciones de los otros 'div' pero al nosotros ser mas específicos con '#div2' (con respecto al id) y '.div3' (con respecto a la clase) podremos agregar o modificar las variables que queramos, en este caso solo el color de fuente y de fondo.

►Para agregar los colores que exactamente se quiere se escribe -->color:blue; (azul en ingles) para el color de fuente, sino--> background:rgb(255,255,255); que seria el color blanco porque 255 es lo máximo que podes especificar, este color también se denota como '#fff', y por el contrario el color negro lo denotamos '#000' como los veremos en el ejemplo.


____________________________________________________

div {
//esto es un comentario que no se toma como valido para el documento
//abrimos corchete para indicarle las propiedades que va a tener la division

height:120px;
//alto

width:200px;
//ancho

color:#000;
//color de fuente

background:rgb(36,198,45);
//color de fondo

margin: 20px 50px;
//margen exterior

padding:30px;
//margen interior

border:1px solid #000;
//borde

display:inline-block;
//ubicacion de los elementos como bloques en linea

}

#div2{
//como escribimos ‘#’ antes le indicamos que va a afectar a un ‘id’ llamado ‘div2’, que como se vio en el documento de ‘html’. como es mas especifico, aunque sea un ‘div’ va a heredar las características de este pero modificar lo que le especifiquemos como se vera a continuacion

color:#fff;

background:#0a134a;

}

.div3{
//lo mismo que sucedio con el ‘id’ anterior ahora sucedera con una clase que le indicamos con un ‘.’

color:#fff;

background:#0b340a;

}

Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts