SlideShare una empresa de Scribd logo
Cómo hacer una página web básica
Alumno: Iván Alejandro Ramírez Juárez
Especialidad: Programación
Grupo: D Grado: 4°
Materia: Desarrollo de aplicaciones web
Maestro: Lic. Everardo Juárez Pedraza
Correo: Ivan-alex_@hotmail.com
Aula: 14
¿Alguna vez te has preguntado cómo se crea una página de
internet? Si lo has hecho, de seguro habrás pensado que el proceso
de creación es muy difícil y complicado, pero no lo es, la creación
de páginas web puede ser más fácil de lo que piensas. Cualquier
persona podría crear la suya, todo depende de la determinación de
la persona.
Pero bueno, dejando eso a un lado, yo te enseñare a crear una
página web básica utilizando el lenguaje HTML.
¿Sabes cómo luce un código de HTML? Si lo sabes, muy bien, ahora
que si nunca has visto como es la estructura de un código en HTML
es algo más o menos así:
Si al ver el bloc de notas no entendiste nada no te asustes, al
terminar el tutorial entenderás un poco mejor su sintaxis.
Puede que te parezca un simple documento con muchos símbolos
y letras raras sin sentido, pero todo tiene un “porque” en la
programación.
En el ejemplo de más arriba utilice CSS, pero no nos
concentraremos en el (por ahora).
El código vendría siendo algo como esto:
El contenido de la pagina es sobre un videojuego(Juegazo por
cierto), solo es un mero ejemplo, ¡Pero tú puedes hacer tu pagina
de lo que quieras!
Paso 1
Lo primero seria abrir el bloc de notas (inicio -> bloc de notas)
Paso 2
Ya en el bloc de notas es momento de empezar a escribir el código,
empecemos con la estructura.
Las palabras dentro de los símbolos “<>” son llamadas etiquetas,
son los comandos de HTML, las etiquetas de la foto son esenciales
para el funcionamiento del código, así que procura siempre
ponerlas al empezar.
Daré una breve descripción de cada uno para no hacer más largo el
tutorial.
<!DOCTYPE html> = Aquí estas declarando el tipo de documento
que estas escribiendo, en este caso, HTML.
<html> </html> = Esta etiqueta es toda la estructura del código,
dentro de ella se ponen todas las demás etiquetas.
<head></head> = En pocas palabras podría definirse como la
“cabeza” de la pagina, en ella se escribe el titulo y/o cualquier otra
cosa que tenga que declarase en el encabezado.
<title></title> = como bien dice es el titulo de la pagina, esta se
muestra en la pestaña que se encuentra en la parte superior del
navegador (va dentro de las etiquetas <head>)
<body></body> = Si las etiquetas head son la “cabeza” de la pagina,
body vendría siendo el “cuerpo” de la misma, entre estas etiquetas
va todo el contenido de la pagina.
Paso 3
Después de que hallas escrito la estructura y haberle puesto un
titulo. Es hora de agregar el contenido de la pagina (¡YAY!)
Como puedes observar, he agregado dos etiquetas nuevas dentro
de las etiquetas body.
<h1></h1> = Las etiquetas h tienen la función de cambiar el tamaño
del texto son 6 en total, donde h1 vendría siendo la letra más
grande y h6 la letra más pequeña.
<p></p> = Las p son un simple párrafo normal, ¡puedes escribir lo
que quieras!
Probar código
Haré una pequeña pausa en el tutorial, siempre que estés
escribiendo un código en HTML querrás comprobar si el código que
estas escribiendo funciona ¿no?
Puedes probarlo de una manera simple:
En el bloc de notas ves a Archivo -> guardar como:
En esta ventana das en Tipo: Todos los archivos (*.*) y puedes
nombrarlo como gustes. Ojo: Asegúrate poner la extensión “.html”
al final del nombre.
Al guardarlo te saldrá algo así, ahora solo resta ejecutarlo dándole
doble click.
¡Perfecto! El código funciono perfectamente.
Paso 4
Ahora de vuelta con el tutorial, escribe en el código tu nombre y
una pequeña descripción sobre ti utilizando las etiquetas h y p.
La pagina está bien pero… ¿y si le agregamos un poco de color?
Para esto se utilizaría el comando style = “color:” dentro de la
etiqueta de inicio. Por ejemplo:
<p style = “color: Red”>Hola</p>
Aquí le estoy indicando a la computadora que quiero que todo el
contenido del párrafo este en color rojo, en este caso, hola.
¡Pruébalo en tu código! Solo recuerda que el nombre del color debe
de estar en ingles (Red, Black, Orange, Green, Blue…etc)
¡A darle color!
Paso 5
Está bien que ahora tenga color y todo pero… le hace falta
imágenes… ¡Vamos a ponerlas!
Para insertar una imagen en la pagina se usa una mágica etiqueta
llamada <img> su sintaxis es esta:
<img src = “url de la imagen”/>
Si observas bien te darás cuenta que img No tiene una etiqueta de
cierra, en la misma línea en que se abre la etiqueta <img se cierra al
final de las comillas />
¡Prueba poniendo fotos en tu pagina!
Si no sabes cómo obtener el url de una imagen da click derecho en
la imagen deseada y dale en la opción copiar url de la imagen.
Muy bien, ahora que tenemos imágenes también en nuestra
página, hace falta una cosa más, ¡insertar links!
Paso 6
En toda página web siempre hay textos que te llevan a una página
en especifico esto se programa en html utilizando el código:
<a href = “link de la pagina”></a>
A diferencia de la etiqueta <img> esta SI tiene una etiqueta de
cierre.
Para un mejor entendimiento digamos que quieres poner el link de
tu página de facebook para que los visitantes accedan:
<a href = “link de tu pagina de facebook”>¡dale like a mí
página!</a>
Dentro de las etiquetas <a> va el texto que quieres que abarque el
link de tu pagina, este de manera predeterminada saldrá de color
azul.
¡Inténtalo!
Este pequeño tutorial es para dar una idea de cómo
funciona el HTML, solo se mostro lo más básico de este
lenguaje de una manera breve.
Espero que esto te allápodidoayudara comprender lo
básico, no es tan complicadouna vez que empiezas, sigue
practicando,¡la practica hace al maestro!

