Unidad 2 HTML

Capitulo 1 HTML
Contenido
 Funcionamiento de las Páginas Web  Etiquetas HTML
 Comentario
 Tipos de Páginas Web  Encabezados
 Párrafo
 Páginas Estáticas
 Salto de líneas
 Páginas Dinámicas  Imágenes
Enlaces (links)
 Conceptos Básicos de HTML 
 Enlace a otras páginas o archivos.

 Definición  Enlace a correo electrónico
 Enlace a terceros.
 Estructura de la Página Web  Etiquetas input type (Text, password, Email, date, number, hidden, range,
Checkbox, radio, submit, reset)
 Área de texto
 Lista desplegables
 Tablas
 Video
 Audio
 Formulario
Como funciona una página HTML
Otras características:
 Es un lenguaje de etiquetas
interpretado
• Conjunto de Etiquetas  Se accede a través del navegador
colocando la ruta de
almacenamiento.
 Archivos con extensión .htm
o .html
• Son procesadas
por los
navegadores
• Proyectar
vistas
Tipo de páginas HTML
 Paginas web Estáticas  Paginas web Dinámicas
Su contenido no cambia y debe ser modificado Su contenido se carga en plantillas html
a través de los archivos html. creadas, la fuente de datos principal casi
 Sitios web de empresas de Servicios siempre es una base de datos.
 Sitios web de profesionales (doctores,
 Sitios web de empresas de servicios (que
abogados, ingenieros, etc.). incluyen cotizadores y perfiles de usuarios)
 Redes sociales, sitios ecommerce, etc.
 Algunos ejemplos en Panamá
 Floristería Emanuel
 Algunos ejemplos en Panamá
 Banco General
 Sitio de la DGI
 Yoytec Computer
Conceptos Básicos de HTML
 HTML por sus siglas HyperText Markup Languaje
 Se accede a través de una navegador que lo interpreta
 Puedes ser modificado desde cualquier editor de texto (Sublime Text, Visual Code, NotePad,
Atom hasta Word).
 HTML es un estándar definido por el Consorcio World Wide Web (World Wide Web
Consortium, abreviado W3C).
 El origen de HTML se remonta a 1980 pero el primer documento formal con la descripción de
HTML se publicó en 1991, HTML 4.0 se publicó en 1998 y HTML5 a mediados de 2008.
Conceptos Básicos
de HTML
 Toda página web se divide en dos
partes principales: la cabecera y
el cuerpo (head y body).
 La cabecera es la parte «no
visible» de la página web. Esto
significa que todo lo que se
indique ahí no aparecerá en la
página como tal, pero sin embargo
es una parte importantísima
 En el body se introducen todas las
etiquetas que nos permiten dar
formato al documento.
Conceptos Básicos de HTML
 Estructura básica
 Cada página comienza con: < HTML > .
 A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
 Después, la etiqueta < BODY >, que indica el comienzo del cuerpo de la página. Las instrucciones
HTML se escribirán a continuación, y finalizarán con < /BODY >.
 La página acabará con < /HTML > .
Es decir:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Y en HTML 5…
<!DOCTYPE html>
<HTML>
<HEAD>
HEADER
Definiciones de la cabecera
</HEAD>
<BODY> NAV
<HEADER>
Instrucciones HTML del header
</HEADER>
<NAV>
Instrucciones HTML del nav
</NAV>
SECTION ASIDE
<SECTION>
Instrucciones HTML del section
</SECTION>
<FOOTER>
Instrucciones HTML del footer
</FOOTER>
</BODY> FOOTER
</HTML>
ESTRUCTURA DE LA PÁGINA HTML
 Especifica que el documento es de tipo html
<!DOCTYPE html>  Es la cabecera del archivo, donde se encuentra información conocida como
metadatos.
<HTML>
 Es donde se carga el titulo, tipo de charset que sera la codificacion de textos,
