Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster Email:

Download Report

Transcript Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster Email: 

Basic HTML Workshop
By: Preeda Chunjongkolkul (Pete)
Systems Librarian/Webmaster
Email: [email protected]
Tel: 410-837-4121
Table of Contents
Internet & HTML concept
Internet Terms
Software Tool (WYSWYG vs. Text Editor)
Introduction to HTML Tags
Making your web page.
Internet & HTML concept
server
your computer
users
Internet & HTML concept
html(s) / image(s)
Server
Internet Terms
URL: Uniform Resource Locator
http: Hypertext Transfer Protocol
ftp: File Transfer Protocol
http://www.yahoo.com
www – Server Machine Name/Given Name
yahoo – domain name
com – top level domain name
Your Internet Address
H: Drive on the UB Network
Students
http://home.ubalt.edu/students/NT user ID
Ex: http://home.ubalt.edu/students/nws9956
Staff
http://home.ubalt.edu/NT staff user ID
Ex: http://home.ubalt.edu/ntaschun
Software Tool
WYSWYG: Netscape Composer, Frontpage,
DreamWeaver, Homesite, Word, Powerpoint
etc.
Text Editor: Notepad, Wordpad,
DreamWeaver, Frontpage, Homesite, BBEdit
etc.
Graphics Editor: Photoshop, Paintshop etc.
Basic Tags
<html></html>
Creates an HTML document
<head></head>
Sets off the title and other information
that isn't displayed on the Web page
itself
<body></body>
Sets off the visible portion of the
document
Basic HTML file structure
<html>
2
<head> </head>
3
<body> </body>
1
</html>
Header Tags
<title></title>
Puts the name of the document in the title
bar
location
Basic HTML file structure
<html>
<head>
<title>Langsdale Library, University of Baltimore</title>
</head>
<body> </body>
</html>
Body Attributes
<body bgcolor=?>
Sets the background color, using name or hex value
<body text=?>
Sets the text color, using name or hex value
<body link=?>
Sets the color of links, using name or hex value
<body vlink=?>
Sets the color of followed links, using name or hex
value
<body alink=?>
Sets the color of links on click
Color Code - http://hotwired.lycos.com/webmonkey/reference/color_codes/
Basic HTML file structure
<html>
<head>
<title>Langsdale Library, University of Baltimore</title>
</head>
<body bgcolor=“#ff00ff” text=“#000000” alink=“#ccffcc”
vlink=“#ffcccc” background=“images/tree.jpg” >
</body>
</html>
Text Tags 1
<hl></hl>
Creates the largest headline
<h6></h6>
Creates the smallest headline
<b></b>
Creates bold text
<i></i>
Creates italic text
Text Tags 2
<strong></strong>
Emphasizes a word (with italic or bold)
<font size=?></font>
Sets size of font, from 1 to 7)
<font color=?></font>
Sets font color, using name or hex value
Basic HTML file structure
<html>
<head>
<title>Langsdale Library, University of Baltimore</title>
</head>
<body bgcolor=“#ff00ff” text=“#000000” alink=“#ccffcc” vlink=“#ffcccc”
background=“images/tree.jpg” >
<strong>
<font color=“#ffff00” size=“4”>Hello</font>
</strong>
</body>
</html>
Links Tags
<a href="URL"></a>
Creates a hyperlink
<a href="mailto:EMAIL"></a>
Creates a mailto link
<a name="NAME"></a>
Creates a target location within a document
<a href="#NAME"></a>
Links to that target location from elsewhere in
the document
Basic HTML file structure
<html>
<head>
<title>Langsdale Library, University of Baltimore</title>
</head>
<body bgcolor=“#ff00ff” text=“#000000” alink=“#ccffcc” vlink=“#ffcccc”
background=“images/tree.jpg” >
<a href=“http://www.yahoo.com”>Click to Yahoo</a>
<a href=“mailto:[email protected]”>[email protected]</a>
</body>
</html>
Formatting Tags 1
<p></p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote></blockquote>
Indents text from both sides
<center></center>
Aligns object(s) to center
Formatting Tags 2
<ol></ol>
Creates a numbered list
<li></li>
Precedes each list item, and adds a number
<ul></ul>
Creates a bulleted list
<div align=?>
A generic tag used to format large blocks of
HTML, also used for stylesheets
Basic HTML file structure
<html>
<head>
<title>Langsdale Library, University of Baltimore</title>
</head>
<body bgcolor=“#ff00ff” text=“#000000” alink=“#ccffcc” vlink=“#ffcccc”
background=“images/tree.jpg” >
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pear</li>
</ul>
</body>
</html>
Graphical Elements
<img src=“file name">
Adds an image
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?>
Sets size of border around an image
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
Table Tags
<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
Basic Table Tags
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
<table>
Basic HTML file structure
<html>…<body>
T
a
b
l
e
T
a
g
1st Row
2nd Row
3rd Row
<table>
<tr>
<td>A</td> <td>B</td>
</tr>
<tr>
<td>C</td> <td>D</td>
</tr>
<tr>
<td>E</td> <td>F</td>
</tr>
</table>
…</body></html>
Table Attributes 1
<table border=#>
Sets width of border around table cells
<table cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell's border and
its contents
<table width=# or %>
Sets width of table - in pixels or as a percentage of
document width
Table Attributes 2
<td colspan=#>
Sets number of columns a cell should span
<td rowspan=#>
Sets number of rows a cell should span
(default=1)
<td nowrap>
Prevents the lines within a cell from being
broken to fit
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
Related Links
http://www.w3.org/
http://www.webreference.com/
http://www.webcom.com/html/tutor/
http://www.webmonkey.com/
Let’s do web page