Hola a todos. Hoy les traigo otro blog y como habrán leído el
título sabrán de que trata y si no pues es una introducción a la programación
HTML, bien comencemos.
¿Qué es HTML?
HTML es el lenguaje por el cual hipertextos se desarrolla una página Web mediante
etiquetas o marcas que le permite al programador insertar imágenes, vídeos, músicas
e hipervínculos y modificar el formato del contenido a su gusto.
¿Qué son las etiquetas?
Las etiquetas es lo que nos permitirá crear el código HTML
para la página Web, un ejemplo de estas seria <i> que es cursiva, por lo normal las etiquetas siempre están
en inglés.
Estructura básica HTML
<html> <head>
</head>
<body>
</body>
Por cierto
las etiquetas se abren de la siguiente manera <i> y luego de haberla utilizado se cierran así </i> poniendo la misma con un slash ( / ).
Si se
utilizan etiquetas como background o Font face se coloca un igual y se abre
comillas y se escribe los que se utilizara por ejemplo <Backgroup=”imagen.png”>.
Etiquetas básicas
Para head:
ü <title> </title> : Se utiliza para el encabezado de la página.
Ejemplo:
<head>
<title>
Gato </title>
</head>
Para body:
ü <h1></h1>: Titulo.
ü <p></p>: Es para escribir párrafos.
ü <br>:
Saltos de líneas.
Ejemplo:
<body>
<h1>Los Gatos</h1>
<p>Los gatos
son un subespecie de mamíferos carnívoros de la familia Felidae...</p>
<br>
<p>Los gatos
han convivido con el ser humano aproximadamente 9500 años…</p>
</body>
Etiquetas para la sintaxis del contenido
Para cabeceras:
Se utilizan <h1>
hasta <h6> a medida de que el número aumente el tamaño del texto se
reducce.
ü <h1></h1>: Titulo.
ü <h2></h2>: Subtitulo.
ü <h3></h3>: Subtitulo.
Ejemplo:
<h1>
Steven </h1>
<h2>
Steven </h2>
<h3>
Steven </h3>
Para listas:
ü <ol></ol>: Se usa para una lista
enumerada.
ü <ul></ul>: Se usa para una lista
no enumerada.
ü <li></li>: Se usa para los elementos que irán en la lista.
Ejemplo:
<ol>
<h2> Tipos de gatos: </h2>
<li>
Persas </li>
<li>
Siamés </li>
<li>
Burmés </li>
</ol>
<ul>
<h2>¿Qué hacen los gatos?</h2>
<li>
Duermen </li>
<li>
Comen </li>
<li>
Juegan </li>
</ul>
Para Textos:
ü <font face="style"></font>: Es el estilo de letra. Se utilizara
se coloca después de <head> y se
cierra al antes de </body>.
ü <font size=”6”></font>: Es el tamaño de la letra. Se utilizara se coloca después
de <head> y se cierra al antes de
</body>.
ü <text=”white”>: Se utiliza para el color de la letra.
ü <b></b>: Negrita.
ü <i></i>: Cursiva.
ü <ins></ins>: Subrayado.
ü <hr size=”8”>: Es línea horizontal, el size es para colocar el tamaño de la línea.
ü <center></center>: Es para colocar el texto en el centro.
ü <left></left>: Es para colocar el texto en la izquierda.
ü <right></right>: Es para colocar el texto en la derecha.
Ejemplo:
<body
bgcolor="black" text="White" >
<font face="High Tower Text">
<font size=”6”>
<center>
<h1> <i>
<b> Los Gatos </b>
</i> </h1> </center>
<hr size="8">
<p> <i> Los gatos son un subespecie de <ins> mamíferos </ins>
carnívoros
de la familia Felidae... </i>
</p>
<br>
<p>
Los
gatos han convivido con el ser humano aproximadamente <b> <ins>9500 años… </ins> </b> </p>
</font> </font>
</body>
Etiquetas Multimedia
Para fondo e imágenes:
ü Bgcolor: Es el
color de fondo de la página. Se coloca en <body>.
ü Background =”imagen.png”: se utiliza para poner una imagen de fondo a la página. Se coloca en <body>.
ü <img src=”imagen.png”>: Es para insertar imágenes a la página.
ü Height: Para
ajustar la altura de la imagen.
ü Width: Para
ajustar el ancho de la imagen.
ü Border: Para
colocarle bordes a la imagen.
ü Border color:
Es para darle color al borde.
ü Alt: se
utiliza se quiere colocar un texto a la imagen.
Nota: Cuando vayas a colocar una imagen de
internet tienes que copiar el enlace de la imagen.
Ejemplo:
Fondos:
<body background=”http://www.cuidatusmascotas.com/wp-content/uploads/2015/04/Por-qu%C3%A9-los-gatos-ronronean.jpg”>
Si no deseas poner una imagen de fondo puedes usar bgcolor de
la siguiente manera.
<body bgcolor= "#00FF7F">
Aquí te dejo un enlace de para bgcolor:
Imágenes:
<img
src="https://misanimales.com/wp-content/uploads/2016/06/hipertiroidismo.jpg" width="300" height="166" border="8" border color="White" ></center>
Para vídeos y audios:
ü <iframe src=“Dirección del video(local/Web)"></iframe>: Para colocar videos.
ü Height: Para
ajustar la altura del video.
ü Width: Para
ajustar el ancho del video.
ü Volume: Es
para ajustar el volumen del audio o video.
ü <embed src=“Audio" autostart=true loop=true volume="80"
width="0" height="0">: Para insertar el audio en la página
Web.
Ejemplo:
Videos
<iframe
width="560" height="315" src="https://www.youtube.com/embed/VKmp327kAAQ"
frameborder="0" allowfullscreen></iframe>
Nota: Si quieres que un vídeo comience a reproducirse
solo tienes que colocar autoplay siempre después del signo de interrogación,
como te lo muestro a continuación.
<iframe
width="200" height="50" volumen="20" src="https://www.youtube.com/embed/IjdpAQIaG9E?autoplay=1&rel=0&controls=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
Para hipervínculos:
ü <a></a>: Inserta páginas por medio de un enlace.
ü href: indica la dirección de la página.
ü Title= se coloca el nombre que le darás al enlace.
Ejemplo:
<a
href="file:///C:/Users/Pc/Desktop/Gato.html" title="Inicio">Inicio</a>
<a
href="https://gatos.paradais-sphynx.com/razas-clases-tipos" title="Razas">Razas</a>
Para tablas:
ü <table></<table>: Es para hacer tablas.
ü <caption></caption>: Para el título de la tabla.
ü Border: Es
para el tamaño del borde.
ü <tr></tr>: Es para abrir los recuadros de la tabla.
ü <td></td>: Se crean las filas que usaremos.
Ejemplo:
<center><table
border="2">
<caption><b><font
size="6">Gatos</font></b></caption>
<tr>
<th scope="col"><font size="6">Clase</font></th>
<th scope="col"><font size="6"> Procedencia </font></th>
</tr>
<tr>
<td><font size="5">Abisinio</font></td>
<td><font size="5"> Antiguo Egipto</font></td>
</tr>
<tr>
<td><font size="5">Persa</font></td>
<td><font size="5">Gran Bretaña</font></td>
</tr>
<tr>
<td><font size="5">Siberiano</font></td>
<td><font size="5">Rusia y Ucrania</font></td>
</tr>
</table>
Bueno así quedaría
la página que creamos.
Les dejo un
vídeo aquí debajo de cómo crear una página Web con HTML.
https://www.youtube.com/watch?v=yJcoqOBklK4
Espero que le halla podido ayudar este blog, hasta la próxima.
Fuentes consultadas:
Guelda Tristán.
(2015). Estructura de una página Web. Taller introductorio al HTML 1 año TIC’S.
Moisés
Ledezma, César Castillo Moreno. (2017).Introducción a HTML. PPT.
Email:
marigaby756@gmail.com
Como se coloca el icono en la parte superior derecha, en donde esta el titulo de la pagina?
ResponderBorrarBueno se coloca lo siguiente, solo remplazas en donde esta imagen.png y colocas la que quieras. < link rel="shortcut icon" href="imagen.png" />
BorrarGracias
ResponderBorrar