Вы находитесь на странице: 1из 8

Taller de Desarrollo de páginas web con PHP

Ms. Ing. Carlos Jara García

TEMA 1: HTML
CREANDO TU PRIMERA PÁGINA WEB
Sigue estos pásos para crear tu página web:

1.- Abre tu editor de texto (Sublime)


2.- En el editor de texto, ingresa el siguiente HTML:
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My web page!</h1>
<p>Hello world, welcome to my web site</p>
</body>
</html>

3.- Guardar el archivo como pagina1.html, mover a la carpeta del proyecto en la


ruta del servidor web.
4.- Abre tu navegador y carga la página
En tu navegador coloca http://localhost/pagina1.html
Taller de Desarrollo de páginas web con PHP
Ms. Ing. Carlos Jara García

CREANDO LISTAS
1.- Creando una lista desordenada
<html>
<head>
<title>An unordered list</title>
</head>
<body>
<ul>
<li>Pine</li>
<li>Oak</li>
<li>Elm</li>
</ul>
</body>
</html>

2.- Creando una lista ordenada


Creating an ordered list means simply changing the <ul> element to <ol>.

Doing so looks like this:

<ol>

<li>Pine</li>

<li>Oak</li>

<li>Elm</li>

</ol>

CREANDO TABLAS
1.- Abrir tu editor de texto
2.- En el editor crear un nuevo documento de texto
3.- Ingresa el siguiente código
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My Table</h1>
<table>
<tr>
<th>Airport Code</th>
<th>Common Name/City</th>
</tr>
<tr>
<td>CWA</td>
<td>Central Wisconsin Airport</td>
</tr>
<tr>
<td>ORD</td>
Taller de Desarrollo de páginas web con PHP
Ms. Ing. Carlos Jara García
<td>Chicago O’Hare</td>
</tr>
<tr>
<td>LHR</td>
<td>London Heathrow</td>
</tr>
</table>
</body>
</htm>

4.- Guardar el archivo como tabla.html, en la carpeta de proyecto web.


5.- Visualizar el archivo en el browser
Open your web browser and type http://localhost/tabla.html into the address bar.

6.- Abre el archivo tabla.html


7.- Cambia el código en el archivo tabla.html por el siguiente:

<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My Table</h1>
<table border=”1”>
<tr>
<th>Airport Code</th>
<th>Common Name/City</th>
</tr>
<tr>
<td>CWA</td>
<td>Central Wisconsin Airport</td>
</tr>
<tr>
<td>ORD</td>
<td>Chicago O’Hare</td>
</tr>
<tr>
<td>LHR</td>
<td>London Heathrow</td>
</tr>
</table>
</body>
</html>

Note el cambio es agregar solo un espacio en el borde en la tabla:


border=”1” en el elemento <table>.

8.- Recargar el archivo en el browser

CREANDO LINKS
1.- Abre tu editor de texto
2.- En el editor de texto, coloca el siguiente código:
Taller de Desarrollo de páginas web con PHP
Ms. Ing. Carlos Jara García

<!doctype html>
<html>
<head>
<title>Link</title>
</head>
<body>
<p>Here’s a link to <a href=”http://www.braingia.
org”>Steve Suehring’s site</a></p>
</body>
</html>

3.- Guardar el archivo como link.html en la carpeta del proyecto.


4.- Abrir el navegador y visualizar la página.

HACIENDO LINK A UNA MISMA PÁGINA


1.- Abre tu editor de texto
2.- En el editor de texto, coloca el siguiente código:

<!doctype html>
<html>
<head>
<title>Link</title>
</head>
<body>
<ul>
<li><a href=”#pine”>Pine</a></li>
<li><a href=”#oak”>Oak</a></li>
<li><a href=”#elm”>Elm</a></li>

</ul>
<p><a name=”pine”>Pine trees are abundant in my yard.</a><p>
<p><a name=”oak”>There are a few oak trees in my yard.</a><p>
<p><a name=”elm”>There’s one elm in my yard.</a><p>
</body>
</html>

3.- Guardar el archivo como link2.html en la carpeta del proyecto.


4.- Abrir el navegador y visualizar la página.

