WEB DESIGN UNIT 2Unit 2 Module 2-5

WHAT HAVE YOU LEARNED?

What is the title tag do? Where does it show? What are the tags that need to be on every page? What is the difference between the <h1> tag and the

title tag? Why did you use the <div> tag? Why should you indent certains tags? Ex. <li>, <ul>

CHECK YOUR SITE……. Are there six pages in the parent portfolio

folder? accessibility.html graphics.html javascript.html usability.html tools.html Index.html Does each page have a distinct title that

reflects the content of the page? Are the essential tags on each page?

UNIT 2 –MODULE 3-LESSON 1-3 LISTS The most common HTML lists are either: ordered lists <ol> or unordered lists

<ul> Ordered lists are displayed with numbers Unordered lists are displayed with bullets You may also nest lists

UNIT 2 –MODULE 4, LESSON 1 LINKING TO EXTERNAL WEBSITES

We will use the following link and dissect each part to see how it reads

http://www.washington.edu/accessit/webd2/student/index.html

HERE ARE THE PIECES…..... http://www.washington.edu/accessit/webd2/student/

index.html

http:// - This is the Internet protocol, and tells the browser how to connect with the server hosting the URL.

Most documents on the web begin with http://, but they might also begin with https://, ftp://, telnet://, or others.

www.washington.edu - Domain name where the file is located.

/accessit/webd2/student/ - folder or directory where the file is located (in this example, the file index.html is stored in a subdirectory three levels deep)

index.html - the filename

UNIT 2, MODULE 4, LESSON 2-ABSOLUTE VS. RELATIVE ADDRESS

Absolute-full address; like the washington site we just looked at.

http://www.washington.edu/accessit/webd2/student/index.html

Relative-refers only to a portion of the web address, rather than to the full address

Linking two files that are already in your website. Since you are staying in your site and the files are in the root/parent folder you don’t need the full address.

TO CREATE RELATIVE LINKS

As an example, here's what the link to accessibility.html will look like:

<li> <a

href="accessibility.html">Accessibility</a>

</li>

UNIT 2, MODULE 4, LESSON 3 SPECIAL LINKS Jump to link-add an id tag id identifies a specific element on a web page. Easily access to an element so you can stylize it

with CSS or manipulate it with Javascript. You can also link to any element with an id

attribute. An id can be any text you like Text should describe the function of the element Go to the div you added with the main content

of the page, Give it an id of "main".

UNIT 2, MODULE 4, LESSON 3 SPECIAL LINKS

Here's what the opening div tag should look like when you're finished:

<div id="main"> Then add inside the body tag the

link: <div>

<a href="#main">Skip to main content</a>

</div>

UNIT 2, MODULE 4, LESSON 3 SPECIAL LINKS

Email links-go to your email address and change it so it looks like the following:

<a href="mailto:judy@ohs.edu">judy@ohs.edu</a>

UNIT 2 MODULE 5-TABLE <table>tag for the table itself <tr>-tag for the table row <th>-table header tag, this is the name

of your columns <td>-this is the data tag for the info you

are putting in your cell Add scope to your <th> <tr> or <td>

tags-this is an attribute tag.

Go to unit 2 module 5 lesson 1 and sketch our your table and determine what tags you will need.