Html1

HYPER TEXT MARKUP LANGUAGE
HTML 1
Instructor
Ugo Andrés Sánchez Baeza
ugoandresprofesor@gmail.com
1

Pagina web
Creació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.
2

Pagina web
HTML 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
3

Pagina web
Un 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.
4

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.
5

Pagina web
Direcció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.
6

Pagina web
Dominio :
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.
7

Pagina web
Nombres 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.
8

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.
9

Pagina web
Dirección web :
La forma básica que conocemos de
una dirección de pagina web es ;
http://www.empresa.com
Ya 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 web
http://www.empresa.com
http://www.empresa.net
http://www.empresa.gov
http://www.empresa.edu
http://www.empresa.org
http://www.empresa.mil
10

Pagina web
Tipos 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.
11

Pagina web
Paí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
12

Pagina web
Listado de nombres de países :
Afghanistan-Afganistan: AF
Albania: AL
Algeria-Argelia: DZ
American Samoa-Samoa Americana: AS
Andorra: AD
Angola: AO
Anguilla-Anguila: AI
Antarctica-Antartida: AQ
Antigua y Barbuda: AG
Argentina: AR
Armenia: AM
Aruba: AW
Australia: AU
Austria: AT
Azerbaijan-Azerbaiyan: AZ
Bahamas: BS
Bahrain-Bahrein: BH
Bangladesh: BD
Barbados: BB
Belgium-Belgica: BE
Belize: BZ
Benin: BJ
Bermuda-Bermudas: BM
Bhutan-Butan: BT
Bolivia: BO
Bosnia-Herzegovina: BA
Botswana: BW
Bouvet Island-Isla Bouvet: BV
Brazil-Brasil: BR
Brunei: BN
Bulgaria: BG
Burkina Faso: BF
Burma-Birmania: BU
Burundi: BI
Byelorussian Ssr (Bielorussia)-Bielorrusia:
BY
Canada CA
Cape Verde-Cabo Verde: CV
Caroline Islands-Islas Carolina: FM
Cayman Islands-Islas Caiman: KY
Chad: TD
Chile: CL
China: CN
Christmas Island-Isla Christmas: CX
Cocos Islands-Islas Cocos: CC
Columbia-Colombia: CO
Commercial-Comercial: COM
Comoros-Comores: KM
Congo: CG
Cook Islands-Islas Cook: CK
Costa Rica: CR
Corea del Norte: KP
Croatia-Croacia: HR
Cuba: CU
Cyprus-Chipre: CY
Czech.-Republica Checa: CZ
Czechoslovakia-Checoslovaquia: CS
Democratic Kampuchea-Kampuchea: KH
Democratic Yemen-Yemen del Sur: YD
Denmark-Dinamarca: DK
Djibouti-Djibuti: DJ
Dominica: DM
Dominican Republic-Republica
Dominicana: DO
DronningMaud Land: NQ
East Timor-Timor Oriental: TP
13

Pagina web
Egypt-Egipto: EG
El Salvador: SV
England-Inglaterra: GB
Equatorial Guinea-Guinea Ecuatorial: GQ
Eritrea: ER
Estonia: EE
Ethiopia-Etiopia: ET
Faeroe Islands-Islas Feroe: FO
Falkland Islands-Falkland / Islas Malvinas: FK
Fiji: FJ
Finland-Finlandia: FI
France-Francia: FR
French Guiana-Guayana Francesa: GF
French Polynesia-Polinesia Francesa: PF
Gabon: GA
Gambia: GM
Georgia: GG
Ghana: GH
Gibraltar: GI
Greece-Grecia: GR
Greenland-Groenlandia: GL
Grenada-Granada: GD
Guadeloupe-Guadalupe: GP
Guam: GU
Guatemala: GT
Guinea: GN
Guinea-Bisseu-Guinea-Bissau: GW
Guyana: GY
Haiti: HT
Heard y Mc Donald, Islas: HM
Honduras: HN
Hong Kong: HK
Hungary-Hungria: HU
Iceland-Islandia: IS
India: IN
Indonesia: ID
International-Internacional: INT
Iran: IR
Iraq-Irak: IQ
Ireland-Irlanda: IE
Israel: IL
Italy-Italia: IT
Ivory Coast-Costa de Marfil: CI
Islas Canton y Enderbury: CT
Islas Virgenes Britanicas: VG
Islas exteriores menores (Estados Unidos): UM
Islas del Pacifico de los Estados Unidos: PU
Jamaica: JM
Japan-Japon: JP
Johnston Island-Johnston, Isla: JT
Jordan-Jordania: JO
Kazakhstan-Kazakstan: KK
Kenya: KE
Kiribati: KI
Kuwait: KW
Kyrgyzstan (Kirgistan)-Kirgistan: KG
Lao People's Democratic Republic-Laos: LA
Latvia-Letonia: LV
Lebanon-Libano: LB
Lesotho: LS
Liberia: LR
Libyan Arab Jamahiriya-Libia: LY
Liechtenstein: LI
Lithuania-Lituania: LT
Luxembourg-Luxemburgo: LU
Macau-Macao: MO
Madagascar: MG
Malasia: MY
Malawi: MW
Maldives-Maldivas: MV
Mali: ML
Malta: MT
Marshall Islands-Islas Marshall: MH
Martinique-Martinica: MQ
Mauritania: MR
Mauritius-Mauricio: MU
Mayotte: YT
Mexico: MX
Micronesia: FM
Midway Islands-Midway, Islas: MI
Moldova-Moldavia: MD
Monaco: MC
14

