Página web html/css

PÁGINA WEB CON HTML/CSS

HTML

CSS

Para empezar la página debes usar una estructura que es:

<!DOCTYPE html> HTML moderno

<html>

<head> <meta charset="utf-8"> Ingles <title>Titulo</title>

</head>

<body>

cuerpo de la página

</body>

</html>

Las etiquetas empiezan con un < y terminan con un >

Algunas son:

Insertar imagenes:

<img src=" URL de la imagen" alt="breve descripción de la imagen" height="tamaño de la imagen">

Listas:

<p> </p>:Para descripciones

<h1> <h1/>:título central

<h2> >/h2: Títulos menos importantes o subtítulos

<br>: sirve para poder seguir escribiendo abajo, como un intro.

No enumeradas

Ordenadas

<ol>

<li>escribe aquí</li>

<li>escribe aquí</li>

<li>escribe aquí</li>

</ol>

<ul>

<li>escribe aquí</li>

<li>escribe aquí</li>

<li>escribe aquí</li>

</ul>

Énfasis del texto:

<em>letra cursiva</em>

<strong>letra en negrilla</strong>

Va entre las etiquetas <style> </style>

Color

Propiedades de texto:

Seleccionar contenido por:

-Para cambiar el color de los títulos o contenido se puede usar :

p/h1/h2 {

color: referencia del color ;

}

-Para cambiar el color del fondo se usa

body {

background-color:

referencia de colores hexadecimales ;}

Id:

en <style> </style> se pone:

#hola {

background-color : blue;

}

en <body> </body> se pone:

<h2 id="hola">Tiítulo</h2>

clase:

en <style> </style> se pone:

.sapo {

background-color: yellow;

}

en <body> </body> se pone:

<p class="sapo">hola como estas, <pr>

Vínculos en html:

en <body> </body> se coloca:

<a href="URL">Descripción sobre el link</a>

para abrir el link en una nueva página :

<a target="_blank" href="URL"> Descripción sobre el link</a>

Vínculos internos en html:

<a href="#123">Descripción</a>

<h2 id="123">Descripción</h2>

Tablas en html:

<thead>

<tr>

<th>1. titulo columna </th>

<th>2. titulo columna </th>

</tr>

</thead>

<tbody>

<tr> (primera fila)

<td>1.escribe Fila </td>

<td>2.escribe fila</td>

</tr>

<tr> (segunda fila)

<td>1.escribe Fila </td>

<td>2.escribe fila</td>

</tr>

</tbody>

</table>

<table>

Tablas:

.tabla

{border:solid; borde de la tabla width:650px;

border-collapse:collapse;

estética de la tabla

color:#01F0E8;}

.tabla td{

text-align:center; border:1.5px solid; padding:10px;}

filas de la tabla

.tabla tr:hover{

background-color:#070707;}

títulos de la tabla

.tabla th{

background:#0E1A19;

border:2 px solid;}tamaño borde

columnas de la tabla:

.tabla td:hover{ background-color:blue;} Para la tabla:

Comentarios en html:

comentarios que sólo tu puedes ver en html :

<!--aquí escribes el comentario -->

Font-family:

Font-size:

Sirve para cambiar la fuente de la letra .

style

#hola {

font-family:sans-serif;

}

en body

<p id="hola"> hola como estas </p>

Las fuentes más comunes son: sansserif, serif, fantasy, monospace y cursive

Se puede usar para ajustar el tamaño de la letra ej:

<style>

body {

font-size: 12px;

}

Se usa en px y em

Otras propiedades de texto son:

<style>

.123{

font-weight: bold; (negrilla)

text-decoration: underline;

background-color: yellow;

font-family: fantasy;

font-size: 13px;

font-style: italic; (letra inclinada)

line-height: 1.5em; (espacio entre los renglones)

text-align: center;}

</style>

Para realizar páginas web puedes usar diferentes editores:

En línea: pueden ser

Cloud9.io, nitrous.io, Koding.com.

De escritorio: pueden ser Sublime Text, Coda, Atom, Adobe Brackets.

Software de animación que se pueden incluir en

las páginas HTML:

Macromedia Flash, Pencil, mixeek, HTML5 maker,

hippani animator, radi, entre otros