PR Informe Nbarbanoj

Neus Barbanoj Fernández
Estudiant de Múltimedia
Pràctica de Llenguatge i estandars web
HTML I CSS
Explicació d’us
En aquesta pràctica final he posat en practica totes les habilitats apreses durant el curs,
també he intentat fer la versió mobil, però el menú hamburguesa al resistir-se, ho he deixat
com està a la pantalla en gran.
La distribució del HTML, és clara, he fet una distribució de header, y footer dins el body, per
identificar els diferents elements, i perquè aquests dos havien d’estar en un width:100%.
<header>
<div id="cap">
<div id="logo1">
<div id="logo"><a href="index.html"><img src="img/logo.png"
alt="icono"></a>
</div>
</div>
El primer element del header, és el logo de la web, que en el css, va aliniada a l’esquerra.
<div id="pl">
<span id="span-a"><a href="">Catàleg</a>
</span>
<div id="span-b"><a href=""></a>
<form>
<input type="text" value="Cercador..." onfocus="if (this.value == 'Buscar...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Buscar...';}" />
<input type="button" value="Ir" />
</form></div>
<span id="span-c"><a href="">sing up</a>
</span>
<span id="span-d"><a href="">login</a>
</span>
</div>
<div id="xarxes">
<span id="span-fb"><img src="img/ins.png" alt="icono">
</span>
<span id="span-tw"><img src="img/pi.png" alt="icono">
</span>
<span id="span-pi"><img src="img/tw.png" alt="icono">

</span>
<span id="span-ins"><img src="img/fb.png" alt="icono">

</span>
</div>
</div>
</header>
Amb els <span> faig la creació dels botons, tant de xarxes com els genèrics.
<body>
<div id="container">
<div id="lateral">
<ul>
<li><a href="llistat_cursos.html">Arte y humanidades
</a></li>
<li><a href="">Negocios</a></li>
<li><a href="">Ciencias de la computación</a></li>
<li><a href="">Ciencias de datos</a> </li>
<li><a href="">Ciencias biológicas</a></li>
<li><a href="">Matemáticas y lógica</a></li>
<li><a href="">Desarrollo personal, Idiomas </a></li>
</ul>
</div>
<div id="central">
<h2><a href="index.html">Fill d'Ariadna</a></h2>
<div class="lista">
<h3>El budismo y la psicología moderna</h3>
<p>Este curso se centra en cuatro períodos clave o temas de la historia. Cada semana,
una breve prueba pondrá a prueba tu conocimiento de los conceptos, y una breve tarea
reflexiva te dará la oportunidad de analizar las preguntas de reflexionar sobre los conceptos
budistas. Este es un curso dirigido a estudiantes interesados en aprender más sobre
filosofía y budismo y a personas interesadas en esta doctrina. No se requiere experiencia
previa.
</p>
</div>
<div class="caracteristicas">
<form class="form" method="post" action="#">

