Scribd
Cargar
84 vistas

Bases de HTML y CSS

Este documento describe las bases de HTML y CSS. Explica que HTML es el lenguaje de marcado más extendido para crear páginas web y que CSS se utiliza para dar estilos a esas páginas. También proporciona detalles sobre cómo crear elementos como encabezados, párrafos, enlaces, imágenes y listas en HTML, y cómo crear hojas de estilo CSS para aplicar formato.

Cargado por

eee
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
84 vistas

Bases de HTML y CSS

Este documento describe las bases de HTML y CSS. Explica que HTML es el lenguaje de marcado más extendido para crear páginas web y que CSS se utiliza para dar estilos a esas páginas. También proporciona detalles sobre cómo crear elementos como encabezados, párrafos, enlaces, imágenes y listas en HTML, y cómo crear hojas de estilo CSS para aplicar formato.

Cargado por

eee
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 20

Bases de HTML y CSS

Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un


documento que, junto con el texto, incorpora etiquetas o marcas que
contienen información adicional acerca de la estructura del texto o su
presentación. El lenguaje de marcas más extendido es el HTML (HyperText
Markup Language, lenguaje de marcado de hipertexto), fundamento del
World Wide Web (entramado de comunicación de alcance mundial).
Los lenguajes de marcado suelen confundirse con lenguajes de
programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado
no tiene funciones aritméticas o variables, como sí poseen los lenguajes de
programación. Históricamente, el marcado se usaba y se usa en la industria
editorial y de la comunicación, así como entre autores, editores e impresores.

BASES DE HTML Y CSS 1

INTRODUCCIÓN 2

HTML 3

Enlaces, imágenes y listas 5

Listas 7
Listas desordenadas 7
Listas ordenadas 7

CSS 8
Ejemplo 10

MODELOS DE CAJA 11

Ejemplos CSS 11

JQUERY 13

POSICIONAMIENTOS 18

Position: absolute 18

1
Position: relative 18

Position: fixed; 18

Position: z-index; 18

Introducción
Para realizar prácticas de HTML y CSS se utilizara el editor de código Brackets,
que se puede descargar desde www.brackets.io.

Para trabajar de forma más cómoda se instalara desde el instalador los


siguientes pluggins:

 Pestañas-Trabajando cómodamente
 Indent Guides
 Minimap (Sanko Anton)
 Brackets Snippets (by edc)
 Overscroll
 Display shorcuts
 Emmet (atajos con la tecla TAB)

Desde Ayuda—Mostrar atajos de teclado (abajo del todo) se deshabilitara el


comando Alt+1 y se guardara el archivo.

Para empezar se creará una carpeta que contenga todo lo que queramos que
forme parte de nuestra página web, en el programa se seleccionara esta
carpeta desde la opción abrir carpeta, en archivo. El archivo se le llamara
Index.html.

2
HTML
- Primero antes que nada se tendrá que especificar el tipo de archivo con
el que vamos a trabajar, como se muestra a continuación:

<!DOCTYPE html>

Después de tendrá que especificar la etiqueta:

<html> </html>

La siguiente etiqueta sirve para especificar el idioma en el cual vamos a


trabajar:
<html lang="es"> </html>

La siguiente etiqueta servirá para especificar texto en la cabecera del


documento:
<head> Texto </head>

La siguiente etiqueta sirve para especificar un nombre en la pestaña:

<title> Texto</title>

La siguiente etiqueta sirve para escribir el cuerpo de nuestro documento


como párrafos imágenes enlaces etc.:

<body>Texto</body>

La siguiente etiqueta sirve para poder escribir caracteres que son


pertenecientes al diccionario español y que no tienen otros idiomas, como
por ejemplo tildes o la letra ñ:

<meta charset="utf-8">
El siguiente ejemplo muestra un par de párrafos (elemento p) encerrados por
un elemento div. El propósito de div en este ejemplo, es el de aplicar un
conjunto de estilos a ambos párrafos en una sola declaración.

