Guía HTML

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HHHHHHHHHHHHHHHH
HHHHHHHHHHHHHHHH
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH EN ESTE DOCUMENTO SE REPASAN LAS
DIFERENTES ETIQUETAS Y SUS USOS EN DIFERENTES SECCIONES
HHHHHHHHHHHHHHHH
HHHHHHHHHHHHHHHH
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
OOOOOOOOOOOOOOOO
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
ESTRUCTURA B�SICA
OOOOOOOOOOOOOOOO
--<html></html> = Esta etiqueta es con la que se inicia cualquier programa de

HTML, sin ella el programa no funciona
--<!DOCTYPE html> = Esta debe estar por encima de la etiqueta <html></html>,

tambien es necesaria
--<head></head> = En esta etiqueta se programa todo lo invisible, con lo que no

podemos interactuar
--<body></body> = En esta etiqueta se programa todo lo que vemos, todo con lo que
se puede interactuar (textos, titulos, parrafos, etc...)
--<title></title> = Con esta etiqueta se coloca el titulo de la pagina, se coloca

en el bloque "<head>" y coloca titulo en la pesta�a de la pagina
OOOOOOOOOOOOOOOO
ETIQUETAS B�SICAS
OOOOOOOOOOOOOOOO
--<h1></h1> = En esta etiqueta se colocan titulos en el bloque "<body>", tiene
variantes, desde <h1> hasta <h7>, las cuales tienen diferentes tama�os y usos
--<p></p> = Aqui se colocan parrafos
--<b></b> = Con esta etiqueta la letra que la contiene se pone en "negrita"
--<i></i> = Con esta etiqueta la letra que la contiene se pone en "italica"
--<strike></strike> = Con esta etiqueta la letra que la contiene se pone en

"tachada"
--<small></small> = Con esta etiqueta la letra que la contiene se pone "peque�a"
--<br></br> = Con esta etiqueta se rellena un renglon con espacio blanco
--<center></center> = Con esta etiqueta se centra imagenes o textos
OOOOOOOOOOOOOOOO
ENLACES
OOOOOOOOOOOOOOOO
--<a href="">Click Aqui</a> = Con esta etiqueta se puede redirigir al usuario a

diferentes paginas a traves de links que se colocan luego del atributo de la
etiqueta, y
entre el principio y fin de la etiqueta se coloca las palabras a clickear para
entrar al link
OOOOOOOOOOOOOOOO
LISTAS
OOOOOOOOOOOOOOOO
--<ul></ul> = Genera una lista desordenada, generalmente usada en el "header" de

la pagina
--<ol></ol> = Genera una lista ordenada
--<li></li> = Genera los puntos de las listas
OOOOOOOOOOOOOOOO
MULTIMEDIA
OOOOOOOOOOOOOOOO
--<img src="" alt="" title="" height="200px" width="200px"> = Con esta etiqueta

se coloca una imagen (ya sea local o exterior), en el atributo "src" se coloca la
direccion de la
imagen, en el atributo "alt" se le coloca nombre (muy importante), en el atributo
"title" se le coloca nombre cuando el cursor esta sobre la imagen, en el atributo
"height" se
coloca el alto, y en el atributo "width" se coloca el ancho
--<video src="" controls></video> = Esta etiqueta es similar a <img src="">, solo

que esta etiqueta si tiene final, y tiene el atributo "controls", el cual
agrega controles al video
--<audio src="" controls></audio> = Esta etiqueta es similar que <video

src=""></video>, solo que en vez de un video, muestra un audio
--<link rel="icon" href=""></link> = Con esta etiqueta se le coloca icono a la

pagina en la parte de la pesta�a, se coloca en el head de la programacion, es
importante que la
imagen que se coloca en la ruta este en formato ".ico"
OOOOOOOOOOOOOOOO
DIVISORES
OOOOOOOOOOOOOOOO
--<div></div> = es similar que la etiqueta <p></p>, pero sirve para dividir

bloques, por ejemplo, para posibilitar poner muchos <h4></h4> de forma ordenada,
colocandose
en diferentes etiquetas <div></div>
OOOOOOOOOOOOOOOO
FORMULARIOS
OOOOOOOOOOOOOOOO
--<form method="post"></form> = Esta es una etiqueta para completar formularios,

dentro de ella se colocan las etiquetas <input>, tiene un atributo llamado "post",
el cual tiene el uso de enviar los datos de un formulario a un servidor
--<input type="" min="" max="" value="" required="" name""> = Con esta, (que se
coloca en la etiqueta <form></form>) etiqueta se crea un bloque visual en el cual
el usuario podra interactuar con la pagina web, teniendo diferentes atributos como
"name", el cual identifica el input,el atributo "required" que marca un input
como necesario a completar, el atributo "value" en el cual se puede escribir un
texto que aparecera en la pagina web por defecto, y el "type" que tiene
muchos usos, como por ejemplo:
"text" (para ingresar texto),
"password" (para ingresar una contrase�a)
"number" (solo permite ingresar n�meros),
"email" (solo permite ingresar un e-mail),
"color" (permite modificar el color a algo),
"range" (permite elegir un minimo y maximo para mover una barra graduada, de
utilizan los atributos (min="") y (max="")),
"date" (es para ingresar fechas),
"time" (sirve para poner un tiempo en horas),
"button" (permite crear un boton con nombre propio, se utiliza el atributo
(value="")),
"submit" (es un boton para enviar todos los datos, utiliza el atributo
(value=""))
--<textarea readonly="">Hola como estas</textarea> = Con esta etiqueta que va

