CS计算机代考程序代写 crawler javascript Java COMP5347: Web Application Development Introduction to HTML

程序代写 CS代考 / crawler, javascript, Java代写代考

COMP5347: Web Application Development Introduction to HTML
and CSS
Dr. Basem Suleiman
School of Computer Science
The University of Sydney
Page 1

COMMONWEALTH OF Copyright Regulations 1969 WARNING
This material has been reproduced and communicated to
you by or on behalf of the University of Sydney pursuant to Part VB of the Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Do not remove this notice.
The University of Sydney Page 2

Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– TextStyling
Content based on Ch2 and Ch3 of Fundamentals of Web Development, Global Edition.
The University of Sydney
COMP5347 Web Application Development
Page 3

HTML
“To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML” –
–
(from Hyper Text Markup Language)
A markup language is simply a way of annotating a document in such a way to make the annotations distinct from the text being annotated.
• E.g. Latex
HTML is used world wide, standardization is essential
• The W3C is the main standards organization for the World Wide Web.
–
The University of Sydney
COMP5347 Web Application Development
Page 4

Key events in the history of HTML
– First public specification by Tim Berners-Lee (1991)
– W3C standardization (1997)
– Frozen at 4.01 by W3C (1998)
– W3C’s XTHML (XML + HTML) (late 1990s)
– Survived till XHTML 2.0 in mid 2000
– WHATWG(Web Hypertext Application Technology Working Group) under W3C was formed by developers at Opera and Mozilla to challenge the idea of XML+HTML (mid 2000)
– More practical approach, e.g., specify how should browsers deal with invalid mark-up
– W3C stopped work on XHTML 2.0 and adopted the work by WHATWG and named it HTML5 (2009)
The University of Sydney
COMP5347 Web Application Development
Page 5

HTML5 – Aims
• Specify unambiguously how browsers should deal with invalid markup.
• Provide an open, non-proprietary programming framework (via Javascript) for creating rich web applications.
• Be backwards compatible with the existing web.
The University of Sydney
COMP5347 Web Application Development
Page 6

HTML: Elements and Attributes
– HTML documents = text content + HTML elements
– An HTML element
– Text, other elements, or be empty
– Identified in the HTML document by tags
– HTML elements can also contain HTML attribute
– name=valuepairthatprovidesmoreinformationabouttheHTML
element
The University of Sydney
COMP5347 Web Application Development
Page 7

