Clase 2-HTML

TITULACION II –
PROGRAMACIÓN WEB
Docente: Lsi. Verónica Freires Avilés
Licenciada en Sistemas de Información
Magister en Sistemas de Información
Gerencial
HTML
Introducción HTML
HTML es el lenguaje de marcado estándar para crear páginas web.
¿Qué es HTML?
• HTML significa lenguaje de marcado de hipertexto
• HTML es el lenguaje de marcado estándar para crear páginas web.
• HTML describe la estructura de una página Web
• HTML consta de una serie de elementos
• Los elementos HTML le dicen al navegador cómo mostrar el contenido
• Los elementos HTML etiquetan piezas de contenido como "este es un
encabezado", "este es un párrafo", "este es un enlace”.
Un documento HTML simple
•La <!DOCTYPE html>declaración define que este documento es un
HTML5
•El <html>elemento es el elemento raíz de una página HTML.
•El <head>elemento contiene metainformación sobre la página HTML.
•El <title>elemento especifica un título para la página HTML (que se

muestra en la barra de título del navegador o en la pestaña de la
página)
•El <body>elemento define el cuerpo del documento y es un

contenedor de todos los contenidos visibles, como encabezados,
párrafos, imágenes, hipervínculos, tablas, listas.
•El <h1>elemento define un encabezado grande
•El <p>elemento define un párrafo.

¿Qué es un elemento HTML?
◦ Un elemento HTML se define mediante una etiqueta de inicio, algo de contenido
etiqueta de finalización:
◦ < nombre de la etiqueta > El contenido va aquí... < /nombre de la etiqueta > y una
◦ El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta final:

◦ < h1 > Mi primer encabezado < /h1 >
◦ < p > Mi primer párrafo. < /p >
Estructura de la página HTML
Elementos HTML
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de
documento: <!DOCTYPE html>.
El documento HTML en sí comienza <html>y termina con </html>.
La parte visible del documento HTML está entre <body>y </body>.
La Declaración <!DOCTYPE>
La <!DOCTYPE>declaración representa el tipo de documento y ayuda a los navegadores a
mostrar correctamente las páginas web.
Solo debe aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta
HTML).
La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas.
Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1>to .<h6>
<h1>define el encabezado más importante. <h6>define el encabezado menos importante:
Párrafos HTML
Los párrafos HTML se definen con la <p>etiqueta:
Enlaces HTML
Los enlaces HTML se definen con la <a>etiqueta:
El destino del enlace se especifica en el href atributo.
Ejemplo
<a href="https://www.w3schools.com">This is a link</a>
Imágenes HTML
Las imágenes HTML se definen con la <img>etiqueta.
El archivo de origen ( src), el texto alternativo ( alt), widthy
atributos: height se proporcionan como
Ejemplo
<img src="schools.jpg" alt="Schools.com" width="104" height="142">
Elementos HTML vacíos
Los elementos HTML sin contenido se denominan elementos vacíos.
La <br> etiqueta define un salto de línea y es un elemento vacío sin una etiqueta de cierre.
HTML no distingue entre mayúsculas y minúsculas

Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P> significa lo mismo
que <p>.
El estándar HTML no requiere etiquetas en minúsculas, pero se recomienda minúsculas en
HTML y exige minúsculas para tipos de documentos más estrictos como XHTML.
Para obtener una lista completa de todas las etiquetas HTML disponibles en
https://www.w3schools.com/tags/default.asp
Atributos HTML
Los atributos HTML proporcionan información adicional sobre los elementos HTML.
◦ Todos los elementos HTML pueden tener atributos
◦ Los atributos proporcionan información adicional sobre los elementos .
◦ Los atributos siempre se especifican en la etiqueta de inicio
◦ Los atributos generalmente vienen en pares de nombre/valor como: nombre="valor"
El atributo href
◦ El href atributo especifica la URL de la página a la que va el enlace.
El atributo src
◦ El src atributo especifica la ruta a la imagen que se va a mostrar.
Los atributos de ancho y alto

