Documento HTML:
<html>
</html>
Cabecera:
<head>
</head>
Título:
<title>Título</title>
Nota: se coloca dentro de la cabecera.
Colocar especificaciones especiales:
<meta></meta>
Ejemplo:
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, Javascript">
Nota: se coloca dentro de la cabecera.
Cuerpo:
<body>
</body>
Salto de línea (Enter):
<br />
Salto de línea agregando línea divisoria:
<hr />
Párrafo (Paragraph):
<p>Párrafo</p>
Bold y Strong:
<b>texto</b>
<strong>texto</strong>
Italic y Emphasis:
<i>texto</i>
<em>texto</em>
Preformatted Text:
El texto que escribamos dentro de los tags de preformatted text (<pre></pre>) se va a mostrar en una letra con un buen espaciado y muy legible. Además, los espacios que pongamos entre palabras u oraciones serán respetados.
Cabeceras:
h1, h2, h3, …: Sirven para marcar cabeceras, el h1 se utiliza generalmente para los títulos de mayor relevancia en una página, y los sucesores (h2, h3,…) para los subtítulos encadenados o textos de menor importancia con respecto a los anteriores.
El tag que utilizan es el <h1></h1>, <h2></h2>, ...
Abbreviation:
Nos permite poner el tag <abbr></abbr> con un título dentro del primero.
Quedaría <abbr title=""></abbr>
Entonces nosotros podemos poner una palabra abreviada entre los dos tags, y la palabra entera en el atributo title.
De esta manera, solo nos escribirá la abreviatura, pero si pasamos el Mouse por encima, nos mostrará la palabra completa en un recuadro amarillo.
Ejemplo: <abbr title="Dreamweaver">Dw</abbr>
Acronym:
Funciona exactamente igual al tag anterior.
Su escritura en HTML es <acronym title=""></acronym>.
Su diferencia real es que el abbr se utiliza para abreviar una palabra, y el acronym para un acrónimo.
Por ejemplo: <acronym title="HyperText Markup Language">HTML</acronym>
Imagen:
<img />
Sintaxis:
<img src="lugardelaimagen/imagen.jpg" alt="descripción" />
src: Este atributo es la que va a contener la url del lugar en donde tengamos la imagen, por ende es indispensable que esté.
alt: Este atributo va a contener un texto alternativo para que, en caso de que nuestra imagen no este disponible, no dejar el espacio en blanco y que la gente no sepa que es lo que iba ahí.
width/height: Estas dos son otras de las propiedades de la etiqueta <img /> y son opcionales, ya que por defecto la etiqueta toma el tamaño real de la imagen.
Ejemplo:
<img src=”http://página.com/lugardelaimagen/imagen.jpg” alt=”descripción” width=”100px” height=”100px” />
Enlaces:
<a></a>
href: En este atributo deberemos ponerle lugar a donde queremos que nos lleve esta etiqueta cuando hagamos clic sobre ella.
title: Este atributo es el que nos abre el cuadradito amarillo famoso (tooltip) con el título del enlace cuando le pasamos por encima.
target: En este atributo vamos a indicar si queremos que nuestro enlace abra una nueva ventana para su destino (“_blank”), si queremos que cargue la página en el mismo lugar en que estamos(“_self”), y (“_top”) y (“_parent”) que son similares a los anteriores pero se usan cuando utilizamos <frames> (cosa que no me gusta nada :p).
Ejemplo:
<a href="http://www.elwebmaster.com" alt="página de elwebmaster" target="_blank">Click aquí para ir a la página de elwebmaster.com</a>
Ejemplo combinado con imagen:
<a href=”http://www.elwebmaster.com” alt=”página de elwebmaster” target=”_blank”>
<img src=”logodeelwebmaster.jpg” alt=”elwebmaster.com” />
</a>
Ejemplo en donde link esta en otro lugar de la misma página:
<a href=”#lugar”>Ir hacia el lugar</a>
Lugar destino:
<a name=”lugar”>Llegué a este lugar</a>
Comentario:
Inicia con <!–, y finaliza con –>.
Subrayado:
<u> (esto esta subrayado) </u>
Centrar:
<center> (este texto esta centrado) </center>
Texto dentro de una especie de caja imaginaria:
<blockquote>texto</blockquote>
<span>texto</span>
Este tag, no hace nada, se utiliza para introducirlo dentro de otros tags, o por sí sólo, para darle un formato diferente al texto de su interior mediante estilos.
Listas:
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Tipos: square, circle, y disc.
<ol type="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Nota: van a estar ordenadas por numeración o alfabéticamente.
Listas de definición:
<d1>
<dt><stromp>Palabra</stromp></dt>
<dd>Sucesión de letras con un significado específico</dd>
<br/> <!-- Salto de línea y comentarios -->
<dt><stromp>Sucesión de letras con un significado específico</stromp></dt>
<dd>
Definición de palabras según Thor, que no coincide en nada con la
definición de la RAE, pero queda más lindo y entendible.
</dd>
</d1>
Tablas:
Ejemplo 1:
<table>
<tr>
<td><strong>Título</strong></td>
<td><strong>Descripción</strong></td>
<td><strong>Empresa</strong></td>
</tr><tr>
<td>Dreamweaver</td>
<td>Programa de maquetación web</td>
<td>Adobe Systems Incorporated</td>
</tr>
</table>
Ejemplo 2:
<table>
<tr>
<td colspan="2"><strong>Programas de Adobe Systems Incorporated</strong></td>
</tr> <tr>
<td>Dreamweaver</td>
<td>Programa de maquetación web</td>
</tr>
</table>
Ejemplo 3:
<table>
<tr>
<td>Estudiamos en el taller</td>
<td colspan="2"><strong>Programas de Adobe Systems Incorporated</strong></td>
</tr> <tr>
<td>Dreamweaver</td>
<td>Flash</td>
<td>Illustrator</td>
</tr>
</table>
Ejemplo 4:
<table>
<tr>
<td rowspan="2">Estudio del taller</td>
<td>Programa</td>
<td>Código</td>
</tr> <tr>
<td>Dreamweaver</td>
<td>HTML</td>
</tr>
</table>
Cellspacing: Esta propiedad se usa en la etiqueta <table> ( <table cellspacing=”2″) y define nuestro espacio entre una celda y la otra de nuestra tabla.
Border: Esta propiedad también se usa en la etiqueta <table> e indica el borde que va a tener nuestra tabla tanto alrededor como el de las celdas en sí.
Divisores:
<div></div>
Ejemplo 1:
<body>
<div>(header)</div>
<div>(barra lateral)</div>
<div>(nota 1)</div>
<div>(nota 2)</div>
<div>(footer)</div>
</body>
Ejemplo 2:
<body>
<div style="background-color: red; width: 100%; height: 30%;">(header)</div>
<div style="background-color: blue; float: left; height: 60%; width: 20%;">(barra lateral)</div>
<div style="background-color: yellow; float: left; height: 60%; width: 40%;">(nota 1)</div>
<div style="background-color: green; float: left; height: 60%; width: 40%;">(nota 2)</div>
<div style="background-color: gray; height: 10%; width: 100%;">(footer)</div>
</body>
Ejemplo 3:
<body>
<div style="background-color: red; width: 100%; height: 30%;">(header)</div>
<div style="background-color: blue; float: left; height: 60%; width: 20%;">(barra lateral)</div>
<style type="text/css" media=screen">
.pieNota p, h2 {
margin: 0 0 0 10px;
padding: 0 0 0 0;
color:blue;
font-size:16px;
}
</style>
<div style="background-color: white; width: 40%; height: 60%; float: left;">
<!--(nota 1) este es el cuadro amarillo de nuestro maquetado del ejemplo anterior-->
<img style="margin-top: 10px; margin-left: 10px; margin-right: 20px;float: left;"
src="imagenes/logo.gif" width="128px" height="96px" alt="logo de elwebmaster">
<h1 style="color: gray; font-family: helvetica;">
<a href="http://www.elwebmaster.com" title="enlacle a elwebmaster">
elwebmaster.com cumple un año!!
</a>
</h1>
<p style="margin-left: 10px">
El 21 de mayo de 2007 nacio el webmaster.com, por aquel entonce solo dos personas escribian
en el sitio. <br/>
Definitivamente crecimos mucho en en estos 365 dias y sin embargo no hemos perdido.
</p>
<p style="margin-left: 10px">Articulo extraido de elwebmaster.com</p>
<hr width="80%"/>
<div class="pieNota">
<h2>Artículos relacionado</h2>
<p><a href="http://www.elwebmaster.com" title="enlacle a elwebmaster">Taller de Dreamweaver/HTML</a></p>
<p><a href="http://www.elwebmaster.com" title="enlacle a elwebmaster">Taller de PHP</a></p>
<p><a href="http://www.elwebmaster.com" title="enlacle a elwebmaster">Taller de Photoshop</a></p>
<p><a href="http://www.elwebmaster.com" title="enlacle a elwebmaster">más...</a></p>
</div>
</div>
<div style="background-color: green; float: left; height: 60%; width: 40%;">(nota 2)</div>
<div style="background-color: gray; height: 10%; width: 100%;">(footer)</div>
</body>
Estilos CSSEjemplo sin estilos:
<div>
<h2>Articulo de explicacion: manejo de CSS</h2>
<p>El CSS no es muy dificil de aprender, pero requiere
paciencia a la hora de usarlo.</p>
<h2>Articulos relacionados: </h2>
<p>Dw/html taller elwebmaster.com</p>
<p>w3c y maquetado correcto del html</p>
</div>
Ejemplo con estilos:
<div id="nota-uno">
<h2>Articulo de explicacion: manejo de CSS</h2>
<p>El CSS no es muy dificil de aprender,
pero requiere paciencia a la hora de usarlo.</p>
<div class="pieNota">
<h2>Articulos relacionados: </h2>
<p>Dw/html taller elwebmaster.com</p>
<p>w3c y maquetado correcto del html</p>
</div>
</div>
<style type="text/css" media="screen">
#nota-uno h2, p {
color: red;
font-size: 16px;
}
#nota-uno .pieNota h2, p {
color:yellow;
font-size: 12px;
}
</style>
Formularios:
Sintaxis:
<form method="post" action="login.php">
[...]
</form>
Lista de los principales caracteres especiales:
á: á Á: Á <: <
é: é É: É >: >
í: í Í: Í ¡: ¡
ó: ó Ó: Ó &: &
ú: ú Ú: Ú ": "
ñ: ñ Ñ: Ñ ®: ®
¿: ¿ Espacio en blanco " ":
Preparando un sitio web:
1.- Ir al menú File/New y crear un nuevo archivo HTML.
2.- Definir la carpeta para el sitio web.
3.- Presionar en Manage Sites.
4.- Seleccionamos New y luego Site.
5.- Definimos el nombre del sitio como: Taller, y la la dirección URL como la dirección en donde tengas montado tu servidor, en mi caso: http://xccscam996edd/Taller.
6.- Dejar el resto de las opciones como están.
http://www.elwebmaster.com/editorial/taller-de-adobe-dreamweaver-dentro-del-formulario
No hay comentarios:
Publicar un comentario