Karol Cortez Normas Apa

ESTRUCTURAS DE UNA PAGINA HTML
KAROL NICOLL PLAZAS CORTES
ONCE D
2019
LIC. JOGNY NIEVES

1. TABLA DE CONTENIDO…
2. INTRODUCCION…
3. ESTRUCTURAS BASICAS DE UNA PAGINA WEB….
4. META TAGS BASICOS…
5. ETIQUETA BODY…
6. FORMATEO DE TEXTO…
7. PARRAFOS Y SALTOS DE LINEA…
8. COMENTARIOS EN HTML…
9. SEPARADORES…
10. ENCABEZADOS…
11. CARACTERES ESPECIALES…
12. TABLAS HTLM…
13. LISTAS HTML…
14. IMÁGENES HTML…
15. ENLACES HTML…
2. INTRODUCCION
HTML (HyperText Markup Language) es el primer lenguaje que una

persona debe conocer si desea comenzar a realizar páginas web.
HTML no es un lenguaje de programación, sino un lenguaje
descriptivo, una serie de etiquetas que el navegador interpretará de
una u otra forma para mostrar distintos contenidos por pantalla. Por
ejemplo, si creamos un documento de texto que se llame
ejemplo.html y que contenga el siguiente texto:
<html>
<head></head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
3. ESTRUCTURAS BASICAS DE UNA PAGINA
WEB
Una estructura HTML se empieza con la etiqueta

<html> y acaba con </html>. Todo lo que esté en
medio será la página web. Dentro de <html></html>
se encuentran 2 partes diferenciadas.La primera
<head></head> es la cabecera de la página. Aquí irán
cierta información que no es directamente el
contenido de la página. Aquí se pone el título de la
página, los metadatos, estilos, código javascript (todo
esto se estudiará en capítulos venideros). La primera
que se suele estudiar es <title></title>, que indica el
título de la página (lo que el navegador pone en la
parte superior izquierda).
La segunda parte es <body></body>. Aquí va

propiamente el contenido de la página: fotos,
párrafos, formularios, etc. Por ejemplo, siguiendo con
el ejemplo de la página anterior, el siguiente código,
podemos cambiar el título de la página.
Para verlo, puedes ver el código fuente de esta misma

página. Para eso, haz clic en el botón derecho => ver
código fuente, y verás así el código HTML de la
página:
Observad el título en la parte superior izquierda de la
página. Además, dentro de <body></body>
distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de
línea normal (púlsando la tecla Enter) no produce un
salto de línea en el resultado. Es necesario escribir
<br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita<i></b>
=> Itálica.
También observamos el código &iaacute; => Esto
indica que queremos poner una “i” con acento, es
decir, “í”. Esto se explicará en un capítulo posterior
4. META TAGS BASICOS
No podemos hablar de la estructura básica de un

página web sin hablaros de los meta tags. Los meta
tags se insertan en la cabecera de la página, entre las
etiquetas <head></head>. La función de estos tags
varía.
Pueden ser informativos, para los buscadores y

usuarios, indicándoles el tipo de contenido de la web,
sus palabras claves, etc. o pueden predefinir una
actuación a la página.
La meta tags no se pueden ver a no ser que sea a

través del código fuente. Es decir, un meta tag no
hace variar la apariencia de una página web, pero son
imprescindibles e importantísimos para los
buscadores webs.
El esquema de un meta tag es el siguiente: <meta

name=” ” content=” “/>. El “name” muestra el
nombre de la etiqueta y el “content” el contenido de
esa etiqueta. Los meta tags pueden cerrarse de dos
formas: > o /> . La segunda es más correcta, aunque
los navegadores no muestran diferencia con una u
otra.
Estas etiquetas juegan un papel importante en el

posicionamiento web, especialmente la etiqueta meta
descripción. Si te interesa el posicionamiento SEO,
puedes ampliar la información en este curso gratuito
de SEO.
5. ETIQUETA BODY
Anteriormente les hemos explicado que todo lo que

queramos que se vea en nuestra página web
deberemos escribirlo dentro de la etiqueta body. Eso
es lo que llamamos el “cuerpo” del documento. Es la
parte visible. Pero debes saber que ese cuerpo, o sea,
que la etiqueta body también podemos personalizarla
para darle el aspecto que nosotros deseemos.
Esta personalización la conseguiremos a través de

una serie de parámetros que a continuación te
presentaremos. Bien, pues vamos a empezar.
Color de fondo: bgcolor

