0% encontró este documento útil (0 votos)

181 vistas60 páginas

HTML

El documento describe las principales etiquetas HTML utilizadas para estructurar y dar formato al contenido de una página web. Explica la función del elemento <head> y las etiquetas que contiene como <title>, <meta>, <style> y <link>. También define elementos como <body>, <header>, <footer>, <div>, <span> y etiquetas para listas, tablas, imágenes, hipervínculos y comentarios.

Cargado por

Sísifo

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

181 vistas60 páginas

HTML

Cargado por

Sísifo

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
</head>
<body>
</body>
</html>

Head
The HTML <head> element is a container for the following elements:

● <title>: Título de la página (aparece en la pestaña), cuando se agrega a favoritos, en

toolbars y cuando se muestra como resultado de una búsqueda.

● <style>: Define style information for a single HTML page.

● <meta>: The <meta> element is typically used to specify the character set, page
description, keywords, author of the document, and viewport settings. The metadata will
not be displayed on the page, but is used by browsers (how to display content or reload
page), by search engines (keywords), and other web services.

○ Define the character set used:

○ Define keywords for search engines:

○ Define a description of your web page:

○ Define the author of a page:

○ Refresh document every 30 seconds:

○ Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
● <link>: Defines the relationship between the current document and an external
resource. The <link> tag is most often used to link to external style sheets:

● <script>: Is used to define client-side JavaScripts.

● <base>: Specifies the base URL and/or target for all relative URLs in a page. The
<base> tag must have either an href or a target attribute present, or both. There can
only be one single <base> element in a document!

Comentarios

Etiquetas
Etiqueta dentro de etiqueta
Atributos
src (source): usar comillas
alt
Anchor
<a href=”url”> </a>
target
<a href="url">
<img src="source" alt="A cute orange cat lying on its back.">
</a>

<span> es como un div pero inline </span>

<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

Lists
Unordered: <ul><li>
Ordered: ol

<ul> Defines an unordered list

<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

list-style-type:square
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
squareSets the list item marker to a square
none The list items will not be marked

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Links
<a href="[Link] is a link</a>

FIELDSET
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name"/></label>
<label for="last-name">Enter Your Last Name: <input id="last-name"/></label>
<label for="email">Enter Your Email: <input id="email"/></label>
<label for="new-password">Create a New Password: <input
id="new-password"/></label>
</fieldset>

image
Atributos de HTML:
src: (source) Link de la imagen.
alt: Descripción de la imagen por si el link falla.
width y height: Ancho y alto.

Propiedades de CSS:
float: (left o right) Mueve la imagen a la izquierda o derecha.
width y height: Ancho y alto.
background-repeat (no-repeat)
background-image
background-repeat (no-repeat)
background-attachment (fixed)
background-size (cover, 100% 100%)

Sintaxis:
<img src="url" alt="alt text" width="#" height="#">
<img src="url" alt="alt text" style="width:#px;height:#px;"> (recomendable)
URL absoluta: Linkea a una imagen externa hosteada en otro website. La URL no incluye el
nombre del dominio. Ejemplo: src="[Link]

URL relativa: Linkea a una imagen hosteada dentro del sitio web.
Si la URL empieza sin slash, será relativa a la página actual.
Ejemplo: src="[Link]".
Si la URL empieza con slash, será relativa al dominio.
Ejemplo: src="/images/[Link]"

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

MAP
Elemento: <map> (define un mapa a partir de una imagen)
<area> define las áreas clickeables

Atributo: usemap (atributo de img) (apunta a un mapa)

<img src="url" usemap="#nombre-mapa">

PICTURE
The <picture> element contains one or more <source> elements, each referring to different
images through the srcset attribute. This way the browser can choose the image that best
fits the current view and/or device.

Each <source> element has a media attribute that defines when the image is the most
suitable.

Note: Always specify an <img> element as the last child element of the <picture> element.

The HTML <picture> element allows you to define different images for different browser
window sizes.
The <img> element is used by browsers that do not support the <picture> element, or if none
of the <source> tags match.

There are two main purposes for the <picture> element:

1. Bandwidth. If you have a small screen or device, it is not necessary to load a large image
file. The browser will use the first <source> element with matching attribute values, and
ignore any of the following elements.

2. Format Support. Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the browser will use the first
format it recognizes, and ignore any of the following elements.

FAVICON
Agregar ícono a la pestaña

<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/[Link]">
</head>

TABLE
<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 (table data)
<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

<table>
<caption>Título de tabla</caption>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

BORDERS
table, th, td {
border: 1px solid black;
border-collapse: collapse; (evita doble borde)
border-radius: 10px; (redondear bordes)
border-color: #96D4D4;
}

colspan & rowspan = merge cells

tr:nth-child(even) {
background-color: #D6EEEE;
}

td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

The <colgroup> element should be used as a container for the column specifications.

Each group is specified with a <col> element.

The span attribute specifies how many columns that get the style.

The style attribute specifies the style to give the columns.

width property
visibility property
background properties
border properties

HIPERLINKS
<a href="url">link text</a>
Se puede usar title:
<a href="[Link] title="Go to W3Schools HTML section">Visit
our HTML Tutorial</a>
The target attribute can have one of the following values:
● _self - Default. Opens the document in the same window/tab as it was clicked
● _blank - Opens the document in a new window or tab
● _parent - Opens the document in the parent frame
● _top - Opens the document in the full body of the window
<a href="[Link] target="_blank">Visit W3Schools!</a>

Absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL
(without the "[Link] part):
Link en imagen:
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Link a mail:
Use mailto: inside the href attribute to create a link that opens the user's email program
(to let them send a new email):
<a href="[Link] email</a>
Botón:
<button onclick="[Link]='[Link]'">HTML Tutorial</button>

● Use the <a> element to define a link

● Use the href attribute to define the link address
● Use the target attribute to define where to open the linked document
● Use the <img> element (inside <a>) to use an image as a link
● Use the mailto: scheme inside the href attribute to create a link that opens the
user's email program

Bookmarks

<h2 id="C4">Chapter 4</h2>

<a href="#C4">Jump to Chapter 4</a>
<a href="html_demo.html#C4">Jump to Chapter 4</a> (bookmark en otra página)
● Use the id attribute (id="value") to define bookmarks in a page
● Use the href attribute (href="#value") to link to the bookmark
Line break
<p>This is a <br> paragraph with a line break.</p>

Title: muestra info al posar el cursor sobre el elemento.

<p title="I'm a tooltip">This is a paragraph.</p>

Horizontal rule

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as
a horizontal rule.

Preformatted text
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

<p> Defines a paragraph

<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text

<body style="background-color:powderblue;">
<p style="font-family:courier;">This is a paragraph.</p>
<p style="font-size:160%;">This is a paragraph.</p>
<p style="text-align:center;">Centered paragraph.</p>

Use the style attribute for styling HTML elements

Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
<b> - Bold text
The HTML <b> element defines bold text, without any extra importance.
<strong> - Important text
The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
<i> - Italic text
The HTML <i> element defines a part of text in an alternate voice or mood. The content
inside is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc.

<em> - Emphasized text

The HTML <em> element defines emphasized text. The content inside is typically
displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal
stress.
<mark> - Marked text
The HTML <mark> element defines text that should be marked or highlighted:
<small> - Smaller text
The HTML <small> element defines smaller text:
<del> - Deleted text
The HTML <del> element defines text that has been deleted from a document. Browsers
will usually strike a line through deleted text:
<ins> - Inserted text
The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:
<sub> - Subscript text
The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript text can
be used for chemical formulas, like H2O:
<sup> - Superscript text
The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW [1]:
<abbr> Defines an abbreviation or acronym

The HTML <address> tag defines the contact information for the author/owner of a
document or an article.
The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always
add a line break before and after the <address> element.

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
<blockquote cite ="[Link]
</blockquote cite>
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a
movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
The HTML <q> tag defines a short inline quotation.
Browsers normally insert quotation marks around the quotation.
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems and
search-engines.
Tip: Use the global title attribute to show the description for the abbreviation/acronym
when you mouse over the element.
● Use the HTML style attribute for inline styling
● Use the HTML <style> element to define internal CSS
● Use the HTML <link> element to refer to an external CSS file
● Use the HTML <head> element to store <style> and <link> elements
● Use the CSS color property for text colors
● Use the CSS font-family property for text fonts
● Use the CSS font-size property for text sizes
● Use the CSS border property for borders
● Use the CSS padding property for space inside the border
● Use the CSS margin property for space outside the border

Layout

Responsive text size

<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm
wide, 1vw is 0.5cm.
Form
Contiene <label>’s e <input>’s que pueden tener los siguientes atributos:

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such
as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.

<label for="nombre">Nombre:</label><br />

<input type="text" id="nombre" name="nombre"><br />
Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)

<input type="submit">Displays a submit button (for submitting the form)

<form action="/action_page.php" target="_blank" autocomplete="on" method=”get/post”>

<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>

<input type="button" value="texto botón"> Displays a clickable button

Form Attributes

accept-charset Specifies the character encodings used for form submission

action Specifies where to send the form-data when a form is submitted
autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the
server (only for method="post")
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form

Form Elements
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

Select

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size=”x” multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Textarea

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

Button

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Fieldset

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Datalist

Output

<form action="/action_page.php"
oninput="[Link]=parseInt([Link])+parseInt([Link])">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML INPUT TYPES
Text
defines a single-line text input field
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Password
defines a password field
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Submit
<input type="submit">
defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<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>

Reset
Defines a reset button that will reset all form values to their default values.
<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">
<input type="reset">
</form>

Radio
defines a radio button.
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

Checkbox
defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

button
defines a button:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

color
used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.

<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
date
Is used for input fields that should contain a date. Depending on browser support, a date
picker can show up in the input field.
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Datetime-local
specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

email
is used for input fields that should contain an e-mail address. Depending on browser
support, the e-mail address can be automatically validated when submitted. Some
smartphones recognize the email type, and add ".com" to the keyboard to match email input.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

image
defines an image as a submit button. The path to the image is specified in the src attribute.
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

file
defines a file-select field and a "Browse" button for file uploads.
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

hidden
defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified by users
when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is
submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and can
be edited) using any browser's developer tools or "View Source" functionality. Do not use
hidden inputs as a form of security!

<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

month
allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Not supported in Firefox, Safari, or Internet Explorer 11.

<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

number
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to
5:
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
input restrictions
checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

range
defines a control for entering a number whose exact value is not important (like a slider
control). Default range is 0 to 100. However, you can set restrictions on what numbers are
accepted with the min, max, and step attributes:
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

search
is used for search fields (a search field behaves like a regular text field).
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

tel
is used for input fields that should contain a telephone number.
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

time
allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

url
is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url
input.
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

week
allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

HTML Input Attributes

value
The input value attribute specifies an initial value for an input field:

readonly
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and
copy the text from it).
The value of a read-only input field will be sent when submitting the form!

disabled
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!

size
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel, url, email, and
password.

maxlength
The input maxlength attribute specifies the maximum number of characters allowed in an
input field.
Note: When a maxlength is set, the input field will not accept more than the specified number
of characters. However, this attribute does not provide any feedback. So, if you want to alert
the user, you must write JavaScript code.

min and max

The input min and max attributes specify the minimum and maximum values for an input
field.

The min and max attributes work with the following input types: number, range, date,
datetime-local, month, time and week.

Tip: Use the max and min attributes together to create a range of legal values.

multiple
The input multiple attribute specifies that the user is allowed to enter more than one value in
an input field.
The multiple attribute works with the following input types: email, and file.
pattern
The input pattern attribute specifies a regular expression that the input field's value is
checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email,
and password.

Tip: Use the global title attribute to describe the pattern to help the user.

<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

placeholder
The input placeholder attribute specifies a short hint that describes the expected value of an
input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email,
and password.

required
The input required attribute specifies that an input field must be filled out before submitting
the form.

The required attribute works with the following input types: text, search, url, tel, email,
password, date pickers, number, checkbox, radio, and file.

step
The input step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to create a range of
legal values.
The step attribute works with the following input types: number, range, date, datetime-local,
month, time and week.

autofocus
The input autofocus attribute specifies that an input field should automatically get focus
when the page loads.

height and width

The input height and width attributes specify the height and width of an <input
type="image"> element.

Tip: Always specify both the height and width attributes for images. If height and width are
set, the space required for the image is reserved when the page is loaded. Without these
attributes, the browser does not know the size of the image, and cannot reserve the
appropriate space to it. The effect will be that the page layout will change during loading
(while the images load).

list
The input list attribute refers to a <datalist> element that contains pre-defined options for an
<input> element.
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

autocomplete
The input autocomplete attribute specifies whether a form or an input field should have
autocomplete on or off.

Autocomplete allows the browser to predict the value. When a user starts to type in a field,
the browser should display options to fill in the field, based on earlier typed values.

The autocomplete attribute works with <form> and the following <input> types: text, search,
url, tel, email, password, datepickers, range, and color.
CSS

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)

Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

