160 likes | 308 Views
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)
E N D
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) • MathML: description and display of Maths equations • XHTML: a replacement to HTML in the furture
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
Markup Languages 1. Download Text Document 3. Webpage is displayed 2. Interpreted by Web Browser
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
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
Other common HTML tags • <P>…</P>Insert a new paragraph • <BR>Insert a line break • <CENTER>Centered text</CENTER>Centre some text
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)
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)
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
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
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>