Web Site Design and Development Lecture 4 CS 0134 Fall 2018 T - - PowerPoint PPT Presentation

Web Site Design and Development Lecture 4

CS 0134 Fall 2018 T ues and Thurs 1:00 – 2:15PM

2

The ul element

• The ul element is a regular block

element that is used to specify an unordered list of items.

Code

<ul> <!-- list items --> </ul>

3

The ol element

• The ol element is a regular block

element that is used to specify an

• rdered list of items.

Code

<ol> <!-- list items --> </ol>

4

The li element

• The li element is a regular block

element that is used to specify a list item.

Code

<li>Allegheny</li> <li>Armstrong</li>

5

Examples of ul and ol

Code In Browser

<ul> <li>Allegheny</li> <li>Armstrong</li> <li>Butler</li> </ul> <ol> <li>Step 1: …</li> <li>Step 2: …</li> <li>Step 3: …</li> </ol>

6

Questions?

7

Absolute and Relative URLs

• There are two types of URLs

– Absolute – Relative

8

Absolute URLs

• Absolute URLs are what we have seen before. These

are URLs that include the protocol and domain name.

• You use absolute URLs when you want your HTML

element to point to a web page or fle on another website.

• Do not use absolute URLs to point to pages on your
• wn website as this will keep your website from

being easily portable if you move from one domain to another.

• Examples

– https://pitt.edu/~ach54/index.html – https://en.wikipedia.org/wiki/URL

9

Relative URLs

• A relative URL is one that you base on the

folder or website that your HTML fle lives in

• There are two types of relative URLs

– Root-relative: these URLs are based on the targeted

fle’s location in relation to the root of your website. These URLs start with a ‘/’.

• Example: /css/style.css

– Document-relative: these URLs are based on where the

HTML fle that you are editing is located. These URLs will start with the name of a subfolder or ‘../’ to move to the parent folder frst.

• Example: ../images/favicon.ico

10

Let’s try!

11

Absolute and Relative URL

12

Questions?

13

The <a> element

• The <a> element is a regular inline element

that specifes a link to something else.

• The content of the <a> element should

accurately indicate what is being linked to.

• Attribute

– href: absolute or relative URL

Code In Browser

<a href=”/homework.html”> Homework </a>

14

The img element

• The img element is an empty inline element that

specifes an image.

• The most widely supported fle types for images
• n web pages is jpeg, gif and png.
• Attributes

– src: a URL pointing to the picture – alt: a textual description of a picture. For accessibility if the

picture is useful content, ensure that the description is clear and accurate. If a picture is purely cosmetic, make the value

• f alt equal to “”.

– width: the width of the picture in pixels – height: the height of the image in pixels

15

Example of img element

Code <img src=”img/seal.png” alt=”The University of Pittsburgh’s Seal”> In Browser