Desarrollador Web

DESARROLLADOR WEB
¿QUÉ ES EL DESARROLLO WEB?
Consiste en crear soluciones tecnológicas que se ejecutarán en un navegador (como FIREFOX/CHROME,

EDGE O SAFARI). Por este motivo es diferente a otro tipo de Programación, porque un navegador funciona de
una manera particular y la información debe viajar a través de una Intranet o Internet.
A gran escala el Desarrollo Web se divide en 2 categorías que se complementan entre sí para formar una página
web.
FRONTEND El Desarrollo Frontend se encarga del lado delantero o frontal, la parte que vemos, se
incluyen todos los elementos gráficos como colores, fondos o animaciones que conforman el diseño o estructura
de la página, es decir, la parte visual.
BACKEND El Desarrollo Backend se encarga de todas las interacciones que ocurren detrás de lo
que ve el usuario. Básicamente guardar/procesar toda la información recibida, manejar la conexión con el
servidor y lograr una carga correcta de la página para el usuario.
Para tener mi propia página web subida en la web, se necesitará un DOMINIO y un HOSTING.
Dominio consiste en la dirección de la página y el Hosting corresponde a un computador con los programas
necesarios instalados para poder desplegar mi web. Una vez listos los contenidos para mi web se transfieren al
hosting, se enlaza el hosting con el Dominio y será posible acceder a la página creada.
¿Cómo se conectan todos estos elementos?
1
HTML html: HiperText Markup Language
Lenguaje de Marcas de HiperTexto.
CSS Cascading Style Sheets.

Hojas de Estilo en Cascada.
2
PÁGINA WEB Documento de texto con códigos HTML donde entregamos
el contenido y el código CSS que da forma, color y
posición, entre otras características.
1 <!DOCTYPE html>
2 <html>
Ajusta los códigos para trabajarlos
3 <head> en inglés y no en otro idioma.
4 <meta charset="utf-8">
5 <title>INSERTAR TÍTULO DEL ARCHIVO</title>
6 </head>
7 <body>
Etiqueta <h1> - <h6>: por orden de prioridad le da
8 <h1> ESCRIBIR TÍTULO PRINCIPAL</h1>
el tamaño correspondiente a cada título y subtítulo.
9 <h2> subtitle </h2>
10 <p> ESCRIBIR PÁRRAFO/PARAGRAPH </p> <br> Etiqueta <p></p>: Para escribir párrafos
completos.
11 </body> Etiqueta <br>: Para hacer saltos de escritura
(punto aparte), agregar al final de </p>.
12 </html>
Cualquier contenido que sea visible en tu página web debe ir entre la etiqueta de <body> que abre y la etiqueta
de </body> que cierra.
ÉNFASIS DE TEXTO
 Etiqueta <em> </em>: Para resaltar palabras con CURSIVA.

 Etiqueta <strong></strong>: Para resaltar palabras con NEGRITA.
Al usar ambas etiquetas juntas:

<strong><em> … </em></strong>
3
LISTAS
Para hacer listas:
 Empezar con la etiqueta <ul> Unordered List /Lista Desordenada
Ésta le indica al ordenador que enliste cada elemento con una viñeta.
 Empezar con la etiqueta <ol> Ordered List/Lista Ordenada

Ésta le indica al ordenador que numere cada elemento de la lista.
 Aparece/insertar debajo de <ul>/<ol> la etiqueta <li> </li> Nuevo elemento de la lista
Usar esta etiqueta para agregar cada uno de los elementos de la lista.
10 <ul/ol>
11 <li> … </li>
12 <li> … </li>
13 <li> … </li>
14 </ul>/</ol>
El ordenador se encarga automáticamente de asignar la numeración y el orden correspondiente.
IMÁGENES
 Usar la etiqueta <img src = “ “ > img: Imagen.
src: Set redundancy compression, en términos
prácticos es un atributo que representa la fuente.
“ “: Aquí se inserta la URL.
*Una etiqueta <img> no debe ir directamente debajo de una <ul> o una <ol>. Debe ir ya sea dentro de una <li> o
después de que termine la lista.
En KHAN ACADEMY el “ ” dispone un selector de imágenes predeterminadas , al seleccionar una aparecerá

