Los apuntes de Kate : HTML

Aquí podrás encontrar mis apuntes del curso de ACTÍVATE de Desarrollo Web: HTML y CSS. y complementos de diversas páginas.

Antes de empezar con HTML, déjame recomendarte Notepad++ para poder generar los códigos, es un programa completamente gratis. Pero también puedes trabajar con el block de notas de tu computadora.

HTML

HTML son las siglas de HiperText Markup Language, que puede traducirse como lenguaje de marcas o marcado de hipertexto.

Las etiquetas más usadas son:

html
head
meta
title
link
style
script
body
p
a
strong (destaca una parte del texto, la pone en negrilla)
em
img
form
input
select
textarea
table
tr
th
td
blockquote
hr
ul
ol
li
div
span

Etiquetas principales para escribir una página web:

<html> etiqueta principal (la raiz)

<head> cabecera, metadagtos

<title> título de la página

<body> cuerpo, contenido visible

<h1>…<h6> encabezados o títulos

<p> Párrafos de texto

<strong> texto destacado (negrilla)

<em> texto enfatizado (cursiva)

(<strong> y <em> cumplen la misma función, es decisión del programador cuál usar)

NOTA En NOTEPAD se puede activar la función de autocompletado, es decir, escribo <p>, y el programa me pone la etiqueta de cierre </p>. Esto solo es posible que tengo instalado el Plugin Textxf.

Atributos

Un link:

Una imagen y sus medidas:

Los valores de los atributos deben de llevar siempre comilla

INCORRECTO <p class=importante>

CORRECTO <p class=”importante”>

El atributo title:

title=”Ejemplo”; sirve para poner en imgs o texto y esto lo que permite, es que cuando pasemos el ratón encima de la img o texto nos sale un recuadro con un texto, en este caso “Ejemplo”.

Con una img se usa así: <img src="cabezote.png" title="Este es el cabezote">

Con un párrafo sería así: <p title=”Esto es un párrafo”>kate<p>

Los atributos siempre deben en ir entre comillas: <p title=”Esto es un párrafo”>kate<p>

<hr> me crea una línea horizontal. La puedo poner debajo o encima de una img o un párrafo. En cualquier sitio la puedo poner.

<meta charset="UTF-8"> Esta etiqueta se pone en la cabeza del HTML y sirve para mostrar tíldes y Ñ en la web.

PÁRRAFOS HTML

Se escriben con las etiquetas <p></p> Ejemplo: <p>Esto es un párrafo</p>

El uso de saltos de línea en Html

Se usa la eiqueta <br> Ejemplo:

<p>Esto es <br>un párrafo</p>

Etiqueta pre

<p>La etiqueta pre conserva espacios y saltos de línea(No sería necesario usar <br>):</p>

<pre>

Katerin rua pareja

</pre>

Estilos HTML

<p>I am normal</p>

Color de fondo
<body style="background-color:powderblue;">

Fuente del texto

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

Tamaño del texto

<h1 style="font-size:300%;">This is a heading</h1>

Alineación del texto

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

Resaltar texto <mark>

<h2>HTML <mark>Marked</mark> Formatting</h2>

Eliminado o tachado de texto con <del>

<p>My favorite color is <del>blue</del> red.</p>

Insertado o subrayado de texto con <ins>

<p>My favorite <ins>color</ins> is red.</p>

Formatear o poner más peque y más abajo con <sub>

<p>This is <sub>subscripted</sub> text.</p>

Superínde de texto con <sup>

<p>This is <sup>superscripted</sup> text.</p>

LISTAS HTML

Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
<ul>
<li>Ejemplo 1</li>
<li>Ejemplo 2</li>
</ul>

Las listas ordenadas van dentro de la etiqueta <ol> y de su cierre </ol>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre. Nota. Podemos cambiar la numeración así: <ol type=”A”> Para letras mayúsculas; <ol type=”a”> Para letras minúsculas; <ol type=”I”>Para letra romana mayúscula; <ol type=”i”>Para letra romana minúscula.
<ol>
<li>Ejemplo 1</li>
<li>Ejemplo 2</li>
</ol>

Para invertir la numeración usamos: <ol type=”A” reversed=”reversed”>

Listas con <dl> los elementos no se indican con número, símbolos ni letras, sino con un aumento en el margen izquierdo. Cada término de la lista se define con <dt>, cada descripción de un término se define con <dd>
<dl>
<dt>Ejemplo 1</dt>
<dd>Descripción de ejemplo1</dd>
<dt>Ejemplo 2</dt>
<dd>Descripción de ejemplo 2</dd>
</dl>

ENLACES

Los enlaces llevan la etiqueta <a></a>

Enlace

Destino

Enlace extadocumental Enlace a un punto en otro documento

<a href=”pagina.html#nombre”>…</a>

Inspiración: Diseño web, fotografía, ilustración y tendencias
-www.webcreme.com
-www.webdesign-inspiration.com/

MÓDULO 3