3
<div></div>
Ejemplo
<div style="color: #040; font-style: italic">

La siguiente etiqueta sirve para definir el tamaño de la página web que se va


a ver en la pantalla del dispositivo, que se denomina viewport:

<meta name="viewport"

Para no tener que especificar todos los tamaños de todos los dispositivos que
se encuentran actualmente en el mercado, se definirá el ancho de la página
que veremos, como el ancho del dispositivo en el que se verá:

content="width=device-width",

La siguiente etiqueta sirve para evitar que el usuario pueda hacer zoom y que
para que nada más cargue la página se adapte al tamaño del dispositivo:

user-scalable=no, initial-scale=1, maximum-scale=1, minimum-


scale=1>

La siguiente etiqueta sirve para realizar encabezados, donde el tamaño


máximo se representa mediante h1 y el mínimo mediante h6:

<h1>Texto</h1>

La siguiente etiqueta sirve para escribir párrafos:

<p>Texto</p>

Nota: Cuando se redacta un párrafo que contiene diferentes saltos de


línea muchas veces el navegador ignora estos saltos que realizamos en
el editor de código, para evitar esto se acompañara a la etiqueta
anterior de la siguiente etiqueta donde nosotros queramos un salto de
línea:
<br>

4
Para que el navegador refleje el texto de la misma manera que lo escribimos
en nuestro editor se podrá utilizar la siguiente etiqueta, la cual tendrá que
tener entre la etiqueta de apertura <p> y la de cierre </p> la etiqueta <pre>,
con su correspondiente texto:

<pre>
<p>
Texto
</p>
</pre>

Para añadir énfasis (cursiva) a un texto o una palabra se usará la siguiente


etiqueta:

<em>Texto o palabra </em>

Para añadir énfasis (negrita) a un texto o una palabra se usará la siguiente


etiqueta:

<strong>Texto o palabra </strong>

La siguiente etiqueta sirve para resaltar palabras en negrita:

<b>Texto</b>

Enlaces, imágenes y listas

(Todos los documentos se tendrán que guardar en la misma carpeta)

El siguiente código sirve para poner enlaces a páginas web:

<a href="Enlace página web "> Texto que se atribuirá a este enlace </a>

Para que este enlace se abra en otra pestaña se utilizara la siguiente etiqueta:

<a href="Enlace página web " target=”_blank”> </a>


5
Para abrir otra página ya creada en HTML se utilizará la siguiente etiqueta:

<a href="Nombre pagina HTML "> </a>

Para abrir otra página ya creada en HTML (guardada en una carpeta) se


utilizará la siguiente etiqueta:

<a href="Nombre carpeta/Nombre archivo "> </a>

Imágenes (en HTML y no CSS)


La siguiente etiqueta sirve para insertar imágenes:

<img src="Nombre imagen.Extension">

Para modificar la anchura y altura de la imagen se utilizaran las siguientes


etiquetas, por ejemplo anchura 50 y altura 200:

<img src="Nombre imagen.Extension" width=”50” height=”200”>

Esta etiqueta sirve en caso de que el navegador no encuentre la imagen


anterior, donde se sustituirá esa imagen no encontrada por texto:

alt=”Texto que se quiere mostrar”>

Etiqueta que sirve para que cuando el ratón se sitúe sobre la imagen aparezca
texto:

title =”Texto”>

Todo lo anteriormente mostrado quedaría de la siguiente manera con unos


textos de ejemplo:

<img src="1965.jpg" alt="logo no encontrado" title="logo">

6
Listas
- Estas etiquetas se utilizan para realizar listas.

Listas desordenadas

Para realizar listas desordenadas se utilizara la siguiente etiqueta:

<ul> </ul>

Para añadir texto a estas listas se deberá de hacer de la siguiente manera:

<ul>
<li>
Texto
</li>
</ul>

Para añadir un enlace a estas listas se realizará de la siguiente manera:

<li>
<a href=”Enlace “>Texto de la lista</a>
</li>

Listas ordenadas
- Para realizar listas ordenadas, mediante números, se utilizara la
siguiente etiqueta:

