Diseño de Páginas Web html - Clase 01

7/28/2019 Diseo de Pginas Web html - Clase 01

1/4

N.S.C.

Institucin Educativa Nuestra Seora del Carmen Huaral Ed. Para el Trabajo: Computacin

Lic. Juan J. Figueroa Muoz [email protected] @juanjohuaral

Diseo de Pginas Web: HTML

El objetivo de este tema es eminentemente prctico y pretende

que si nunca antes has visto HTML tengas una visin general

tras su lectura que te permita empezar a crear tus primeras

pginas web. Este tema esta orientado para empezar a aprenderdiseo web y se orienta a futuros diseadores web, tener unos

conocimientos generales de HTML les puede ser til para

inspeccionar el cdigo fuente de las pginas web con las que

trabajan o a las que generalmente tienen el acceso cotidiano.

QueesHTML?

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las

pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir

texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio

y el fin de cada elemento del documento.

Un documento hipertexto no slo se compone de texto, puede contener imgenes,

sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento

multimedia.

Los documentos HTML deben tener la extensin html o htm, para que puedan ser

visualizados en los navegadores (programas que permiten visualizar las pginas web).

Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de

mostrar a los usuarios las pginas web resultantes del cdigo interpretado.

Estructura interna de una pgina HTML.

Las instrucciones HTML estn encerradas entre los caracteres: < y >.

Muchos elementos HTML requieren una marca de comienzo y otra de finalizacin. Todo

aquello que est fuera de las marcas del lenguaje se imprime en la pantalla (dentro del

navegador).

La estructura bsica de una pgina HTML es:

Cuerpo de la pgina.

Una pgina HTML es un archivo que generalmente tiene como extensin los caracteres

html. Por ejemplo podemos llamar a nuestra primera pgina con el nombre:

pagina1.html

N.S.C.


2/4

N.S.C.



Si observamos toda pgina comienza con la marca: y finaliza con lamarca:

Los fines de marcas tienen el mismo nombre que el comienzo de marca, ms elcaracter /

Una pgina HTML tiene dos secciones muy bien definidas que son la cabecera:

Y el cuerpo de la pgina:

Cuerpo de la pgina.

Todo el texto que dispongamos dentro del aparece dentro delnavegador tal cual lo hayamos escrito.

Todas las pginas tiene como mnimo esta estructura: cabecera y cuerpo. Otra cosa importante es que el lenguaje HTML no es sensible a maysculas y

minsculas, es decir podemos escribirlo como ms nos guste, adems norequiere que dispongamos cada marca en una lnea (podramos inclusiveescribir toda la pgina en una sola lnea! cosa que no conviene ya que somosnosotros quienes tendremos que modificarla en algn momento).

Ejemplo prctico N 01

Problema Cdigo html ResultadoConfeccione una pginacon las marcas mnimasque debe tener y en elcuerpo de la mismadisponga su nombre yapellido.

Juan Figueroa

Juan Figueroa

Salto de lnea

Todo el texto que disponemos en el cuerpo de la pgina aparece en la misma lnea, no

importa si cuando tipeamos la pgina disponemos cada palabra en una lnea distinta

(es decir un navegador no tiene en cuenta la tecla ENTER).

Para indicarle al navegador que queremos que contine en la prxima lnea

debemos hacerlo con el elemento HTML
.

Cuando aparece la marca
el navegador continua con el texto en la lnea

siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como

habamos visto hasta ahora.


Problema Cdigo html ResultadoConfeccione una pginaque muestre los nombresde distintos lenguajes deprogramacin, uno porlnea.

PHP
JavaScript
Java
C
C++

PHPJavaScriptJavaCC++

N.S.C.


3/4

N.S.C.



Prrafo

Un prrafo es una oracin o conjunto de oraciones referentes a un mismo tema. Todo

lo que encerremos entre las marcas

y
aparecer separado por un espacio
con respecto al prximo prrafo.

Dentro de un prrafo puede haber saltos de lnea
.


