LIS650lecture 1 Major HTML - PowerPoint PPT Presentation

Loading...

PPT – LIS650lecture 1 Major HTML PowerPoint presentation | free to download - id: 59109-YTViM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

LIS650lecture 1 Major HTML

Description:

Class names are separated by blanks, e.g. p class='limerick funny' ... /p ... blockquote quotes a paragraph q make a short quote inside a paragraph ... – PowerPoint PPT presentation

Number of Views:36
Avg rating:3.0/5.0
Slides: 58
Provided by: open6
Learn more at: http://openlib.org
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: LIS650lecture 1 Major HTML


1
LIS650 lecture 1Major HTML
  • Thomas Krichel
  • 2004-11-14

2
the lthtmlgt element
  • It is the root element of an XHTML document.
  • It has required children ltheadgt and ltbodygt.
  • It has two optional attributes
  • the "dir" attribute says in which direction the
    contents is rendered. The classic value is "ltr",
    "rtl" is also valid.
  • the "lang" attribute says in which language the
    contents is. Use ISO 639 codes, e.g. lang"en-us"
  • these two attributes are know as the
    internationalization (i18n) attributes.
  • Example lthtml lang"en-us"gt lt/htmlgt

3
the lttitlegt element
  • This is a required child of ltheadgt.
  • It defines the title of the document.
  • It takes the i18n attributes.
  • Example
  • lthtmlgtlthead lang"en-us"gtlttitlegtA fine
  • limericklt/titlegtlt/headgtltbodygtltdivgtThere
  • was a young friar named
  • Tucklt/divgtlt/bodygtlt/htmlgt
  • It must not contain element contents.

4
usability concerns with lttitlegt
  • The title is used by the user agent in a special
    manner
  • as bookmark default title
  • as the title for a window in which the user agent
    runs
  • Google uses the title as anchor text to your web
    page.
  • It is a crucial ad for your page
  • Google may truncate the title.
  • Bad ideas for titles
  • section 1 -- home page

5
the ltbodygt element
  • This encloses the contents of the page as opposed
    to its header.
  • Validation requires one and only one body.
  • It takes the i18n attributes. as well as some
    others that we will discuss now. These fall into
    a another group of attributes we call core
    attributes.
  • We will study those core attributes now.

6
core attributes "id"
  • This attribute assigns a name to a element.
  • This name must be unique in a document. In the
    ltbodygt element, this requirement is superfluous,
    of course.
  • The "id" attribute has several roles in HTML,
    including
  • As a style sheet selector
  • As a target anchor for hypertext links

7
core attributes "class"
  • The class attribute is a friend of the "id"
    attribute.
  • It assigns one or more class names to a element.
  • Class names are separated by blanks, e.g. ltp
    class"limerick funny"gt...lt/pgt
  • The element may be said to belong to these
    classes. A class name may be shared by several
    elements.
  • The "class" attribute has several roles in HTML,
    but it is most useful as a style sheet selector,
    when you want to assign style information to a
    set of elements.

8
Example for "class" and "id"
  • ltp class"limerick" id"limerick_1"gt
  • There was a young man from Perultbr/gt
  • Whose limericks stopped at line two.lt/pgt
  • ltpgtOK, that's a stupid limerick. Let us look at
    anotherlt/pgt
  • ltp class"limerick" id"limerick_2"gt
  • There was a young man from Japanltbr/gt
  • Whose limericks would never scanltbr/gt
  • And when they asked whyltbr/gt
  • He said it is because Iltbr/gt
  • Try to put as many words into the last line as I
    possibly can.lt/pgt

9
core attributes "title"
  • The "title" attribute sets a title in use with
    the element.
  • There is no prescribed way in with the title is
    being rendered by a user agent.
  • Sometimes it is shown as a tool tip, i.e.
    something that flashes up when the mouse is
    rolled over it.
  • Example
  • lta href"http//wotan.liu.edu/home/krichel"
    title"Thomas Krichel's homepage at wotan"gtThomas
    Krichellt/agt

