Skip to content

Update basicohtml5.html #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Imran-imtiaz48 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update basicohtml5.html #16

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
190 changes: 104 additions & 86 deletions 2_HTML5/basicohtml5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,108 @@
<!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 -->
<!-- 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 -->
</head>
<!DOCTYPE html>
<!-- Documento HTML5 mejorado -->
<html lang="es">
<head>
<meta charset="UTF-8">
<title>New HTML5 Input Types</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px solid #444;
padding: 8px;
text-align: left;
}
caption {
font-weight: bold;
margin-bottom: 8px;
}
</style>
</head>
<body>

<body>

<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>

<!-- <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/" 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 = "#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>
*********************************************************************************************************************************
-->

<!-- <Tablas>
*********************************************************************************************************************************
-->
<table border = "5" id = "tablas">
<caption>Ejemplo de tablas 4 dummies</caption>
<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>

<thead>
<!-- rowspans and colspans merge the specified -->
<!-- number of cells vertically or horizontally -->
<tr>
<!-- merge two rows -->
<th rowspan = "2">
<img src = "images/image1.png" width = "205" height = "167" alt = "Dr. Mono"> <!--Imagen-->
</th>
<p>Esto es un párrafo <code>&lt;p&gt;</code>, cuando se despliega el párrafo, coloca espacio adicional encima y debajo del texto.</p>

<!-- merge four columns -->
<th colspan = "4">
<strong>Dr Mono</strong><br>
primate hedonista y vago
</th>
</tr>
<tr>
<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>
</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>
</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>
</tr>
</tbody>
</table>
<p><a href = "#hiper">Ir a <em>hiperv�nculos</em></a></p>

<!-- </Tablas>
*********************************************************************************************************************************
-->

</body>
<!-- Hipervínculos -->
<p id="hiper"><strong>Elemento "strong" para resaltar la importancia del texto.</strong></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 defecto, 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="#encabezado">Ir a <em>encabezado</em></a>
</p>
<p>
<a href="#tablas">Ir a <em>tablas</em></a>
</p>
<!-- Fin Hipervínculos -->

<!-- Tablas -->
<table id="tablas">
<caption>Ejemplo de tablas 4 dummies</caption>
<thead>
<tr>
<th rowspan="2">
<img src="images/image1.png" width="205" height="167" alt="Imagen de Dr. Mono">
</th>
<th colspan="3">
<strong>Dr Mono</strong><br>
Primate hedonista y vago
</th>
</tr>
<tr>
<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...
</td>
</tr>
<tr>
<th>¿Por qué lo usamos?</th>
<td colspan="3">
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido...
</td>
</tr>
<tr>
<th>¿De dónde viene?</th>
<td colspan="3">
Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum"...
</td>
</tr>
</tbody>
</table>
<p>
<a href="#hiper">Ir a <em>hipervínculos</em></a>
</p>
<!-- Fin Tablas -->

</body>
</html>