Editores de Código
Son programas diseñado específicamente para editar código fuente.
Generalmente los editores de código soportan varios lenguajes y son capaces de abrir varios archivos a la vez.
Sublime text 3:
https://www.sublimetext.com/3
HTML 5
Es la quinta versión del HTML.
Utilizan etiquetas/tags.
Para abrir crear una etiqueta utilizamos < > (los símbolos "menor que" y "mayor que") y dentro el nombre de la etiqueta
correspondiente.
Ejemplo:
<body> contenido </body>
Etiquetas y estructura más utilizadas dentro del body
<header></header>
Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y los links para ir a las otras secciones de la página.
<section></section>
Define una sección en un documento.
<footer></footer>
Define el pie de una página o sección. Usualmente contiene un mensaje de
derechos de autoría, algunos enlaces a información legal o direcciones para dar información.
Etiquetas y estructura más utilizadas para mostrar contenidos
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>,
<h6></h6>
<h1> es la de mayor y <h6> es la de menor tamaño. Elemento generalmente utilizado para títulos.
<p></p>
Se utiliza para párrafos
<strong></strong> - <b></b>
Se utiliza para textos en negrita.
<video src=” /video/tutorial.mp4”>
Incorporar un video, con la interfaz necesaria para reproducirlos.
<img src=” /imagen/tutorial.png”>
Incorporar una imagen.
<audio src=” /audio/tutorial.mp3”>
Incorporar un archivo de audio.
<iframe src="www.youtube.com/?=afsnan323ml"></iframe>
Incorporar un elemento externo.
<ul>
Se utiliza para hacer un listado, cada elemento dentro estará entre
<li>
<p>hola</p>
</li>
<li>
<p>como andan</p>
</li>
</ul>
<button></button>
Etiqueta de botón
<a href=""file:///C:/Users/DELL/Desktop/curso/estructura basica2.html">clic aquí para ir a Google</a>
Para ingresar un link ya sea a otra parte de la página o página externo
<div></div>
Es una etiqueta que por sí sola no tiene ningún atributo
Cascading Style Sheets (CSS)
Hojas de Estilo en Cascada
.
Es un lenguaje para definir el estilo o la apariencia de las páginas web.
podamos cambiar la estética entera de un sitio web, sin tocar para nada los documentos HTML.
Estructura
<head>
<style>
esta etiqueta es para que el HTML sepa que dentro abra código CSS </style>
</head>
<h1 style=“ ”>Hola mundo</h1>
Llamamos a lo que queremos modificar por su ID O CLASS Para id:
#id_algo
Para class:
.class_algo
Se puede llamar a una etiqueta:
H1
Al lado se pone llaves {} y dentro de las llaves ira el CSS que deseamos asignar.
Ejemplo:
H1{
Propiedad CSS : valor ; Color: red;
}
Propiedades CSS mas utilizadas
color del texto color: red;
color del fondo
background: black;
imagen de fondo
background: url(https://happygift.com.ar/img/Fondo-Web- 001.jpg);
tamaño de la letra font-size: 15px;
grosor de la letra (para darle negrita) font-weight: bold;
para posicionar los textos text-align: center;
margen superior margin-top: 5px;
margen inferior
margin-bottom: 5px;
margen izquierdo margin-left: 5px;
margen derecho margin-right: 5px;
espacio de relleno superior padding-top: 5px;
espacio de relleno inferior padding-bottom: 5px;
espacio de relleno izquierdo padding-left: 5px;
espacio de relleno derecho padding-right: 5px;
ancho
width: 100%;
alto
height: 100%;
bordeado
border: solid black 2px;
darle redondeado a las puntas de borde border-radius: 10px;
ocultar algo display: none;
Posiciona los elementos de forma flotante ayudando a que se ubiquen en la misma línea
float: left;