10
core attributes "style"
  • Use the "style" attribute to give style
    information to a particular element.
  • This will be more discussed when we do the style
    sheets.
  • Usually there are better ways to attach style
    information then writing it onto every element.
    It is better to place the tag into a class by
    giving them the same "class" attribute, and then
    give style sheet information for the class.
  • See validated.html for an example.

11
summary core attributes
  • To summarize, we have a group of core attributes.
  • These attributes can be used with almost all
    elements.
  • There are other attributes that can be almost
    universally used, called "event attributes", but
    they have to do with scripting. We may study them
    later in this course.

12
block-level vs text-level elements
  • Block-level elements contain data that is aligned
    vertical by visual user agent.
  • Text-level elements are aligned horizontally by
    visual user agents.
  • The reasons behind this distinction
  • Block level can contain other block level
    elements and text-level elements.
  • Text-level elements can not contain block-level
    elements.
  • Visual user agents start a new line at the
    beginning of block-level elements.
  • Multidirectional text would be impossible without
    it.

13
the ltdivgt and ltpgt elements
  • The ltdivgt elements allows you to set arbitrary
    block level divisions in your document.
  • It takes the core attributes.
  • RULE put all your contents that is vertically
    aligned into a ltdivgt.
  • The ltpgt tag is like ltdivgt but it signals the
    start and end of a paragraph.

14
the ltbr/gt element
  • is used to create a line break.
  • Note its emptiness!
  • It has the "clear" attribute that can take the
    values "left", "right" and "center" and "all".
    This prevents textual contents to float around
    other content.

15
The ltspangt element
  • This is another element for arbitrary divisions,
    but it operates on inline content. This is
    contents that is put in lines horizontally,
    rather than block-level contents, that is put in
    vertically.
  • Admits core attributes.
  • Put things in a ltspangt that belong together in a
    line.

16
ltspangt example
  • A worse poet however was
  • Jltspan class"r"gtennylt/spangt.ltbr/gt
  • Her limericks werent worth a Pltspan
    class"r"gtennylt/spangtltbr/gt
  • Though the invention was
  • sltspan class"r"gtoundlt/spangtltbr/gt
  • She always fltspan class"r"gtoundlt/spangtltbr/gt
  • That, whenever she tried to write ltspan
    class"r"gtanylt/spangtltbr/gt
  • She always had one line to
  • mltspan class"r"gtanylt/spangtltbr/gt.

17
abstraction ends here
  • Up until now, we have done a lot of abstract
    elements and attributes that do not achieve much
    visual impact.
  • Instead, they
  • point the style sheet to where things are
  • create a semantic design
  • We will now turn to more physical descriptions.

18
try it out
  • right click empy.html in your winscp window.
  • you will see the option to duplicate the file.
  • duplicate it, say, to tryout.html by entering
    the new name.
  • right-click tryout.html and choose edit.
  • open a user agent to
  • http//wotan.liu.edu/user/tryout.html
  • where user is the name of your user name. You
    should be able to see your changes, as last saved.

19
the ltagt element I
  • opens a hyperlink, contents of element is the
    anchor text, it is limited to text only
  • "href" attribute has the target URL
  • "hreflang" has the language of the target
  • "type" attribute gives the MIME-type of the
    target
  • Some other attributes for which we have no use
  • coords shape accesskey tabindex
  • and of course, ltagt takes the core attributes

20
the ltagt element II
  • It takes the "rel" attributes to specify the
    relationship between the current document and the
    link target, as well as the "rev" attribute to
    specify the reverse.
  • This is not currently well supported by the
    browsers.
  • I will come back to these relational attributes
    when discussing the ltlinkgt tag.
  • Example
  • lta href"http//openlib.org/home/krichel"gtMy
    professorlt/agt