Dominios: Antes de subir nuestra página a internet, debemos verificar si el nombre de dominio (katerua.com) está disponible. Vamos a Google y ponemos: TCP ICANN (https://whois.icann.org/es/descripci%C3%B3n-t%C3%A9cnica). Allí nos damos cuenta si está disponible o ya otra persona/empresa lo posee.

WHOIS es un protocolo que se utiliza para efectuar consultas en una base de datos que permite determinar el propietario de un nombre de dominio o una dirección IP en Internet.

Guía principiante para nombres de dominio

¿Cómo publicar un sitio web?

En estos videos podrás encontrar información más detallada sobre cómo publicar un sitio web.
Alojamiento (Hosting) 1 Alojamiento (Hosting) 2 Alojamiento (Hosting) 3

Lo primero es tener un nombre de dominio.
Alojamiento. Se refiere al lugar que ocupa una página web.

En Hostinger podrás crear tu sitio web, dominio y alojamiento, completamente gratis o también pagar por algunos paquetes más garantizados.Aunque este no está disponible por el momento para Colombia; así que usaremos 000webhost.com En el siguiente video podrás ver cómo se utiliza Sitiowebcon000webhost

Servicios de alojamiento gratis más populares:
Hostinger: http://www.hostinger.es/
Free Web Hosting: http://www.000webhost.com/
x10Hosting: https://www.x10hosting.com/
Free Web Hosting Area: http://www.freewebhostingarea.com/

Para publicar un sitio web debemos de tener nuestro dominio y alojamiento, en este caso lo hemos creado en 000webhost, que nos permite subir nuestro sitio web de manera gratuita.

Para que nuestra página esté en la web debemos usar un programa de transferencia de archivos, FTP (copiar nuestros archivos que conforman la página web). Usaremos un programa de código abierto FileZilla. (Si creaste tu hosting en ooowebhost este paso te lo evitas, ya que esta página te deja subir los archivos dirextamente).Mira el siguiente video Cliente FTP

También podemos remplazar estos programas,( para así evitar instalar programas en nuestro ordenador) por plataformas online de Cliente de FTP que nos permite la misma función. Como es el caso de Net2ftp. En el siguiente video podrás ver detalladamente cómo usar este programa y realizar la copia de nuestros archivos para nuestra página web. Cliente FTP online

FORMULARIOS

Métodos de envío, GET y POST

GET: Es el método que usamos para navegar. Datos visibles, limitada, favoritos. Ej. Formulario de búsqueda. <form method="get"> </form>

POST: Es más seguro. Datos no visibles, sin límite, ficheros. Ej. Formulario de registro.

Etiquetas para formularios

-form; -input; -selet; -textarea; -label; -fieldset.

<input.../> (input no tiene etiqueta de cierre)texto, casillas de verificación, casillas de opción (radio),l archivos, texto enmascarado (password), ocultos, botones.

Atributos de <input.../>

name: texto, nombre del campo para el envío. Ej. <input name="email"/>

type:

text: texto (maxlength: número de caracteres; size: tamaño de campo; value)
checkbox: casilla de verificación <input type="checkbox" name="temas"/> <input type="checkbox" value="html"/>
checked: <input type="checkbox" checked="checked"/>
radio: casilla de opcion (radio)
file: subir fichero. <input type="file" accept="image/gif"/>
password: texto enmascarado
hidden: campo oculto
button: botón
submit: botón de enviar
image: imagen como botón de enviar
reset: botón de limpiar

El atributo checked se usa para indicar que el elemento está seleccionado

Para el envío de archivos es necesario que la etiqueta form sea así:

disabled: Deshabilita el campo para que no pueda ser utilizado

readonly:. Funciona similar a disabled, pero poniéndolo tipo texto podría seleccionar y copiar el texto.

Ejemplo:


<!DOCTYPE html>

<html>

<head>

 <title>Formulario de registro - Mi web</title>

 <meta charset="UTF-8">

</head>

<body>
<h1>Formulario de registro</h1>
<form action="index.html" method="get">
<p>
Nombre: <input type="text" name="nombre" maxlength="50"/> <br>
</p>

<p>
Apellidos: <input type="text" name="apellidos" maxlength="50"/> <br>
</p>
<p>
Sexo: <input type="radio" name="sexo" value="femenino"/>Femenino <br>
</p>
<p>
<input type="radio" name="sexo" value="masculino"/>Masculino <br>
</p>
<p>
Correo electrónico<input type="text" name="correo" maxlength="100"/> <br>
</p>
<p>
<input type="checkbox" name="info" checked="checked" />Deseo recibir información sobre novedades y ofertas <br>
</p>
<p>

<input type="checkbox" name="condiciones"/>Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre
protecciónn de datos <br>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>

</form>
</body>

</html>

Quedaría así:

select

Permite listas desplegables y listas de selección múltiple

Atributos de select

name; multiple="multiple"

Etiquetas

Para definir cada una de las opciones de la listas usamos la etiqueta option.Ejemplo:

<select> (al añadir multiple, <select multiple="multiple"> podemos seleccionar varios archivos de la lista)

HTML

</option>

CSS

</option>

</select>

Para listas con muchos elementos usamos optgroup

<select>

<optgroup label="HTML">

<option value="tables">Tablas</option>

<option value="forms">Formularios</option>

</optgroup>

<optgroup label="CSS">

...

</select>

Cajas de texto
<textarea cols="20" rows="2">
Cuando tengamos mucho texto, esta opción nos creará un scroll

Etiqueta label
representa una etiqueta para un elemento en una interfaz de usuario.
Agrupa elementos de un formulario que están relacionados; dibuja un marco alrededor de los campos.<form>
<label for="html">HTML</label>
<input type="radio" name="tema" id="html" />
<br />
<label for="css">CSS</label>
<input type="radio" name="tema" id="css" />
</form>

<legend> es un tipo de subtítulo para cada label. Ejemplo:

<fieldset><legend>Perfil</legend>
Nombre: <input type="text"/><br />
Email: <input type="text"/><br />
</fieldset>
<fieldset><legend>Temas</legend>
<input type="checkbox"/>HTML
<input type="checkbox"/>CSS
</fielset>

HTML

No hay comentarios:

Publicar un comentario