Scribd
Cargar
6 vistas

Intro a HTML

Cargado por

Agu Gatica
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
6 vistas

Intro a HTML

Cargado por

Agu Gatica
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

INTRODUCCION A HTML

LENJUAGE DE MARCADO DE HIPERTEXTO

Nombre de la pagina principal:


index.html (Siempre es la pagina principal para búsqueda en servidores)

UTILIZAR BLOG DE NOTAS


Guardar como: index.html

Es un Lenguaje a base de ETIQUETAS

ETIQUETAS:
<etiqueta atributo="valor" tamaño="grande" borde="negro"></etiqueta>
<h1></h1> TITULOS desde el h1 al h6 – H1 es el mas grande

ESTRUCTURA INICIAL:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Mi Web </title>
</head>
<body>
Bienvenidos
</body>
</html>

<!DOCTYPE html> - INDICA QUE ES LA ULTIMA VERSION DE HTML

TITULOS – h1, h2…


<html>
<head>
<meta charset="utf-8">
<title>Primera Web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<h2>Hola Mundo</h2>
<h3>Hola Mundo</h3>
<h4>Hola Mundo</h4>
<h5>Hola Mundo</h5>
<h6>Hola Mundo</h6>
</body>
</html>

H1 – SOLO UNA VEZ EN LA PAGINA

PARRAFOS - <p> </p>

<body>
<h1>Hola Mundo</h1>
<h2>Hola Mundo</h2>
<h3>Hola Mundo</h3>
<h4>Hola Mundo</h4>
<h5>Hola Mundo</h5>
<h6>Hola Mundo</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

ENLACES: <a>

Href – ATRIBUTO REFERENCIA

<a href="https://www.facebook.com">Ir A facebook</a>


<a href="index.html">ir a Inicio</a>

Cuando tengo una carpeta:


<a href="carpeta/pagina2.html">Ir A facebook</a>

Para volver cuando usamos carpetas:


<a href="../index.html">Ir A facebook</a>

Abrir en otra Pestaña: target="_blank">


<a href="https://www.google.com.ar" target="_blank">GOOGLE en otra Pestaña</a>

*SALTO DE PAGINA: <br>

LISTAS:

Lista desordenada: orden por puntos


<ul>
<li></li> elementos
</ul>

Lista ordenada: orden por numeros


<ol>
<li></li> elementos
</ol>

<ol type="A">
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>

Type: A, a, I

TABLAS

<table border=”2”>
<tr> - FILAS
<td></td> - CAMPOS
</tr>
</table>

<table border=”2”>
<tr>
<caption>TITULO</caption>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
<th>Dni</th>
</tr>
<tr>
<td>Jorge</td>
<td>Perez</td>
<td>35</td>
<td>32485985</td>
</tr>
<tr>
<td>Abel</td>
<td>Rosales</td>
<td>39</td>
<td>30588985</td>
</tr>
</table>
<br>

MULTIMEDIA:
IMAGEN:
<img src="fotoagu.jpg">

PARA EL TAMAÑO: width y/o height (No recomiendo usar esto. Usar con CSS)
<img src="fotoagu.jpg" width="400px">

VIDEO:

<video
src="videoagu.mp4" controls="" width="400px">

</video>
SONIDO:
<audio
src="misendero.mp3" controls width="400px">
</audio>

DIVS: PARA SEPARAR Y AGRUPAR


Lo vemos mejor en CSS

<div> </div>

FORMULARIOS:
<form>
<input type="" name="">
</form>

input: entrada de Datos


type y name: atributos. Name es para Backend. Es un identificador

<form>
<input type="text" required=""><br>
<input type="password"><br>
<input type="number"><br>
<input type="email"><br>
<input type="color"><br>
<input type="range" min="1" max="10"><br>
<input type="date"><br>
<input type="time"><br>
<input type="button" value="Boton"><br>
<input type="radio" name="estudios" value="4">Otros<br>
<input type="Checkbox" name=""> Repitente <br>

<input type="file" name="foto"> <br>


<input type="submit"><br>
<textarea name="consulta" rows="5" cols="60"> Ingrese aqui su consulta</textarea> <br>
</form>

HAY MAS TIPOS DE TYPE


Required es para valor obligatorio – se hacen en el servidor

Para que salga un nombre o valor por defecto. Usamos el atributo VALUE
METADATOS: DATOS OCULTOS – DATOS DE DATOS

<meta charset="utf-8">
Acepta tipos de caracteres. Como acentos y ñ.

<meta charset="utf-8">
<meta name="keywords" content="musica,agugatica,san luis,quines">
<meta name="description" content="Musico solista de san luis argentina">
<meta name="author" content="Agustin gatica">
<meta name="Copyright" content="AguGatica Inc,">

LOS MAS UTILIZADOS

HTML SEMANTICO
NAV:

Va adentro del BODY y adentro del HEADER. Se copia y pega en todas las paginas de la web. Se usan las
listas desordenadas UL y adentro LI. También usamos “a” para hipervínculos-

<header>
<nav>
<ul>
<li>
<a href="index.html">INICIO</a>
<a href="pagina2.html">PAGINA2</a>
</li>
</ul>
</nav>
</header>

ARTICLE Y SECTION:

<article>
<section>
<p>
Musico solista de la provincia de <b>San Luis</b>. Nacido en <i>Quines</i>.
Exintegrante de la banda 4 Lados. Podes conseguir su musica en otdas las tiendas
<strike>digitales</strike>.
</p>
</section>
<section>
<p> MUSICO SOLISTA:

Musico solista de la provincia de <b>San Luis</b>. Nacido en <i>Quines</i>.


Ex integrante de la banda 4 Lados. Podes conseguir su musica en otdas las tiendas
<strike>digitales</strike>.
</p>
</section>
</article>
FOOTER: PAGINA

<footer>
<h4>Copy - todos los derechso reservados</h4>
<p>seguinos en nuestras redes
</p>
<a href="https://www.facebook.com/AguGatica18">Ir A facebook</a>
</footer>

También podría gustarte