la URL(http) de dicha imagen.
O bien se pueden utilizar imágenes –sólo- de WIKIPEDIA, agregando la URL (upload) de ésta en donde
corresponda.
URL: Uniform Resource Locator.
Localizador Uniforme de Recursos.
Dirección especifica que se asigna a cada uno de los recurso disponibles en la red, para que puedan ser
localizador o identificados en la World Wide Web (WWW.)
4
HTTP: HyperText Transfer Protocol.
Protocolo de comunicación que permite las transferencias de información con la WWW.
 ¿Qué hacer cuando el servidor de la imagen falla?

Las etiquetas de imagen tienen otro atributo= alt=””
ALT, se usa para decirle a los servidores cuál es el texto alternativo para mostrar en lugar de una imagen y es
de mucha utilidad para personas invidentes.
 Tamaño
Otro atributo es width/height=”n° ” que permiten redimensionar el tamaño de la imagen, pero solo haciendo el
uso de uno de ellos.
En definitiva:
<img src = “URL “ alt=”Descripción de la imágen “ width=”n°”>;
CSS
CSS Básico
Cascading Style Sheets
Hojas de Estilo en Cascada
Es una forma de definir los estilos (colores, diseños, etc.) que vamos a aplicar a las diferentes partes de de la
página web.
Incorporamos CSS dentro de HTML, pero no es realmente HTML.
 Colores de los encabezados:
Luego de la etiqueta <tittle> </tittle>, insertar etiqueta <style> y:
5
SELECTOR
PROPIEDAD VALOR DE PROPIEDAD
DECLARACIÓN
 Junto con cada selector, añadir una { y a continuación ingresar la propiedad y su valor correspondiente,
y para continuar cerrar con } cada uno de los selectores.
Atributo “background-color”= sirve para poner color de fondo al título/subtítulo.

Atributo “color”= sirve para cambiar el color de las letras.
 Usar espectro de color “rgb( );” (red, Green, blue) para definir el color que se desea.
 Para cambiar el color de fondo de toda la página, hacer lo mismo en la etiqueta <body>
 Agregar una etiqueta ID:

Para decirle al navegador exactamente cuál de los elementos de la página estamos seleccionando para aplicar
determinada propiedad y así no aplique el mismo estilo a todo(s).
El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su
propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas
de estilo (con CSS).
El valor de este atributo es una cadena de caracteres opaca: es decir, el autor del sitio no debe usarlo para
proporcionar información.
El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen
espacios en blanco como si los espacios fueran parte del ID. Los elementos pueden tener sólo un ID definido
mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser
definidos de otra forma.
6
 Seleccionar por ID:
- Poner el cursor en la etiqueta determinada y espacio:
- Ejemplo: etiqueta <p> + id=” “
<p id=”china-history “> en el entrecomillado es necesario escribir una referencia/descripción
que no sea muy larga y sin espacios de por medio, aun cuando si se pueden usar puntos y/o
guiones.
- Luego para utilizar dicho ID es necesario:

