“HTML es un lenguaje de pregramacion

fácil y rápido de aprender, solo

necesitamos las ganas de aprender a
programar.”

Notas de
HTML
Inicie HTML con este libro

Leonardo
Notas de HTML :

Resumen :

Dentro de la etiqueta de apertura de link se puede colocar un titulo

que indica las letras que salen debajo cuando lo tapamos con el mouse .

ej

<a href="#" titlte="esto es lo saldra">esto es un ejemplo</a>

Los atributos class y id se diferencian en que el class se utiliza para

multiples valores y nombres , el id se utiliza para un unico nombre y
valor.

<meta>:

en html es importante colocar la etiqueta <meta></meta> despues de la

etiqueta <title></title>y entre las etiquetas <meta></meta>

Ya que nos ayudan en diferentes situaciones .

Tipos (Colocar todas)

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

Esta etiqueta sirve para que la resolucion se ajuste a los diferentes

dispositivos (aun en pantallas pequeñas)

<meta name="author" content="John doe"/>

Nos ayuda a colocar el nombre del autor en nuestra pagina web.

<meta name="title" content="un titulo en motores de busquedas como

google, bing y yahoo"/>

<meta name="description" content=" Una description que se muestra

debajo del titulo en los motores de busqueda como google , bing y yahoo
"/>

<-- El de abajo ya no funciona en los principales motores de busqueda

como google , bing y yahoo porque la gente lo ha abusado -->

<meta name="keywords" content="html , html tutorials , learn html with

examples, learn html with try it yourself functionality" />

<hr />

2
Coloca una regla horizontal algo asi como una linea debajo

<b>coloca el texto en bold</b>

<i>Italiza un texto</i>

<u>Coloca el texto con una linea debajo</u>

<code>codigo</code>

<tt>Otro codigo</tt>

<small>pequeña</small>

<em>Cursiva</em>

<strong>Enfasis</strong>

<mark>Marcado</mark>

<q>entre comillas</q>

3
<s>tachado</s>

<span></span>

Esto es para colocar el texto con diferentes estilos dentro de un

parrafo <p></p>

Dentro del estilo de las imagenes podemos colocar ,

float:"left"

junto con sus valores left o right . Y coloca la imagen centrada junto
con su texto

Tablas :

etiquetas :

<table> </table> Se coloca para empezar o terminar una tabla. se coloca

de primero y de ultimo.

4
<thead></thead> Define la cabeza de una tabla osea Donde van el titulo
pincipal ,y las etiquetas de <tbody></tbody> ,<th></th>.

<tfoot></tfoot> Define el footer de una tabla osea , la parte final de la

tabla .

<tr></tr> Define la separacion de las columnas de nuestra tabla , puede

ir con el atributo de colspan="numero de separaciones de la tabla"

<th></th> Define lo que esta dentro de la tabla dependiendo de cuantas

separaciones coloquemos en la etiqueta <tr></tr> van dentro de las
etiquetas de <tr>

<td></td> Van dentro de las etiquetas y cumplen la misma funcion de las

etiquetas <th> se pude colocar el atributo rowspan="Numero que
queremos que abarque la el espacio en blanco vertical" . tambien
trabaja en <th>

<tbody></tbody> Define e cuerpo de la tabla

<colgroup></colgroup> Espacifica una o mas columnas en una tabla

<col> Se colocan dentro de las etiqueta anterior , y se le puede colocar

el atributo del estilo de la columna como background-color.

5
Atributos de las tablas HTML:

align : esto es obvio

bgcolor: define el color del fondo de la tabla.

border:

cellpadding : define el espacio entre el contenido y el borde del cell

cellspacing: Define el espacio entre dos cells

width:

Nota: Algunos atributos pueden ser hechos utilizando CSS.

Listas :

Etiquetas :

6
<ul></ul> Dentro colocaremos los elementos que seran colocados con una
viñeta.

<ol></ol>Cumple la misma funcion que el anterior pero lo coloca

ennumerados .

<li></li> Los elementos dentro de la lista.

Se le puede colocar un estilo en CSS ej:

#ul-circle: {

list-style-type: circle;

Los estilos pueden ser los siguientes :

circle: circulo

square : cuadrado

upper-roman : Numeros romanos

lower-alpha : alfabeto

7
a la etiqueta <li> tambien se le puede añadir estilos

ej:

