SlideShare una empresa de Scribd logo
1 de 12
MI PRIMERA
PAGINA WEB EN
HTML
CON BLOC DE NOTAS
¿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.
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.
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.
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>
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.
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">
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.
<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.
<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.
<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.
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

Más contenido relacionado

La actualidad más candente

PREGUNTAS CONOCIMIENTO EN POWER POINT
PREGUNTAS CONOCIMIENTO EN POWER POINTPREGUNTAS CONOCIMIENTO EN POWER POINT
PREGUNTAS CONOCIMIENTO EN POWER POINT
Alexander Castellanos
 
Presentacion de paint
Presentacion de paintPresentacion de paint
Presentacion de paint
harold707
 
Aplicacion web presentacion
Aplicacion web   presentacionAplicacion web   presentacion
Aplicacion web presentacion
alumno17ja
 
Presentación evolucion de la web
Presentación evolucion de la webPresentación evolucion de la web
Presentación evolucion de la web
dianacarolina87
 
HERRAMIENTAS DE DESARROLLO DE MULTIMEDIA
HERRAMIENTAS DE DESARROLLO DE MULTIMEDIAHERRAMIENTAS DE DESARROLLO DE MULTIMEDIA
HERRAMIENTAS DE DESARROLLO DE MULTIMEDIA
loresanjuanelo
 
¿Cómo crear tablas en Word?.
¿Cómo crear  tablas en Word?.¿Cómo crear  tablas en Word?.
¿Cómo crear tablas en Word?.
Ticdys
 

La actualidad más candente (20)

PREGUNTAS CONOCIMIENTO EN POWER POINT
PREGUNTAS CONOCIMIENTO EN POWER POINTPREGUNTAS CONOCIMIENTO EN POWER POINT
PREGUNTAS CONOCIMIENTO EN POWER POINT
 
Dreamweaver 8
Dreamweaver 8Dreamweaver 8
Dreamweaver 8
 
Presentacion de paint
Presentacion de paintPresentacion de paint
Presentacion de paint
 
Navegadores web
Navegadores webNavegadores web
Navegadores web
 
Preguntas de power point
Preguntas de power pointPreguntas de power point
Preguntas de power point
 
¿Qué es WordPress?
¿Qué es WordPress? ¿Qué es WordPress?
¿Qué es WordPress?
 
Aplicacion web presentacion
Aplicacion web   presentacionAplicacion web   presentacion
Aplicacion web presentacion
 
Páginas web
Páginas webPáginas web
Páginas web
 
Presentación evolucion de la web
Presentación evolucion de la webPresentación evolucion de la web
Presentación evolucion de la web
 
El diseño web
El diseño webEl diseño web
El diseño web
 
DOMINIO Y HOSTING.pptx
DOMINIO Y HOSTING.pptxDOMINIO Y HOSTING.pptx
DOMINIO Y HOSTING.pptx
 
Html
HtmlHtml
Html
 
HERRAMIENTAS DE DESARROLLO DE MULTIMEDIA
HERRAMIENTAS DE DESARROLLO DE MULTIMEDIAHERRAMIENTAS DE DESARROLLO DE MULTIMEDIA
HERRAMIENTAS DE DESARROLLO DE MULTIMEDIA
 
Messenger
MessengerMessenger
Messenger
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Navegadores web
Navegadores webNavegadores web
Navegadores web
 
Google Drive
Google DriveGoogle Drive
Google Drive
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Actividad de aprendizaje
Actividad de aprendizajeActividad de aprendizaje
Actividad de aprendizaje
 
¿Cómo crear tablas en Word?.
¿Cómo crear  tablas en Word?.¿Cómo crear  tablas en Word?.
¿Cómo crear tablas en Word?.
 

Destacado

como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notas
jose_rock
 
Pasos para crear tu propia página web
Pasos para crear tu propia página webPasos para crear tu propia página web
Pasos para crear tu propia página web
kksspp
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
tomyycerr
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio web
Juan Flores
 