Insertar en el apartado <style> junto con el código CSS:
Hashtag + la referencia/descripción + {
Ejemplo: #china-history{
color: rgb( );
background-color: green;
*El Hashtag le dice al navegador que corresponde a un ID.
*Los navegadores distinguen los nombres de ID´s escritos en mayúsculas o minúsculas. En estos
apuntes se recomienda utilizar únicamente minúsculas.
*ID´s deben ser únicos.
 CLASES
Una clase es básicamente una manera de asignar un elemento particular a un grupo y puedes asignar tanto
elementos como quieras a un grupo. Para añadir una clase, necesitamos añadir un atributo de clase, como lo
hicimos con ID´s.
Hace referencia a un selector de clase, que se puede atribuir a todos los elementos de un HTML para luego
aplicar estilos a los elementos marcados con esa clase usando hojas de estilo o CSS a través “class selectors” o
usando Javascript a través de funciones.
Los atributos globales son atributos comunes a todos los elementos HTML; pueden usarse en todos los
elementos, aunque pueden no tener efecto en algunos de ellos.
Usando en un documento HTML etiquetas como class="nombre-clase", puedes modificar de forma
automática, en pocas línea de código, el estilo de todos los elementos que tengan dicha clase usando CSS.
Dichas modificaciones pueden hacerse también usando Javascript.
 Cambiar el ID de la etiqueta:
Ejemplo: <p id=” “>
<p class” añadir descriptor”> y añadir dicho descriptor a todas las etiquetas que
correspondan.
 Añadir regla CSS:
Borrar selector ID anterior (que se encuentra en <style>), y en vez de poner # se usa . (punto), se añade o el
descriptor “ “, la { y el color.
Ejemplo:
<p class=”china-history>
<style>
.china-history{
color: rgb( )
7
*Los navegadores distinguen los nombres de Clases escritos en mayúsculas o minúsculas. En estos apuntes se
recomienda utilizar únicamente minúsculas.
*Igualmente se pueden usar en etiquetas <strong> y <em>.
VINCULOS
HTML HT: HyperText
El hipertexto es una estructura no secuencial que permite crear, agregar, enlazar y compartir
información de diversas fuentes por medio de enlaces asociativos y redes sociales. El hipertexto es texto que
contiene enlaces a otros textos.
La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas
que van a otros documentos (lexías). Si el usuario selecciona un hipervínculo, el programa muestra el
documento enlazado. Otra forma de hipertexto es el stretchtext que consiste en dos indicadores o aceleradores y
una pantalla. El primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla.
El hipertexto no está limitado a datos textuales, se pueden encontrar dibujos del elemento especificado o
especializado, sonido o vídeo referido al tema. La World Wide Web es la red de hipertexto más amplia y
popular. El programa que se usa para leer los documentos de hipertexto en la web se llama navegador, browser,
visualizador o cliente, y cuando el lector o usuario sigue un enlace, se dice que está navegando por la web. El
hipertexto es una de las formas de la hipermedia, enfocada en diseñar, escribir y redactar texto en un medio.
 Utilizar etiquetas <a> </a> de ANCLA
 <a href=”url”> INSERTAR DESCRIPTOR/TÍTULO DEL </a>
href = Hiper Referencia.
URL: Esructura URL Absoluta:
http=protocolo+dominio+ruta para encontrarla en el servidor.
 Para que el navegador abra el enlace en una nueva ventana:

< a target=”_blank” href=”url” >INSERTAR DESCRIPTOR/TÍTULO DEL ENLACE </a>
 Para agregar imágenes:

< a img src=”url imagen”> </a>
VÍNCULOS INTERNOS
Ponerle atributos ID´s (#) a tablas de contenidos y/o enlaces muy largos y diversos que se refieren a un mismo
tema.
EJ: <li> <a href=”#descriptor”> Título </a> </li>
…
<h2 id=”descriptor”>Título </h2>
8
TABLAS
 FILAS
 COLUMNAS
ETIQUETAS:
1
2
3
4 <table>
5 <thead> <thead>= Área de encabezado.
6 <tr> <tr>= Para cada fila.
7 <th>+TÍTULO DE LA FILA</th> <th>= Insertar el título de la fila.
8 </tr>
9 </thead>
10 <tboody> <boody>= Reglones de datos.
11 <tr> <tr>= Para cada reglón
12 <td>+DATOS DE LA FILA CORRESPONDIENTE</td> agregar esta etiqueta, de manera que
13 </tr> se separen.
14 </tboody> <td>= Ingresar los datos .
COMENTARIOS EN HTML
Para dotar de información –no necesariamente visible en el FrontEnd-, pero que le será de utilidad a quien lea el
código de mi página web:
< ! _ _ “insertar información y/o links que correspondan a la información que se quiere acotar”_ _>
www.csszengarden.com
PROPIEDADES FONT-FAMILY DE CSS

La propiedad font-family especifica la fuente para un elemento.
La propiedad font-family puede contener varios nombres de fuente como un sistema "alternativo". Si el
navegador no admite la primera fuente, intenta con la siguiente fuente.
Hay dos tipos de nombres de familias de fuentes:
 Family-name: una familia de fuentes específica como "times", "courier", "arial", etc.
 Generic-family: un grupo de familias de fuentes con un aspecto como "serif", "sans-serif", "cursive",
"fantasy", "monospace".
Comience con la fuente que desea, y siempre termine con una familia genérica, para permitir que el navegador
elija una fuente similar en la familia genérica, si no hay otras fuentes disponibles.
Nota: separe cada valor con una coma.
Nota: Si el nombre de una fuente contiene espacios en blanco, debe citarse. Se deben usar comillas simples
cuando se usa el atributo "estilo" en HTML.
El servidor usa las Fuentes predeterminadas del computador, no de quien lo crea.
9
Es necesario especificare tipo de letra y su familia en caso que otra computadora no lo reconozca.
Ejemplo:
< style>
p{ fuente
font-family: times, serif; font-size:14pt; font-style:italic";
}
familia
Se especifica más de una familia de fuentes en una lista separada por comas:
.serif {
font-family:"Times New Roman", Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
*Usar la etiqueta body en <style> para aplicar el mismo tipo de fuente a toda la página.
10
11
PROPIEDAD FONT-SIZE DE CSS
Para cambiar el tamaño de la Fuente, CSS reconoce 10 unidades de tamaño, generalmente se usará
PIXELES(px).
font-size: n° px
Importante recordar que el navegador ofrece estilos y tamaños predeterminados de Fuente para los textos.
Al aplicar el atributo CSS a la etiqueta “body”, se modificará el tamaño de las fuentes (y en general todos los
demás atributos) de toda la página, incluyendo los Títulos, los cuales adecuarán su tamaña al resto del texto.
Unidad “em”: unidad relativa que le corresponde a los títulos, lo que genera que estos se correspondan con el
tamaño en pixeles.
Ejemplo:
body {
font-size: 11px Em se multiplica por los pixeles, por lo tanto,

h2 { h2 corresponderá a 22px respecto de los
otros textos.
Font-size: 2em
ESTILOS DE FUENTE Y PROPIEDADES ABREVIADAS DE CSS
- En vez de usar la etiqueta <strong>(negrita):
Usar el atributo font-weight: bold en la regla de la etiqueta <style> que corresponda.
- En vez de usar la etiqueta <em>(cursiva):
Usar el atributo font-style: italic en la regla de la etiqueta <style> que corresponda.
- Shorthand o Abreviado:
Es posible agrupar todas las propiedades en una sola –propiedad-.
Ejemplo:
p{
font: italic, 13px, fantasy;
- Cambiar el espacio entre líneas: usar la propiedad
line-height: n° px;
line-height: n° em; esta unidad hace más grande el espaciado.
12
- Centrar el texto:
text-align: center;
- Subrayar:
text-decoration: underline;
- También se puede usar CSS para anular estilos predeterminados del navegador:
Ejemplo:
text-decoration: none
 Buscar más propiedades de CSS. Hay muchísimas. Por ejemplo “CSS Text shadow”.
HERENCIA
Algunas propiedades se heredan de manera que pasan a otras etiquetas, sólo con poner propiedades en la
etiqueta “body” justo a continuación de <style>.
13

Desarrollador Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollador Web

Cargado por

Copyright:

Formatos disponibles

DESARROLLADOR WEB

¿QUÉ ES EL DESARROLLO WEB?

Consiste en crear soluciones tecnológicas que se ejecutarán en un navegador (como FIREFOX/CHROME,

¿Cómo se conectan todos estos elementos?

CSS Cascading Style Sheets.

5 <title>INSERTAR TÍTULO DEL ARCHIVO</title>

 Etiqueta <em> </em>: Para resaltar palabras con CURSIVA.

Al usar ambas etiquetas juntas:

 Empezar con la etiqueta <ol> Ordered List/Lista Ordenada

El ordenador se encarga automáticamente de asignar la numeración y el orden correspondiente.

En KHAN ACADEMY el “ ” dispone un selector de imágenes predeterminadas , al seleccionar una aparecerá

 ¿Qué hacer cuando el servidor de la imagen falla?

<img src = “URL “ alt=”Descripción de la imágen “ width=”n°”>;

PROPIEDAD VALOR DE PROPIEDAD

Atributo “background-color”= sirve para poner color de fondo al título/subtítulo.

 Agregar una etiqueta ID:

- Luego para utilizar dicho ID es necesario:

 Para que el navegador abra el enlace en una nueva ventana:

 Para agregar imágenes:

PROPIEDADES FONT-FAMILY DE CSS

font-size: 11px Em se multiplica por los pixeles, por lo tanto,

ESTILOS DE FUENTE Y PROPIEDADES ABREVIADAS DE CSS

- En vez de usar la etiqueta <strong>(negrita):

Usar el atributo font-weight: bold en la regla de la etiqueta <style> que corresponda.

- En vez de usar la etiqueta <em>(cursiva):

Usar el atributo font-style: italic en la regla de la etiqueta <style> que corresponda.

- Cambiar el espacio entre líneas: usar la propiedad

line-height: n° em; esta unidad hace más grande el espaciado.

También podría gustarte