Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML 5 y CSS 3

Cómo funciona el lenguaje html 5 y las hojas de estilo de cascada CSS 3. incluye una guía que presenta el lenguaje, resaltando las novedades de la última versión y los elementos obsoletos que deben evitarse.
by

Ricardo Naranjo

on 2 March 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML 5 y CSS 3

<!DOCTYPE html>
<html>
<head>
<title>
Ejemplo para indicar selectores CSS
</title>
</head>
<body>
<div class='RECUADRO'>
<h1>El encabezado principal</h1>
<p>El primer p&aacute;rrafo del recuadro</p>
<p class='NORMAL'>El segundo p&aacute;rrafo del recuadro</p>
<p class='NORMAL'>El tercer p&aacute;rrafo del recuadro</p>
<form action='script.php'>
<p class='NORMAL'>
Si desea ingresar rellene &eacute;ste formulario
</p>
<input type='text' name='usuario' />
<br />
<input type='password' name='clave' />
<br />
<input type='submit' value='Ingresar' />
<div class='RESALTADO'>
<p class='NORMAL'>
Su madre <strong>tiene</strong> bigotes
</p>
</div>
</form>
<h1 id='VINHETAS'>Un listado con vi&ntilde;etas</h1>
<ul>
<li selected='selected'>Primer &iacute;tem</li>
<li>segundo &iacute;tem</li>
<li>tercer &iacute;tem</li>
<li>cuarto &iacute;tem</li>
<li>quinto &iacute;tem</li>
</ul>
</div>
</body>
</html>
<header>
<footer>
<nav>
<main>, <section>, <article>
<p>
<h1>,<h2>,<h3>
Introducción a
HTML
Agenda
Descripción
Tags y elements
Atributos
Estructuras Básicas HTML/CSS
Class e ID
Práctica
Elementos básicos
¿Qué es HTML?
HTML = HyperText Markup Language
Tags y Elementos
Tags
Contenedores
<...>
Informan al navegador cómo desplegar la página
Vienen en parejas
Pueden estar solos
(E.g. <br />, <hr />, <img />)
Atributos
En el tag inicial se pueden poner atributos

Brindan más información sobre el elemento

Requieren nombre y valor.
Lenguaje principal para páginas web.

Estandar en November 24, 1995 en su versión 2.0

The W3C HTML5 recommendation was released 28 October 2014.
¿Preguntas?
Ejemplo:
Ejemplo:
CSS document
CSS = Cascading Style Sheets
Estilo de despliegue de los elementos
Un solo archivo puede cambiar la apariencia de toda la página
/*This is a comment*/
Documento HTML
Almacena el código de la página web
Extensión: ".html"
CSS Syntax Includes:
La sintaxis incluye:
doctype
elements
attributes
comments
Selectores Class e ID
<article id="top">

<h1>Welcome</h1>

<p class="intro">Hello</p>

<p class="intro">Hi</p>

</article>
ID ~ #
HTML Document
CSS Document
.top {
background-color: #ccc;
padding: 1em;
}


#intro {
color: red;
}
<a>
<img>
<video>
<table>
<form>
Class ~ .
<base>
Principales
Comentarios
Párrafos, Líneas y cambio de renglón
Formato de texto
Encabezados
Fotos, Dibujos e Imágenes
Imágenes, fotos y dibujos
http://www.w3schools.com/tags/default.asp
<aside>
<audio>
<embed>
<figure>, <figcaption>
<mark>
<progress>
<details>, <summary>
<time>
Directrices CSS más comunes
position
top
left
right
bottom
width
height
margin
padding
color
background
background-image
background-position
background-repeat
text-align
text-decoration
font-family
font-size
font-weight
border
border-radius
box-shadow
display
height
width
overflow
CSS en archivos externos

#MENSAJE {
position: fixed;
top: 150px;
left: 250px;
width: 20%;
color: black;
background: lightgreen;
font-weight: normal;
text-align: justify;
padding: 20px;
border: 3px solid #555555;
border-left: 3px solid #AAAAAA;
border-top: 3px solid #AAAAAA;
}
.ERROR {
margin: 0px;
padding: 0px;
border: none;
border-bottom: 1px dotted #555555;
color: black;
display: block;
text-align: right;
font-size: .8em;
font-family: tahoma, 'Trebuchet MS';
}

