Estructura bàsica
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Cabeceras
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
Párrafos
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Estructura de un link
<a href="https://www.google.com">This is a link</a>
Estructura de una imagen
<img src=".jpg" alt="google.com" width="100" height="200">
Salto de linea
<p>Esto es<br>a paragraph<br>salto de linea.</p>
Texto preformateado
<pre>
Desarrollo web
</pre>
Style atributo
<tagname style="property:value;">
Color
<body style="background-color:powderblue;">
<p style="background-color:tomato;">This is a paragraph.</p>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fuentes
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Tamaño
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Alineación de texto
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
formatos de elementos html
<b>- Texto en negrita
<strong>- Texto importante
<i>- Texto en cursiva
<em>- Texto enfatizado
<mark>- Texto marcado
<small>- Texto más pequeño
<del>- Texto eliminado
<ins>- Texto insertado
<sub>- Texto subíndice
<sup>- Texto en superíndice
blockquote define cita de otra fuente
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.google.com">
in which they live.
</blockquote>
q paracitas breves
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
abbr define una abreviatura
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
address dirección
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
cite para una obra creativa
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
bdo anulación bidereccional
<bdo dir="rtl">This text will be written from right to left</bdo>
citas en html
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
Color
<h1 style="color:Tomato;">Hello World</h1>
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
Valores rgb
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
hsla(hue, saturation, lightness, alpha)
Style
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Css interno
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Color ,fuentes , tamaños
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
Css externo
<link rel="stylesheet" href="https://www.google.com/html/styles.css">
Links
<a href="url">link text</a>
Target donde abrir documento vinculado
_self- Por defecto. Abre el documento en la misma ventana/pestaña en la que se hizo clic.
_blank- Abre el documento en una nueva ventana o pestaña.
_parent- Abre el documento en el marco principal.
_top- Abre el documento en el cuerpo completo de la ventana.
<a href="https://www.googlels.com/" target="_blank">Hola mundo</a>
Imagen como enlace
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Correo electronico
<a href="alex@example.com">Send email</a>
Boton como enlace
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Titulos de enlace
<a href="https://www.google.com" title="desarrollo web">Visit our HTML Tutorial</a>
Stilos
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Imagenes
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="url" alt="alternatetext">
Width and Heigth
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Formatos de imagenes
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
Map define una imagen de mapas
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Forma
rect- define una región rectangular
circle- define una región circular
poly- define una región poligonal
default- define toda la región
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Area de mapa javascript
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Etiquetas imagen html
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
<p style="background-image: url('img_girl.jpg');">
No repeat
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Cover cubra todo el elemento
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Estirando el fondo
background-size: 100% 100%;
Picture ofrece myor flexibilidad
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Formato de imagen
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Imegenes
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
Tablas
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
td celdas
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
tr filas
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
th encabezado de una tabla
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
Etiquetas de la tabla
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Bordes de una tabla
table, th, td {
border: 1px solid black;
}
collapse
border-collapse: collapse;
Fondo
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Border redondos
border-radius: 10px;
Tipos de bordes
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Tamaño de las tablas
<table style="width:100%">
Wudth
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Titulo de la tabla
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
Relleno de las celdas y el contenido
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
Espaciado entre celdas
table {
border-spacing: 30px;
}
Colspan ue la celda abarque varias columnas
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
Rowspan la ceda abarque varias filas
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
Colgroup elemento se utiliza para diseñar columnas específicas de una tabla.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two columns:</p>
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
Col multiples elementos de lacolumna
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
Vacios sin estilo
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
Ocultar columnas
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
W3Schools.com. (n.d.). https://www.w3schools.com/html/default.asp