Más contenido relacionado

La actualidad más candente

¿Como Hacer una página web? Diana Lopez
¿Como Hacer una página web?  Diana Lopez¿Como Hacer una página web?  Diana Lopez
¿Como Hacer una página web? Diana Lopezgrupoaac
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
joraloca
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
lazercat
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandraTatianita Is
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
luchopaisa
 
Como Instalar Mis Templates En Blogger
Como Instalar Mis Templates En BloggerComo Instalar Mis Templates En Blogger
Como Instalar Mis Templates En BloggerXanarts
 
El mejor curso de html lección no.1
El mejor curso de html lección no.1El mejor curso de html lección no.1
El mejor curso de html lección no.1gabrielhernandezvc
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
Monsalve Sergio
 
Tutorial de cómo crear paginas web
Tutorial de cómo crear paginas webTutorial de cómo crear paginas web
Tutorial de cómo crear paginas web
Mario Villeda
 

La actualidad más candente (14)

¿Como Hacer una página web? Diana Lopez
¿Como Hacer una página web?  Diana Lopez¿Como Hacer una página web?  Diana Lopez
¿Como Hacer una página web? Diana Lopez
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Expo html alexa
Expo html alexaExpo html alexa
Expo html alexa
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
 
Estructura.html 1
Estructura.html 1Estructura.html 1
Estructura.html 1
 
Como Instalar Mis Templates En Blogger
Como Instalar Mis Templates En BloggerComo Instalar Mis Templates En Blogger
Como Instalar Mis Templates En Blogger
 
El mejor curso de html lección no.1
El mejor curso de html lección no.1El mejor curso de html lección no.1
El mejor curso de html lección no.1
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 
Tutorial de cómo crear paginas web
Tutorial de cómo crear paginas webTutorial de cómo crear paginas web
Tutorial de cómo crear paginas web
 
