SlideShare una empresa de Scribd logo
1 de 14
CODIGOS HTML
Para blogs y paginas web
PRIMERO HABLEMOS QUE ES HTML
HTML es el lenguaje utilizado para crear páginas web y sirve para estructurar el
contenido de una página y definir cómo se mostrará en un navegador web.
En cuanto a su estructura, HTML utiliza etiquetas (tags) para marcar diferentes
elementos del contenido, como encabezados, párrafos, imágenes, enlaces, formularios
y muchos otros elementos.
CODIGOS HTML PARA PAGINAS WEB
1. <html> – El elemento raíz
Luego de especificar <!DOCTYPE html>, todos los sitios web
siguen con el elemento html. También se lo conoce como
elemento raíz porque está en la raíz del árbol de elementos
que conforman una página web.
Para crear el elemento html, debes escribir una etiqueta de apertura <html> seguida de una
etiqueta de cierre </html>. Todo lo demás en tu página web va entre estas 2 etiquetas.
2. <HEAD> – EL ENCABEZADO DEL DOCUMENTO
EL ELEMENTO HEAD CONTIENE INFORMACIÓN SOBRE LA PÁGINA WEB, A DIFERENCIA DEL
CONTENIDO DE LA WEB EN SÍ. HAY MUCHOS ELEMENTOS QUE PUEDES PONER DENTRO DEL
ELEMENTO DEL ENCABEZADO, COMO:
TÍTULO.
ENLACE, SE PUEDE USAR PARA AGREGAR HOJAS DE
ESTILO Y FAVICONOS A TU PÁGINA.
META, PARA ESPECIFICAR COSAS COMO CONJUNTOS
DE CARACTERES, DESCRIPCIONES DE PÁGINA Y
PALABRAS CLAVE PARA MOTORES DE BÚSQUEDA.
SCRIPT, PARA AGREGAR CÓDIGO JAVASCRIPT A LA
PÁGINA.
3. <TITLE> – EL TÍTULO DE LA PÁGINA
ESTA ETIQUETA CONTIENE EL TÍTULO DE LA PÁGINA. EL
TÍTULO SE MUESTRA EN LA BARRA DE TÍTULO DEL
NAVEGADOR (EN LA PARTE SUPERIOR DE LA
VENTANA DEL NAVEGADOR), ASÍ COMO EN
MARCADORES, RESULTADOS EN LAS TENDENCIAS
DE BÚSQUEDA DE GOOGLE Y MUCHOS OTROS LUGARES.
EL TÍTULO DEBE DESCRIBIR EL CONTENIDO DE LA
PÁGINA DE MANERA PRECISA. INTENTA DAR A CADA PÁGINA DE TU SITIO SU PROPIO
TÍTULO ÚNICO.
4. <BODY> – EL CONTENIDO DE LA
PÁGINA
LA ETIQUETA BODY O CONTENIDO
APARECE DESPUÉS DEL ELEMENTO
PRINCIPAL EN LA PÁGINA. DEBE
CONTENER TODA LA INFORMACIÓN
DE TU SITIO WEB: TEXTO, IMÁGENES,
ETC. TODAS LAS PÁGINAS WEB
TIENEN UN ELEMENTO DE CUERPO
ÚNICO, CON LA EXCEPCIÓN DE LAS PÁGINAS DE CONJUNTO DE MARCOS.
5. <H1> – ENCABEZADO DE SECCIÓN
LOS ENCABEZADOS TE PERMITEN DIVIDIR EL
CONTENIDO DE TU PÁGINA EN FRAGMENTOS
LEGIBLES. FUNCIONAN DE MANERA MUY
SIMILAR A LOS TÍTULOS Y SUBTÍTULOS EN UN
LIBRO O UN INFORME.
HTML ADMITE 6 ELEMENTOS DE ENCABEZADO:
H1, H2, H3, H4, H5 Y H6. DE ESTOS, H1 ES PARA
LOS ENCABEZADOS MÁS IMPORTANTES, H2 ES
PARA SUBTÍTULOS MENOS IMPORTANTES, Y
ASÍ SUCESIVAMENTE. POR LO GENERAL, NO NECESITARÁS USAR MÁS DE H1, H2 Y H3, A
MENOS QUE TU PÁGINA SEA MUY LARGA Y COMPLEJA.
6. <P> – UN PÁRRAFO
EL ELEMENTO P TE PERMITE CREAR PÁRRAFOS DE TEXTO.
LA MAYORÍA DE LOS NAVEGADORES MUESTRAN
PÁRRAFOS CON UN ESPACIO VERTICAL ENTRE CADA
UNO DE ELLOS, SEPARANDO MUY BIEN EL TEXTO.
SI BIEN PUEDES CREAR «PÁRRAFOS» DE TEXTO
SIMPLEMENTE USANDO ETIQUETAS <BR> PARA
INSERTAR LÍNEAS EN BLANCO ENTRE FRAGMENTOS
DE TEXTO, ES MEJOR USAR ELEMENTOS P EN LA
MAYORÍA DE LOS CASOS. NO SOLO ES MÁS
ORDENADO, SINO QUE BRINDA A LOS NAVEGADORES Y MOTORES DE BÚSQUEDA UNA
MEJOR IDEA DE CÓMO ESTÁ ESTRUCTURADA TU PÁGINA.
7. <A> – UN ENLACE
UNO DE LOS ELEMENTOS MÁS IMPORTANTES
DE UNA PÁGINA WEB, ES EL ELEMENTO A
PORQUE TE PERMITE CREAR ENLACES A
OTRO CONTENIDO. EL CONTENIDO PUEDE
ESTAR EN TU PROPIO SITIO O EN CUALQUIER
OTRO.
PARA CREAR UN ENLACE, USA LAS ETIQUETAS
<A> Y </A> ALREDEDOR DEL CONTENIDO
QUE DESEAS COLOCAR EN EL ENLACE E
INDICA LA URL PARA VINCULAR EN EL ATRIBUTO HREF DE LA ETIQUETA <A>.
PARA PAGINAS WEB
Los 11 códigos HTML básicos para páginas web:
LINK PARA VIDEOS SOBRE CÓDIGOS
HTML PARA BLOGS Y PAGINAS WEB
• https://youtu.be/cB3VgFjHPK4?si=_dpwcHSZUEazUIoW
• https://youtu.be/_gHg3Yd3eOk?si=NwPofAoilgVQ2pbS
• https://youtu.be/MtsMrxj3wxU?si=Sw0LDVI8SFk5gKhf
• https://youtu.be/QkHUc9m8AOU?si=sOEhNkzQM1-bqW1U
• https://youtu.be/K6ngoNuvbEA?si=lzDK8M5iK2I5-S_2

