Este documento introduce los conceptos básicos de HTML y CSS. Explica que HTML define la estructura de un sitio web, CSS controla su presentación y estilo, y JavaScript agrega interactividad. Luego profundiza en cada tecnología detallando etiquetas HTML comunes, cómo agregar estilos CSS a un documento HTML, y herramientas para desarrollar sitios web.
Este documento presenta una introducción al desarrollo web utilizando HTML y CSS. Describe el uso de la herramienta HTML-Kit para editar código y crear páginas web, incluyendo sus ventajas como su facilidad de uso y corrección automática. Propone una serie de ejercicios prácticos para que los estudiantes aprendan a crear páginas, enlazar documentos, aplicar hojas de estilo y desarrollar un sitio web completo.
Este documento proporciona información sobre tecnologías web de cliente como HTML. Explica conceptos básicos de HTML como su estructura, elementos y atributos. También cubre temas como formularios, enlaces, imágenes y validación.
Este documento introduce los conceptos básicos de CSS3. Explica que CSS permite controlar la apariencia de una página web y complementa al HTML. Luego describe algunas propiedades CSS como color, fuente y alineación de texto, y cómo estas pueden aplicarse a elementos HTML individuales o grupos de elementos. Finalmente, introduce conceptos como la herencia de estilos entre elementos anidados.
Bases de la maquetación de una web en HTML5, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.
Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?
El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)
Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0
Este documento presenta una guía de ejercicios paso a paso para aprender HTML en el primer año de bachillerato. Incluye instrucciones para crear una página básica en HTML, insertar texto con diferentes propiedades, agregar hipervínculos e imágenes, y trabajar con tablas. El documento proporciona ejemplos de código HTML y pasos detallados para completar cada ejercicio propuesto.
El documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 tiene como objetivo mejorar y simplificar HTML mediante la adición de nuevas etiquetas y características como audio, vídeo, almacenamiento offline y APIs, mientras que CSS3 aporta nuevos selectores, unidades, propiedades y funciones para mejorar el diseño y maquetación web. También introduce los media queries de CSS3 para adaptar el diseño a diferentes dispositivos.
Módulo 4 del
Curso IxDA BA 2012: Introducción al diseño y maquetación de interfaces web.
http://ixda.com.ar/?p=602
* Cómo se construye una página
* Marcado semántico, accesibilidad
* Uso apropiado de elementos más comunes
. Listas, links, imágenes, encabezados
. Elementos de bloque vs línea
. Árbol de elementos, jerarquía
* Doctype, validación
* URLs, la web como red de recursos
* CSS, separación de contenido y presentación
* Clases y IDs, selectores semánticos, cascada
* El modelo de caja, posicionamiento, elementos flotantes
* Fuentes, font stacks, tamaños, tipografías básicas, font-face, licencias
* Recorte de imágenes
* Errores más comunes
* Impacto en el posicionamiento en buscadores
Este documento presenta una introducción al desarrollo web utilizando HTML y CSS. Describe el uso de la herramienta HTML-Kit para editar código y crear páginas web, incluyendo sus ventajas como su facilidad de uso y corrección automática. Propone una serie de ejercicios prácticos para que los estudiantes aprendan a crear páginas, enlazar documentos, aplicar hojas de estilo y desarrollar un sitio web completo.
Este documento proporciona información sobre tecnologías web de cliente como HTML. Explica conceptos básicos de HTML como su estructura, elementos y atributos. También cubre temas como formularios, enlaces, imágenes y validación.
Este documento introduce los conceptos básicos de CSS3. Explica que CSS permite controlar la apariencia de una página web y complementa al HTML. Luego describe algunas propiedades CSS como color, fuente y alineación de texto, y cómo estas pueden aplicarse a elementos HTML individuales o grupos de elementos. Finalmente, introduce conceptos como la herencia de estilos entre elementos anidados.
Bases de la maquetación de una web en HTML5, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.
Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?
El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)
Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0
Este documento presenta una guía de ejercicios paso a paso para aprender HTML en el primer año de bachillerato. Incluye instrucciones para crear una página básica en HTML, insertar texto con diferentes propiedades, agregar hipervínculos e imágenes, y trabajar con tablas. El documento proporciona ejemplos de código HTML y pasos detallados para completar cada ejercicio propuesto.
El documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 tiene como objetivo mejorar y simplificar HTML mediante la adición de nuevas etiquetas y características como audio, vídeo, almacenamiento offline y APIs, mientras que CSS3 aporta nuevos selectores, unidades, propiedades y funciones para mejorar el diseño y maquetación web. También introduce los media queries de CSS3 para adaptar el diseño a diferentes dispositivos.
Módulo 4 del
Curso IxDA BA 2012: Introducción al diseño y maquetación de interfaces web.
http://ixda.com.ar/?p=602
* Cómo se construye una página
* Marcado semántico, accesibilidad
* Uso apropiado de elementos más comunes
. Listas, links, imágenes, encabezados
. Elementos de bloque vs línea
. Árbol de elementos, jerarquía
* Doctype, validación
* URLs, la web como red de recursos
* CSS, separación de contenido y presentación
* Clases y IDs, selectores semánticos, cascada
* El modelo de caja, posicionamiento, elementos flotantes
* Fuentes, font stacks, tamaños, tipografías básicas, font-face, licencias
* Recorte de imágenes
* Errores más comunes
* Impacto en el posicionamiento en buscadores
Conociendo las novedades, ventajas y nuevos elementos que nos ofrece esta versión de HTML.
Fotos: https://www.facebook.com/media/set/?set=a.601422266572455.1073741831.519082574806425&type=1&l=0930432fd8
Este documento describe HTML y CSS. HTML es el lenguaje de marcado usado para crear páginas web, el cual contiene etiquetas que describen el contenido. CSS es usado para definir los estilos y aspecto visual de los sitios web, separando la estructura del contenido de su presentación. Juntos, HTML y CSS permiten crear y diseñar páginas y sitios web.
Este documento introduce los conceptos básicos de HTML. Explica que HTML es un lenguaje de marcado utilizado para estructurar documentos mediante etiquetas. Detalla las etiquetas principales como <!DOCTYPE>, <html>, <head> y <body> que definen un documento HTML, y explica el propósito y uso de etiquetas importantes como <title>, <meta>, <link>, <script> y <style> dentro de la etiqueta <head>, y las etiquetas como <p>, <a> e <img> dentro de la etiqueta <body>. También cubre atributos
Este documento explica cómo funcionan las páginas web y los lenguajes HTML y CSS. HTML es el lenguaje de marcado que contiene los elementos de una página web, mientras que CSS determina cómo se visualizan esos elementos. Cuando un usuario ingresa una URL en un navegador, este envía una petición al servidor y recibe una respuesta que generalmente contiene HTML y referencias a archivos CSS.
Elemento que se puede arrastrar
•
Dropzone: Zona donde se puede soltar el elemento arrastrado
•
Dragstart: Evento que se dispara cuando se inicia el arrastre
•
Drag: Evento que se dispara mientras se arrastra
•
Dragend: Evento que se dispara cuando termina el arrastre
•
Dragenter: Evento que se dispara cuando el elemento entra en la zona de soltado
•
Dragover: Evento que se dispara cuando el elemento está sobre la zona de soltado
•
Drop
Este documento presenta varias etiquetas importantes en HTML como <script>, <noscript>, <span> e <iframe>. También discute la accesibilidad web y validación de documentos HTML de acuerdo a las pautas del W3C. Explica que la validación asegura que un documento cumple con las normas del lenguaje pero que no es obligatoria aunque algunos consideran que es importante para crear páginas correctas.
Conceptos Fundamentales sobre HTML5:
- Definición
- Historia
- Etiquetas Nuevas
- Etiquetas Eliminadas
- Doctype
- Etiqueta HTML
- Encabezado
- La Codificación
- Nueva Organización del Sitio
- Incorporar Video
- Otras Características
- Validación de HTML5
- Soporte De Los Navegadores
- Referencias
Este documento proporciona una introducción a las etiquetas y estructura básica de HTML5. Explica etiquetas como <p>, <br>, <meta>, y elementos como <header>, <footer>, <nav> y <article>. También cubre formularios con diferentes tipos de inputs como text, password, radio, checkbox, y fecha. Además, menciona nuevas características de HTML5 como canvas, geolocalización y soporte sin conexión.
Este documento presenta una introducción al curso de HTML y JavaScript. El objetivo del curso es proveer conceptos fundamentales sobre estos lenguajes para que los asistentes puedan utilizarlos en sus proyectos informáticos. Los temas a cubrir incluyen Internet, HTML, CSS, JavaScript, elementos HTML, tablas, hipervínculos, imágenes y formularios.
El documento describe las etiquetas semánticas introducidas en HTML5 para estructurar el contenido de una página web de una manera más clara y significativa. Las nuevas etiquetas incluyen <header>, <main>, <nav>, <section>, <article>, <aside> y <footer>, las cuales pueden usarse para dividir la página en diferentes secciones como encabezados, navegación, contenido principal, artículos y más. El documento también incluye ejemplos de cómo estas etiquetas pueden combinarse para definir la estructura general de una pá
Este documento presenta una introducción a los lenguajes XHTML y HTML5, así como al lenguaje de hojas de estilos CSS. Explica las principales características y reglas de XHTML, y describe las novedades introducidas en HTML5 como nuevos elementos semánticos, mejoras en formularios, soporte para audio y video, y Canvas. También define los conceptos básicos de CSS como selectores, modelo de caja y formas de incluir hojas de estilo, además de describir las nuevas funcionalidades introducidas en CSS3 como bordes redondeados, sombras
Este documento presenta un curso sobre las nuevas tecnologías HTML5 y CSS3. Explica la historia y objetivos de HTML5, sus principales características como compatibilidad y nuevos elementos como video, audio, canvas y formularios. También cubre las novedades de HTML5 como nuevos tipos de contenido, elementos estructurales y APIs para el almacenamiento de datos y drag-and-drop. Finalmente, incluye ejemplos prácticos para utilizar estas tecnologías.
HTML5 Nuevas Etiquetas Semánticas. Se presentan y describen las nuevas etiquetas del estándar HTML5. Aunque se repasan la mayoría de ellas se hace un mayor énfasis en etiquetas y atributos para formularios.
Presentación gráfica del tema Hiperenlaces en HTML. Se incluye una pequeña introducción al tema Lenguaje Informático con el mencionado código. El material está dirigido a estudiantes de 2º año de Educación Media Básica en la asignatura informática. (Es decir para personas de entre 12 y 15 años aproximadamente).
Manual para crear una página web en WordDulce Romero
Este documento proporciona instrucciones para crear una página web básica en Microsoft Word. Explica cómo insertar marcos para dividir la página en secciones, cómo agregar formas geométricas de colores y texto a las secciones, y cómo personalizar la apariencia general de la página. El objetivo es demostrar las funciones básicas de diseño de páginas web en Word.
Html 5. Estructura de un documento para la Webjcremiro
Este documento describe los elementos básicos de la estructura de un documento HTML 5, incluyendo la estructura mínima requerida que consta de las etiquetas html, head y body. También explica elementos importantes como head, title, y los diferentes tipos de listas y elementos para agrupar contenido como article, nav y section.
Este documento presenta una introducción a HTML5. Resume la historia de HTML5 y su desarrollo, destaca las nuevas características como etiquetas semánticas, audio y video nativos, canvas, y mejoras en formularios. También cubre compatibilidad de navegadores y recursos adicionales para aprender más sobre HTML5.
Buenas prácticas en XHTML, CSS y AccesibilidadFRONTDAYS
Presentación usada en el curso "Buenas prácticas en XHTML, CSS y Accesibilidad" impartido por Borja Delgado en Madrid el jueves 10 de Septiembre de 2009.
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
Laminas de Ponencia de Introducción al desarrollo Web, tocando temas básicos de HTML5 y CSS3 dirigido a las personas que solo buscan entrar en este mundo y dar el primer paso, la ponencia se dio en la Universidad Alejandro de Humboldt
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)wandelsonwww
Este documento presenta información sobre el módulo "Diseñar Portales Web Y Recursos Multimedia". El módulo incluye cuatro unidades sobre HTML y versiones, estructura del documento, anclas y tipos en HTML, y sonidos y multimedia. Cada unidad será desarrollada por un autor diferente y cubrirá objetivos relacionados con el tema. El documento también incluye enlaces a blogs relacionados con el material didáctico.
Conociendo las novedades, ventajas y nuevos elementos que nos ofrece esta versión de HTML.
Fotos: https://www.facebook.com/media/set/?set=a.601422266572455.1073741831.519082574806425&type=1&l=0930432fd8
Este documento describe HTML y CSS. HTML es el lenguaje de marcado usado para crear páginas web, el cual contiene etiquetas que describen el contenido. CSS es usado para definir los estilos y aspecto visual de los sitios web, separando la estructura del contenido de su presentación. Juntos, HTML y CSS permiten crear y diseñar páginas y sitios web.
Este documento introduce los conceptos básicos de HTML. Explica que HTML es un lenguaje de marcado utilizado para estructurar documentos mediante etiquetas. Detalla las etiquetas principales como <!DOCTYPE>, <html>, <head> y <body> que definen un documento HTML, y explica el propósito y uso de etiquetas importantes como <title>, <meta>, <link>, <script> y <style> dentro de la etiqueta <head>, y las etiquetas como <p>, <a> e <img> dentro de la etiqueta <body>. También cubre atributos
Este documento explica cómo funcionan las páginas web y los lenguajes HTML y CSS. HTML es el lenguaje de marcado que contiene los elementos de una página web, mientras que CSS determina cómo se visualizan esos elementos. Cuando un usuario ingresa una URL en un navegador, este envía una petición al servidor y recibe una respuesta que generalmente contiene HTML y referencias a archivos CSS.
Elemento que se puede arrastrar
•
Dropzone: Zona donde se puede soltar el elemento arrastrado
•
Dragstart: Evento que se dispara cuando se inicia el arrastre
•
Drag: Evento que se dispara mientras se arrastra
•
Dragend: Evento que se dispara cuando termina el arrastre
•
Dragenter: Evento que se dispara cuando el elemento entra en la zona de soltado
•
Dragover: Evento que se dispara cuando el elemento está sobre la zona de soltado
•
Drop
Este documento presenta varias etiquetas importantes en HTML como <script>, <noscript>, <span> e <iframe>. También discute la accesibilidad web y validación de documentos HTML de acuerdo a las pautas del W3C. Explica que la validación asegura que un documento cumple con las normas del lenguaje pero que no es obligatoria aunque algunos consideran que es importante para crear páginas correctas.
Conceptos Fundamentales sobre HTML5:
- Definición
- Historia
- Etiquetas Nuevas
- Etiquetas Eliminadas
- Doctype
- Etiqueta HTML
- Encabezado
- La Codificación
- Nueva Organización del Sitio
- Incorporar Video
- Otras Características
- Validación de HTML5
- Soporte De Los Navegadores
- Referencias
Este documento proporciona una introducción a las etiquetas y estructura básica de HTML5. Explica etiquetas como <p>, <br>, <meta>, y elementos como <header>, <footer>, <nav> y <article>. También cubre formularios con diferentes tipos de inputs como text, password, radio, checkbox, y fecha. Además, menciona nuevas características de HTML5 como canvas, geolocalización y soporte sin conexión.
Este documento presenta una introducción al curso de HTML y JavaScript. El objetivo del curso es proveer conceptos fundamentales sobre estos lenguajes para que los asistentes puedan utilizarlos en sus proyectos informáticos. Los temas a cubrir incluyen Internet, HTML, CSS, JavaScript, elementos HTML, tablas, hipervínculos, imágenes y formularios.
El documento describe las etiquetas semánticas introducidas en HTML5 para estructurar el contenido de una página web de una manera más clara y significativa. Las nuevas etiquetas incluyen <header>, <main>, <nav>, <section>, <article>, <aside> y <footer>, las cuales pueden usarse para dividir la página en diferentes secciones como encabezados, navegación, contenido principal, artículos y más. El documento también incluye ejemplos de cómo estas etiquetas pueden combinarse para definir la estructura general de una pá
Este documento presenta una introducción a los lenguajes XHTML y HTML5, así como al lenguaje de hojas de estilos CSS. Explica las principales características y reglas de XHTML, y describe las novedades introducidas en HTML5 como nuevos elementos semánticos, mejoras en formularios, soporte para audio y video, y Canvas. También define los conceptos básicos de CSS como selectores, modelo de caja y formas de incluir hojas de estilo, además de describir las nuevas funcionalidades introducidas en CSS3 como bordes redondeados, sombras
Este documento presenta un curso sobre las nuevas tecnologías HTML5 y CSS3. Explica la historia y objetivos de HTML5, sus principales características como compatibilidad y nuevos elementos como video, audio, canvas y formularios. También cubre las novedades de HTML5 como nuevos tipos de contenido, elementos estructurales y APIs para el almacenamiento de datos y drag-and-drop. Finalmente, incluye ejemplos prácticos para utilizar estas tecnologías.
HTML5 Nuevas Etiquetas Semánticas. Se presentan y describen las nuevas etiquetas del estándar HTML5. Aunque se repasan la mayoría de ellas se hace un mayor énfasis en etiquetas y atributos para formularios.
Presentación gráfica del tema Hiperenlaces en HTML. Se incluye una pequeña introducción al tema Lenguaje Informático con el mencionado código. El material está dirigido a estudiantes de 2º año de Educación Media Básica en la asignatura informática. (Es decir para personas de entre 12 y 15 años aproximadamente).
Manual para crear una página web en WordDulce Romero
Este documento proporciona instrucciones para crear una página web básica en Microsoft Word. Explica cómo insertar marcos para dividir la página en secciones, cómo agregar formas geométricas de colores y texto a las secciones, y cómo personalizar la apariencia general de la página. El objetivo es demostrar las funciones básicas de diseño de páginas web en Word.
Html 5. Estructura de un documento para la Webjcremiro
Este documento describe los elementos básicos de la estructura de un documento HTML 5, incluyendo la estructura mínima requerida que consta de las etiquetas html, head y body. También explica elementos importantes como head, title, y los diferentes tipos de listas y elementos para agrupar contenido como article, nav y section.
Este documento presenta una introducción a HTML5. Resume la historia de HTML5 y su desarrollo, destaca las nuevas características como etiquetas semánticas, audio y video nativos, canvas, y mejoras en formularios. También cubre compatibilidad de navegadores y recursos adicionales para aprender más sobre HTML5.
Buenas prácticas en XHTML, CSS y AccesibilidadFRONTDAYS
Presentación usada en el curso "Buenas prácticas en XHTML, CSS y Accesibilidad" impartido por Borja Delgado en Madrid el jueves 10 de Septiembre de 2009.
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
Laminas de Ponencia de Introducción al desarrollo Web, tocando temas básicos de HTML5 y CSS3 dirigido a las personas que solo buscan entrar en este mundo y dar el primer paso, la ponencia se dio en la Universidad Alejandro de Humboldt
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)wandelsonwww
Este documento presenta información sobre el módulo "Diseñar Portales Web Y Recursos Multimedia". El módulo incluye cuatro unidades sobre HTML y versiones, estructura del documento, anclas y tipos en HTML, y sonidos y multimedia. Cada unidad será desarrollada por un autor diferente y cubrirá objetivos relacionados con el tema. El documento también incluye enlaces a blogs relacionados con el material didáctico.
Este documento proporciona una introducción al lenguaje HTML y describe la estructura básica de un documento HTML, incluyendo etiquetas como <html>, <head>, <title>, <body>, y <div>. También explica diferentes tipos de etiquetas HTML y cómo se usan para dar formato a texto, crear enlaces, listas, tablas y formularios.
Este documento introduce conceptos fundamentales de HTML, CSS y JavaScript. Explica elementos básicos de HTML como etiquetas, atributos y estructura de documentos. También cubre hipervínculos, imágenes, formularios y hojas de estilos CSS. Por último, brinda una introducción a JavaScript y su capacidad de interactuar dinámicamente con páginas web.
Este documento presenta una introducción a HTML. Explica que HTML es el lenguaje estándar para crear páginas web y que las etiquetas son usadas para estructurar el contenido. Luego describe elementos básicos como <html>, <head>, <body>, <h1>, <p>, <a> e <img>. Finalmente, propone algunas actividades prácticas para crear sitios web sencillos usando estas etiquetas.
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Efraim Martinez
A brief introduction to HTML5 at UTAD, june 2013. For all audiences, from business to technical, from customer focused to backoffice.
Una breve introducción a HTML5 en UTAD, junio 2013. Para todos los públicos: técnicos y enfocados a negocio, funciones internas y de relación con el cliente.
Este documento proporciona una introducción a los lenguajes HTML y JavaScript. Explica conceptos básicos como la estructura de un documento HTML, elementos comunes como párrafos, encabezados, listas y tablas, y cómo agregar estilos con CSS y comportamiento con JavaScript. También brinda una breve historia de estos lenguajes y su evolución.
Este documento presenta una introducción al taller práctico básico de HTML y CSS. Explica conceptos clave como la declaración de tipo de documento, las etiquetas <head> y <body>, e introduce los principios básicos de CSS como separar la estructura del documento de su presentación y el uso de hojas de estilo externas. A continuación, guía al lector a través de ejemplos prácticos de cómo aplicar estilos CSS a un documento HTML para darle formato y diseño.
Este documento introduce conceptos básicos de HTML como etiquetas, elementos, atributos y su uso para crear documentos web con formato de texto, hipervínculos, tablas e imágenes. Explica cómo crear la estructura básica de un documento HTML y agregar contenido utilizando diferentes etiquetas para dar formato y estructura al texto como encabezados, párrafos, listas y citas. También describe cómo incluir hipervínculos, imágenes y tablas.
Este documento presenta un curso sobre HTML y CSS. Explica conceptos básicos como el World Wide Web, navegadores, servidores y protocolos. Luego describe las etiquetas y estructura básica de HTML, incluyendo ejemplos de párrafos, títulos, enlaces, listas e imágenes. Finalmente, cubre tablas, formularios y otros elementos avanzados de HTML.
Este documento presenta un curso sobre HTML y CSS. Explica conceptos básicos como el World Wide Web, navegadores, servidores y protocolos. Luego describe las estructuras y etiquetas básicas de HTML como <head>, <body>, <h1>, <p>, <a> y <img>. Finalmente, cubre temas como enlaces, listas, tablas, formularios y la inclusión de imágenes.
HTML es el lenguaje de marcado utilizado para crear páginas web. Permite estructurar el contenido de una página incluyendo texto, imágenes, videos, tablas y formularios. Se pueden crear hipervínculos que enlazan diferentes páginas web o secciones de la misma página.
El documento presenta un curso de 4 sesiones sobre HTML y CSS. Cubrirá temas como la historia y versiones de HTML, tipos de sitios web, estructura y elementos de HTML, y conceptos básicos de CSS como selectores y layouts. Se proveerán recursos de referencia y se requerirá al menos el 70% de asistencia.
Este documento proporciona una introducción al lenguaje HTML. Explica que HTML es el lenguaje de marcado utilizado en la web y fue creado por Tim Berners-Lee en 1986. Describe la estructura básica de HTML, incluidas las etiquetas <html>, <head>, <title> y <body>. También explica algunas de las etiquetas HTML más comunes como <a>, <img>, <table>, <tr> y <td> y proporciona ejemplos de su uso. Finalmente, concluye que HTML es fundamental para el funcionamiento de Internet y es
Este documento describe los conceptos básicos de HTML y el desarrollo de páginas web, incluyendo las etiquetas, estructura y componentes de HTML, así como la función y tipos de elementos como párrafos, encabezados, listas y tablas. Explica que una página web se compone de HTML, CSS y JavaScript para la estructura, el contenido, la apariencia y el comportamiento.
Este documento presenta una introducción a HTML y JavaScript. Explica conceptos básicos como la estructura de un documento HTML, elementos como encabezados, párrafos y listas, y también introduce conceptos de CSS y JavaScript. Finalmente, brinda una historia sobre el desarrollo de HTML y las organizaciones relacionadas como el W3C.
Este documento describe las hojas de estilo en cascada (CSS), una tecnología que permite controlar la apariencia de una página web. CSS permite especificar estilos como tamaños de fuente, colores y ubicación de texto e imágenes. Las reglas de estilo pueden definirse directamente en el código HTML o en un archivo CSS externo. Bootstrap es un framework de CSS que incluye componentes predefinidos como botones, tablas e íconos para facilitar el desarrollo de sitios web.
Este documento presenta una introducción a los lenguajes HTML y JavaScript, incluyendo la historia y objetivos de HTML, los principales elementos y atributos de HTML, cómo se estructura un documento HTML, y una introducción a CSS y JavaScript.
Este documento proporciona apuntes sobre HTML de Abrirllave.com. Explica la estructura básica de un documento HTML, incluyendo los elementos <html>, <head>, <title>, <body>, <p>, así como cómo agregar comentarios, estilos y párrafos. También cubre temas como enlaces, listas, imágenes y tablas.
Este documento presenta los objetivos y temas de un curso sobre HTML y JavaScript. Los objetivos son proveer conceptos fundamentales sobre estos lenguajes para proyectos informáticos. Los temas incluyen Internet, HTML, CSS, elementos HTML, tablas, hipervínculos, imágenes, formularios, JavaScript y más.
1. Introducci´on HTML CSS
HTML y CSS
Introducci´on
Ing. Joel C. Flores Escalante, MCC
UAC
4 de agosto de 2015
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
3. Introducci´on HTML CSS
Estructura
HTML, CSS, JavaScript
Pueden pensar en un sitio web como en su casa:
HTML es la estructura donde se coloca las paredes, delimitando
que espacio es la cocina, dormitorios, sala, etc.
CSS es el estilo de la casa: el color de piso, de paredes, las
decoraciones, etc.
JavaScript son los componentes interactivos: el port´on
automatico, el control remoto. Son los componentes que estan
cambiando alg´un elemento de su casa.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378557
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
4. Introducci´on HTML CSS
HTML
HTML
HTML significa HyperText Markup Language (((lenguaje de marcas
de hipertexto))), hace referencia al lenguaje de marcado para la
elaboraci´on de p´aginas web.
Es un est´andar que sirve de referencia para la elaboraci´on de
p´aginas web en sus diferentes versiones, define una estructura
b´asica y un c´odigo (denominado c´odigo HTML) para la definici´on de
contenido de una p´agina web, como texto, im´agenes, etc.
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
5. Introducci´on HTML CSS
HTML
Es un est´andar a cargo de la W3C, organizaci´on dedicada a la estan-
darizaci´on de casi todas las tecnolog´ıas ligadas a la web, sobre todo
en lo referente a su escritura e interpretaci´on. Es el lenguaje con el
que se definen las p´aginas web.
Enlaces recomendados:
http://es.wikipedia.org/wiki/HTML
http://www.w3schools.com/html/DEFAULT.asp
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
6. Introducci´on HTML CSS
HTML
HTML etiquetas b´asicas
<! − − −− > Comentarios
< a > Poner un hyperlink
< align > Alinea el contenido a: left,right,centered o justified
< body > Define el los limites del cuerpo del documento
< br > Salto de l´ınea
< center > Centra el contenido
< form > Define un formulario
< h1 > El primer nivel para tama˜no de t´ıtulos
< head > Define los l´ımites del encabezado del documento
< html > Define los l´ımites del documento HTML
< input type > Para insertar un componente en un formulario
< p > Un nuevo p´arrafo
< title > Para ponerle t´ıtulo al documento HTML
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
7. Introducci´on HTML CSS
HTML
HTML etiquetas b´asicas
< div > divisi´on
< b > Negritas
< i > Cursivas
< u > Subrayado
M´as sobre etiquetas para formato de texto en:
http://html.hazunaweb.com/103.php
Para problemas con acentos leer:
http://www.gestiweb.com/?q=content/problemas-html-acentos-y-
e%C3%B1es-charset-utf-8-iso-8859-1
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
8. Introducci´on HTML CSS
HTML
Un ejemplo sencillo
Utilizando un block de notas (sublime, notepad, notepad++, etc) crea
el siguiente documento HTML. Nota: Se recomienda el uso de
sublime http://www.sublimetext.com/
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
9. Introducci´on HTML CSS
HTML
C´odigo HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title> Mi p´agina HTML </title>
<!-- aqui van los estilos y c´odigo javascript que desee incluir -->
</head>
<body>
<h1> Bienvenido a mi sitio en internet </h1>
<h2> Por favor lee el siguiente p´arrafo: </h2>
<p>
"¿Qui´en sabe de donde viene la inspiraci´on? Quiz´a surja de la
desesperaci´on, quiz´a de las carambolas del universo, de la
bondad de las musas." <b>(Amy Tan)</b>
</p>
<p>
Si te mueve la pasi´on, deja que la raz´on lleve las riendas."
<b>(Benjamin Franklin)</b>
</p>
</body>
<html>
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
10. Introducci´on HTML CSS
HTML
Tips
Para mantener ordenado tu c´odigo HTML, sigue estos consejos:
Utiliza identaci´on a la hora de escribir c´odigo HTML.
Siempre abre y cierra las etiquetas.
La mejor forma de aprender es escribiendo c´odigo, proponerse retos
e investigar en manuales y/o Internet.
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
11. Introducci´on HTML CSS
HTML
Herramientas de exploraci´on
En navegadores como Google Chrome y firefox existen herramientas
que pueden ayudar al desarrollo de aplicaciones web:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378558/m-2771378559
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
12. Introducci´on HTML CSS
HTML
Estructura de arbol
La estructura de HTML puede verse como jerarquica y como un arbol
de nodos.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378561/m-2771378562
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
13. Introducci´on HTML CSS
HTML
HTML, CSS & DOM
HTML. HyperText Markup Language.
CSS. Cascading Style Sheets es un lenguaje usado para definir
y crear la presentaci´on de un documento estructurado escrito en
HTML.
DOM. Document Object Model Proporciona un conjunto
estandar de objetos y una interfaz para acceder a ellos y
manipularlos.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2596138815
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
14. Introducci´on HTML CSS
Boxes
Boxes
Visualizar un documento HTML divido en cuadros, facilita el dise˜no.
https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/e-2608808598/m-2599508886
https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/m-2771378567
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
15. Introducci´on HTML CSS
Boxes
¿Cuantos cuadros?
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2672258561/m-2600669133
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
16. Introducci´on HTML CSS
Boxes
¿Como pasar el dise˜no de cuadros a HTML?
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2635788572
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
17. Introducci´on HTML CSS
Boxes
Ejercicio 1
Sigue las instrucciones en:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2965478547/m-2972378541
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
18. Introducci´on HTML CSS
CSS
CSS
Es un lenguaje para definir y crear la presentaci´on de un
documento. La idea que se encuentra detr´as del desarrollo de
CSS es separar la estructura de un documento de su
presentaci´on.
La informaci´on de estilo puede ser definida en un documento
separado o en el mismo documento HTML. En este ´ultimo caso
podr´ıan definirse estilos generales en la cabecera del documento
o en cada etiqueta particular mediante el atributo ((style)).
Sintaxis y ejemplos: http://www.w3schools.com/css/
Mozilla CSS Reference:
https://developer.mozilla.org/es/docs/Web/CSS/Referencia CSS
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
19. Introducci´on HTML CSS
CSS
A˜nadiendo estilo
Utilizando el c´odigo del ejercicio 1:
A˜nade el texto que va en la secci´on de “descripci´on”.
A˜nade el estilo para la descripci´on.
Sigue las instrucciones en
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2599208804/m-2603798584
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
20. Introducci´on HTML CSS
CSS
Entendiendo el significado de CSS
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378568
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
21. Introducci´on HTML CSS
CSS
Usando la documentaci´on
Usando la documentaci´on provista en
https://developer.mozilla.org/en-US/docs/Web/CSS/font contesta el
cuestionario: https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/e-2663568566/m-2628848562
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
22. Introducci´on HTML CSS
CSS
Etiquetas sem´anticas
La etiqueta “h” (h1,h2,etc), son usadas para poner titulos y subtitulos.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2811608545/m-2810478547
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
23. Introducci´on HTML CSS
CSS
El m´odelo de cajas
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378569/m-2792478544
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
24. Introducci´on HTML CSS
CSS
Manipulando las cajas
Sigue las instrucciones en:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378569/m-2885858554
Nota: En el ejemplo los autores han renombrado la clase “screenshot” por “image”.
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
25. Introducci´on HTML CSS
CSS
Posicionando las cajas
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378571
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
26. Introducci´on HTML CSS
CSS
Codifica, prueba, refina
Termina el ejercicio para que el documento HTML luzca como en la
figura. Explora propiedades como:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378574
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
27. Introducci´on HTML CSS
CSS
Herramientas de desarrollo
Puedes hacer uso de diversas herramientas para apoyarte en tu
desarrollo web:
Las herramientas de desarrollador de Chrome, Firefox:
https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/e-2771378575/m-2771378576
Validador de c´odigo HTML:
https://validator.w3.org/#validate by input
Validador de c´odigo CSS:
http://jigsaw.w3.org/css-validator/#validate by input
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
28. Introducci´on HTML CSS
CSS
¿Como aprender m´as?
Una manera de aprender a desarrollar HTML y CSS, es simplemente
fijandonos en el Internet y en cosas que nos gustar´ıa saber como
fueron hechas. Escribe c´odigo, proponte retos e investiga en Internet.
https://www.udacity.com/course/viewer#!/c-ud304/l-2932638555/m-
2890368536
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS