Codigos HTML

República Bolivariana De Venezuela
Ministerio Del Poder Popular Para La Defensa

Universidad Nacional Experimental Politécnica
De La Fuerza Armada Bolivariana
4to Semestre De Análisis y Diseño De Sistemas
Asignatura: Programación Orientada a Objetos
CODIGOS EN HTML
PARA
UNA PAGINA WEB
Profesora: Alumno:
Adalides Rodríguez José Mota
26.753.659
San Félix, 31 de Mayo del 2020
Ejemplo #1
<html>  Todos los sitios web comienzan con el elemento html, también se llama
elemento raíz porque está en la raíz del árbol de elementos que conforman una
página web.
<head>  El elemento “head” contiene información sobre la página web, a
diferencia del contenido de la web en sí, hay muchos elementos que puedes poner
dentro del elemento del encabezado, como: título, enlaces, metas, script
<title> Las aventuras de mi gato Lucky </title>  Contiene el Titulo de la pagina
<meta http-equiv = “Content-Type” content = “text / html; charset = utf-8”>
<meta name = “description” content = “Las aventuras de mi gato favorito Lucky,
con historias, fotos y películas”>
<meta name = “keywords” content = “cat, Lucky, pet, animal”>
<link rel = “stylesheet” type = “text / css” href = “/ style.css”>
<link rel = “icono de acceso directo” href = “/ favicon.ico”>
</head>
<body>  La etiqueta body o contenido aparece después del elemento principal
en la página. Debe contener toda la información de tu sitio web: texto, imágenes.
<h1> Las aventuras de mi gato Lucky </h1>  Los encabezados te permiten
dividir el contenido de tu página en fragmentos legibles. Funcionan de manera
muy similar a los títulos y subtítulos en un libro o un informe.
<div id = “mainContent”>
<p> Mi gato Lucky tiene muchas aventuras. Ayer <a href=” mouse.html”>
atrapó un ratón </a>, ¡y esta mañana atrapó dos! </p>
<p> Aquí hay una foto de Lucky: </p>  El elemento ”p” te permite crear
párrafos de texto, la mayoría de los navegadores muestran párrafos con un
espacio vertical entre cada uno de ellos, separando muy bien el texto.
<img src = “lucky.jpg” alt = “Lucky”>  El elemento “img” te permite insertar
imágenes en una página web.
</div>  El elemento “div” es un contenedor genérico que puedes usar para agregar
más estructura al contenido de tu página. Por ejemplo, puedes agrupar varios párrafos o
encabezados que tengan un propósito similar en un elemento div. Por lo general, los
elementos div se usan para:
• Encabezados y pies de página

• Columnas de contenido y barras laterales.
• Cuadros resaltados dentro del flujo de texto
• Áreas de la página con un propósito específico, como anuncios publicitarios.
• Galerías de imágenes.
<div id = “barra lateral”>