dentro del bloque <form></form> se crea un espacio para escribir o leer lo que
se coloque en el bloque, lo especial es que este espacio rectangular es modificable
en dimensiones (ancho o alto), con el atributo readonly="", solo se podra leer lo
que contenga el texto
OOOOOOOOOOOOOOOO
METADATOS
OOOOOOOOOOOOOOOO
--<meta name="" content=""> = Sirve para configurar metadatos que son relevantes
para el navegador utilizado y no para los usuarios, como palabras clave,
descripcion de la pagina
autor de la pagina o copyrigth, siendo estos valores del atributo "name" (keywords,
description, author, copyright). Esta etiqueta se ubica dentro del <head> de la
pagina
--<meta charset="utf-8"> = Sirve para configurar los caracteres a usar en la

pagina, permitiendonos usar caracteres especiales
OOOOOOOOOOOOOOOO
HTML SEM�NTICO
OOOOOOOOOOOOOOOO
-- UNA ESTRUCTURA DE HTML CORRECTA SEMANTICAMENTE RESPECTO AL NAVEGADOR ES UNA

DONDE SE ENCUENTRA UN [CABEZAL DE PAGINA] O <header></header> EN LA PARTE SUPERIOR,
UNA
[BARRA DE NAVEGACION] O <nav></nav> DENTRO DE DICHO HEADER, UN ARTICULO O
<article></article> A LA IZQUIERDA CON SECCIONES , UN COMPLEMENTO AL ARTICULO, Y UN
PIE DE PAGINA
--<header></header> = El header es el cabezar de pagina donde va el "nav" o un

peque�o men�, suele ir en la parte superior de la pagina
--<nav></nav> = El "nav" va dentro del header y es donde se coloca las diferentes

opciones, por ejemplo, mi cuenta, acerca de nosotros, inicio, iniciar sesion,
configuracion, etc.
Estas diferentes opciones se colocar�an utilizando listas desordenadas (vistas
anteriormente)
--<article></article> = En el articulo se coloca el contenido principal de la

pagina, p'ara separar cada componente se utilizan secciones
-<section></section> = Las secciones van dentro del articulo, y se utilizan para

separar contenidos
--<aside></aside> = En el aside se coloca informacion secundaria de la pagina,

suele ir a un costado de la pagina
--<footer></footer> = En el pie de pagina se suele colocar copyright, contactos,

redes sociales, etc.
OOOOOOOOOOOOOOOO
TABLAS
OOOOOOOOOOOOOOOO
--<table></table> = Con esta etiqueta se crea una tabla similar a la de excel
--<tr></tr> = Con esta etiqueta que va dentro del <table>, se crea una fila de
datos
--<td></td> = Esta etiqueta va dentro del <tr>, cada "td" es un espacio de datos
en una fila
osananajimi

Guía HTML

Uploaded by

Copyright:

Available Formats

You might also like

Guía HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guía HTML

Uploaded by

Copyright:

Available Formats

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

--<html></html> = Esta etiqueta es con la que se inicia cualquier programa de

--<!DOCTYPE html> = Esta debe estar por encima de la etiqueta <html></html>,

--<head></head> = En esta etiqueta se programa todo lo invisible, con lo que no

--<title></title> = Con esta etiqueta se coloca el titulo de la pagina, se coloca

--<p></p> = Aqui se colocan parrafos

--<b></b> = Con esta etiqueta la letra que la contiene se pone en "negrita"

--<i></i> = Con esta etiqueta la letra que la contiene se pone en "italica"

--<strike></strike> = Con esta etiqueta la letra que la contiene se pone en

--<small></small> = Con esta etiqueta la letra que la contiene se pone "peque�a"

--<br></br> = Con esta etiqueta se rellena un renglon con espacio blanco

--<center></center> = Con esta etiqueta se centra imagenes o textos

--<a href="">Click Aqui</a> = Con esta etiqueta se puede redirigir al usuario a

--<ul></ul> = Genera una lista desordenada, generalmente usada en el "header" de

--<ol></ol> = Genera una lista ordenada

--<li></li> = Genera los puntos de las listas

--<img src="" alt="" title="" height="200px" width="200px"> = Con esta etiqueta

--<video src="" controls></video> = Esta etiqueta es similar a <img src="">, solo

--<audio src="" controls></audio> = Esta etiqueta es similar que <video

--<link rel="icon" href=""></link> = Con esta etiqueta se le coloca icono a la

--<div></div> = es similar que la etiqueta <p></p>, pero sirve para dividir

--<form method="post"></form> = Esta es una etiqueta para completar formularios,

--<textarea readonly="">Hola como estas</textarea> = Con esta etiqueta que va

--<meta charset="utf-8"> = Sirve para configurar los caracteres a usar en la

-- UNA ESTRUCTURA DE HTML CORRECTA SEMANTICAMENTE RESPECTO AL NAVEGADOR ES UNA

--<header></header> = El header es el cabezar de pagina donde va el "nav" o un

--<nav></nav> = El "nav" va dentro del header y es donde se coloca las diferentes

--<article></article> = En el articulo se coloca el contenido principal de la

-<section></section> = Las secciones van dentro del articulo, y se utilizan para

--<aside></aside> = En el aside se coloca informacion secundaria de la pagina,

--<footer></footer> = En el pie de pagina se suele colocar copyright, contactos,

--<table></table> = Con esta etiqueta se crea una tabla similar a la de excel

You might also like