<HEAD> define atributos especiales para responsive design, referencias a archivos
Definiciones de la csss, referencias a archivos javascript, autor, palabras claves, entre otros
metadatos.
cabecera  Algunas etiquetas utilizadas aquí son: <META> <LINK> <TITLE>
</HEAD> <STYLE> <SCRIPT> <BASE>.
</HTML>
 Especifica la apertura y cierre del documento html

 Especifica el inicio del cuerpo html
<BODY>  Puede ir cualquier etiqueta html, regularmente se

<HEADER> utiliza para el encabezado del sitio. Desde Imágenes
Instrucciones HTML del header hasta breadcumbs.
</HEADER>  Lo mas común seria colocar la imagen, nombre y
<NAV> algunas caracteristicas textuales de la pagina que
estamos confeccionando.
Instrucciones HTML del nav
</NAV>
</BODY>
 Es el menu de navegación del sitio.

Ejemplo
 Se utiliza para dividir la pagina en varias secciones,
puedes utlizar cualquier etiqueta html dentro.
<SECTION>  Otras etiquetas especiales pueden ser <ARTICLE>
Instrucciones HTML del section <ASIDE> para realizar una mejor esquematización.
</SECTION>
<FOOTER>
Instrucciones HTML del footer
</FOOTER>  Pie de pagina utiliza para el contenido final de la
página.
 Lo mas común seria colocar el menu detallado y otras
paginas secundarias del sitio.
Ejemplo
ESTRUCTURA DE UNA ETIQUETA HTML
<a href=http://www.enlace.com target="_blank">Ejemplo de enlace</a>
 Variables o asignacion de los atributos
 Atributos especiales de esta etiqueta  contenido
 Apertura y cierre de la etiqueta HTML

ATRIBUTOS DE UNA ETIQUETA HTML
Atributos
Atributos básicos Atributos de eventos Atributos de foco
de internacionalización
• Son los utilizados en • se utilizan en aquellas • Estos atributos se • Son los atributos que
casi todas las etiquetas páginas que muestran sus utilizan en las páginas se usan cuando un
HTML, mayormente contenidos en web que incluyen elemento es
utilizas en conjunto a varios idiomas y las que código JavaScript par seleccionado
CSS quieran indicar de forma a realizar acciones • Ejemplo:
• Ejemplos: ID, explícita el idioma de sus dinámicas sobre los ACCESSKEY,
CLASS, STYLE, contenidos elementos de la TABINDEX.
TITLE • Ejemplos: LANG, DIR. página.
• Ejemplos: ONCLICK,
ONLOAD,
ONFOCUS,
ONSUBMIT, ETC.
Fuente conveniente: https://www.arkaitzgarro.com/xhtml/capitulo-3.html

Comentario y Salto de Lineas
 Utilizamos  para realizar comentarios por línea o bloque
 
 
 Para realizar un salto de línea podemos utilizar la etiqueta <br> o <hr> para salto de línea agregando
una línea horizontal.
Encabezados
 Las etiquetas que definen los títulos se pueden utilizar para marcar el título y/o los
diferentes apartados que forman el documento, o simplemente para resaltar cualquier texto.
Existen seis tipos de títulos, que van de la etiqueta número 1 (la más grande) a la 6 (la más
pequeña).
Fuente: https://leonorcanuelo.com/conceptos-basicos-html/
 Los párrafos se delimitan con las etiquetas <p>…</p>.
Un párrafo es un bloque de texto que se muestra separado
del resto por un salto de línea. Si dentro del párrafo
Párrafos queremos hacer un salto, pero que se siga considerando
un único párrafo (dar un intro en word) escribiríamos la
etiqueta <br>.
Los enlaces
 Los enlaces nos permiten acceder a otras páginas, sitios web, ficheros (de música, vídeos,
programas, imágenes, etc.), permiten descargar archivos de la red y acceder a otras partes o
secciones dentro de un documento. Se realizan con la etiqueta <a
href=»http://www.enlace.com»>…</a>. Aquí debo mencionar un atributo muy
importante: target=»_blank», para que el enlace se abra en una pestaña nueva del navegador.
 Otro sitio propio html: <a href=“archivo.html" >¿Cómo Funciona?</a>
 Un sitio web: <a href=“http://www.enlace.com”>Otro Enlace</a>.
 Un archivo: <a href=“ruta_del_archivo”>Descargar Archivo</a>.