<ol> </ol>

En ambas listas también se pueden insertar sub-listas dentro de las listas de


la siguiente manera:

<ul>

7
<li>
<ul>
<li>
Texto sub-listas
</li>
</ul>
</li>
</ul>

Para escribir estas etiquetas de forma un poco más rápida se podrá escribir
de la siguiente manera:

ul>li*4>a

Lo anterior quiere decir que se creara una etiqueta ul (una de apertura y otra
de cierre), dentro de esta etiqueta se crearán 4 etiquetas li (de apertura y de
cierre) y cada una contendrán una etiqueta a. Seguido de lo anterior se
tendrá que presionar la tecla TAB para que surta efecto.

CSS
- Permite dar diferentes estilos al nuestra página web.

Lo primero que hay que hacer es crear un archivo nuevo denominado


estilos.css. Para crear estilos CSS se trabajara en esta nueva hoja, junto a la de
HTML.
La sintaxis de CSS es la siguiente:

Selector {Propiedad:valor;}

Selector: El elemento al que se va a aplicar el estilo.


Propiedad: Que propiedad se va a modificar.
Valor: Que valor se le dará a la propiedad.

8
La siguiente etiqueta sirve para establecer un color para la etiqueta
llamada h1, ubicada en la hoja HTML:

h1 {color: red;}

Nota: Siempre se ha de cerrar el estilo mediante ;

Para poder aplicar los estilos de CSS a nuestro documento web HTML hay que
enlazar ambas hojas, es decir, insertar un enlace en el documento HTML que
enlazará con los estilos que nosotros hayamos definido en nuestra hoja CSS
y que queremos que se apliquen a nuestro HTML. Esto se realizará mediante
la siguiente etiqueta en nuestra hoja HTML:

<link rel="stylesheet" href="Nombre hoja.css">

Para aplicar estilos a un elemento dentro de otro se utilizara la siguiente


etiqueta:

p a {color: red;} (Selector descendente)

que quiere decir que se van a seleccionar todas las etiquetas a que se
encuentren dentro de las etiquetas p.

La siguiente etiqueta sirve para insertar sombras:

.elemento {
box-shadow: 2px 2px 5px #999;
}

La siguiente etiqueta sirve para agrupar varios elementos (en HTML)

<h1 class="Nombre clase"> o <p class=”Nombre clase”>

La siguiente etiqueta sirve para agrupar un elementos (en CSS)

.rojo {color: red;}

9
Lo anterior quiere decir que todos los elementos que estén dentro de la clase
rojo (definido en el HTML) se le darán los valores especificados en CSS.

Para aplicar estilos a un único elemento se realiza de la siguiente


manera:

En HTML
<h2 id="Nombre"> o <p id=”Nombre”>
En CSS
#Nombre {
Color: Green;
}

