Curso HTML 4

Páginas: 72 (17956 palabras) Publicado: 5 de octubre de 2015
Unidad 1. Introducción a HTML (I) 4
¿Qué es HTML? 4
Versiones de HTML 4
Unidad 1. Introducción a HTML (II) 5
Los navegadores. Compatibilidad 5
Editores 6
Etiquetas 7
Unidad 1. Introducción a HTML (III) 8
Unidad 2. Estructura de una página (I) 9
Identificador del tipo de documento 9
Cabecera de la página 9
Título de la página 10<br /> Unidad 2. Estructura de una página (II) 11Cuerpo del documento <body> 11<br /> Unidad 3. El texto (I) 13<br /> Caracteres especiales y espacios en blanco 13<br /> Comentarios 14<br /> Saltos de línea <br> 14<br /> Unidad 3. El texto (II) 15<br /> Texto preformateado <pre> 15<br /> Unidad 3. El texto (III) 17<br /> Formatear el texto <font> ... 17<br /> Resaltado del texto <b> ... 17<br /> Unidad 3. El texto (IV) 19<br /> Párrafos <p> ... 19<br /> Encabezados <h1> ... 20<br /> Título 1: HTML 20<br /> Título 2: HTML 20<br /> Título3: HTML 20<br /> El lenguaje HTML 20<br /> Unidad 4. Hiperenlaces (I) 22<br /> Hiperenlace <a> 22<br /> Tipos de referencias 22<br /> Unidad 4. Hiperenlaces (II) 24<br /> Destino del enlace 24<br /> Formato de los enlaces 24<br /> Unidad 4. Hiperenlaces (III) 26<br /> Puntos de fijación. Anclas 26<br /> Otros tipos de enlaces 26<br /> <br /> Unidad 5. Imágenes (I) 28<br /> Imagen <img> 28<br /> Texto alternativo 28<br /> Unidad 5. Imágenes (II) 30<br /> Borde de una imagen 30<br /> Tamaño de unaimagen 30<br /> Unidad 5. Imágenes (III) 32<br /> Alineación de una imagen 32<br /> Unidad 6. Tablas (I) 34<br /> Tabla <table> 34<br /> Fila <tr> 34<br /> Columna o celda <td> 35<br /> Unidad 6. Tablas (II) 36<br /> Formato de la tabla 36<br /> Formato de las celdas 37<br /> Unidad 6. Tablas (III) 39<br /> Encabezado de columna <th> 39<br /> Título de tabla <caption> 39<br /> Unidad 6. Tablas (IV) 40<br /> Combinar celdas 40<br /> Unidad 7. Marcos (I) 42<br /> Conjunto de marcos <frameset>42<br /> Unidad 7. Marcos (II) 45<br /> Marco <frame> 45<br /> Sin marcos <noframes> 46<br /> Unidad 7. Marcos (III) 47<br /> Destino del enlace 47<br /> Unidad 8. Formularios (I) 49<br /> Formulario <form> 49<br /> Áreas de texto <textarea> 50<br /> <br /> <br /> Unidad 8. Formularios (II) 51<br /> Elementos de entrada <input> 51<br /> Unidad 8. Formularios (III) 53<br /> Campos de selección <select> ... 53<br /> Unidad 9. Multimedia (I) 54<br /> Sonido de fondo <bgsound> 54<br /> Vídeo y audio<embed> 54<br /> Unidad 9. Multimedia (II) 56<br /> Películas Flash <object> ... 56<br /> Unidad 10. Capas 58<br /> Capa <div> ... 58<br /> Unidad 11. JavaScript (I) 60<br /> Lenguajes de script 60<br /> Unidad 11. JavaScript (II) 61<br /> JavaScript <script> 61<br /> Unidad 12. Hojas de estilo (I) 62<br /> Introducción 62<br /> Vincular una hoja de estilo 62<br /> Sintaxis de las hojas de estilo 63<br /> Unidad 12. Hojas de estilo (II) 64<br /> Las propiedades 64<br /> Unidad 13.Páginas web dinámicas (I) 66<br /> HTML dinámico 66<br /> Programación web 67<br /> Unidad 13. Páginas web dinámicas (II) 68<br /> XML………………………………………68<br /> Unidad 1. Introducción a HTML (I)<br /> <br /> A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web.<br /> ¿Qué es HTML?<br /> El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje dehipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.<br /> Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.<br /> Los documentos HTML deben tener la extensiónhtml o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).<br /> Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.<br /> Versiones de HTML<br /> En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de páginas web. Se creó con objetivosdivulgativos, orientado a la actividad académica, en el que el contenido de las páginas era más importante que el diseño.<br /> Pero esta versión del HTML carecía de muchas herramientas que permitieran controlar el diseño de las páginas y añadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los más utilizados por aquellos años) comenzó a incluir nuevas etiquetas que no existían en... <div class="paper-body__gradient paper-body__gradient--bottom paper-body__gradient--bottom-abs"></div> <div class="center paper-body__cta--mod paper-body__cta-no-bg"> <a class="button button--large button--orange" onclick="upgradeRedirect()" rel="nofollow"> Leer documento completo </a> <p class="ash-gray text-s"> Regístrate para leer el documento completo. </p> </div> </div> </div> </div> </article> </main> <script>(function(d){var domain='buenastareas.com';if(d.referrer.match('^https?\:\/\/(|www\.)'+domain.replace('.com',"")+'\.com(.*)')){d.getElementById('stm-hero').className+=' stm-hero';d.getElementById('emptyTopicsList').innerHTML=(document.getElementById("topicsList"))?d.getElementById('topicsList').innerHTML:'';d.getElementById('text-header').innerHTML='';var sec=d.createElement('div');sec.className='section no-padding margin-2';var p=d.createElement('p');p.className='text-s uppercase ash-gray';p.innerText='Vista previa del texto';sec.appendChild(p);d.getElementById('text-header').appendChild(sec);}else{d.getElementById('stm-hero').className='';d.getElementsByTagName('article')[0].className='row no-border';}})(window.document);</script><div class="advertBox center margin-2 leaderboard_btf"> </div> <a href="/content/access" rel="nofollow"></a> <section class="row "> <div class="columns position-relative large-12"> <div class=""> <h2 class="heading-m padding-top-1 margin-2"> Estos documentos también te pueden resultar útiles </h2> </div> <section class=""> <ul class="unstyled"> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Curso-Html/52844693.html" title="curso html"> <h6 class="heading-s"> curso html </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...ESTRUCTURA DE <b><i>HTML</i></b> Cuerpo de la página. SALTO DE LINEA PHP JavaScript Java C C++ PARRAFO SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc. MySQL es un interpretador de SQL, es un servidor de base de datos. MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos,... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Curso-Html/52844693.html" title="curso html" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">603 Palabras</span> <span class="essay-details__item">3 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Curso-De-Html/6559723.html" title="Curso De Html"> <h6 class="heading-s"> Curso De Html </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...¿Qué es <b><i>HTML</i></b>? <b><i>HTML</i></b> (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto". <b><i>HTML</i></b> es el lenguaje que te permite describir y dar forma a tús páginas Web. Publica tus propias páginas con fotos, listas, tablas, etc. Obtén información de los visitantes de tu sitio. Diseña los formularios que te permitirán contactar tus futuros clientes. Crea un sitio para vender tús productos o servicios. Incluye video clips, música, sonidos, y otras... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Curso-De-Html/6559723.html" title="Curso De Html" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">1640 Palabras</span> <span class="essay-details__item">7 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Curso-B%C3%A1sico-De-Lenguaje-Html/25936703.html" title="Curso básico de lenguaje HTML"> <h6 class="heading-s"> Curso básico de lenguaje HTML </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ... <b><i>Curso</i></b> básico de lenguaje <b><i>HTML</i></b> Índice estructura general de un fichero <b><i>HTML</i></b> Formato de párrafos Formato de texto Listas no ordenadas Listas ordenadas Listas de definiciones Tablas Anclas Links Inserción de imágenes Imágenes clicables Imágenes sensibles Frames Formularios Layers o capas Estructura general de un fichero <b><i>HTML</i></b> <b><i>HTML</i></b> (HYPER TEXT MARKUP LENGUAGE) es el lenguaje utilizado en la Internet... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Curso-B%C3%A1sico-De-Lenguaje-Html/25936703.html" title="Curso básico de lenguaje HTML" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">731 Palabras</span> <span class="essay-details__item">3 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Diferencia-Entre-Html-4-y-5/1835477.html" title="Diferencia entre html 4 y 5"> <h6 class="heading-s"> Diferencia entre html 4 y 5 </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...tabla con las diferencias con HTML4 <b><i>4</i></b>: indica si el elemento está definido en <b><i>HTML</i></b> 4.01 5: indica si el elemento está definido en <b><i>HTML</i></b> 5 Etiqueta Descripción <b><i>4</i></b> 5 Para incrustar comentarios <b><i>4</i></b> 5 Para indicar el tipo de documento <b><i>4</i></b> 5 El hipervínculo de toda la vida <b><i>4</i></b> 5 Para abreviaciones <b><i>4</i></b> 5 No soportado. Define un acrónimo <b><i>4</i></b> Define un elemento de la... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Diferencia-Entre-Html-4-y-5/1835477.html" title="Diferencia entre html 4 y 5" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">858 Palabras</span> <span class="essay-details__item">4 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Diferencias-Entre-Html-4-y-5/79321501.html" title="Diferencias entre HTML 4 Y 5"> <h6 class="heading-s"> Diferencias entre HTML 4 Y 5 </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...Diferencias entre <b><i>HTML</i></b> <b><i>4</i></b> Y 5. Tabla comparativa de elementos de <b><i>HTML</i></b> <b><i>4</i></b> Y <b><i>HTML</i></b> 5 Etiqueta Descripción <b><i>4</i></b> 5 <!–…–> Para incrustar comentarios <b><i>4</i></b> 5 <!DOCTYPE> Para indicar el tipo de documento <b><i>4</i></b> 5 <a> El hipervínculo de toda la vida <b><i>4</i></b> 5 <abbr> Para abreviaciones <b><i>4</i></b> 5 <acronym> No soportado. Define un acrónimo <b><i>4</i></b> <address> Define un elemento de la... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Diferencias-Entre-Html-4-y-5/79321501.html" title="Diferencias entre HTML 4 Y 5" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">1017 Palabras</span> <span class="essay-details__item">5 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Curso-Sena-Semana-4/4683193.html" title="Curso Sena Semana 4"> <h6 class="heading-s"> Curso Sena Semana 4 </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...estructuras metálicas según planos * Procesos de soldadura MIG, TIG; Flux Cored para acero estructural y acero inoxidable 304, 316 y 310 y aluminio. * Servicio de corte con plasma hasta 2 pulgadas de espesor. * Servicio de roladora hasta 3/<b><i>4</i></b> de pulgada. * Servicio de guillotina y dobladora hasta 3/8 de pulgada. * Aplicación de pinturas industriales. RECONSTRUCTORA DE MOTORES * Reconstrucción de Bloques Encamisado y rectificado de cilindros,... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Curso-Sena-Semana-4/4683193.html" title="Curso Sena Semana 4" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">772 Palabras</span> <span class="essay-details__item">4 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Curso-Coaching-Clase-4/78198748.html" title="CURSO COACHING CLASE 4"> <h6 class="heading-s"> CURSO COACHING CLASE 4 </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...TRABAJO PRACTICO En las primeras clases de este <b><i>curso</i></b> vimos el origen y aplicación de coaching y sus beneficios y cambios que se pueden experimentar al realizar el proceso. Como vimos debemos partir del autoconocimiento. Para ello les propongo hoy realizar una serie de ejercicios. Les sugiero que los contesten reflexionando antes de dar sus repuestas. No existen respuestas correctas ni erróneas; no serán calificados (juzgados); es personal y privado; si lo desean pueden... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Curso-Coaching-Clase-4/78198748.html" title="CURSO COACHING CLASE 4" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">1253 Palabras</span> <span class="essay-details__item">6 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Curso-Calidad-Semana-4/3855458.html" title="Curso Calidad Semana 4"> <h6 class="heading-s"> Curso Calidad Semana 4 </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ... | | | <b><i>4</i></b>. Resultados de la Medición de la Satisfacción del Cliente: Generar resultados por cada uno de los puntos de la encuesta. Para la presentación de los resultados totales deben apoyarse en graficas (Ej.: Diagrama de Barras, Circular,... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Curso-Calidad-Semana-4/3855458.html" title="Curso Calidad Semana 4" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">647 Palabras</span> <span class="essay-details__item">3 Páginas</span> </div> </div> </div> </div> </div> </div> </li> </ul> </section> </div> </section> <section class="row "> <div class="columns position-relative large-12"> <section class="section no-border"> <div class="container"> <div class="row"> <div class="columns "> <div class="section-heading "> <h2 class="align-left margin-2 heading-m"> OTRAS TAREAS POPULARES </h2> </div> </div> </div> <div class="row" id="popular-tags-visible"> <div class="small-12 columns tag-block columns-small-1 columns-medium-2 columns-large-2"> <ul> <li class="margin-1"> <a href="/ensayos/Planeaci%C3%B3ndesesionesdigitales/79730395.html" title="PlaneaciónDESesionesDIGITALES" class="mid-gray brand-primary--hover">PlaneaciónDESesionesDIGITALES</a> </li> <li class="margin-1"> <a href="/ensayos/Producci%C3%B3n-De-Filtros-Ecol%C3%B3gicos/79730404.html" title="Producción de filtros ecológicos" class="mid-gray brand-primary--hover">Producción de filtros ecológicos</a> </li> <li class="margin-1"> <a href="/ensayos/Depreciacion-y-Amortizacion/79730410.html" title="DEPRECIACION Y AMORTIZACION" class="mid-gray brand-primary--hover">DEPRECIACION Y AMORTIZACION</a> </li> <li class="margin-1"> <a href="/ensayos/Copia-De-Encuesta-Sap-209/79730425.html" title="Copia de Encuesta Sap 209" class="mid-gray brand-primary--hover">Copia de Encuesta Sap 209</a> </li> <li class="margin-1"> <a href="/ensayos/Pena-De-Muerte/79730446.html" title="Pena de Muerte" class="mid-gray brand-primary--hover">Pena de Muerte</a> </li> <li class="margin-1"> <a href="/ensayos/Trabajo-Estudio-Cuali-Final/79730449.html" title="Trabajo Estudio Cuali Final" class="mid-gray brand-primary--hover">Trabajo Estudio Cuali Final</a> </li> </ul> </div> </div> </div> </section> </div> </section> <div class="advertBox center margin-1"></div> <section class="section no-border brand-primary--bg"> <div class="row"> <div class="columns center"> <h3 id="banner_title" class="heading-l white">Únete a millones de otros estudiantes y comienza tu investigación</h3> <h4 class="text-m white">Conviértase en miembro formal de Buenas Tareas</h4> <a class="button--bg-color__white button-fullwidth" onclick="upgradeRedirect()" rel="nofollow"> INSCRÍBETE - ES GRATIS </a> </div> </div> </section> <footer class="section section--footer"> <div class="row"> <div class="medium-3 columns"><div class="copyright-block"> <p class="copyright-block__logo"> <i class="icon icon-sm-logo copyright-block__logo__icon"></i> <span class="copyright-block__logo__span">Buenas Tareas</span> </p> <p class="copyright-block__social"> <a rel="nofollow" href="http://www.facebook.com/BuenasTareas"> <span class="copyright-block__social__circle"> <i class="copyright-block__social__circle__icon icon icon-ui-24-social-fb icon-ui-social-fb"></i> </span> </a> <a rel="nofollow" href="https://twitter.com/buenastareas"> <span class="copyright-block__social__circle"> <i class="copyright-block__social__circle__icon icon icon-ui-social-tw"></i> </span> </a> </p> <small class="copyright-block__copyright text-s"> ©2024 BuenasTareas.com </small> </div> </div> <div class="medium-3 columns"><div class="vertical-nav-list"> <h6 class="vertical-nav-list__heading heading-xxs">Productos</h6> <ul class="vertical-nav-list__container"> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/ojear/">Documentos de investigación</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/resumen-de-libros/">Notas de libros</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/generador-de-citas/">Generador de citas</a> </li> </ul> </div> </div> <div class="medium-3 columns"> <div class="vertical-nav-list"> <h6 class="vertical-nav-list__heading heading-xxs">Empresa</h6> <ul class="vertical-nav-list__container"> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/about.php">Empresa</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/advertise-with-us.php">Haz publicidad</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/legal.php">Legal (actualizado 9/9/14)</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/sitemap.html">Mapa del sitio</a> </li> </ul> </div> </div> <div class="medium-3 columns"><div class="vertical-nav-list"> <h6 class="vertical-nav-list__heading heading-xxs">Ayuda</h6> <ul class="vertical-nav-list__container"> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/help.php">Ayuda</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/about-us/contact">Contáctanos</a> </li> </ul> </div> </div> </div> </footer> </div> <!-- global JS --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js"></script> <script type="text/javascript"> $LAB .script("//cdnjs.cloudflare.com/ajax/libs/aja/0.4.1/aja.min.js") .script("//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js") .script("//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.min.js") .script("//cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.3.2/jquery.payment.min.js") .script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/92c1d4e847bc6d93ba58214aa322ee6c.js") ; </script> <script type="text/javascript"> window.SM2_DEFER = true; function downloadJSAtOnload() { $LAB .script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/76aff662ad8b32c9348bfa0fa9cb8f91.js") .wait(function() { }); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </body> </html>