Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions 2_HTML5/basicohtml5.html
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
<!DOCTYPE html> <!-- L�NEA OBLIGATORIA en los documentos de HTML5 para que los navegadores desplieguen la p�gina en modo est�ndar de acuerdo con las especificaciones de html y css -->
<!DOCTYPE html> <!-- L�NEA OBLIGATORIA en los documentos de HTML5 para que los navegadores desplieguen la p�gina en modo est�ndar de acuerdo con las especificaciones de html y css -->
<!-- Esto es un comentario "you don't say?" -->
<!-- newforminputtypes.html -->
<!-- Ejemplo HTML5 -->
<!-- New HTML5 form input types and attributes. -->
<html>
<head>
<meta charset="ISO-8859-1"><!-- Codificaci�n de caract�res, UTF-8 es el m�s utilizado y ISO-8859-1 se utiliza para caract�res latinos -->
<meta charset="UTF-8"><!-- Codificaci�n de caract�res, UTF-8 es el m�s utilizado y ISO-8859-1 se utiliza para caract�res latinos -->
<!-- Pueden incluirse instrucciones especiales de formato de documento CSS -->
<title>New HTML5 Input Types</title><!-- Elemento anidado que describe las p�ginas web, identificador cuando se agrega a marcadores o favoritos -->
<title>New HTML5 Input Types</title><!-- Elemento anidado que describe las p�ginas web, identificador cuando se agrega a marcadores o favoritos -->
</head>

<body>

<h1 id = "encabezado">Encabezado h1 m�s significativo</h1>
<h1 id = "encabezado">Encabezado h1 más significativo</h1>
<h2>Encabezado h2 </h2>
<h3>Encabezado h3</h3>
<h4>Encabezado h4</h4>
<h5>Encabezado h5</h5>
<h6>Encabezado h6</h6>

<p>Esto es un p�rrafo "p", cuando se despliega el p�rrafo , coloca espacio adicional encima y debajo del texto</p>
<p>Esto es un párrafo "p", cuando se despliega el párrafo , coloca espacio adicional encima y debajo del texto</p>

<!-- <Hiperv�nculos>
<!-- <Hiperv�nculos>
*********************************************************************************************************************************
-->
<p id = "hiper"><strong>Elemento "strong" para resaltar la importancia del texto.</strong></p>
<p><a href ="hhttp://www.cursos.danjrosales.com.mx/">"a" de ancla y "href" como referencia de hipertexto para los hiperv�nculos</a></p>
<p><a href ="http://www.cursos.danjrosales.com.mx/">"a" de ancla y "href" como referencia de hipertexto para los hiperv�nculos</a></p>
<p><a href ="http://www.cursos.danjrosales.com.mx/" target="_blank"><strong>Target _blank:</strong> nueva ventana o tab </a></p>
<p><a href ="http://www.cursos.danjrosales.com.mx/" target="_self"><strong>Target _self:</strong> por default, mismo frame </a></p>
<p><a href ="http://www.cursos.danjrosales.com.mx/" target="_parent"><strong>Target _parent:</strong> frame padre </a></p>
<p><a href ="http://www.cursos.danjrosales.com.mx/" target="_top"><strong>Target _top:</strong> cuerpo completo ventana</a></p>
<p><a href ="mailto:ejemplo@domain.com" target="_top"><strong>URL mailto:</strong> V�nculo a direcciones de correo electr�nico </a></p>
<p><a href ="mailto:ejemplo@domain.com" target="_top"><strong>URL mailto:</strong> V�nculo a direcciones de correo electr�nico </a></p>
<p><a href = "#encabezado">Ir a <em>encabezado</em></a></p>
<p><a href = "#">Ir a <em>encabezado</em></a></p>
<p><a href = "#tablas">Ir a <em>tablas</em></a></p>
<!-- </Hiperv�nculos>
<!-- </Hiperv�nculos>
*********************************************************************************************************************************
-->