li::before {

content:" ->";

color: yellow;

Nota : Al añadir estilos a <li> debemos colocar en el estilo de <ol> o <ul>

none.

Lista de descripcion :

etiquetas :

<dl></dl> Abre y cierra una lista de descripcion .

<dt></dt> Abre y cierra un titulo de una lista de descripción

<dd> </dd> Abre y cierra el contenido de una lista de descripcion.

8
Se le puede colocar a la fuente de ambos estilos en CSS

Javascript (html):

Las etiquetas de Javascript son van dentro del body :

ej:

<body>

<script type="text/javascript">

<!-- Aqui van los scripts escritos -->

</script>

</body>

Tambien se puede colocar scripts desde un archivo usando el atributo

src="[Link]"

alert : es como print en python y lanza una alerta en el navegador

ej:

9
alert("Esto es una alerta.");

NOTA IMPORTANTE :

No podemos colocar una funcion a un elemento en javascript siendo este

de nombre diferente ya que no podemos llamar a que por ejemplo
decirle a juan "alza la mano" y luego llamar a pedro para que realice la
funcion.

Para llamar una funcion en javascript , por ejemplo en un boton

colocamos la etiqueta de apertura del boton , junto con un atributo
"onclick" que va a ser igual , a la funcion que crearemos en javascript. y
cerramos la etiqueta de cierre .

scripts en javascript:

alert("muestra un mensaje de alerta");

function changeContent() {

[Link]("sample").innerHTML ="Esto cambia el

contenido (contenido dinamico)";

como lo entiendo:

10
Primero colocamos lo que queramos que haga la funcion , imagen parrafo
, titulo ,etc.. con el atributo id="" que le colocamos un nombre , puede
ser cualquiera .

creamos un nombre de una funcion la cual la colocamos dentro de donde

queremos que se haga la funcion , en el estilo de javascript , creamos la
funcion con : function nombre()abrimos llaves y dentro de las llaves le
colocamos las funciones que queremos que haga.

Dentro de esas funciones va el nombre que le colocamos al atributo id ,

y las nombramos con parentesis y entre comillas .

la funcion de javascript empiezan asi:

[Link]("idquecreamosenelprincipio") = "valor" ;

esto va acompañado de un punto y la funcion que queremos que haga por

ejemplo:

para el estilo :

[Link] ="tamaño";

[Link] = "estilo";

11
[Link]= "color";

[Link] = "value";

dentro de value podemos colocar :

none = para ocultar un contenido

block = para mostrarlo

los valores van entre comillas y terminados con un ";".

cada funcion se hace por separado.

Formas :

Etiquetas :

<form></form> Estas etiquetas abren y cierran las formas que son para
introducir datos del cliente . Estas etiquetas van acompañadas de unos
atributos los cuales son "action" que llevan a un sitio web y method .

12
method : Es un metodo HTTP y puede ir con GET o POST este ultimo es
el mas seguro .

label :

es un texto que aparece en el lado izquierdo del input puede ser

estilizado utilizando [Link] escribe antes del input.

etiqueta:

<label for="demo">Esto es un label</label>

Input en javascript:

function getValue() {

alert([Link]("demo").value);

Esta funcion sirve si la colocamos en un input para lanzar una alerta qe

dice el valor que colocaste

Tipos de inputs:

Recordar : Estos tipos de valores son de atributos que se colocan estre

comillas

13
checkbox = seleccionar un elemento . En su funcion de JS en el punto
final se coloca checked

color = muestra un color. En su funcion de Js en el punto final se coloca

value

date = " muestra la fecha " . En la funcion de Js en el punto final se

coloca value

datetime-local = muestra la fecha y la hora local. En la funcion de Js en

el punto final se coloca value

email = para colocar email. En la funcion de Js en el punto final se

coloca value.

input types 2:

file = para introducir archivos .

atributos con este valor :

id

14
onchange="readFile();"

hidden= muestra el valor si le das al boton (el valor no es visible en la

pagina)

month= coloca un mes.

numero= un numero

password=una contraseña

radio=Introduce un selector.

range=introduce un rango del 1 a 100.

search =Haz una busqueda

tel = un numero de telefono

time= hora

url = url

15
week = semana

Comentario :

etiquetas :

<textarea row="10" cols="40" placeholder="escribe tu mensaje aqui..."

id="sample"></textarea>

se crea un boton en JS . Se crea una variable var con el valor var =

[Link]("sample").value;

y lanzamos una alerta (ESTO ES SOLO UN EJEMPLO)

alert(value);

Citar :

etiquetas :

16
<blockquote cite="[Link]

Aqui va el texto que queramos citar.

</blockquote>

<cite style="float: right;">-Autor del articulo que cite</cite>

Separar texto :

se escribe esto en el lugar que queramos separar &nbsp

ej:

<p>esto no esta separado</p>

<p>esto&nbsp&nbsp&nbspsi&nbsp&nbsp&nbspesta&nbsp&nbsp&nbspsepa
rado</p>

Superscipts:

Etiquetas:

<sub>coloca el texto pequeño paa formulas quimicas que necesiten

sub</sub>

^{coloca los numeros elevados}

17
pre elemento :

etiqueta:

<pre>

Esto

coloca

el

texto

asi

</pre>

figura :

etiquetas :

<figure></figure> = abren una figura que es donde se coloca informacion

<figcaption></figcaption> = van dentro de la etiqueta anterior , y coloca

un texto al final de la imagen , texto etc... dentro del figure

18
Caracteres de HTML:

& > &amp

" > &quot

' > &apos

la c con una linea en el cenetro > &cent

copyright > &copy

registrered mark > &reg

Audio:

etiquetas:

<audio></audio>

Atributos:

19
src="aqui colocamos el archivo mp3, ogg etc."

audio loop

controls muted.

Videos:

Etiquetas :

<video></video>

Atributos:

autoplay :

controls

height: altura

loop: el video empieza y se devuelve desde el principio cuando termina.

20
muted: El audio es silenciado

poster : Especifica la imagen que se muestra cuando el video esta

cargando.

src: especifica el archivo que queremos cargar.

width: anchura

Encerrar la pagina dentro de un cuadrado

Etiquetas :

<iframe></iframe> dentro de aqui podemos colocar otra pagina web .

atributos :

height : altura

name : indica el nombre de los elementos o el valor de los elementos

<a></a> , <form></form> etc...

21
src : Especifica la Url o la pagina embebida.

width : Especifica el ancho .

tambien podemos colocar un video de youtube.

22