APRENDIENDO A PROGRAMAR HTML CSS PHP JavaScript JAVA VBA

APUNTES de HTLM5, CSS, JavaScript, ES5, php, VBA, JAVA Cuando empecé mi camino en la programación, me dí cuenta que en ocasiones no era tan fácil como creía encontrar apuntes y deseo compartir lo que voy aprendiendo por si a alguien le resulta de utilidad. Ahora tengo una meta vivir de la programación, poco a poco intento sumar conocimientos y compartirlos con todos vosotros. Por el camino cometeré errores pero tengo las metas muy claras.

martes, 26 de marzo de 2019

apuntes html

Como crear una web con html y css

COMO CONSTRUIR UNA WEB DESDE 0

Estructura de una página web y lenguajes con los que se construye

Ua web esta compuesta de varios pilares:

FRONTEND: Es la interface con la que interactua el usuario, tambien conocida como parte del lado del cliente.

HTMl

CSS: Es el lenguaje que utilizaremos para dar formato a nuestra página, es la parte visual, colores, centrado, justificado, degradados...

SQL

Structured Query Language)

SQL

BBDD

Sql

JavaScript: Es el lenguaje que utilizaremos para generar interacion a nuestra página. JS (JavaScript) genera las animaciones e intarcciones de nuestra página.
Supongo que habréis accedido a una web y tocado un botón para que la página haga algo, habierto un desplegable y selecionado una opción. Cuando os cargan esos incomodos pantallazos o pasas el raton por una foto y cambia de tamaño. Todo eso y más se hace con JavaScript.
A pesar de su nombre parecido no es lo mismo JavaScript que Java, son lenguajes totalmente diferentes en sintaxis y estructura.

BACKEND

Parte del servidor

PHP

JAVA

PYTHON

RUBI

LARABEL

JQUERI

¿QUE ES HTML?

No es un lenguaje de programación, es la forma que tenemos de dar sentido semántico a nuestra página mediante el marcado de etiquetas (enfasis a unas determinadas palabras, encabezados, pies de paginas...). Sus siglas probienen del acronimo HyperText Markup Lenguage (Lenguaje de marcado de hipertexto). HTML es la encargada de dar un sentido semántico a nuestra página para conseguir que el browser interprete nuestro contenido. Hemos de tener en cuenta que estamos explicando a un programa informático el contenido en nuestra página y debemos hablar en su idioma para que nos entienda.
Será inprescindible un buen marcado de nuestros textos para que el SEO (posicionamiento Web). Cuando cuando indicamos desde HTML negrita a una palabra (<strong>) le estamos diciendo que esa palabra/as son muy importantes en nuestro texto.
En la actualidad estamos utilizando la versión 5 de html, es por ello que se denomina HTML5. Todo texto en html5 empezara por la etiqueta <!DOCTYPE html> .

PARTES DE LA ESTRUCTURA HTML

La estructura html se divide en arbol entre etiquetas que se habren y cierran, la inmensa mayoria de etiquetas que se abren < > han de ser cerradas posteriormente </>. Es conveniente organizar muy bien el código para evitar dejar etiquetas abiertas.

`<head></head>`

Es la parte de nuestro html que el usuario no podrá leer y es donde se registra el lenguaje con el que escribimos nuestra página (español, ingles, aleman..), en el caso de estar compuestro por varios archivos (css, JavaScript,php) se linkan o esriben aquí, el titulo.... Nuestro <head> irá siempre en primer lugar tras la apertura de la etiqueta <html>

                               
 <!DOCTYPE html>
        <html>
            <head>

           <head>
        <html>

PARTESTE DENTRO DEL `<head>`

<META>

Las etiquetas meta no tendran par de cierre, se habren y se cierran en la misma línea. Normarlemente una etiqueta html se habre <body> y cuando finalizamos se cierra < /body>. Pero en el caso del meta no se cierra de esta manera, se cerrará sin renombrarla <meta charset="UTF-8">.

<meta charset="UTF-8">

<meta name="desecripcion" content = " ">

<meta name="keyword" content = " ">

`<Title></Title>`

En esta etiqueta cargaremos el titulo de nuestra página. Este titulo cargará en la pestaña de nuestro buscador, pero lo importante no es eso, será el que utlice el browser para clasificar tu articulo u página.

<title> Cómo crear una página web < / title>

<link>

Utilizaremos esta etiqueta para vincular archivos a nuestro archivo principal de Html. Esto se conoce como linkear. No se suele escribir todo el codigo en un mismo archivo, lo normal en un prollecto es cargar un archivo con el css, otro con el PHP, otro JavaScrip y unirlo todo al archivo HTML con el <link>.

<link rel="shortcut icon" href = " ">

: Utilizarremos esta etiqueta link para cargar un icono en la pestaña superior de unestra web. Entre las comillas del href cargaremos la ruta de unestra imagen para el icono y en el atributo rel especificaremos "shortcut icon".
icono en una ventana