21
linking to other files on wotan
  • If you want to link to a page that you already
    have in your public_html folder on wotan, you
    simply quote the name of the file
  • lta href"second_page.html"gtsecond pagelt/agt
  • Please give all the HTML files the ending .html.
  • Avoid blanks, as well as other exotic characters
    in file names. Instead of blanks, use underscores.

22
linking within a document
  • If the "id" attribute of an element in a document
    at a URL URL is set to id , you can make the
    element the target of a link.
  • You use the URL URLid for this purpose.
  • If the document linked to is the current
    document, you dont need to reference its URL.
  • example lta href "http//openlib.org/home/krichel
    joke"gtjokelt/agt links to the element with id
    "joke" in Thomas Krichel's homepage.

23
the ltimggt element I
  • makes an image.
  • "src" attribute says where the image is
  • "alt" attribute give a text to show for user
    agents that do not display image. It may be shown
    by the user agents as the user highlights the
    image. It is limited to 1024 characters.
  • "longdesc" attribute is the same as "alt" but
    does not have the length limitation.
  • Example ltimg src"thomas_krichel.jpg"
    alt"picture of Thomas Krichel"/gt

24
the ltimggt element II
  • "width" attribute gives the user agent a
    suggestion for the width of the image.
  • "height" attribute gives the user agent a
    suggestion for the height of the image
  • both can be expressed
  • in pixels, as a number
  • in age of the current display width
  • of course ltimggt admits the core attributes.

25
HTML checking
  • validated.html has some additional code (as
    compared to empty.html), that we can now
    understand.
  • ltpgt
  • lta href"http//validator.w3.org/check?urirefere
    r"gt
  • ltimg style"border 0pt"
  • src"http//wotan.liu.edu/valid-xhtml10.png"
  • alt"Valid XHTML 1.0!" height"31"
  • width"88" /gt
  • lt/agtlt/pgt
  • click on the icon to check your code. That's cool!

26
header elements
  • Headers lth1gt to lth6gt
  • All are block-level elements.
  • Vary text size based on the headers level.
  • Actual size of text of header element is selected
    by browser.
  • Results can vary significantly between user
    agents.
  • All take the core attributes.

27
lthr/gt element
  • creates a horizontal rule
  • admits the core attributes
  • other attributes have been deprecated, i.e. are
    allowed in the loose DTD but not the strict one.

28
contents-based style elements
  • ltabbrgt encloses abbreviations
  • ltacronymgt encloses acronyms
  • ltcitegt encloses citations
  • ltcodegt encloses computer code snippets
  • ltdfngt encloses things being defined
  • ltemgt encloses emphasized text
  • ltkbdgt encloses text typed on a keyboard
  • ltsampgt encloses literal samples
  • ltstronggt encloses strong text
  • ltvargt encloses variables
  • all admit the core attributes

29
physical style elements
  • ltbgt encloses bold contents
  • ltbiggt encloses big contents
  • ltsmallgt encloses small contents
  • ltigt encloses italics contents
  • ltsubgt encloses subscripted contents
  • ltsupgt encloses superscripted contents
  • ltttgt encloses typewriter-style contents
  • all admit the core attributes

30
the ltpregt element
  • encloses contents that is to be rendered with the
    characters and line breaks just like in the
    source text. Markup is still allowed, but
    elements that do spacing should not be used,
    obviously.
  • It takes the core attributes and a "width"
    attribute setting the number of characters per
    line.

31
ltblockquotegt and ltqgt elements
  • ltblockquotegt quotes a paragraph
  • ltqgt make a short quote inside a paragraph
  • both takes a "cite" attribute that take the value
    of a URL of the source of the quote.
  • They also take the core attributes.

32
list elements
  • ltolgt creates an ordered list.
  • ltligt encloses each item
  • ltulgt unordered list
  • ltligt encloses each item
  • ltdlgt encloses a definition list
  • ltdtgt encloses the term that is being defined
  • ltddgt encloses the definition
  • All take the core attributes and the i18n
    attributes.

