Empecemos a estudiar el lenguaje HTML,
paso a paso y poco a poco tendremos nuestra página Web.
Antes de empezar con HTML, tenemos que
tener claro que es lo que queremos hacer y cómo.
Como estamos empezando vamos a definir una
página sencilla que poco a poco la iremos transformando en una página más
completa y complicada añadiendo nuevos conceptos.
Espero que sea de utilidad.
La página que vamos a desarrollar es sobre
España en la que introduciremos datos de provincias agrupadas por comunidades autónomas,
extensión, número de habitantes, recursos naturales, etc., todo lo que quieras
se puede hacer en una página web, solo hay que tener la idea clara de cómo lo
quieres.
Empecemos.
Empecemos.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>España</title>
</head>
<body>
</body>
</html>
Ya
tenemos la estructura básica de la página,
Si
abrimos con el navegador lo que tenemos hasta el momento solo veremos que sale
el nombre de la página que es España.
Como
esta página será la principal de nuestra Web, la guarde con el nombre de
index.html.
Sigamos.
Creamos
ahora una lista con todas las comunidades que forma España.
Con
h1 creamos el título de nuestra página y con h2 el subtítulo que es Comunidades
autónomas.
Creamos la lista sin ordenar de todas las comunidades autónomas de España.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>España</title>
</head>
<body>
<h1>ESPAÑA</h1>
<h2>Comunidades autonomas</h2>
<ul>
<li>Andalucía</li>
<li>Aragón</li>
<li>Cantabria</li>
<li>Castilla y León</li>
<li>Castilla-La Mancha</li>
<li>Cataluña</li>
<li>Ceuta</li>
<li>Comunidad de Madrid</li>
<li>Comunidad Valenciana</li>
<li>Extremadura</li>
<li>Galicia</li>
<li>Illes Balears</li>
<li>Islas Canarias</li>
<li>La Rioja</li>
<li>Melilla</li>
<li>Navarra</li>
<li>País Vasco</li>
<li>Principado de Asturias</li>
<li>Región de Murcia</li>
</ul>
</body>
</html>
Si
abrimos ahora con el navegador tenemos una lista de todas las comunidades que
forma España.
En
cada Comunidad crearemos una sublista con las provincias que la forma.
En el caso de la islas que se considera provincia un conjunto de islas crearemos un nivel más con las islas que forman esas provincias.
El codigo que genera la lista compreta es:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>España</title>
</head>
<body>
<h1>ESPAÑA</h1>
<h2>Comunidades autonomas</h2>
<ul>
<li>Andalucía
<ul>
<li>Almería</li>
<li>Cadíz</li>
<li>Cordoba</li>
<li>Granada</li>
<li>Huelva</li>
<li>Jaen</li>
<li>Málaga</li>
<li>Sevilla</li>
</ul>
</li>
<li>Aragón
<ul>
<li>Huesca</li>
<li>Teruel</li>
<li>Zaragoza</li>
</ul>
</li>
<li>Cantabria
<ul>
<li>Santander</li>
</ul>
</li>
<li>Castilla y León
<ul>
<li>Avila</li>
<li>Burgos</li>
<li>León</li>
<li>Palencia</li>
<li>Salamanca</li>
<li>Segovia</li>
<li>Soria</li>
<li>Valladolid</li>
<li>Zamora</li>
</ul>
</li>
<li>Castilla-La Mancha
<ul>
<li>Albacete</li>
<li>Ciudad Real</li>
<li>Cuenca</li>
<li>Guadalajara</li>
<li>Toledo</li>
</ul>
</li>
<li>Cataluña
<ul>
<li>Barcelona</li>
<li>Girona</li>
<li>Lleida</li>
<li>Tarragona</li>
</ul>
</li>
<li>Ceuta</li>
<li>Comunidad de Madrid</li>
<li>Comunidad Valenciana
<ul>
<li>Alicante</li>
<li>Castellon</li>
<li>Valencia</li>
</ul>
</li>
<li>Extremadura
<ul>
<li>Badajoz</li>
<li>Caceres</li>
</ul>
</li>
<li>Galicia
<ul>
<li>A Coruña</li>
<li>Lugo</li>
<li>Ourense</li>
<li>Pontevedra</li>
</ul>
</li>
<li>Illes Balears
<ul>
<li>Bareales
<ul>
<li>Menorca</li>
<li>Mallorca</li>
<li>Ibiza</li>
<li>Formentera</li>
<li>Cabrera</li>
</ul>
</li>
</ul>
</li>
<li>Islas Canarias
<ul>
<li>Las Palmas
<ul>
<li>Gran Canaria</li>
<li>Fuerteventura</li>
<li>Lanzarote</li>
</ul>
</li>
<li>Santa Cruz de Tenerife
<ul>
<li>Tenerife</li>
<li>La Gomera</li>
<li>La Palma</li>
<li>El Hierro</li>
</ul>
</li>
</ul>
</li>
<li>La Rioja
<ul>
<li>La Rioja</li>
</ul>
</li>
<li>Melilla</li>
<li>Comunidad Foral de Navarra
<ul>
<li>Navarra</li>
</ul>
</li>
<li>País Vasco
<ul>
<li>Alava</li>
<li>Guipuzcoa</li>
<li>Vizcaya</li>
</ul>
</li>
<li>Principado de Asturias
<ul>
<li>Oviedo</li>
</ul>
</li>
<li>Región de Murcia</li>
</ul>
</body>
</html>
En el caso de la islas que se considera provincia un conjunto de islas crearemos un nivel más con las islas que forman esas provincias.
El codigo que genera la lista compreta es:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>España</title>
</head>
<body>
<h1>ESPAÑA</h1>
<h2>Comunidades autonomas</h2>
<ul>
<li>Andalucía
<ul>
<li>Almería</li>
<li>Cadíz</li>
<li>Cordoba</li>
<li>Granada</li>
<li>Huelva</li>
<li>Jaen</li>
<li>Málaga</li>
<li>Sevilla</li>
</ul>
</li>
<li>Aragón
<ul>
<li>Huesca</li>
<li>Teruel</li>
<li>Zaragoza</li>
</ul>
</li>
<li>Cantabria
<ul>
<li>Santander</li>
</ul>
</li>
<li>Castilla y León
<ul>
<li>Avila</li>
<li>Burgos</li>
<li>León</li>
<li>Palencia</li>
<li>Salamanca</li>
<li>Segovia</li>
<li>Soria</li>
<li>Valladolid</li>
<li>Zamora</li>
</ul>
</li>
<li>Castilla-La Mancha
<ul>
<li>Albacete</li>
<li>Ciudad Real</li>
<li>Cuenca</li>
<li>Guadalajara</li>
<li>Toledo</li>
</ul>
</li>
<li>Cataluña
<ul>
<li>Barcelona</li>
<li>Girona</li>
<li>Lleida</li>
<li>Tarragona</li>
</ul>
</li>
<li>Ceuta</li>
<li>Comunidad de Madrid</li>
<li>Comunidad Valenciana
<ul>
<li>Alicante</li>
<li>Castellon</li>
<li>Valencia</li>
</ul>
</li>
<li>Extremadura
<ul>
<li>Badajoz</li>
<li>Caceres</li>
</ul>
</li>
<li>Galicia
<ul>
<li>A Coruña</li>
<li>Lugo</li>
<li>Ourense</li>
<li>Pontevedra</li>
</ul>
</li>
<li>Illes Balears
<ul>
<li>Bareales
<ul>
<li>Menorca</li>
<li>Mallorca</li>
<li>Ibiza</li>
<li>Formentera</li>
<li>Cabrera</li>
</ul>
</li>
</ul>
</li>
<li>Islas Canarias
<ul>
<li>Las Palmas
<ul>
<li>Gran Canaria</li>
<li>Fuerteventura</li>
<li>Lanzarote</li>
</ul>
</li>
<li>Santa Cruz de Tenerife
<ul>
<li>Tenerife</li>
<li>La Gomera</li>
<li>La Palma</li>
<li>El Hierro</li>
</ul>
</li>
</ul>
</li>
<li>La Rioja
<ul>
<li>La Rioja</li>
</ul>
</li>
<li>Melilla</li>
<li>Comunidad Foral de Navarra
<ul>
<li>Navarra</li>
</ul>
</li>
<li>País Vasco
<ul>
<li>Alava</li>
<li>Guipuzcoa</li>
<li>Vizcaya</li>
</ul>
</li>
<li>Principado de Asturias
<ul>
<li>Oviedo</li>
</ul>
</li>
<li>Región de Murcia</li>
</ul>
</body>
</html>
Con esto pongo fin a esta parte.
No hay comentarios:
Publicar un comentario