2022 00 U01 T01 Maquetación Web (4930)

Maquetación Web
Unidad 1: HTML y CSS3

Tema 1: Estructura básica HTML
Tema 01: Estructura básica HTML
2
Índice
1.1. Tema 1: Estructura básica HTML
1.1.1. Estructura de una página HTML
1.1.1.1. Etiquetas: html, head, meta, title, body
1.1.2. Etiquetas básicas:
1.1.2.1 Encabezados <h1>, <h2>, …, <h6>
1.1.2.2 Párrafos <p>
1.1.2.3 Líneas horizontales <hr>
1.1.2.4 Saltos de línea <br>
1.1.2.5 Comentarios 
1.1.2.6 Etiqueta de Lista: Listas ordenadas , Listas desordenadas, Listas de definición
1.1.2.7 Texto enfatizado <em>
1.1.2.8 Texto reforzado <strong>
1.1.3. Etiqueta para hipervínculos <a> y atributo target
3
Índice
1.1. Tema 1: Estructura básica HTML
1.1.4. Estilos en línea: uso del atributo style
1.1.4.1 Color de fondo
1.1.4.2 Color de texto
1.1.4.3 Alineación del párrafo
1.1.4.4 Uso de fuente: tamaño, decoración, estilo
1.1.5. Etiqueta de imagen <img> y atributos src, alt, width y height
1.1.6. Etiquetas para figuras <figure> y <figcaption>
1.1.7. Uso de anclas: enlace a un lugar de la misma página (id)
4
Capacidades
• Diseña páginas web utilizando etiquetas HTML5 y CSS3 .
5
Introducción
• En este capítulo aprenderás a conocer la estructura de una página web diseñado con las etiquetas HTML 5.
• En este proceso de diseño y creación, aprenderás a utilizar las etiquetas básicas para construir una página web.
6
1.1 Estructura básica HTML
• HTML 5, es la última versión del lenguaje en el
que se escriben las páginas webs y los blogs.
• HTML 5 permite trabajar con estilos a través de
archivos CSS3 y programación con archivos
JavaScript.
7
Definición
• Es un lenguaje que solo es capaz de
leer los últimos navegadores, ya que
en los más anticuados hay algunas
etiquetas que no son capaces de
interpretar.
8
Características
• Diseñado para ser compatible con
todos los navegadores.
• Separa el contenido y la presentación
a través de las hojas de estilo CSS.
• JavaScript es reconocido como
“socio”.
• Se convierte en una plataforma de
interface de aplicaciones (APIs) donde
se integra funcionalidades como la
geolocalización.
9
Estructura de una página HTML
10
Etiquetas: html, head, meta, title, body
<!DocType html>
(Definición de tipo
de documento), <html></html>
especifica y declara Indica al programa
la versión de html. que todo lo que se
encuentra entre ellas
es código html y se lee
como tal.
11
<head></head>
Cabecera. La
información no es <title>: título de
mostrada por el documento.
navegador con la <meta>: ayuda a
mejorar el
excepción <title>.
posicionamiento de
Incluye: <meta>, los resultados en los
<base>, <link>. buscadores.
<link>: permite añadir
una hoja de estilo
externa a una pagina
web.
12
<body></body>: el
cuerpo de la página.
13
Etiquetas básicas
14
Encabezados <h1>, <h2>, …, <h6>
1. Son utilizadas para esquematizar o
trabajar con textos en multiniveles. <h1> Texto </h1> La más grande
2. Por ejemplo, el título principal tendrá <h2> Texto</h2> ……

