HTML5
HTML5
HTML5
Pueden contactarme:
smancebo@itla.edu.do
Requisitos
• Computadora
• Sistema Operativo: Windows o macOs (preferencia)
• Editor de Texto: VSCode (preferencia)
• Navegador: Google Chrome
• NodeJs *
Roadmap
NodeJs
(Brief)
• DOM
• AJAX
• JSON
• jQuery
Javascript
Que es?
• HTML es la sigla de HiperText Markup
Language (Etiquetas).
• Es un lenguaje que se utiliza
comúnmente para establecer la
estructura y contenido de un sitio web,
• Archivos extensión .htm o .html
• Standard guiado por W3C
HTML5
Que es?
<head>
<title>Title of your web page</title>
</head>
<body>HTML web page contents </body>
</html>
HTML5
<div>
Contenido
Contenedores (containers)
</div>
<span>
<table>
Contenido
<tr>
</span>
<td>
columna
</td>
<table>
</tr>
<tr>
</table>
<td>
columna
</td>
HTML5
Titulos (Heading)
<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
HTML5
Label
<label>Este contenido es un label</label>
HTML5
Párrafo(Paragraph)
<p>Este contenido es un párrafo</p>
HTML5
Links(Anchor)
<a href="https://www.geeksforgeeks.org/">GeeksforGeeks</a>
HTML5
Imagenes
<img src="gfg.jpg" width="40" height=“40" />
HTML5
Inputs
<input type="button"> <input type="number">
<input type="checkbox"> <input type="password">
<input type="date"> <input type="radio">
<input type="email"> <input type="submit">
<input type="file"> <input type="tel">
<input type="hidden"> <input type="text">
HTML5
Dropdown (select)
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
HTML5
Formularios (FORM)
<form action="mailto:you@yourdomain.com ">
Name: <input name="Name" value="" size="80"><br />
Email: <input name="Email" value="" size="80"><br />
</form>
HTML5
Listas
Ordenadas No Ordenadas
<ol> <ul>
<li>List item 1</li> <li>List item 1</li>
<li>List item 2</li> <li>List item 2</li>
<li>List item 3</li> <li>List item 3</li>
<li>List item 4</li> <li>List item 4</li>
</ol> </ul>
Práctica
CSS3
Que es?
<html>
<head>
<title>Title of your web page</title>
</head>
<body style='border: 1px solid red'>HTML web page contents </body>
</html>
CSS3
<html>
<head>
<title>Title of your web page</title>
<style type="text/css">
body {
border: 1px solid #999
}
</style>
</head>
<body>HTML web page contents </body>
</html>
CSS3
<html>
<head>
<title>Title of your web page</title>
<link rel="stylesheet" type="text/css" href="somefile.css">
</head>
<body>HTML web page contents </body>
</html>