29
Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster Email: [email protected] Tel: 410-837-4121
Basic HTML Workshop
By: Preeda Chunjongkolkul (Pete)Systems Librarian/Webmaster
Email: [email protected]: 410-837-4121
Table of Contents
Internet & HTML conceptInternet TermsSoftware Tool (WYSWYG vs. Text Editor)Introduction to HTML TagsMaking your web page.
Internet & HTML concept
your computer
server
users
Internet & HTML concept
html(s) / image(s) Server
Internet Terms
URL: Uniform Resource Locatorhttp: Hypertext Transfer Protocolftp: File Transfer Protocolhttp://www.yahoo.comwww – Server Machine Name/Given Nameyahoo – domain namecom – top level domain name
Your Internet Address
H: Drive on the UB NetworkStudentshttp://home.ubalt.edu/students/NT user ID Ex: http://home.ubalt.edu/students/nws9956Staff
http://home.ubalt.edu/NT staff user IDEx: 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
<html>
<head> </head>
<body> </body>
</html>
Basic HTML file structure
12
3
Header Tags<title></title>Puts the name of the document in the title bar
location
<html>
<head>
<title>Langsdale Library, University of Baltimore</title>
</head>
<body> </body>
</html>
Basic HTML file structure
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/
<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>
Basic HTML file structure
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
<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>
Basic HTML file structure
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
<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>
Basic HTML file structure
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
<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>
Basic HTML file structure
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>
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<td>A</td> <td>B</td>
<td>C</td>
<td>E</td> <td>F</td>
<td>D</td>
<html>…<body>
<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>
Basic HTML file structure
1st Row
2nd Row
3rd Row
Table
Tag
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
![[Basic HTML/CSS] 2. html - list tags](https://static.documents.pub/doc/80x56/58ce75c41a28abdc578b67d9/basic-htmlcss-2-html-list-tags.jpg)