<link rel='stylesheet' type='text/css' href='css/estilos.css' />
body {
background-image: url('../img/fondo.png');
margin: 0px;
padding: 0px;
padding-bottom: 800px;
font-family: 'Trebuchet MS';
}
#MODULO div.CALENDARIO {
width: auto;
margin: auto;
margin-left: 0px;
text-align: left;
}
#MODULO div.CALENDARIO select {
border: none;
}
#MODULO div.CALENDARIO a {
text-decoration: none;
}
...
Buscar en google:
"TAG" site:w3schools.com
http://www.skinait.com
Muchas gracias
¿Hay alguien despierto?
Estructurales
<article>: Defines an article
<aside>: Defines content aside from the page content
<footer>: Defines a footer for a document or section
<header>: Defines a header for a document or section
<main>: Specifies the main content of a document
<nav>: Defines navigation links
<section>: Defines a section in a document
<!--...-->: Defines a comment
<!DOCTYPE> : Defines the document type
<base>: Specifies the base URL/target for all relative URLs in a document
<body>: Defines the document's body
<div>: Defines a section in a document
<h1> to <h6>: Defines HTML headings
<head>: Defines information about the document
<html>: Defines the root of an HTML document
<link>: Defines the relationship between a document and an external resource (most used to link to style sheets)
<meta>: Defines metadata about an HTML document
<p>: Defines a paragraph
<span>: Defines a section in a document
<style>: Defines style information for a document
<title>: Defines a title for the document
Utilitarios y multimedia
<audio>: Defines sound content
<canvas>: Used to draw graphics, on the fly, via scripting (usually JavaScript)
<embed>: Defines a container for an external (non-HTML) application
<figcaption>: Defines a caption for a <figure> element
<figure>: Specifies self-contained content
<meter>: Defines a scalar measurement within a known range (a gauge)
<progress>: Represents the progress of a task
<source>: Defines multiple media resources for media elements (<video> and <audio>)
<track>: Defines text tracks for media elements (<video> and <audio>)
<video>: Defines a video or movie
<a>: Defines a hyperlink
<area>: Defines an area inside an image-map
<button>: Defines a clickable button
<iframe>: Defines an inline frame
<img>: Defines an image
<map>: Defines a client-side image-map
<menu>: Defines a list/menu of commands
<noscript>: Defines an alternate content for users that do not support client-side scripts
<object>: Defines an embedded object
<param>: Defines a parameter for an object
<script>: Defines a client-side script
Formato
<wbr>: Defines a possible line-break
<b>: Defines bold text
<bdo>: Overrides the current text direction
<br>: Defines a single line break
<del>: Defines text that has been deleted from a document
<hr>: Defines a thematic change in the content
<i>: Defines a part of text in an alternate voice or mood
<ins>: Defines a text that has been inserted into a document
<s>: Defines text that is no longer correct
Tablas
<caption>: Defines a table caption
<col>: Specifies column properties for each column within a <colgroup> element 
<colgroup>: Specifies a group of one or more columns in a table for formatting
<table>: Defines a table
<tbody>: Groups the body content in a table
<td>: Defines a cell in a table
<tfoot>: Groups the footer content in a table
<th>: Defines a header cell in a table
<thead>: Groups the header content in a table
<tr>: Defines a row in a table
Listados y conjuntos
<dd>: Defines a description/value of a term in a description list
<dl>: Defines a description list
<dt>: Defines a term/name in a description list
<li>: Defines a list item
<ol>: Defines an ordered list
<ul>: Defines an unordered list
Formularios
<datalist>: Specifies a list of pre-defined options for input controls
<keygen>: Defines a key-pair generator field (for forms)
<output>: Defines the result of a calculation
<fieldset>: Groups related elements in a form
<form>: Defines an HTML form for user input
<input>: Defines an input control
<label>: Defines a label for an <input> element
<legend>: Defines a caption for a <fieldset> element
<optgroup>: Defines a group of related options in a drop-down list
<option>: Defines an option in a drop-down list
<select>: Defines a drop-down list
<textarea>: Defines a multiline input control (text area)
Tipificación
<mark>: Defines marked/highlighted text
<time>: Defines a date/time
<abbr>: Defines an abbreviation
<address>: Defines contact information for the author/owner of a document
<blockquote>: Defines a section that is quoted from another source
<cite>: Defines the title of a work
<code>: Defines a piece of computer code
<dfn>: Defines a definition term
<em>: Defines emphasized text 
<kbd>: Defines keyboard input
<pre>: Defines preformatted text
<q>: Defines a short quotation
<samp>: Defines sample output from a computer program
<small>: Defines smaller text
<strong>: Defines important text
<sub>: Defines subscripted text
<sup>: Defines superscripted text
<u>: Defines text that should be stylistically different from normal text
<var>: Defines a variable
New but not frequent in HTML5
<bdi>: Isolates a part of text that might be formatted in a different direction from other text outside it
<command>: Defines a command button that a user can invoke
<dialog>: Defines a dialog box or window
<details>: Defines additional details that the user can view or hide
<rp>: Defines what to show in browsers that do not support ruby annotations
<rt>: Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>: Defines a ruby annotation (for East Asian typography)
<summary>: Defines a visible heading for a <details> element
Not supported in HTML5
<basefont>: Use CSS instead.
Specifies a default color, size, and font for all text in a document
<acronym>: Use <abbr> instead.
Defines an acronym
<applet>: Use <object> instead.
Defines an embedded applet
<big>: Use CSS instead.
Defines big text
<center>: Use CSS instead.
Defines centered text
<dir>: Use <ul> instead.
Defines a directory list
<font>: Use CSS instead.
Defines font, color, and size for text
<frame>: Defines a window (a frame) in a frameset
<frameset>: Defines a set of frames
<noframes>: Defines an alternate content for users that do not support frames
<strike>: Use <del> instead.
Defines strikethrough text
<tt>: Use CSS instead.
Defines teletype text
CSS3 - Reference sheet
http://bit.ly/1p8qARd
HTML5 - Reference sheet
http://bit.ly/1gDlQlI