Nota: Para que lo anterior surta efecto se tiene que tener en cuenta
que los nombres han de ser los mismos, tanto en HTML como en CSS
para enlazarlos.

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID
selector is a name preceded by a hash character (“#”).

hspace o vspace sirven para separar de la imágenes en horizontal o


vertical

hspace= "5px";

Ejemplo

h2{
padding:20px;
text-align:center;
}
h2, ul{
background:aquamarine;
}

10
Para justificar texto a ambos lados

<p style="text-align:justify;">texto justificado...</p>

Modelos de caja

Todos los elementos en una página web son rectángulos, la imágenes los
vínculos, las cabeceras, los párrafos etc.

Margin: 50px 45px 10px 25px (sentido horario)

Margin: Up Right Down Lef

Ejemplos CSS

h1{
background:orange;
padding:20px;
color:white;
border:5px solid black;

11
}

p{
background:#9E82F0;
padding:10px;
font-size:20px;
border:5px dashed red;
}

a{
background:green;
color:white;
padding:7px;
text-decoration:none;
}
ul{
font-size: 20px;
list-style: none;
padding:0;
}

.contenedor{
position:relative;
padding-bottom:25em;

}
.contenedor2{
padding-bottom: 50em;
position: relative;
z-index:100px;
}

.fixed{
background:aqua;
padding:20px;

position:fixed;
top:0;
12
lef:0px;
width: 100%;

Jquery
La característica más importante quizás del jQuery es que permite que los
elementos de una página web cobren vida, hagan algo más que simplemente
estar ahí, como cosas estáticas, quietas, sosas, bien dándoles movimiento,
giros, cambios de tono o dandoles sensación de transparencia, etc, etc. Para
esto es lógico pensar que los elementos han de existir, han de estar ahí en la
página cuando el navegador recibe las ordenes de jQuery.

Qué ocurriría si el navegador recibe la orden de mover cierta capa si ésta aún
no se ha cargado? Seguro que tendremos algun tipo de error de esos que no
gustan nada a nuestros visitantes. Ten en cuenta que el navegador,
normalmente, va mostrando los elementos conforme los va cargando, por lo
que es posible que ocurra esto que os comento.

Para evitarlo podemos darle una orden antes de que empiece a actuar el
jQuery. Podemos indicar al navegador del visitante que no empiece a ejecutar
el código jQuery hasta que no haya cargado al menos el Html. En ese
momento ya están todos los elementos a la vista y no nos va a ocurrir el fallo
aquél.

13
Para conseguir esto y, es una cosa que podríamos hacer siempre y dejarla ya
en nuestra plantilla si es que la tenemos, bastaría con añadir el siguiente
código a nuestras páginas web:

<script>
$(document).ready(function(){ ORDENES EN JQUERY });
</script>

Aún no sabemos descifrar esta línea tan rara, pero si la lees tranquilamente
podrías adivinar que indica al documento (document, la página web) que
cuando esté preparada o cargada (ready) realice lo que hay entre los
corchetes { y }.

Te muestro ahora la estructura completa de una página web sencilla (y tan


sencilla, como que no tiene nada dentro...) con el código, también sencillo
(mmm...) del jQuery para que veas dónde va el último código que te he
mostrado:

<html>

<head>

<title>Ejemplo jQuery</title>

<script type="text/javascript" src="mijquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){ });

</script>

</head>

<body>

Casi ná

</body>

14
</html>

Si copias este código en un archivo, lo llamas index, con extensión .html, y le


haces doble clic para abrirlo con tu navegador, verás un gran resultado... o
quizás no tanto, aún, je je je. Eso sí, recuerda colocar en esa misma carpeta el
archivo mijquery.js del que hablamos al principio de estas lecciones, oki?

Los siguientes pasos serán, por un lado añadir más elementos a la web.
Elementos Html me refiero, tales como párrafos, capas, listas, etc, etc. Una
vez tengamos unos pocos para aplicarles jQuery a modo de ejemplos, iremos
añadiendo ordenes jQuery dentro de los corchetes de la línea $
(document).ready(function(){ }); Esas ordenes serán las que el navegador
ejecutará sobre los elementos que nosotros queramos. Sencillo, no? Pues lo
es!

Aún podemos hacer una cosilla para aligerar ese archivo Html de ejemplo. Se
trata de retirar toda la parte de código jQuery, y colocarlo en un archivo
aparte que podríamos llamar funciones.js por ejemplo. De ese modo al abrir
el archivo Html con un editor (con el block de notas por ejemplo, o Notepad),
lo veríamos todo más clarito. Lo hacemos?

Para separar el código jQuery en un archivo aparte, basta con añadir una
línea similar a la que pusimos inicialmente para el archivo mágico aquél, solo
que en esta ocasión colocariamos el nombre de este segundo archivo,
funciones.js.

Aprovechando ya, hacemos lo mismo para la futura hoja de estilos css. Esta
hoja la vamos a llamar estilos.css y con esta última llamada el código Html
anterior nos queda así:

<html>
<head>
<title>Ejemplo jQuery</title>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<link type="text/css" href="estilos.css" media="all" rel="stylesheet" />
</head>
<body>
Casi ná
15
</body>
</html>

Y el contenido de funciones.js sería, por ahora, este:

$(document).ready(function()
{

});

Crea ya también el archivo estilos.css en esa misma carpeta, sin nada de


contenido aún, es decir, vacio. Después edita con el mismo block de notas el
archivo index.html para añadirle algunos elementos básicos, un par de
enlaces, por ejemplo, en puro y duro html.

<html>
<head>
<title>Ejemplo jQuery</title>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<link type="text/css" href="estilos.css" media="all" rel="stylesheet" />
</head>
<body>
<div id="contenido">
<h1>Titular de mi web</h1>
<p>Este es el primer párrafo de mi <a href="#">web</a>. Espero que me
apliquen un montón de trucos estos webmasters del universo</p>
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
</ul>
<li>Cuarto</li>
</ul>
<p>Se acabó el contenido por el momento. <a href="#">Adios!</a></p>

16
</div>
</body>
</html>

Espero que ya te leyeras el curso de Html y el curso de CSS. Si no lo hiciste


aún estás a tiempo, pues acá no voy a poder deternerme en detalle sobre
esos códigos. Solo te llevará unas muy poquitas horas y verás estas lecciones
mucho más claras. En cualquier caso, como ves (como deberías ver....) es una
página web bien sencillita.

En la cabecera aparecen las tres líneas que llaman respectivamente al archivo


mágico que contiene las definiciones que usaremos durante el curso, al
archivo funciones.js donde insertaremos lo que queremos que hagan los
elementos de la web y, la famosa hoja de estilos, con la que daremos un
toque de color a todo esto.

Posteriormente, ya en el body del archivo, nos encontramos con una capa


que lo engloba todo. Un titular h1, un párrafo inicial de introdución, una lista
multiple (una lista con otra lista dentro, para hacer subniveles) y un último
párrafo de despedida.

Y por otro lado, tendríamos que indicar también en el archivo funciones.js,


que la acción va dirigida no a todos los enlaces (etiquetas a) sino tan solo al
identificado como "enlacetipocctw". Esto se logra con este codigo:

$(document).ready(function()

$("a#enlacetipocctw").click(function(evento)

alert("Te diriges a una gran página, CCTW!");

});

});