El primer parámetro que debes conocer es el del color
de fondo, el “bgcolor”. A través de este parámetro
podremos definir el color de fondo que queramos que
tenga nuestra página. Un ejemplo muy simple es el
siguiente: Si queremos que nuestra página quede con
un fondo rojo deberemos escribir:
<body bgcolor=”#FF0000″></body>
Imagen de fondo: background html

Puede que no quieres que tu página tenga un color
sólo de fondo, sino que quieras que tu página tenga
una imagen. En ese caso deberás indicarlo con la
etiqueta “background”. La etiqueta quedaría de la
siguiente manera:
<body background=”URL”> </body>
Dónde leemos “URL” deberemos escribir la

dirección de la imagen que queramos que sea nuestro
fondo. Una cosa muy importante que debes saber es
que si la imagen no es suficientemente grande para
rellenar toda la página, la imagen se repetirá tanto a
lo ancho como a lo largo hasta rellenar todo el
espacio.
Color de texto: text

Una vez tenemos el fondo definido, tendremos que
predefinir ahora el color del texto de nuestra web. Es
decir, tendremos que decirle al navegador de qué
color queremos que sea nuestro texto. Esto lo
definiremos con el parámetro “text”.
6. FORMATEO DE TEXTO
El formateo del texto, o sea, el formato del texto, son

una serie de etiquetas que escribimos en html
rodeando la palabra o el texto y que transforman ese
texto en el formato que nosotros le hemos querido
dar.
Anteriormente ya hemos visto en un pequeño texto

introductorio como se ponía la negrita y la itálica.
Pero eso era solamente introductorio. A continuación
lo vamos a explicar de una forma más detallada.
Las etiquetas deben rodear al texto. Es decir, la

etiqueta debe abrirse y cerrarse, conteniendo el texto
o la palabra que queramos transformar, entre medias.
En el ejemplo de la negrita se abriría <b> y se
cerraría </b>.
Se pueden combinar diferentes formatos, o sea,

diferentes etiquetas. Por ejemplo, si queremos que un
texto esté en negrita y en cursiva escribiríamos esto:
<b><i>Este texto está escrito en negrita y en

cursiva</i></b>.Cuando combines, ten cuidado a la
hora de cerrar las etiquetas. Debes cerrar las etiquetas
por orden, de la más interior a la más exterior. Por
último, recordad que podéis escribir las etiqutes en
minúsculas o en mayúsculas.
Vamos con los diferentes formateos html que
podemos encontrar:
Negrita HTML
Existen dos etiquetas que harán que nuestro texto se
convierta en negrita. La utilización de cualquiera de
ellas es indiferente. Puedes usar la que prefieras.
La primera es la etiqueta <b> y la otra es la etiqueta

<strong>. Aquí va un ejemplo:
Esta palabra la vamos a poner en <b>negrita</b> y

esta otra <strong>también</strong>
7. PARRAFOS Y SALTOS DE LINEA
En este tema vamos a tratar y a explicaros los párrafos

y los saltos de línea en html. Porque debemos saber
que el html los saltos de línea, es decir, los espacios
que hagamos en el código no son interpretados te tal
forma.
En html para dejar un salto de línea debemos utilizar

una serie de etiquetas, de código, que el navegador
interpretará cómo tal. Esas etiquetas son <br/> </p>
o </pre>. A continuación te explicaremos cada una de
ellas.
8. COMENTARIOS EN HTML
Los comentarios html son textos que van dentro del

código fuente pero que no son mostrados por los
navegadores. Estos comentarios son muy útiles para
los editores de la página, ya que ayudan a una mayor
comprensión del código.
La forma correcta de escribir un comentario html es

la siguiente:

Podemos apreciar que para los comentarios no se
usan las etiquetas vistas en casi todo el html, aunque
la estructura es prácticamente la misma. Hay una
apertura y un cierre, y todo lo que va dentro de estos
dos elementos es el comentario.
El código de apertura es el siguiente: <!– y el cierre

del comentario se escribe así: –>. Mira el código del
siguiente ejemplo:
A continuación vamos a escribir un comentario, pero

aquí no lo podremos ver porque...<br>
9. SEPARADORES
Separadores en html: la etiqueta <hr>

