CS3220 Web and Internet Programming HTML and XML Basics Chengyu Sun California State University, Los Angeles
HTML HyperText Markup Language, the language for creating web pages <head><title>CS3220</title></head> <body> <h2>Welcome to CS3220!</h2> </body> </html>
XML Extensible Markup Language, the general-purposed language to describe structured data <user> <name>Chengyu Sun</name> <office>ET A317</office> <phone>(323) 343-6697</phone> </user>
A Brief History of HTML and XML Early markup languages (1960s to 1980s) TeX/LaTex (1978) SGML (early 1980s) HTML (1991) XML (1998) HTML 4.01 (1999) XHTML 1.0 (2000) HTML 5 (2014)
A LaTex Example http://spot.colorado.edu/~sitelic/samplecode/latex/ASimpleTemplate.html
An XML Example Declaration Tag and attribute Element and content <?xml version="1.0" encoding="UTF-8"?> <user type=“faculty”> <name>Chengyu Sun</name> <office>ET A317</office> <phone ext=“6697” /> </user> Declaration Tag and attribute Element and content Opening (start) tag and closing (end) tag Empty element
NOT Well-Formed XML <?xml version="1.0" encoding="UTF-8"?> <users> <user type=“faculty”> <name>Chengyu Sun</Name> <office>ET A317</office> <phone ext=“6697”> </user> <name>Raj Pamula</name> <office>E&T A324</office> </users>
How About Well-formedness of HTML? HTML (not XHTML) is more forgiving Tag and attribute names are case-insensitive Some tags are self closing, e.g. <meta> and <br> Some closing tags are optional, e.g. <p>, and even <html>, <head>, <body>
Validity and Namespace of XML Issues of being a general-purposed markup language How can we decide a particular tag/attribute is valid? How can we avoid name conflicts, i.e. different people/applications/specification using the same tag name for different purposes?
Specify XML Grammar – DTD Document Type Definition DTD Example - http://www.w3schools.com/xml/xml_dtd_examples.asp
Reference DTD in XML … Reference a “private” DTD (DTD intended for use by a single author or a group of authors) <!DOCTYPE root_element SYSTEM "DTD_location"> Reference a “public” DTD <!DOCTYPE root_element PUBLIC "DTD_name" "DTD_location">
… Reference DTD in XML Example <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE user SYSTEM “mydtd.dtd”> <user type=“faculty”> <name>Chengyu Sun</name> <office>ET A317</office> <phone ext=“6697” /> </user> More at http://xmlwriter.net/xml_guide/doctype_declaration.shtml
Specify XML Grammar – XML Schema XML Schema Definition (XSD) Support data types Allow more detailed constraints Use XML syntax XSD Example - http://www.w3schools.com/xml/schema_intro.asp
XML Schema Example: web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd” id="WebApp_ID" version="3.0"> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> …. </web-app>
XML Namespace Each XML namespace is identified by a URI (Uniform Resource Identifier) Difference between URI and URL?? A namespace can be referenced as xmlns:prefix="URI”, and the elements/attributes defined in the namespace can then be used as prefix:element or prefix:attribute xmlns=“URI” defines a default namespace for which the prefix can be omitted
Developing Web Pages Create HTML pages Validate HTML pages Upload HTML pages to a server
HTML Editors Text editors, e.g. Notepad WYSIWYG editors, e.g. CKEditor in CSNS Text editors for developers, e.g. Notepad++ and Atom; IDEs like Eclipse and Visual Studio Professional tools for web designers like Adobe Dreamweaver
Use Eclipse to Create HTML Pages Create a Static Web Project Create HTML files in the WebContent folder Locate the HTML files on disk View the HTML files in a browser
Structure of an HTML Page DOCTYPE Declaration <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CS3220</title> </head> <body> <h2>CS3220</h2> </body> </html> Head Section <html> Root Element Body Section
DOCTYPE Declaration Indicates which version of HTML/XHTML the document uses Common DOCTYPE declarations HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict XHTML 1.0 Transitional HTML5
<head> Section Contain elements that provide information about the web page rather than the content of the page <title> - title for the browser tab <meta> - metadata about the page <link> - mostly used for style sheets <script> - for JavaScript
Character Set and Encoding Character set is, well, a set of characters, e.g. Unicode Encoding is the way how characters are represented in a computer as a sequence of 0’s and 1’s, e.g. UTF-8 Change default HTML encoding in Eclipse
<body> Section Contain elements that will be displayed in the browser window
Headings and Paragraphs <h1>, <h2>, …, <h6> <p> A block element always starts on a new line and can contain other elements
Other Commonly Used Block Elements … <pre> - preformatted text, i.e. whitespaces and line breaks are preserved <blockquote> <div> - a general-purposed block element used to structure a page into logical divisions that can be formatted, positioned, and/or processed.
… Other Commonly Used Block Elements <ul> - unordered list <ol> - ordered list <li> - list item
Common Inline Elements <i> - italic, <b> - bold, <u> - underlined <em> - emphasized <strong> - strongly emphasized <code> - for computer code <span> - a general-purposed inline element (like an inline version of <div>) <br> - line break
Anchor <a> Creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. <a href=“http://www.calstatela.edu”>CSULA</a> URL
Absolute and Relative URLs Absolute URL http://www.calstatela.edu/logo.gif Relative URL logo.gif img/logo.gif /logo.gif /img/logo.gif ./logo.gif ../logo.gif ../img/log.gif
Link to Locations within a Page <a href=“#section1”>Introduction</a> <a href=“#section2”>HTML Basics</a> … <h2 id=“section1”>Introduction</h2> <p>…</p> <h2 id=“section2”>HTML Basics</h2>
Some Core Attributes Attributes that are common to all HTML elements id: a unique identifier for the element title: additional information about the element class: CSS class style: inline CSS style More at https://www.w3.org/TR/2012/WD-html-markup-20121011/global-attributes.html
Other Uses of <a> Email link <a href="mailto:csun@calstatela.edu">Email Me</a> Phone link <a href=“tel:+1-323-343-6697">Call me</a>
Image <img> Attributes src: URL to the image alt: alternate text if the image cannot be displayed height and width in pixels JPEG, GIF, and PNG images are supported by most browsers Clickable image??
HTML Special Characters (HTML Entities) White space: <: < >: > &: & More at http://www.w3schools.com/html/html_entities.asp
XML/HTML Comments <!-- This is a single-line comment. --> <!-- This is a multi-line comment. --> The syntax for comments is the same for both XML and HTML
HTML Validators Automatic validation in HTML editor, e.g. Eclipse Customize the Problems view in Eclipse Browser plugins like HTML Validator and Validity Usually do not validate local files Online validator - https://validator.w3.org/
File Transfer Tools Usually need to support SFTP (Secure File Transfer Protocol) and/or SCP (Secure Copy) FileZilla Client - https://filezilla-project.org/ WinSCP - https://winscp.net/eng/download.php
Use of CS3 Server CS3 Server Information - http://csns.calstatela.edu/wiki/content/cysun/course_materials/cs3 See the [Apache/PHP] section