Simple selectors

Selector Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

[Link] [Link] Selects only <p> elements with class="intro"

* * Selecciona todos los elementos

elemento p Selecciona todos los <p>

elem1,elem2,elem3… p,h1,div Selecciona todos los p, h1, div…

The CSS element Selector

The element selector selects HTML elements based on the element name.

p{
text-align: center;
color: red;
}

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the
class name.

.center {
text-align: center;
color: red;
}

[Link] {
text-align: center;
color: red;
}
solo los párrafo clase center <p class=”center”>

HTML elements can also refer to more than one class.

<p class="center large">This paragraph refers to two classes.</p>

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
*{
text-align: center;
color: blue;
}

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}

Comments
/* This is a single-line comment */
/* This is
a multi-line
comment */

background-image
By default, the background-image property repeats an image both horizontally and vertically.
body {
background-image: url("gradient_bg.png");
}

background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x; /* solo repite en eje x */
}

Showing the background image only once is also specified by the background-repeat
property:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

background-position
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

background-attachment
The background-attachment property specifies whether the background image should
scroll or be fixed (will not scroll with the rest of the page):
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed/scroll;
}

Shorthand property
En lugar de escribir:

body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Podemos escribir:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
It does not matter if one of the property values is missing, as long as the other ones are
in this order. Note that we do not use the background-attachment property in the
examples above, as it does not have a value.

Propiedad Descripción

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls

with the rest of the page

background-clip Specifies the painting area of the background

background-color Sets the background color of an element

background-image Sets the background image for an element

background-origin Specifies where the background image(s) is/are

positioned

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

background-size Specifies the size of the background image(s)

border
border-style
The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).
Note: None of the OTHER CSS border properties (which you will learn more about in the
next chapters) will have ANY effect unless the border-style property is set!

border-width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the
three pre-defined values: thin, medium, or thick:
Cuando se da un valor, éste define todos los bordes.
Cuando se dan dos valores, el primero define top y bot, mientras que el segundo define
L y R.
Cuando se dan tres valores, el primero define top, el segundo define L y R, y, el tercero,
bot.
Cuando se dan cuatro valores, el primero define top, el segundo, R, el tercero bot y el
cuarto L.

border-radius
redondea bordes

Border - Shorthand Property

To shorten the code, it is also possible to specify all the individual border properties in
one property.

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color
margin
All the margin properties can have the following values:

auto - the browser calculates the margin

length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.

auto
You can set the margin property to auto to horizontally center the element within its
container.
The element will then take up the specified width, and the remaining space will be split
equally between the left and right margins.

margin collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is
equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

padding
The CSS padding properties are used to generate space around an element's content,
inside of any defined borders.

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.

% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.

The CSS width property specifies the width of the element's content area. The content
area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added
to the total width of the element. This is often an undesirable result.
To keep the width, no matter the amount of padding, you can use the box-sizing
property. This causes the element to maintain its actual width; if you increase the
padding, the available content space will decrease.
box-sizing: border-box;

height/width
The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.

The height and width properties may have the following values:

auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value

Note: Remember that the height and width properties do not include padding, borders, or
margins! They set the height/width of the area inside the padding, border, and margin of the
element!

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the
width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small
windows.
Note: If you for some reason use both the width property and the max-width property on the
same element, and the value of the width property is larger than the max-width property; the
max-width property will be used (and the width property will be ignored).

height Sets the height of an element

max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element
Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content. The image below illustrates the box
model:

● Content - The content of the box, where text and images appear
● Padding - Clears an area around the content. The padding is transparent
● Border - A border that goes around the padding and content
● Margin - Clears an area outside the border. The margin is transparent
Important: When you set the width and height properties of an element with CSS, you just
set the width and height of the content area. To calculate the full size of an element, you
must also add padding, borders and margins.

outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out".

CSS has the following outline properties:

outline-style
outline-color
outline-width
outline-offset
outline

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's
border, and may overlap other content. Also, the outline is NOT a part of the element's
dimensions; the element's total width and height is not affected by the width of the outline.
width
The outline-width property specifies the width of the outline, and can have one of the
following values:

● thin (typically 1px)

● medium (typically 3px)
● thick (typically 5px)
● A specific size (in px, pt, cm, em, etc)

shorthand

The outline property is a shorthand property for setting the following individual outline
properties:

● outline-width
● outline-style (required)
● outline-color

outline-offset
The outline-offset property adds space between an outline and the edge/border of an
element. The space between an element and its outline is transparent.

text
color
background-color: lightgrey;
color: blue;
text-align
The text-align property is used to set the horizontal alignment of a text. A text can be left or
right aligned, centered, or justified.

text-align: center/right/left/justify;

text-align-last
The text-align-last property specifies how to align the last line of a text.

text-align-last: center/right/left/justify;

direction
The direction and unicode-bidi properties can be used to change the text direction of an
element:
direction: rtl;
unicode-bidi: bidi-override;

vertical-align
The vertical-align property sets the vertical alignment of an element.
vertical-align: baseline/text-top/text-bottom/sub/super;

text-decoration

text-decoration-line
The text-decoration-line property is used to add a decoration line to text.
text-decoration-line: overline/line-through/underline/overline underline/none;

text-decoration-color
The text-decoration-color property is used to set the color of the decoration line.
text-decoration-color: red;

text-decoration-style
The text-decoration-style property is used to set the style of the decoration line.
text-decoration-style: solid/double/dotted/dashed/wavy;
text-decoration-thickness
The text-decoration-thickness property is used to set the thickness of the decoration line.
text-decoration-thickness: auto/5px/25%;

shorthand
The text-decoration property is a shorthand property for:
● text-decoration-line (required)
● text-decoration-color (optional)
● text-decoration-style (optional)
● text-decoration-thickness (optional)

text-transform
The text-transform property is used to specify uppercase and lowercase letters in a text. It
can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word:

text-transform: uppercase/lowercase/capitalize;

Text Spacing

text-indent
The text-indent property is used to especifica la sangría:
text-indent: 50px;

letter-spacing
The letter-spacing property is used to specify the space between the characters in a text.
acepta valores positivos o negativos
letter-spacing: 5px;
letter-spacing: -2px;

line-height
The line-height property is used to specify the space between lines:
line-height: 0.8;

word-spacing
The word-spacing property is used to specify the space between the words in a text.
acepta valores positivos o negativos
word-spacing: 5px;
word-spacing: -2px;

white-space
The white-space property specifies how white-space inside an element is handled. Ajuste de
línea de notepad.
white-space: nowrap;

