HTML - Introducción, Apuntes de Ingeniería Industrial

¡Descarga HTML - Introducción y más Apuntes en PDF de Ingeniería Industrial solo en Docsity!

HTML/CSS

Mi primera página

Qué es HTML

• Es un lenguaje de marcas para formatear y

estructurar un documento, que puede leerse en

cualquier navegador.

… …

• Estandarizado en la norma ISO de SGML

(Standard Generalized Markup Lenguage).

• El W3C desarrolla especificaciones técnicas y

directrices, de forma que se pueda asegurar una

alta calidad técnica y editorial.

Lenguaje HTML

Las marcas de texto en html, se emplean para el estructurado semántico del contenido.

Los textos habitualmente están formados básicamente por titulares **** párrafos

, resaltando en ellos agunas palabras en negrita o en cursiva ****.

Las imágenes se vinculan en una página HTML con la etiqueta **img ** con los atributos: src = URL, width = ancho, height = alto, alt = texto alternativo de la imagen. Las imágenes que se usan en la web son: GIF, JPG, PNG y las imágenes vectoriales en SVG

Párrafo e Imágenes HTML

Ejemplo

URL

Una URL local nos lleva a otra página o archivo del mismo sitio de Internet. Ejemplo de un sitio web, de la raíz parten todas las subcarpetas. css, img, pag

Cuando el archivos a enlazar está en la misma carpeta: la ruta es directamente el nombre del archivo de destino. Ver siguiente

El archivo de destino está en una carpeta de nivel inferior a su origen, en este caso deberemos escribir la ruta a partir de la carpeta donde está el archivo de origen: ** Ver ejemplo 5**

Si el archivo está en una carpeta de nivel superior, es necesario subir uno o varios niveles en la jerarquía de directorios, hasta llegar al nivel donde está el archivo. Subimos un nivel escribiendo (../); si subimos dos niveles (../../), hasta llegar al nivel donde esté el archivo. Página principal

Para ir a una carpeta del mismo nivel, debemos subir al directorio raíz mediante ../ y desde ahí a la carpeta buscada.

---

CSS

El HTML , controla el aspecto gráfico del documento mediante hojas de estilo CSS (cascading style sheets), el CSS , indica al navegador como se deben visualizar los elementos de un documento HTML.

Así se consigue separar el aspecto del contenido. El estilo CSS, se puede añadir mediante un bloque marcado como **

Editores HTML

Antes de comenzar a trabajar con un editor específico, es recomendable conocer el código.

Podemos usar programas que trabajen con texto plano , sin añadir sus propias marcas de edición.

Los documentos HTML deben tener la extensión html o htm.

Usar un editor wysiwyg como el Adobe Dreamweaver o el BlueGriffon (http://www.bluegriffon.org/) o un editor con ayudas visuales como el sublime (http://www.sublimetext.com/) o el Brackets (http://brackets.io/ )nos facilitará las cosas.

Ver comparativa: http://en.wikipedia.org/wiki/Comparison_of_HTML_editors

CSS

Visualización valores por defecto CSS en el navegador

Cada etiqueta HTML tiene unos valores de CSS por defecto, que pueden variar según el navegador, que tendremos que modificar con nuestros estilos personales.

CSS

Más información valores por defecto: W3C: http://dev.w3.org/html5/markup/elements.html

Internet Explorer: http://www.iecss.com/

Firefox: http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css

Chrome, Safari: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Opera http://www.iecss.com/opera-10.51.css

Navegación HTML

La etiqueta **** se emplea para definir un enlace a otra página. Un menú es una lista de enlaces. Se recomienda usar las marcas de lista ** ** y el enlace ****.

Recursos CSS

MDN Usando las cajas flexibles CSS https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexib les

CSS-TRICKS A Complete Guide to Flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML/CSS

Mi primera página

Estructura HTML

La etiqueta meta define varios tipos de metadatos. El atributo charset especifica la codificación usada en nuestra página.

Estructura HTML

Charset utf-8 es la U nicode T ransformation F ormat 8 -bit representa el código de caracteres UNICODE. Es compatible con ASCII. Permite visualizar los caracteres de todos los idioma.