HTML Input Types
 <input type="button">  <input type="password">
 <input type="checkbox">  <input type="radio">
 <input type="color">
 <input type="range">
 <input type="reset">
 <input type="date">
 <input type="search">
 <input type="datetime-local">
 <input type="submit">
 <input type="email">  <input type="tel">
 <input type="file">  <input type="text">
 <input type="hidden">  <input type="time">
 <input type="month">  <input type="url">
 <input type="number">  <input type="week">
Fuente: https://www.w3schools.com/html/html_form_input_types.asp
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads
(for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
Atributos maxlength Specifies the maximum number of character for an input field
especiales de min
pattern
Specifies the minimum value for an input field
Specifies a regular expression to check the input value against
los inputs readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

TextArea
 El elemento HTML <textarea> representa un control para edición muti-línea de texto plano.
 Cols
 La anchura visible del control de texto, en caracteres de anchura media. Si está definido debe ser
positivo. Si no, por defecto, el valor es 20 (HTML 5).
 Rows
 El número de líneas visibles en el control
 <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
Fuente: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/textarea
Listas Desplegables (Select)
 El elemento select (<select>) de HTML representa un control que muestra un menú de
opciones. Las opciones contenidas en el menú son representadas por elementos <option>, los
cuales pueden ser agrupados por elementos <optgroup>. La opcion puede estar preseleccionada
por el usuario.
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
Table <table>
<thead>
<tr>
<th>Header content 1</th>
 El Elemento de Tabla HTML <th>Header content 2</th>
</tr>
(<table>) representa datos en
</thead>
dos o mas dimensiones. <tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
</table>
Audio y Video
 El elemento audio se usa para insertar contenido de audio en un documento HTML o XHTML.
El elemento audio se agregó como parte de HTML 5.
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
 El elemento video se utiliza para incrustar vídeos en un documento HTML o XHTML.

<video src="videofile.ogg" autoplay poster="posterimage.jpg">
Tu navegador no admite el elemento <code>video</code>.
</video>
Fuente: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/audio
Fuente: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/video
Formularios (form)
 El elemento HTML form (<form>) representa una sección de un documento que contiene
controles interactivos que permiten a un usuario enviar información a un servidor web.
 Action
 La URI de un programa que procesa la información enviada por medio del formulario. Este valor
puede ser sobreescrito por un atributo formaction en un <button> o en el elemento<input>.
<form action="" method="post">

<fieldset>
<legend>Título</legend>
<input type="radio" name="radio" id="radio"> <label for="radio">Clic aquí</label>
</fieldset>
</form>

Unidad 2 HTML

Cargado por

Información del documento

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 HTML

Cargado por

Copyright:

Formatos disponibles

Capitulo 1 HTML

 Enlace a otras páginas o archivos.

 Especifica la apertura y cierre del documento html

<BODY>  Puede ir cualquier etiqueta html, regularmente se

 Es el menu de navegación del sitio.

 Variables o asignacion de los atributos

 Atributos especiales de esta etiqueta  contenido

 Apertura y cierre de la etiqueta HTML

Fuente conveniente: https://www.arkaitzgarro.com/xhtml/capitulo-3.html

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

Specifies a regular expression to check the input value against

required Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

 <textarea name="textarea" rows="10" cols="50">Write something here</textarea>

 El elemento video se utiliza para incrustar vídeos en un documento HTML o XHTML.

<form action="" method="post">

También podría gustarte