text-shadow
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow
(2px):

text-shadow: xpx1 ypx1 blur1 color1, xpx2 ypx2 blur2 color2, …;

font
font-family

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: "Times
New Roman".

Tip: The font-family property should hold several font names as a "fallback" system, to
ensure maximum compatibility between browsers/operating systems. Start with the font you
want, and end with a generic family (to let the browser pick a similar font in the generic
family, if no other fonts are available). The font names should be separated with comma.

font-family: "Times New Roman", Times, serif;

Web Safe fonts

Web safe fonts are fonts that are universally installed across all browsers and devices.
However, there are no 100% completely web safe fonts. There is always a chance that a
font is not found or is not installed properly.

Therefore, it is very important to always use fallback fonts.

This means that you should add a list of similar "backup fonts" in the font-family property. If
the first font does not work, the browser will try the next one, and the next one, and so on.
Always end the list with a generic font family name.
The following list are the best web safe fonts for HTML and CSS:

● Arial (sans-serif)
● Verdana (sans-serif)
● Tahoma (sans-serif)
● Trebuchet MS (sans-serif)
● Times New Roman (serif)
● Georgia (serif)
● Garamond (serif)
● Courier New (monospace)
● Brush Script MT (cursive)

Note: Before you publish your website, always check how your fonts appear on different
browsers and devices, and always use fallback fonts!

Commonly Used Font Fallbacks

● Serif
○ "Times New Roman", Times, serif
○ Georgia, serif
○ Garamond, serif
● Sans-serif
○ Arial, Helvetica, sans-serif
○ Tahoma, Verdana, sans-serif
○ "Trebuchet MS", Helvetica, sans-serif
○ Geneva, Verdana, sans-serif
● Monospace
○ "Courier New", Courier, monospace
● Cursive
○ "Brush Script MT", cursive
● Fantasy
○ Copperplate, Papyrus, fantasy

font-style
The font-style property is mostly used to specify italic text.

This property has three values:

● normal - The text is shown normally

● italic - The text is shown in italics
● oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
font-weight

The font-weight property specifies the weight of a font:

font-weight: normal/bold;

font-variant

The font-variant property specifies whether or not a text should be displayed in a small-caps
font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the
converted uppercase letters appear in a smaller font size than the original uppercase letters
in the text.
font-variant: normal/small-caps;

font-size
The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use
font size adjustments to make paragraphs look like headings, or headings look like
paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

Sets the text to a specified size

Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the output is known
Relative size:

Sets the size relative to surrounding elements

Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is
16px (16px=1em).

Setting the text size with pixels gives you full control over the text size
Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

To allow users to resize the text (in the browser menu), many developers use em instead of
pixels.
1em is equal to the current font size. The default text size in browsers is 16px. So, the
default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
In the example above, the text size in em is the same as the previous example in pixels.
However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with older versions of Internet Explorer. The text
becomes larger than it should when made larger, and smaller than it should when made
smaller.

The solution that works in all browsers, is to set a default font-size in percent for the <body>
element:

Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width".

That way the text size will follow the size of the browser window:
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm
wide, 1vw is 0.5cm.

Google Fonts

Just add a special style sheet link in the <head> section and then refer to the font in the
CSS.
<head>
<link rel="stylesheet" href="[Link]
family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>

Note: When specifying a font in CSS, always list at minimum one fallback font (to avoid
unexpected behaviors). So, also here you should add a generic font family (like serif or sans-
serif) to the end of the list.

To use multiple Google fonts, just separate the font names with a pipe character (|), like this:
<link rel="stylesheet" href="[Link]
family=Audiowide|Sofia|Trirong">

Note: Requesting multiple fonts may slow down your web pages! So be careful about that.

Google has also enabled different font effects that you can use.

First add effect=effectname to the Google API, then add a special class name to the element
that is going to use the special effect. The class name always starts with font-effect- and
ends with the effectname.
To request multiple font effects, just separate the effect names with a pipe character (|), like
this:
<head>
<link rel="stylesheet" href="[Link]
family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>

<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow
Effect</h1>

</body>

Font Pairing Rules

Here are some basic rules to create great font pairings:

1. Complement
It is always safe to find font pairings that complement one another.

A great font combination should harmonize, without being too similar or too different.

2. Use Font Superfamilies

A font superfamily is a set of fonts designed to work well together. So, using different fonts
within the same superfamily is safe.
For example, the Lucida superfamily contains the following fonts: Lucida Sans, Lucida Serif,
Lucida Typewriter Sans, Lucida Typewriter Serif and Lucida Math.

3. Contrast is King
Two fonts that are too similar will often conflict. However, contrasts, done the right way,
brings out the best in each font.

Example: Combining serif with sans serif is a well known combination.

A strong superfamily includes both serif and sans serif variations of the same font (e.g.
Lucida and Lucida Sans).

4. Choose Only One Boss

One font should be the boss. This establishes a hierarchy for the fonts on your page. This
can be achieved by varying the size, weight and color.

Below, we have shown some popular font pairings that will suit many brands and contexts.

● Georgia and Verdana

● Helvetica and Garamond
● Merriweather and Open Sans
● Ubuntu and Lora
● Abril Fatface and Poppins
● Fjalla One and Libre Baskerville
● Space Mono and Muli (detectivesco)
● Cinzel and Fauna One (elegante)
● Spectral and Rubik
● Oswald and Noto Sans

Shorthand

The font property is a shorthand property for:

font-style
font-variant
font-weight
font-size/line-height
font-family
Note: The font-size and font-family values are required. If one of the other values is missing,
their default value are used.

Icons
The simplest way to add an icon to your HTML page, is with an icon library, such as Font
Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
All the icons in the icon libraries below, are scalable vectors that can be customized with
CSS (size, color, shadow, etc.)

To use the Font Awesome icons, go to [Link], sign in, and get a code to add in
the <head> section of your HTML page:
<script src="[Link]
crossorigin="anonymous"></script>

To use the Bootstrap glyphicons, add the following line inside the <head> section of your
HTML page:
<link rel="stylesheet"
href="[Link]
[Link]">

To use the Google icons, add the following line inside the <head> section of your HTML
page:
<link rel="stylesheet"
href="[Link]
family=Material+Icons">

links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.

The four links states are:

● a:link - a normal, unvisited link

● a:visited - a link the user has visited
● a:hover - a link when the user mouses over it
● a:active - a link the moment it is clicked

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

The text-decoration property is mostly used to remove underlines from links:

Tipos de cursores
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait

lists

list-style-type