<link rel = "stylesheet" type "text/css" href = "Equipo\MiHojaDeEstilos.css" >

Es muy común editar una hoja de estilos css y reutilizarla para varios proyectos.

<cript>< / script>

<script rel = "stylesheet" type "text/JavaScript" src = "Equipo\MiHojaDeEstilos.JS" > < / script>

etiqueta script para cargar nuestra hoja de estilos JavaScript

<script rel = "stylesheet" type "text/JavaScript" > codigo JavaScript.................. < / script>

etiqueta script para cargar nuestro codigo JavaScript dentro de nuestro hatml

<style>< / style>

<style rel = "stylesheet" type "text/css" >

crear el Css en el mismo archivo que el resto del código html

nuestro head quedaria asi:

           
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="Articulo para aprender html5, css, javaScrip y resto de programas con los que crear una web desde 0">
            <meta name="keywords" content="html, aprendizaje, paginas web, etiquetas html">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <link rel="shortcut icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpdYpaEdGC1iCy-QCwPk7RKcT2WVX1VC-fDjX02EVtI7fuullsjXCJXAINueJKkUUEBZUyeL-RKPb5AYzElyjGx_v5svONr86kyJCk7vAjGH885lOO-2sENyGuAGKPVsMza7qGQdZ5fqo/s1600/HTML5.jpg">
            <title> Cómo crear una web</title>
            
            <style rel="stylesheet" type="text/css">           
            < / style>


        <head>
 <html>

Esto es el <head>

Link

Title

Esto es el <body>

dentro del body esta el header

S E C T I O N

Estilos css para una página web

Funadmentalemente existen tres tipos de estilos para nuestras paginas web:Estilos en linea (inline), estilos externos, en cabecera.

Estilo exteno

h1{
        background-color:red;
    }

Estilo en cabecera

<h1 id="pEnCabecera">

head

<style>

h1#pEnCabecera{
    
backgroun:red;

}
</style>

name=

"eStiloEnCabecera"

head

<style>
h1[name="PStiloEnCabecera"]{

backgroun:red;

}
</style>

En linea o inline

syle

<h2

style=

"color:Red"

<h2>

ETIQUETAS CENTRALES DEL <body>

Tal y como hemos dicho anteriormente el diseño de los objetos es responsabilidad de CSS, pero es impotante que nos realacionemos con la esctructura que reperesenta para html. En html reprensentamos la semántica de la página, con CSS le daremos el aspecto. Si creamos esta esctructura con html no se mostrará tal y como la ves, si no como filas completas, pero lo que nos interesa es el sentido e importancia del texto. Cuesta comprenderlo pero no estamos mostrando imagenes, estamos haciendo que el ordeandor comprenda lo que hemos escrito.

CABECERA
<header>< / header>

cuerpo de la página

Este es el cuerpo de nuestra página
<section> < / section>

<p>

Utilizaremos la etiqueta <p> para crear parrafors dentro de las etiquetas.

Se puede crear un parrafo en un encabezado


                    <header>
    <p>esto es un parrafo</p>
</header>

Tal y como ves podriamos subdividir un parrafo dentro de cualquier sección.


                    <body>
    <header>
        <h2> titulo encabezado<h2>
    </header>
        <section>
    <header>
        <p>parrafo</p>
    </header>
    <section>
        <p>parrafo de la seccion</p>
    </section>

    </section>
</body>

Etiquetas inline

Son aquellas que se encuentran dentro de un parrafo y no generan salto de línea (<p></p>), estas etiquetas no subdividen el parrafo en partes, su función es informar al buscador el significado de las palabras e importancia sobre el resto.

**Etiquetas in line**
ETIQUETA	USO
`<strong>`	Lo veremos en el navegador como texto en negrita, pero el sentido para html es que esa en concreto es una palabra muy importante para nosotros, es una palabra clave
`<em>`	Lo utilizaremos para dar enfasis a una palabra o conjutno de palabras, se mostrará en el navegador como cursiva
`<small>`	Lo utilizaremos dentro de un footer siempre y su utilidad es indicar al browser que se trata de un texto legal.
`<cite>`	Para realizar citas a autores.
`<dfn>`	Se utiliza para hacerdefiniciones.
`<code>`	Le indicamos que dentro de esta etiqueta eixite un trozo de código programación.
`<abbr>`	Indicamos que se trata de una abreviatura
`<data>`	Para datos de una estadística o etc.
`<br>`	Salto de línea,no es necesario cerrarlo
`<q>`	cita a libros, videos, canciones...
`<del>`	Texto eliminado, lo podemos utilizar para precios antiguos, lo veremos como un texto tachado
`<pre>`	Matiene el formato anterior del texto