la etiqueta <h1>; mientas que, el
subtítulo más bajo tendrá la etiqueta <h6> Texto </h6> La más pequeña
<h6>.
15
Párrafos <p>
• <p> </p> Permite la creación de
párrafos, utiliza la propiedad align.
• <hr> Dibuja una línea horizontal.
•  Inserta texto que no
será impreso.
• <br> Inserta saltos de línea, utiliza la
propiedad clear.
16
Líneas horizontales <hr>
• <hr> Dibuja una línea horizontal.
• Esta etiqueta crea una caja en bloque, la
cual no contiene elemento.
17
Saltos de línea <br>
• <br> Inserta saltos de línea dentro del
texto.
• Esta etiqueta utiliza la propiedad clear
para especificar si un elemento puede
estar al lado o si debe ser movido debajo
de ellos.
18
Comentarios 
•  Inserta texto que no
será impreso.
• Esta etiqueta es utilizada, dentro de la
página, para detallar alguna operación
de diseño o uso de las etiquetas en la
página.
19
Etiquetas de lista
• <UL> UnOrderList. Crea listas
desordenadas, es decir viñetas. Utiliza la
propiedad type.
• <OL> OrderList, Crea listas numeradas,
utiliza las propiedades: type, start,
reversed.
• <LI> Es el elemento que conforma cada
una de las listas. Se debe cerrar con </LI>
20
Texto enfatizado <em>
• <em> </em> Se emplea para enfatizar
un texto, se representa en cursiva.
21
Texto reforzado <strong>
• <strong> </strong> Se emplea para
destacar una parte del texto, se
representa en negrita.
22
Etiqueta de hipervínculo <a> y atribute target
• Un hipervínculo o enlaces (links en inglés) permite conectar: a una imagen, un párrafo de la
página, un documento.
• Se define, a partir de un texto, a través de la etiqueta <a> con su respectivo cierre </a>. Esta irá
seguida de un "href“, el cual tiene la función de hacer referencia a la web donde se tiene
pensado direccionar. La estructura del primer hipervínculo sería:<a
href=“http://www.elcomercio.pe”>Diario El Comercio
23
Etiqueta de hipervínculo <a> y atributo target
• El atributo target especifica en donde desplegar la URL enlazada, tiene los siguientes valores:
• _self: carga la URL en el mismo contexto actual. Es por defecto.
• _blank: carga la URL en un nuevo contexto, en una pestaña.
• _parent: carga la URL en el contexto de navegación padre (parent) del actual. Si no existe
el padre, se comporta del mismo modo que _self.
• _top: carga la URL en el contexto más alto de navegación. Si no hay padre (parent), este se
comporta del mismo modo que _self.
24
Estilos en línea: uso del atributo style
• Una de las formas más simples e intuitivas
de dotar de estilos al código HTML, es
usando estilos en línea que admiten la
mayoría de las etiquetas HTML.
• Son declaraciones CSS que se integran en
las etiquetas HTML mediante el atributo
style. Este método tan solo afecta al
elemento en el que se integra el código.
25
Estilos en línea: uso del atributo style
• Para aplicar un estilo en línea utiliza la sintaxis:
<Etiqueta style = “propiedadCSS: valor;” > … </Etiqueta>
• A cualquier etiqueta HTML puedes añadir la propiedad "style" y dentro de ella
agregar tantos estilos como desees, separados por punto y coma; por ejemplo:
<h1 style="color:red; font-size:2em">Título de la página</h1>
26
Color de fondo
• La propiedad background-color define el
color de fondo de un elemento; puede ser
el valor de un color o la palabra
"transparente".
• El valor de color se especifica con un valor
RGB hexa-decimal o utilizando una de las
palabras claves predefinidas de color.
27
Color de texto
• La propiedad color define el color de un
elemento.
• El valor de color se especifica con un valor
RGB hexa-decimal (rgb() y rgba()) o
utilizando una de las palabras claves
predefinidas de color.
28
Alineación del párrafo
• La propiedad text-align establece la
alineación del contenido de un elemento
de bloque.
• Su valores son: left, right, center, justify.
29
Uso de fuente: tamaño, decoración, estilo
• La propiedad font-size especifica la
dimensión de la letra. Está definido por
valores absoluto, longitud o porcentaje.
• La propiedad text-decoration establece el
formato de la letra; underline, overline,
tachado.
• La propiedad font-style permite definir el
aspecto tipográfico del elemento: normal,
italic y oblique.
30
Etiquetas de imagen <img> y atributos src, alt,
width y height
• Las imágenes de contenido son las que proporcionan
información y complementan la información textual.
• Las imágenes de contenido se incluyen directamente
en el código HTML mediante la etiqueta <img>.
• Los dos atributos requeridos son src y alt. El atributo
src representa la dirección URL de la imagen; la URL
pueden ser absoluta o relativa.
31
Etiquetas de imagen <img> y atributos
Etiquetas de imágenes - atributos
32
Etiquetas para figuras <figure> y <figcaption>
• Las etiquetas <figure> y <figcaption>
permiten definir una mejor semántica al
contenido en un documento HTML5.
• Estos elementos permiten anotar o
resaltar ilustraciones, fotos que son
referenciadas directamente desde el
contenido principal. Estas etiquetas se
pueden utilizar en imágenes y fotos que
acompañan el texto principal del
contenido.
33
Uso de anclas: enlace a un lugar de la misma página (id)
• La sintaxis que se utiliza con estos enlaces es la
misma que con los enlaces normales, salvo que
se añade el símbolo # seguido del nombre de la <a href="#ir_inicio">Ir al Inicio</a>
sección a la que se apunta.