◦ Los atributos width y height, especifican el ancho y el alto de la imagen
(en píxeles).
El atributo alt
◦ El alt atributo requerido para la <img> etiqueta especifica un texto alternativo para una
imagen, si la imagen por algún motivo no se puede mostrar.
El atributo de estilo
◦ El style atributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y más.
El atributo lang
◦ Siempre debe incluir el lang atributo dentro de la <html> etiqueta, para declarar el idioma de
la página web.
Referencia de atributos HTML

◦ Una lista completa de todos los atributos para cada elemento HTML se incluye
en https://www.w3schools.com/tags/ref_attributes.asp
Atributo Estilo
El atributo HTML style se usa para agregar estilos a un elemento, como color, fuente, tamaño y
más.
• Utilizar background-color para el color de fondo
• Usar color para colores de texto
• Usar font-family para fuentes de texto
• Usar font-size para tamaños de texto
• Uso text-align para alineación de texto
<p style="text-align:center;">Centered paragraph.</p>

<h1 style="color:green; text-align:center; font-size:300%" >Complexivo </h1>
<h2 style="color:blue; text-align:right; font-size:200%;" >UAE </h2>
<p style="color:red; text-align:left; font-size:100%;" > Agraria </p>
Atributo clase
El atributo HTML class se utiliza para <head>
<style>
especificar una clase para un elemento .city {
HTML. background-color: tomato;
Múltiples elementos HTML pueden color: white;
border: 2px solid black;
compartir la misma clase. margin: 20px;
padding: 20px;
Usando el atributo de clase }
El class atributo se usa a menudo para </style>
</head>
apuntar a un nombre de clase en una hoja <body>
de estilo. También puede ser utilizado por
JavaScript para acceder y manipular <div class="city">
<h2>London</h2>
elementos con el nombre de clase <p>London is the capital of England.</p>
específico. </div>
<div class="city">
En el siguiente ejemplo tenemos tres <div> <h2>Paris</h2>
elementos con un class atributo con el <p>Paris is the capital of France.</p>
valor de "ciudad". Los tres <div> elementos </div>
tendrán el mismo estilo de acuerdo con <div class="city">