. <sub>
Subindice ejem. 259 /₅₀
<sup>
Poner potenciales. ejm. 150 ²⁵.
<time>
fechas
<time datetime "2018-03-30" pubdate>
<mark>
resaltado de texto subrrayador.
<span>
No tienen sentido semantico, la única utilidad que tiene es la de selcionar una palabra o conjunto de palabras para posteriormente modificarlas con css o JavaScript.
<a>
hipervinculo, palabra ancla o ancorText
<a href= "RUTA" target="BLANCK"> ...texto... /a>
lo utilizaremos para redirecciones a una url , target= “blanck” abrirá la URL en otra pestaña nueva.
<address>
Lo utilizaremos dentro de un footer y se usa para datos personales emali,telefonos,dni

Etiquetas de imagen <img>

Las etiquetas img se utilizan para cargar fotos en formato gif, jpg o png. Es muy importante etiquetar bien las imagenes y selecionar las adecuadas para ayudar a un buen posicionamiento SEO. Una imagen o video es objeto independiente, por lo que debe esta encerrado dentro una etiqueta <figure>.
Utilizaremos la etiqueta <figcaption> para un pie de foto.

La etiqueta img tiene varios atributos podemos resaltar tres:

href

alt

Title

<figcaption></figcaption>

La etiqueta figcaption se utilizara para poner un pie de foto. Este pie de foto aparecera en letra mas pequeña en la parte inferior de la foto.

<!-- <article > 
            <figure>
                <header><h3>
cabecera articulo</h3>
</header>
                <img src="C:\\imagenes\foto.gif" 
              alt="imagin muestra practica"
              title="TECLADO PORTATIL">
        <figcaption>
            <p>
pie foto</p>
</figcaption>
    </figure>
</article> -->

Ejemplo de img

Esta es la imagen del teclado de mi ordenador con las teclas y distribución — Esta es una imagen de mi portatil

<video>< / video>

Esta etiqueta html la utilizaremos para cargar videos en nuestra paginas web . Los formatos soportados para video en html serán mp4 y ogg. Tener en cuenta que las imagenes deben estar entre eqituetas figure al tratarse de objetos independientes al contexto general igual que pasaba con la etiqueta img.

ATRIBUTOS DE LA ETIQUETA `<video>`

Src: En el indicaremos la ruta de unestro archivo.
Controls: Nos cargara la botonera del play, stop...
Atoplay: Iniciará el video cuando cargue la página
Loop: Le indicará a nuestro navegador que reproduzca el video de forma infinita. Al llegar al final iniciará de nuevo.
Preload: Indicará al navegador cuantos fotogramas tiene nuestro video.
Width: Será el tamaño, convien gestionarlo con css.

Uso de la etiqueta <source> dentro de un video

Es conveniente que preveamos todos los escenarios posibles para cargar nuestros videos, por esa razón es razonable cargar nuestros archivos en los dos formatos que se pueden reproducir mp4 y ogg. Para que cargue una u otra dependiendo del navegador utilizaremos la etiqueta source.

Ejemplo de etiqueta <video>

En el siguiente ejemplo vamos a crearemos una etiqueta video dentro de una etiqueta figure y activaremos los botones de play.

APRENDIENDO A PROGRAMAR HTML CSS PHP JavaScript JAVA VBA

Seguidores

MIS WEBS

martes, 26 de marzo de 2019

apuntes html

COMO CONSTRUIR UNA WEB DESDE 0

Estructura de una página web y lenguajes con los que se construye

¿QUE ES HTML?

PARTES DE LA ESTRUCTURA HTML

`<head></head>`

PARTESTE DENTRO DEL `<head>`

<META>

`<Title></Title>`

<link>

<cript>< / script>

<style>< / style>

Esto es el <body>

Estilos css para una página web

ETIQUETAS CENTRALES DEL <body>

<p>

Etiquetas inline

Etiquetas in line

Etiquetas de imagen <img>

<figcaption></figcaption>

Ejemplo de img

<video>< / video>

ATRIBUTOS DE LA ETIQUETA `<video>`

Uso de la etiqueta <source> dentro de un video

Ejemplo de etiqueta <video>

No hay comentarios:

Publicar un comentario

Buscar este blog

Seguidores

MIS WEBS

martes, 26 de marzo de 2019

apuntes html

Estructura de una página web y lenguajes con los que se construye

¿QUE ES HTML?

PARTES DE LA ESTRUCTURA HTML

<head></head>

PARTESTE DENTRO DEL <head>

<META>

<Title></Title>

<link>

<cript>< / script>

<style>< / style>

Esto es el <body>

Etiquetas in line

<figcaption></figcaption>

Ejemplo de img

Uso de la etiqueta <source> dentro de un video

Ejemplo de etiqueta <video>

No hay comentarios:

Publicar un comentario

Buscar este blog

`<head></head>`

PARTESTE DENTRO DEL `<head>`

`<Title></Title>`