The list-style-type property specifies the type of list item marker.

list-style-type: circle/square/upper-roman/lower-alpha;

The list-style-image property specifies an image as the list item marker:

list-style-image: url('[Link]');

list-style-position
The list-style-position property specifies the position of the list-item markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list item. The
start of each line of a list item will be aligned vertically. This is default:

"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part
of the list item, it will be part of the text and push the text at the start:
The list-style-type:none property can also be used to remove the markers/bullets. Note that
the list also has default margin and padding. To remove this, add margin:0 and padding:0 to
<ul> or <ol>:

Shorthand
When using the shorthand property, the order of the property values are:

list-style-type (if a list-style-image is specified, the value of this property will be displayed if
the image for some reason cannot be displayed)
list-style-position (specifies whether the list-item markers should appear inside or outside the
content flow)
list-style-image (specifies an image as the list item marker)
If one of the property values above is missing, the default value for the missing property will
be inserted, if any.

tables
responsive table
A responsive table will display a horizontal scroll bar if the screen is too small to display the
full content:
Add a container element (like <div>) with overflow-x:auto around the <table> element to
make it responsive:

border Sets all the border properties in one declaration

border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty
cells in a table
table-layout Sets the layout algorithm to be used for a table

display
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible
position
The position property specifies the type of positioning method used for an element.

bottom Sets the bottom margin edge for a positioned box

clip Clips an absolutely positioned element
left Sets the left margin edge for a positioned box
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box

There are five different position values:

● static
● relative
● fixed
● absolute
● sticky
Elements are then positioned using the top, bottom, left, and right properties. However,
these properties will not work unless the position property is set first. They also work
differently depending on the position value.

static
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page

relative
An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause
it to be adjusted away from its normal position. Other content will not be adjusted to fit into
any gap left by the element.

fixed
An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been
located.

absolute
An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the

document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap
elements.

sticky
An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in place
(like position:fixed).
Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix
(see example below). You must also specify at least one of top, right, bottom or left for sticky
positioning to work.

z-index Property
When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be
placed in front of, or behind, the others).

An element can have a positive or negative stack order:

An element with greater stack order is always above an element with a lower stack order.

If two positioned elements overlap each other without a z-index specified, the element
defined last in the HTML code will be shown on top.

overflow
The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.

The overflow property has the following values:

visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
Note: The overflow property only works for block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being
used (even though "overflow:scroll" is set).

visible
By default, the overflow is visible, meaning that it is not clipped and it renders outside the
element's box

hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden

scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the
box. Note that this will add a scrollbar both horizontally and vertically (even if you do not
need it)

auto
The auto value is similar to scroll, but it adds scrollbars only when necessary

overflow-x/y
The overflow-x and overflow-y properties specifies whether to change the overflow of
content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content.

overflow-y specifies what to do with the top/bottom edges of the content.

float
The CSS float property specifies how an element should float.

The float property is used for positioning and formatting content e.g. let an image float left to
the text in a container.

The float property can have one of the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is
default
inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.

clear
The CSS clear property specifies what elements can float beside the cleared element and on
which side.
When we use the float property, and we want the next element below (not on right or left),
we will have to use the clear property.

The clear property specifies what should happen with the element that is next to a floating
element.

The clear property can have one of the following values:

none - The element is not pushed below left or right floated elements. This is default
left - The element is pushed below left floated elements
right - The element is pushed below right floated elements
both - The element is pushed below both left and right floated elements
inherit - The element inherits the clear value from its parent
When clearing floats, you should match the clear to the float: If an element is floated to the
left, then you should clear to the left. Your floated element will continue to float, but the
cleared element will appear below it on the web page.

The clearfix Hack

If a floated element is taller than the containing element, it will "overflow" outside of its
container. We can then add a clearfix hack to solve this problem:
.clearfix {
overflow: auto;
}

The overflow: auto clearfix works well as long as you are able to keep control of your
margins and padding (else you might see scrollbars). The new, modern clearfix hack
however, is safer to use, and the following code is used for most webpages
.clearfix::after {
content: "";
clear: both;
display: table;
}
inline-block
Compared to display: inline, the major difference is that display: inline-block allows to set a
width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with
display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a
line-break after the element, so the element can sit next to other elements.

combinators
A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors,
we can include a combinator.

There are four different combinators in CSS:

descendant selector (space)

The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
div p {}

child selector (>)

The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a <div> element
div>p {}

adjacent sibling selector (+)

The adjacent sibling selector is used to select an element that is directly after another
specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately
following".
The following example selects the first <p> element that are placed immediately after <div>
elements:
div+p {}

general sibling selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements:
div ~ p {}

Pseudo-classes

Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input> element

:disabled input:disabled Selects every disabled <input> element

:empty p:empty Selects every <p> element that has no children

:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> elements that is the first child of its
parent

:first-of-type p:first-of-type Selects every <p> element that is the first <p> element
of its parent

:focus input:focus Selects the <input> element that has focus

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects <input> elements with a value within a

specified range

:invalid input:invalid Selects all <input> elements with an invalid value

:lang(language) p:lang(it) Selects every <p> element with a lang attribute value
starting with "it"

:last-child p:last-child Selects every <p> elements that is the last child of its
parent

:last-of-type p:last-of-type Selects every <p> element that is the last <p> element
of its parent

:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not a <p> element

:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of
its parent

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of
its parent, counting from the last child

:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p>
element of its parent, counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p>
element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p>
element of its parent

:only-child p:only-child Selects every <p> element that is the only child of its
parent

:optional input:optional Selects <input> elements with no "required" attribute

:out-of-range input:out-of-range Selects <input> elements with a value outside a

specified range

:read-only input:read-only Selects <input> elements with a "readonly" attribute

specified

:read-write input:read-write Selects <input> elements with no "readonly" attribute

:required input:required Selects <input> elements with a "required" attribute

specified

:root root Selects the document's root element

:target #news:target Selects the current active #news element (clicked on a

URL containing that anchor name)

:valid input:valid Selects all <input> elements with a valid value

:visited a:visited Selects all visited links

selector:pseudo-class {
property: value;
}

/* unvisited link */
a:link {}
/* visited link */
a:visited {}
/* mouse over link */
a:hover {}
/* selected link */
a:active {}

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
Pseudo-class names are not case-sensitive.

Pseudo-classes and HTML Classes

Pseudo-classes can be combined with HTML classes:
[Link]:hover {}
/* apunta a todos los <a> con class=”highlight” */

div:hover {}
/* apunta a todos los <div> */

