HTML and XML Basics - csns - California State University, Los
Download
Report
Transcript HTML and XML Basics - csns - California State University, Los
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