Para separar un texto de otro o un párrafo de otro
podemos utilizar una línea horizontal de un tamaño o
un grosor determinado por nosotros. Esa franja la
escribimos con la etiqueta <hr>. La contrario que
muchas etiquetas html, ésta no necesita ser cerrada.
Sólo con escribir la etiqueta anterior ya la escribimos.
La etiqueta <hr>, como muchas otras etiquetas, puede

variar de aspecto dependiendo de las reglas CSS que
definamos.
Definir su grosor
A continuación te vamos a ofrecer dos ejemplos de
franjas con diferentes grosores, siendo la primera
15px y la segunda 2px. La diferencia es abismal.
10. ENCABEZADOS
Puede que queramos empezar nuestra web o nuestro

texto con un encabezado indicando el título del
artículo, categoría, etc. Pues bien, para escribir
encabezados tenemos que utilizar las etiquetas <h>.
Esta etiqueta viene acompañada de un número, desde

el 1 hasta el 6, predefiniendo éstos el tamaño del
encabezado. Así, <h1> sería el encabezado más
grande mientras que <h6> sería el más pequeño.
A continuación vamos a mostraros el código de los

seis diferentes encabezados:
<h1>Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>

11. CARACTERES ESPECIALES
Las páginas Web están abiertas a todo el mundo y a

todos los lenguajes. Pero no todos los lenguajes son
iguales. En español, por ejemplo, tenemos algunas
letras que son propias de nuestra lengua y que otras
no poseen. Por ello, una “ñ” en un navegador de un
ordenador de fuera de España puede que no se vea.
Para evitar ese problema podemos usar los caracteres

especiales de html. No todos los ordenadores leen las
mismas letras, pero sí todos leen el mismo código. Un
“ñ” escrita como tal no se verá en muchos
ordenadores del mundo pero, si por el contrario,
escribimos ñ (carácter html para la “ñ”),
seguro que se muestra correctamente.
En el siguiente artículo veremos los caracteres

especiales html.
12. TABLAS HTML
Estás aquí: Inicio / Curso de HTML / Tablas HTML

Una tabla en html viene marcada por las etiquetas
<table> </table>. Entre esas dos etiquetas
definiremos la tabla, las celdas que queremos, las
columnas y las características de cada uno de estos
parámetros. Pero vamos a empezar explicándote la
etiqueta <table>.
Como ya ocurre con la etiqueta body, a una tabla
también lo podemos definir el fondo de la misma.
Esto lo podemos conseguir con el parámetro
“bgcolor”, que nos pondrá un color de fondo, o
“background” para poner una imagen de fondo.
Recuerda que si la imagen es más pequeña que la
tabla, ésta se repetirá tanto a lo ancho como a lo largo.
Otro aspecto que podemos definir de la tabla es el
borde. Esto lo haremos con el parámetro “border”.
Como en todas los parámetros que ya hemos visto
escribiremos: border= “x” siendo la x un número. Ese
número indicará el grosor del borde. Si no ponemos
borde o lo escribimos “0”, la tabla no mostrará borde
ninguno. Por supuesto, también podemos darle color
al borde, escribiendo la etiqueta “bordercolor” e
indicando el color que queramos para nuestro borde
13. LISTAS HTML
Las listas no ordenadas van dentro de la etiqueta <ul>

HTML y de su cierre </ul>. Cada punto que
queramos añadir a la lista, lo haremos dentro de la
etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li> HTML, ésta
se generará de forma automática. Pero si queremos
definir nosotros mismo el símbolo del punto,
podemos gracias al atributo “type”.
Así podemos hacer que la lista esté definida por
puntos negros (li type=”disc”), por puntos con el
fondo blanco (li type=”circle”) o por cuadrados (li
type=”square”). Aunque esta apariencia dependerá
del navegador. Hay algunos navegadores que dan
otras apariencias a estos mismos atributos.
Las listas ordenadas van enmarcadas dentro de las