• Los enlaces directos a secciones también
funcionan con el atributo id de cualquier
elemento.
<h1 id="inicio">Título de la página</h1>
<a href="#inicio">Volver al inicio de la

página</a>
34
Trabajando con Visual Studio Code
1. Define una carpeta llamada SitioWeb_01, en ella crea las siguientes sub carpetas, tal como se
muestra.
35
2. Para crear una página web, abre el aplicativo Visual Studio Code.
36
3. Para trabajar con la carpeta SitioWeb_01, arrastra la carpeta hacia la ventana del Visual Studio
Code.
37
4. Se visualiza la carpeta en la parte izquierda de la ventana del aplicativo.
38
5. Para crear una página web, primero crea un nuevo archivo. Para ello, desde la opción File,
selecciona la opción New File, o simplemente utilizando la combinación de teclas Ctrl+N.
39
6. Selecciona la opción Videos, aparece un archivo con una etiqueta “Untitled-1”. A continuación,
guarda el archivo para que sea de tipo html.
40
7. Para guardar el archivo, presiona la combinación de teclas Ctrl+S. En la ventana Save As, asigna el
nombre del archivo: pagina1; y selecciona el tipo de archivo: HTML.
41
8. En la página, ya creada, agrega la estructura HTML. Para ello, escribe en la primera línea html,
selecciona html:5 y presiona ENTER.
42
9. Al presionar la tecla ENTER, visualiza la estructura del html, versión 5, tal como se muestra. A partir
de aquí se puede diseñar la página web.
43
Ejercicio
• Se pide diseñar una página HTML utilizando las
estructuras básicas de HTML: uso de párrafos,
imágenes, hipervínculos y listas.
• El diseño de las páginas HTML será bajo el asesoramiento
del docente.
44
Conclusiones
• HTML 5, es la última versión del lenguaje en el que se escriben las páginas Webs y los blogs.
• HTML 5 está diseñado para ser compatible con todos los navegadores, se enlazan con las hojas de estilo CSS,
JavaScript es reconocido como “socio”, se convierte en una plataforma de interface de aplicaciones (APIs) donde
se integra funcionalidades como la geolocalización.
• La estructura básica del HTML está conformada por las etiquetas DocType, html, head, body.
• Las etiquetas heading, representan los títulos, existen desde <h1> hasta <h6> más pequeño.
• La etiqueta <p> representa el párrafo, <br> salto de línea y <hr> línea horizontal.
45
Conclusiones
• Las etiquetas listas están representadas por <ul> (lista no ordenada, viñetas) y <ol> (listas numeradas). Los elementos
de la lista están representadas por <li>.
• La etiqueta <a> con su respectivo cierre </a>. Esta irá seguida de un "href“, el cual tiene la función de hacer referencia
a la web donde se tiene pensado direccionar.
• Los estilos en línea son declaraciones CSS que se integran en las etiquetas HTML mediante el atributo style.
• Las imágenes de contenido son las que proporcionan información y complementan la información textual. Asimismo,
se incluyen directamente en el código HTML mediante la etiqueta <img>. Los dos atributos requeridos son src y alt.
• Las etiquetas <figure> y <figcaption> permiten anotar o resaltar ilustraciones, fotos que son referenciadas
directamente desde el contenido principal. Estas etiquetas se pueden utilizar en imágenes, fotos que acompañan el
texto principal del contenido.
• La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el símbolo #
seguido del nombre de la sección a la que se apunta. Los enlaces directos a secciones también funcionan con el
atributo id de cualquier elemento.
46
Referencias bibliográficas
• Acera Garcia, M.A. (2012). CSS3. Madrid: Anaya Multimedia.
Centro de Información: Código 006.7 ACER
• Álvarez Garcia, A. (2012). Manual imprescindible de HTML. Madrid : Anaya Multimedia.
Centro de Información: Código 006.74HTML ALVA/M

