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

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> 2

The ol element ● The ol element is a regular block element that is used to specify an ordered list of items. Code <ol> <!-- list items --> </ol> 3

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> 4

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> 5

Questions? 6

Absolute and Relative URLs ● There are two types of URLs – Absolute – Relative 7

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 own 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 8

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 9

Let’s try! 10

Absolute and Relative URL 11

Questions? 12

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> 13

The img element ● The img element is an empty inline element that specifes an image. ● The most widely supported fle types for images on 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 of alt equal to “”. – width: the width of the picture in pixels – height: the height of the image in pixels 14

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