Basic HTML Workshop

Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster Email: pchun@ubalt.edu 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 users your computer

Internet & HTML concept Server html(s) / image(s)

Internet Terms • URL: Uniform Resource Locator • http: Hypertext Transfer Protocol • ftp: File Transfer Protocol • http://www.yahoo.comwww – Server Machine Name/Given Nameyahoo – domain namecom – top level domain name

Your Internet Address • H: Drive on the UB Network • Studentshttp://home.ubalt.edu/students/NT user ID Ex: http://home.ubalt.edu/students/nws9956 • Staff 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

Basic HTML file structure <html> <head> </head> <body> </body> </html> 2 1 3

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:pchun@ubalt.edu”>pchun@ubalt.edu</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> </tr> <td>A</td> <td>B</td> <tr> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> </tr> <table>

Basic HTML file structure <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> Table Tag 1st Row 2nd Row 3rd Row

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 Workshop