• Gauchat, J.D (2019). El gran libro de HTML5, CSS3 y JavaScript. 3ra Edición. Barcelona: Marcombo. Recuperado de
https://elevaciondigital.pe/wp-content/uploads/2019/06/El-gran-libro-de-HTML5-CSS3-y-JavaScript.pdf
• JL. Curso de HTML. (s.f.). Recuperado de https://www.uv.es/jbosch/PDF/Curso%20de%20HTML.pdf
• Sanchez, J. (2003). HTML Guía práctica de referencia. Recuperado de

http://www.aragonemprendedor.com/archivos/descargas/manual_rapido_html.pdf
47
GRACIAS
SEDE LIMA CENTRO SEDE INDEPENDENCIA SEDE BREÑA SEDE BELLAVISTA

Av. Uruguay 514 Av. Carlos Izaguirre 233 Av. Brasil 714 – 792 Av. Mariscal Oscar R. Benavides 3866 – 4070
Cercado – Lima Independencia – Lima (CC La Rambla – Piso 3) (CC Mall Aventura Plaza)
Teléfono: 419-2900 Teléfono: 633-5555 Breña – Lima Bellavista – Callao
Teléfono: 633-5555 Teléfono: 633-5555
SEDE TRUJILLO SEDE SAN JUAN DE LURIGANCHO SEDE AREQUIPA

Calle Borgoño 361 Av. Próceres de la Independencia 3023-3043 Av. Porongoche 500
Trujillo San Juan de Lurigancho – Lima (CC Mall Aventura Plaza)
Teléfono: (044) 60-2000 Teléfono: 633-5555 Paucarpata - Arequipa
Teléfono: (054) 60-3535
www.cibertec.edu.pe

2022 00 U01 T01 Maquetación Web (4930)

Cargado por

Copyright:

Formatos disponibles

2022 00 U01 T01 Maquetación Web (4930)

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

2022 00 U01 T01 Maquetación Web (4930)

Cargado por

Copyright:

Formatos disponibles

Maquetación Web

Unidad 1: HTML y CSS3

2. Por ejemplo, el título principal tendrá <h2> Texto</h2> ……

• _self: carga la URL en el mismo contexto actual. Es por defecto.

• _blank: carga la URL en un nuevo contexto, en una pestaña.

<a href="#inicio">Volver al inicio de la

Centro de Información: Código 006.7 ACER

• Álvarez Garcia, A. (2012). Manual imprescindible de HTML. Madrid : Anaya Multimedia.

Centro de Información: Código 006.74HTML ALVA/M

• JL. Curso de HTML. (s.f.). Recuperado de https://www.uv.es/jbosch/PDF/Curso%20de%20HTML.pdf

• Sanchez, J. (2003). HTML Guía práctica de referencia. Recuperado de

SEDE LIMA CENTRO SEDE INDEPENDENCIA SEDE BREÑA SEDE BELLAVISTA

SEDE TRUJILLO SEDE SAN JUAN DE LURIGANCHO SEDE AREQUIPA

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.