SlideShare una empresa de Scribd logo
1 de 5
COMO CREAR UNA PAGINA
WED
CAROLINA DURAN
Encabezado de la página web
Para comenzar a crear una nueva página web HTML, debes abrir un editor de texto, como el Bloc de notas. Puedes usar sin problema el
que viene por defecto, en Windows. Una vez que hayas abierto el nuevo archivo, puedes comenzar escribiendo este código.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> DEBES ESCRIBIR EL TITULO DE TU WEB </TITLE>
<META name="description" content=">donde escribirás una breve descripción de la página">
<META name="keywords" content="Aquí escribe las palabras clave separadas por una coma">
</HEAD>
<BODY>
</BODY>
</HTML>
Explicación:
<! DOCTYPE HTML> define que el documento debe ser HTML.
<HTML> es el elemento principal de la página HTML.
<HEAD> es la parte donde se inserta información de la web.
<TITLE> es el título de la página que se muestra en la parte superior de la página navegador.
En el campo «contenido» de la metaetiqueta DESCRIPCIÓN debes ingresar una descripción que sea relevante para la página de tu sitio,
mientras que en el otro campo de la etiqueta KEYWORDS, ingresa las palabras clave en las que deseas que se encuentre en particular la
web que estás creando.
<BODY> es la parte del documento que contiene la parte «visible» del sitio:
Ahora guarda el archivo de bloque (usa GUARDAR CON NOMBRE) y guárdalo como index.html . Una vez guardado, lo abres, se abrirá la
página web HTML vacía, pero ya podrás ver el título de la página en la parte superior.
Insertar un texto
Una vez has creado el comienzo de tu página web puedes comenzar a introducir el contenido. Para ello, el código html del
texto debe colocarse entre las etiquetas <BODY> </ BODY> .
Ante se usaba la etiqueta FONT, pero como ya no es compatible, para formatear un texto de una manera particular, es
necesario recurrir a CSS.
La etiqueta que se usa para ajustar en su lugar siempre es válida y es <br>. Entonces, si escribo en el bloc de notas:
Hola <br> esta es una prueba de mi web.
Lo que se mostrará en la página será:
>Hola,
esta es una prueba de mi web
La <br> inserta un salto de línea.
Esta es una etiqueta que no debe abrirse y luego cerrarse.
Ahora veamos cómo usar etiquetas útiles para el texto: entre las más usadas puedes utilizar negrita, cursiva, subrayado,
borrado: <b>, <i>, <u> <del>
</u>te permite escribir con subrayado</u>
</i>te permite escribir en cursiva</i>
</b>te permite escribir en negrita</b>
<del>te permite cancelar un texto<del>
Estas etiquetas deben estar abiertas y cerradas . Podemos usar una a la vez o más etiquetas juntas (no se pueden usar
Color del texto
Veamos cómo colorear el texto para hacer páginas web HTML atractivas. Debes adjuntar al texto que deseas colorear la
etiqueta SPAN. Por sí solo, la etiqueta SPAN no produce ningún cambio visible en el texto, pero podemos imponer un estilo
con CSS.
Aquí está el código html, el color se puede expresar con el nombre del color en inglés o con el número hexadecimal
precedido por el número de la libra.
Ejemplo:
<span style=»color:blue»> aqui escribe el texto </span>
o
<span style=»color:#ffff45″> aqui escribe el texto </span>
Cambiar tipo de letra
Para crear un sitio en html que sea fácil de consultar, es útil cambiar la fuente y el tamaño del texto para resaltar un
párrafo o no.
Para ello vamos a usar la etiqueta SPAN que también nos permite modificar partes del texto directamente en el documento
HTML.
De este modo, usas esta etiqueta a la que tendrás que sumarle la fuente o nombre del estilo de letra que deseas para tu
texto tal que así:
<span style=»font-family:verdana»> aquí escribe tu texto </span>
o
<span style=»font-family:’Comic Sans MS'»> aquí escribe tu texto </span>
Cambiar tamaño de letra
A veces será necesario usar un texto un poco más grande o ligeramente más pequeño que el predeterminado. Aquí
también, el tamaño de fuente se indica con el estilo CSS y ya no con el atributo de fuente «tamaño».
Cómo insertar una imagen
Las imágenes en los sitios web HTML y permitidas en la web son
básicamente de tres tipos: GIF , JPG y PNG . Por lo tanto, no uses otros
tipos de imágenes (como archivos psd de Photoshop).
El código para insertar una imagen es:
<img src=»immagine.gif» alt=»descripción de la imagen» height=»42″
width=»42″ >
Reemplaza el nombre «immagine.gif» con el nombre de tu imagen:
presta atención a la extensión de la imagen: jpg, gif …

Más contenido relacionado

La actualidad más candente

Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)Santhii Sastoque
 