<h4>Antes de comenzar queremos saber algo más de ti. Por favor,
rellena este cuestionario:</h4>
<fieldset>
<div class="form-row">
<label> ¿Dónde nos has conocido?</label>
<input type="text" name="com" placeholder="Dónde">
</div>
<label> ¿Cuáles son tus expectativas del curso?</label>
<textarea name="El seu comentari Aquí" placeholder="Ponga su comentario
aquí" rows="10" cols="50"></textarea>
</div>
<label> Dedicación semanal que has planificado:</label>
<select name="dropdown">
<option>1 a 2 horas</option>
</select>
</div>
</fieldset>
<div class="form-row form-last-row">
<button type="submit">Borrar dades</button>
</div>
<button type="submit">Enviar</button>
</div>
</form>
</div>
</div>
</div>
</body>
Dins el body, he creat diversos elements, entre ells un menú lateral, el central, i a partir
d’aquí he creat un formulari si era necessari, o altres descripcions dels cursos.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
header{
background-color:#EFFBF8;
width: 100%;
height: 180px;
}
#container{
width: 960px;
margin:0 auto;
margin-top: 0.5em;
}
El body té un element anomenat, container, que és el que ocupa la caixa central en tota la
web. Per tal de centrar els elements dins una mateixa caixa. I cada element apartid d’aquí
tenen marges per el “padding”.
<footer>
<table>
<tbody>
<tr>
<td><a href="">Acerca de</a></td>
<td><a href="">Socios</a></td>
<td><a href="">Términos</a></td>
</tr>
<tr>
<td><a href="">Liderazgo</a></td>
<td><a href="">Mentores</a></td>
<td><a href="">Privacidad</a></td>
</tr>
<tr>
<td><a href="">Empleo</a></td>
<td><a href="">Desarolladores</a></td>
<td><a href="">Ayuda</a></td>
</tr>
<tr>
<td><a href="">Catálogo</a></td>
<td><a href="">Traductores</a></td>
<td><a href="">Accesibilidad</a></td>
</tr>
<tr>
<td><a href="">Certificados</a></td>
<td><a href="">Probador Beta</a></td>
<td><a href="">Prensa</a></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</footer>
Finalment tenim un footer, a on tenim una taula per ordenar millor els elements que hi van.
Aquesta caixa té un css:
table{
margin:0 auto;
width: 90%;
}
td {
width: 80%;
height: 20px;
text-align: center;
color:#ffffff;
td a{
text-decoration: none;
color:#ffffff;
Com teniem un altre caixa de caracteristiques del curs, he creat un div anomenat
caracteristiques, i tenim un altre css per aquesta,
.caracteristicas table {
width: 100%;
margin: 0 auto;
margin-bottom: 1em;
margin-top: 2em;
}
.caracteristicas th, td {
width: 30%;
height: 30px;
text-align: left;
padding:1em 2em;
color:#000000;
.caracteristicas th{
background-color: #A9F5E1;
}
.caracteristicas td{
background-color: #f0f0f0;
}
.caracteristicas td a{
color:#000000;
}
Cada element de les pàgines html, está identificat per separat, però he intentat agrupar al
màxim els elements de mateixa semblança.
El formulari:
.form{
padding: 1em 2em;

background-color: #ffffff;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
border-radius: 1em;
margin-bottom: 2em;
}
.form h4{
margin-left: 2em;
margin-right: 2em;
font-style: italic;
}
.form.sub{
color:blue;
}
.form .form-row{
display: block;
text-align: left;
margin-bottom: 1em;
margin-left: 2em;
}
.form-row textarea{
box-sizing: border-box;
width: 80%;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding:1em 2em;
border: 1px solid #dbdbdb;
margin-top: 1em;
margin-right: 2em;
margin-left: 2em;
}
.
.form input,
.form select
.form label
{
box-sizing: border-box;
width: 80%;
padding:1em 2em;
border: 1px solid #dbdbdb;
margin-right: 2em;
}
.form label{
padding:2em 1em;
margin-bottom: 1em;
.form button{
display: block;
border-radius: 2px;
background-color:#A9F5E1;
color: #000000;
font-weight: bold;
border-radius: 3em;
width: 30%;
float:right;
margin-top: -2.7em;
padding: 14px 22px;
border: 0;
cursor: pointer;
}
.form button:hover{
margin-right: 1em;
}
.form ::-webkit-input-placeholder {
color: #999;
}
.form ::-moz-placeholder {
color: #999;
opacity: 1;
}
.form :-ms-input-placeholder {
color: #999;
}
fieldset{
border:none;
background-color:#f6f6f6;
margin-top: 1em;
border-radius: 15px;
padding: 2em 1em;
margin-bottom: 1em;
}
El formulari :

<fieldset>
</div>
</div>
</select>
</div>
</fieldset>
</div>
</div>
</form>
El formulari no deixa de ser unes caixes, per elements separats segons ens convingui, on
des de el css podem treballar distancies i sombres, però m’agrada treballar per tal de donar
personalitat a aquest.
El html i el css, és veritat que són curs, he treballat els hovers, els colors, i els efectes dels
hover per els diferents botons, per donar dinamisme.
En les quatre pàgines he treballat elements de llista, de formulari, taules i els estandards
web recomanats. He pasat la web al verificador, i finalment he aconseguit que no hi hagi
errades. Però ara si, segueixo tenint problemes amb el servidor, tot i que he penjat la web
finalment.
Espero que la pugui visualitzar, i de no ser així, faci’m-ho saber per tal de que pugui probar
a pujar-la tot i que estigui fora de plaç.
BENVINGUDA HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Benvinguda al curs</title>
<meta name="PR_nbarbanoj" content="Practica final" />
<link href="css/estils.css" rel="stylesheet" type="text/css" />
<link href="img/..." rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
</head>
<header>
<div id="cap">
<div id="logo1">
<span id="title">Learn On</span>
alt="icono"></a>
</div>
</div>
<div id="pl">
</span>
<form>
</form></div>
</span>
</span>
</div>
<div id="xarxes">
</span>

</span>

</span>

</span>
</div>
</div>
</header>
<body>
<div id="lateral">
<ul>
</a></li>
</ul>
</div>
<div id="central">
<div class="lista">
<h3>El budismo y la psicología moderna</h3>
<p>Este curso se centra en cuatro períodos clave o temas de la historia. Cada semana,
una breve prueba pondrá a prueba tu conocimiento de los conceptos, y una breve tarea
reflexiva te dará la oportunidad de analizar las preguntas de reflexionar sobre los conceptos
budistas. Este es un curso dirigido a estudiantes interesados en aprender más sobre
filosofía y budismo y a personas interesadas en esta doctrina. No se requiere experiencia
previa.
</p>
</div>

<fieldset>
</div>
</div>
</select>
</div>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<footer>
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</footer>
</html>
DESCRIPCIÓ CURS
<!DOCTYPE html>
<html lang="es">
<head>
<title>Descripcio del curs</title>
maximum-scale=1">
</head>
<body>
<header>
<div id="cap">
<div id="logo1">

alt="icono"></a>
</div>
</div>
<div id="pl">
</span>
<form>
</form></div>
</span>
</span>
</div>
<div id="xarxes">
<span id="span-ins"><img src="img/ins.png" alt="icono">
</span>
<span id="span-pi"><img src="img/pi.png" alt="icono">

</span>
<span id="span-tw"><img src="img/tw.png" alt="icono">

</span>
<span id="span-fb"><img src="img/fb.png" alt="icono">

</span>
</div>
</div>
</header>
<div id="lateral">
<ul>
</a></li>
</ul>
</div>
<div id="central">
<div class="lista">
<h3>Descripción larga:</h3>
<p>El Dalai Lama ha dicho que el budismo y la ciencia son profundamente compatibles y
ha alentado a los académicos occidentales a examinar críticamente tanto la práctica
meditativa como las ideas budistas sobre la mente humana. Varios científicos y filósofos
han aceptado este desafío. Se han hecho escáneres cerebrales de meditadores y análisis
filosóficos de doctrinas budistas. Incluso ha habido discusiones sobre Darwin y Buda: ¿las
descripciones acerca de la mente y de la condición humana y hechas por el budismo
temprano y tienen sentido a la luz de la psicología evolutiva? </p>
<p>Este curso examinará cómo le está yendo al budismo bajo este escrutinio. ¿Los
neurocientíficos están comenzando a entender cómo "funciona" la meditación? ¿Tal
comprensión validaría la meditación, o las explicaciones físicas de la meditación podrían
minar la significación espiritual que se le atribuye? ¿Y cómo se sostienen algunas de las
afirmaciones budistas básicas sobre la mente humana? Prestaremos especial atención a
algunas doctrinas altamente contraintuitivas: que el yo no existe, y que gran parte de la
realidad percibida es, en cierto sentido, ilusoria. ¿Estas afirmaciones, por radicales que
parezcan, tienen cierto sentido a la luz de la psicología moderna? ¿Y cuáles son las
implicaciones de todo esto para la forma en que debemos vivir nuestras vidas? ¿Puede la
meditación hacernos no sólo más felices, sino mejores personas?</p>
</div>
<table>
<tbody>
<tr>
<th colspan="3">El budismo y la psicología moderna</th>
</tr>
<tr>
<td>Creado por:</td>
<td><div class="img-table"><img src="img/logo_universitat.png"
alt="icono"></div></td>
<td>Universidad de Virginia</td>
</tr>
<tr>
<td >Enseñado por:</td>
<td><div class="img-table"><img src="img/professor_curs.jpg"
alt="icono"></div></td>
<td><span class="cursiva"><a href="">Robert Wright.</a> Departamento de
Historia de las Religiones</span></td>
</tr>
<tr>
<th colspan="3">Características</th>
</tr>
<tr>
<td>Compromiso:</td>
<td colspan="2">2-5 horas/semana</td>
</tr>
<tr>
<td>Idioma: Inglés</td>
<td colspan="2">Subtítulos: Español</td>
</tr>
<tr>
<td>Como aprobar: </td>
<td colspan="2">a Aprueba todas las tareas calificadas para completar el
curso.</td>
</tr>
<tr>
<td>Calificaciones del usuario:</td>
<td colspan="2"><span class="cursiva">4.8 <a href="">Ver lo que los estudiantes
dijeron</a></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" id="blank"></td>
<td id="span-4"><a href="benvinguda.html">Inscripció</a></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<footer>
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</footer>
</body>
</html>
INDEX.HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Pagina Principal</title>
maximum-scale=1">
</head>
<header>
<div id="cap">
<div id="logo1">

alt="icono"></a>
</div>
</div>
<div id="pl">
</span>
<form>
</form></div>
</span>
</span>
</div>
<div id="xarxes">
</span>

</span>

</span>

</span>
</div>
</div>
</header>
<body>
<div id="lateral">
<ul>
</a></li>
</ul>
</div>
<div id="central-1">
<h2>Cientos de cursos especializados en Arte y
humanidades, Ciencias de la computación y mucho más</h2>
<img src="img/study.jpg" alt="icono">
<div id="noticia1"><h3>Novedad: El budismo y la psicología

moderna.</h3>
<p>El nuevo curso de El Budismo y la psicología moderna está
diseñado por la Universidad de Virginia. Inscríbete en este curso que comienza el 23 de
noviembre.</p>
<span class="cursiva"><a href="llistat_cursos.html">Ir al curso
</a></span>
</div>
<div id="noticia2"><h3>Próximamente: ampliamos el catalogo de

cursos sobre filosofía antigua.</h3>
<p>Ampliamos la oferta sobre filosofía antigua, gracias a la
colaboración de la Universidad de Oxford.</p>
<span class="cursiva"><a href="">Ir a los cursos</a></span>
</div>
<div id="noticia3"><h3>Obtén tu certificado.</h3>
<p>A partir de ahora puedes obtener tu certificado online una vez completado
tu curso </p>
<span class="cursiva"><a href=""> Obtén información </a> </span>
</div>
</div>
</div>
</body>
<footer>
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</footer>
</html>
LLISTAT DE CURSOS
<!DOCTYPE html>
<html lang="es">
<head>
<title>Llistat de cursos</title>
maximum-scale=1">
</head>
<header>
<div id="cap">
<div id="logo1">

alt="icono"></a>
</div>
</div>
<div id="pl">
</span>
<form>
</form></div>
</span>
</span>
</div>
<div id="xarxes">
</span>

</span>

</span>

</span>
</div>
</div>
</header>
<body>
<div id="lateral">
<ul>
</a></li>
</ul>
</div>
<div id="central">
<div id="menu">
<span id="span-1"><a href="">Arte</a></span>
<span id="span-2"><a href="">Historia</a></span>
<span id="span-3"><a href="">Literatura</a></span>
</div>
<div class="lista">
<span class="imagen"><img src="img/curs_1.jpg"
alt="icono"></span>
<h3><a href="descripcio_curs.html">El budismo y la psicología moderna</a></h3>
<h4>Universidad de Virginia
</h4>
<span class="cursiva">Acerca de este curso:</span>
<p>El Dalai Lama ha dicho que el budismo y la ciencia son profundamente compatibles y
ha alentado a los académicos occidentales a examinar críticamente tanto la práctica
meditativa como las ideas budistas sobre la mente humana. Varios científicos y filósofos
han aceptado este desafío. Se han hecho escáneres cerebrales de meditadores y análisis
filosóficos de doctrinas budistas. Incluso ha habido discusiones sobre Darwin y Buda: ¿las
descripciones acerca de la mente y de la condición humana y hechas por el budismo
temprano y tienen sentido a la luz de la psicología evolutiva?</p>
</div>
<div class="lista">
<span class="imagen"><img src="img/curs_2.jpg" alt="icono"></span>
<h3><a href="">El Mundo Moderno, Primera Parte: Historia Global desde 1760 a 1910 </a>
</h3>
<h4>Universidad de Princeton</h4>
<span class="cursiva">Acerca de este curso: </span>
<p>Esta es una visión de la Historia Moderna desde una perspectiva global. La Primera
Parte comienza con las revoluciones políticas y económicas de fines de los 1700 y revisa
las transformaciones del mundo durante los 1800. La Primera Parte concluye cuando estos
increíbles cambios parecen ir más allá de la capacidad de las antiguas instituciones para
manejarlos. A lo largo del curso intentamos entender qué está sucediendo, preguntando el
por qué. Las respuestas con frecuencia apuntan a las decisiones humanas.</p>
</div>
<div class="lista">
<h3><a href="">Improvisación en Jazz</a>
</h3>
<h4>Universidad de Berklee</h4>
<p>Aprende los conceptos básicos de la improvisación de Gary Burton, uno de los músicos
de improvisación más reconocidos en el mundo del jazz, incluyendo los procesos mentales,
melódicos y armónicos que contribuyen a las habilidades instintivas que un músico de
improvisación usa cuando realiza un solo. Si bien muchas personas son fanáticas del jazz y
entienden que los músicos a menudo "inventan" las notas que tocan durante una
presentación, la mayoría de las personas -incluidos los músicos, que comienzan a aprender
improvisación- no tienen claro qué procesos exactos han de tener lugar para permitir que
esto suceda. El objetivo de este curso es presentar los conceptos básicos de la
improvisación moderna y cómo dominar las diferentes habilidades musicales y mentales
que hay en juego.</p>
</div>
<div class="lista">
<h3><a href="">Ver a través de las fotografías</a>
</h3>
<h4>Museo de arte moderno (Moma)</h4>
<p>Aunque hacer, compartir y ver fotografías se ha convertido en una segunda naturaleza
para muchos de nosotros, nuestro compromiso con las imágenes no necesariamente nos
hace estar alfabetizados visualmente. Este curso tiene como objetivo abordar la brecha
entre ver y comprender verdaderamente las fotografías mediante la introducción de una
diversidad de ideas, enfoques y tecnologías que influyen en su creación. En este curso
mirarás detenidamente las fotografías de la colección del Museo de Arte Moderno y
escucharás una variedad de perspectivas sobre lo que es una fotografía y las formas en que
se ha utilizado la fotografía a lo largo de sus casi 180 años de historia: como medio de
expresión artística , como una herramienta para la ciencia y la exploración; como un
instrumento de documentación; contar historias y registrar historias; y como un modo de
comunicación y crítica en nuestra cultura cada vez más visual.</p>
</div>
</div>
</div>
</body>
<footer>
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</footer>
</html>

PR Informe Nbarbanoj

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PR Informe Nbarbanoj

Uploaded by

Copyright:

Available Formats

Neus Barbanoj Fernández

<span id="span-pi"><img src="img/tw.png" alt="icono">

<span id="span-ins"><img src="img/fb.png" alt="icono">

<h3>El budismo y la psicología moderna</h3>

<form class="form" method="post" action="#">

padding: 1em 2em;

<form class="form" method="post" action="#">

<span id="span-tw"><img src="img/pi.png" alt="icono">

<span id="span-pi"><img src="img/tw.png" alt="icono">

<span id="span-ins"><img src="img/fb.png" alt="icono">

<h3>El budismo y la psicología moderna</h3>

<form class="form" method="post" action="#">

<div id="logo"><a href="index.html"><img src="img/logo.png"

<span id="span-pi"><img src="img/pi.png" alt="icono">

<span id="span-tw"><img src="img/tw.png" alt="icono">

<span id="span-fb"><img src="img/fb.png" alt="icono">

<div id="logo"><a href="index.html"><img src="img/logo.png"

<span id="span-tw"><img src="img/pi.png" alt="icono">

<span id="span-pi"><img src="img/tw.png" alt="icono">

<span id="span-ins"><img src="img/fb.png" alt="icono">

<div id="noticia1"><h3>Novedad: El budismo y la psicología

<div id="noticia2"><h3>Próximamente: ampliamos el catalogo de

<div id="logo"><a href="index.html"><img src="img/logo.png"

<span id="span-tw"><img src="img/pi.png" alt="icono">

<span id="span-pi"><img src="img/tw.png" alt="icono">

<span id="span-ins"><img src="img/fb.png" alt="icono">

You might also like