as an organizational section.
We will now add three
sections to our page:
Notice that the third tag is inside the second one! This is called a nested tag. Think of these tags as boxes inside boxes or to use a dresser metaphor: the whole page is the clothes dresser, each div is like a drawer, and a div-within-a-div is like a smaller basket or section inside that drawer theyre all used to keep different sections separate for later organization. You will see that this separation is important when we get to CSS in the next two sessions.
( Save your changes in Notepad.
Links
At some point, you'll probably need to create a link on your own page that goes to a different page somewhere else on the internet when clicked. To do this use the "anchor" tag to specify the page address, and the text you want to serve as the link.
Go to the LIS home page
address text in page
Since the LIS site is not in the same folder as your webpage, you need to put the entire address in the href="" section. If you want to make a link to one of your own pages, though, you can just put the local address:
My Resume
If you have a page named resume.html in the same folder as your index.html, clicking the above link in index.html will send the user to your resume page. This is called a document-relative link.
If you create a lot of folders on the server, you might need to know this document-relative shortcut: ../ For example:
My Resume
This tells the browser that the link is in one folder above the current folder. If your document structure looks like this:
Public_html (folder)
index.html
resume.html
Images (folder)
images.html
pic.jpg
The above link on the images.html page will tell the browser to move one folder up, to Public_html, and find resume.html in that folder. Conversely, if you want to send the user from index.html to images.html you would use this:
My Pictures
This link tells the browser to go to the images folder and then find the images.html webpage.
We will now add three document-relative links to our page:
Add the code below within the first div:
( Save your changes in Notepad. Go back to the desktop and double-click the index.html file this should open it in an internet browser do you see the links? We have provided you with the two files courses.html and personal.html" upload them now to your UH server space, and you should be able to click back and forth from these pages in the browser.
Paragraph and Breaks
To denote a paragraph, type
and
around the text included in the paragraph. This results in double spacing between text blocks, as the
tag inherently has a line break after it.
To manually put a break in a line, insert
which stands for line break and has only one tag. The text following the break will be placed directly underneath the preceding text.
We will now add a paragraph to our index.html file:
[Write a brief statement about yourself here!]
( Save your changes and refresh your web browser. Note how the paragraph is in the second
but above the third one. You might also want to add some
tags to the end of your links so that they are on different lines, if you dont like them lined up.
Email Links (mailto)
To create a link directly to an email address you can use an
tag just like a link:
email your name
This link will result in the browser opening up an email window, if the browser is set up properly. However, often webcrawlers use mailto: links to find addresses to which to send spam. Many websites, especially .gov sites, will create a .gif or .jpg image to display their email, without a mailto: link, to deflect possible spam.
Add a mailto link to the end of the paragraph you just created in this form:
[Write a brief statement about yourself here!]
Contact: youremailaddress
( Save your changes and refresh your web browser. You should be able to click that link to email yourself!
Outside Links
Finally, we will add an outside link to your page. This will require a full http address, and will direct your users to a page outside of your website.
Add an outside link to the end of the paragraph you just created, after your contact (it doesnt have to be this one, it could be any link you like!):
[Write a brief statement about yourself here!]
Contact: youremailaddress
Go to the LIS home page
( Save your changes and refresh your web browser. You can add more
tags if you want some more spacing in this paragraph.
Images
This tag, short for image source will load the requested file by following the path (address) that you give it. This URL is a document-relative link, this means that the server will look for an image in the same folder as the page itself. If you have an images folder (which I highly recommend), your link will look like this:
The uhUNIX server reads folders in the above manner; other servers may need a backslash in front of the folder name:
Dont forget the alt! This enables people to read what your picture is about, instead of looking at it. This is useful if the user is visually impaired and using a screen reader, which will read the alt text, or for a broken image link, or for a user with a slow connection who doesnt load browser images.
Add your image (or use the one we provided) to the third div:
[Write a brief statement about yourself here!]
( Save your changes and refresh your web browser. Note that we created ours in a folder called images and recommend you do the same. Go to the SSH File Transfer window, and
get into your public_html directory. In the toolbar above the left window you will see a picture of an icon with a little asterisk-looking thing on it, this means New Folder click it!
Name your new folder images. From now on, put all your image files in here; its a good way to keep organized when you start to have lots of files.
Dont forget to check the permissions of the file, by right-clicking it and checking read for all the people.
Finally, your code should look something like this:
Caitlins Page
This is the code that we will use in the upcoming sessions to begin building your e-portfolio. Your next mission will be to start choosing colors for your page: text color, link color, background color, etc. Take a look at some of these color charts, and pick some colors that you like think about things as a whole scheme, not just individually. And remember: think of your users!
Also, we will be working with font size in the next session. Think about how you want your fonts to look, what kind and what size for the different kinds of text in your page. Here are some pages about fonts for you to look at for next time.
HYPERLINK "http://www.degraeve.com/color-palette" http://www.degraeve.com/color-palette
HYPERLINK "http://www.colorblender.com" http://www.colorblender.com
HYPERLINK "http://www.colourlovers.com" http://www.colourlovers.com
HYPERLINK "http://en.wikipedia.org/wiki/Font_family_(HTML" http://en.wikipedia.org/wiki/Font_family_(HTML)
HYPERLINK "http://en.wikipedia.org/wiki/Core_fonts_for_the_Web" http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
HYPERLINK "http://www.wpdfd.com/editorial/wpd0704news.htm" http://www.wpdfd.com/editorial/wpd0704news.htm
Additional Practice with tags
The following are additional tags you can practice with. Feel free to add them to your index.html to play around with them if you like, though because they have specialized use, they will not be part of the general framework we teach this semester.
Headers
Header tags are special predefined styles that instruct the browser to display text in a certain way. These six tags (h1 through h6) are useful for creating section headings and sub-headings.
Resume
Your Name
123 Fake St.
Anytown, USA.
The
tag will cause the text to be very large; the slightly smaller, etc.
The text will also be formatted as if you wrote a paragraph tag, with an automatic line break after.
Making Lists
Have you ever used the "numbering" or "bullets" list feature in MS Word? It's pretty spiffyjust click either button and Word automatically creates a numbered or bulleted list as you type. Well, HTML has a similar feature (although not quite as automagically delicious as MS Word).
Academic Library Intern 2005-2006
- Answered questions at the Reference Desk
- Weeded the Asia collection
- Used the Connexion Client for Original Cataloging
- Worked with Digital Databases
Aspirations and Goals
- Tenure
- Work as a Library Director
The tag creates an "ordered" or numbered list of items. The tag creates an "unordered" or unnumbered list of items. Which one you use in any given situation is largely dictated by your situation's needs: it's unlikely that you'd give someone a numbered shopping list (they might confuse the step numbers with the amount of items you want). Similarly, you're unlikely to create a bulleted set of directionsyour recipient may skip necessary steps or perform them out of order.
Tables
Tables are composed of rows and cells, much like in Microsoft Excel, and are great for representing information in, well, tabular format.
Tables can be a little tricky to understand, but if you indent the HTML code properly (as shown below), you can make the code easier to understand.
This is the column header of column #1 |
This is the column header of column #2 |
This is the first cell of row #1 |
This is the second cell of row #1 |
This is the first cell of row #2 |
This is the second cell of row #2 |
This is the column header of column #1This is the column header of column #2This is the first cell of row #1This is the second cell of row #1This is the first cell of row #2This is the second cell of row #2
The tags specify a horizontal ROW in the table and the tags specify each CELL within each ROW. The | tag specifies the table header. It is written inside the |
table row tag. data is automatically centered, and usually rendered stronger than the | data. | information is aligned left by default.
Because HTML tables can be very complex, we've indented the various tags to indicate which one is subordinate to the other when dealing with tables, it's useful to indent your HTML tags this way in order to give you an easy-to-read representation of how the table tags are related. It can also help you spot any errors in more complicated tables, should you forget to include a tag.
Tables used to be used for layout in HTML pages, but are now shunned because CSS has made layout both more flexible and more accessible. You should only use tables if you have tabular data to enter.
Practice these tags, and think about your colors and sizes for next session were looking forward to Styling up your webpage!
LIS-Webteam
Fall 2006
PAGE 1 of NUMPAGES 10 DATE \@ "M/d/yyyy" 10/11/2006
2 @
G M D h x
b
i
' . G R k | l O P Q "hIB OJ PJ QJ ^J aJ nHtH j <hIB CJ( j hIB OJ QJ UhIB 5OJ QJ \ hIB 6OJ QJ hIB OJ QJ hIB OJ QJ ^J hIB OJ QJ hIB OJ QJ hIB hIB 6]< |