1 / 12

Web Authoring

Web Authoring. HTML Hyperlinks Multimedia Elements. Markup Languages. Authoring languages Defining the properties of elements Examples: HTML: display of web pages (pre-defined tags) XML: carriage of data (user-defined tags)

teagan-miller
Download Presentation

Web Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Authoring HTML Hyperlinks Multimedia Elements

  2. Markup Languages • Authoring languages • Defining the properties of elements • Examples: • HTML: display of web pages (pre-defined tags) • XML: carriage of data (user-defined tags) • MathML: description and display of Maths equations • XHTML: a replacement to HTML in the furture

  3. Markup Languages • Interpreted by browsers • Independent of operating system • Cross-platforming (why?) • HTML = HyperText Markup Language • Consists of tags • e.g. <XXX property=“value”>text content</XXX> Opening tag Closing tag

  4. Markup Languages 1. Download Text Document 3. Webpage is displayed 2. Interpreted by Web Browser

  5. Typical HTML Document Structure <HTML> ………………….Start of document <HEAD> ………………….Start of header <TITLE> (The Title of the page) </TITLE> (Other Header Information, e.g. search keywords) </HEAD> ………………….End of header <BODY> (Contents) </BODY> </HTML> ………………….End of document Header Main Body

  6. Other common HTML tags • <B> Bold Words </B> • <I> Italic Words </I> • <U> Underline Words </U> • <EM> Emphasize Words </EM> • <FONTsize=“…” color=“…”> Defined Font </FONT> • <H1> Section Header </H1> • H1: largest • H7: smallest

  7. Other common HTML tags • <P>…</P>Insert a new paragraph • <BR>Insert a line break • <CENTER>Centered text</CENTER>Centre some text

  8. Other common HTML tags • Insert an image into the page<IMGsrc=“image.jpg” width=“750” height=“250” border=“0”> • Hyperlink (to other pages, file, document, email)<Ahref=“nextpage.html”>Click Me</A> • Horizontal line<HR> Position of the image Width, height, border length (in pixels)

  9. Hyperlinks • <A href=“XXX.html”>…</A> or <IMG src=“XXX.png”> • Relative path (anchor w/i same site) • main.html: in the same directory • images/pic.jpg: in the subdirectory “images” • ../main.html: in the previous directory • Absolute path (anchor on the WWW) • http://www.hko.gov.hk/informtc/informcc.htm • Mailto (an email address) • <A href=“mailto:XXX@gmail.com”>Contact Us</A> • Default mail editor would pop up (e.g. Outlook)

  10. Hyperlinks • <A href=“www.yahoo.com”>Yahoo! US</A> • Wrong! • “http://” is missing, treated as relative path • Incorporating Hyperlinks • Linear: simple, easy to maintain, sequential/inconvenient access” • Hierarchical: complex, difficult maintenance, faster access

  11. Constructing Tools • Text editors • Required more HTML knowledge • Efficient, chance of coding error • Better control • HTML editors (Dreamweaver, Frontpage) • IDE: code editor + GUI builder (WYSiWYG) • User-friendly • No HTML knowledge required • Low Chance of coding error

  12. Multimedia Elements • HTML tells browser where is the multimedia file • Does not directly contain the files  text body may load prior to media files • Displayed by tags • e.g. <IMG> for images • e.g. Animations, Audio files, Video Clips<OBJECT> or <EMBED>

More Related