Empezar aquí
  • Introducción
HTML Básico
  • Cómo funciona el HTML
  • Una primera página web
  • Herramientas
  • HTML, CSS y los navegadores
  • La base del HTML: las etiquetas
  • La etiqueta DOCTYPE y la etiqueta
  • La etiqueta
  • Idiomas y el atributo « lang »
  • Añadir información con las etiquetas y </li> <li>Más sobre las etiquetas <meta></li> <li>El contenido de la página web: La etiqueta <body></li> <li>Títulos, subtítulos y contenidos con <h1>, <h2>, <h3>, etc. y párrafos <p></li> <li>Más sobre <h1>, <h2>, etc.</li> <li>Tipos de contenido (content model)</li> <li>Estructura tu contenido con <article> y <section></li> <li>Enriquece tu sitio web con <img>, <div>, Clases, IDs y Atributos</li> <li>Más sobre <img></li> <li>Añadir significado con <em> y <strong></li> <li>Una nota sobre <em>, <strong>, <b> e <i></li> <li>Etiquetas genéricas en línea: <span></li> <li>Plantilla básica en español</li> <li>HTML Básico</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>Trabajar Más Rápido y Mejor </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Sublime Text y Emmet</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>HTML Intermedio </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Cabecera, pie de página y contenido principal con <footer>, <header> y <main></li> <li>Más sobre <footer> y <header></li> <li>Líneas y saltos con <hr> y <br></li> <li>Añadir información adicional con <aside></li> <li>Crear enlaces (links) con la etiqueta <a></li> <li>Links</li> <li>Crea listas usando las etiquetas <ul> y <ol></li> <li>Marcar un menú de navegación con <nav></li> <li>Listas de definición</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>Formas </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Las bases: <form>, <input>, <label> y <textarea></li> <li>Tipos de input</li> <li>Atributos: Placeholder y Name</li> <li>Opciones múltiples con <select>, <option>, <radio> y <checkbox></li> <li>Botones y grupos de campos con <fieldset></li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>CSS Básico </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Cómo funciona el CSS</li> <li>CSS "inline" (en línea) y cómo crear y linkear archivos CSS</li> <li>Colores en CSS</li> <li>El modelo de caja (box model) de CSS: Padding</li> <li>El modelo de caja (box model) de CSS: Border</li> <li>Nota sobre Border</li> <li>El modelo de caja (box model) de CSS: Margin</li> <li>Nota sobre <body> y el modelo de cajas</li> <li>Notaciones largas y cortas para Padding, Border y Margin</li> <li>Unidades de tamaño y distancia: em y px</li> <li>Porcentajes en CSS</li> <li>El modelo de caja (box model) de CSS: Altura y anchura de la caja</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>CSS Intermedio </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Centrar cajas horizontalmente</li> <li>Clases e IDs en CSS</li> <li>Tipografía básica en CSS</li> <li>Fuentes tipográficas y CSS</li> <li>Websafe fonts*</li> <li>Botones básicos en CSS</li> <li>Selectores compuestos de CSS</li> <li>Pseudo-clases en CSS</li> <li>Barra de navegación</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>HTML y CSS Avanzados </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Pseudo-elementos y selectores de atributo</li> <li>"Peso" de un selector CSS</li> <li>Outline CSS</li> <li>Layouts: Floats y columnas</li> <li>Layouts: Posicionamiento</li> <li>Media Queries</li> <li>Lo que sigue...</li> </ul> </div> </div> </div> </div> </div><!-- Fin Contenido del curso --> <!-- Información sobre el Instructor --> <div class="container clearfix" style="padding-top: 150px;"> <div id="instructor"></div> <div class="title-left"> <h3 class="t300">Información sobre el Instructor</h3> </div> <div class="col_one_fourth"> <img style="border: 1px solid #dedfe0; border-radius: 50%;" src="https://img-a.udemycdn.com/user/100x100/6983428_b410_2.jpg" alt="Netcurso-Instructores"><br> <ul style="font-size: 18px;" class="iconlist topmargin-sm"> <li style="margin-bottom: 10px;"><i class="icon-star3"></i><div class="t300"><strong>4.43</strong> Calificación</div></li> <li style="margin-bottom: 10px;"><i class="icon-user4"></i><div class="t300"><strong>3262</strong> Estudiantes</div></li> <li style="margin-bottom: 10px;"><i class="icon-play"></i><div class="t300"><strong>8</strong> Cursos</div></li> </ul> </div> <div class="col_three_fourth col_last"> <h4 class="t300" style="color: #007791">Rogelio Consejo</h4> <h5 class="t400" style="font-size: 16px;" >Hypnotist and teacher</h5> <div class="descri"><p>I have been practicing hypnosis for over 12 years, learning from the works of as many hypnotists as I can (like Milton H. Erickson, Ormond McGill, Dave Elman, Richard Bandler, Michael D. Yapko) and practicing in a semi-formal manner (from giving a small group talks for free and setting up impromptu hypnosis shows on parties to helping friends and clients with some of their problems). I just recently formally begun my private practice.</p> <p><strong>I am a geek:</strong> I give private lessons in math, english, spanish and french... among other things... and I love teaching. I love programming and computers since I'm a kid (I made my first game on QBasic when I was 10). I love videogames.</p> <p><strong>A charming geek... </strong>As a hypnotist, I started the "Academia de Seducción" to help men learn to meet women with a different approach: starting with getting rid of confidence issues instead of learning "lines" and "routines", what I built is a more natural approach. I have a YouTube channel with over 40K subscribers.</p> <p>Also, as an ordained minister of the Church of the Subgenius, I know The Answer to Life, The Universe and Everything, which is 42. Now you know too (and if you don't believe me just search The Answer to Life, The Universe and Everything on Google and see for yourself).</p> <p><br></p></div> </div> <div class="clear"></div> <div class="title-left"> <h3 class="t300">Comentarios de los estudiantes</h3> </div> <div class="col_one_fourth"> <div class="t300" style="font-size: 80px;">4.3</div> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star-half-full"></i> <h5 class="t300" style="font-size: 17px;">Valoración del curso</h5> </div> <div class="col_three_fourth col_last"> <h5 class="t400" style="font-size: 16px;" >Reseñas</h5> <hr style="color: #0056b2;" /> <div class="t300" style="font-size: 17px;"> Anitza Aragon Vlasich <div style="color:gray; font-size: 12px;">28-08-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <br>excelente<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> Hector Salvador Oxte Rodriguez <div style="color:gray; font-size: 12px;">14-06-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star-half-full"></i> <br>Si, desde luego Gracias<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> David Costas Rodríguez <div style="color:gray; font-size: 12px;">23-05-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <br>De momento todo muy explicativo<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> Maria del Carmen Juarez Duran <div style="color:gray; font-size: 12px;">20-06-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <br>si, el curso esta muy bien desarrollado y explicado, muy contenta de la inversión realizada, y todo lo aprendido lo pondré en practica, muchas gracias!!<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> Christian Martin Ramirez Esparza <div style="color:gray; font-size: 12px;">04-02-2019</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <br>Un curso muy bueno, y realmente si te enseña lo que menciona el titulo del curso. Lo recomiendo al 100% y creanme que van aprender a crear sus paginas responsivas.<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> Ramón Gerardo Sáenz Batalla <div style="color:gray; font-size: 12px;">22-05-2018</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <br>Muy detallada y completa la expliccion<hr style='color: #0056b2;' /> </div> <div class="clear"></div> <div class="topmargin"> <center> <a href="https://click.linksynergy.com/link?id=re1xT8rhYck&offerid=507388.1090164&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fdesarrollo-web-para-emprendedores-1-domina-html-y-css%2F" target="_blank" ><button type="button" class="btn btn-dark">Descubre el curso</button></a> <br><br> <span>en</span> <br> <img src="//files.netcurso.net/images/udemy.png" height="50" > </center> </div> </div><!-- Fin Información sobre el Instructor --> <div class="text-center my-5"> <a href="https://netcurso.net/domestika/" class="btn btn-danger btn-lg">Más cursos en Domestika</a> </div> </div> </section> <!-- FIN Content --> <!-- Footer ============================================= --> <footer id="footer" class="topmargin noborder dark" style="background-color: #4d4d4d;"> <div class="container clearfix"> <!-- Footer Widgets ============================================= --> <div class="footer-widgets-wrap clearfix"> <div class="col_one_fourth"> <div class="widget clearfix"> <div class="t400 ls1 lowercase nobottommargin" style="font-size: 36px; letter-spacing: -1px"><i>n</i>c</div> <p class="t300">@2020</p> <abbr title="Email Address">Email:</abbr> info@netcurso.net </div> </div> <div class="col_one_fourth"> <div class="widget widget_links clearfix"> <h4></h4> <ul> <li><a href="//netcurso.net/#categorias">Categorías</a></li> <li><a href="//netcurso.net/nosotros">Nosotros</a></li> </ul> </div> </div> <div class="col_one_fourth"> <div class="widget widget_links clearfix"> <h4></h4> <ul> <li><a href="//netcurso.net/faqs">FAQs</a></li> <li><a href="//netcurso.net/blog">Blog</a></li> </ul> </div> </div> <div class="col_one_fourth col_last"> <div class="widget widget-twitter-feed clearfix"> <a href="https://www.instagram.com/netcurso/" target="_blank" class="social-icon si-rounded si-instagram"> <i class="icon-instagram"></i> <i class="icon-instagram"></i> </a> <a href="https://www.facebook.com/NetCurso/" target="_blank" class="social-icon si-rounded si-facebook"> <i class="icon-facebook"></i> <i class="icon-facebook"></i> </a><a href="https://youtube.com/netcurso" target="_blank" class="social-icon si-rounded si-youtube"> <i class="icon-youtube"></i> <i class="icon-youtube"></i> </a> <!--<a href="#" class="social-icon si-rounded si-twitter"> <i class="icon-twitter"></i> <i class="icon-twitter"></i>--> </a> <a href="//netcurso.net/contacto" class="social-icon si-rounded si-email3"> <i class="icon-email3"></i> <i class="icon-email3"></i> </a> <nav id="primary-menu" class="with-arrows fnone clearfix"> <ul> <li><a href="#"><div style="color: white">ES</div></a> <ul> <li><a href="//netcurso.net/en/"><img src="//files.netcurso.net/images/icons/flags/usa.png" alt="usa"> EN</a></li> <li><a href="//netcurso.net/fr/"><img src="//files.netcurso.net/images/icons/flags/french.png" alt="French"> FR</a></li> <li><a href="//netcurso.net/it/"><img src="//files.netcurso.net/images/icons/flags/italian.png" alt="Italian"> IT</a></li> <li><a href="//netcurso.net/de/"><img src="//files.netcurso.net/images/icons/flags/german.png" alt="German"> DE</a></li> <li><a href="//netcurso.net/pt/"><img src="//files.netcurso.net/images/icons/flags/portugal.png" alt="portugal"> PT</a></li> <li><a href="//netcurso.net/tr/"><img src="//files.netcurso.net/images/icons/flags/turky.png" alt="portugal"> TR</a></li> <li><a href="//netcurso.net/ja/"><img src="//files.netcurso.net/images/icons/flags/japon.png" alt="japon"> JA</a></li> </ul> </li> </ul> </nav> </div> </div> </div><!-- .footer-widgets-wrap end --> </div> <div class="line nomargin"></div> <!-- Copyrights ============================================= --> <div id="copyrights" class="" style="background-color: #FFF;"> <div class="container clearfix"> <div class="col_full center nomargin"> <span style="color: #4d4d4d">Copyrights © 2020 All Rights Reserved by Netcurso</span><br> <span style="color: #4d4d4d" ><i class="icon-line2-pointer"></i> Con amor, desde Venezuela</span><br> <a target="_blank" href="https://www.bible.com/es/bible/128/mat.6.33"><span style="color:#ADA7A7">Mateo 6:33</span></a> </div> </div> </div><!-- #copyrights end --> </footer><!-- #footer end --> </div><!-- #wrapper end --> <!-- Go To Top ============================================= --> <div id="gotoTop" class="icon-long-arrow-up"></div> <!-- External JavaScripts ============================================= --> <!-- External JavaScripts ============================================= --> <script src="//files.netcurso.net/js/jquery.js"></script> <script src="//files.netcurso.net/js/plugins.js"></script> <!-- Bootstrap Typeaheadjs Plugin --> <script src="//files.netcurso.net/js/typehead.js"></script> <!-- Footer Scripts ============================================= --> <script src="//files.netcurso.net/js/functions.js"></script> <script> var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var states = ['Adobe', 'After Effects', 'Ajax', 'Aleman', 'Amazon', 'Amazon Web Services', 'Análisis de datos', 'Angular', 'Animación 3D', 'Aplicaciones', 'Apps', 'Arte y Creatividad', 'Autocad', 'Autocad Esencial 2D', 'Autocad Intermedio 3D', 'Autocad Productivo Render', 'Automatización', 'AWS', 'Baile', 'Base de datos', 'Belleza y Maquillaje', 'Big Data', 'Blender', 'Bootstrap', 'Branding', 'Catia', 'Centos', 'Certificación', 'Cloud computing', 'Comida y bebidas', 'Comunicación', 'Comunity manager', 'Corel Draw', 'css3', 'Deep learning', 'Desarrollo', 'Devops', 'Diseño', 'Diseño Arquitectónico', 'Drive', 'Docker', 'eCommerce', 'Educación', 'Emprendedor', 'Español', 'Excel', 'Finanzas', 'Fitness', 'Fotografia', 'Frances', 'Google', 'Hardware', 'Hogar', 'Html', 'Idiomas', 'Illustrator', 'Industria', 'Ingenieria', 'Ingles', 'Inventor', 'Java', 'Javascript', 'Jenkins', 'Juegos', 'Keynote', 'Kubernetes', 'Lamp', 'Linux', 'Machine learning', 'Marca', 'Marketing', 'Microsoft', 'Microsoft Project', 'Moda', 'MongoDB', 'Musica', 'Mysql', 'Negocios', 'Netcurso', 'NodeJS', 'Numbers', 'Nutricion', 'Oracle', 'Pages', 'Photoshop', 'PHP', 'PostgreSQL', 'Powerpoint', 'Premier', 'Programación', 'Programador', 'Proyectos', 'Publicidad', 'Python', 'Redes', 'Revit', 'Salud', 'SAP', 'Seguridad', 'Sistemas operativos', 'Sketchup', 'Social media', 'Software', 'Solidworks', 'Soluciones nube', 'Ubuntu', 'Ventas', 'Viajes', 'Videos', 'Web', 'Word', 'Wordpress', 'Yoga', ]; $('.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(states) }); </script> <!-- OFERTAS --> <script type="text/javascript"> if (!sessionStorage.cajaOfertasU) { var mensaje = "⭐ Notificaciones de Cursos Online,<a href='https://mailchi.mp/bea451e1c987/landing' class='alert-link' target='_blank'> Ofertas, Promociones y Cupones Gratis! <i class='icon-circle-arrow-right ml-2'></i></a>"; document.getElementById("cajaofertas").innerHTML="<div class='alert alert-info text-center fade show' role='alert' style='margin-bottom: 0rem;'>"+ mensaje +"<button type='button' class='close' data-dismiss='alert' aria-label='Close' onclick='nomasOfertas()' ><span aria-hidden='true'>×</span></button></div>" } function nomasOfertas() { sessionStorage.cajaOfertasU = 'true'; } </script> </body> </html>