Scribd
Upload
4 views

HTML Y CSS

The document provides HTML and CSS code examples for creating a navigation bar with submenus, various form elements, and validation techniques. It includes instructions for using input types such as text, email, and radio buttons, as well as creating tables and utilizing CSS properties like grid and flex. Additionally, it outlines how to validate user input for forms and includes examples of dropdown menus and checkboxes.

Uploaded by

Marta Blazquez Martin
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML Y CSS

The document provides HTML and CSS code examples for creating a navigation bar with submenus, various form elements, and validation techniques. It includes instructions for using input types such as text, email, and radio buttons, as well as creating tables and utilizing CSS properties like grid and flex. Additionally, it outlines how to validate user input for forms and includes examples of dropdown menus and checkboxes.

Uploaded by

Marta Blazquez Martin
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

FONT-FACE: MIRAR PARA METER NUEVOS TIPOS DE FUENTE DE TEXTO.

TRANSFORMACIONES:
TRANSFORM.

SUBNAVIGATION MENU PARA HACER UN MENU:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<div class="subnav">
<button class="subnavbtn">About <i class="fa
fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#company">Company</a>
<a href="#team">Team</a>
<a href="#careers">Careers</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa
fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#bring">Bring</a>
<a href="#deliver">Deliver</a>
<a href="#package">Package</a>
<a href="#express">Express</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa
fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>
</div>
</div>
<a href="#contact">Contact</a>
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub
navigation menu.</p>
</div>
</body>
</html>

FORMULARIOS HTML:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Radio buttons:
<input type="radio" id="html" name="fav_language" value="HTML">

CHECKBOSEX:
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="submit" value="Submit">
</form>
EL VALUE PUEDE SER: Submit, reset.
PARA VALIDAR UN FORMULARIO:
target="_blank"> -----> Lo envia a otra pagina
target="_set"> -----> Lo envia a la misma pagina

ESTO TE VALIDA O NO ALGO, UN EMAIL O LO QUE SEA:


<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>

ELEMENTOS:
 <input>
 <label>
 <select>-------> Para las opciones: option
Y para que se seleccione una se pone selected.
Se pone multiple para varias elecciones
 <textarea>
<textarea name="message" rows="10" cols="30">The cat was
playing in the garden.</textarea>
 <button>
 <fieldset>
TE PONE UN TITULO EN LA MITAD DE LA TABLA.
 <legend>
 <datalist>
o Das tu las opciones que pueden enviar:
 <input list="browsers" name="browser">
 <datalist id="browsers">
 <option value="Edge">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
 </datalist>
 <input type="submit">
 <output>
 <option>
 <optgroup>

<optgroup label="Swedish Cars">


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
TE DA OPCIONES POR EJEMPLO EN COCHES: Alemanes, Suecos, etc.

input type="password"
TE DA LAS OPCIONES DE EMAIL QUE TEINES PARA QUE ELIJAS.
COLOR PICKET, eliges que color quieres usar
Date Field Restrictions: Poner una restrincion en la fecha.

PARA CREAR UN EMAIL Y VALIDARLO:


<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit">

PARA VALIDAR UN TELEFONO:


<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-
[0-9]{3}">
Te obliga a que le formato sea: Format: 123-45-678
Para poner la hora: <input type="time" id="appt" name="appt">
Para poner una url :
<input type="url" id="homepage" name="homepage">
Te pide la semana: <input type="week" id="week" name="week">

<input type="tel" id="phone" name="phone" placeholder="123-45-678"


pattern="[0-9]{1,3}-[0-9]{2}-[0-9]{3}" required><br><br>

Te permite meter de 1 a 3.

{A-Za-z0-9} ---> Te permite letras y números.


(/^([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\

REGXPR

MDN WEB DOCS clases de caracteres TODAS LAS VLIDACIONES CON


LETRAS
MANZ.DEV  TODAS LAS VALIDACIONES CON NUMEROS

COMO RESOLVER UNA TABLA:


<table>
<tr>
<th>Pais</th> --->LAS PALABRAS VAN EN NEGRITA
<th>2000</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>20013</th>
</tr>
<tr>
<td>UE(27 paises)</td>
<td>8.9</td> ----> Palabras van normal
<td>8.7</td>
<td>9</td>
<td>9.1</td>
<td>9.3</td>
<td>9</td>
<td>8.7</td>
<td>8.7</td>
<td>8.7</td>
<td>8.7</td>
<td>8.7</td>
<td>8.7</td>
<td>8.7</td>
<td>8.7</td>
</tr>
<tr>
</table>

ROW-GAP PROPERTY
Display: grid
Place content para alinear en el centro
https://www.netlify.com/

MIRAR CSS-GRID

FLEX

You might also like