Este documento explica lo que es una página web, el lenguaje HTML y cómo crear una página web básica con Bloc de Notas. Describe una página web como un documento electrónico que forma parte de la World Wide Web y se construye con HTML, el cual permite incluir texto, imágenes, enlaces y otros elementos. También resume los pasos básicos para crear la estructura de una página web en HTML usando Bloc de Notas, incluyendo etiquetas como <html>, <head>, <title>, <body> y atributos comunes
2. ¿QUE ES UNA PAGINA WEB?
Se trata de un documento electrónico que
forma parte de la WWW(Word Wide Web) y
construido en el lenguaje HTML. capaz de
contener texto, sonido, vídeo, programas,
enlaces, imágenes, y muchas otras cosas.
Las páginas web pueden estar almacenadas en
un equipo local o un servidor web remoto.
3. HTML
• Es el lenguaje que se emplea para el
desarrollo de páginas de internet
(lenguaje de marcas de hipertexto). Está
compuesto por una serie de etiquetas
que el navegador interpreta y da forma
en la pantalla. HTML dispone de
etiquetas para imágenes, hipervínculos
que nos permiten dirigirnos a otras
páginas, saltos de línea, listas, tablas, etc.
4. Bloc de notas
• Primero abrimos un documeno
en el bloc de notas y procedemos
a darle el nombre de index.html
para guardarlo en una carpeta
que tenemos que tener creada en
nuestra maquina, ejemplo en el
escritorio. En esta carpeta
ponemos todos nuestros archivo
que vamos a necesitar o añadir a
nuestra pagina, tales como
imágenes, videos, fondos, botones,
etc.
5. Estructura de una pagina web en html
• Para empezar con el diseño necesitamos de etiquetas de
apertura como de cierre. La primera que vamos a utilizar es
la de <HTML> para iniciar nuestro documento,
recordemos que cuando abrimos una etiqueta por lo
general siempre debemos cerrarla. En este caso la etiqueta
de <HTML> la cerramos al final de todo el documento.
• Ejemplo:
• <HTML>
• A continuación ponemos la etiqueta de cabecera <HEAD>
• Y para luego abrir la de <TITLE> en donde situamos el
titulo de nuestra pagina, el titulo no debe de sobrepasar de
60 caracteres, cerramos la etiqueta </TITLE> y cerramos la
de cabecera </HEAD>
6. Estructura del cuerpo de nuestra pagina web
Para el cuerpo utilizamos la
etiqueta <BODY>,dentro del
cuerpo podemos colocar todos los
atributos que deseamos para
realizar nuestra pagina, como
imágenes, cambiar ala fuente, el
color, inserta archivos multimedio,
tablas, marquesina, etc.
7. Estructura básica para una pagina web en html
<HTML>
<HEAD>
<TITLE>MI PRIMERA PAGINA WEB</TITLE>
</HEAD>
<BODY>
<body bgcolor="red">
<center><p><h1>La soledad es la mejor aliada para meditar</p></h1>
<br><center><I><font color="PURPLE" size= "5 "face="arial"></I>
<marquee direction="up/left/right/donw"> Mi primera pagina web </marquee>
<br><center><font color="red" size= "5 "face="arial">
<p> Hasta que tu deseo por seguir adelante no sea mayor que los recuerdos del pasado,
no tendrás el poder para volver a crear
</BODY>
</HTML>
Para poner un color de fondo
en nuestra pagina
<body bgcolor="red">
8. Te dejamos algunas etiqueas con sus atributos
etiqueta cierre atributo explicación
<!-- -->
Añadir un comentario no
visible.
<a> </a> Establece un vínculo.
href Dirección del vínculo.
name Establece un ancla.
target
Establece el destino del
vínculo: _blank, _self, _top,
_parent, o "definido"
<b> </b> Texto en negrita.
<blockquote> </blockquote> Sangrado.
<body> </body>
Parte visible en pantalla del
documento.
alink
Modifica el color del vínculo
cuando está activado.
background
Para colocar una imagen de
fondo.
bgcolor
Para establecer un color de
fondo.
link
Modifica el color del vínculo
antes de estar activado.
vlink
Modifica el color del vínculo
cuando ya ha sido visitado.
<br> Salto de línea.
9. <caption> </caption>
Establece el título de una tabla.
Dentro de <table>.
<center> <center> Centra en horizontal.
<dd>
La definición del término. Dentro
de <dl>
<dl> </dl>
Listado de términos y sus
definiciones.
<dt> </dt>
Término para ser definido. Dentro
de <dl>
<font> </font> Fuente.
size Tamaño de la fuente.
color Color
face Tipo de letra.
<form> </form> Formulario
action ="mailto:la_dirección_de_correo"
method ="post"
enctype ="text/plain"
<frame> </frame> Marco.
name
Nombre que se le da para referirse
después a él.
src
Establece qué documento se va a
cargar inicialmente en el marco.
frameborder
Indica si habrá o no borde entre los
marcos.
noresize
Si se escribe, el navegante no
puede redimensionar los marcos.
scrolling
Establece si habrá o no barra de
scrolling.
10. <frameset> </frameset> Estructura de los marcos.
cols Número de columnas.
rows Número de filas.
<h1> </h1>
Encabezado de primer
orden.Hay otros 5:
<h2><h3><h4><h5><h6>
<head> </head> Cabecera del documento.
<hr>
Línea de separación
horizontal.
align Alineación de la línea.
noshade Sin efecto tridimensional.
size Grosor de la línea.
width Anchura de la línea.
<html> </html> Apertura y cierre del código.
<i> </i> Letra cursiva.
11. <iframe> </iframe>
Marco en línea. Carga en un
marco otra página.
name
Nombre que se le da al espacio
para posteriores referencias.
src
Establece qué documento se
carga inicialmente.
frameborder
Establece si habrá o no borde
de separación.
<img> Inserta una imagen.
alt Texto alternativo a la imagen.
border
Establece si va a tener borde o
no, cuando sirva de vínculo.
height Altura de la imagen.
width Ancho de la imagen.
src
Establece qué imagen se va a
insertar.
<li>
Componente de una lista.
Dentro de <ul> o de <ol>
<ol> </ol> Lista numerada de objetos.
<p> </p> Párrafo nuevo.
<sub> </sub> Subíndice.
<sup> </sup> Superíndice.
<table> </table> Tabla.
12. align Alinea la tabla: center, right, left
bgcolor
Establece el color de fondo de la
tabla.
border Establece un borde a la tabla
cellpadding
Separación entre el borde de la tabla
y el contenido.
cellspacing Separación entre las celdas.
width Establece el ancho de la tabla.
<td> </td> Celda de una tabla.
align
Establece la alineación del texto
dentro de la celda: left, center, right.
bgcolor
Establece el color de fondo para la
celda.
colspan
Extiende la celda sobre varias
columnas.
height Establece la altura de la celda.
rowspan Extiende la celda sobre varias filas.
valign
Establece la alineación vertical: top,
middle, bottom.
width Establece el ancho de la celda.
<th> </th>
Titular de la columna de una tabla.
Dentro de <tr>.
<title> </title>
Establece el nombre del documento.
Dentro de <head>
<tr> </tr> Fila de una tabla.
<u> </u> Subrayado.
<ul> </ul> Lista no numerada de objetos