first-child
The :first-child pseudo-class matches a specified element that is the first child of another
element.

Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any
element:
p:first-child {}

Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:
p i:first-child {}

Match all <i> elements in all first child <p> elements

p:first-child i {}

Pseudo Elements
A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element
selector::pseudo-element {
property: value;
}

::after p::after Insert content after every

<p> element

::before p::before Insert content before every

<p> element

::first-letter p::first-letter Selects the first letter of

every <p> element

::first-line p::first-line Selects the first line of every

<p> element
::selection p::selection Selects the portion of an
element that is selected by a
user

opacity
The opacity property specifies the opacity/transparency of an element.

The opacity property can take a value from 0.0 - 1.0. The lower the value, the more
transparent:

BOOTSTRAP
Para añadir BOOTSTRAP:
<link rel="stylesheet"
href="[Link]
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/
K68vbdEjh4u" crossorigin="anonymous"/>

You can include Font Awesome in any app by adding the following code to the top of your
HTML:
<link rel="stylesheet" href="[Link]
integrity="sha384-
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">

The i element was originally used to make other elements italic, but is now commonly used
for icons. You can add the Font Awesome classes to the i element to turn it into an icon, for
example:
<i class="fas fa-info-circle"></i>

class="text-primary text-center
Create a Bootstrap Button
Bootstrap has its own styles for button elements, which look much better than the plain
HTML ones.

Create a new button element below your large kitten photo. Give it the btn and btn-default
classes, as well as the text of Like.

<button class="btn btn-default">Like</button>

Create a Block Element Bootstrap Button

Normally, your button elements with the btn and btn-default classes are only as wide as the
text that they contain. For example:

<button class="btn btn-default">Submit</button>

This button would only be as wide as the word Submit.

By making them block elements with the additional class of btn-block, your button will stretch
to fill your page's entire horizontal space and any elements following it will flow onto a "new
line" below the block.

<button class="btn btn-default btn-block">Submit</button>

This button would take up 100% of the available width.

Note that these buttons still need the btn class.

Taste the Bootstrap Button Color Rainbow

The btn-primary class is the main color you'll use in your app. It is useful for highlighting
actions you want your user to take.

Note that this button will still need the btn and btn-block classes.

Call out Optional Actions with btn-info

Bootstrap comes with several pre-defined colors for buttons. The btn-info class is used to
call attention to optional actions that the user can take.
Warn Your Users of a Dangerous Action with btn-
danger
Bootstrap comes with several pre-defined colors for buttons. The btn-danger class is the
button color you'll use to notify users that the button performs a destructive action, such as
deleting a cat photo.

Create a button with the text Delete and give it the class btn-danger.

Note that these buttons still need the btn and btn-block classes.

Use the Bootstrap Grid to Put Elements Side By

Side
Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements
into rows and specify each element's relative width. Most of Bootstrap's classes can be
applied to a div element.

Bootstrap has different column width attributes that it uses depending on how wide the
user's screen is. For example, phones have narrow screens, and laptops have wider
screens.

Take for example Bootstrap's col-md-* class. Here, md means medium, and * is a number
specifying how many columns wide the element should be. In this case, the column width of
an element on a medium-sized screen, such as a laptop, is being specified.

In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like
an extra-small mobile phone screen), and * is the number of columns specifying how many
columns wide the element should be.

Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one
<div class="row"> element, then each of them within a <div class="col-xs-4"> element.

The row class is applied to a div, and the buttons themselves can be nested within it.

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

All jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling.
$("button").addClass("animated bounce");
Note that, just like with CSS declarations, you type a . before the class's name.
$(".well").addClass("animated shake");

Note that, just like with CSS declarations, you type a # before the id's name.
$("#target3").addClass("animated fadeOut")

Now you know three ways of targeting elements: by type: $("button"), by class: $(".btn"), and
by id $("#target1").

In the same way you can add classes to an element with jQuery's addClass() function, you
can remove them with jQuery's removeClass() function.
$("#target2").removeClass("btn-default");

Change the CSS of an Element Using jQuery

We can also change the CSS of an HTML element directly with jQuery.

jQuery has a function called .css() that allows you to change the CSS of an element.

Here's how we would change its color to blue:

$("#target1").css("color", "blue");

This is slightly different from a normal CSS declaration, because the CSS property and its
value are in quotes, and separated with a comma instead of a colon.

Disable an Element Using jQuery

You can also change the non-CSS properties of HTML elements with jQuery. For example,
you can disable buttons.

When you disable a button, it will become grayed-out and can no longer be clicked.

jQuery has a function called .prop() that allows you to adjust the properties of elements.

Here's how you would disable all buttons:

$("button").prop("disabled", true);

Change Text Inside an Element Using jQuery

Using jQuery, you can change the text between the start and end tags of an element. You
can even change HTML markup.
jQuery has a function called .html() that lets you add HTML tags and text within an element.
Any content previously within the element will be completely replaced with the content you
provide using this function.

Here's how you would rewrite and emphasize the text of our heading:

$("h3").html("<em>jQuery Playground</em>");
jQuery also has a similar function called .text() that only alters text without adding tags. In
other words, this function will not evaluate any HTML tags passed to it, but will instead treat
it as the text you want to replace the existing content with.

Remove an Element Using jQuery

Now let's remove an HTML element from your page using jQuery.

jQuery has a function called .remove() that will remove an HTML element entirely

Use appendTo to Move Elements with jQuery

Now let's try moving elements from one div to another.

jQuery has a function called appendTo() that allows you to select HTML elements and
append them to another element.

For example, if we wanted to move target4 from our right well to our left well, we would use:

$("#target4").appendTo("#left-well");

Clone an Element Using jQuery

In addition to moving elements, you can also copy them from one place to another.

jQuery has a function called clone() that makes a copy of an element.

For example, if we wanted to copy target2 from our left-well to our right-well, we would use:

$("#target2").clone().appendTo("#right-well");
Did you notice this involves sticking two jQuery functions together? This is called function
chaining and it's a convenient way to get things done with jQuery.
Target the Parent of an Element Using jQuery
Every HTML element has a parent element from which it inherits properties.

jQuery has a function called parent() that allows you to access the parent of whichever
element you've selected.

Here's an example of how you would use the parent() function if you wanted to give the
parent element of the left-well element a background color of blue:

$("#left-well").parent().css("background-color", "blue")

Target the Children of an Element Using jQuery

When HTML elements are placed one level below another they are called children of that
element.

jQuery has a function called children() that allows you to access the children of whichever
element you've selected.

Here's an example of how you would use the children() function to give the children of your
left-well element the color blue:

