1 Ing. Cleyver Vazquez Jijon
2 ¿Qué es el HTML? (Hyper Text Markup Language)Es el lenguaje con el que se diseñan las páginas web. Es un lenguaje de hipertexto, 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. 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. Ing. Cleyver Vazquez Jijon
3 Editores de Código HTMLUn editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Algunos de los editores visuales con los que podrás crear tus páginas Web son: Macromedia Dreamweaver. Bloc de Notas Microsoft Frontpage. Adobe Pagemill. NetObjects Fusion. Ing. Cleyver Vazquez Jijon
4 Ing. Cleyver Vazquez JijonETIQUETAS Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo está delimitada por los caracteres < >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. La etiqueta de final está delimitada por los caracteres . Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. EJEMPLO: Ing. Cleyver Vazquez Jijon
5 ETIQUETAS PRINCIPALESLas siguientes etiqueta todas la páginas web las tienen que llevar. Indica el inicio de una pagina web Indica el titulo de la página el nombre que aparecerá en la parte superior del navegador.</span> <span class='tr'><BODY> El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 6 </span> Ing. Cleyver Vazquez Jijon<span class='tr'>ESTRUCTURA GENERAL</span> <span class='tr'>DE UNA PAGINA WEB</span> <span class='tr'><HTML></span> <span class='tr'><TITLE></span> <span class='tr'>Mano Amiga</span> <span class='tr'> Bienvenidos Ing. Cleyver Vazquez Jijon
7 CREAR MI PRIMER PÁGINA WEBIng. Cleyver Vazquez Jijon
8 ¿Qué programa utilizaremos?Para crear nuestra primer pagina web utilizaremos el bloc de notas esta es un aplicación que no tienes que instalar ya que viene en cualquier versión de Windows que tengas en tu computadoras (xp, vista o seven). Para esto vayan al botón “Inicio”, luego “Accesorios” y por ultimo “Bloc de notas”. Ing. Cleyver Vazquez Jijon
9 ¿Qué programa utilizaremos?También utilizaremos un navegador es decir un programa o interfaz grafica que permite abrir las páginas de Internet para poder visualizar el resultado de codificación que estamos elaborando. Dentro de los navegadores mas comunes tenemos: Internet Explorer. Mozilla Firefox Google Chrome Netscape Ing. Cleyver Vazquez Jijon
10 Ing. Cleyver Vazquez JijonESCRIBIENDO EL CÓDIGO Ya que abrimos el bloc de notas escribimos el siguiente código tal y como se muestra en la siguiente ventana: Nota: Pueden escribirlo en mayúsculas o minúsculas no hay ningún problema Ing. Cleyver Vazquez Jijon
11 Ing. Cleyver Vazquez Jijon¿Cómo se guarda? Una vez que terminamos de escribir el código es importante guardarlo de forma correcta para que pueda funcionar. Para ello realizaremos los siguiente pasos: Seleccionamos “Archivo”. Seleccionamos “Guardar”. Seleccionamos la dirección donde se guardara. Colocamos el nombre del archivo incluyendo la extensión .html. Nota: Se recomienda crear una carpeta en el escritorio o en el disco local “C:” con el nombre de “practicas de html” con el objetivo de tener todas nuestras practicas bien organizadas en una sola carpeta. Ing. Cleyver Vazquez Jijon
12 ¿Cómo verifico si se guardo correctamente?Si el archivo se guarda de forma correcta se mostrara el siguiente icono: Pero si el archivo no se guardo correctamente entonces se mostrara un icono de la siguiente forma: Ing. Cleyver Vazquez Jijon
13 ¿Cómo ver el funcionamiento de mi página?Es muy sencillo solo le das doble clic al archivo y en ese momento te va abrir el navegador que tengas instalado y te mostrara el resultado de la pagina: Ing. Cleyver Vazquez Jijon
14 Ing. Cleyver Vazquez JijonCódigo y Resultado La etiqueta permite colocarle el titulo a nuestra pagina Web.</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 15 </span> Ing. Cleyver Vazquez Jijon<span class='tr'>Código y Resultado</span> <span class='tr'>La etiqueta <BODY> permite insertar texto a nuestra pagina Web.</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 16 </span> Hacer modificaciones a mi página Web<span class='tr'>Para realizar modificaciones a la página primeramente se debe cerrar la pagina si se esta utilizando, posteriormente haga clic derecho sobre el archivo y seleccione la opción “Abrir con..” y seleccione “Bloc de notas”:</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 17 </span> Hacer modificaciones a mi página Web<span class='tr'>Se realizan las modificaciones necesarias y posteriormente se guarda de forma normal (Archivo – Guardar) ya que no es necesario incluir la extensión .html esto se realiza cuando se guarda por primera vez y se cierra el bloc de notas.</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 18 </span> Ver las modificaciones realizadas<span class='tr'>Una vez que se realizaron modificaciones abrimos nuevamente el archivo dándole doble clic sobre el:</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 19 </span> Ing. Cleyver Vazquez Jijon<span class='tr'>Preguntas</span> <span class='tr'>¿Cómo le hizo para ponerle color?</span> <span class='tr'>¿Cómo le hizo para hacer la letra mas grande?</span> <span class='tr'>¿Cómo le hizo para poner ese tipo de letra?</span> <span class='tr'>Respuesta</span> <span class='tr'>Para poder realizar esos cambios se utilizan otras etiquetas y atributos que vamos a ir viendo poco a poco en los próximos temas.</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 20 </span> Ing. Cleyver Vazquez Jijon<span class='tr'>Etiquetas y atributos</span> <span class='tr'>Al inicio vimos que en la codificación HTML se manejan etiquetas y cada una de ellas tiene una funcionalidad dentro de una pagina, pero existen etiquetas que a su vez cuentan con algunos atributos. Los atributos son propiedades de las etiquetas. Por Ejemplo:</span> <span class='tr'><BODY> Etiqueta sin atributos</span> <span class='tr'><BODY bgcolor=pink> Etiqueta con atributos</span> <span class='tr'>Recuerda que la etiqueta <body> representa el cuerpo de la pagina es decir el contenido de la pagina web y en este ejemplo utilizamos el atributo bgcolor y le asignamos el valor pink utilizando el signo de “=“ esto permite que el fondo de la pagina sea color rosa.</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 21 </span> Otro ejemplo de Etiquetas y atributos<span class='tr'><FONT> Etiqueta sin atributos</span> <span class='tr'><FONT size=6 color=blue> Etiqueta con atributos</span> <span class='tr'>La etiqueta <FONT> permite asignarle propiedades al texto:</span> <span class='tr'>Con el atributo size asignamos el tamaño de la letra que va desde 1 hasta 7.</span> <span class='tr'>Con el atributo color asignamos el color de la letra el cual tiene que ser escrito en ingles.</span> <span class='tr'>Asi como los dos ejemplos anteriores exiten muchas etiquetas y algunas de estas etiquetas cuentan con atributos, pero tambien recuerden que estas etiquetas se tienen que cerrar. </FONT></span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 22 </span> Mas Etiquetas y atributos<span class='tr'>Descripción</span> <span class='tr'>Atributos</span> <span class='tr'><FONT></span> <span class='tr'>Permite aplicar formato al texto de la pagina web</span> <span class='tr'>SIZE</span> <span class='tr'>COLOR</span> <span class='tr'>FACE</span> <span class='tr'>Tamaño de la letra</span> <span class='tr'>Color de la letra</span> <span class='tr'>Tipo de letra</span> <span class='tr'><BR></span> <span class='tr'>Realiza un salto de línea</span> <span class='tr'><P></span> <span class='tr'>Realiza un salto de párrafo</span> <span class='tr'><OL></span> <span class='tr'>Realiza lista ordenadas</span> <span class='tr'>TYPE</span> <span class='tr'>START</span> <span class='tr'>Define el tipo de lista</span> <span class='tr'>Indica el número en que iniciara la lista</span> <span class='tr'><UL></span> <span class='tr'>Realiza lista desordenadas</span> <span class='tr'>Indica el tipo de lista</span> <span class='tr'><LI></span> <span class='tr'>Coloca cada uno de los elementos de las listas <UL> y <OL></span> <span class='tr'><IMG></span> <span class='tr'>Inserta una imagen en la pagina web</span> <span class='tr'>SRC</span> <span class='tr'>WIDTH</span> <span class='tr'>HEIGHT</span> <span class='tr'>BODER</span> <span class='tr'>Indica la dirección de la imagen</span> <span class='tr'>Ancho de la imagen</span> <span class='tr'>Alto de la imagen</span> <span class='tr'>Colocar borde a la imagen con un grosor</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 23 </span> Mas Etiquetas y atributos<span class='tr'>Descripción</span> <span class='tr'>Atributos</span> <span class='tr'><TABLE></span> <span class='tr'>Permite insertar una tabla a una página web</span> <span class='tr'>BORDER</span> <span class='tr'><TR></span> <span class='tr'><TD></span> <span class='tr'>Coloca un borde a la pagina</span> <span class='tr'>Permite insertar Filas a la tabla</span> <span class='tr'>Permite insertar Columnas a la tabla</span> <span class='tr'><MARQUEE></span> <span class='tr'>Aplica un efecto de movimiento a un determinado elemento</span> <span class='tr'>BEHAVIOR</span> <span class='tr'>Indica el tipo de efecto</span> <span class='tr'><A></span> <span class='tr'>Insertar un hipervínculo</span> <span class='tr'>HREF</span> <span class='tr'>Indica la dirección a la cual se va a enlazar</span> <span class='tr'><BGSOUND></span> <span class='tr'>Insertar un sonido a la pagina web</span> <span class='tr'>SRC</span> <span class='tr'>LOOP</span> <span class='tr'>Indica la dirección de archivo de audio</span> <span class='tr'>Indica la cantidad de veces que se repetira</span> <span class='tr'><EMBED></span> <span class='tr'>Insertar un video</span> <span class='tr'>WIDTH</span> <span class='tr'>HEIGHT</span> <span class='tr'>Indica la dirección del video</span> <span class='tr'>Ancho del video</span> <span class='tr'>Alto del video</span> <span class='tr'><CENTER></span> <span class='tr'>Permite centrar un elemento de la pagina web</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 24 </span> Ing. Cleyver Vazquez Jijon<span class='tr'>Ejercicios</span> <span class='tr'>Realizar la practica 1 que ya viene en esta presentación</span> <span class='tr'>Realizar la practica 2.</span> <span class='tr'>Si gustas puedes poner otros colores y otros tipos de letras, pero para el tipo de letra se debe de poner entre comillas si el nombre lleva mas de dos palabras como se muestra en la práctica 2</span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p><p><span class="span-circle-num"> 25 </span> Ing. Cleyver Vazquez Jijon<span class='tr'>Gracias</span> <span class='tr'>Dudas y sugerencias</span> <span></span> <span class='tr'>Ing. Cleyver Vazquez Jijon</span></p> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Box Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Sign In</h3>
</div>
<div class="modal-body">
<form action="https://slidepptx.com/login" method="post">
<div class="form-group form-group-lg">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group form-group-lg">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group form-group-lg">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember Password </label>
<label class="pull-right"><a href="https://slidepptx.com/forgot">Forgot Password?</a></label>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
</form>
<hr style="margin-top: 15px;" />
<a href="https://slidepptx.com/login/google" class="btn btn-lg btn-google btn-block"><i class="fa fa-google"></i> Login with Google</a>
</div>
</div>
</div>
</div>
<!-- Box Footer -->
<div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;">
<div class="footer-container-inner">
<footer id="footer" class="container">
<div class="row">
<div class="bottom-footer">
<div class="container">
Copyright © 2026 SLIDEPPTX.COM. All rights reserved.
</div>
<hr />
</div>
</div>
<div class="row">
<!-- Block footer -->
<section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer">
<h4>Information</h4>
<ul class="toggle-footer" style="">
<li><a href="https://slidepptx.com/about">About Us</a></li>
<li><a href="https://slidepptx.com/privacy">Privacy Policy</a></li>
<li><a href="https://slidepptx.com/term">Terms and Conditions</a></li>
<li><a href="https://slidepptx.com/copyright">Copyright</a></li>
<li><a href="https://slidepptx.com/contact">Contact Us</a></li>
</ul>
</section>
<!-- /Block footer -->
<section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Follow us</h4>
<ul>
<li class="facebook">
<a target="_blank" href="" title="Facebook">
<i class="fa fa-facebook-square"></i> <span>Facebook</span>
</a>
</li>
<li class="twitter">
<a target="_blank" href="" title="Twitter">
<i class="fa fa-twitter-square"></i> <span>Twitter</span>
</a>
</li>
<li class="google-plus">
<a target="_blank" href="" title="Google Plus">
<i class="fa fa-plus-square"></i> <span>Google Plus</span>
</a>
</li>
</ul>
</section>
<!-- Block Newsletter module-->
<div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Newsletter</h4>
<div class="block_content">
<form action="https://slidepptx.com/newsletter" method="post">
<div class="form-group">
<input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" />
<button type="submit" name="submit_newsletter" class="btn btn-default">
<i class="fa fa-location-arrow"></i>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</div>
<!-- /Block Newsletter module-->
</div>
</footer>
</div>
</div>
<!-- #footer -->
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://slidepptx.com/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
$(document).ready(function() {
$(".doc-share-btn").click(function() {
var urlshare = $(this).attr('data-share-url');
window.open('http://www.facebook.com/sharer.php?u=' + urlshare, '_blank');
});
});
function download_submit() {
$('#download_form').submit();
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106734935-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