Expand All @@ -60,27 +60,27 @@ <h6>Encabezado h6</h6>
</th>
</tr>
<tr>
<th>T�tulo Columna 1</th>
<th>T�tulo Columna 2</th>
<th>T�tulo Columna 3</th>
<th>T�tulo Columna 1</th>
<th>T�tulo Columna 2</th>
<th>T�tulo Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>�Qu� es Lorem Ipsum?</th>
<td colspan = "3">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno est�ndar de las industrias desde el a�o 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido us� una galer�a de textos y los mezcl� de tal manera que logr� hacer un libro de textos especimen. No s�lo sobrevivi� 500 a�os, sino que tambien ingres� como texto de relleno en documentos electr�nicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creaci�n de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y m�s recientemente con software de autoedici�n, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</td>
<th>�Qu� es Lorem Ipsum?</th>
<td colspan = "3">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno est�ndar de las industrias desde el a�o 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido us� una galer�a de textos y los mezcl� de tal manera que logr� hacer un libro de textos especimen. No s�lo sobrevivi� 500 a�os, sino que tambien ingres� como texto de relleno en documentos electr�nicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creaci�n de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y m�s recientemente con software de autoedici�n, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</td>
</tr>
<tr>
<th>�Por que lo usamos?</th>
<td colspan = "3">Es un hecho establecido hace demasiado tiempo que un lector se distraer� con el contenido del texto de un sitio mientras que mira su dise�o. El punto de usar Lorem Ipsum es que tiene una distribuci�n m�s o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aqu�, contenido aqu�".</td>
<th>�Por que lo usamos?</th>
<td colspan = "3">Es un hecho establecido hace demasiado tiempo que un lector se distraer� con el contenido del texto de un sitio mientras que mira su dise�o. El punto de usar Lorem Ipsum es que tiene una distribuci�n m�s o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aqu�, contenido aqu�".</td>
</tr>
<tr>
<th>�De d�nde viene?</th>
<td colspan = "3">Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl�sica de la literatura del Latin, que data del a�o 45 antes de Cristo, haciendo que este adquiera mas de 2000 a�os de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontr� una de las palabras m�s oscuras de la lengua del lat�n, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del lat�n, descubri� la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el a�o 45 antes de Cristo. Este libro es un tratado de teor�a de �ticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la secci�n 1.10.32</td>
<th>�De d�nde viene?</th>
<td colspan = "3">Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl�sica de la literatura del Latin, que data del a�o 45 antes de Cristo, haciendo que este adquiera mas de 2000 a�os de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontr� una de las palabras m�s oscuras de la lengua del lat�n, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del lat�n, descubri� la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el a�o 45 antes de Cristo. Este libro es un tratado de teor�a de �ticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la secci�n 1.10.32</td>
</tr>
</tbody>
</table>
<p><a href = "#hiper">Ir a <em>hiperv�nculos</em></a></p>
<p><a href = "#hiper">Ir a <em>hiperv�nculos</em></a></p>

<!-- </Tablas>
*********************************************************************************************************************************
Expand Down
11 changes: 4 additions & 7 deletions 2_HTML5/formhtml5.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
<!DOCTYPE html>
<!-- L�NEA OBLIGATORIA en los documentos de HTML5 para que los navegadores desplieguen la p�gina en modo est�ndar de acuerdo con las especificaciones de html y css -->
<!-- L�NEA OBLIGATORIA en los documentos de HTML5 para que los navegadores desplieguen la p�gina en modo est�ndar de acuerdo con las especificaciones de html y css -->
<!-- Esto es un comentario "you don't say?" -->
<!-- newforminputtypes.html -->
<!-- Ejemplo HTML5 -->
<!-- New HTML5 form input types and attributes. -->
<html>
<head>
<meta charset="UTF-8"><!-- Codificaci�n de caract�res, UTF-8 es el m�s utilizado y ISO-8859-1 se utiliza para caract�res latinos -->
<meta charset="UTF-8"><!-- Codificaci�n de caract�res, UTF-8 es el m�s utilizado y ISO-8859-1 se utiliza para caract�res latinos -->
<!-- Pueden incluirse instrucciones especiales de formato de documento CSS -->
<title>New HTML5 Input Types</title><!-- Elemento anidado que describe las p�ginas web, identificador cuando se agrega a marcadores o favoritos -->
<title>New HTML5 Input Types</title><!-- Elemento anidado que describe las p�ginas web, identificador cuando se agrega a marcadores o favoritos -->
</head>

<body>

<h1>New HTML5 Input Types</h1>


<form method = "post" autocomplete = "on" action="#">
<form method = "post" autocomplete = "on" action="#">
<p><label>First Name:
<input type = "text" id = "firstName"
placeholder = "First name" /> (First name)
Expand Down
9 changes: 5 additions & 4 deletions 2_HTML5/stylehtml5.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,600,700i,800|Open+Sans|Roboto:300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<meta charset = "ISO-8859-1">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">
<meta charset = "UTF-8">
<title>Styles</title>
<style type = "text/css">
em{
Expand All @@ -15,7 +15,8 @@
top: 20px;
left: 200px;
z-index: 3;
font-size: 20pt;color: purple; }
font-size: 20pt;color:
purple; }
h2 { font-family: tahoma, helvetica, sans-serif;
position: absolute;
top: 60px;
Expand Down Expand Up @@ -52,7 +53,7 @@
</head>
<body>
<h1>FCA UNAM</h1>
<h2>Desarrollo de sitios web con transacciones en l�nea</h1>
<h2>Desarrollo de sitios web con transacciones en líneal</h1>
<p><img src = "images/background_image.png" class = "background_image"
alt = "First positioned image" /></p>

Expand Down