Pagina web con doctype
Pagina web con doctypePagina web con doctype
Pagina web con doctype
 

Destacado

Funcionalidad e-govermet
Funcionalidad e-govermetFuncionalidad e-govermet
Funcionalidad e-govermetAdela Cueva
 
Estructura básica de una pagina web
Estructura básica de una pagina webEstructura básica de una pagina web
Estructura básica de una pagina web
7homas
 
Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11LindseyMarsh
 
La Página Web
 La Página Web La Página Web
La Página Web
Ana Sarai Rivera Carrera
 
Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6Adela Cueva
 
Creacion Pagina WEB
Creacion Pagina WEBCreacion Pagina WEB
Creacion Pagina WEB
Mario Briceño
 
Estándares de creación de una página web
Estándares de creación de una página webEstándares de creación de una página web
Estándares de creación de una página webAna Sarai Rivera Carrera
 
Creacion de paginas web con html (Diana Lopez)
Creacion de paginas web con html (Diana Lopez)Creacion de paginas web con html (Diana Lopez)
Creacion de paginas web con html (Diana Lopez)grupoaac
 
Convergencia tecnologica 1
Convergencia tecnologica 1Convergencia tecnologica 1
Convergencia tecnologica 1
angie612padilla
 
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGERCREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
Ricardo Cruz
 
Acta de constitucion del Proyecto
Acta de constitucion del ProyectoActa de constitucion del Proyecto
Acta de constitucion del Proyecto
Widowmaker88
 
Creación de una página web básica
Creación de una página web básicaCreación de una página web básica
Creación de una página web básica
Jesús Barrón
 
Ejemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbokEjemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbokGs Importations
 

Destacado (13)

Funcionalidad e-govermet
Funcionalidad e-govermetFuncionalidad e-govermet
Funcionalidad e-govermet
 
Estructura básica de una pagina web
Estructura básica de una pagina webEstructura básica de una pagina web
Estructura básica de una pagina web
 
Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11
 
La Página Web
 La Página Web La Página Web
La Página Web
 
Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6
 
Creacion Pagina WEB
Creacion Pagina WEBCreacion Pagina WEB
Creacion Pagina WEB
 
Estándares de creación de una página web
Estándares de creación de una página webEstándares de creación de una página web
Estándares de creación de una página web
 
Creacion de paginas web con html (Diana Lopez)
Creacion de paginas web con html (Diana Lopez)Creacion de paginas web con html (Diana Lopez)
Creacion de paginas web con html (Diana Lopez)
 
Convergencia tecnologica 1
Convergencia tecnologica 1Convergencia tecnologica 1
Convergencia tecnologica 1
 
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGERCREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
 
Acta de constitucion del Proyecto
Acta de constitucion del ProyectoActa de constitucion del Proyecto
Acta de constitucion del Proyecto
 
Creación de una página web básica
Creación de una página web básicaCreación de una página web básica
Creación de una página web básica
 
Ejemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbokEjemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbok
 

Similar a Cómo hacer una página web básica

Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
alexander polanco
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
KarolCortes7
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en Español
Ileana Echandi
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandrafausto10
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandrafausto10
 
Html
HtmlHtml
Html
HtmlHtml
Manual html
Manual htmlManual html
Manual html
ArturoGonzalez211
 
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
samaraoviedom
 
Html sistemas 1
Html sistemas 1Html sistemas 1
Html sistemas 1Leotom
 
Html sistemas
Html sistemasHtml sistemas
Html sistemasLeotom
 
HTML
HTMLHTML
HTML
Migueljpp
 

Similar a Cómo hacer una página web básica (20)

Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Html
HtmlHtml
Html
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en Español
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Html
HtmlHtml
Html
 
Crea una pagina web
Crea una  pagina webCrea una  pagina web
Crea una pagina web
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
html
htmlhtml
html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Manual html
Manual htmlManual html
Manual html
 
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 sistemas 1
Html sistemas 1Html sistemas 1
Html sistemas 1
 
