Está en la página 1de 3

HTML

Es un lenguaje de marcado que permite crear estructuras de paginas web.


Una etiqueta es una parte de cdigo que representa algo en un sitio web .
<etiqueta></etiqueta>, cada parte tiene un contenido.
La etiqueta posee un atributo con un valor.
<h1></h1> hasta <h6></h6> son los titulares que pueden utilizar (el
max.)
<html></html> se inicia el cdigo.
<head> es la cabecera.
<tittle> inica el titulo de la paguina web.
Para mostrar el cuerpo del documento se necesita el comando <body> para
mostrar todo el contenido.
Para crear un espacio o etiqueta se escribe <br />.
Maquetar significa crear la documentacin de una paguina html.
Los prrafos permiten agregar textos. La etiqueta es <p></p>
La etiqueta <b></b> cambia las letras en negritas. Simplemente se utiliza
para hacer un estilo visual.
<strong> hace lo mismo que <b> pero da nfasis en el buscador.
<span> el contenido que esta entre esta llave le hace nfasis.
<i> letra itlica.
<blockquote> etiqueta que permite agregar una cita.
<cite> agrega al autor de la cita.
<hr/> permite agregar una lnea y se cierra sola.
Los enlaces son textos subrayados color azul y permite redireccionar.
<a href= protocolo y link de la paguina > texto que queremos poner
</a>, se le tiene que indicar la url o link.
La url puede ser relativa o predefinida.
Las relativas son dentro de mi sitio web o imgenes dentro de mi carpeta.
Para acceder a una imagen necesitamos una ruta definida, por ejemplo
imgenes/logo.jpg
Siempre se le tiene que agregar la extencion del archivo.
Con el atributo target= _blank no te cierra la ventana actual.
<link rel= stylesheet href= estilo.css>
Stylesheet seria un estilo de hoja de cascada y se agregaria estilo css.
<script src= rut> nos agrega un archivo java </script>.
El favicom se agrega con: <link rel= shortcut icon type= image/x- icon
href= imgenes/favicon.ico>
Para poder agregar un correo se utiliza la referencia <a href= mailto:
nombre de correo title= enviar correo a xxxxxxx>enviar mail</a>
Listas.
Las listas desordenadas se utilizan las etiquetas
<ul>
<li>elemento de la lista</li>
</ul>

Las listas ordenadas se diferencian de la otras en que las etiquetas son


<ol></ol> y las enumera por nmeros, en cambio las listas desordenadas
se manejan con puntos.
Imgenes.
La etiqueta para agregar imgenes es <img src=ruta de la imagen/> y se
cierra sola.
Recordar que el salto de lnea es <br/>
Con el atributo width y height modificamos la imagen.
Width es el ancho y height es el alto.
Width= 300 height= 300
Alt es un atributo que no es necesario, pero permite agregar un texto en
caso de que la ruta tenga un problema.
Tittle permite agregar el titulo a la imagen.
No solo se puede agregar una ruta estatica si no que tambin dinmica
mediante un url.
Las tablas.
Las tablas se utilizan para tabular contenido, como estadsticas o registro.
La etiqueta <table></table> nos permite crear la tabla.
Con la etiqueta <tr> nos permite crear una fila.
Dentro de cada fila tenemos que crear la columna con la etiqueta
<td></td>
Formulario.
Un formulario es una parte del sitio en que el usuario puede interactuar y
nosotros procesamos los datos para dar una respuesta.
La etiqueta de formulario es <form></form>
<form action= datos.php//recibe una url que se encarga de procesar los
datos del formulario si usamos el action tenemos que usar el atributo//
method= GET O POP>
Los campos se llaman <input type= text value/placeholder= Escribe tu
nombre size= 10//tamao de formulario// maxlegth= 2 //cantidad de
caracteres a escribir//>
Se puede agregar id o class
<Label for = nombre> se une al id= nombre
Input type= password es para el pass
Input type= email.
Input type= checkbox agrega una casilla.
Input type= radio seleccionar un radiobutton.
Input type= button
Input type= submit enva los datos
<select name= id= > //lista desplegable de las opciones

<option value= 1> 1 </option> //opcion


</select>
Input type= range //rango
Input type= color //color
Creando una estructura de contenido/layou
La etiqueta <div> separa los contenidos, se le agrega una id con la cual se
identifiaca una parte del cdigo.
Video o img + src= son etiquetas para agregar videos o imgenes.
El head es diferente del header.
El header es el encabezado que va dentro el logotipo y el men.
<nav> le dice al navegador que hay una etiqueta de men de navegacin.
Los men de navegacin se agregan como una lista.
<section class=wrapper>//contenedor en una seccin.//
<section class=main>//contenido principal o los artculos.//
<aside> contenido no importante para el buscador pero si para el usuario.
<article> agrega un articulo.
<p> es la etiqueta de prrafo.
<footer> es un pie de pgina.
Metadatos.
Los metadatos son informacin que se le entregan al navegador web.
Los metadatos siempre se escriben en el head.
<meta name=description content=de 150 a 170 caracteres/>
Para enlazar una hoja de estilo, se utiliza la etiqueta <link rel= stylsheet
type= text/css href= estilos.css />
<scrip> agregar cdigo java scrip o agregar un archivo externo </scrip>