dijo:Pues acá les enseñare como crear su primera pagina Web HTML en 8 videos que hice yo y un amigo les dejare el video y la explicación textual
Tutorial Básico de HTML. Creación de Páginas Web... Tema I
Tutorial Básico de HTML. Creación de Páginas Web... Tema II
Tutorial Básico de HTML. Creación de Páginas Web... Tema III
Tutorial Básico de HTML. Creación de Páginas Web... Tema IV
Tutorial Básico de HTML. Creación de Páginas Web... Tema V
Tutorial Básico de HTML. Tema VI (1ª Parte)
Tutorial Básico de HTML. Tema VI (2ª Parte)
Tutorial Básico de HTML. Tema VI (3ª Parte)
dijo:Acá les dejo el tutorial para que lo lean lo intente hacer lo mas entendible posible
Crear mi primera pagina Web HTML
<html> se comienza siempre con esto
<head> se comienza el titulo
<title>: titulo del brouser
</title>: se cierra así
</head>: cierre
<body>: lo que aparéese dentro de la pagina
Atributos de body:
bgcolor:ingresa color de fondo
background: ingresa color o imagen de fondo
text: indica color de texto
link: color del enlace no visitado
vlink: color del enlace visitado
Para colocar estos ejemplo el bgcolor que cambia el
fondo de la pagina ponemos asi <body
bgcolor="#FFFFFF"> se pone entre comillas el color y
para cambiar el texto es lo mismo ponemos <body
text="#FFFFFF"> y listo
Código de colores
Algunos colores
Azul cielo:#3299CC
Blanco:#FFFFFF
Amarillo:#FFFF00
Rojo:#FF0000
Azul:#0000FF
Verde:#00FF00
Negro:#000000
Cayn:#00FFFF
Gris:#C0C0C0
Gris oscuro:#2F4F4F
Verde oscuro:#2F4F2F
Turquesa:#7093DB
Púrpura:#871F78
Naranja:#7F7F00
Magenta:#FF00FF
Marrón: #A62A2A
Las combinaciones de los colores se marcan:
FF: 1er rojo
FF: ultimo azul
FF: intermedio verde
Puntos y apartes:
Para realizar un punto y aparte se pone <br> al lado
Del texto que quieras poner un punto y aparte
Ejemplo:
Hola como estas <br> más o menos
Lo que ara es poner el "mas o menos" abajo
Poniéndolo como si fuera un punto y aparte
Realizar líneas:
<HR> es para realizar una línea y separa el texto la
Línea que se hace es así ______________
Además tiene atributos que se pueden realizar
Atributos:
noshade: elimina el efecto de sombra de línea
width: permite definir la longitud de la línea
size: permite definir el grosor de la línea
Se ponen con número o %
Hola nico
<hr noshade width=200 size=4>
Hola José
Separamos el texto y no solo eso si no que a la
Línea separadora le borramos la sombra de la línea y
Además poner una longitud de 200 y un grosor de 4
También se puede poner en % ejemplo 50%
Encabezado:
Otra cosa que se puede realizar es el encabezado se
Marca con <hx> y cierra </hx> en la x hay que poner
Un número que va del 1 al 6 a medida que le aumenta
El numero disminuye el tamaño ejemplo
<h2> hola </h2>
Para los párrafos
<p> y </p>
Sirve para los párrafos te ahorra el trabajo de
Poner <br> cada vez que tengas que hacer un punto y
Aparte además tiene atributos
Es el aling que puede tomar estos valores
left: lleva el texto a la izquierda
right: lleva el texto a la derecha
center: obviedad texto al centro
justify: para alinear bien los textos
ejemplo para realizar esto
<p align=right>hola nico</p>
Lo que hicimos es al texto "hola Nico" colocarlo a
La derecha
Esto pasa cuando el párrafo esta determinado a
Terminar de determinada manera ejemplo
Hola como estas soy Nicolás
Jugaste al tenis hoy
El párrafo "jugaste al tenis hoy" esta a la
Izquierda al ingresar <p align=right> jugaste tenis hoy </p>
Se coloca a la derecha
Hola como estas soy Nicolás
Jugaste al tenis hoy
(También se pueden mover imágenes, títulos lo que
Fuese)
De center podemos hacer un encabezado ejemplo:
<center>hola Nicolás</center>
Igual si estuviera como encabezado
<center><h1>nicolas</h1></center>
Tipos de letras:
Negrita: <b> y </b>
Itálica: <i> y </i>
Subrayado: <u> y </u>
Tachado: <strike> y </strike>
Elevado 2ª: <sup> y </sup>
Elevado abajo 2,: <sub> y </sub>
Parpadeo se puedever en moxila: <blink> y </blink>
Maquina de escribir: <tt> y </tt>
Texto grande: <big> y </big>
Texto pequeño: <small> y </small>
Además esta la <font> y </font> en el que podes
Cambiar el color de la letra y tamaño del texto que Quieras con el atributo
Color= color de texto
face= tipo de letra
size= tamaño
Ejemplo:
<i><b>hola como estas</i></b>
Texto preformateado: sirve para respetar el espacio
Que hemos puesto entre espacios el símbolo es: <pre> Nicolás Antonella
te amo</pre>
Ejemplo:
Quedo igual al poner <pre> </pre>
Nicolás Antonela Neila
Te amo
Comentarios: no aparecen en la página
<!--hola como vas-->
Resalta el texto. En si resalta lo que alguien dijo
<blockquote>
</blockquote>
Imágenes: para colocar imágenes
<img src=""> se coloca img= que es la abreviación de
Imagen y src= sourse que significa fuente y luego la
Imagen entre comillas ya sea imagen de tu carpeta o
De Internet
Las imágenes no tienen cierre y tiene el atributo
alt= nombre de la imagen que quieres que
Aparezca
width: ancho de la imagen
height: alto de la imagen
border: se le coloca un borde a la imagen
Fondos de la pagina de inicio se utiliza el
Background que sirve para poner imágenes de fondo
Como al comienzo esta dicho
Ejemplos:
Colocación de imagen
<img src="imagenes/autos/ford focus.jpeg"
alt=anterior>
Se pueden centrar y hacer varias cosas mas con las
Anteriores atributos <center> <right>
<center>
<img src="imagenes/autos/ford_focus.jpeg"
alt=anterior>
</center>
Colocación del borde 10 pixeles
<img src="imagenes/autos/ford_focus.jpeg"
alt=anterior border=10>
Colocación de imagen de fondo
<body background=
iamgen/futbol/Inter_Champions.jpeg>
se coloca al principio no crean que tienen que poner
De nuevo <body> no van al principio y listo
Realizar tablas<table> y </table>
Atributos:
border= indica el borde de la tabla si no ponemos un
Nº el borde estará invisible
filas= es <tr> y </tr>
tiene dos atributos aling= posicion horizontal desea
Alineación
Y valign= pocicion vertical desea aliniar
En aling se puede poner "center" y "right",etc
valign="top" y "bottom"= "abajo",etc que es arriba
celdas= <td> y </td> también tiene aling y valign
Sus atributos son
bgcolor
Background
cellspacing= separa las celdas
cell padding= agranda las celdas
Estos se ponen dentro de table como border
width=ancho
height= altura
colspan= va a tomar numero de columnas a la derecha
es decir depende el numero que tomes la celda se
Agrandara tomando dos celdas juntas
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
El 3.1 tomo dos celdas
rowspan= va a tomar el numero de filas hacia abajo
atributos <tr>
<tr aling="center" valing="top">
<tb aling="center" valing="top">
<tb colspan= 2 rowspan=5 >
Bordes
<table border= "1">
Estructura de las tablas
<table>
<tr>
<td>
</td>
</tr>
</table>
Quedaría así más o menos
1.1 1.2 1.3---- celdas
2.1 2.2 2.3
3.1 3.2 3.3
Encabezado
y los encabezados son con <th> y </th>
h= es de head
Quedara así más o menos
A B C ---- encabezado
1 2 3----- celda
Ejemplo:
Tabla
<!-- 1 fila-->
<tr>
<td>
1.1
</td>
<td>
1.2
</td>
<td>
1.3
</td>
</tr>
<!-- 2 fila-->
<tr>
<td>
2.1
</td>
<td>
2.2
</td>
<td>
2.3
</td>
</tr>
Con encabezado
<!-- encabezado-->
<tr>
<th>
a
</th>
<td>
b
</th>
<th>
c
</th>
</tr>
<!-- 1 fila-->
<tr>
<td>
1.1
</td>
<td>
1.2
</td>
<td>
1.3
</td>
</tr>
<!-- 2 fila-->
<tr>
<td>
2.1
</td>
<td>
2.2
</td>
<td>
2.3
</td>
</tr>
Si eliminas un <td> lo que ara es cerrar una celda
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2
3.3
Lo que hizo es la 3.3 que estaba tercera se corrió a
La celda 3.1 por que se elimino la celda del 3.3
</body> para cerrar ya lo que escribiste
</html> se cierra la pagina
Para guardar el documento se pone .HTML
dijo:No quise poner fotos ya que con los videos y el Tuto creo yo que bastara Espero que les allá gustado este pequeño curso los creadores fueron mi amigo pedro y su servidor Nicolás.
