Semana9 Ejemplo

Parte 1.
Aprendiendo HTML para crear una pgina web
En este tutorial vamos a ensear los fundamentos bsicos para que alguien que, sin
tener ni idea de html ni CSS, pueda construir una pgina web. Continuar haciendo
tutoriales sobre sto y sobre cmo aplicarle a los html las hojas de estilo CSS. Para
ello, me apoyar en el libro de la editorial ANAYA Curso de CSS. No es nada
complicado aprenderlo, slo es cuestin de dedicarle tiempo e ir probando.
Vamos a ir poco a poco y siguiendo estos pasos:

1. Abrir un editor de texto
2. Cmo se empieza
3. DOCTYPE
4. Etiquetas bsicas html
5. Conclusiones
1. Abrir un editor de texto

El primer paso ser abrir un editor de texto.
Existen varios editores bsicos pre-instalados en los sistemas operativos, segn
usemos Windows, Mac o Linux:
Bloc de Notas (Windows)

TextEdit (Mac)
gedit (Linux)
stos son otros editores de texto gratuitos con ms funcionalidades:
Notepad++ (Para Windows)

TextWrangler (para Mac)
jedit (para Windows, Mac y Linux)
Ahora deberemos abrir uno de ellos para poder comenzar.
NOTA: El Bloc de Notas de Windows se encuentra en: Inicio -> Accesorios -> Bloc de
Notas.
El TextEdit de Mac se encuentra en Aplicaciones.
2. Cmo se empieza
Lo primero que deberemos escribir en nuestro editor ser lo siguiente:
1 <html>
2 Mi primera pgina web
3 </html>
Todo lo que se encuentra entre y > son etiquetas de html. La primera etiqueta que
debemos poner es la de html, que nos indicar que lo que estamos creando es un html.
Seguidamente aadimos los elementos head y body en el documento:
1 <html>
2 <head>
3 </head>
4 <body>
6 </body>
7 </html>
Ahora aadiremos dentro del head, el title, que ser el ttulo que nos aparecer en las
pestaas de nuestro navegador:
1 <html>
2 <head>
3 <title> Aprendiendo html </title>
4 </head>
5 <body>
7 </body>
8 </html>
NOTA: Antes de seguir, guardaremos nuestro documento con la extensin .html, por
ejemplo podra llamarse: miprimerapaginaweb.html .
As cuando la abramos con cualquier navegador [botn derecho sobre el archivo -> abrir
con -> (elegimos el navegador que queramos)] podremos ver cmo nos est quedando:
Esta es la estructura bsica que tiene que tener una pgina web, ahora iremos viendo
las distintas etiquetas bsicas para nuestro primer html. Y el DOCTYPE.
3. DOCTYPE
Para que nuestro documento sea vlido y cumpla los estndares, necesitaremos
colocar antes de la etiqueta que hemos colocado de html, alguno de los DTD que
existen para distintas versiones de html, nosotros elegiremos el siguiente:
DTD transicional para XHTML 1.0:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

2 ml1-transitional.dtd">
3 <html>
4 <head>
6 </head>
7 <body>
9 </body>
</html>
NOTA: Un DOCTYPE o DTD, abreviatura de definicin de tipo de documento, define

los bloques de construccin de un documento HTML o XHTML y le dice a los
navegadores y a los validadores qu versin de HTML o XHTML utiliza nuestro
documento.
4. Etiquetas bsicas html

Ahora s, vamos a ir viendo las distintas etiquetas y vamos a ir creando una pgina web
bsica.
Lo que vamos a ver ser:

Etiquetar encabezados
Negrita, cursiva, prrafo y salto de lnea
Aadir una imagen
Crear listas
Crear un vnculo a una pgina web
Crear tablas
Etiquetar encabezados
Para diferenciar la importancia de varios encabezados dentro del mismo documento,
utilizaremos los 6 tipos de encabezados disponibles, del h1 al h6, tal y como se ve a
continuacin:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

2 tml1-transitional.dtd">
3 <html>
4 <head>
6 </head>
7 <body>
8
9 <h1> Mi primera pgina web </h1>
10 <p> Texto en este prrafo </p>
11
12 <h2> Encabezado de nivel 2 </h2>
14
17
20
23
26
27 </body>
</html>
NOTA: la etiqueta p significa prrafo, es decir, lo que est dentro de esa etiqueta
formar un prrafo que se separar del resto con un salto de lnea implcito en dicha
etiqueta.
Y nos quedar de la siguiente manera:
NOTA: Utilice h1 slo para el ttulo y h2 y h3 para el resto de encabezados. Pero
siempre en orden, no se salte encabezados, detrs de h2 debera de haber un h3, etc.
Negrita, cursiva, prrafo y salto de lnea

Negrita
Para poner una palabra o frase en negrita, la etiqueta ser la b, de este modo:
1 <b> Este texto estar en negrita </b> pero ste no
Y nos quedar lo siguiente:
Es decir, que todo lo que coloquemos entre la etiqueta b (de bold) nos aparecer en
negrita.
Cursiva
Del mismo modo para poner en cursiva alguna palabra o frase usaremos la etiqueta i,
de este modo:
1 <i> Este texto estar en cursiva </i> pero ste no
Y nos quedar lo siguiente:

Es decir, que todo lo que coloquemos entre la etiqueta i (de italic) nos aparecer en
cursiva.
NOTA: Podemos usar varias etiquetas para una misma palabra o frase, por ejemplo:
1 <i><b> Este texto estar en cursiva y negrita </b></i> pero ste no
Prrafo y salto de lnea

