Principios de HTML
Download
Report
Transcript Principios de HTML
Principios de HTML
Por Juan A. González Sánchez
http://www.uprh.edu/~jgonzale
¿Qué significa HTML?
Hyper Text Markup Language y fue
creado por el World Wide Web
Consortium, quienes regulan los
estandares de Internet.
FrontPage Tutorials
Definitions
These words are used often in these tutorials, so learn them now!
Hyperlink - Text or graphic hotspots that load other webpages
when clicked on.
Pixel - The unit of measurement on the web. One pixel is
approximately the size of a period (.) in 12-point Arial font.
Shortcut menu - As with all PC programs, access popup shortcut
menus by right-clicking on objects with the mouse.
URL (Universal Resource Locator) - The address of a web site.
This what is after the "http://" on the location bar on your browser.
Web - In FrontPage, your web site is referred to as a web.
FrontPage Screen Layout
Below is a diagram of the default page layout in FrontPage. You
can change the view by selecting a different View Option.
Menu Bar
Views
Page view gives you a
WYSIWYG editing
environment for creating
and editing web pages.
Folders view lists all of
the files and folders in your
web for easy management.
Reports view identifies
problems with pages and
links in the web including
slow-loading pages, broken
links, and other errors.
Navigation view lists the
navigation order of the site
and allows you to change
the order that a user would
view the pages.
Hyperlinks view allows
you to organize the links in
the web pages.
Tasks view provides a
grid for inputting tasks you
need to complete in your
web.
Creating a Web Using the Web Wizard
Creating a Web
Using the Web
Wizard
Open FrontPage and
select
File|New|Web...
from the menu bar or
click the small down
arrow next to the
New button on the
standard toolbar and
select Web....
Creating a Web Page from a Template
HTML Basic Document
<html>
<head>
<title>Nombre del documento aquí
</title>
</head>
<body>
Texto Visible aquí
</body>
</html>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted
</pre>
Logical and Physical Styles
<em>This text is emphasized</em>
<strong>This text is strong
</strong>
<code>This is some computer code
</code>
<b>This text is bold</b>
<i>This text is italic</i>
Font Size and Color
<FONT SIZE=n>text</FONT>
<FONT COLOR=colorspec>text</FONT>
Black = "#000000" Green = "#008000"Silver =
"#C0C0C0" Lime = "#00FF00"Gray =
"#808080" Olive = "#808000"White =
"#FFFFFF" Yellow = "#FFFF00"Maroon =
"#800000" Navy = "#000080"Red =
"#FF0000" Blue = "#0000FF"Purple =
"#800080" Teal = "#008080"Fuchsia =
"#FF00FF" Aqua = "#00FFFF"
Backgrounds
You can set both BGCOLOR and
BACKGROUND. If you do, browsers
typically give preference to
BACKGROUND, but if the background
image cannot be loaded, BGCOLOR is
used.
Examples: <body bgcolor="yellow">
Links, Anchors, and Image
Elements
<a href="http://www.uprh.edu/">This is a Link</a>
<a href="http://www.uprh.edu/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:[email protected]">
Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered and Ordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.uprh.edu" method="post/get">
<input type="text" name="lastname" value=“Maestros"
size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<HTML>
<FORM NAME="frmRegister" METHOD="Post" ACTION="/cgibin/cgiemail/register.txt">
<TABLE>
<TR><TD><B>Name<TD><INPUT NAME="N" TYPE="TEXT" SIZE=35></TR>
<TR><TD><B>Company<TD><INPUT NAME="h" TYPE="TEXT" SIZE=35></TR>
<TR><TD><B>Your E-Mail<TD><INPUT NAME="j" TYPE="TEXT" SIZE=35></TR>
</TABLE>
<P>
<INPUT TYPE="submit" VALUE="Submit" onClick="Pressed" Language="VBScript">
<INPUT TYPE="reset" VALUE="Clear">
</FORM>
<SCRIPT LANGUAGE="VBSCRIPT">
sub pressed
If frmRegister.j.value = "" Then
alert "Please enter your Email Address and Re-Submit"
End If
end sub
</SCRIPT>
</FONT>
</BODY>
</HTML>