Cómo planificar el Sitio Web
Cómo planificar el Sitio WebCómo planificar el Sitio Web
Cómo planificar el Sitio Web
colquis
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
katherinviviana
 
Desarrollo de sitio web - Esteban Martinich
Desarrollo de sitio web - Esteban MartinichDesarrollo de sitio web - Esteban Martinich
Desarrollo de sitio web - Esteban Martinich
OpenApp Challenge
 
Idea fuerza gestión corregida
Idea fuerza gestión corregidaIdea fuerza gestión corregida
Idea fuerza gestión corregida
linaujueta
 

Destacado (20)

Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notas
 
Pasos para crear tu propia página web
Pasos para crear tu propia página webPasos para crear tu propia página web
Pasos para crear tu propia página web
 
MANUAL PARA CREAR PÁGINAS WEB CON HTML
MANUAL PARA CREAR PÁGINAS WEB CON HTMLMANUAL PARA CREAR PÁGINAS WEB CON HTML
MANUAL PARA CREAR PÁGINAS WEB CON HTML
 
Informatica presentacion
Informatica presentacionInformatica presentacion
Informatica presentacion
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio web
 
Cómo planificar el Sitio Web
Cómo planificar el Sitio WebCómo planificar el Sitio Web
Cómo planificar el Sitio Web
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
 
Desarrollo de sitio web - Esteban Martinich
Desarrollo de sitio web - Esteban MartinichDesarrollo de sitio web - Esteban Martinich
Desarrollo de sitio web - Esteban Martinich
 
Bloc de notas
Bloc de notasBloc de notas
Bloc de notas
 
PAGINA WEB 1
PAGINA WEB 1PAGINA WEB 1
PAGINA WEB 1
 
Idea fuerza gestión corregida
Idea fuerza gestión corregidaIdea fuerza gestión corregida
Idea fuerza gestión corregida
 
38569138 manual-auxiliar-para-la-implementacion-de-proyectos-ecoturisticos
38569138 manual-auxiliar-para-la-implementacion-de-proyectos-ecoturisticos38569138 manual-auxiliar-para-la-implementacion-de-proyectos-ecoturisticos
38569138 manual-auxiliar-para-la-implementacion-de-proyectos-ecoturisticos
 
Diseño de Sitios Web para Empresas de Turismo
Diseño de Sitios Web para Empresas de TurismoDiseño de Sitios Web para Empresas de Turismo
Diseño de Sitios Web para Empresas de Turismo
 
Paginaweb(turismo)
Paginaweb(turismo)Paginaweb(turismo)
Paginaweb(turismo)
 
Manual para crear página web en Word
Manual para crear página web en WordManual para crear página web en Word
Manual para crear página web en Word
 
ALERTAS DE GOOGLE
ALERTAS DE GOOGLEALERTAS DE GOOGLE
ALERTAS DE GOOGLE
 
CORREO DE LA USMP DESDE EL GMAIL
CORREO DE LA USMP DESDE EL GMAILCORREO DE LA USMP DESDE EL GMAIL
CORREO DE LA USMP DESDE EL GMAIL
 

Similar a Mi primera pagina web en html con bloc de notas

Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
Wilmer Acero
 
Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF
fabianm94
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
erjenate
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
erjenate
 

Similar a Mi primera pagina web en html con bloc de notas (20)

Codigo html
Codigo htmlCodigo html
Codigo html
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
DISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdfDISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdf
 
Html
HtmlHtml
Html
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
Html
HtmlHtml
Html
 
Etiqueta de html
Etiqueta de htmlEtiqueta de html
Etiqueta de html
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdfGUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
 
Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF
 
Taller de HTML
Taller de HTMLTaller de HTML
Taller de HTML
 
html
htmlhtml
html
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 

Último

PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
lupitavic
 

Último (20)

proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdf
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° grado
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 

Mi primera pagina web en html con bloc de notas

  • 1. MI PRIMERA PAGINA WEB EN HTML CON BLOC DE NOTAS
  • 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