Pagina web
Mongolia: MN
Montserrat: MS
Morrocco-Marruecos: MA
Mozambique: MZ
Namibia: NA
Napal-Nepal: NP
Nato Field-Otan: NATO
Nauru: NR
Netherlands-Holanda: NL
Netherlands Antilles-Antillas Holandesas: AN
Network-Red: NET
Neutral Zone-Zona Neutral: NT
New Calidonia-Nueva Caledonia: NC
New Zealand-Nueva Zelanda: NZ
Nicaragua: NI
Niger: NE
Nigeria: NG
Niue: NU
Organizacion sin animo de lucro: ORG
Norfolk Island-Norfolk, Isla: NF
Marianas del Norte, Islas: MP
Norway-Noruega: NO
Old Style Arpanet-Arpanet: ARPA
Oman: OM
Pacific Islands-Islas del Pacifico: PC
Pakistan: PK
Palau: PW
Panama: PA
Papua New Guinea-Papua Nueva Guinea: PG
Paraguay: PY
Peru: PE
Philippines-Filipinas: PH
Pitcairn Island-Pitcairn, Isla: PN
Poland-Polonia: PL
Portugal: PT
Puerto Rico: PR
Republic of Korea-Corea del Sur: KR
Republica Centroafricana: CF
Republica Federal de Alemania: DE
Reunion: RE
Romania-Rumania: RO
Russia-Rusia: RU
Rwanda-Ruanda: RW
Saint Lucia-Santa Lucia: LC
San Vicente y las Granadinas: VC
Samoa: WS
San Marino: SM
Sao Tome and Principe-Santo Tome y Principe: ST
Saudi Arabia-Arabia Saudi: SA
Senegal: SN
Seychelles: SC
Sierra Leone-Sierra Leona: SL
Singapore-Singapur: SG
Slovakia-Eslovaquia: SQ
Slovenia-Eslovenia: SI
Solomon Islands-Islas Salomon: SB
Somalia: SO
South Africa-Sudafrica: ZA
South Georgia-Georgia del Sur: GS
Spain-España: ES
Sri Lanka: LK
St. Helena-Santa Helena: SH
San Cristobal-Nevis-Anguila: KN
Saint Pierre y Miquelon: PM
Sudan: SD
Suriname-Surinam: SR
Svalbard y Jan Mayen, Islas: SJ
Swaziland-Suazilandia: SZ
Sweden-Suecia: SE
Switzerland-Suiza: CH
Syran Arab Republic-Siria: SY
Taiwan: TW
Tajikistan-Tayikistan: TJ
Territorio Oceanico de las Indias Britanicas: IO
Territorios Franceses del Sur: TF
Thailand-Tailandia: TH
Togo: TG
Tokelau: TK
Tonga: TO
Trinidad and Tobago-Trinidad y Tobago: TT
Tunisia-Tunez: TN
Turkey-Turquia: TR
Turkmenistan-Turkmenistan: TM
Turks y Caicos, Islas: TC
Tuvalu: TV
15

Pagina web
Uganda: UG
Ukrainian SSR-Ucrania: UA
Universidades
Norteamericanas: EDU
United Arab Emirates-
Emiratos Arabes Unidos:
AE
United Kingdom-Reino
Unido: UK
United Republic of
Cameroon-Camerun: CM
United Republic of
Tanzania-Tanzania: TZ
United States-Estados
Unidos: US
Unites States Virgin
Islands-Islas Virgenes: VI
Upper Volta-Alto Volta:
HV
Uruguay: UY
US Government-Gobierno
Norteamericano: GOV
US Military-Organismo
Militar Norteamericano:
MIL
USSR-URSS: SU
Uzbekistan-Uzbequistan:
UZ
Vanuatu: VU
Vatican City State-Ciudad
del Vaticano: VA
Venezuela: VE
Vietnam: VN
Wake Island-Wake, Isla:
WK
Wallis y Futuna, Islas: WF
Western Sahara-Sahara
Occidental: EH
Yemen-Yemen del Norte:
YE
Yugoslavia: YU
Zaire: ZR
Zambia: ZM
Zimbabwe: ZW
16

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
17

Pagina web
Existen 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.
18

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.
19

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>

Pagina web
Encabezados :
Con la etiqueta <h#> y
debemos cerrarla con
</h#>.
Indicando que es el
titulo o subtitulo de un
texto.
21
<!DOCTYPE HTML>
<html>
<head>
<title>
Encabezados
</title>
</head>
<body>
<h1>Encabezado 1</h1>
</body>
</html>

Pagina web
Pá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>
22

Pagina web
Primera 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.html
y le abrimos con el
navegador.
23
<!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>

Pagina web
Tildes 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.
24

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>
25

Pagina web
Enlaces :
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/Colo
mbia
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
26

Pagina web
Una 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/wi
ki/Colombia"> Colombia en
wikipedia</a>
Lo que hace es ir a la pagina :
http://es.wikipedia.org/wiki/Colombia
Cuando se hace clic en el texto Colombia
en wikipedia de la pagina web.
Agregamos esto al final de la pagina que
estábamos trabajando.
27

Pagina web
Enlaces
Atributo 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.
28

Pagina web
Imá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/0
7/bandera-colombia.jpg
30

Pagina web
Có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:
height="192">
height="146">
31

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
33

Html1

Más contenido relacionado

Destacado

Similar a Html1

Más de Ugo Sanchez Baeza Profesor

Último

Html1