33
ordered list example
  • The largest towns in Saarland are
  • ltolgt
  • ltligtSaarbrueckenlt/ligt
  • ltligtNeunkirchenlt/ligt
  • ltligtVoelklingenlt/ligt
  • ltligtSaarlouislt/ligt
  • lt/olgt

34
unordered list example
  • The ingredients for Dibbelabbes are
  • ltulgt
  • ltligtpotatoeslt/ligt
  • ltligtonionlt/ligt
  • ltligtlardlt/ligt
  • ltligteggslt/ligt
  • ltligtgarliclt/ligt
  • ltligtleekslt/ligt
  • ltligtoil (for frying)lt/ligt
  • lt/ulgt

35
definition list example
  • Here are some derogatory terms in Saarland
    dialect.
  • ltdlgtltdtgtTraanfunsellt/dtgtltddgta lazy, slow
    personlt/ddgtltdtgtLabedudelaelt/dtgtltddgta lazy and
    badly organized person, who never gets anything
    donelt/ddgtltdtgtSchmierpisslt/dtgtltddgta person of poor
    body hygienelt/ddgtlt/dlgt

36
Tables
  • HTML allows to align contents is tabular form.
  • Tables may have a caption and/or a summary.
  • Both describe the table.
  • The latter is longer than the former.
  • Table rows are aligned vertically.
  • Table columns are aligned horizontally.
  • Cells are at the intersection between rows and
    columns.

37
table illustration
  • A table is a matrix formed by the intersection of
    a number of horizontal rows and vertical columns.
  • Column 1 Column 2
    Column 3
  • Row 1
  • Row 2
  • Row 3

38
HTML table design
  • It tries to make simple things simple without
    making sophisticated things impossible
  • It takes account of the fact that the absolute
    width of the table can not be controlled by the
    HTML writer but it is the hands of the reader.
  • Not all things one would like to do are
    supported.
  • Sometimes tables can lead to excessive scrolling.
    Use of style sheets is recommended when the table
    has mainly a visual function, see Thomas'
    homepage for a bad example.

39
elements attributes not covered
  • Many points in the table spec of HTML have one
    or more of the following attributes
  • mainly important for non-visual rendering
  • complicate abstract
  • little used
  • mainly a verbosity reduction feature
  • So I am omitting some of them in the discussion

40
more table talk that is not covered
  • Table rows may be grouped into
  • head section
  • body section
  • foot section
  • Table columns may also be grouped into more
    arbitrary ways in so-called column groups.
  • Table cells can contain
  • header information
  • table data

41
the lttablegt element
  • It encloses a table. It takes the i18n and core
    attributes.
  • The "summary" attribute provides a summary of the
    table's purpose and structure for user agents
    rendering to non-visual media such as speech and
    Braille.
  • The "width" attribute specifies the desired width
    of the entire table. It is intended for visual
    user agents. When the value is a percentage
    value, the value is relative to the user agent's
    available horizontal space.

42
the "frame" attribute of lttablegt
  • This attribute specifies which sides of the frame
    surrounding a table will be visible. Possible
    values
  • void no sides. This is the default value.
  • above the top side only
  • below the bottom side only
  • hsides the top and bottom sides only
  • vsides the right and left sides only
  • lhs the left-hand side only
  • rhs the right-hand side only
  • box all four sides
  • border all four sides

43
the "rules" attribute of lttablegt
  • This attribute specifies which rules will appear
    between cells within a table. Possible values
  • none no rules. This is the default.
  • groups rules between row groups only.
  • rows rules between rows only.
  • cols rules between columns only.
  • all rules between all rows and columns

44
the "border" attribute of lttablegt
  • This attribute sets the width of the frame of a
    table, if it is set to be visible. The value can
    only be a pixel number.
  • Rules and frames can make for visual noise.

