Академический Документы
Профессиональный Документы
Культура Документы
TEMA 1: HTML
CREANDO TU PRIMERA PÁGINA WEB
Sigue estos pásos para crear tu página web:
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>
<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>
<!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>
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>
<!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>
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
TEMA 2: CSS
<!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>
<!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>
.boldText {
font-weight: bold;
}
span {
font-style: italic;
}