$("#left-well").children().css("color", "blue")

Target a Specific Child of an Element Using

jQuery
You've seen why id attributes are so convenient for targeting with jQuery selectors. But you
won't always have such neat ids to work with.

Fortunately, jQuery has some other tricks for targeting the right elements.

jQuery uses CSS Selectors to target elements. The target:nth-child(n) CSS selector allows
you to select all the nth elements with the target class or element type.

Here's how you would give the third element in each well the bounce class:

$(".target:nth-child(3)").addClass("animated bounce");

Target Even Elements Using jQuery

You can also target elements based on their positions using :odd or :even selectors.
Note that jQuery is zero-indexed which means the first element in a selection has a position
of 0. This can be a little confusing as, counter-intuitively, :odd selects the second element
(position 1), fourth element (position 3), and so on.

Here's how you would target all the odd elements with class target and give them classes:

$(".target:odd").addClass("animated shake");

Use jQuery to Modify the Entire Page

We're done playing with our jQuery playground. Let's tear it down!

jQuery can target the body element as well.

Here's how we would make the entire body fade out: $("body").addClass("animated
fadeOut");

SASS
Store Data with Sass Variables
One feature of Sass that's different than CSS is it uses variables. They are declared and set
to store data, similar to JavaScript.

In JavaScript, variables are defined using the let and const keywords. In Sass, variables
start with a $ followed by the variable name.

Here are a couple examples:

$main-fonts: Arial, sans-serif;

$headings-color: green;
And to use the variables:

h1 {
font-family: $main-fonts;
color: $headings-color;
}
One example where variables are useful is when a number of elements need to be the same
color. If that color is changed, the only place to edit the code is the variable value.
Create Reusable CSS with Mixins
In Sass, a mixin is a group of CSS declarations that can be reused throughout the style
sheet.

Newer CSS features take time before they are fully adopted and ready to use in all
browsers. As features are added to browsers, CSS rules using them may need vendor
prefixes. Consider box-shadow:

div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
It's a lot of typing to re-write this rule for all the elements that have a box-shadow, or to
change each value to test different effects. Mixins are like functions for CSS. Here is how to
write one:

@mixin box-shadow($x, $y, $blur, $c){

-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
The definition starts with @mixin followed by a custom name. The parameters (the $x, $y,
$blur, and $c in the example above) are optional. Now any time a box-shadow rule is
needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A
mixin is called with the @include directive:

div {
@include box-shadow(0px, 0px, 4px, #fff);
}

Use @if and @else to Add Logic To Your Styles

The @if directive in Sass is useful to test for a specific case - it works just like the if
statement in JavaScript.

@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
And just like in JavaScript, @else if and @else test for more conditions:
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}

También podría gustarte

Introducción HTML
Aún no hay calificaciones
Introducción HTML
44 páginas
Resumen HTML5
Aún no hay calificaciones
Resumen HTML5
25 páginas
Etiquetas y Glosario HTML
Aún no hay calificaciones
Etiquetas y Glosario HTML
6 páginas
Guía Completa de HTML5 para Principiantes
Aún no hay calificaciones
Guía Completa de HTML5 para Principiantes
13 páginas
Codigo HTML
Aún no hay calificaciones
Codigo HTML
7 páginas
Etiquetas HTML Esenciales y Uso
Aún no hay calificaciones
Etiquetas HTML Esenciales y Uso
6 páginas
Resumen de Etiquetas HTML y Usos
Aún no hay calificaciones
Resumen de Etiquetas HTML y Usos
9 páginas
Guía Básica de HTML para Principiantes
Aún no hay calificaciones
Guía Básica de HTML para Principiantes
5 páginas
HTML: Multimedia y Tablas
Aún no hay calificaciones
HTML: Multimedia y Tablas
24 páginas
A.Fundamentos de HTML5
Aún no hay calificaciones
A.Fundamentos de HTML5
17 páginas
Introducción al Marcado HTML
Aún no hay calificaciones
Introducción al Marcado HTML
24 páginas
HTML
Aún no hay calificaciones
HTML
14 páginas
Etiquetas HTML
100% (1)
Etiquetas HTML
14 páginas
Introducción a HTML y CSS Básico
Aún no hay calificaciones
Introducción a HTML y CSS Básico
5 páginas
Ejemplo de Código HTML para Reportes
Aún no hay calificaciones
Ejemplo de Código HTML para Reportes
6 páginas
Ciclo 3: Desarrollo de Software Sesión 16: Implementación de Front End (Parte 1)
Aún no hay calificaciones
Ciclo 3: Desarrollo de Software Sesión 16: Implementación de Front End (Parte 1)
88 páginas
HTML Basico
Aún no hay calificaciones
HTML Basico
8 páginas
Guia de Tablas
Aún no hay calificaciones
Guia de Tablas
36 páginas
Pde Hanna
Aún no hay calificaciones
Pde Hanna
21 páginas
Guía Completa de HTML y Herramientas de Desarrollo
Aún no hay calificaciones
Guía Completa de HTML y Herramientas de Desarrollo
13 páginas
Curso HTML
Aún no hay calificaciones
Curso HTML
18 páginas
Chuleta HTML
Aún no hay calificaciones
Chuleta HTML
17 páginas
Diseño Web
Aún no hay calificaciones
Diseño Web
8 páginas
Teoria
Aún no hay calificaciones
Teoria
5 páginas
Curso de HTML y Css
Aún no hay calificaciones
Curso de HTML y Css
12 páginas
HTML Curso
Aún no hay calificaciones
HTML Curso
18 páginas
Clasehtml
Aún no hay calificaciones
Clasehtml
20 páginas
HTML y Css Funciones22222222222222222222222222222
Aún no hay calificaciones
HTML y Css Funciones22222222222222222222222222222
6 páginas
Explicación de Las Etiquetas o Códigos de HTML - 2024
Aún no hay calificaciones
Explicación de Las Etiquetas o Códigos de HTML - 2024
4 páginas
4 - El Cabecero de Un Documento HTML
Aún no hay calificaciones
4 - El Cabecero de Un Documento HTML
8 páginas
HTML5
Aún no hay calificaciones
HTML5
52 páginas
Examen Hugo 2
Aún no hay calificaciones
Examen Hugo 2
10 páginas
Guía de Etiquetas HTML Básicas
Aún no hay calificaciones
Guía de Etiquetas HTML Básicas
2 páginas
P Exp Sem 01 Clase 02
Aún no hay calificaciones
P Exp Sem 01 Clase 02
33 páginas
HTML - Bases, Etiquetas y Atributos
Aún no hay calificaciones
HTML - Bases, Etiquetas y Atributos
6 páginas
Guía Completa de HTML: Estructura y Elementos
Aún no hay calificaciones
Guía Completa de HTML: Estructura y Elementos
11 páginas
Guía HTML: Enlaces, Multimedia y Formularios
Aún no hay calificaciones
Guía HTML: Enlaces, Multimedia y Formularios
62 páginas
Etiquetas HTML
Aún no hay calificaciones
Etiquetas HTML
7 páginas
HTML Aulaclic
Aún no hay calificaciones
HTML Aulaclic
75 páginas
Bases de HTML y CSS
Aún no hay calificaciones
Bases de HTML y CSS
20 páginas
Introducción A HTML
Aún no hay calificaciones
Introducción A HTML
32 páginas
Que Es HTML
Aún no hay calificaciones
Que Es HTML
3 páginas
Hipervinculos HTML
Aún no hay calificaciones
Hipervinculos HTML
18 páginas
Curso HTML
Aún no hay calificaciones
Curso HTML
14 páginas
Códigos HTML Básicos para Páginas Web
Aún no hay calificaciones
Códigos HTML Básicos para Páginas Web
7 páginas
Curso de Desarrollo Web con HTML5
Aún no hay calificaciones
Curso de Desarrollo Web con HTML5
4 páginas
MATERIAL PARA LEER y HACER
Aún no hay calificaciones
MATERIAL PARA LEER y HACER
4 páginas
Estructura y Personalización de Páginas HTML
Aún no hay calificaciones
Estructura y Personalización de Páginas HTML
8 páginas
Resumen HTML Todos Los Componentes de Una Pagina Web
100% (1)
Resumen HTML Todos Los Componentes de Una Pagina Web
12 páginas
Teoria 2 - HTML5 Primeros Pasos
Aún no hay calificaciones
Teoria 2 - HTML5 Primeros Pasos
36 páginas
Libro Clase 2
Aún no hay calificaciones
Libro Clase 2
16 páginas
HTML
Aún no hay calificaciones
HTML
83 páginas
Desarrollo de PW HTML
Aún no hay calificaciones
Desarrollo de PW HTML
7 páginas
Apuntes HTML+CSS
Aún no hay calificaciones
Apuntes HTML+CSS
31 páginas
Enlaces y Listas en HTML
Aún no hay calificaciones
Enlaces y Listas en HTML
4 páginas
HTML 3: Multimedia y Tablas
Aún no hay calificaciones
HTML 3: Multimedia y Tablas
22 páginas
Clase 02 - Primeros Pasos Con HTML
Aún no hay calificaciones
Clase 02 - Primeros Pasos Con HTML
62 páginas
Qué Es HTML y Cual Es Su Papel Fundamental en El Desarrollo Web
Aún no hay calificaciones
Qué Es HTML y Cual Es Su Papel Fundamental en El Desarrollo Web
6 páginas
Guía Completa de HTML y CSS Básico
Aún no hay calificaciones
Guía Completa de HTML y CSS Básico
133 páginas
Directivas GPO
Aún no hay calificaciones
Directivas GPO
13 páginas
Matematicas Discretas Tarea 1.2 Conversiones Entre Sistemas Numéricos
Aún no hay calificaciones
Matematicas Discretas Tarea 1.2 Conversiones Entre Sistemas Numéricos
4 páginas
Hackrom Inazuma Eleven GO: Temporal Heroes
Aún no hay calificaciones
Hackrom Inazuma Eleven GO: Temporal Heroes
2 páginas
Lenguajes Imperativos - EQ3
Aún no hay calificaciones
Lenguajes Imperativos - EQ3
12 páginas
CLASE 6 - Arboles Generales en JAVA
Aún no hay calificaciones
CLASE 6 - Arboles Generales en JAVA
18 páginas
Informe de Comisiones Excel
Aún no hay calificaciones
Informe de Comisiones Excel
4 páginas
Introducción al Pipeline de Producción
Aún no hay calificaciones
Introducción al Pipeline de Producción
48 páginas
Comandos Basicos
Aún no hay calificaciones
Comandos Basicos
7 páginas
Generación de Onda con Amplificadores Operacionales
Aún no hay calificaciones
Generación de Onda con Amplificadores Operacionales
6 páginas
Definición y Función Del Kernell
Aún no hay calificaciones
Definición y Función Del Kernell
2 páginas
Lista de Chequeo Pulidora
67% (3)
Lista de Chequeo Pulidora
3 páginas
Controles Avanzados de Power Builder
Aún no hay calificaciones
Controles Avanzados de Power Builder
5 páginas
Reflexiones sobre la revolución de SO
Aún no hay calificaciones
Reflexiones sobre la revolución de SO
1 página
Formato Entregable - Sehi
Aún no hay calificaciones
Formato Entregable - Sehi
15 páginas
Guia de Instalacion PBX
Aún no hay calificaciones
Guia de Instalacion PBX
18 páginas
Caso Practico VPN
Aún no hay calificaciones
Caso Practico VPN
2 páginas
Software Facturación para Farmacias
Aún no hay calificaciones
Software Facturación para Farmacias
8 páginas
Cuestionario Sobre Docassemble
Aún no hay calificaciones
Cuestionario Sobre Docassemble
3 páginas
Códigos de Transacción y Tablas de SAP SD
Aún no hay calificaciones
Códigos de Transacción y Tablas de SAP SD
5 páginas
Competencias Digitales Básicas
0% (1)
Competencias Digitales Básicas
9 páginas
Ejercicios de Gráficos en Excel
Aún no hay calificaciones
Ejercicios de Gráficos en Excel
6 páginas
Leame
Aún no hay calificaciones
Leame
4 páginas
Internet Sockets
Aún no hay calificaciones
Internet Sockets
3 páginas
Examen de Investigación Operativa
Aún no hay calificaciones
Examen de Investigación Operativa
6 páginas
Inspeccion de Elementos de Proteccion Personal
Aún no hay calificaciones
Inspeccion de Elementos de Proteccion Personal
2 páginas
Matr 05
Aún no hay calificaciones
Matr 05
4 páginas
Cartilla Constancia
Aún no hay calificaciones
Cartilla Constancia
7 páginas
Lait704 - U4 - Ea
Aún no hay calificaciones
Lait704 - U4 - Ea
8 páginas
Definiciones de Multimedia y Cronología de La Multimedia
Aún no hay calificaciones
Definiciones de Multimedia y Cronología de La Multimedia
8 páginas