45
the ltcaptiongt element
  • It is used to give a caption to the table.
  • It takes the i18n and the core attributes.
  • It is only allowed immediately after the lttablegt
    tag start.
  • There can only be one ltcaptiongt in any one
    lttablegt.
  • We will now study the alignment attributes. This
    is an attribute group widely used in tables.
    lttablegt also takes those attributes.

46
alignment the "align" attribute
  • The "align" attribute specifies the alignment of
    data and the justification of text in a cell.
    Possible values
  • left left-flush data or left-justify text.
  • This is the default value for table data.
  • center center data or center-justify text.
  • This is the default value for table headers.
  • right right-flush data or right-justify text.
  • justify double-justify text
  • char align text around a specific character as
    set with a "char" attribute

47
alignment the "valign" attribute
  • The "valign" attribute specifies the vertical
    position of data within a cell. Possible values
  • top Cell data is flush with the top of the
    cell.
  • middle Cell data is centered vertically within
    the cell.
  • This is the default value.
  • bottom Cell data is flush with the bottom of the
    cell.
  • baseline All cells in the same row as a cell
    whose valign attribute has this value should have
    their textual data positioned so that the first
    text line occurs on a baseline common to all
    cells in the row. This constraint does not apply
    to subsequent text lines in these cells.

48
alignment "char" and "charoff"
  • The "char" attribute specifies a single character
    within a text fragment to act as an axis for
    alignment. The default value for this attribute
    is the decimal point character for the current
    language as set by the "lang" attribute.
  • The "charoff" attribute specifies the offset to
    the first occurrence of the alignment character
    on each line. If a line doesn't include the
    alignment character, it should be horizontally
    shifted to end at the alignment position. The
    direction of offset is determined by the current
    text direction, as set by the "dir" attribute.
    (obscure)

49
alignment "cellspacing"
  • The "cellspacing" attribute specifies how much
    space the user agent should leave
  • between the left side of the table and the
    left-hand side of the leftmost column
  • between the top of the table and the top side of
    the top row,
  • between the right side of the table and the
    right-hand side of the right most column
  • between the bottom of the table and the bottom
    side of the last row
  • The attribute also specifies the amount of space
    to leave between cells.

50
alignment attributes "cellpadding"
  • Does the same as cellspacing, but gives the
    distance between the border of the cell and the
    and the contents.
  • Note that "cellpadding" and "cellspacing" can
    only one length.
  • if it is pixel, horizontal and vertical
    dimensions are the some
  • if it is a percentage, horizontal and vertical
    space are different as the percentage is applied
    to the

51
lttrgt element
  • It encloses a table row.
  • It takes the alignment attributes.
  • It takes the i18n attributes.
  • It takes the core attributes.

52
the lttdgt element
  • encloses a cell in a table that is not a header
    cell.
  • It admits the alignment and core attributes
  • It has an "abbr" attribute for abbreviated
    contents.
  • Its "rowspan" and "colspan" attributes say how
    many rows or columns the cell spans.
  • It has a "headers" attribute specifies the list
    of header cells that provide header information
    for the current data cell. The value of this
    attribute is a space-separated list of header
    cell "id" attribute values. (you can ignore this)
  • It takes an "axis" attributes, whose purpose is
    so abstract that I will not cover it here.

53
the ltthgt element
  • encloses a header cell
  • It admits the same attributes as lttdgt, but
    "headers" does make no sense here.
  • Instead, we have a "scope" attribute that
    specifies the set of data cells for which the
    current header cell provides header information.
    It can take the values
  • row The current cell provides header information
    for the rest of the row that contains it.
  • col The current cell provides header information
    for the rest of the column that contains it.
  • rowgroup The header cell provides header
    information for the rest of the row group that
    contains it.
  • colgroup The header cell provides header
    information for the rest of the column group that
    contains it.

54
Example by Lesk (1976)
55
Example by Lesk (1976)
56
Lesk's most famous
57
http//openlib.org/home/krichel
  • Please shutdown the computers when
  • you are done.
  • Thank you for your attention!
About PowerShow.com