Estructura del código HTML5.pptx
JuanEduardoAvilaNaje
68 views
11 slides
Jul 17, 2022
Slide 1 of 11
1
2
3
4
5
6
7
8
9
10
11
About This Presentation
Estructura básica de página web con HTML5
Slide Content
Estructura del código HTML5 Anatomía de una página web
Ejemplo de código HTML5 de una página sencilla (1)
Ejemplo de código HTML5 de una página sencilla (2)
Anatomía del código HTML5 – Las partes y su significado. DOCTYPE <! DOCTYPE html > La etiqueta de DOCTYPE declara el tipo de documento, señalando que el documento es de tipo HTML. HTML < html ></ html > Delimita el documento HTML. LANG < html lang =“es” ></ html > Indica el lenguaje de contenido del código.
HEAD <head></head> El elemento HEAD delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, titulo de la página, etc. META <meta name =“ description ” content =“Descripción de la Web” > Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el titulo y la descripción que mostrarán los buscadores, etc. META CHARSET <meta charset =“UTF-8” > Establece el tipo de codificación del documento. META TITLE <meta name =“ title ” content =“Titulo de la Web” > Contiene el titulo que se mostrará en los buscadores.
META DESCRIPTION <meta name =“ description ” content =“Descripción de la Web” > Es el texto que se muestra bajo el título en los motores de búsqueda. LINK <link href = http://dominio.com/hoja-de-estilos.css rel =“ stylesheet ” type =“ text / css ” > Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento. HREF Especifica la url donde se localiza la hoja de estilo. BODY < body ></ body > La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc.
HEADER < header ></ header > El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el titulo, logotipo, y poco más. NAV < nav ></ nav > Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web. A HREF <a href = http://dominio.com/seccion2.html > Ir a la seeción 2 </a> A representa un enlace o hipervínculo. Y href representa la dirección URL hacia la que apunta el enlace o hipervínculo.
H1,H2,H3,H4,H5,H6 <h1> Título de la Web </h1> < h2> Contenido principal </h2> < h3> Testimonios </h3> < h4> Avisos Legales </h4> Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante. SECTION < section ></ section > Esta etiqueta engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podemos poner un título o encabezado. ARTICLE < article ></ article > Esta etiqueta se suele encontrar dentro de la etiqueta SECTION y sirve para dividir y ordenar los contenidos en su interior.
DIV <div> </div> Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo. P <p></p> Entre las etiquetas P, colocaremos un párrafo de texto. IMG < img src = http://dominio.com/imagen.jpg alt =“paisaje” > Esta etiqueta coloca una imagen en el documento mediante un enlace. ALT Representa el texto alternativo, muy importante para que los buscadores puedan obtener información de la imagen.
SRC URL donde se encuentra la imagen. ASIDE < aside ></ aside > Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser banners de anuncios, citas o enlaces externos. FOOTER < footer ></ footer > Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, redes sociales, etc.
Posible resultado de nuestro código HTML5 Imagen ejemplo que muestra el navegador tras asignarle algunos estilos con CSS. Se muestran las etiquetas para una mejor orientación sobre el contenido web .
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 68
- Slides 11
- Age 1234 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
31 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views