Problema Cdigo html ResultadoConfeccione unapgina que muestreen un prrafo susdatos primarios(Ap. Y Nom, email,fecha de nac. Y enel otro prrafodatos secundarios

(signo zodiacal,plato preferido ycolor favorito)

Apellidos y Nombres:Figueroa Muoz, Juan Jose
Email: [email protected]

Fech. Nac.: 16 - Mayo

S. Zodiacal: Tauro.
Plato preferido: Arroz con pollo
Color Favorito: Azul

Apellidos y Nombres: Juan JoseFigueroa MuozEmail: [email protected]

Fech. Nac.: 16 Mayo

S. Zodiacal: TauroPlato preferido: Arroz con polloColor Favorito: Azul

Ttulos

Otros elementos HTML muy utilizados son para indicar los ttulos, para esto contamos

con los elementos:

El ttulo de mayor nivel es , es decir el que tienen una fuente mayor (veremos

que es el navegador el responsable de definir el tamao de la fuente, ms adelante

podr ver que uno puede modificar la fuente, tamao, color etc.)

Segn la importancia del ttulo utilizaremos alguno de estos elementos HTML. Requiere

la marca de cerrado del ttulo con la barra invertida como hemos visto.

Confeccionaremos una pgina que contenga un ttulo de primer nivel y luego dos

ttulos de nivel . Definiremos un prrafo para cada ttulo de segundo nivel.


Problema Cdigo htmlConfeccione unapgina donde semuestre las noticiasde un peridico: el

N.S.C.


4/4

N.S.C.



Titulo debe estar enNivel 1, Luegodefinir dos titularesde Segundo Nivelcon los textos de(Noticias Politicas y

NoticiasDeportivas) encada una de estassecciones definirdos titulares detercer nivel con unprrafo cada una,al final de la pginamostrar un ttulo decuarto nivel con elnombre de laempresapropietaria del

peridico.

Semana Santa en el Per y el Mundo.Noticias polticas.

Abugatts sobre Cipriani: Es una semana desubicada para comentariospolticos.

El legislador de Gana Per, Daniel Abugatts, discrep con las recientesdeclaraciones del cardenal Juan Luis Cipriani, en torno al indulto al expresidenteAlberto Fujimori, porque an no termina la Semana Santa y mezcla temaspolticos.
Ronald Gamarra: Cipriani tiene su corazoncito y simpata por elfujimorismo.
El exprocurador anticorrupcin, Ronaldo Gamarra, manifest que las

declaraciones del cardenal Juan Luis Cipriani sobre el indulto a Alberto Fujimorievidencian su simpata que tiene por el exmandatario y por su sectorpoltico.
Cipriani expres a un diario local que el presidente Ollanta Humala tiene queapresurarse en decidir sobre el pedido de indulto humanitario a Alberto Fujimori,el cual, segn el arzobispo de Lima, est suficientemente maduro.
Noticias deportivas Con Paolo Guerrero en el campo: Corinthians venci 2-1 a Sao
Paulo.

El equipo de Paolo Guerreo, Corinthians de Brasil, gan esta tarde el clsico de

la ciudad al vencer al poderoso Sao Paulo por 2-1 con una excelente actuacindel atacante nacional que jug hasta los 57 del encuentro.
Alianza Lima cay 2-1 ante Unin Comercio en Tarapoto.
Alianza Lima perdi el invicto ante el Unin Comercio, en Tarapoto, por lasptima fecha del Descentralizado 2003, tras ir ganado y teniendo la ventaja deun jugador ms en el campo.
Los blaquiazules se pusieron arriba en el marcador a los 8 minutos del primertiempo con gol de Koichi Aparicio, quien grit el gol dedicndoselo a sus padres.
Propiedad: La Republica - Peru.
Actividad 01

Confeccione una pgina donde hablas brevemente de un tema especfico.

La pagina deber contener:

Titulos, prrafos, saltos de lnea y la estructura completa del HTML

Al final de la pagina colocaran: (apellidos y nombres - grado y seccin)

N.S.C.

Diseño de Páginas Web html - Clase 01

Documents

Transcript of Diseño de Páginas Web html - Clase 01