17
Si modificamos tal que así, la acción definida en el archivo funciones.js solo se
aplicará a los enlaces con ese tipo de estilo. Por supuesto, si en lugar de
definirlo con un id, hubieramos definido una clase de estilo, con
class="enlacetipocctw" en el Html, en el archivo funciones.js la modificación
habría tenido que ser así:

$(document).ready(function()

$("a.enlacetipocctw").click(function(evento)

alert("Te diriges a una gran página, CCTW!");

});

});

Posicionamientos

Position absolute, fixed, relative y z-index.

Position: absolute; posicionar un objeto respecto a un objeto anterior


ya posicionado.

Position: relative; posicionar un objeto respecto a su posición original.


Ej.: position:relative; top:25px; lef: 35px;

Position: fixed; posicionar un objeto respecto al margen superior


izquierdo de la página:

Position: z-index; sirve para posicionar un objeto encima o debajo de


otro, siendo el que tiene mayor z-index el que quedará por encima.

18
Para centrar un texto en CSS:

h2{
padding:20px;
text-align: center;
}
h2, ul{
background: aquamarine;
}

<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi pagina</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", user-
scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Posicionamiento</h1>
<img src="th.jpg" width="500" height="400">
<h2>Valores de posición</h2>
<ul>
<li>Static (No posicionado)</li>
<li class="relative">Relative (Posicionado)</li>
<li class="absolute">Absolute (posicionado)</li>
<li class="fixed">Fixed (posicionado) </li>
</ul>
<h3>Cuando un elemento está posicionado adquiere 5
propiedades</h3>
<ul>
<li>Top</li>
<li>Bottom</li>
<li>Right</li>
<li>Lef</li>
<li>z-index</li>
</ul>
19
</body>
</html>

20

También podría gustarte