la .city definición de estilo en la sección <h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
principal. </div>
</body>
Atributo id
El atributo HTML id se usa para especificar <!DOCTYPE html>
una identificación única para un elemento <html>
HTML. <head>
No puede tener más de un elemento con la <style>
misma identificación en un documento HTML. #myHeader {
background-color: lightblue;
Usando el atributo id color: black;
El id atributo especifica una identificación única padding: 40px;
para un elemento HTML. El valor del id atributo text-align: center;
debe ser único dentro del documento HTML. }
El id atributo se utiliza para apuntar a una </style>
declaración de estilo específica en una hoja de </head>
estilo. También lo utiliza JavaScript para acceder
<body>
y manipular el elemento con la identificación
específica. <h1 id="myHeader">My Header</h1>
La sintaxis para id es: escriba un carácter hash
(#), seguido de un nombre de id. Luego, defina
</body>
las propiedades CSS entre llaves {}.
</html>
Tablas HTML <table>
<tr>
Las tablas HTML permiten a los <th>Person 1</th>
desarrolladores web organizar los datos en <th>Person 2</th>
filas y columnas.
<th>Person 3</th>
◦ Definir una tabla HTML,, una tabla en HTML </tr>
consta de celdas de tabla dentro de filas y
columnas. <tr>
◦ Celdas de tabla, Cada celda de la tabla está <td>Emil</td>
definida por una <td>y una </td> <td>Tobias</td>
◦ Filas de tabla, Cada fila de la tabla <td>Linus</td>
comienza con una <tr>y termina con </tr>
una </tr>
<tr>
◦ Encabezados de tabla, A veces se desea que
<td>16</td>
las celdas sean celdas de encabezado de
tabla. En esos casos, use la <th> y
<td>14</td>
termina con una </th> <td>10</td>
</tr>
</table>
Bordes de tablas HTML
◦ Las tablas HTML pueden tener bordes de diferentes estilos y formas
◦ Para agregar un borde, use la border propiedad CSS en los elementos table, thy td:
table, th, td {
border: 1px solid black;
}
Bordes de la tabla de estilo

◦ Si establece un color de fondo para cada celda y le da al borde un color blanco (el mismo que el
fondo del documento), obtendrá la impresión de un borde invisible:
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Tamaños de tabla HTML
◦ Las tablas HTML pueden tener diferentes tamaños para cada columna, fila o la tabla completa.
◦ Utilice el style atributo con las propiedades width o height para especificar el tamaño de una tabla,
fila o columna
<table style="width:100%">
Ancho de columna de la tabla HTML
<tr>
<th style="width:70%">Firstname</th>
◦ Altura de fila de la tabla HTML <tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
Estilos HTML - CSS
Usando CSS
CSS se puede agregar a documentos HTML de 3 maneras:
•En línea : mediante el uso del styleatributo dentro de los elementos HTML
•Interno - mediante el uso de un <style>elemento en la <head>sección
•Externo : mediante el uso de un <link> elemento para vincular a un archivo CSS externo
La forma más común de agregar CSS es mantener los estilos en archivos CSS externos. Sin
embargo, en este tutorial usaremos estilos en línea e internos, porque esto es más fácil de
demostrar y más fácil para que usted mismo lo pruebe.
CSS en línea
Se utiliza un CSS en línea para aplicar un estilo único a un único elemento HTML.
Un CSS en línea usa el style atributo de un elemento HTML.
El siguiente ejemplo establece el color del texto del <h1>elemento en azul y el color del texto
del <p>elemento en rojo
<p style="text-align:center;">Centered paragraph.</p>
CSS interno
◦ Se utiliza un CSS interno para definir un estilo para una sola página HTML.
◦ Un CSS interno se define en la <head> sección de una página HTML, dentro de un <style>.
El siguiente ejemplo establece el color del texto de TODOS los <h1> elementos (en esa página)
en azul y el color del texto de TODOS los <p> elementos en rojo. Además, la página se mostrará
con un color de fondo "powderblue.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Bloque HTML
Un elemento a nivel de bloque siempre comienza en una nueva línea y los navegadores
automáticamente agregan algo de espacio (un margen) antes y después del elemento.
Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la
izquierda y hacia la derecha tanto como puede).
Dos elementos de bloque de uso común son: <p> y <div>.
◦ El <p>elemento define un párrafo en un documento HTML.
◦ El <div>elemento define una división o una sección en un documento HTML.
El elemento <div>
El <div>elemento se utiliza a menudo como contenedor de otros elementos
HTML.
El <div> no tiene atributos requeridos, pero style, classy id son comunes.
Cuando se usa junto con CSS, el <div> se puede usar para diseñar bloques de
contenido. <div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Listas HTML
Las listas HTML permiten a los desarrolladores web agrupar un conjunto de elementos relacionados en
listas.
Lista HTML desordenada
Una lista desordenada comienza con la <ul>etiqueta. Cada elemento de la lista comienza con
la <li>etiqueta.
Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma
predeterminada:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Lista HTML ordenada
Una lista ordenada comienza con la <ol>etiqueta. <ol>
Cada elemento de la lista comienza <li>Coffee</li>
con la <li>etiqueta. <li>Tea</li>
Los elementos de la lista se marcarán con números <li>Milk</li>
de forma predeterminada: </ol>

Clase 2-HTML

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

Clase 2-HTML

Cargado por

Copyright:

Formatos disponibles

TITULACION II –

•El <html>elemento es el elemento raíz de una página HTML.

•El <head>elemento contiene metainformación sobre la página HTML.

•El <title>elemento especifica un título para la página HTML (que se

•El <body>elemento define el cuerpo del documento y es un

•El <h1>elemento define un encabezado grande

•El <p>elemento define un párrafo.

◦ El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta final:

HTML no distingue entre mayúsculas y minúsculas

Los atributos de ancho y alto

Referencia de atributos HTML

<p style="text-align:center;">Centered paragraph.</p>

tendrán el mismo estilo de acuerdo con <div class="city">

Bordes de la tabla de estilo

Ancho de columna de la tabla HTML

También podría gustarte