Download presentation
Presentation is loading. Please wait.
1
CS3220 Web and Internet Programming HTML and XML Basics
Chengyu Sun California State University, Los Angeles
2
HTML HyperText Markup Language, the language for creating web pages
<head><title>CS3220</title></head> <body> <h2>Welcome to CS3220!</h2> </body> </html>
3
XML Extensible Markup Language, the general-purposed language to describe structured data <user> <name>Chengyu Sun</name> <office>ET A317</office> <phone>(323) </phone> </user>
4
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)
5
A LaTex Example
6
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
7
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>
8
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>
9
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?
10
Specify XML Grammar – DTD
Document Type Definition DTD Example -
11
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">
12
… 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
13
Specify XML Grammar – XML Schema
XML Schema Definition (XSD) Support data types Allow more detailed constraints Use XML syntax XSD Example -
14
XML Schema Example: web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" xmlns=" xsi:schemaLocation=" id="WebApp_ID" version="3.0"> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> …. </web-app>
15
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
16
Developing Web Pages Create HTML pages Validate HTML pages
Upload HTML pages to a server
17
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
18
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
19
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
20
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
21
<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
22
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
23
<body> Section Contain elements that will be displayed in the browser window
24
Headings and Paragraphs
<h1>, <h2>, …, <h6> <p> A block element always starts on a new line and can contain other elements
25
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.
26
… Other Commonly Used Block Elements
<ul> - unordered list <ol> - ordered list <li> - list item
27
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
28
Anchor <a> Creates a hyperlink to other web pages, files, locations within the same page, addresses, or any other URL. <a href=“ URL
29
Absolute and Relative URLs
Absolute URL Relative URL logo.gif img/logo.gif /logo.gif /img/logo.gif ./logo.gif ../logo.gif ../img/log.gif
30
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>
31
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
32
Other Uses of <a>
link <a Me</a> Phone link <a href=“tel: ">Call me</a>
33
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??
34
HTML Special Characters (HTML Entities)
White space: <: < >: > &: & More at
35
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
36
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 -
37
File Transfer Tools Usually need to support SFTP (Secure File Transfer Protocol) and/or SCP (Secure Copy) FileZilla Client - WinSCP -
38
Use of CS3 Server CS3 Server Information - See the [Apache/PHP] section
Similar presentations