Recordar XHTML
<hr />
<br />
URLs
Absolutos
http://www.skinait.com/
Relativos
docs/listadeprecios.pdf
../imagenes/logo.jpg
<a href='URL' target='NOMVENTANA'>texto</a>
Recordar XHTML
<source src="movie.mp4" type="video/mp4"
/>
/>

/>
/>
/>
Recordar XHTML
<source src="horse.ogg" type="audio/ogg"
/>
Imprimir y poner bajo el teclado
Imprimir y poner bajo el teclado
¿Te gustó PREZI?
Refiérenos al crear tu propia cuenta
http://bit.ly/1iGP4Rn
HTML
CSS
CSS
CSS
Novatos -> Introducción
Intermedios -> HTML5 + CSS3
Avanzados -> tips & tricks
Uso apropiado de colores
http://www.colorcombos.com
http://colorschemedesigner.com/
https://kuler.adobe.com
Editores de fotografías
http://www.gimp.org/
http://pixlr.com/
http://www.sumopaint.com/www/
Google+ Photo editor
http://www.vecteezy.com/
W3Schools.com
https://www.w3schools.com
https://gustavoarielschwartz.org/2013/05/06/cmoo-es-psiolbe-qu3-smaeos-cpceaas-d3-l33r-tdoo-etso/
Algunos temas relacionados
http://www.dzoom.org.es/regla-de-los-tercios/
http://www.dzoom.org.es/descubre-que-es-la-proporcion-aurea-y-como-puede-ayudarte-en-la-composicion-de-tus-fotos/
Buscar en Google:
"bdo site:w3schools.com"
"p tag site:w3schools.com"
Colores basados en fotos
http://design-seeds.com/
http://www.colourlovers.com/photocopa
Fuentes compradas o gratuitas
http://www.google.com/fonts/
Diagramadores
http://www.inkscape.org
http://www.techsmith.com/jing.html
http://www.prezi.com
http://www.wordle.net/create
Fuentes de datos
Creative Commons
Wikimedia
http://icomoon.io/app/#/select
#RRGGBB : Hexadecimal
Bases para diseño
<p>
</p>
<p>
<p>
<p>
</p>
</p>
</p>
Full transcript