Embed Size (px)
Citation preview
1
HYPER TEXT MARKUP LANGUAGEHTML 1
InstructorUgo Andrés Sánchez Baeza
2
Pagina webCreación de una pagina web.
Las paginas web se crean con el lenguaje HTML (Lenguaje de marcación de hipertexto). Hipertexto es texto, sonido, imágenes y vídeo.
3
Pagina webHTML se escribe en una forma especial de marcación por los símbolos < (menor que) y > (mayor que).
La marcación HTML generalmente viene en pares ej.
<h1> titulo </h1>
La marcación de apretura es <h1>La marcación de cerramiento es </h1>
Algunas vienen simples debido a que representan elementos vacíos. ej. <br>
Representa una línea
4
Pagina webUn navegador web puede leer archivos tipo HTML y mostrarlos en forma organizada para visualizar y escuchar.
El navegador no despliega las marcas de HTML, pero las usa para interpretar el contenido de la pagina.
HTML describe la estructura de una pagina web en forma semántica con las claves de presentación haciéndolo una lenguaje de marcación y no uno de programación.
5
Pagina web
Dirección Web :La URL siglas en inglés de uniform resource locator es un identificador de recursos uniforme.Es el nombre o dirección de la pagina web en internet.
6
Pagina webDirección Web :Aunque todos conocen el www, en una dirección web . No saben su significado y función.
www significa world wide web (red alrededor del mundo).
Su función es identificar una pagina como principal de una institución o empresa.
7
Pagina webDominio :
Un dominio de Internet es una red de identificación asociada a un grupo de dispositivos o equipos conectados a la red Internet.
El propósito principal de los nombres de dominio en Internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada nodo activo en la red, a términos memorizables y fáciles de encontrar. Esta abstracción hace posible que cualquier servicio (de red) pueda moverse de un lugar geográfico a otro en la red Internet, aún cuando el cambio implique que tendrá una dirección IP diferente.
8
Pagina webNombres de Dominio :
Sin la ayuda del sistema de nombres de dominio, los usuarios de Internet tendrían que acceder a cada servicio web utilizando la dirección IP del nodo (por ejemplo, sería necesario utilizar http://192.0.32.10 en vez de http://example.com).
Además, reduciría el número de webs posibles, ya que actualmente es habitual que una misma dirección IP sea compartida por varios dominios.
9
Pagina web http://Todos conocemos el www pero ignoramos el http:// que esta antes, estas letras indican el protocolo a usar en los navegadores.
HyperText Transfer Protocol (Protocolo de transmisión de hipertexto).
El protocolo de visualización por defecto, que viene en todos los navegadores.
10
Pagina webDirección web :La forma básica que conocemos de una dirección de pagina web es ;
http://www.empresa.comYa conocemos el significado de:
http:// (protocolo de transmisión de hipertexto).
www (red alrededor del mundo).
Empresa : Es el nombre de la empresa que adquirió del nombre de dominio.
El ultimo componente es el tipo de empresa, en este caso .com .
Ejemplos webhttp://www.empresa.com
http://www.empresa.net
http://www.empresa.gov
http://www.empresa.edu
http://www.empresa.org
http://www.empresa.mil
11
Pagina webTipos de empresa :.com : empresa de tipo comercial..net : empresa de telecomunicaciones..org : empresa de tipo organización..gov : empresa de tipo gubernamental..edu : empresa de tipo educativo..mil : empresa de tipo militar.
Existen otros tipos, pero estos son los principales y mas comunes.
12
Pagina webPaís en la dirección web :
Las direcciones tienen un ultimo complemento y es el país al que pertenece el dominio, por tanto la dirección web de un país especifico tiene su función al final indicando que la dirección web esta en el país especifico como podemos ver en el listado de enfrente.
Ejemplos web de Colombia.
http://www.empresa.com.co
http://www.empresa.net.co
http://www.empresa.gov.co
http://www.empresa.edu.co
http://www.empresa.org.co
http://www.empresa.mil.co
13
Pagina webListado de nombres de países :
Afghanistan-Afganistan: AFAlbania: ALAlgeria-Argelia: DZAmerican Samoa-Samoa Americana: ASAndorra: ADAngola: AOAnguilla-Anguila: AIAntarctica-Antartida: AQAntigua y Barbuda: AGArgentina: ARArmenia: AMAruba: AWAustralia: AUAustria: ATAzerbaijan-Azerbaiyan: AZBahamas: BSBahrain-Bahrein: BHBangladesh: BDBarbados: BBBelgium-Belgica: BE
Belize: BZBenin: BJBermuda-Bermudas: BMBhutan-Butan: BTBolivia: BOBosnia-Herzegovina: BABotswana: BWBouvet Island-Isla Bouvet: BVBrazil-Brasil: BRBrunei: BNBulgaria: BGBurkina Faso: BFBurma-Birmania: BUBurundi: BIByelorussian Ssr (Bielorussia)-Bielorrusia: BYCanada CACape Verde-Cabo Verde: CVCaroline Islands-Islas Carolina: FMCayman Islands-Islas Caiman: KYChad: TDChile: CLChina: CN
Christmas Island-Isla Christmas: CXCocos Islands-Islas Cocos: CCColumbia-Colombia: COCommercial-Comercial: COMComoros-Comores: KMCongo: CGCook Islands-Islas Cook: CKCosta Rica: CRCorea del Norte: KPCroatia-Croacia: HRCuba: CUCyprus-Chipre: CYCzech.-Republica Checa: CZCzechoslovakia-Checoslovaquia: CSDemocratic Kampuchea-Kampuchea: KHDemocratic Yemen-Yemen del Sur: YDDenmark-Dinamarca: DKDjibouti-Djibuti: DJDominica: DMDominican Republic-Republica Dominicana: DODronning Maud Land: NQEast Timor-Timor Oriental: TP
14
Pagina webEgypt-Egipto: EGEl Salvador: SVEngland-Inglaterra: GBEquatorial Guinea-Guinea Ecuatorial: GQEritrea: EREstonia: EEEthiopia-Etiopia: ETFaeroe Islands-Islas Feroe: FOFalkland Islands-Falkland / Islas Malvinas: FKFiji: FJFinland-Finlandia: FIFrance-Francia: FRFrench Guiana-Guayana Francesa: GFFrench Polynesia-Polinesia Francesa: PFGabon: GAGambia: GMGeorgia: GGGhana: GHGibraltar: GIGreece-Grecia: GRGreenland-Groenlandia: GLGrenada-Granada: GDGuadeloupe-Guadalupe: GPGuam: GUGuatemala: GTGuinea: GNGuinea-Bisseu-Guinea-Bissau: GWGuyana: GY
Haiti: HTHeard y Mc Donald, Islas: HMHonduras: HNHong Kong: HKHungary-Hungria: HUIceland-Islandia: ISIndia: INIndonesia: IDInternational-Internacional: INTIran: IRIraq-Irak: IQIreland-Irlanda: IEIsrael: ILItaly-Italia: ITIvory Coast-Costa de Marfil: CIIslas Canton y Enderbury: CTIslas Virgenes Britanicas: VGIslas exteriores menores (Estados Unidos): UMIslas del Pacifico de los Estados Unidos: PUJamaica: JMJapan-Japon: JPJohnston Island-Johnston, Isla: JTJordan-Jordania: JOKazakhstan-Kazakstan: KKKenya: KEKiribati: KIKuwait: KWKyrgyzstan (Kirgistan)-Kirgistan: KG
Lao People's Democratic Republic-Laos: LALatvia-Letonia: LVLebanon-Libano: LBLesotho: LSLiberia: LRLibyan Arab Jamahiriya-Libia: LYLiechtenstein: LILithuania-Lituania: LTLuxembourg-Luxemburgo: LUMacau-Macao: MOMadagascar: MGMalasia: MYMalawi: MWMaldives-Maldivas: MVMali: MLMalta: MTMarshall Islands-Islas Marshall: MHMartinique-Martinica: MQMauritania: MRMauritius-Mauricio: MUMayotte: YTMexico: MXMicronesia: FMMidway Islands-Midway, Islas: MIMoldova-Moldavia: MDMonaco: MC
15
Pagina webMongolia: MNMontserrat: MSMorrocco-Marruecos: MAMozambique: MZNamibia: NANapal-Nepal: NPNato Field-Otan: NATONauru: NRNetherlands-Holanda: NLNetherlands Antilles-Antillas Holandesas: ANNetwork-Red: NETNeutral Zone-Zona Neutral: NTNew Calidonia-Nueva Caledonia: NCNew Zealand-Nueva Zelanda: NZNicaragua: NINiger: NENigeria: NGNiue: NUOrganizacion sin animo de lucro: ORGNorfolk Island-Norfolk, Isla: NFMarianas del Norte, Islas: MPNorway-Noruega: NOOld Style Arpanet-Arpanet: ARPAOman: OMPacific Islands-Islas del Pacifico: PCPakistan: PKPalau: PWPanama: PAPapua New Guinea-Papua Nueva Guinea: PG
Paraguay: PYPeru: PEPhilippines-Filipinas: PHPitcairn Island-Pitcairn, Isla: PNPoland-Polonia: PLPortugal: PTPuerto Rico: PRRepublic of Korea-Corea del Sur: KRRepublica Centroafricana: CFRepublica Federal de Alemania: DEReunion: RERomania-Rumania: RORussia-Rusia: RURwanda-Ruanda: RWSaint Lucia-Santa Lucia: LCSan Vicente y las Granadinas: VCSamoa: WSSan Marino: SMSao Tome and Principe-Santo Tome y Principe: STSaudi Arabia-Arabia Saudi: SASenegal: SNSeychelles: SCSierra Leone-Sierra Leona: SLSingapore-Singapur: SGSlovakia-Eslovaquia: SQSlovenia-Eslovenia: SISolomon Islands-Islas Salomon: SBSomalia: SOSouth Africa-Sudafrica: ZA
South Georgia-Georgia del Sur: GSSpain-España: ESSri Lanka: LKSt. Helena-Santa Helena: SHSan Cristobal-Nevis-Anguila: KNSaint Pierre y Miquelon: PMSudan: SDSuriname-Surinam: SRSvalbard y Jan Mayen, Islas: SJSwaziland-Suazilandia: SZSweden-Suecia: SESwitzerland-Suiza: CHSyran Arab Republic-Siria: SYTaiwan: TWTajikistan-Tayikistan: TJTerritorio Oceanico de las Indias Britanicas: IOTerritorios Franceses del Sur: TFThailand-Tailandia: THTogo: TGTokelau: TKTonga: TOTrinidad and Tobago-Trinidad y Tobago: TTTunisia-Tunez: TNTurkey-Turquia: TRTurkmenistan-Turkmenistan: TMTurks y Caicos, Islas: TCTuvalu: TV
16
Pagina webUganda: UGUkrainian SSR-Ucrania: UAUniversidades Norteamericanas: EDUUnited Arab Emirates-Emiratos Arabes Unidos: AEUnited Kingdom-Reino Unido: UKUnited Republic of Cameroon-Camerun: CMUnited Republic of Tanzania-Tanzania: TZUnited States-Estados Unidos: US
Unites States Virgin Islands-Islas Virgenes: VIUpper Volta-Alto Volta: HVUruguay: UYUS Government-Gobierno Norteamericano: GOVUS Military-Organismo Militar Norteamericano: MILUSSR-URSS: SUUzbekistan-Uzbequistan: UZVanuatu: VUVatican City State-Ciudad
del Vaticano: VAVenezuela: VEVietnam: VNWake Island-Wake, Isla: WKWallis y Futuna, Islas: WFWestern Sahara-Sahara Occidental: EHYemen-Yemen del Norte: YEYugoslavia: YUZaire: ZRZambia: ZMZimbabwe: ZW
17
Pagina web
Existen muchas formas de realizar las paginas web, pero de la que mas aprendizaje se obtiene y con la que se va a trabajar en este curso es el uso de el Notepad ++.http://notepad-plus-plus.org
18
Pagina webExisten muchas aplicaciones, tales como Dreamweaver que permiten desarrollar las paginas web, pero el objetivo aquí es el aprendizaje.Así que usaremos el Notepad ++ que es gratuito y permite entender lo que se esta haciendo.
19
Pagina web<!DOCTYPE HTML><html><head>
Contenido técnico
</head><body>
Contenido para ser visualizado en el navegador.
</body></html>
Esqueleto de pagina web :Toda pagina web tiene un encabezado, una cabeza y un cuerpo.
<!Doctype HTML>Permite indicar el trabajo con un documento HTML.
<html> Abre el documento que se va a trabajar
<head>Es la parte de encabezamiento, donde va la información técnica para que sea encontrada por los motores de búsqueda y permiten la identificación de la pagina.
Pagina web<body>Aquí se encuentra todo lo que se puede visualizar en el navegador que utilicemos.
Aquí es donde se encuentra el contenido de la pagina web, los enlaces y todo aquello que deseamos colocarle a la pagina.
<!DOCTYPE HTML><html><head><title>Esqueleto de pagina web</title></head><body><h3>Contenido para ser visualizado en el navegador.</h3></body></html>
21
Pagina web
Encabezados :Con la etiqueta <h#> y debemos cerrarla con </h#>.
Indicando que es el titulo o subtitulo de un texto.
<!DOCTYPE HTML><html><head><title>Encabezados</title></head><body><h1>Encabezado 1</h1><h2>Encabezado 2</h2><h3>Encabezado 3</h3><h4>Encabezado 4</h4><h5>Encabezado 5</h5><h6>Encabezado 6</h6></body></html>
22
Pagina webPárrafo :El párrafo y el manejo de este se hace utilizando la marca <p> y cerrándola de acuerdo al lugar donde termina el párrafo con </p>.<!DOCTYPE HTML><html><head><title>parrafos</title></head><body><p>Colombia, oficialmente República de Colombia, es una república unitaria de América situada en la región noroccidental de América del Sur. Está constituida en un estado social y democrático de derecho cuya forma de gobierno es presidencialista. Está organizada políticamente en 32 departamentos descentralizados y un Distrito capital. La capital de la república es Bogotá.</p><p>La superficie de Colombia es de 2.129.748 km², de los cuales 1.141.748 km² corresponden a su territorio continental y los restantes 988.000 km² a su extensión marítima, de la cual mantiene un diferendo limítrofe con Venezuela y Nicaragua. Limita al este con Venezuela y Brasil, al sur con Perú y Ecuador y al noroeste con Panamá; en cuanto a límites marítimos, colinda con Panamá, Costa Rica, Nicaragua, Honduras, Jamaica, Haití, República Dominicana y Venezuela en el mar Caribe, y con Panamá, Costa Rica y Ecuador en el océano Pacífico.</p></body></html>
23
Pagina webPrimera pagina web :Aquí esta un ejemplo del uso de las marcaciones unidas en una pagina web, tenemos el uso de la cabeza, el cuerpo, el titulo y el párrafo.La grabamos como : primera.htmly le abrimos con el navegador.
<!DOCTYPE HTML><html><head><title>Primer pagina web</title></head><body><h1>Colombia</h1><p>Colombia, oficialmente República de Colombia, es una república unitaria de América situada en la región noroccidental de América del Sur. Está constituida en un estado social y democrático de derecho cuya forma de gobierno es presidencialista. Está organizada políticamente en 32 departamentos descentralizados y un Distrito capital. La capital de la república es Bogotá.</p></body></html>
24
Pagina webTildes y eñes :
Como en cualquier documento que va a ser leído por muchas personas, este debe tener buena redacción, buena ortografía y gramática.
Los caracteres que no se manejan en el idioma ingles, tales como las tildes y las eñes, se deben manejar con las siguiente tabla.
25
Código final de la pagina web<!DOCTYPE HTML><html><head><title>Primer pagina web</title></head><body><h1>Colombia</h1><p>Colombia, oficialmente República de Colombia, es una república unitaria de América situada en la región noroccidental de América del Sur. Está constituida en un estado social y democrático de derecho cuya forma de gobierno es presidencialista. Está organizada políticamente en 32 departamentos descentralizados y un Distrito capital. La capital de la república es Bogotá.</p><p>La superficie de Colombia es de 2.129.748 km², de los cuales 1.141.748 km² corresponden a su territorio continental y los restantes 988.000 km² a su extensión marítima, de la cual mantiene un diferendo limítrofe con Venezuela y Nicaragua. Limita al este con Venezuela y Brasil, al sur con Perú y Ecuador y al noroeste con Panamá; en cuanto a límites marítimos, colinda con Panamá, Costa Rica, Nicaragua, Honduras, Jamaica, Haití, República Dominicana y Venezuela en el mar Caribe, y con Panamá, Costa Rica y Ecuador en el océano Pacífico.</p></body></html>
26
Pagina webEnlaces :Para realizar un enlace entre dos paginas, se debe tener clara la ubicación de la pagina web o url que se va a enlazar.http://es.wikipedia.org/wiki/Colombia
Además hay que tener una referencia o un texto que permita visualizar la pagina a la que se hace enlace, en este caso ;
Colombia en wikipedia
27
Pagina webUna vez tenemos la ubicación de la pagina web que se necesita enlazar y el texto a trabajar usamos el siguiente código.
<a href="http://es.wikipedia.org/wiki/Colombia"> Colombia en wikipedia</a>
Lo que hace es ir a la pagina : http://es.wikipedia.org/wiki/ColombiaCuando se hace clic en el texto Colombia en wikipedia de la pagina web.
Agregamos esto al final de la pagina que estábamos trabajando.
28
Pagina webEnlacesAtributo Target_blank : Carga en una ventana nueva._self : Carga en la misma ventana._parent : carga la pagina en la pestaña anterior._ top: lo carga en todo el cuerpo de la pagina. framename: lo carga en el recuadro (Frame) especificado.
29
Pagina web
30
Pagina webImágenes:Al igual que con el enlace, lo primero es ubicar la imagen, el URL de la imagen o la ubicación de esta en la estructura de la pagina web. En el caso actual la pagina donde esta la imagen de la bandera de Colombia es :
http://blogs.eltiempo.com/la-lupa-opinion-al-detalle/wp-content/uploads/sites/231/2014/07/bandera-colombia.jpg
31
Pagina webCódigo para incluir una imagen en una pagina web :<img src="http://blogs.eltiempo.com/la-lupa-opinion-al-detalle/wp-content/uploads/sites/231/2014/07/bandera-colombia.jpg" alt="Bandera de Colombia" width="598" height="384">
img : Esta indicando el manejo de la imagen. src : Es la fuente de la cual se obtiene la imagen. alt : Alternativo, para darle un nombre o referencia a la imagen. width : Indica el ancho de la imagen. height : Indica el alto de la imagen.
Incluimos el código en la pagina que hemos venido trabajando y podemos ver los resultados. Igualmente podemos cambiar los tamaños de el ancho y del alto. Para ver los resultados.
Ej:
<img src="http://blogs.eltiempo.com/la-lupa-opinion-al-detalle/wp-content/uploads/sites/231/2014/07/bandera-colombia.jpg" alt="Bandera de Colombia" width="299" height="192">
<img src="http://blogs.eltiempo.com/la-lupa-opinion-al-detalle/wp-content/uploads/sites/231/2014/07/bandera-colombia.jpg" alt="Bandera de Colombia" width="150" height="146">
32
33
Bibliografía• http://es.wikipedia.org/wiki/Colombia• http://www.w3schools.com• http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme• http://es.wikipedia.org/wiki/Dominio_de_Internet
