Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Lists PDF

    Загружено:

    chunkymonkey323
    9 просмотров3 страницы

    Оригинальное название

    Lists.pdf

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    9 просмотров3 страницы

    Lists PDF

    Загружено:

    chunkymonkey323

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 3

    Transcripts for

    Lecture: Lists

    In this lecture well cover lists. Lists are important in html because not only can they be
    used as a way to present information as list items but they can also be used for creating
    a menu or navigation bar as you will learn later in the course.

    The three types of lists are ordered lists, unordered lists, and definition lists.

    We will begin with unordered lists. Unordered lists involve two required tags. The first
    one is the UL tag ( <ul> ) or the unordered list tag and the second one is the LI tag ( <li> )
    or the list item tag.

    Both tags are normal tags that require a closing tag. The unordered list tag tells the
    browser tells the browser that we are creating an unordered list while the list item tag
    creates a new item in the list.

    To create a sample unordered list, lets type the necessary tags. Now lets name the title
    An Unordered Listand were going to addthe <ul> tags between the <body> tags and
    then lets add <li> , the list item tag, and the word Rock and we have to include the
    closing list item tag ( </li> )

    and lets add another <li> Paper and lets add another: Scissorsand all of these list
    item tags will go between the unordered list tagsand include the closing tag ( </ul> ).

    Now lets save this file as list1.htm and youre going to save it in your unit 5 folder. And
    now lets go to this fileand lets open itin the browser.

    Now you should see the simple unordered list that we have just created. Now there is a
    style attribute that changes the list item marker.

    So within the<ul> tag, the unordered list tag, lets add:

    style=list-style-type:square

    Lets save this file and lets go and refresh the webpage in the browser and you should
    see the difference in the style of the list item marker.

    The three valid values for the list style type attribute are d-i-s-c, thats disc, and circle,
    and square. If you dont want to use the attribute in the code, the default value is disc.

    The next type of list is the ordered list. The code for ordered lists is very similar to an
    unordered lists except that we use the ordered list tag ( <ol> ), the <ol> tag, and this
    stands for ordered list.

    Were going to use this instead of theunordered list tag so lets replace the unordered
    list tags with the <ol> tags in your codeand were going to delete the style attribute and
    list style type. Make sure you dont have that there. Also change the items from Rock,

    1|Page
    Transcripts for
    Lecture: Lists

    Paper, and Scissors to Math, English, and Science. Now lets save this file as list2.htm
    and open this file in the browser.

    Now what we see is the list is ordered numerically. Now to change the appearance of the
    item marker we can use the type attribute for the ordered list tag.

    The type attribute can take five different values. The number 1 is a default value and
    displays a numerical ordered list. A lowercase value displays a lowercase alphabetically
    ordered list and the uppercase a gives an uppercase alphabetically ordered list.

    The lowercase i gives a lowercase roman numeral ordered list and the uppercase i
    gives a uppercase roman numeral ordered list.

    Say we add:

    type=A

    within the <ol>. When we save this file and refresh in our browserwe will see that the
    uppercase alphabetically ordered list displays.

    One feature of lists is that they can be nested. We will show you this feature with the
    code we have. Say you want to add some unordered items under Math. You will then
    start with an unordered list tag ( <ul> ) after the Math item..and add the items such as:

    Algebra, Geometry, and Trigonometry.

    Now lets add the closing tag ( </ul> ) before the English andthe Science items and
    save the code as list3.htmand lets open this in our browser and what you now have is
    a nested list.

    The last type of list is a definition list. A definition list looks like a glossary list as the
    name suggests. The 3 element tags of a definition list are the <dl> tag which stands for
    definition list, the <dt> tag meaning definition term, and <dd> tag meaning definition
    description.

    We will show you how a definition list is created with a quick example. Lets open a new
    file and type in the necessary tagsand were going to name this title A Definition List.

    Okay, now letsstart the list with the <dl> tags and were going to add the first
    definition term JHU and its definition description: Johns Hopkins University.

    Let the next definition term be CTY and its definition description: Center for Talented
    Youth.

    The third definition term well make HTML and its definition description: HyperText
    Markup Language.

    2|Page
    Transcripts for
    Lecture: Lists

    The fourth definition term, lets type WWW and its definition description: World Wide
    Web. Now lets save this file as list4.htm and lets open this file in our browser.

    You should now understand how different types of lists will appear in a web page.

    This concludes the unit 5 lecture on lists.

    3|Page

    Вам также может понравиться