HTML Y CSS
Páginas: 3 (527 palabras)
Publicado: 12 de julio de 2015
HTML Y CSS
1.- iniciamos Sublime text.
2.- Creamos El primer código:
2.- Guardamos el Archivo en File en Save As.
3.- Verificar el tipo de extensión, el nombre respectivo “nombre.html” si usteddesea guarda
todos los archivos con la cual usted va a trabajar en una sola carpeta o en el escritorio.
4.- Una vez guardado debemos de confirmar si se guardó correctamente en el lugar señalado,
no seolvide de sacar el check en Opciones de Carpeta, en la pestaña VER, opción ocultar las
extensiones
5.- En Sublime Text escribir la estructura de Html y sus respectivas partes principales el Head,Body.
6.- Conceptos
HEAD
Este elemento está determinado por las etiquetas y . Dentro de las
mismas queda determinada la sección head la cual contiene toda la información sobre
eldocumento.
Esta información no será mostrada por el navegador pero es de suma importancia para
los navegadores y para los motores de búsqueda.
De acuerdo a los estándares de HTML solo un número reducido deetiquetas pueden
incluirse en la sección head:
1.
2.
3.
4.
5.
6.
<br />
<style><br />
<script><br />
<br />
En esta ocasión nosotros utilizaremos 3 etiquetas<br />
<link> que es para CSS<br />
<metacharset=”UTF-8”> que es para que pueda reconocer las tildes, Ñ y otro tipo de<br />
caracteres.<br />
<title> para dar un título a la barra de la ventana<br />
BODY<br />
Es el contenedor de los contenidos. Su misión es contener loselementos que dan forma al<br />
documento.<br />
En esta parte del body irán todas las etiquetas HTML que serán visualizadas en la “página web”<br />
7.- Vemos las etiquetas básicas para realizar una página web:Resultado:<br />
<br />
8.- lección 8 Aprenderemos CSS: son las siglas de Cascade Style Sheet que traducido<br />
significa hojas de estilo en cascada.<br />
Las hojas de estilo es una tecnología que nos permite controlar laapariencia de una<br />
página web. En un principio, los sitios web se concentraban más en su contenido que en<br />
su presentación.<br />
Ejemplo de CSS:<br />
<br />
Creamos la Hoja de style.css, en la opción File > new File.... <div class="paper-body__gradient paper-body__gradient--bottom paper-body__gradient--bottom-abs"></div>
<div class="center paper-body__cta--mod paper-body__cta-no-bg">
<a class="button button--large button--orange" onclick="upgradeRedirect()" rel="nofollow">
Leer documento completo </a>
<p class="ash-gray text-s">
Regístrate para leer el documento completo. </p>
</div>
</div>
</div>
</div>
</article>
</main>
<script>(function(d){var domain='buenastareas.com';if(d.referrer.match('^https?\:\/\/(|www\.)'+domain.replace('.com',"")+'\.com(.*)')){d.getElementById('stm-hero').className+=' stm-hero';d.getElementById('emptyTopicsList').innerHTML=(document.getElementById("topicsList"))?d.getElementById('topicsList').innerHTML:'';d.getElementById('text-header').innerHTML='';var sec=d.createElement('div');sec.className='section no-padding margin-2';var p=d.createElement('p');p.className='text-s uppercase ash-gray';p.innerText='Vista previa del texto';sec.appendChild(p);d.getElementById('text-header').appendChild(sec);}else{d.getElementById('stm-hero').className='';d.getElementsByTagName('article')[0].className='row no-border';}})(window.document);</script><div class="advertBox center margin-2 leaderboard_btf">
</div>
<a href="/content/access" rel="nofollow"></a>
<section class="row ">
<div class="columns position-relative
large-12">
<div class="">
<h2 class="heading-m padding-top-1 margin-2">
Estos documentos también te pueden resultar útiles </h2>
</div>
<section class="">
<ul class="unstyled">
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Html-y-Css/49417017.html"
title="HTML y CSS">
<h6 class="heading-s">
HTML y CSS </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...
<b><i>CSS</i></b> Glosario
Comentarios
Los comentarios de <b><i>CSS</i></b> cumplen el mismo propósito que en otros lenguajes, y a menudo son usados para organizar archivos <b><i>CSS</i></b> de gran tamaño y difíciles de manejar.
Ejemplo
// Este es un comentario <b><i>CSS</i></b> de una sola línea.
/* Este es un comentario <b><i>CSS</i></b> de
varias líneas líneas. */
Margen
Especifica el espacio entre una caja de contenido y las cajas a su alrededor. Aquí, el div con id... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Html-y-Css/49417017.html"
title="HTML y CSS"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1480 Palabras</span>
<span class="essay-details__item">6 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Html-Css/43110907.html"
title="html css">
<h6 class="heading-s">
html css </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...TRABAJO PRÁCTICO Nº 2 <b><i>CSS</i></b>
Paso 1: Escribir el código <b><i>HTML</i></b>
Mi primera página con estilo
Página principal
Meditaciones
Mi ciudad
Enlaces
Mi primera página con estilo
¡Bienvenido a mi primera página con estilo!
No tiene imágenes, pero tiene estilo.
También tiene enlaces, aunque no te lleven a
ningún sitio…
Debería haber más cosas aquí, pero todavía no sé
qué poner.
Creada el 13 de agosto de 2010
por mí... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Html-Css/43110907.html"
title="html css"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1009 Palabras</span>
<span class="essay-details__item">5 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Html-Css/54461906.html"
title="HTML CSS">
<h6 class="heading-s">
HTML CSS </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...Acamica
Maquetando al monstruo web
<b><i>HTML</i></b> – <b><i>CSS</i></b>
Unidad 1
Etiquetas <b><i>HTML</i></b>
Estructura básica página <b><i>HTML</i></b>
//Código de caracteres. Decodifica caracteres símbolos, signos, acentos.
mi primera página
//Nombre de la pestaña que estoy ubicado.
Cuerpo de la página
Jerarquía de elementos
Etiqueta <b><i>html</i></b> es el padre de etiquetas head y body.
Se utiliza el código dentado para... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Html-Css/54461906.html"
title="HTML CSS"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1165 Palabras</span>
<span class="essay-details__item">5 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Men%C3%BA-Desplegable-Con-Html-y-Css/7286351.html"
title="Menú Desplegable Con Html Y Css">
<h6 class="heading-s">
Menú Desplegable Con Html Y Css </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...Noviembre 23 de 2012
MENÚ DESPLEGABLE CON <b><i>HTML</i></b> Y <b><i>CSS</i></b>
1. Abrir un documento .<b><i>html</i></b> e iniciar escribiendo la semántica básica de programación:
<<b><i>html</i></b>>
<head>
<title>Menu desplegable con <b><i>html</i></b> y <b><i>css</i></b></title>
</head>
<body>
</body>
</<b><i>html</i></b>>
2. Crear un DIV dentro del body con un id al que llamaremos “Header”, así:... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Men%C3%BA-Desplegable-Con-Html-y-Css/7286351.html"
title="Menú Desplegable Con Html Y Css"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">928 Palabras</span>
<span class="essay-details__item">4 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Ejercicios-Html-y-Css/39360469.html"
title="Ejercicios HTML y CSS">
<h6 class="heading-s">
Ejercicios HTML y CSS </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...información
Documento con los ejercicios del tema 2, referentes a XHTML y <b><i>CSS</i></b>
U.2: Lenguajes para la visualización de la información
Tema 2: XHTML
1. Elaboración de la primera página web. Se crea una carpeta en el disco duro para
guardar las páginas web. Se abre el Bloc de notas para crear la web y se escribe el
siguiente texto.
Mi primera página web
Este es el cuerpo de mi página web
Nómbrala actividad1.<b><i>html</i></b> y guárdala en la carpeta... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Ejercicios-Html-y-Css/39360469.html"
title="Ejercicios HTML y CSS"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1497 Palabras</span>
<span class="essay-details__item">6 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Ajax-Javascript-Html-y-Css/65548909.html"
title="AJAX, JAVASCRIPT, HTML Y CSS">
<h6 class="heading-s">
AJAX, JAVASCRIPT, HTML Y CSS </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...directamente en las páginas <b><i>HTML</i></b>. JavaScript se utiliza principalmente del lado del cliente, permitiendo crear efectos atractivos y dinámicos en las páginas web. Los navegadores modernos interpretan el código JavaScript integrado en las páginas web.
Los documentos <b><i>HTML</i></b> permiten incrustar fragmentos de código JavaScript, bien dentro del propio archivo <b><i>HTML</i></b> o bien realizando una carga de ese código indicando el archivo donde se encuentra el código... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Ajax-Javascript-Html-y-Css/65548909.html"
title="AJAX, JAVASCRIPT, HTML Y CSS"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1546 Palabras</span>
<span class="essay-details__item">7 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/C1-Html-Css/82031800.html"
title="C1 HTML CSS">
<h6 class="heading-s">
C1 HTML CSS </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...<b><i>HTML</i></b>/<b><i>CSS</i></b> Tutorial
1
Estructura general
2
Página sin marcos
<<b><i>HTML</i></b>>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</<b><i>HTML</i></b>>
Página con marcos
<<b><i>HTML</i></b>>
<HEAD>
</HEAD>
<FRAMESET cols="#[%], #[%]">
<FRAMESET rows="#[%], #[%]">
<FRAME src="frame1.<b><i>html</i></b>">
<FRAME src="frame2.gif">
</FRAMESET>
<FRAME src="frame3.<b><i>html</i></b>">
<NOFRAMES>
...
</NOFRAMES>
</FRAMESET>
</<b><i>HTML</i></b>>
Frames
3
Los marcos permiten... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/C1-Html-Css/82031800.html"
title="C1 HTML CSS"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1372 Palabras</span>
<span class="essay-details__item">6 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Formulario-Html-Css-Javascript/44732311.html"
title="Formulario html css javascript">
<h6 class="heading-s">
Formulario html css javascript </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...alumno consiga los conocimientos
básicos para desarrollar páginas <b><i>HTML</i></b> que permitan la interacción bidireccional entre
un cliente y un servidor a través del protocolo HTTP. Dichas nociones elementales
servirán de base para el desarrollo de las restantes prácticas.
2. Descripción de la práctica
Esta primera práctica consiste básicamente en dos grupos de tareas. El primero
orientado a conocer los elementos básicos del lenguaje <b><i>HTML</i></b> para el desarrollo de... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Formulario-Html-Css-Javascript/44732311.html"
title="Formulario html css javascript"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">948 Palabras</span>
<span class="essay-details__item">4 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
</section>
<section class="row ">
<div class="columns position-relative large-12">
<section class="section no-border">
<div class="container">
<div class="row">
<div class="columns ">
<div class="section-heading ">
<h2 class="align-left margin-2 heading-m">
OTRAS TAREAS POPULARES </h2>
</div>
</div>
</div>
<div class="row" id="popular-tags-visible">
<div class="small-12 columns tag-block columns-small-1 columns-medium-2 columns-large-2">
<ul>
<li class="margin-1">
<a href="/ensayos/Proceso-Del-Super-Fosfato-Triple/76057054.html" title="Proceso Del Super Fosfato Triple" class="mid-gray brand-primary--hover">Proceso Del Super Fosfato Triple</a>
</li>
<li class="margin-1">
<a href="/ensayos/Administracion/76057060.html" title="administracion" class="mid-gray brand-primary--hover">administracion</a>
</li>
<li class="margin-1">
<a href="/ensayos/Listado-Definitivo-De-Propuestas-Habilitadas-y/76057087.html" title="Listado Definitivo De Propuestas Habilitadas Y Rechazadas Rock Al Parque" class="mid-gray brand-primary--hover">Listado Definitivo De Propuestas Habilitadas Y Rechazadas Rock Al Parque</a>
</li>
<li class="margin-1">
<a href="/ensayos/La-Globalizaci-n-Es-Un-Fen/76057102.html" title="La Globalizaci N Es Un Fen Meno Reciente" class="mid-gray brand-primary--hover">La Globalizaci N Es Un Fen Meno Reciente</a>
</li>
<li class="margin-1">
<a href="/ensayos/Yacimientos/76057105.html" title="Yacimientos" class="mid-gray brand-primary--hover">Yacimientos</a>
</li>
<li class="margin-1">
<a href="/ensayos/Como-Se-Forma-Una-Corporacion-En/76057114.html" title="Como se forma una Corporacion en PR 1 " class="mid-gray brand-primary--hover">Como se forma una Corporacion en PR 1 </a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</section>
<div class="advertBox center margin-1"></div>
<section class="section no-border brand-primary--bg">
<div class="row">
<div class="columns center">
<h3 id="banner_title" class="heading-l white">Únete a millones de otros estudiantes y comienza tu investigación</h3>
<h4 class="text-m white">Conviértase en miembro formal de Buenas Tareas</h4>
<a class="button--bg-color__white button-fullwidth" onclick="upgradeRedirect()" rel="nofollow">
INSCRÍBETE - ES GRATIS
</a> </div>
</div>
</section>
<footer class="section section--footer">
<div class="row">
<div class="medium-3 columns"><div class="copyright-block">
<p class="copyright-block__logo">
<i class="icon icon-sm-logo copyright-block__logo__icon"></i>
<span class="copyright-block__logo__span">Buenas Tareas</span>
</p>
<p class="copyright-block__social">
<a rel="nofollow" href="http://www.facebook.com/BuenasTareas">
<span class="copyright-block__social__circle">
<i class="copyright-block__social__circle__icon icon icon-ui-24-social-fb icon-ui-social-fb"></i>
</span>
</a>
<a rel="nofollow" href="https://twitter.com/buenastareas">
<span class="copyright-block__social__circle">
<i class="copyright-block__social__circle__icon icon icon-ui-social-tw"></i>
</span>
</a>
</p>
<small class="copyright-block__copyright text-s">
©2024 BuenasTareas.com </small>
</div>
</div>
<div class="medium-3 columns"><div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Productos</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/ojear/">Documentos de investigación</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/resumen-de-libros/">Notas de libros</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/generador-de-citas/">Generador de citas</a>
</li>
</ul>
</div>
</div>
<div class="medium-3 columns">
<div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Empresa</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/about.php">Empresa</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/advertise-with-us.php">Haz publicidad</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/legal.php">Legal (actualizado 9/9/14)</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/sitemap.html">Mapa del sitio</a>
</li>
</ul>
</div>
</div>
<div class="medium-3 columns"><div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Ayuda</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/help.php">Ayuda</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/about-us/contact">Contáctanos</a>
</li>
</ul>
</div>
</div>
</div>
</footer> </div>
<!-- global JS -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js"></script>
<script type="text/javascript">
$LAB
.script("//cdnjs.cloudflare.com/ajax/libs/aja/0.4.1/aja.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.3.2/jquery.payment.min.js")
.script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/92c1d4e847bc6d93ba58214aa322ee6c.js")
;
</script>
<script type="text/javascript">
window.SM2_DEFER = true;
function downloadJSAtOnload() {
$LAB
.script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/76aff662ad8b32c9348bfa0fa9cb8f91.js")
.wait(function() {
});
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</body>
</html>
1.- iniciamos Sublime text.
2.- Creamos El primer código:
2.- Guardamos el Archivo en File en Save As.
3.- Verificar el tipo de extensión, el nombre respectivo “nombre.html” si usteddesea guarda
todos los archivos con la cual usted va a trabajar en una sola carpeta o en el escritorio.
4.- Una vez guardado debemos de confirmar si se guardó correctamente en el lugar señalado,
no seolvide de sacar el check en Opciones de Carpeta, en la pestaña VER, opción ocultar las
extensiones
5.- En Sublime Text escribir la estructura de Html y sus respectivas partes principales el Head,Body.
6.- Conceptos
HEAD
Este elemento está determinado por las etiquetas y . Dentro de las
mismas queda determinada la sección head la cual contiene toda la información sobre
eldocumento.
Esta información no será mostrada por el navegador pero es de suma importancia para
los navegadores y para los motores de búsqueda.
De acuerdo a los estándares de HTML solo un número reducido deetiquetas pueden
incluirse en la sección head:
1.
2.
3.
4.
5.
6.