Html sistemas
Html sistemasHtml sistemas
Html sistemas
 
HTML
HTMLHTML
HTML
 
Como hacer una página web fácil
Como hacer una página web fácilComo hacer una página web fácil
Como hacer una página web fácil
 

Más de Ivan Ramirez

Operaciones aritmeticas con button
Operaciones aritmeticas con buttonOperaciones aritmeticas con button
Operaciones aritmeticas con button
Ivan Ramirez
 
Operaciones aritmeticas con spinner
Operaciones aritmeticas con spinnerOperaciones aritmeticas con spinner
Operaciones aritmeticas con spinner
Ivan Ramirez
 
Operaciones aritmeticas
Operaciones aritmeticasOperaciones aritmeticas
Operaciones aritmeticas
Ivan Ramirez
 
Calcular sueldo
Calcular sueldoCalcular sueldo
Calcular sueldo
Ivan Ramirez
 
Suma resta division
Suma resta divisionSuma resta division
Suma resta division
Ivan Ramirez
 
Desarrollo de aplicaciones móviles
Desarrollo de aplicaciones móvilesDesarrollo de aplicaciones móviles
Desarrollo de aplicaciones móviles
Ivan Ramirez
 
Carta compromiso
Carta compromisoCarta compromiso
Carta compromiso
Ivan Ramirez
 

Más de Ivan Ramirez (11)

Practica 8
Practica 8Practica 8
Practica 8
 
Practica 7
Practica 7Practica 7
Practica 7
 
Practica 6
Practica 6Practica 6
Practica 6
 
Practica5
Practica5Practica5
Practica5
 
Operaciones aritmeticas con button
Operaciones aritmeticas con buttonOperaciones aritmeticas con button
Operaciones aritmeticas con button
 
Operaciones aritmeticas con spinner
Operaciones aritmeticas con spinnerOperaciones aritmeticas con spinner
Operaciones aritmeticas con spinner
 
Operaciones aritmeticas
Operaciones aritmeticasOperaciones aritmeticas
Operaciones aritmeticas
 
Calcular sueldo
Calcular sueldoCalcular sueldo
Calcular sueldo
 
Suma resta division
Suma resta divisionSuma resta division
Suma resta division
 
Desarrollo de aplicaciones móviles
Desarrollo de aplicaciones móvilesDesarrollo de aplicaciones móviles
Desarrollo de aplicaciones móviles
 
Carta compromiso
Carta compromisoCarta compromiso
Carta compromiso
 

Último

Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
arleyo2006
 
Libro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdfLibro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdf
danitarb
 
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptxCLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
LilianaRivera778668
 
Conocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del ArrabalConocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del Arrabal
Profes de Relideleón Apellidos
 
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdfFORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
El Fortí
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
sandradianelly
 
El lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libroEl lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libro
Distea V región
 
Fase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcionalFase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcional
YasneidyGonzalez
 
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdfAsistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Demetrio Ccesa Rayme
 
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
pablomarin116
 
Proceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de PamplonaProceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de Pamplona
Edurne Navarro Bueno
 
Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...
Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...
Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...
HuallpaSamaniegoSeba
 
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdfAsistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Demetrio Ccesa Rayme
 
Testimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdfTestimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdf
Txema Gs
 
Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1
MauricioSnchez83
 
Examen Lengua y Literatura EVAU Andalucía.pdf
Examen Lengua y Literatura EVAU Andalucía.pdfExamen Lengua y Literatura EVAU Andalucía.pdf
Examen Lengua y Literatura EVAU Andalucía.pdf
20minutos
 
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdfINFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
Alejandrogarciapanta
 
El fundamento del gobierno de Dios. Lec. 09. docx
El fundamento del gobierno de Dios. Lec. 09. docxEl fundamento del gobierno de Dios. Lec. 09. docx
El fundamento del gobierno de Dios. Lec. 09. docx
Alejandrino Halire Ccahuana
 
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
AracelidelRocioOrdez
 