etiquetas <ol> </ol>. Cada punto de la lista se escribe
con la misma etiqueta que en las no numeradas: <li>.
Pero al ser listas ordenadas los símbolos serán
números y éstos se irán generando automáticamente
por orden, conforme escribamos nuevos puntos
14. IMÁGENES HTML
Poner imágenes en nuestra web produce unos
resultados asombrosos de una manera muy fácil.
Vamos a mostrarte como puedes incluir una imagen
y los atributos que puedes darle a la misma.
El tag básico para colocar una imagen es “img“. Este
tag, a diferencia de la gran mayoría de los tags de
html, no necesita un cierre. Va acompañado de
diferentes atributos que te vamos a explicar a
continuación.
El atributo “src” es imprescindible para poder
colocar una imagen. Este atributo es el que indica
dónde se encuentra alojada la imagen que queremos
mostrar. Se escribe así: <img src=”x”>, siendo “x” la
dirección o la url dónde se encuentra situada la foto.
La foto podemos alinearla en la página como
queramos mediante “align“, utilizando los atributos
“left” para alinearla a la izquierda, “right” para
alinearla a la derecha, “top” para alinearla arriba,
“bottom” para alinearla abajo y “middle” para
alinearla al centro.
15. ENLACES HTML
Los enlaces en HTML nos permiten de una manera
muy cómoda redirigir al usuario a otra parte, cuando
éste pinche en dicho enlace. Podemos hacer que el
usuario se vaya a otra url distinta a la que está, o
podemos hacer que vaya a otra parte pero dentro del
mismo archivo en el que está, dentro de la misma url.
sta explicación la entenderás más fácilmente cuando
te presentemos los tipos de enlaces que hay y veas sus
características. Así pues, vamos a ello:
La etiqueta <a>
Es dentro de esta etiqueta y de su cierre (</a>) dónde
encontraremos el enlace. Todo lo que esté dentro de
ella, ya sea texto o una imagen, estará considerado
como un enlace y el navegador lo interpretará así.
Atributo href
Para que un enlace esté activo debemos indicar dentro
de él el destino del mismo. Para establecer este
destino le colocamos a la etiqueta <a> este atributo.
La etiqueta completa nos quedaría así:
<a href=“enlace”>Pincha aquí para ir al destino del
enlace</a>
Haz una web. (s.f.). Obtenido de Haz una web : https://www.hazunaweb.com/curso-de-html/estructura-

basica-una-pagina-web/

Karol Cortez Normas Apa

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Karol Cortez Normas Apa

Caricato da

Copyright:

Formati disponibili

ESTRUCTURAS DE UNA PAGINA HTML

KAROL NICOLL PLAZAS CORTES

LIC. JOGNY NIEVES

HTML (HyperText Markup Language) es el primer lenguaje que una

<i>Y esto it&aacute;lica.</i><br>

Una estructura HTML se empieza con la etiqueta

La segunda parte es <body></body>. Aquí va

Para verlo, puedes ver el código fuente de esta misma

No podemos hablar de la estructura básica de un

Pueden ser informativos, para los buscadores y

La meta tags no se pueden ver a no ser que sea a

El esquema de un meta tag es el siguiente: <meta

Estas etiquetas juegan un papel importante en el

Anteriormente les hemos explicado que todo lo que

Esta personalización la conseguiremos a través de

Color de fondo: bgcolor

Imagen de fondo: background html

Dónde leemos “URL” deberemos escribir la

Color de texto: text

El formateo del texto, o sea, el formato del texto, son

Anteriormente ya hemos visto en un pequeño texto

Las etiquetas deben rodear al texto. Es decir, la

Se pueden combinar diferentes formatos, o sea,

<b><i>Este texto está escrito en negrita y en

La primera es la etiqueta <b> y la otra es la etiqueta

Esta palabra la vamos a poner en <b>negrita</b> y

En este tema vamos a tratar y a explicaros los párrafos

En html para dejar un salto de línea debemos utilizar

Los comentarios html son textos que van dentro del

La forma correcta de escribir un comentario html es

El código de apertura es el siguiente: <!– y el cierre

A continuación vamos a escribir un comentario, pero

Separadores en html: la etiqueta <hr>

La etiqueta <hr>, como muchas otras etiquetas, puede

Puede que queramos empezar nuestra web o nuestro

Esta etiqueta viene acompañada de un número, desde

A continuación vamos a mostraros el código de los

<h1>Texto muy grande</h1>

<h3>Texto algo más grande de lo normal</h3>

<h6>Texto muy pequeño</h6>

Las páginas Web están abiertas a todo el mundo y a

Para evitar ese problema podemos usar los caracteres

En el siguiente artículo veremos los caracteres

Estás aquí: Inicio / Curso de HTML / Tablas HTML

Las listas no ordenadas van dentro de la etiqueta <ul>

Las listas ordenadas van enmarcadas dentro de las

Haz una web. (s.f.). Obtenido de Haz una web : https://www.hazunaweb.com/curso-de-html/estructura-

Potrebbero piacerti anche

<i>Y esto itálica.</i><br>