CREANDO UNA PÁGINA CON UNA IMAGEN


1.- Abre tu editor de texto
2.- En el editor de texto, coloca el siguiente código:
<!doctype html>
<html>
<head>
<title>A snowy picture</title>
</head>
<body>
<h1>A snowy picture</h1>
Taller de Desarrollo de páginas web con PHP
Ms. Ing. Carlos Jara García
<p><img src=”snow.jpg” alt=”Early November Snow”></p>
</body>
</html>

3.- GUARDAR EL ARCHIVO COMO IMAGEN.html en la carpeta del proyecto.


4.- Abrir el navegador y visualizar la página.

VALIDANDO TU HTML
1.- ABRIR TU ARCHIVO PAGINA1.HTML USANDO TU EDITOR DE TEXTO.
2.- SELECCIONAR TODO EL CONTENIDO ESCRITO EN EL ARCHIVO.
3.- COPIAR EL CONTENIDO EN EL PORTAPAPELES
CTRL + C
4.- ABRIR EL NAVEGADOR Y ESCRIBIR LA DIRECCIÓN DE W3C Validator
http://validator.w3.org
5.- SELECCIONAR Validate by Direct Input.
6.- PEGAR EL CÓDIGO HTML AL VALIDADOR.
CTRL + V
7.- CLICK EN CHECK
Taller de Desarrollo de páginas web con PHP
Ms. Ing. Carlos Jara García
COMENZARÁ LA VALIDACIÓN DE TU CÓDIGO HTML

Note EN ESTE EJEMPLO las tres advertencias en esta validación. El desplazamiento


hacia abajo revela que una de las advertencias es que el validador HTML5. LAS
OTRAs dos advertencias están relacionadas con la configuración de idioma.

COMENTE EL RESULTADO OBTENIDO.


Taller de Desarrollo de páginas web con PHP
Ms. Ing. Carlos Jara García

TEMA 2: CSS

AGREGANDO ESTILO A UN ELEMENTO HTML


1. Abrir tu editor de texto
2. Con el documento de texto en blanco coloca el siguiente texto HTML:

<!doctype html>
<html>
<head>
<title>A CSS Exercise</title>
</head>
<body>
<div>This is my web page.</div>
<div>
This is the <span>nicest</span> page I’ve made yet.
</div>
<div>Here is some text on my page.</div>
</body>
</html>

3. Guardar el archivo con el nombre css.html


4. Abre tu navegador y visualiza la página
5. Cierra el navegador
6. Ve al editor de texto para editar el texto HTML
7. Cambia el texto al siguiente:
<!doctype html>
<html>
<head>
<title>A CSS Exercise</title>
</head>
<body>
<div style=”font-weight: bold;”>This is my web page.</
div>
<div>
This is the <span style=”font-style:
italic;”>nicest</span> page I’ve made yet.
</div>
<div style=”font-weight: bold;”>Here is some text on my
page.</div>
</body>
</html>

8. Guardar el archivo como css2.html


9. Abre tu navegador y visualiza la página css2.html
Taller de Desarrollo de páginas web con PHP
Ms. Ing. Carlos Jara García
AGREGANDO ESTILO A GRUPO DE ELEMENTOS HTML
1. Abrir tu editor de texto
2. Con el archivo css2.html
3. Realizar los cambios al texto del archivo css para eliminar el css.

The page should look like this:

<!doctype html>
<html>
<head>
<title>A CSS Exercise</title>
<link rel=”stylesheet” type=”text/css” href=”style.
css”>
</head>
<body>
<div class=”boldText”>This is my web page.</div>
<div>
This is the <span>nicest</span> page I’ve made yet.
</div>
<div class=”boldText”>Here is some text on my page.</
div>
</body>
</html>

4. Guardar el archivo con el nombre css3.html


5. Usando el editor de texto, crear un nuevo archivo vacío.
6. Colocar el siguiente código CSS en el archivo:

.boldText {
font-weight: bold;
}
span {
font-style: italic;
}

7. Guardar el archivo con el nombre de style.css


8. Abrir el navegador y visualizar la página.

Вам также может понравиться