Tema 03 formateando texto en html
Tema 03 formateando texto en htmlTema 03 formateando texto en html
Tema 03 formateando texto en htmlSalomon Aquino
 
Clase 1 periodo II html
Clase 1 periodo II  htmlClase 1 periodo II  html
Clase 1 periodo II htmlcrisotos
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteWendy Navia Chambi
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1luchopaisa
 
Codigos de textos en html y parrafos
Codigos de textos en html y parrafosCodigos de textos en html y parrafos
Codigos de textos en html y parrafosSñrta Barahona
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina webkaren_malik
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en EspañolIleana Echandi
 
04 Marcas HTML
04 Marcas HTML04 Marcas HTML
04 Marcas HTMLpizarg0
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina WebJoshi Tüsa
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandraTatianita Is
 

La actualidad más candente (15)

Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)
 
Tema 03 formateando texto en html
Tema 03 formateando texto en htmlTema 03 formateando texto en html
Tema 03 formateando texto en html
 
Clase 1 periodo II html
Clase 1 periodo II  htmlClase 1 periodo II  html
Clase 1 periodo II html
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
 
Introducion a HTML5
Introducion a HTML5Introducion a HTML5
Introducion a HTML5
 
Codigos de textos en html y parrafos
Codigos de textos en html y parrafosCodigos de textos en html y parrafos
Codigos de textos en html y parrafos
 
Trabajo en clase
Trabajo en clase Trabajo en clase
Trabajo en clase
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina web
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en Español
 
04 Marcas HTML
04 Marcas HTML04 Marcas HTML
04 Marcas HTML
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina Web
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexa
Expo html alexaExpo html alexa
Expo html alexa
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 

Similar a Como crear una pagina web

Similar a Como crear una pagina web (20)

Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Texto del html
Texto del htmlTexto del html
Texto del html
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Como hacer una pagina en HTML
Como hacer una pagina en HTMLComo hacer una pagina en HTML
Como hacer una pagina en HTML
 
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1   h6 p aplicar estilos parrafos etiqueta pre html varEncabezados h1   h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
 
tutorial
tutorialtutorial
tutorial
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
 
Guia de html
Guia de  htmlGuia de  html
Guia de html
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 
Códigos HTML Sede magdalena ortega de Nariño
Códigos HTML Sede magdalena ortega  de NariñoCódigos HTML Sede magdalena ortega  de Nariño
Códigos HTML Sede magdalena ortega de Nariño
 
Html
HtmlHtml
Html
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
 
Etiquetas básicas en html
Etiquetas básicas en htmlEtiquetas básicas en html
Etiquetas básicas en html
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
Manual html
Manual htmlManual html
Manual html
 

Último

Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfvictorbeltuce
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteJuan Hernandez
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfDannyTola1
 
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdfBIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdfCESARMALAGA4
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPELaura Chacón
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docxAgustinaNuez21
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALEDUCCUniversidadCatl
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfsamyarrocha1
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOweislaco
 
periodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicasperiodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicas123yudy
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024IES Vicent Andres Estelles
 
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxc3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxMartín Ramírez
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptxJunkotantik
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfAlfredoRamirez953210
 

Último (20)

Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parte
 
PPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptxPPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptx
 
TL/CNL – 2.ª FASE .
TL/CNL – 2.ª FASE                       .TL/CNL – 2.ª FASE                       .
TL/CNL – 2.ª FASE .
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdf
 
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdfBIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPE
 
Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docx
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdf
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
 
periodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicasperiodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicas
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024
 
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxc3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptx
 
Sesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdfSesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdf
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
 