MIP PAPA Rancha Papa.pdf.....y caracteristicas
MIP PAPA  Rancha Papa.pdf.....y caracteristicasMIP PAPA  Rancha Papa.pdf.....y caracteristicas
MIP PAPA Rancha Papa.pdf.....y caracteristicas
jheisonraulmedinafer
 

Último (20)

Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
 
Libro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdfLibro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdf
 
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptxCLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
 
Conocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del ArrabalConocemos la ermita de Ntra. Sra. del Arrabal
Conocemos la ermita de Ntra. Sra. del Arrabal
 
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdfFORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
 
El lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libroEl lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libro
 
Fase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcionalFase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcional
 
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdfAsistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
 
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
 
Proceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de PamplonaProceso de admisiones en escuelas infantiles de Pamplona
Proceso de admisiones en escuelas infantiles de Pamplona
 
Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...
Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...
Varón de 30 años acude a consulta por presentar hipertensión arterial de reci...
 
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdfAsistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
 
Testimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdfTestimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdf
 
Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1
 
Examen Lengua y Literatura EVAU Andalucía.pdf
Examen Lengua y Literatura EVAU Andalucía.pdfExamen Lengua y Literatura EVAU Andalucía.pdf
Examen Lengua y Literatura EVAU Andalucía.pdf
 
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdfINFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
 
El fundamento del gobierno de Dios. Lec. 09. docx
El fundamento del gobierno de Dios. Lec. 09. docxEl fundamento del gobierno de Dios. Lec. 09. docx
El fundamento del gobierno de Dios. Lec. 09. docx
 
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
 
MIP PAPA Rancha Papa.pdf.....y caracteristicas
MIP PAPA  Rancha Papa.pdf.....y caracteristicasMIP PAPA  Rancha Papa.pdf.....y caracteristicas
MIP PAPA Rancha Papa.pdf.....y caracteristicas
 

