Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML and XML Basics - csns - California State University, Los
Document related concepts
Transcript
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 <html> <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) HTML 4.01 (1999) XHTML 1.0 (2000) HTML 5 (2014) XML (1998) A LaTex Example http://spot.colorado.edu/~sitelic/sampl ecode/latex/ASimpleTemplate.html An XML Example <?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> <user type=“faculty”> <name>Raj Pamula</name> <office>E&T A324</office> </users> </user> How About Well-formedness of HTML? HTML (not XHTML) is more forgiving Tag and attribute names are caseinsensitive 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_dt d_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 <html> Root Element Head Section Body Section <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CS3220</title> </head> <body> <h2>CS3220</h2> </body> </html> 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 /logo.gif ./logo.gif img/logo.gif /img/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> <p>…</p> 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/WDhtml-markup-20121011/global-attributes.html Other Uses of <a> Email link <a href="mailto:[email protected]">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