What HTML lets you do
▪ Insert images using the tag
▪ Create links with the tag
▪ Create lists with the

    ,

      and

    1. tags ▪ Create headings with

      ,

      , …,

      ▪ Define metatdata with tag
      ▪ And much more…
      The University of Sydney
      COMP5347 Web Application Development
      Page 8

      Elements and Attributes
      Opening Tag Closing Tag
      Central Park
      Element Name
      Example empty element
      Attribute Trailing Slash

      Element Name
      Content
      May be text or other HTML elements
      The University of Sydney
      COMP5347 Web Application Development
      Page 9

      Nesting HTML elements
      child

      parent
      ancestor
      sibling
      This is some text

      Title goes here

      descendants

      This is important


      descendants
      children



      siblings
      The University of Sydney
      COMP5347 Web Application Development
      Page 10
      ancestors

      Nesting HTML elements
      – Browsers expect proper nesting of HTML elements
      – Importantforproperconstruction
      – A child’s ending tag must occur before its parents ending tag
      Correct Nesting

      Share Your Travels

      Share Your Travels


      Incorrect Nesting
      The University of Sydney
      COMP5347 Web Application Development
      Page 11

      Outline
      – HTML
      – Syntax
      – Structure
      – Quick Tour
      – Semantic Markups
      – CSS
      – Syntax and Location
      – Selector
      – The box model
      – TextStyling
      The University of Sydney
      COMP5347 Web Application Development
      Page 12

      Simplest HTML document
      • The element provides a broad description of the content.<br /> • The title is typically displayed by the browser in its window and/or tab<br /> 1<br /> <!DOCTYPE html><br /> <title>A Very Small Document

      This is a simple document with not much content

      The University of Sydney
      COMP5347 Web Application Development
      Page 13

      A more complete document


      1 2
      3
      5

      Main heading goes here

      …


      Share Your Travels — New York – Central Park
      6 7
      4
      The University of Sydney
      COMP5347 Web Application Development
      Page 14

      DOCTYPE
      – –
      Tells the browser what type of document it is about to process It does not indicate the HTML version
      1 2
      3
      4



      5


      Main heading goes here

      …



      Share Your Travels — New York – Central Park 6
      7
      The University of Sydney
      COMP5347 Web Application Development
      Page 15

      – – –
      HTML, Head, and Body
      , , and not required in HTML 5
      Required in XHTML most web authors continue to use them
      The contains all other elements (the root element)
      1 2
      3
      4



      5
      Share Your Travels — New York – Central Park 6 7

      Main heading goes here

      …


      The University of Sydney
      COMP5347 Web Application Development
      Page 16

      – – –
      Head and Body
      HTML pages are divided into: the head and the body
      The head contains descriptive elements about the document The body contains content to displayed by the browser
      1 2
      3
      4



      5
      Share Your Travels — New York – Central Park 6 7

      Main heading goes here

      …


      The University of Sydney
      COMP5347 Web Application Development
      Page 17

      Inside the head
      – declares the character encoding for the document, e.g., UTF-8
      – specifies reference to external file (e.g., CSS stylesheet that defines the visual look)
      1 2
      3
      4



      5


      Main heading goes here

      …



      Share Your Travels — New York – Central Park 6
      7
      The University of Sydney
      COMP5347 Web Application Development
      Page 18

      Outline
      – HTML
      – Syntax
      – Structure
      – Quick Tour
      – Semantic Markups
      – CSS
      – Syntax and Location
      – Selector
      – Theboxmodel
      – Text Styling
      The University of Sydney
      COMP5347 Web Application Development
      Page 19

      Sample Document
      1
      2

      Share Your Travels

      New York – Central Park

      Photo by Randy Connolly

      This photo of Conservatory Pond in
      Central Park 3 New York City was taken on October 22, 2011 with a
      Canon EOS 30D camera.

      4
      5 Central Park
      6

      Reviews

      7

      By Ricardo on

      Easy on the HDR buddy.

      By Susan on

      I love Central Park.

      Copyright © 2012 Share Your Travels

      8

      9
      The University of Sydney
      COMP5347 Web Application Development
      Page 20

      HTML Headings, Paragraphs and Division
      • Six levels of headings (h1, h2, … h6)
      • Used by the browser to create a
      document outline for the page
      • Tool support: HTML 5 Outliner
      • Browser’s default styling (customize by CSS)
      •

      (paragraph) container for text and HTML elements
      •

      (division) container element used for logical grouping of content
      The University of Sydney
      Page 21

      Links
      • Created using the element (anchor)
      • Consists of: the destination and the label
      Central Park
      Destination Label (text)

      Label (image)
      The University of Sydney
      Page 22

      HTML Types of Links (1)
      The University of Sydney
      COMP5347 Web Application Development
      Page 23

      HTML Types of Links (2)
      The University of Sydney
      COMP5347 Web Application Development
      Page 24

      •
      • • • •
      •
      Types of Links
      Links to external sites (or to individual resources such as images or movies on an external site)
      Links to other pages or resources within the current site
      Links to other places within the current page
      Links to a particular location on another page
      Links that are instructions to the browser to start the user’s email program
      Links that are instructions to the browser to execute a Javascript function
      The University of Sydney
      Page 25

      Images
      • Different ways to specify images:
      • Decorative images in CSS (not in the markup)
      • Background gradients and patterns, logos, border art, etc. • Content images using tag
      • Images in a gallery or the image of a product in a product details pageh
      Specifies the URL of the image to display Text in title attribute will be displayed in a popup (note: uses standard relative referencing) tool tip when user moves mouse over image.
      Central Park
      The University of Sydney
      Page 26
      Text in alt attribute provides a brief description of image’s content for users who are unable to see it.
      Specifies the width and height of image in pixels.

      Lists
      • Unordered lists

        Collections of items in no certain order; by default rendered by
        the browser as a bulleted list
        • Ordered lists

          Collections of items that have a set order; by default rendered by
          the browser as a numbered list
          • Description lists

          Collection of name and definition pairs
          The University of Sydney Page 27

          Lists

          1. Introduction
          2. Background
          3. My Solution
            1. Methodology
            2. Results
            3. Discussion
          5. Conclusion

          Notice that the list item element can contain other HTML elements

          • Home
          • About Us
          • Products
          • Contact Us

          The University of Sydney
          COMP5347 Web Application Development
          Page 28

          HTML Elements – Special Characters
          • No easy way to type them via a keyboard • Have a reserved meaning in HTML (like“<“) Entity Description   Nonbreakable space < < > >
          © ©
          ™ TM
          The University of Sydney Page 29

          Outline
          – HTML
          – Syntax
          – Structure
          – Quick Tour
          – Semantic Markups
          – CSS
          – Syntax and Location
          – Selector
          – Theboxmodel
          – Text Styling
          The University of Sydney
          COMP5347 Web Application Development
          Page 31

          Semantic markups
          – The commonly agreed good practice
          – HTML should only focus on the structure of a document
          – CSS should specify how the content should be displayed in a browser window
          – HTML5 has introduced many new semantic tags
          –

          ,

          ,

          ,

          ,

          …

          8 9

      …


      10
      The University of Sydney
      COMP5347 Web Application Development
      Page 33

      Header and Footer
      – Typicallytheheadercontains
      • the site logo
      • title (and perhaps additional subtitles or taglines)
      • horizontal navigation links, and
      • perhaps one or two horizontal banners.
      – The typical footer contains less important material, e.g.,
      • smaller text versions of the navigation,
      • copyright notices,
      • information about the site’s privacy policy, and
      • perhaps twitter feeds or links to other social sites.
      H1 deader debate: Gsnedders.html5.org/outliner
      The University of Sydney
      COMP5347 Web Application Development
      Page 34

      Navigation
      • The