Cómo hacer una página web básica

  • 1. Cómo hacer una página web básica Alumno: Iván Alejandro Ramírez Juárez Especialidad: Programación Grupo: D Grado: 4° Materia: Desarrollo de aplicaciones web Maestro: Lic. Everardo Juárez Pedraza Correo: Ivan-alex_@hotmail.com Aula: 14
  • 2. ¿Alguna vez te has preguntado cómo se crea una página de internet? Si lo has hecho, de seguro habrás pensado que el proceso de creación es muy difícil y complicado, pero no lo es, la creación de páginas web puede ser más fácil de lo que piensas. Cualquier persona podría crear la suya, todo depende de la determinación de la persona. Pero bueno, dejando eso a un lado, yo te enseñare a crear una página web básica utilizando el lenguaje HTML. ¿Sabes cómo luce un código de HTML? Si lo sabes, muy bien, ahora que si nunca has visto como es la estructura de un código en HTML es algo más o menos así:
  • 3. Si al ver el bloc de notas no entendiste nada no te asustes, al terminar el tutorial entenderás un poco mejor su sintaxis. Puede que te parezca un simple documento con muchos símbolos y letras raras sin sentido, pero todo tiene un “porque” en la programación. En el ejemplo de más arriba utilice CSS, pero no nos concentraremos en el (por ahora). El código vendría siendo algo como esto: El contenido de la pagina es sobre un videojuego(Juegazo por cierto), solo es un mero ejemplo, ¡Pero tú puedes hacer tu pagina de lo que quieras!
  • 4. Paso 1 Lo primero seria abrir el bloc de notas (inicio -> bloc de notas) Paso 2 Ya en el bloc de notas es momento de empezar a escribir el código, empecemos con la estructura.
  • 5. Las palabras dentro de los símbolos “<>” son llamadas etiquetas, son los comandos de HTML, las etiquetas de la foto son esenciales para el funcionamiento del código, así que procura siempre ponerlas al empezar. Daré una breve descripción de cada uno para no hacer más largo el tutorial. <!DOCTYPE html> = Aquí estas declarando el tipo de documento que estas escribiendo, en este caso, HTML. <html> </html> = Esta etiqueta es toda la estructura del código, dentro de ella se ponen todas las demás etiquetas. <head></head> = En pocas palabras podría definirse como la “cabeza” de la pagina, en ella se escribe el titulo y/o cualquier otra cosa que tenga que declarase en el encabezado. <title></title> = como bien dice es el titulo de la pagina, esta se muestra en la pestaña que se encuentra en la parte superior del navegador (va dentro de las etiquetas <head>) <body></body> = Si las etiquetas head son la “cabeza” de la pagina, body vendría siendo el “cuerpo” de la misma, entre estas etiquetas va todo el contenido de la pagina.
  • 6. Paso 3 Después de que hallas escrito la estructura y haberle puesto un titulo. Es hora de agregar el contenido de la pagina (¡YAY!) Como puedes observar, he agregado dos etiquetas nuevas dentro de las etiquetas body. <h1></h1> = Las etiquetas h tienen la función de cambiar el tamaño del texto son 6 en total, donde h1 vendría siendo la letra más grande y h6 la letra más pequeña. <p></p> = Las p son un simple párrafo normal, ¡puedes escribir lo que quieras!
  • 7. Probar código Haré una pequeña pausa en el tutorial, siempre que estés escribiendo un código en HTML querrás comprobar si el código que estas escribiendo funciona ¿no? Puedes probarlo de una manera simple: En el bloc de notas ves a Archivo -> guardar como: En esta ventana das en Tipo: Todos los archivos (*.*) y puedes nombrarlo como gustes. Ojo: Asegúrate poner la extensión “.html” al final del nombre.
  • 8. Al guardarlo te saldrá algo así, ahora solo resta ejecutarlo dándole doble click. ¡Perfecto! El código funciono perfectamente.
  • 9. Paso 4 Ahora de vuelta con el tutorial, escribe en el código tu nombre y una pequeña descripción sobre ti utilizando las etiquetas h y p. La pagina está bien pero… ¿y si le agregamos un poco de color? Para esto se utilizaría el comando style = “color:” dentro de la etiqueta de inicio. Por ejemplo: <p style = “color: Red”>Hola</p> Aquí le estoy indicando a la computadora que quiero que todo el contenido del párrafo este en color rojo, en este caso, hola. ¡Pruébalo en tu código! Solo recuerda que el nombre del color debe de estar en ingles (Red, Black, Orange, Green, Blue…etc) ¡A darle color!
  • 10. Paso 5 Está bien que ahora tenga color y todo pero… le hace falta imágenes… ¡Vamos a ponerlas! Para insertar una imagen en la pagina se usa una mágica etiqueta llamada <img> su sintaxis es esta: <img src = “url de la imagen”/> Si observas bien te darás cuenta que img No tiene una etiqueta de cierra, en la misma línea en que se abre la etiqueta <img se cierra al final de las comillas /> ¡Prueba poniendo fotos en tu pagina! Si no sabes cómo obtener el url de una imagen da click derecho en la imagen deseada y dale en la opción copiar url de la imagen.
  • 11. Muy bien, ahora que tenemos imágenes también en nuestra página, hace falta una cosa más, ¡insertar links! Paso 6 En toda página web siempre hay textos que te llevan a una página en especifico esto se programa en html utilizando el código: <a href = “link de la pagina”></a> A diferencia de la etiqueta <img> esta SI tiene una etiqueta de cierre. Para un mejor entendimiento digamos que quieres poner el link de tu página de facebook para que los visitantes accedan: <a href = “link de tu pagina de facebook”>¡dale like a mí página!</a>
  • 12. Dentro de las etiquetas <a> va el texto que quieres que abarque el link de tu pagina, este de manera predeterminada saldrá de color azul. ¡Inténtalo! Este pequeño tutorial es para dar una idea de cómo funciona el HTML, solo se mostro lo más básico de este lenguaje de una manera breve. Espero que esto te allápodidoayudara comprender lo básico, no es tan complicadouna vez que empiezas, sigue practicando,¡la practica hace al maestro!