Para crear un prrafo, la etiqueta es la p, que ya incluye el salto de lnea y el salto lo
haremos con la etiqueta br. Vemoslo:
<p> Prrafo que tiene implcito un salto de lnea </p>
1
Para dar el salto manualmente cada vez que queramos, usaremos el br, pudiendo poner tantos seguidos como quera
2
mos, por ejemplo ponemos 3 seguidos: <br><br><br> Y nos quedar esta separacin.
Aadir una imagen

Para aadir una imagen, primero tenemos que saber dnde est ubicada, el nombre
exacto de la carpeta donde se encuentra, y el nombre exacto de la imagen, por ejemplo,
imaginemos que tenemos dentro de la carpeta imagenes, otra que se llama, paisajes y
dentro de sta la imagen que queremos colocar, que se llama: cataratasiguazu.jpg . As
que deberamos escribir lo siguiente:
1 <h1> Cataratas de Iguaz </h1>

2 <img src= "imagenes/paisajes/cataratasiguazu.jpg"/>
Y nos quedara as:

NOTA: Adems podemos colocar los atributos alt para proporcionar un texto alternativo
en el caso de que el navegador tenga desactivada la presentacin de imgenes o para
personas que naveguen con algn tipo de tecnologa asistencial tal como lector de
pantalla y title para que al dejar el cursor sobre nuestra imagen, se pueda ver el ttulo
de la misma.
<h1> Cataratas de Iguaz </h1>
1
<img src= "imagenes/paisajes/cataratasiguazu.jpg" alt= "Vista area de las Cataratas de Iguaz" title= "Cataratas de Ig
2
uaz"/>
Crear listas
Hay 3 tipos de listas en HTML: no ordenadas, ordenadas y listas de definiciones:
Listas no ordenadas:
Se crean de la siguiente manera:
1 <ul>
2 <li> Primer elemento </li>
3 <li> Segundo elemento </li>
4 <li> Tercer elemento </li>
5 <li> Cuarto elemento </li>
6 </ul>
Y nos quedara:
Listas ordenadas:
Se crean de la misma forma que la anterior pero cambiando ul por ol de la siguiente
manera:
1 <ol>
2 <li> Primer elemento </li>
3 <li> Segundo elemento </li>
4 <li> Tercer elemento </li>
5 <li> Cuarto elemento </li>
6 </ol>
Y nos quedara:
Listas de definiciones:
Se crean de la misma forma que la primera pero cambiando ul por dl y adems se
colocan las etiquetas dt (para el trmino) y dd (para la definicin):
1 <dl>
2 <dt> Primer trmino </dt>
3 <dd> Definicin del primer trmino </dd>
4 <dt> Segundo trmino </dt>
5 <dd> Definicin del segundo trmino </dd>
6 <dt> Tercer trmino </dt>
7 <dd> Definicin del tercer trmino </dd>
8 </dl>
Y nos quedara:
Crear un vnculo a una pgina web

Para crear un vnculo a una pgina web escribiremos lo siguiente:
1 Para ir a nuestra pgina web haga clic <a href = "http://www.adictosaltrabajo.com/"> aqu. </a>
Y si se quiere que al clicar sobre el vnculo nos lleve a otra ventana o pestaa se
escribir de la siguiente manera:
1 Para ir a nuestra pgina web haga clic <a href = "http://www.adictosaltrabajo.com/" target="blank"> aqu. </a>
NOTA: Todo lo que queda entre el a href y la a, ser el vnculo.
Crear tablas
Crearemos tablas de la siguiente manera (donde podremos ir modificando el diseo de
la misma cambiando los parmetros que incluimos):
1 <table border="1" cellspacing="1" cellpadding="1">

2 <caption>
3 Tabla de porcentajes
4 </caption>
5 <tr>
6 <th> </th>
7 <th> 2006 </th>
8 <th> 2007 </th>
9 <th> 2008 </th>
10 <th> 2009 </th>
11 <th> 2010 </th>
12 </tr>
13 <tr>
14 <td> % </td>
15 <td> 45 </td>
16 <td> 78 </td>
17 <td> 50 </td>
18 <td> 45 </td>
19 <td> 36 </td>
20 </tr>
21 </table>
Y nos quedara:
5. Conclusiones
Este es un primer acercamiento al mundo del html. Con estas sencillas herramientas
ya es posible crear una pgina web, pero en los siguientes tutoriales ir ampliando la
informacin hasta llegar a crear una pgina web de diseo con html y hojas de estilo
CSS. Pero para ello hay que ir practicando

Semana9 Ejemplo

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Semana9 Ejemplo

Transféré par

Droits d'auteur :

Formats disponibles

Parte 1.

Aprendiendo HTML para crear una pgina web

Vamos a ir poco a poco y siguiendo estos pasos:

1. Abrir un editor de texto

Bloc de Notas (Windows)

Notepad++ (Para Windows)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

NOTA: Un DOCTYPE o DTD, abreviatura de definicin de tipo de documento, define

4. Etiquetas bsicas html

Lo que vamos a ver ser:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

Negrita, cursiva, prrafo y salto de lnea

1 <b> Este texto estar en negrita </b> pero ste no

Y nos quedar lo siguiente:

1 <i> Este texto estar en cursiva </i> pero ste no

Y nos quedar lo siguiente:

1 <i><b> Este texto estar en cursiva y negrita </b></i> pero ste no

Prrafo y salto de lnea

Aadir una imagen

1 <h1> Cataratas de Iguaz </h1>

Y nos quedara as:

Crear un vnculo a una pgina web

1 <table border="1" cellspacing="1" cellpadding="1">

CSS. Pero para ello hay que ir practicando

Vous aimerez peut-être aussi