Unidad 2.0 - HTML

Lenguaje de Programación - 2021
Unidad 2: HTML 5
Introducción
Instalación de VSCode
Un editor de código fuente es un editor de

texto diseñado específicamente para editar el
código fuente de programas informáticos.
Puede ser una aplicación individual o estar
incluido en un entorno de desarrollo
integrado.
En el transcurso de este curso vamos a usar

Visual Studio Code. Para instalarlo pueden ir al
siguiente enlace:
https://code.visualstudio.com/y se bajan el
instalador.
0
File
Code editing. Redefined.

Free. Built on open source. Runs everywhere.
Download for Windows

Stable Build
Other platforms and Insiders Edition

Edit Selection View Go Debug Terminal Help Service Worker js-create-react upp What
Studio Code-in - O X
EXTENSIONS MARKETPLACE
5 Apals
indexus 5 service Worker.js
1. SC JS Sanvice Workeris register window.addEventListener("load callback sort:installs
39
checkValidserviceWorker(swUrl, config); Python 2016622
5 49 Linting.
Debugging (multi-threaded :
Add some additional forging to localhost, P Microsoft
Vi service warrier/PHA documentation GitLens - Git sup... Q M #5
navigator.serviceworker.ready.then(( => { Supercharge the Git capabilities buil
product Eric Amodio
productSub
O removeSiteSpecificTrackingException C/C+ - 0.240
o removeWebwide TrackingException C/C++ IntelliSense, debugging, and ... Microsoft
request MediaKeySystemaccess
csendbeacon ESLint 10
servicelorker (property) Navigator.servicekorke Integrates ESLint JavaScript Into VS _
storage Dirk Baumer
O storesiteSpecificTrackingException Debugger for Ch... 4118206M =
2 storeWebWideTrackingException Debug your JavaScript code in the
1 userAgent Microsoli
: ) 9 vendar Language Supp- 0704M 245 Java Linting, Intellisense, formatting. +
function registervalidswiswuel, config) { Red Hat
navigator.serwicoworker
register(swirl) vscode-icons 120 PEM
then (registration - ( Icons for Visual Studio Code VSCode Icons Team
TERMINAL
1: nade Vetur 0211
OIMUS Vue tooling for VS Code
You can now view create-react-app in the browser. Pine Wu
Imail
Local:
http://localhost:3000/ CH 1210
On Your Network: http://10.211.55.3:3000/ CW for Visual Studio Code powered ... Microsoft
Note that the development build is not optimized.
In 43. Cel 19 Spaces: 2 UTFB F Script @
By using Vs Code, you agree to its
license and privacy Statement.
Este potente editor de texto, tiene la posibilidad

de instalar determinados plugins que nos van a
facilitar la programación. Algunos de los que
van a instalar son:
• Auto Rename Tag

• Prettier - Code formatter
Live server
Lenguaje de Programación -
2021
Vocabulario
Web
• IP: Es el identificador numérico de una página web, es único y

representa la
dirección donde está el ordenador que contiene
esa página web.
• Dominio web / URL: Uniform Resources Locator. Es el nombre asociado
a la IP que
utilizamos para solicitar recursos, en nuestro caso un sitio web.
por ejemplo: la ip 216.58.210.163 es la de www.google.com DNS:
Domain Name System: Es un servidor cuya principal función es
traducir el nombre de dominio a su identificador único. Sitio web: Es un
conjunto de uno o varios recursos web alojados en el mismo
dominio
.
• Servidor web: Es un ordenador cuyo objetivo es servir
recursos web.
• Hosting: Es el almacenamiento del servidor web. El disco duro donde
el servidor
guarda los recursos. Petición: Es la acción de pedir
recursos a un servidor.
¿Qué es
HTML?
> Es un Lenguaje de marcado de hipertexto (Hyper Text Markup

Language) → HTML no es un lenguaje de programación, es un lenguaje
de estructura. → Es la base con la que están creadas TODAS
las páginas web del mundo. > Cada etiqueta le dice al
navegador y a los motores de búsqueda cual es la
estructura de los documentos, elementos,
organización, etc.
HTML no se encarga del aspecto visual de la página, una página que utiliza sólo
HTML es una página visualmente fea. Para que la página sea bonita
necesitas otro lenguaje que se encargue de eso, CSS.
Sintaxis de
HTML
1. Creamos un nuevo archivo y lo llamamos index.html 2. Como regla
general cuando abrimos una etiqueta, hay que cerrarla de
la
siguiente forma <div>
</div>
<etiqueta> contenido de la etiqueta </etiqueta> 3.
Para crear una
estructura base de HTML en VSCode podemos usar
el
siguiente atajo, siempre y cuando hayamos creado el archivo, con su
respectiva extensión .html:
! enter y se creara esta estructura:

 <!

DOCTYPE html>  <html lang="es">
 khead>
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

'<title>Document</title> K/head> 
<body>
</body> </html>
Secciones - Etiquetas de HTML
Elementos títulos
Los elementos de encabezado implementan seis niveles de encabezado del

documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento
de encabezado describe brevemente el tema de la sección que presenta. La
información de encabezado puede ser usada por los agentes usuarios, por
ejemplo, para construir una tabla de contenidos para un documento
automáticamente.
Lenguaje de Programación -
2021
Ejempl
os
<h1>Heading level 1</h1>

<h2>Heading level
2</h2> <h3>Heading level
6</h6>
Resultado
s
Heading level 1
Heading level 2
Heading level
3
Heading level 4
Heading level
5
Heading
level 6
Anidar Las etiquetas de cabecera pueden anidarse para generar sub-secciones en

nuestros documentos. Esto beneficia la organización de la información y
también ayuda a los usuarios de lectores de pantalla a conocer mejor la
jerarquía de los contenidos.
1. hi Harry
Potter
1. h2
Sinopsis 2.
h2 Novelas
1. h3 Harry Potter y la Piedra Filosofal 2. h3 Harry Potter y la
Cámara de los Secretos 3. h3 Harry
Potter y el Prisionero de Azkaban
4. h3 Harry Potter y el Cáliz de Fuego 5.
h3 Harry Potter y la Orden del Fenix 6.
h3 Harry Potter y el Príncipe Mestizo
Etiquetas de sección de contenido
<header> El elemento de HTML Header (<header>) representa un grupo de

ayudas introductorias o de navegación. Puede contener algunos elementos
de encabezado, así como también un logo, un formulario de búsqueda, un nombre de
autor y otros componentes.
<body>: El elemento body del documento El elemento <body> de HTML representa

el contenido de un documento HTML. Solo puede haber un elemento <body> en un
documento.
<footer> El Elemento HTML Footer (<footer>) representa un pie de página para el

contenido de sección más cercano o el elemento raíz de sección (p.e, su ancestro
mas cercano <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>,
<fieldset>, <figure>, <td>). Un pie de página típicamente contiene información acerca
del autor de la sección, datos de derechos de autor o enlaces a documentos
relacionados.
<section> El elemento HTML Section es un contenedor genérico que agrupa contenido

que está relacionado. Cuando creamos bloques cuyo contenido es parte de un bloque
total usaremos section.
<article> El elemento HTML article: Es un contenedor que representa contenido

independiente, es decir, podemos leer ese fragmento en cualquier otro sitio y tendría
sentido por sí mismo.
<aside> El elemento HTML aside: se utiliza para representar contenido

relacionado pero que no forma parte del contenido principal.
Un ejemplo de cómo no se debe programar una sección de noticias:
<body>
<header>NOTICIAS NACIONALES</header> <main>
<section>
<h2>Noticias del día</h2> <article>Noticia 1</article> <article>Noticia

2</article>
<article>Noticia 3</article> </section> </main> </body>
El ejemplo anterior se debería de programar de la siguiente

manera. <body>
<header>NOTICIAS NACIONALES</header> <main>
<section>
<h2>Noticias del día</h2> <article>
<h3>Noticia 1</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p> </article> <article>
<h3>Noticia 2</h3>
industry.</p>
</article> <article>
<h3>Noticia 3</h3>
industry. </p>
</article> </section> </main> </body>
Pero no es la única otra forma válida de escribir estas noticias es la

siguiente:
<article>
<header><h3>Noticia 1</h3></header> <p>Lorem Ipsum is simply

dummy </p>
<footer>La noticia 1 ocurrió en CBA</footer> '</article>
<article>
<section>
<header>
<h3>Noticia 1</h3> </header> <p>Lorem Ipsum is simply dummy

text </p>
<footer>La noticia 1 ocurrió en CBA</footer> </section> </article>
Elementos de bloque o en línea
Hay una diferencia entre los elementos en bloque y los de línea,

un elemento en bloque es aquel que utiliza todo el espacio
disponible, en cambio el de línea solo utiliza el espacio de su
contenido. Por ejemplo
<p> Este es un elemento de bloque </p> <span>Este es un

elemento de línea</span>
Sigue estos enlaces a Youtube
Noticias del día
Noticia 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
2544 x 18 Color
#000000 Font 16px "Times New Roman" Margin
16px 0px
text of the printing and typesetting industry.
ACCESSIBILITY Contrast
Aa 21 Name Role
paragraph Keyboard-focusable
o
span
115.51 x 17.33 Color
#000000 Font 16px "Times New Roman"
ACCESSIBILITY
Contrast
Aa 21
Name Role Keyboard-focusable
generic
O
Elemento de linea La noticia 1 ocurrió en CBA
Noticia 2
Lorem Ipsum is simply dummy text of the printing and typesetting

industry.
Noticia 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Unidad 2.0 - HTML

Cargado por

Copyright:

Formatos disponibles

Unidad 2.0 - HTML

Cargado por

Información del documento

Descripción 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

Unidad 2.0 - HTML

Cargado por

Copyright:

Formatos disponibles

Lenguaje de Programación - 2021

Un editor de código fuente es un editor de

En el transcurso de este curso vamos a usar

Code editing. Redefined.

Download for Windows

Other platforms and Insiders Edition

Este potente editor de texto, tiene la posibilidad

• Auto Rename Tag

• IP: Es el identificador numérico de una página web, es único y

> Es un Lenguaje de marcado de hipertexto (Hyper Text Markup

! enter y se creara esta estructura:

<!

datos que le pasamos al navegador con información de nuestra pagina

<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

'<title>Document</title> K/head> <!-- body representa todo el

Secciones - Etiquetas de HTML

Los elementos de encabezado implementan seis niveles de encabezado del

<h1>Heading level 1</h1>

Anidar Las etiquetas de cabecera pueden anidarse para generar sub-secciones en

Etiquetas de sección de contenido

<header> El elemento de HTML Header (<header>) representa un grupo de

<body>: El elemento body del documento El elemento <body> de HTML representa

<footer> El Elemento HTML Footer (<footer>) representa un pie de página para el

<section> El elemento HTML Section es un contenedor genérico que agrupa contenido

<article> El elemento HTML article: Es un contenedor que representa contenido

<aside> El elemento HTML aside: se utiliza para representar contenido

Un ejemplo de cómo no se debe programar una sección de noticias:

<h2>Noticias del día</h2> <article>Noticia 1</article> <article>Noticia

El ejemplo anterior se debería de programar de la siguiente

Pero no es la única otra forma válida de escribir estas noticias es la

<header><h3>Noticia 1</h3></header> <p>Lorem Ipsum is simply

<h3>Noticia 1</h3> </header> <p>Lorem Ipsum is simply dummy

Elementos de bloque o en línea

Hay una diferencia entre los elementos en bloque y los de línea,

<p> Este es un elemento de bloque </p> <span>Este es un

Sigue estos enlaces a Youtube

Noticias del día

Lorem Ipsum is simply dummy text of the printing and typesetting

También podría gustarte