<h2> ¡Compra nuestros productos! </h2>
<p> Algunos de nuestros productos incluyen <span class = “product”>
SuperWidgets </span>, <span class = “product”> MegaWidgets </span> y <span
class = “product”> WonderWidgets </span>. </p> El elemento span es similar a
div en que se usa para agregar estructura a tu contenido, la diferencia es que div
es un elemento de nivel de bloque, mientras que span es un elemento en línea
</div>
</body>
</html>
Ejemplo #2
<html>
<head>
<title>Este es solo un ejemplo</title>
</head>
<body bgcolor=”#A2F9FC”><h1><center>Este Es El Título Principal De La
Página</center></h1><font size=”3″ face=”Comic Sans MS, Arial, MS Sans Serif”>
Aquí podemos colocar alguna <b>introducción</b> al contenido que encontrarás…
bla bla bla</font><h2><center><u>Este Es Un Subtítulo De La
Página</u><center></h2><font size=”3″ face=”Comic Sans MS, Arial, MS Sans
Serif”>
Aquí se encontrará el <i>desarrollo</i> con todo lo que quieras..</font></body>
</html>
El atributo bgcolor dentro de la etiqueta <body>, permite dar color al fondo del
sitio, puedes seleccionar el color en formato hexadecimal, personalmente siempre
saco los colores de esta web, además el uso de la etiqueta <center> para centrar
el título y subtitulo <h1> y <h2> respectivamente. Las demás etiquetas y atributos
que se aplican en este ejemplo se usaron en el ejemplo anterior.
Esta es la imagen del formato que representa el código antes escrito, esta página
web está basada en las características definidas en el código HTML.
Ejemplo #3
Este es el ejemplo práctico de una página web sencilla, donde se aplican todas las
etiquetas básicas del lenguaje HTML las cuales son:
Etiquetas básicas de estructura y cabecera: <head>, <body>, <meta>, <title> y
<link>.
Etiquetas para títulos, párrafos, enlaces, imágenes y formatos básicos de texto:
Títulos: <h1> – <h6>
Párrafo: <p>
Hiperenlace: <a>
Imagen: <img>
Sección de texto: <span>
Énfasis: <strong>,<em>
Salto de línea: <br>
Etiquetas para dar más estructura: divisiones, tablas y listas:
Divisiones: <div>
Tablas: <table>, <tr> y <td>
Listas: <ul>,<ol>
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ejemplo de una página web de nivel medio-básico</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="cabecera">
<a href="/"><img src="https://www.hostingatope.com/wp-
content/themes/genesis-hat/images/logo.png"/></a>
</div>
<div class="cuerpo">
<div class="contenido">
<h1>3 Consejos para hacer páginas web bien</h1>
<h2>1. No te limites a herramientas visuales</h2>
<p>Existen <a target="_blank" href="http://www.quackit.com/html/online-
html-editor/">muchas herramientas</a>, incluso gratuitas, que te permiten crear
páginas web sin saber realmente HTML.</p>
<p>...</p>
<h2>2. Piensa una buena estructura común</h2>
<p>Antes de crear una página web, procura pensar una estructura lógica
común compuesta por etiquetas de divisiones. </p>
<p>...</p>
</div>
<div class="barra-lateral">
<a target="_blank" href="/go/webempresa"><img
src="https://www.hostingatope.com/wp-content/uploads/2016/05/banner-hosting-
webempresa.png"></a>
</div>
</div>
<div class="pie">
<p>© Copyright Hosting a Tope 2017</p>
</div>
</body>
</html>
Ejemplo #4
En este ejemplo veremos el código de una página web con menú desplegable
El código es el siguiente.
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/menu.css">
<title>Ejemplo de menu desplegable</title></head>
<body bgcolor="#cddf89">
<font size="8" color="#987644" face="Tahoma">
Menu desplegable
</font><br><br>
<nav class="menu">
<font size="4">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Pagina 1</a>
<ul>
<li><a href="#">Pagina 1 A</a></li>
<li><a href="#">Pagina 1 B</a></li>
</ul></li>
<li><a href="#">Pagina 2</a>
<ul>
<li><a href="#">Ejemplo 1</a></li>
</ul></li>

<li><a href="#">Pagina 3</a></li>
</ul>
</font></nav>
</body></html>
Vista del resultado del código:
Los menús son muy importantes porque permiten la navegación en tu sitio web, si
tienes un sitio web basado en frames debes tener en cuenta que el atributo target
de la etiqueta <a> el cual permite abrir el recurso o página web en el cuadro o
frame nombrado en el target.

Codigos HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Codigos HTML

Hochgeladen von

Copyright:

Verfügbare Formate

República Bolivariana De Venezuela

Ministerio Del Poder Popular Para La Defensa

• Encabezados y pies de página

<div id = “barra lateral”>

Vista del resultado del código:

Das könnte Ihnen auch gefallen