Mod 1 PowerPoint - davis.k12.ut.us
Download
Report
Transcript Mod 1 PowerPoint - davis.k12.ut.us
The HTLM History
HMTL Basics
World
Wide Web (Web):The part of the
Internet that supports multimedia and
consists of a collection of link documents
HTTP (Hypertext Transfer Protocol): set of
rules for exchanging text, graphic, sound,
video, and other multimedia files
Web Site: a related collection of web pages
that is created and maintained by someone
Web
server (Host): a computer that stores
web pages and sends (serves) requested web
pages
Publishing: copying web pages to a Web
server so anyone who has Internet access can
view it.
Internet
Intranet
Extranet
• Public Access
• Share
Information
(personal,
product,
classroom,
etc) with the
public
• Private
• Share
Information
with
employees or
members of a
group
• Select business
partners or
customers
• Share
information
with partners
or select
customers with
password
Program
that interprets and displays web
pages and enables you to view and interact
with a web page
Google
Firefox
Flock
Internet
Explorer
Opera
Safari (Mac)
URL
(Uniform Resource Locator): the address
of a document or other file accessible on the
Internet
http://www.scite.com/html3e/index.htm
Hyperlink
(link): an element used to connect
one web page to another web page on same
or different server
The
authoring language used to create
documents on the World Wide Web.
Tags or Markups: use of special instructions
to define the structure and layout of the web
document
Platform independent: you can create an
HTML files on one type of computer and then
use a browser on another type of computer
to view that file
Tim Berners-Lee & Robert Calliau 1989
Developed a collection of tags that described how a
document should look when viewed in a browser
Made it possible to create hyperlink s
Tim Berners-Lee founded World Wide Web
Consortium 1994
Encourages universality of HTML
Promotes an open forum for discussion among Web
Designers
Seeks to promote standards for the evolution of the
Web to help make web accessible to everyone
Regarded as the de facto organization to govern HTML
DHTML:
combination HTML, cascading style
sheets, and scripting language. Creates
interactive, animated web pages
XML:
uses tags to describe the structure and
content of a document, not the format
XHTML:
reformation of HTML so it conforms
to XML rules. Combines the benefits of the
display features of HTML and the stricter
coding standards required by XML.
Handheld devices and mobile phones can only
display XHTML code
Need
an HTML Text Editor
Type the code directly in the document
Notepad or Word
Save document with an extension .htm or .html
Software
Application Software:
Dreamweaver, Front Page, Sausage Software
HotDog
WYSIWYG (What You See Is What You Get)
Title
Text Links
Image
Navigation Bar
Image Links
Body
Background
Heading 1
Paragraph
Heading 2
Click
Start button on Taskbar
Click Programs > Accessories > Notepad
Save files with an .html extension
index .html
Filenames:
can contain letters, numbers, and
underscores
Cannot contain: : * ? Or spaces
To
open an html file later
File > Open > click arrow to the right of Type >
choose All > click the file you want to open
<DOCTYPE>: begins the web page in XHTML
Indicates
the version and type of HTML used;
includes a URL reference to a DTD at the W3C site.
Strict: prohibits use of depreciated tags
Deprecated tags: tags that the W3C has earmarked for eventual
removal; replaced with newer, more function tags.
Transitional: allows the use of deprecated tags
Framseset: used to support frames on the Web page;
allows use of deprecated tags
<html> </html>
Indicates the start and end of an HTML
document
<head> </head>
Indicates the start and end of a section of
the document used for the title, keywords,
metatags and other document header
information.
<body> </body>
Indicates the start and end of the Web page
body
<h#> </h#>
Indicates the start and end of the text
section called a heading; sizes range from
the largest <h1> through smallest <h6>.
<p> </p>
Indicates the start of a new paragraph;
inserts a blank line above the new
paragraph.
<ul> </ul>
Indicates the start and end of an unordered list
(bulleted list). There are three types of unordered
lists:
Type=“square”
• Type=“disc” (default)
o Type=“circle”
<ol> </ol>
Indicates the start and end of an ordered list
(numbered list)
<li> </li>
Indicates that the item that follows the tag is an item
within a list
<dl> </dl>
Indicates the start and end of a definition list
First line or term <dt> </dt> at the left edge;
Next set tags are for the definition <dd> </dd> are
indented from the left edge
<hr />
Inserts a horizontal rule (line)
<hr /> default: line from left margin to right
margin
<hr / size=“5”>: Increases the width of the line
<hr / size=“10” noshade>: line width increases
and it doesn’t appear shaded (shaded is default)
<br />
Inserts a line break at the point where the
tag appears. Appears as single spacing
between lines.
Images can be used as the background, to
organize, or to clarify information
Types of files used on the Web
GIF (Graphics Interchange Format): clipart
JPG (Joint Photographic Experts Group): photos
PNG (Portable Network Graphics): Fireworks
file
Image
Tag syntax
<img scr = “file name and type” any
attributes />
Align: controls alignment (bottom, middle, top,
left, or right) align=“top”
Alt: allows text to be associated with image
alt=“flower pot”
Border: defines the border width border=“5”
Height: defines the height of the image
height=“2.5”
Hspace: defines the horizontal space that
separates the image from the other text
hspace=“15”
vspace: defines the vertical space that separates
the image from the other text vspace=“1”
Width: defines the width of the image width=“3”
Predefined colors choices that can reference by
name:
Silver, gray, maroon, green, navy, purple, olive, teal,
white, black, red, lime, blue, magenta, yellow, cyan
Other colors use a Hexadecimal number
combination
Hexadecimal is a base of 16 digits
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
Hexadecimal colors use six digits
White = ffffff (all colors)
Black = 000000 (no color)
Background image tag:
bgcolor=“red”
bgcolor=“#fffbc6”
Option #1
Open the browser
File > Open > browse to file > OK
Option #2
Browse to file using My Computer > Open
Multitask:
Use Taskbar to switch between
text editor and browser
After making changes in the text editor, click
Refresh in the browser
Print Web page from the Browser
Click the Print icon
Print HTML code in Notepad
File > Print