Más contenido relacionado

Similar a INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA (20)

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Html111
Html111Html111
Html111
 
Producto 4
Producto 4Producto 4
Producto 4
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Intro html5
Intro html5Intro html5
Intro html5
 
Clase 5 lenguaje html
Clase 5  lenguaje htmlClase 5  lenguaje html
Clase 5 lenguaje html
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
 
Diseño web guias 1-3
Diseño web guias 1-3Diseño web guias 1-3
Diseño web guias 1-3
 
Edp
EdpEdp
Edp
 
Manual de html
Manual de htmlManual de html
Manual de html
 

Último

Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdflauradbernals
 
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfTIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfLUZMARIAAYALALOPEZ
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdfedwinmelgarschlink2
 
Unidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucionesUnidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucioneschorantina325
 
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjPPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjNachisRamos
 
Las redes sociales en el mercado digital
Las redes sociales en el mercado digitalLas redes sociales en el mercado digital
Las redes sociales en el mercado digitalNayaniJulietaRamosRa
 
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señorkkte210207
 

Último (7)

Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
 
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfTIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
 
Unidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucionesUnidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disoluciones
 
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjPPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
 
Las redes sociales en el mercado digital
Las redes sociales en el mercado digitalLas redes sociales en el mercado digital
Las redes sociales en el mercado digital
 
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
 

INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA

  • 1. CODIGOS HTML Para blogs y paginas web
  • 2. PRIMERO HABLEMOS QUE ES HTML HTML es el lenguaje utilizado para crear páginas web y sirve para estructurar el contenido de una página y definir cómo se mostrará en un navegador web. En cuanto a su estructura, HTML utiliza etiquetas (tags) para marcar diferentes elementos del contenido, como encabezados, párrafos, imágenes, enlaces, formularios y muchos otros elementos.
  • 3. CODIGOS HTML PARA PAGINAS WEB 1. <html> – El elemento raíz Luego de especificar <!DOCTYPE html>, todos los sitios web siguen con el elemento html. También se lo conoce como elemento raíz porque está en la raíz del árbol de elementos que conforman una página web. Para crear el elemento html, debes escribir una etiqueta de apertura <html> seguida de una etiqueta de cierre </html>. Todo lo demás en tu página web va entre estas 2 etiquetas.
  • 4. 2. <HEAD> – EL ENCABEZADO DEL DOCUMENTO EL ELEMENTO HEAD CONTIENE INFORMACIÓN SOBRE LA PÁGINA WEB, A DIFERENCIA DEL CONTENIDO DE LA WEB EN SÍ. HAY MUCHOS ELEMENTOS QUE PUEDES PONER DENTRO DEL ELEMENTO DEL ENCABEZADO, COMO: TÍTULO. ENLACE, SE PUEDE USAR PARA AGREGAR HOJAS DE ESTILO Y FAVICONOS A TU PÁGINA. META, PARA ESPECIFICAR COSAS COMO CONJUNTOS DE CARACTERES, DESCRIPCIONES DE PÁGINA Y PALABRAS CLAVE PARA MOTORES DE BÚSQUEDA. SCRIPT, PARA AGREGAR CÓDIGO JAVASCRIPT A LA PÁGINA.
  • 5. 3. <TITLE> – EL TÍTULO DE LA PÁGINA ESTA ETIQUETA CONTIENE EL TÍTULO DE LA PÁGINA. EL TÍTULO SE MUESTRA EN LA BARRA DE TÍTULO DEL NAVEGADOR (EN LA PARTE SUPERIOR DE LA VENTANA DEL NAVEGADOR), ASÍ COMO EN MARCADORES, RESULTADOS EN LAS TENDENCIAS DE BÚSQUEDA DE GOOGLE Y MUCHOS OTROS LUGARES. EL TÍTULO DEBE DESCRIBIR EL CONTENIDO DE LA PÁGINA DE MANERA PRECISA. INTENTA DAR A CADA PÁGINA DE TU SITIO SU PROPIO TÍTULO ÚNICO.
  • 6. 4. <BODY> – EL CONTENIDO DE LA PÁGINA LA ETIQUETA BODY O CONTENIDO APARECE DESPUÉS DEL ELEMENTO PRINCIPAL EN LA PÁGINA. DEBE CONTENER TODA LA INFORMACIÓN DE TU SITIO WEB: TEXTO, IMÁGENES, ETC. TODAS LAS PÁGINAS WEB TIENEN UN ELEMENTO DE CUERPO ÚNICO, CON LA EXCEPCIÓN DE LAS PÁGINAS DE CONJUNTO DE MARCOS.
  • 7. 5. <H1> – ENCABEZADO DE SECCIÓN LOS ENCABEZADOS TE PERMITEN DIVIDIR EL CONTENIDO DE TU PÁGINA EN FRAGMENTOS LEGIBLES. FUNCIONAN DE MANERA MUY SIMILAR A LOS TÍTULOS Y SUBTÍTULOS EN UN LIBRO O UN INFORME. HTML ADMITE 6 ELEMENTOS DE ENCABEZADO: H1, H2, H3, H4, H5 Y H6. DE ESTOS, H1 ES PARA LOS ENCABEZADOS MÁS IMPORTANTES, H2 ES PARA SUBTÍTULOS MENOS IMPORTANTES, Y ASÍ SUCESIVAMENTE. POR LO GENERAL, NO NECESITARÁS USAR MÁS DE H1, H2 Y H3, A MENOS QUE TU PÁGINA SEA MUY LARGA Y COMPLEJA.
  • 8. 6. <P> – UN PÁRRAFO EL ELEMENTO P TE PERMITE CREAR PÁRRAFOS DE TEXTO. LA MAYORÍA DE LOS NAVEGADORES MUESTRAN PÁRRAFOS CON UN ESPACIO VERTICAL ENTRE CADA UNO DE ELLOS, SEPARANDO MUY BIEN EL TEXTO. SI BIEN PUEDES CREAR «PÁRRAFOS» DE TEXTO SIMPLEMENTE USANDO ETIQUETAS <BR> PARA INSERTAR LÍNEAS EN BLANCO ENTRE FRAGMENTOS DE TEXTO, ES MEJOR USAR ELEMENTOS P EN LA MAYORÍA DE LOS CASOS. NO SOLO ES MÁS ORDENADO, SINO QUE BRINDA A LOS NAVEGADORES Y MOTORES DE BÚSQUEDA UNA MEJOR IDEA DE CÓMO ESTÁ ESTRUCTURADA TU PÁGINA.
  • 9. 7. <A> – UN ENLACE UNO DE LOS ELEMENTOS MÁS IMPORTANTES DE UNA PÁGINA WEB, ES EL ELEMENTO A PORQUE TE PERMITE CREAR ENLACES A OTRO CONTENIDO. EL CONTENIDO PUEDE ESTAR EN TU PROPIO SITIO O EN CUALQUIER OTRO. PARA CREAR UN ENLACE, USA LAS ETIQUETAS <A> Y </A> ALREDEDOR DEL CONTENIDO QUE DESEAS COLOCAR EN EL ENLACE E INDICA LA URL PARA VINCULAR EN EL ATRIBUTO HREF DE LA ETIQUETA <A>.
  • 10. PARA PAGINAS WEB Los 11 códigos HTML básicos para páginas web:
  • 11.
  • 12.
  • 13.
  • 14. LINK PARA VIDEOS SOBRE CÓDIGOS HTML PARA BLOGS Y PAGINAS WEB • https://youtu.be/cB3VgFjHPK4?si=_dpwcHSZUEazUIoW • https://youtu.be/_gHg3Yd3eOk?si=NwPofAoilgVQ2pbS • https://youtu.be/MtsMrxj3wxU?si=Sw0LDVI8SFk5gKhf • https://youtu.be/QkHUc9m8AOU?si=sOEhNkzQM1-bqW1U • https://youtu.be/K6ngoNuvbEA?si=lzDK8M5iK2I5-S_2