Como crear una pagina web

  • 1. COMO CREAR UNA PAGINA WED CAROLINA DURAN
  • 2. Encabezado de la página web Para comenzar a crear una nueva página web HTML, debes abrir un editor de texto, como el Bloc de notas. Puedes usar sin problema el que viene por defecto, en Windows. Una vez que hayas abierto el nuevo archivo, puedes comenzar escribiendo este código. <!DOCTYPE HTML> <HTML> <HEAD> <TITLE> DEBES ESCRIBIR EL TITULO DE TU WEB </TITLE> <META name="description" content=">donde escribirás una breve descripción de la página"> <META name="keywords" content="Aquí escribe las palabras clave separadas por una coma"> </HEAD> <BODY> </BODY> </HTML> Explicación: <! DOCTYPE HTML> define que el documento debe ser HTML. <HTML> es el elemento principal de la página HTML. <HEAD> es la parte donde se inserta información de la web. <TITLE> es el título de la página que se muestra en la parte superior de la página navegador. En el campo «contenido» de la metaetiqueta DESCRIPCIÓN debes ingresar una descripción que sea relevante para la página de tu sitio, mientras que en el otro campo de la etiqueta KEYWORDS, ingresa las palabras clave en las que deseas que se encuentre en particular la web que estás creando. <BODY> es la parte del documento que contiene la parte «visible» del sitio: Ahora guarda el archivo de bloque (usa GUARDAR CON NOMBRE) y guárdalo como index.html . Una vez guardado, lo abres, se abrirá la página web HTML vacía, pero ya podrás ver el título de la página en la parte superior.
  • 3. Insertar un texto Una vez has creado el comienzo de tu página web puedes comenzar a introducir el contenido. Para ello, el código html del texto debe colocarse entre las etiquetas <BODY> </ BODY> . Ante se usaba la etiqueta FONT, pero como ya no es compatible, para formatear un texto de una manera particular, es necesario recurrir a CSS. La etiqueta que se usa para ajustar en su lugar siempre es válida y es <br>. Entonces, si escribo en el bloc de notas: Hola <br> esta es una prueba de mi web. Lo que se mostrará en la página será: >Hola, esta es una prueba de mi web La <br> inserta un salto de línea. Esta es una etiqueta que no debe abrirse y luego cerrarse. Ahora veamos cómo usar etiquetas útiles para el texto: entre las más usadas puedes utilizar negrita, cursiva, subrayado, borrado: <b>, <i>, <u> <del> </u>te permite escribir con subrayado</u> </i>te permite escribir en cursiva</i> </b>te permite escribir en negrita</b> <del>te permite cancelar un texto<del> Estas etiquetas deben estar abiertas y cerradas . Podemos usar una a la vez o más etiquetas juntas (no se pueden usar
  • 4. Color del texto Veamos cómo colorear el texto para hacer páginas web HTML atractivas. Debes adjuntar al texto que deseas colorear la etiqueta SPAN. Por sí solo, la etiqueta SPAN no produce ningún cambio visible en el texto, pero podemos imponer un estilo con CSS. Aquí está el código html, el color se puede expresar con el nombre del color en inglés o con el número hexadecimal precedido por el número de la libra. Ejemplo: <span style=»color:blue»> aqui escribe el texto </span> o <span style=»color:#ffff45″> aqui escribe el texto </span> Cambiar tipo de letra Para crear un sitio en html que sea fácil de consultar, es útil cambiar la fuente y el tamaño del texto para resaltar un párrafo o no. Para ello vamos a usar la etiqueta SPAN que también nos permite modificar partes del texto directamente en el documento HTML. De este modo, usas esta etiqueta a la que tendrás que sumarle la fuente o nombre del estilo de letra que deseas para tu texto tal que así: <span style=»font-family:verdana»> aquí escribe tu texto </span> o <span style=»font-family:’Comic Sans MS'»> aquí escribe tu texto </span> Cambiar tamaño de letra A veces será necesario usar un texto un poco más grande o ligeramente más pequeño que el predeterminado. Aquí también, el tamaño de fuente se indica con el estilo CSS y ya no con el atributo de fuente «tamaño».
  • 5. Cómo insertar una imagen Las imágenes en los sitios web HTML y permitidas en la web son básicamente de tres tipos: GIF , JPG y PNG . Por lo tanto, no uses otros tipos de imágenes (como archivos psd de Photoshop). El código para insertar una imagen es: <img src=»immagine.gif» alt=»descripción de la imagen» height=»42″ width=»42″ > Reemplaza el nombre «immagine.gif» con el nombre de tu imagen: presta atención a la extensión de la imagen: jpg, gif …